/* =========================================================
   ISA ERP — Mobile App Shell (Teacher & Parent)
   =========================================================
   Scope: body[data-role="teacher"] / body[data-role="parent"] at
   <=992px, plus body.login-body (viewport-only, role unknown pre-auth).
   Desktop + tablet-large markup and CSS are untouched — this file only
   ADDS a parallel mobile presentation layer. See:
   database/MOBILE_PATTERN_REFERENCE.md for usage rules.
   ========================================================= */

:root {
  /* ---- Mobile design tokens (namespaced --m-*, additive only) ---- */
  --m-font: var(--isa-font, "Inter", system-ui, -apple-system, sans-serif);

  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 20px;
  --m-space-6: 24px;
  --m-space-8: 32px;

  --m-radius-sm: 12px;
  --m-radius-md: 16px;
  --m-radius-lg: 20px;
  --m-radius-xl: 24px;
  --m-radius-pill: 999px;

  --m-topbar-h: 58px;
  --m-bottomnav-h: 62px;
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-safe-b: env(safe-area-inset-bottom, 0px);

  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-duration-fast: 0.15s;
  --m-duration: 0.25s;
  --m-duration-slow: 0.4s;
  --m-tap-scale: 0.97;

  --m-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --m-elevation-2: 0 6px 20px rgba(15, 23, 42, 0.08);
  --m-elevation-3: 0 16px 40px rgba(15, 23, 42, 0.16);
}

body.m-sheet-locked {
  overflow: hidden;
}

/* =========================================================
   Utility: tap feedback (apply to any interactive mobile element)
   ========================================================= */
.m-tap {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--m-duration-fast) var(--m-ease), opacity var(--m-duration-fast) var(--m-ease);
}
.m-tap:active {
  transform: scale(var(--m-tap-scale));
  opacity: 0.88;
}

/* =========================================================
   Mobile shell + screens are hidden by default (desktop/tablet-large).
   Revealed only inside the <=992px media query further below, and only
   for teacher/parent (data-role) or the login page (role unknown pre-auth).
   ========================================================= */
/* !important is required here: .m-topbar/.m-bottomnav/.m-sheet/.m-fab each
   declare their OWN display (flex/grid) later in this file at equal
   specificity to the plain-class selectors below, which would otherwise win
   the cascade tie by source order and make the shell visible at ALL
   viewports. Only the higher-specificity, role+viewport-scoped rules in the
   "ACTIVATE MOBILE SHELL" media query (also !important) may re-enable them. */
.m-shell,
.m-home,
.m-screen,
.m-bottomnav,
.m-sheet-backdrop,
.m-fab,
.m-dct-sess-nav,
.m-att-mark-nav,
.m-att-mark-desk,
.m-att-corr-nav,
.m-att-corr-head,
.m-stu-list-nav,
.m-stu-list-head,
.m-stu-filters,
.m-stu-prof-nav,
.m-perf-entry-nav,
.m-perf-entry-head,
.m-perf-more-filters,
.m-csp-control,
.m-csp-view-toggle,
.m-sm-lib-control,
.m-sm-lib-toolbar,
.m-sm-wizard-head,
.m-sm-wizard-foot,
#mMarkActionBar {
  display: none !important;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.m-topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: var(--m-space-2);
  height: calc(var(--m-topbar-h) + var(--m-safe-t));
  padding: calc(var(--m-safe-t) + 8px) var(--m-space-3) 8px;
  background: var(--isa-surface-strong);
  backdrop-filter: var(--isa-blur);
  -webkit-backdrop-filter: var(--isa-blur);
  box-shadow: 0 1px 0 var(--isa-border), 0 8px 24px -16px rgba(15, 23, 42, 0.15);
}

.m-topbar-lead {
  flex: 0 0 auto;
}

.m-topbar-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--m-radius-pill);
  display: grid;
  place-items: center;
  background: var(--isa-grad-brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--isa-surface-strong), 0 0 0 3.5px var(--isa-border);
}
.m-topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-topbar-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.m-topbar-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--isa-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.m-topbar-subtitle {
  font-size: 0.72rem;
  color: var(--isa-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.m-topbar-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  border: none;
  background: var(--isa-bg);
  padding: 3px 8px 3px 3px;
  border-radius: var(--m-radius-pill);
  flex: 0 0 auto;
}
.m-topbar-switch svg,
.m-topbar-switch i {
  width: 14px;
  height: 14px;
  color: var(--isa-text-muted);
  flex: 0 0 auto;
  margin-left: 2px;
}
.m-topbar-switch-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--isa-grad-brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  flex: 0 0 auto;
  overflow: hidden;
}
.m-topbar-switch-avatar--photo {
  padding: 0;
  line-height: 0;
  background: transparent;
}
.m-topbar-switch-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.m-topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--isa-bg);
  border-radius: var(--m-radius-pill);
  padding: 3px;
}
.m-topbar-actions:empty {
  display: none;
}
.m-topbar-actions .m-topbar-switch {
  background: transparent;
  padding: 0 6px 0 0;
}

.m-icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--m-radius-pill);
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--isa-text);
}
.m-topbar-actions > .m-icon-btn {
  width: 34px;
  height: 34px;
}
.m-icon-btn svg,
.m-icon-btn i {
  width: 18px;
  height: 18px;
}
.m-icon-btn .m-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--isa-danger);
  border: 1.5px solid var(--isa-surface-strong);
}

/* =========================================================
   BOTTOM NAV
   ========================================================= */
.m-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1045;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  height: calc(var(--m-bottomnav-h) + var(--m-safe-b));
  padding-bottom: var(--m-safe-b);
  background: var(--isa-surface-strong);
  backdrop-filter: var(--isa-blur);
  -webkit-backdrop-filter: var(--isa-blur);
  border-top: 1px solid var(--isa-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.m-navitem {
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--isa-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 6px 2px 0;
  position: relative;
}
.m-navitem svg,
.m-navitem i {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}
.m-navitem span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-navitem.is-active {
  color: var(--isa-primary-fx);
}
.m-navitem .m-navitem-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 15px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--isa-danger);
  border: 1.5px solid var(--isa-surface-solid);
}

/* =========================================================
   BOTTOM SHEET (More menu, child switcher, and skin for
   ISA.alert / ISA.confirm / searchable-select on mobile)
   ========================================================= */
.m-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1990;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-duration) var(--m-ease);
}
.m-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.m-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1995;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--isa-surface-solid);
  border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0;
  box-shadow: var(--m-elevation-3);
  transform: translateY(102%);
  transition: transform var(--m-duration-slow) var(--m-ease), visibility 0s linear var(--m-duration-slow);
  padding-bottom: calc(var(--m-space-4) + var(--m-safe-b));
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.m-sheet.is-open {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  z-index: 2100;
  transition: transform var(--m-duration-slow) var(--m-ease), visibility 0s linear 0s;
}

.m-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-border-strong);
  margin: 10px auto 4px;
  flex: 0 0 auto;
}

.m-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-3);
  padding: var(--m-space-2) var(--m-space-5) var(--m-space-3);
  flex: 0 0 auto;
}
.m-sheet-head-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-sheet-head strong {
  font-size: 1.05rem;
  color: var(--isa-text);
  line-height: 1.2;
}
.m-sheet-head-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--isa-text-muted);
  line-height: 1.3;
}
.m-sheet-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--isa-bg-accent);
  display: grid;
  place-items: center;
  color: var(--isa-text-secondary);
  flex: 0 0 auto;
}
.m-sheet-close svg,
.m-sheet-close i {
  width: 16px;
  height: 16px;
}

.m-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--m-space-5) var(--m-space-3);
}
#mChildSheet .m-sheet-body {
  padding: 4px var(--m-space-4) calc(var(--m-space-4) + var(--m-safe-b, 0px));
}

.m-sheet-section-label {
  padding: var(--m-space-2) var(--m-space-3) 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--isa-text-muted);
}

.m-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--m-space-2);
  padding: var(--m-space-1) var(--m-space-2) var(--m-space-4);
}

.m-sheet-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: var(--m-space-2) 2px;
  border-radius: var(--m-radius-md);
  color: var(--isa-text);
  text-align: center;
  position: relative;
}
.m-sheet-tile-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--m-radius-lg);
  display: grid;
  place-items: center;
  background: var(--isa-primary-soft);
  color: var(--isa-primary-fx);
}
.m-sheet-tile-icon svg,
.m-sheet-tile-icon i {
  width: 22px;
  height: 22px;
}
.m-sheet-tile span {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}
.m-sheet-tile .m-navitem-dot {
  top: -2px;
  right: calc(50% - 27px);
}

.m-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--m-space-2);
}
.m-sheet-row {
  display: flex;
  align-items: center;
  gap: var(--m-space-3);
  padding: var(--m-space-3) var(--m-space-3);
  border-radius: var(--m-radius-md);
  border: none;
  background: transparent;
  color: var(--isa-text);
  text-align: left;
}
.m-sheet-row .m-sheet-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--m-radius-sm);
  display: grid;
  place-items: center;
  background: var(--isa-bg-accent);
  color: var(--isa-text-secondary);
  flex: 0 0 auto;
}
.m-sheet-row .m-sheet-row-icon svg,
.m-sheet-row .m-sheet-row-icon i {
  width: 17px;
  height: 17px;
}
.m-sheet-row strong {
  font-size: 0.88rem;
  font-weight: 600;
  flex: 1 1 auto;
}
.m-sheet-row > span:not(.m-sheet-row-icon) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.m-sheet-row em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--isa-text-secondary);
  line-height: 1.35;
}
.m-sheet-row.is-unread .m-sheet-row-icon {
  background: color-mix(in srgb, var(--isa-warning) 18%, var(--isa-bg-accent));
  color: var(--isa-warning);
}
.m-notif-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 var(--m-space-2);
}
.m-sheet-row--danger strong,
.m-sheet-row--danger .m-sheet-row-icon {
  color: var(--isa-danger);
}
.m-sheet-row--danger .m-sheet-row-icon {
  background: var(--isa-danger-soft);
}

.m-sheet-divider {
  height: 1px;
  background: var(--isa-border);
  margin: var(--m-space-2) var(--m-space-3);
}

/* Child switcher — full-width list rows. Never reuse .topbar-child-switcher
   here (desktop chip max-width: 36vw would crush names in the sheet). */
.m-child-grid,
#mChildSheet .m-child-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: none;
  min-width: 0;
}
.m-child-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  border: 1.5px solid var(--isa-border);
  background: var(--isa-surface-solid);
  border-radius: var(--m-radius-lg);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--m-elevation-1, 0 1px 2px rgba(15, 23, 42, 0.04));
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.m-child-card:active {
  transform: scale(0.985);
}
.m-child-card.is-active {
  border-color: var(--isa-primary);
  background: var(--isa-primary-soft);
  box-shadow: 0 0 0 3px var(--isa-primary-soft);
}
.m-child-card-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--isa-grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  flex: 0 0 48px;
  box-shadow: 0 4px 12px -3px rgba(15, 23, 42, 0.22);
}
.m-child-card-avatar--photo {
  padding: 0;
  line-height: 0;
  background: transparent;
  box-shadow: 0 4px 12px -3px rgba(15, 23, 42, 0.18);
}
.m-child-card-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 50%;
}
.m-child-card-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--isa-primary);
  color: #fff;
  border: 2px solid var(--isa-surface-solid);
}
.m-child-card-badge svg,
.m-child-card-badge i {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}
.m-child-card-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.m-child-card strong {
  width: 100%;
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--isa-text);
  /* Prefer wrapping over early ellipsis — parents must read full names. */
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.m-child-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.m-child-card-code,
.m-child-card em.m-child-card-code {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--isa-text-secondary);
  background: var(--isa-bg-accent, rgba(15, 23, 42, 0.05));
  border-radius: var(--m-radius-pill, 999px);
  padding: 3px 8px;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-child-card-state {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 750;
  color: var(--isa-primary-fx);
  letter-spacing: 0.01em;
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-primary);
  border-radius: var(--m-radius-pill, 999px);
  padding: 3px 8px;
  line-height: 1.2;
}
.m-child-card-trail {
  flex: 0 0 28px;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.m-child-card-chev {
  display: inline-flex;
  color: var(--isa-text-muted);
  opacity: 0.75;
}
.m-child-card-check {
  display: inline-flex;
  color: var(--isa-primary-fx);
}
.m-child-card-chev svg,
.m-child-card-chev i,
.m-child-card-check svg,
.m-child-card-check i {
  width: 18px;
  height: 18px;
}

/* =========================================================
   FLOATING ACTION BUTTON
   ========================================================= */
.m-fab {
  position: fixed;
  right: var(--m-space-4);
  bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-4));
  z-index: 1035;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px 0 18px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-grad-brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  box-shadow: var(--isa-shadow-primary, var(--m-elevation-3));
}
.m-fab svg,
.m-fab i {
  width: 19px;
  height: 19px;
}

/* =========================================================
   CARDS / SECTIONS
   ========================================================= */
.m-home,
.m-screen {
  /* width/min-width are mandatory: these sit in flex column desks
     (.adm-workbench). Default min-width:auto lets day-tab / chip
     intrinsic widths (~640px) inflate the screen to max-width (560)
     and clip on phones (~390). */
  width: 100%;
  max-width: 560px;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--m-space-4) var(--m-space-4) calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-8));
  margin: 0 auto;
}

/* Day-tab row (mobile "This Week") — 7-up Mon…Sun. Prefer shrink-to-fit;
   allow gentle horizontal scroll only when the strip would otherwise clip. */
.m-daytabs {
  display: flex;
  gap: 5px;
  margin-bottom: var(--m-space-4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-daytabs::-webkit-scrollbar {
  display: none;
}
.m-daytab {
  flex: 1 1 0;
  /* 0 — not 2.6rem — so 7 tabs can share a ~360px row without
     inflating .m-screen past the viewport via min-width:auto. */
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: 1px solid var(--isa-border);
  border-radius: var(--m-radius-md);
  background: var(--isa-surface-solid);
  color: var(--isa-text-secondary);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.m-daytab em {
  font-size: 0.92rem;
  font-weight: 800;
  font-style: normal;
  color: var(--isa-text);
}
.m-daytab.is-today {
  border-color: var(--isa-primary);
}
.m-daytab .m-daytab-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--isa-primary);
}
.m-daytab.is-active {
  background: var(--isa-primary);
  border-color: var(--isa-primary);
  color: rgba(255, 255, 255, 0.85);
}
.m-daytab.is-active em {
  color: #fff;
}
.m-daytab.is-active .m-daytab-dot {
  background: var(--isa-surface-solid);
}

/* Full Timetable mobile screen — hero + spotlight + day feed */
.m-tt-week .m-tt-hero {
  margin-bottom: var(--m-space-5);
  padding: var(--m-space-4);
  border-radius: var(--m-radius-xl);
  /* Theme tokens only — never hardcode light mint (#f0fdf4); that tint
     bleeds white in night mode. Matches desktop .tt-student-hero. */
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--isa-primary-rgb), 0.14), transparent 55%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--isa-primary) 10%, var(--isa-surface-strong)) 0%,
      var(--isa-surface-strong) 100%
    );
  border: 1px solid rgba(var(--isa-primary-rgb), 0.2);
  box-shadow: var(--m-elevation-1);
}
.m-tt-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--m-space-3);
  margin-bottom: var(--m-space-3);
}
.m-tt-eyebrow {
  margin: 0 0 2px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--isa-primary-fx);
}
.m-tt-hero-copy h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--isa-text);
  line-height: 1.2;
}
.m-tt-place {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--isa-text-muted);
  line-height: 1.35;
}
.m-tt-av {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--isa-primary), #0ea5e9);
  box-shadow: 0 6px 14px rgba(var(--isa-primary-rgb), 0.28);
}
.m-tt-av img,
.m-tt-av .stu-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}
.m-tt-av .adm-work-avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: none;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
}
.m-tt-spot {
  display: flex;
  align-items: center;
  gap: var(--m-space-3);
  padding: 12px 14px;
  border-radius: var(--m-radius-lg);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  margin-bottom: var(--m-space-3);
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}
.m-tt-spot.is-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.m-tt-spot.is-clickable:active {
  transform: scale(0.985);
}
.m-tt-spot.is-live {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), var(--isa-surface-solid));
  box-shadow: var(--m-elevation-2);
}
.m-tt-spot.is-late {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), var(--isa-surface-solid));
}
.m-tt-spot-kicker {
  margin: 0 0 2px;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--isa-primary-fx);
}
.m-tt-spot.is-live .m-tt-spot-kicker { color: #b45309; }
.m-tt-spot.is-late .m-tt-spot-kicker { color: #b91c1c; }
.m-tt-spot-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.m-tt-spot-copy strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--isa-text);
  line-height: 1.25;
}
.m-tt-spot-copy > .m-tt-spot-meta,
.m-tt-spot-copy > span.m-tt-spot-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--isa-text-muted);
}
.m-tt-spot-copy .tt-change-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 2px;
}
.m-tt-spot-copy .tt-sub-chip {
  margin: 0;
}
.m-tt-spot.is-substitute {
  border-color: rgba(245, 158, 11, 0.45);
}
.m-tt-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.m-tt-kpi {
  padding: 8px 6px;
  border-radius: 12px;
  background: var(--isa-input-fill);
  border: 1px solid rgba(148, 163, 184, 0.2);
  text-align: center;
}
.m-tt-kpi em {
  display: block;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--isa-text-muted);
  margin-bottom: 2px;
}
.m-tt-kpi strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--isa-text);
  font-variant-numeric: tabular-nums;
}
.m-tt-kpi.is-today strong {
  color: var(--isa-primary-fx);
}
.m-tt-week-head {
  margin-bottom: var(--m-space-3);
}
.m-tt-week-range {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--isa-text-muted);
}
.m-tt-dayhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m-space-3);
  margin: 0 2px var(--m-space-3);
}
.m-tt-dayhead strong {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--isa-text);
}
.m-tt-dayhead span {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--isa-text-muted);
}
button.m-tt-slot,
.m-tt-slot {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.m-tt-slot .m-tt-slot-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
}
.m-tt-slot .m-tt-slot-meta {
  display: inline;
  margin-top: 0;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 650;
  color: #94a3b8;
  flex: 0 0 auto;
}
.m-tt-slot .m-tt-class-chip,
.m-tt-slot .tt-class-chip {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: min(10rem, 100%);
  margin-top: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--isa-text, #0f172a);
  background: color-mix(in srgb, var(--isa-surface-solid, #fff) 88%, var(--isa-primary, #22b05f) 12%);
  border: 1px solid color-mix(in srgb, var(--isa-border, #e2e8f0) 70%, var(--isa-primary, #22b05f) 30%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme="night"] .m-tt-slot .m-tt-class-chip,
html[data-theme="night"] .m-tt-slot .tt-class-chip {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: none;
}
.m-tt-slot.is-clickable:active {
  transform: scale(0.99);
}
.m-tt-feed {
  transition: opacity 0.16s ease;
  will-change: opacity;
}
.m-tt-feed.is-switching {
  opacity: 0.28;
  pointer-events: none;
}
.m-tt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--m-space-6) var(--m-space-4) !important;
}
.m-tt-empty strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--isa-text);
}
.m-tt-empty span {
  display: block;
  font-size: 0.78rem;
  color: var(--isa-text-muted);
}

.m-section {
  margin-bottom: var(--m-space-6);
}
.m-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--m-space-3);
  padding: 0 2px;
}
.m-section-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--isa-text);
  margin: 0;
}
.m-section-head h3 svg,
.m-section-head h3 i {
  color: var(--isa-text-muted);
}
.m-section-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--isa-primary-fx);
}
.m-section-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--isa-text-muted);
  flex: 0 0 auto;
}
.m-block-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: var(--m-space-3);
  padding: var(--m-space-3);
  border-radius: var(--m-radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--isa-primary-fx);
}

.m-card {
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  border-radius: var(--m-radius-lg);
  box-shadow: var(--m-elevation-1);
}

/* Hero — a clean elevated surface card (white, like the rest of the app),
   NOT a glowing/gradient banner. Flat white surface + a hairline border +
   soft elevation only — color is spent on the avatar and icons, not the
   card background, so it reads as "premium app profile card" (Stripe/
   Linear/Notion) rather than a neon/techy promo banner. */
.m-hero {
  display: flex;
  align-items: center;
  gap: var(--m-space-4);
  padding: var(--m-space-5);
  border-radius: var(--m-radius-xl);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  color: var(--isa-text);
  margin-bottom: var(--m-space-5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--m-elevation-2);
}
.m-hero-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--isa-grad-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.3rem;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.m-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.m-hero-copy {
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.m-hero-eyebrow {
  font-size: 0.7rem;
  color: var(--isa-text-muted);
  opacity: 1;
  margin: 0 0 2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.m-hero-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--isa-text);
  margin: 0 0 3px;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-hero-sub {
  font-size: 0.8rem;
  color: var(--isa-text-secondary);
  opacity: 1;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.m-hero-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-bg);
  border: 1px solid var(--isa-border);
  color: var(--isa-text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

/* Child switch trigger — floats in the hero's own corner (Home screen
   only) so switching happens right where the per-child data is shown,
   instead of a second control duplicated in the topbar. */
.m-hero-switch {
  position: absolute;
  z-index: 2;
  top: var(--m-space-3);
  right: var(--m-space-3);
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 10px 0 12px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-bg);
  border: 1px solid var(--isa-border);
  color: var(--isa-primary-fx);
  font-size: 0.72rem;
  font-weight: 700;
}
.m-hero-switch svg,
.m-hero-switch i {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

/* Greeting header — plain page copy above the hero card (no bell/avatar
   here; those already live in .m-topbar, so we don't duplicate controls). */
.m-greet {
  padding: var(--m-space-2) 2px var(--m-space-5);
}
.m-greet-hello {
  margin: 0;
  font-size: 0.85rem;
  color: var(--isa-text-secondary);
  font-weight: 600;
}
.m-greet-title {
  margin: 2px 0 5px;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--isa-text);
  line-height: 1.2;
}
.m-greet-sub {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--isa-text-muted);
  font-weight: 600;
}
.m-greet-sub svg,
.m-greet-sub i {
  width: 14px;
  height: 14px;
  color: var(--isa-secondary);
}

/* Hero v2 — stacked layout used on Home: avatar+copy row on top, then a
   2×2 fact grid (Class/Batch/Section/Program) below a hairline divider.
   Keep 2×2 on all phone widths — a 4-across row truncates labels ("Cla…"). */
.m-hero--v2 {
  display: block;
}
.m-hero-top {
  display: flex;
  align-items: center;
  gap: var(--m-space-4);
  position: relative;
  z-index: 1;
}
.m-hero--v2 .m-hero-title {
  white-space: normal;
  overflow: visible;
}
.m-hero--v2 .m-hero-chip {
  margin: 4px 0 2px;
  display: inline-flex;
}
.m-hero-facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-space-2);
  margin-top: var(--m-space-4);
  padding-top: var(--m-space-4);
  border-top: 1px solid var(--isa-border);
}
.m-hero-fact {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--m-radius-md);
  background: var(--isa-bg);
}
.m-hero-fact-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--isa-surface-solid);
  color: var(--isa-primary-fx);
}
.m-hero-fact-ico svg,
.m-hero-fact-ico i {
  width: 14px;
  height: 14px;
}
.m-hero-fact > div {
  min-width: 0;
}
.m-hero-fact em {
  display: block;
  font-size: 0.6rem;
  font-weight: 650;
  color: var(--isa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-style: normal;
}
.m-hero-fact strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--isa-text);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  word-break: break-word;
}

/* KPI row — horizontal scroll snap, native-app style (never a squeezed table) */
.m-kpi-row {
  display: flex;
  gap: var(--m-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  margin: 0 calc(var(--m-space-4) * -1) var(--m-space-6);
  padding-left: var(--m-space-4);
  padding-right: var(--m-space-4);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.m-kpi-row::-webkit-scrollbar {
  display: none;
}
.m-kpi {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 128px;
  padding: var(--m-space-4);
  border-radius: var(--m-radius-lg);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  box-shadow: var(--m-elevation-1);
  color: var(--isa-text);
}
.m-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--m-radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: var(--m-space-2);
  background: var(--isa-primary-soft);
  color: var(--isa-primary-fx);
}
.m-kpi-icon svg,
.m-kpi-icon i {
  width: 16px;
  height: 16px;
}
.m-kpi--warning .m-kpi-icon { background: var(--isa-warning-soft); color: var(--isa-warning); }
.m-kpi--success .m-kpi-icon { background: var(--isa-success-soft); color: var(--isa-success); }
.m-kpi--info .m-kpi-icon { background: var(--isa-info-soft); color: var(--isa-info); }
.m-kpi-label {
  display: block;
  font-size: 0.68rem;
  color: var(--isa-text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.m-kpi-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
}
.m-kpi-hint {
  display: block;
  font-size: 0.68rem;
  color: var(--isa-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Attention list — urgent items, full width stacked rows */
.m-alert-list {
  display: flex;
  flex-direction: column;
  gap: var(--m-space-2);
  margin-bottom: var(--m-space-6);
}
.m-alert-row {
  display: flex;
  align-items: center;
  gap: var(--m-space-3);
  padding: var(--m-space-3) var(--m-space-4);
  border-radius: var(--m-radius-lg);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  border-left: 3px solid var(--isa-info);
  color: var(--isa-text);
}
.m-alert-row--danger { border-left-color: var(--isa-danger); }
.m-alert-row--warning { border-left-color: var(--isa-warning); }
.m-alert-row--success { border-left-color: var(--isa-success); }
.m-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--m-radius-sm);
  display: grid;
  place-items: center;
  background: var(--isa-bg-accent);
  color: var(--isa-text-secondary);
  flex: 0 0 auto;
}
.m-alert-icon svg,
.m-alert-icon i {
  width: 17px;
  height: 17px;
}
.m-alert-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.m-alert-copy strong {
  display: block;
  font-size: 0.85rem;
}
.m-alert-copy em {
  font-style: normal;
  display: block;
  font-size: 0.72rem;
  color: var(--isa-text-muted);
  margin-top: 1px;
}
.m-alert-row > svg:last-child,
.m-alert-row > i:last-child {
  width: 15px;
  height: 15px;
  color: var(--isa-text-muted);
  flex: 0 0 auto;
}

/* Today feed — vertical timeline of cards, the heart of both home screens */
.m-feed {
  display: flex;
  flex-direction: column;
  gap: var(--m-space-2);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.m-feed-item {
  display: flex;
  align-items: center;
  gap: var(--m-space-3);
  padding: var(--m-space-3) var(--m-space-4);
  border-radius: var(--m-radius-lg);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  box-shadow: var(--m-elevation-1);
  color: var(--isa-text);
  /* Buttons default to min-width:min-content — a long status like
     "Canceled" was widening the whole card and sliding it right. */
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.m-feed-time {
  flex: 0 0 auto;
  width: 56px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--isa-primary-fx);
  line-height: 1.25;
}
.m-feed-time span {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--isa-text-muted);
}
.m-feed-rail {
  width: 2px;
  align-self: stretch;
  background: var(--isa-border);
  border-radius: 2px;
  flex: 0 0 auto;
}
.m-feed-copy {
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
}
.m-feed-copy strong {
  display: block;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-feed-copy span {
  display: block;
  font-size: 0.74rem;
  color: var(--isa-text-muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Status pill on a feed item (Today's Schedule) — reuses the same
   status vocabulary as the desktop timetable (live/late/ended/canceled). */
.m-feed-item {
  position: relative;
}
.m-feed-status {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  padding: 3px 8px;
  border-radius: var(--m-radius-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  background: var(--isa-bg-accent);
  color: var(--isa-text-secondary);
}
.m-feed-status.is-ended {
  background: var(--isa-success-soft);
  color: var(--isa-success);
}
.m-feed-status.is-live {
  background: var(--isa-warning-soft);
  color: var(--isa-warning);
}
.m-feed-status.is-late {
  background: var(--isa-danger-soft);
  color: var(--isa-danger);
}
.m-feed-status.is-upcoming {
  background: var(--isa-info-soft);
  color: var(--isa-info);
}
.m-feed-status.is-canceled {
  background: rgba(148, 163, 184, 0.18);
  color: #64748b;
}
.m-feed-status.is-missed {
  background: var(--isa-danger-soft);
  color: var(--isa-danger);
}
html[data-theme="night"] .m-feed-status.is-canceled {
  background: rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
}
html[data-theme="night"] .m-feed-status.is-missed {
  background: color-mix(in srgb, var(--isa-danger, #ef4444) 22%, transparent);
  color: #fca5a5;
}
.m-feed-item.is-live {
  border-color: var(--isa-warning);
  box-shadow: var(--m-elevation-2);
}
/* Canceled: mute, don't grow — keeps every card the same footprint */
.m-feed-item.is-canceled {
  opacity: 0.78;
  background: linear-gradient(160deg, var(--isa-surface-strong), var(--isa-surface));
}
.m-feed-item.is-missed {
  border-color: color-mix(in srgb, var(--isa-danger, #ef4444) 45%, var(--isa-border));
}
.m-feed-item.is-missed .m-feed-rail {
  background: var(--isa-danger);
}
.m-feed-item.is-missed .m-feed-time {
  color: var(--isa-danger);
}
.m-feed-item.is-canceled .m-feed-copy strong {
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.7);
}
.m-feed-item.is-canceled .m-feed-rail {
  background: rgba(148, 163, 184, 0.45);
}
.m-feed-item.is-canceled .m-feed-time {
  color: #94a3b8;
}
.m-feed-empty {
  padding: var(--m-space-5);
  text-align: center;
  color: var(--isa-text-muted);
  font-size: 0.82rem;
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  border-radius: var(--m-radius-lg);
}
.m-feed-empty strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--isa-text);
  margin-bottom: 4px;
}
.m-feed-empty span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* =========================================================
   TEACHER ASSIGNMENTS HUB — list page mobile (#mAsgnDesk)
   Filled by assignments.js renderMobileAsgnDesk() from the
   same list AJAX payload as #asgnList.
   ========================================================= */
.m-asgn-head {
  margin-bottom: var(--m-space-4);
  padding: 2px 2px 0;
}
.m-asgn-eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--isa-text-muted);
}
.m-asgn-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--isa-text);
  line-height: 1.2;
}
.m-asgn-status {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--isa-text-secondary);
}
.m-asgn-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--m-space-3);
  padding: 0 14px;
  min-height: 46px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  box-shadow: var(--m-elevation-1);
  color: var(--isa-text-muted);
}
.m-asgn-search svg,
.m-asgn-search i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.m-asgn-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--isa-text);
  height: 44px;
}
.m-asgn-chips {
  display: flex;
  gap: 8px;
  margin-bottom: var(--m-space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.m-asgn-chips::-webkit-scrollbar { display: none; }
.m-asgn-chip {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--m-radius-pill);
  border: 1px solid var(--isa-border);
  background: var(--isa-surface-solid);
  color: var(--isa-text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}
.m-asgn-chip.is-active {
  background: var(--isa-primary);
  border-color: var(--isa-primary);
  color: #fff;
}
.m-asgn-qa-section {
  margin-bottom: var(--m-space-5);
}
.m-asgn-qa .m-qa > .m-qa-icon-wrap + span {
  font-size: 0.72rem;
}
.m-asgn-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--isa-text-muted);
}
.m-asgn-feed {
  gap: 12px !important;
}
.m-asgn-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--m-radius-lg);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  box-shadow: var(--m-elevation-1);
  overflow: hidden;
}
.m-asgn-card__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 10px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.m-asgn-card__main:active {
  background: rgba(15, 23, 42, 0.03);
}
.m-asgn-card__av {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--isa-primary-fx);
  background: var(--isa-primary-soft, rgba(var(--isa-primary-rgb), 0.12));
}
.m-asgn-card__copy {
  flex: 1 1 0%;
  min-width: 0;
}
.m-asgn-card__copy strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--isa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-asgn-card__copy span,
.m-asgn-card__copy em {
  display: block;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--isa-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-asgn-card__copy em {
  font-weight: 650;
  color: var(--isa-text-secondary);
}
.m-asgn-card .m-feed-status {
  margin-top: 2px;
}
.m-asgn-card__actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
}
.m-asgn-card__cta {
  flex: 1 1 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--m-radius-pill);
  background: var(--isa-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
}
.m-asgn-card__cta--ghost {
  background: transparent;
  color: var(--isa-primary-fx);
  border: 1px solid rgba(var(--isa-primary-rgb), 0.28);
}
.m-asgn-card.is-late .m-asgn-card__av {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}
.m-asgn-card.is-live .m-asgn-card__av {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
}
.m-asgn-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: var(--m-space-4);
}
.m-asgn-pager__meta {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--isa-text-muted);
}
.m-feed-status.is-muted {
  background: rgba(148, 163, 184, 0.18);
  color: #64748b;
}
.m-feed-status.is-info {
  background: var(--isa-info-soft, rgba(14, 165, 233, 0.12));
  color: var(--isa-info, #0284c7);
}

/* Shared assignment mobile page shells (dashboard / eval / subs / templates) */
.m-asgn-home .m-asgn-head,
.m-asgn-eval .m-asgn-head,
.m-asgn-subs .m-asgn-head,
.m-asgn-tpl .m-asgn-head {
  margin-bottom: var(--m-space-4);
}
.m-asgn-pulse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: var(--m-space-5);
}
.m-asgn-pulse .m-dct-chip strong {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}
.m-asgn-pulse .m-dct-chip span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--isa-text-muted);
}

/* =========================================================
   TEACHER CLASSES HUB — DCT dashboard mobile (#mDctDay)
   Filled by daily-class.js renderMobileDctDay() from the same
   dashboard AJAX payload as #dctKpis / #dctTodayList.
   ========================================================= */
.m-dct-head {
  margin-bottom: var(--m-space-4);
  padding: 2px 2px 0;
}
.m-dct-eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--isa-text-muted);
}
.m-dct-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--isa-text);
  line-height: 1.2;
}
.m-dct-status {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--isa-text-secondary);
}
.m-dct-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: var(--m-space-5);
}
.m-dct-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--m-radius-lg);
  border: 1.5px solid var(--isa-border);
  background: var(--isa-surface-solid);
  box-shadow: var(--m-elevation-1);
  color: var(--isa-text);
  text-decoration: none;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.m-dct-chip strong {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.m-dct-chip span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--isa-text-muted);
}
.m-dct-chip.is-quiet {
  opacity: 0.55;
}
.m-dct-chip--live strong { color: #0284c7; }
.m-dct-chip--amber strong { color: #b45309; }
.m-dct-chip--rose strong { color: #b91c1c; }
.m-dct-chip--att strong { color: var(--isa-primary-fx); }
.m-dct-chip--live:not(.is-quiet) {
  border-color: rgba(14, 165, 233, 0.35);
  background: rgba(14, 165, 233, 0.06);
}
.m-dct-chip--amber:not(.is-quiet) {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.07);
}
.m-dct-chip--rose:not(.is-quiet) {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
}
.m-dct-chip--att:not(.is-quiet) {
  border-color: rgba(var(--isa-primary-rgb, 5, 150, 105), 0.35);
  background: var(--isa-primary-soft);
}
.m-dct-chip--ok strong { color: #15803d; }
.m-dct-chip--ok:not(.is-quiet) {
  border-color: rgba(22, 163, 74, 0.32);
  /* Soft tint like --live/--amber — never a solid mint wash (reads grey in night). */
  background: rgba(22, 163, 74, 0.08);
}

/* Teacher Attendance hub — running / recent cards (#mAttDash) */
.m-att-run-card {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--m-radius-lg);
  border: 1px solid var(--isa-border);
  background: var(--isa-surface-solid);
  box-shadow: var(--m-elevation-1);
}
.m-att-run-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.m-att-run-card__time {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 44px;
}
.m-att-run-card__time strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--isa-primary-fx);
  letter-spacing: -0.02em;
}
.m-att-run-card__time span {
  font-size: 0.68rem;
  color: var(--isa-text-muted);
}
.m-att-run-card__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-att-run-card__copy strong {
  font-size: 0.92rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-att-run-card__copy span {
  font-size: 0.72rem;
  color: var(--isa-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-att-run-card__pill {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
  color: #0369a1;
  background: rgba(14, 165, 233, 0.14);
}
.m-att-run-card__cta {
  flex: 0 0 auto;
  align-self: center;
  min-height: 40px;
  border-radius: 12px !important;
  padding: 0 14px !important;
}
.m-att-recent-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--m-radius-lg);
  border: 1px solid var(--isa-border);
  background: var(--isa-surface-solid);
  box-shadow: var(--m-elevation-1);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}
.m-att-recent-card.is-present { border-left-color: #16a34a; }
.m-att-recent-card.is-absent { border-left-color: #dc2626; }
.m-att-recent-card.is-late { border-left-color: #ca8a04; }
.m-att-recent-card__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(var(--isa-primary-rgb, 5, 150, 105), 0.12);
  color: var(--isa-primary-fx);
}
.m-att-recent-card__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-att-recent-card__copy strong {
  font-size: 0.9rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-att-recent-card__copy span {
  font-size: 0.7rem;
  color: var(--isa-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-att-recent-card__status {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}
.m-att-recent-card.is-present .m-att-recent-card__status {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}
.m-att-recent-card.is-absent .m-att-recent-card__status {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.m-att-recent-card.is-late .m-att-recent-card__status {
  background: rgba(202, 138, 4, 0.14);
  color: #a16207;
}
.m-att-run-feed,
.m-att-recent-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-dct-qa {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-space-3) var(--m-space-2);
  margin-bottom: 0;
}
.m-dct-qa .m-qa {
  padding: var(--m-space-2) 4px;
}
.m-dct-qa .m-qa > .m-qa-icon-wrap + span {
  white-space: normal;
  text-align: center;
  max-width: 100%;
  line-height: 1.2;
}
.m-dct-qa-section {
  margin-bottom: var(--m-space-5);
}
.m-dct-feed .m-dct-slot {
  text-decoration: none;
}
.m-dct-feed .m-dct-slot:active {
  transform: scale(0.985);
}
.m-dct-up-copy .m-tt-slot-foot,
.m-dct-slot .m-tt-slot-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.m-dct-up-copy .m-tt-slot-meta,
.m-dct-slot .m-tt-slot-meta {
  display: inline;
  margin-top: 0;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 650;
  color: #94a3b8;
}
.m-dct-up-copy .tt-class-chip,
.m-dct-up-copy .m-tt-class-chip,
.m-dct-slot .tt-class-chip,
.m-dct-slot .m-tt-class-chip {
  display: inline-flex !important;
  flex: 0 0 auto;
  width: auto;
  max-width: min(10rem, 100%);
  margin-top: 0;
}

/* =========================================================
   TEACHER UPCOMING DESK — #mDctUpcoming (upcoming-classes.php)
   Same list AJAX as #dctListHost; desktop board hidden <=992px.
   ========================================================= */
.m-dct-up-date {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: stretch;
  gap: 10px;
  margin-bottom: var(--m-space-3);
}
.m-dct-up-nav,
.m-dct-up-today {
  border: 1px solid var(--isa-border);
  background: var(--isa-surface-solid);
  box-shadow: var(--m-elevation-1);
  color: var(--isa-text);
}
.m-dct-up-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 52px;
  border-radius: 14px;
  padding: 0;
}
.m-dct-up-nav svg,
.m-dct-up-nav i {
  width: 20px;
  height: 20px;
}
.m-dct-up-today {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 14px;
  text-align: center;
}
.m-dct-up-today strong {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.m-dct-up-today span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--isa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.m-dct-up-search {
  margin-bottom: var(--m-space-3);
}
.m-dct-up-chips {
  margin-bottom: var(--m-space-4);
}
.m-dct-up-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-dct-up-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--m-radius-lg);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  box-shadow: var(--m-elevation-1);
  overflow: hidden;
}
.m-dct-up-card.is-late {
  border-color: rgba(239, 68, 68, 0.35);
  /* Theme-aware tint — never hardcode light rose (#fecaca); bleeds grey/white in night. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ef4444 14%, var(--isa-surface-solid)) 0%,
    var(--isa-surface-solid) 42%
  );
}
.m-dct-up-card.is-upcoming {
  border-color: rgba(14, 165, 233, 0.28);
}
.m-dct-up-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.m-dct-up-body:active {
  background: rgba(15, 23, 42, 0.03);
}
.m-dct-up-when {
  flex: 0 0 58px;
  width: 58px;
  text-align: center;
  line-height: 1.2;
}
.m-dct-up-when strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--isa-primary-fx);
  letter-spacing: -0.02em;
}
.m-dct-up-when > span {
  display: block;
  font-size: 0.64rem;
  font-weight: 650;
  color: var(--isa-text-muted);
}
.m-dct-up-cd {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: var(--m-radius-pill);
  background: rgba(var(--isa-primary-rgb, 5, 150, 105), 0.12);
  color: var(--isa-primary-fx);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.m-dct-up-cd.is-late {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.m-dct-up-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.m-dct-up-copy strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-dct-up-copy span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--isa-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-dct-up-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}
.m-dct-up-actions .btn-isa {
  flex: 1 1 auto;
  min-height: 42px;
  border-radius: 12px !important;
  font-weight: 750;
}
.m-dct-up-more {
  display: flex;
  width: 100%;
  margin-top: 12px;
  min-height: 42px;
  justify-content: center;
  border-radius: 12px !important;
}

/* =========================================================
   TEACHER RUNNING DESK — #mDctRunning (running-classes.php)
   Reuses date/search chrome from Upcoming; live timer cards.
   ========================================================= */
.m-dct-run-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m-dct-run-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: m-dct-run-ping 1.6s ease-out infinite;
}
@keyframes m-dct-run-ping {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.m-dct-run-card.is-live {
  border-color: rgba(34, 197, 94, 0.4);
  /* Theme-aware live tint — never hardcode light mint (#f0fdf4); bleeds grey in night. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #22c55e 16%, var(--isa-surface-solid)) 0%,
    var(--isa-surface-solid) 48%
  );
}
.m-dct-run-when {
  width: 68px;
  flex-basis: 68px;
}
.m-dct-run-timer {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  color: #15803d !important;
  font-size: 0.88rem !important;
}
.m-dct-run-timer .dct-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex: 0 0 auto;
  animation: m-dct-run-ping 1.6s ease-out infinite;
}
.m-dct-run-step {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: var(--m-radius-pill);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.m-dct-run-step.is-warn {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}
.m-dct-run-step.is-ok {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}
.m-dct-run-actions .btn-isa {
  flex: 1 1 0;
}

/* =========================================================
   TEACHER MISSED DESK — #mDctMissed (missed-classes.php)
   ========================================================= */
.m-dct-miss-card.is-missed {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ef4444 14%, var(--isa-surface-solid)) 0%,
    var(--isa-surface-solid) 48%
  );
}
.m-dct-miss-card.is-canceled {
  border-color: rgba(148, 163, 184, 0.35);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #94a3b8 12%, var(--isa-surface-solid)) 0%,
    var(--isa-surface-solid) 48%
  );
  opacity: 0.92;
}
.m-dct-miss-reason {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: var(--m-radius-pill);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  text-transform: capitalize;
}
.m-dct-miss-reason.is-warn {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}
.m-dct-miss-reason.is-quiet {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

/* Notice / list card row (school updates, active teaching load, etc.) */
.m-list-row {
  display: flex;
  align-items: center;
  gap: var(--m-space-3);
  padding: var(--m-space-3) var(--m-space-4);
  border-bottom: 1px solid var(--isa-border);
  color: var(--isa-text);
}
.m-list-row:last-child {
  border-bottom: none;
}
.m-list-row.is-unread strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--isa-primary);
  margin-right: 6px;
  vertical-align: middle;
}
.m-list-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.m-list-copy strong {
  display: block;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-list-copy span {
  display: block;
  font-size: 0.72rem;
  color: var(--isa-text-muted);
  margin-top: 1px;
}
.m-list-time {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--isa-text-muted);
  font-weight: 600;
}

/* Quick-actions grid — 4 across, icon-first */
.m-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--m-space-3) var(--m-space-2);
  overflow: visible;
}
.m-qa,
button.m-qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
  color: var(--isa-text);
  border: none;
  background: transparent;
  padding: 4px 2px 0;
  font: inherit;
  cursor: pointer;
  overflow: visible;
  position: relative;
  z-index: 0;
}
/* Solid-fill icon badge — a saturated color circle with a white glyph,
   not a white circle + tinted outline icon. Reads far more "app-like" and
   attractive than duotone/outline icons at small sizes, and gives every
   tile a clear, unambiguous color identity at a glance. */
.m-qa-icon-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible !important;
}
.m-qa-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--m-radius-lg);
  display: grid;
  place-items: center;
  background: #64748b;
  color: #fff;
  box-shadow: var(--m-elevation-1);
}
.m-qa-icon svg,
.m-qa-icon i {
  width: 21px;
  height: 21px;
  stroke-width: 2.1;
}
.m-qa-icon--info { background: var(--isa-info); }
.m-qa-icon--warning { background: var(--isa-warning); }
.m-qa-icon--success { background: var(--isa-success); }
.m-qa-icon--purple { background: #7c3aed; }
/* Badge is a SIBLING of .m-qa-icon (not a child) so the colored circle
   cannot paint over it or clip it via border-radius. */
.m-qa-dot {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-danger);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
  z-index: 2;
  pointer-events: none;
  /* Park on the outer corner — most of the pill sits outside the icon. */
  transform: translate(42%, -42%);
}
.m-qa-grid--5 .m-qa-dot {
  transform: translate(48%, -48%);
}
.m-qa-grid,
.m-qa-grid--5 {
  overflow: visible;
}
/* Label under the icon only — do NOT set overflow:hidden on all spans
   (that was clipping .m-qa-icon-wrap and hiding most of the red badge). */
.m-qa > .m-qa-icon-wrap + span {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.m-qa-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.m-qa-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--m-space-2) 6px;
  margin-bottom: var(--m-space-6);
  padding-top: 8px;
  overflow: visible;
}
.m-qa-grid--5 .m-qa-icon {
  width: 44px;
  height: 44px;
}
.m-qa-grid--5 .m-qa-icon svg,
.m-qa-grid--5 .m-qa-icon i {
  width: 18px;
  height: 18px;
}
.m-qa-grid--5 > .m-qa > .m-qa-icon-wrap + span {
  font-size: 0.62rem;
}

.m-help-card {
  padding: var(--m-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--m-space-3);
}
.m-help-lead {
  margin: 0;
  font-size: 0.8rem;
  color: var(--isa-text-secondary);
}
.m-help-lead strong {
  display: block;
  font-size: 0.9rem;
  color: var(--isa-text);
  margin-bottom: 2px;
}

/* Teacher Home — "More on your desk" full-width link rows (aligns with
   Need help card edges; denser than the sparse 3-up m-qa grid). */
.m-desk-card {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-desk-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--m-radius-md);
  color: var(--isa-text);
  text-decoration: none;
}
.m-desk-link:active {
  background: var(--isa-bg);
}
.m-desk-link-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
}
.m-desk-link-ico svg,
.m-desk-link-ico i {
  width: 18px;
  height: 18px;
}
.m-desk-link-ico--perf {
  background: #0ea5e9;
}
.m-desk-link-ico--syl {
  background: #8b5cf6;
}
.m-desk-link-ico--mat {
  background: #f59e0b;
}
.m-desk-link-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-desk-link-copy strong {
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
  color: var(--isa-text);
}
.m-desk-link-copy em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--isa-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-desk-link > svg:last-child,
.m-desk-link > i:last-child {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--isa-text-muted);
  opacity: 0.75;
}

.m-help-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--m-space-3);
}
.m-help-banner-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(var(--isa-primary-rgb), 0.12);
  color: var(--isa-primary-fx);
}
.m-help-banner-ico svg,
.m-help-banner-ico i {
  width: 18px;
  height: 18px;
}
.m-help-banner-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.m-help-banner-copy strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 750;
  color: var(--isa-text);
  line-height: 1.25;
}
.m-help-banner-copy span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--isa-text-secondary);
}
.m-help-fees-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-primary);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: var(--m-elevation-1);
}
.m-help-fees-cta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m-help-fees-cta svg,
.m-help-fees-cta i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.m-help-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m-help-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--m-radius-md);
  border: 1px solid var(--isa-border);
  background: var(--isa-bg);
  color: var(--isa-text);
}
.m-help-action-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--isa-surface-solid);
  color: var(--isa-primary-fx);
  border: 1px solid var(--isa-border);
}
.m-help-action-ico svg,
.m-help-action-ico i {
  width: 16px;
  height: 16px;
}
.m-help-action-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.m-help-action-copy strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--isa-text);
}
.m-help-action-copy em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--isa-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-help-action > svg:last-child,
.m-help-action > i:last-child {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--isa-text-muted);
  opacity: 0.75;
}

/* =========================================================
   SEGMENTED CONTROL
   ========================================================= */
.m-segmented {
  display: flex;
  background: var(--isa-bg-accent);
  border-radius: var(--m-radius-pill);
  padding: 3px;
  gap: 2px;
}
.m-segmented button {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: var(--m-radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--isa-text-secondary);
  transition: background var(--m-duration) var(--m-ease), color var(--m-duration) var(--m-ease);
}
.m-segmented button.is-active {
  background: var(--isa-surface-solid);
  color: var(--isa-primary-fx);
  box-shadow: var(--m-elevation-1);
}

/* =========================================================
   STAT CARD GRID (Home) — Academic Overview ring, Attendance sparkline,
   Homework, Recent Test, Fees Overview progress bar, Recent Notice.
   Two-column grid of equal-height cards; every track uses minmax(0, 1fr)
   so long values/labels never force the grid wider than the viewport
   (see database/MOBILE_PATTERN_REFERENCE.md §9.1 — don't reintroduce a
   bare 1fr on a track that can hold overflow-prone content).
   ========================================================= */
.m-stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--m-space-3);
  margin-bottom: var(--m-space-6);
}
.m-stat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: var(--m-space-4);
  border-radius: var(--m-radius-lg);
  background: var(--isa-surface-solid);
  border: 1px solid var(--isa-border);
  box-shadow: var(--m-elevation-1);
  color: var(--isa-text);
}
.m-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: var(--m-space-2);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--isa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.m-stat-head svg,
.m-stat-head i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--isa-text-muted);
}
.m-stat-big {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--isa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-stat-big.is-warn {
  color: var(--isa-warning);
}
.m-stat-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--isa-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-stat-notice-title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--isa-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.m-notice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--isa-danger);
  flex: 0 0 auto;
}

/* Academic Overview ring — SVG arc with soft faded tip + centered label. */
.m-ring {
  --pct: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 2px auto var(--m-space-3);
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.m-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.m-ring-track,
.m-ring-prog,
.m-ring-prog-glow {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}
.m-ring-track {
  stroke: var(--isa-bg-accent);
}
.m-ring-prog-glow {
  stroke: var(--isa-primary);
  stroke-opacity: 0.22;
  stroke-width: 5;
  /* Soft trail a few points past the tip — reads as a faded leading edge */
  stroke-dasharray: min(100, calc(var(--pct) + 5)) 100;
  filter: blur(1.1px);
}
.m-ring-prog {
  stroke: var(--isa-primary);
  stroke-dasharray: var(--pct) 100;
  transition: stroke-dasharray 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.m-ring-core {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
  pointer-events: none;
}
.m-ring-value {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--isa-text);
  letter-spacing: -0.02em;
}
.m-ring-label {
  margin-top: 1px;
  font-size: 0.56rem;
  font-weight: 650;
  color: var(--isa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Full-width overview: ring + 3 stats side-by-side (no label clipping). */
.m-stat-card--overview {
  grid-column: 1 / -1;
}
.m-stat-card--wide {
  grid-column: 1 / -1;
}
.m-stat-overview {
  display: flex;
  align-items: center;
  gap: var(--m-space-4);
  min-width: 0;
}
.m-stat-card--overview .m-ring {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  margin: 0;
}
.m-stat-card--overview .m-ring-value {
  font-size: 1.08rem;
}
.m-stat-card--overview .m-ring-label {
  font-size: 0.58rem;
}
.m-stat-card--overview .m-stat-subrow {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
}
.m-stat-card--overview .m-stat-subrow > div {
  min-width: 0;
  padding: 8px 4px;
  border-radius: var(--m-radius-md);
  background: var(--isa-bg);
  border: 1px solid var(--isa-border);
}
.m-stat-card--overview .m-stat-subrow strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--isa-text);
  line-height: 1.15;
}
.m-stat-card--overview .m-stat-subrow span {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--isa-text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.m-stat-subrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.m-stat-subrow strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--isa-text);
}
.m-stat-subrow span {
  display: block;
  font-size: 0.58rem;
  color: var(--isa-text-muted);
  margin-top: 1px;
  line-height: 1.2;
  /* Columns are ~40px wide at this card size — a single long word like
     "Attendance" (no internal space to wrap at) is wider than that and
     will visually overlap the next column unless forced to break. */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Mini sparkline SVG — inline, colored via currentColor so a single
   tone class works for any stat card. */
.m-stat-spark {
  margin-top: var(--m-space-2);
  height: 30px;
  color: var(--isa-primary-fx);
}
.m-stat-spark--info {
  color: var(--isa-info);
}
.m-stat-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fees progress bar */
.m-progress {
  --pct: 0;
  margin-top: var(--m-space-3);
  height: 6px;
  border-radius: var(--m-radius-pill);
  background: var(--isa-bg-accent);
  overflow: hidden;
}
.m-progress-bar {
  height: 100%;
  width: clamp(0%, calc(var(--pct) * 1%), 100%);
  border-radius: var(--m-radius-pill);
  background: var(--isa-success);
}
.m-progress-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--isa-text-muted);
}

/* =========================================================
   SKELETON LOADING
   ========================================================= */
.m-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--isa-bg-accent);
  border-radius: var(--m-radius-md);
}
.m-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: mShimmer 1.3s infinite;
}
@keyframes mShimmer {
  100% { transform: translateX(100%); }
}
.m-skeleton-card {
  height: 88px;
  border-radius: var(--m-radius-lg);
  margin-bottom: var(--m-space-2);
}

/* =========================================================
   EMPTY / ERROR STATES
   ========================================================= */
.m-empty,
.m-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: var(--m-space-8) var(--m-space-5);
  color: var(--isa-text-secondary);
}
.m-empty-icon,
.m-error-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--isa-bg-accent);
  color: var(--isa-text-muted);
}
.m-error-icon {
  background: var(--isa-danger-soft);
  color: var(--isa-danger);
}
.m-empty-icon svg,
.m-empty-icon i,
.m-error-icon svg,
.m-error-icon i {
  width: 26px;
  height: 26px;
}
.m-empty strong,
.m-error strong {
  font-size: 0.95rem;
  color: var(--isa-text);
}
.m-empty span,
.m-error span {
  font-size: 0.8rem;
  max-width: 280px;
}
.m-error-retry {
  margin-top: 6px;
  border: none;
  background: var(--isa-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: var(--m-radius-pill);
}

/* =========================================================
   BADGES
   ========================================================= */
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--m-radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--isa-bg-accent);
  color: var(--isa-text-secondary);
}
.m-chip--success { background: var(--isa-success-soft); color: var(--isa-success); }
.m-chip--warning { background: var(--isa-warning-soft); color: var(--isa-warning); }
.m-chip--danger { background: var(--isa-danger-soft); color: var(--isa-danger); }
.m-chip--info { background: var(--isa-info-soft); color: var(--isa-info); }

/* =========================================================
   SUCCESS PING (utility — trigger via ISA.mobileSuccess(el))
   ========================================================= */
@keyframes mSuccessPop {
  0% { transform: scale(0.6); opacity: 0; }
  55% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.m-success-pop {
  animation: mSuccessPop var(--m-duration-slow) var(--m-ease);
}

/* =========================================================
   LOGIN — native app sheet (viewport-scoped; role unknown pre-auth)
   Full-bleed brand hero + edge-to-edge form sheet with docked CTA.
   ========================================================= */
@media (max-width: 992px) {
  body.login-body {
    overflow: hidden;
  }

  body.login-body .login-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body.login-body .login-visual {
    position: relative;
    flex: 0 0 auto;
    min-height: 0;
    padding: calc(var(--m-safe-t) + 20px) var(--m-space-5) 36px;
  }

  body.login-body .login-theme-fab {
    display: grid;
    place-items: center;
    position: absolute;
    top: calc(var(--m-safe-t) + 12px);
    right: var(--m-space-4);
    z-index: 2;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--m-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    cursor: pointer;
  }

  body.login-body .login-theme-card {
    display: none !important;
  }

  body.login-body .login-hero-copy,
  body.login-body .login-trust,
  body.login-body .login-brand-tag,
  body.login-body .login-brand-name-full {
    display: none;
  }

  body.login-body .login-brand-name-short {
    display: inline;
  }

  body.login-body .login-brand {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    justify-content: center;
    padding-top: 4px;
  }

  body.login-body .login-brand-mark {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
  }

  body.login-body .login-brand h1 {
    font-size: 1.42rem;
    letter-spacing: -0.03em;
  }

  body.login-body .login-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
    padding: 0;
    margin-top: -22px;
    background: transparent;
    place-items: stretch;
  }

  body.login-body .login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -8px 40px rgba(6, 20, 15, 0.18);
    padding: 10px var(--m-space-5) 0;
    animation: loginSheetIn 0.38s var(--m-ease) both;
    background: var(--login-card, #f7faf7);
    border: none;
    border-top: 1px solid rgba(15, 61, 46, 0.06);
  }

  body.login-body .login-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 4px 0 10px;
  }

  body.login-body .login-sheet-handle span {
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 61, 46, 0.16);
  }

  body.login-body .login-card-header {
    flex: 0 0 auto;
    margin-bottom: 18px;
  }

  body.login-body .login-card-header h2 {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
  }

  body.login-body .login-card-header p {
    font-size: 0.9rem;
  }

  body.login-body .login-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.login-body .login-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }

  body.login-body .isa-form-group {
    margin-bottom: 14px;
  }

  /* Filled Material-style fields: room for raised label + value (no collision) */
  body.login-body .isa-float .isa-input-icon {
    min-height: 64px;
  }

  body.login-body .isa-float .isa-input {
    height: 64px;
    min-height: 64px;
    padding-top: 28px;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 550;
    line-height: 1.15;
    letter-spacing: -0.01em;
    border-radius: var(--m-radius-md);
    background: rgba(var(--isa-primary-rgb), 0.07);
    border: 1.5px solid transparent;
    box-shadow: none;
    color: var(--isa-text, #0f2920);
  }

  body.login-body .isa-float-icon .isa-input {
    padding-left: 48px;
    padding-right: 48px;
  }

  body.login-body .isa-input-icon > i,
  body.login-body .isa-input-icon > svg {
    left: 16px;
    width: 20px;
    height: 20px;
    color: rgba(var(--isa-primary-rgb), 0.55);
  }

  body.login-body .isa-float-icon label {
    left: 48px;
  }

  body.login-body .isa-float label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--isa-text-muted);
  }

  body.login-body .isa-float .isa-input:focus + label,
  body.login-body .isa-float .isa-input:not(:placeholder-shown) + label {
    top: 8px;
    transform: none;
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--isa-primary-fx);
  }

  body.login-body .isa-float .isa-input:focus {
    background: #fff;
    border-color: rgba(var(--isa-primary-rgb), 0.4);
    box-shadow: 0 0 0 4px rgba(var(--isa-primary-rgb), 0.12);
  }

  body.login-body .isa-input-icon .isa-input-action {
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--isa-primary-rgb), 0.08);
    color: var(--isa-primary-fx);
  }

  /* Kill Chrome/Safari autofill blue-lavender wash */
  body.login-body .isa-input:-webkit-autofill,
  body.login-body .isa-input:-webkit-autofill:hover,
  body.login-body .isa-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--isa-text, #0f2920);
    caret-color: var(--isa-text, #0f2920);
    border-color: transparent;
    box-shadow: 0 0 0 1000px rgba(var(--isa-primary-rgb), 0.07) inset !important;
    transition: background-color 99999s ease-out;
  }

  body.login-body .isa-input:-webkit-autofill:focus {
    box-shadow:
      0 0 0 1000px #fff inset !important,
      0 0 0 4px rgba(var(--isa-primary-rgb), 0.12) !important;
    border-color: rgba(var(--isa-primary-rgb), 0.4);
  }

  body.login-body .login-actions {
    margin-bottom: 8px;
    margin-top: 2px;
  }

  body.login-body .login-actions a {
    font-size: 0.9rem;
    padding: 6px 0;
  }

  body.login-body .login-loc-line {
    justify-content: flex-start;
    margin-top: 10px;
    font-size: 0.8rem;
    text-align: left;
  }

  body.login-body .login-demo-hint {
    border-radius: var(--m-radius-md);
    text-align: left;
    margin-top: 12px;
    padding: 14px 16px;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  body.login-body .login-demo-hint--temp {
    display: block;
  }

  body.login-body .login-form-dock {
    flex: 0 0 auto;
    margin: 0 calc(var(--m-space-5) * -1);
    padding: 12px var(--m-space-5) calc(8px + var(--m-safe-b));
    background-color: var(--login-card, #f7faf7);
    background-image: linear-gradient(180deg, rgba(247, 250, 247, 0) 0%, var(--login-card, #f7faf7) 36%);
    border-top: 1px solid rgba(15, 61, 46, 0.06);
    z-index: 2;
  }

  body.login-body .login-submit {
    height: 56px;
    font-size: 1.02rem;
    font-weight: 700;
    border-radius: var(--m-radius-pill);
    margin-top: 0;
    box-shadow: 0 14px 28px rgba(var(--isa-primary-rgb), 0.32);
  }

  body.login-body .login-submit:active {
    transform: scale(var(--m-tap-scale));
  }

  body.login-body .login-footer {
    margin: 10px 0 0;
    padding: 0;
    font-size: 0.68rem;
    line-height: 1.35;
    opacity: 0.7;
  }

  html[data-theme="night"] body.login-body .login-sheet-handle span {
    background: rgba(255, 255, 255, 0.22);
  }

  html[data-theme="night"] body.login-body .isa-float .isa-input {
    background: rgba(255, 255, 255, 0.06);
    color: var(--isa-text);
  }

  html[data-theme="night"] body.login-body .isa-float .isa-input:focus {
    background: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="night"] body.login-body .isa-input:-webkit-autofill,
  html[data-theme="night"] body.login-body .isa-input:-webkit-autofill:hover,
  html[data-theme="night"] body.login-body .isa-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--isa-text);
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.06) inset !important;
  }

  html[data-theme="night"] body.login-body .isa-input:-webkit-autofill:focus {
    box-shadow:
      0 0 0 1000px rgba(255, 255, 255, 0.09) inset !important,
      0 0 0 4px rgba(var(--isa-primary-rgb), 0.12) !important;
  }

  html[data-theme="night"] body.login-body .login-form-dock {
    background-color: #111827;
    background-image: linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, #111827 36%);
    border-top-color: rgba(148, 163, 184, 0.12);
  }

  html[data-theme="night"] body.login-body .login-card {
    background: #111827;
    border-top-color: rgba(148, 163, 184, 0.14);
  }
}

/* Short phones: shrink hero so docked CTA stays on-screen */
@media (max-width: 992px) and (max-height: 720px) {
  body.login-body .login-visual {
    padding: calc(var(--m-safe-t) + 12px) var(--m-space-4) 28px;
  }

  body.login-body .login-brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  body.login-body .login-brand h1 {
    font-size: 1.2rem;
  }

  body.login-body .login-card-header {
    margin-bottom: 12px;
  }

  body.login-body .login-card-header h2 {
    font-size: 1.28rem;
  }

  body.login-body .isa-float .isa-input-icon {
    min-height: 58px;
  }

  body.login-body .isa-float .isa-input {
    height: 58px;
    min-height: 58px;
    padding-top: 24px;
    padding-bottom: 8px;
  }

  body.login-body .isa-float .isa-input:focus + label,
  body.login-body .isa-float .isa-input:not(:placeholder-shown) + label {
    top: 7px;
  }

  body.login-body .login-submit {
    height: 50px;
  }
}

@keyframes loginSheetIn {
  from {
    transform: translateY(28px);
    opacity: 0.72;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
  body.login-body .login-card {
    animation: none;
  }
}

/* =========================================================
   ACTIVATE MOBILE SHELL — <=992px, Teacher/Parent only
   ========================================================= */
@media (max-width: 992px) {
  body[data-role="teacher"] .app-sidebar,
  body[data-role="parent"] .app-sidebar,
  body[data-role="teacher"] .app-topbar,
  body[data-role="parent"] .app-topbar,
  body[data-role="teacher"] .sidebar-backdrop,
  body[data-role="parent"] .sidebar-backdrop,
  body[data-role="teacher"] .pdash,
  body[data-role="parent"] .pdash {
    display: none !important;
  }

  /* Reveal each shell piece with ITS OWN correct display value AND
     !important — the base "hidden by default" rule above is also
     !important (needed to beat each component's own unqualified display:
     flex/grid declaration at every OTHER viewport/role), so only an equally
     !important, higher-specificity rule here can re-enable it at
     <=992px for teacher/parent. A blanket "display:block" here would also
     be wrong — it would out-specificity (and clobber) the flex/grid rules
     each component declares for itself (topbar/bottomnav/sheet). */
  body[data-role="teacher"] .m-home,
  body[data-role="parent"] .m-home,
  body[data-role="teacher"] .m-screen,
  body[data-role="parent"] .m-screen {
    display: block !important;
  }
  /* Full Timetable (student-timetable.php): #studentTtRoot's own AJAX
     render (desktop hero + 7-column week grid) is replaced by the
     .m-tt-week day-tab view above — it keeps fetching in the background
     (same payload feeds both), it's just not shown here. */
  body[data-role="teacher"] #studentTtRoot,
  body[data-role="parent"] #studentTtRoot {
    display: none !important;
  }
  /* Teacher full timetable (teacher-timetable.php): #teacherTtRoot's own
     desktop hero + week board is replaced by the same .m-tt-week day-tab
     view above — same payload, same renderMobileWeek(), just a second page. */
  body[data-role="teacher"] #teacherTtRoot {
    display: none !important;
  }

}

/* Desktop desk boards must stay visible (mobile shell hides them ≤992px). */
@media (min-width: 993px) {
  body[data-role="teacher"] #teacherTtRoot,
  body[data-role="teacher"] #studentTtRoot,
  body[data-role="parent"] #studentTtRoot,
  body[data-role="admin"] #teacherTtRoot,
  body[data-role="admin"] #studentTtRoot {
    display: block !important;
  }
}

@media (max-width: 992px) {
  /* Teacher Attendance hub (dashboard.php #mAttDash) */
  body[data-role="teacher"] #attModule:has(#mAttDash) > .adm-journey,
  body[data-role="teacher"] #attModule:has(#mAttDash) > .adm-hero,
  body[data-role="teacher"] #attModule:has(#mAttDash) > #attKpis,
  body[data-role="teacher"] #attModule:has(#mAttDash) > .adm-actions,
  body[data-role="teacher"] #attModule:has(#mAttDash) > .dash-grid,
  body[data-role="teacher"] #attModule:has(#mAttDash) > .adm-work-panel {
    display: none !important;
  }
  body[data-role="teacher"] .app-content:has(#mAttDash) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#mAttDash) {
    padding: 0;
  }

  /* Teacher Academic Performance hub (dashboard.php #mPerfDash) */
  body[data-role="teacher"] #perfModule:has(#mPerfDash) > .adm-journey,
  body[data-role="teacher"] #perfModule:has(#mPerfDash) > .adm-hero,
  body[data-role="teacher"] #perfModule:has(#mPerfDash) > .perf-section {
    display: none !important;
  }
  body[data-role="teacher"] .app-content:has(#mPerfDash) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#mPerfDash) {
    padding: 0;
  }
  body[data-role="teacher"] #mPerfTopSection {
    scroll-margin-top: calc(var(--m-topbar-h, 56px) + var(--m-safe-t, 0px) + 12px);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-session {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--m-space-4);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-session .isa-select,
  body[data-role="teacher"] #mPerfDash .m-perf-session .isa-ss {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    width: auto !important;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-session .btn-isa {
    flex: 0 0 auto;
    min-height: 40px;
    min-width: 40px;
    border-radius: 12px !important;
    padding: 0 12px;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    text-decoration: none;
    color: inherit;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card__av {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    background: var(--isa-grad-brand);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card__copy strong {
    font-size: 0.92rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card__copy span {
    font-size: 0.72rem;
    color: var(--isa-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card__status {
    flex: 0 0 auto;
    max-width: 5.5rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 999px;
    color: #64748b;
    background: rgba(148, 163, 184, 0.18);
    text-align: center;
    line-height: 1.2;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card.is-success .m-perf-stu-card__status {
    color: var(--isa-success);
    background: var(--isa-success-soft);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card.is-primary .m-perf-stu-card__status {
    color: var(--isa-info);
    background: var(--isa-info-soft);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card.is-warning .m-perf-stu-card__status {
    color: var(--isa-warning);
    background: var(--isa-warning-soft);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-stu-card.is-danger .m-perf-stu-card__status {
    color: var(--isa-danger);
    background: var(--isa-danger-soft);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-focus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-focus__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    min-width: 0;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-focus__card span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--isa-text-muted);
  }
  body[data-role="teacher"] #mPerfDash .m-perf-focus__card strong {
    font-size: 0.9rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-focus__card em {
    font-style: normal;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  body[data-role="teacher"] #mPerfDash .m-perf-focus__card.is-strong em { color: #15803d; }
  body[data-role="teacher"] #mPerfDash .m-perf-focus__card.is-focus em { color: #b45309; }

  /* Teacher Corrections desk (#attCorrPage) */
  body[data-role="teacher"] #attModule:has(#attCorrPage) > .adm-journey {
    display: none !important;
  }
  body[data-role="teacher"] .app-content:has(#attCorrPage) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#attCorrPage) {
    padding: 0;
  }
  body[data-role="teacher"] #attCorrPage.m-att-corr {
    max-width: 430px;
    margin: 0 auto;
    padding: var(--m-space-3) var(--m-space-4)
      calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-8));
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-nav {
    display: flex !important;
    align-items: center;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 0 10px 0 4px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--isa-text);
    text-decoration: none;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-back svg,
  body[data-role="teacher"] #attCorrPage .m-att-corr-back i {
    width: 18px;
    height: 18px;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-head {
    display: block !important;
    margin-bottom: 0;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-hero {
    display: none !important;
  }

  /* Teacher My Students list (#stuListPage) */
  body[data-role="teacher"] #studentsModule:has(#stuListPage) > .adm-journey {
    display: none !important;
  }
  body[data-role="teacher"] .app-content:has(#stuListPage) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#stuListPage) {
    padding: 0;
  }
  body[data-role="teacher"] #stuListPage.m-stu-list {
    max-width: 430px;
    margin: 0 auto;
    padding: var(--m-space-3) var(--m-space-4)
      calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-8));
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  body[data-role="teacher"] #stuListPage .m-stu-list-nav {
    display: flex !important;
  }
  body[data-role="teacher"] #stuListPage .m-stu-list-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 0 10px 0 4px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--isa-text);
    text-decoration: none;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #stuListPage .m-stu-list-back svg,
  body[data-role="teacher"] #stuListPage .m-stu-list-back i {
    width: 18px;
    height: 18px;
  }
  body[data-role="teacher"] #stuListPage .m-stu-list-head {
    display: block !important;
    margin-bottom: 0;
  }
  body[data-role="teacher"] #stuListPage .stu-list-focus {
    display: none !important;
  }
  body[data-role="teacher"] #stuListPage #stuListBoard {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1) !important;
    background: var(--isa-surface-solid) !important;
  }
  body[data-role="teacher"] #stuListPage #stuStatusChips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 10px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  body[data-role="teacher"] #stuListPage #stuStatusChips::-webkit-scrollbar { display: none; }
  body[data-role="teacher"] #stuListPage #stuStatusChips .adm-chip {
    flex: 0 0 auto;
    min-height: 36px;
    border-radius: 999px;
    font-size: 0.74rem;
  }
  body[data-role="teacher"] #stuListPage .adm-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"] #stuListPage .adm-filter-search {
    width: 100%;
    max-width: none;
  }
  body[data-role="teacher"] #stuListPage .adm-filter-search input {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    font-size: 16px;
  }
  body[data-role="teacher"] #stuListPage .adm-filter-bar > .adm-filter-fields {
    display: none !important;
  }
  body[data-role="teacher"] #stuListPage #btnExportStu {
    display: none !important;
  }
  body[data-role="teacher"] #stuListPage #btnRefreshStu {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-content: center;
  }
  body[data-role="teacher"] #stuListPage .m-stu-filters {
    display: block !important;
    margin: 0 0 12px;
    border-radius: 14px;
    border: 1px solid var(--isa-border);
    background: rgba(var(--isa-soft-rgb), 0.9);
    overflow: hidden;
  }
  body[data-role="teacher"] #stuListPage .m-stu-filters > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 0.82rem;
    font-weight: 750;
    color: var(--isa-text-secondary);
  }
  body[data-role="teacher"] #stuListPage .m-stu-filters > summary::-webkit-details-marker { display: none; }
  body[data-role="teacher"] #stuListPage .m-stu-filters[open] > summary {
    border-bottom: 1px solid var(--isa-border);
    color: var(--isa-text);
  }
  body[data-role="teacher"] #stuListPage .m-stu-filters__body {
    padding: 12px;
  }
  body[data-role="teacher"] #stuListPage #mStuFilterHost #stuFilterFields {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  body[data-role="teacher"] #stuListPage #stuFilterFields .isa-select,
  body[data-role="teacher"] #stuListPage #stuFilterFields .isa-ss,
  body[data-role="teacher"] #stuListPage #stuFilterFields .adm-filter-control {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 40px;
  }
  body[data-role="teacher"] #stuListPage #studentWorkbench {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    text-decoration: none;
    color: inherit;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__photo,
  body[data-role="teacher"] #stuListPage .m-stu-card__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__avatar {
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(var(--isa-primary-rgb, 5, 150, 105), 0.12);
    color: var(--isa-primary-fx);
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__copy strong {
    font-size: 0.92rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__copy span {
    font-size: 0.72rem;
    color: var(--isa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__status {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    color: #475569;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card.is-active .m-stu-card__status {
    background: var(--isa-success-soft);
    color: var(--isa-success);
  }
  body[data-role="teacher"] #stuListPage .m-stu-card.is-inactive .m-stu-card__status,
  body[data-role="teacher"] #stuListPage .m-stu-card.is-suspended .m-stu-card__status {
    background: var(--isa-danger-soft);
    color: var(--isa-danger);
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__go {
    flex: 0 0 auto;
    color: var(--isa-text-muted);
    display: grid;
    place-items: center;
  }
  body[data-role="teacher"] #stuListPage .m-stu-card__go svg,
  body[data-role="teacher"] #stuListPage .m-stu-card__go i {
    width: 18px;
    height: 18px;
  }
  body[data-role="teacher"] #stuListPage .isa-table-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--isa-border);
  }

  /* Teacher Student Profile (#stuProfileRoot.is-teacher) */
  body[data-role="teacher"] #studentsModule:has(#stuProfileRoot.is-teacher) > .adm-journey {
    display: none !important;
  }
  body[data-role="teacher"] .app-content:has(#stuProfileRoot.is-teacher) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#stuProfileRoot.is-teacher) {
    padding: 0;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher {
    max-width: 430px;
    margin: 0 auto;
    padding: var(--m-space-3) var(--m-space-4)
      calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-8));
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .m-stu-prof-nav {
    display: flex !important;
    margin-bottom: 10px;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .m-stu-prof-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 0 10px 0 4px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--isa-text);
    text-decoration: none;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .m-stu-prof-back svg,
  body[data-role="teacher"] #stuProfileRoot.is-teacher .m-stu-prof-back i {
    width: 18px;
    height: 18px;
  }
  /* Match Parent student-profile tab strip: flat band, green active pill, edge fades. */
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-tabs-shell {
    position: sticky;
    top: calc(var(--m-topbar-h) + var(--m-safe-t));
    z-index: 22;
    margin: 0 0 12px;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-tabs-fade {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-tabs-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--isa-bg), transparent);
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-tabs-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--isa-bg), transparent);
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-tabs-shell.has-more-left .stu-profile-tabs-fade--left,
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-tabs-shell.has-more-right .stu-profile-tabs-fade--right {
    opacity: 1 !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-nav {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: var(--m-space-3) var(--m-space-4) !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--isa-border) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-nav::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-tab {
    flex: 0 0 auto;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 var(--m-space-4) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    border-radius: var(--m-radius-pill) !important;
    background: transparent !important;
    color: var(--isa-text-secondary) !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-tab.is-active {
    background: var(--isa-primary) !important;
    color: #fff !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-tab-full {
    display: inline;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-tab-short {
    display: none;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-hero-actions .btn-isa {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border-radius: 12px !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-hero-actions .btn-isa:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-profile-body {
    padding: 0 !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-ov-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[data-role="teacher"] #stuProfileRoot.is-teacher .stu-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Teacher Faculty Profile (#tchProfileRoot.is-teacher) — same gutters +
     element styling as #stuProfileRoot.is-teacher (hero/tabs/actions/body). */
  body[data-role="teacher"] .app-content:has(#tchProfileRoot.is-teacher) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#tchProfileRoot.is-teacher) {
    padding: 0;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher {
    max-width: 430px;
    margin: 0 auto;
    padding: var(--m-space-3) var(--m-space-4)
      calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-8));
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-nav {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: var(--m-space-3) var(--m-space-4) !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--isa-border) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-nav::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-tab {
    flex: 0 0 auto;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 var(--m-space-4) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    border-radius: var(--m-radius-pill) !important;
    background: transparent !important;
    color: var(--isa-text-secondary) !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-tab.is-active {
    background: var(--isa-primary) !important;
    color: #fff !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-hero-actions .btn-isa {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border-radius: 12px !important;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-hero-actions .btn-isa:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-body {
    padding: 0 !important;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-ov-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Faculty profile tabs — edge fades (same cue as student profile). */
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-tabs-shell {
    position: sticky;
    top: calc(var(--m-topbar-h) + var(--m-safe-t));
    z-index: 22;
    margin: 0 0 12px;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-tabs-fade {
    display: block !important;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-tabs-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--isa-bg), transparent);
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-tabs-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--isa-bg), transparent);
  }
  body[data-role="teacher"] #tchProfileRoot.is-teacher .stu-profile-tabs-fade.is-on {
    opacity: 1;
  }

  /* Continue teacher corrections card styles that follow after hero hide */
  body[data-role="teacher"] #attCorrPage #attCorrNew {
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1) !important;
    background: var(--isa-surface-solid) !important;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-new-head {
    margin-bottom: 12px;
    align-items: flex-start;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-new-head .isa-card-title {
    font-size: 1rem;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-form .grid-3,
  body[data-role="teacher"] #attCorrPage .att-corr-form .grid-2 {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-form .isa-form-group {
    margin: 0;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-form .isa-label {
    font-size: 0.74rem;
    font-weight: 750;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-form .isa-select,
  body[data-role="teacher"] #attCorrPage .att-corr-form .isa-input,
  body[data-role="teacher"] #attCorrPage .att-corr-form .isa-ss {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-change {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-current {
    width: 100%;
    justify-content: center;
    min-height: 36px;
  }
  body[data-role="teacher"] #attCorrPage .att-corr-form-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 4px;
  }
  body[data-role="teacher"] #attCorrPage #btnCorrSubmit {
    width: 100%;
    min-height: 48px;
    border-radius: 14px !important;
    justify-content: center;
    font-weight: 750;
  }
  body[data-role="teacher"] #attCorrPage #attCorrBoard {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1) !important;
    background: var(--isa-surface-solid) !important;
  }
  body[data-role="teacher"] #attCorrPage #attCorrBoard .adm-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"] #attCorrPage #attCorrBoard .adm-filter-search {
    width: 100%;
    max-width: none;
  }
  body[data-role="teacher"] #attCorrPage #attCorrBoard .adm-filter-search input {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
  }
  body[data-role="teacher"] #attCorrPage #attCorrBoard .adm-filter-fields {
    display: none !important;
  }
  body[data-role="teacher"] #attCorrPage #btnCorrLoad {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-content: center;
  }
  body[data-role="teacher"] #attCorrPage #corrChips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 12px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  body[data-role="teacher"] #attCorrPage #corrChips::-webkit-scrollbar { display: none; }
  body[data-role="teacher"] #attCorrPage #corrChips .att-chip {
    flex: 0 0 auto;
    min-height: 36px;
    border-radius: 999px;
    font-size: 0.74rem;
  }
  body[data-role="teacher"] #attCorrPage #corrList {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body[data-role="teacher"] #attCorrPage .isa-table-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--isa-border);
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    border-left: 3px solid transparent;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card.is-pending { border-left-color: #ca8a04; }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card.is-approved { border-left-color: #16a34a; }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card.is-rejected { border-left-color: #dc2626; }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(var(--isa-primary-rgb, 5, 150, 105), 0.12);
    color: var(--isa-primary-fx);
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__who strong {
    font-size: 0.92rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__who span {
    font-size: 0.7rem;
    color: var(--isa-text-muted);
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__badge {
    flex: 0 0 auto;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    color: #475569;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__badge.is-pending {
    background: var(--isa-warning-soft);
    color: var(--isa-warning);
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__badge.is-approved {
    background: var(--isa-success-soft);
    color: var(--isa-success);
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__badge.is-rejected {
    background: var(--isa-danger-soft);
    color: var(--isa-danger);
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__swap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__meta,
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__why,
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__wait,
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__review {
    margin: 0;
    font-size: 0.78rem;
    color: var(--isa-text-secondary);
    line-height: 1.35;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__why em {
    font-style: normal;
    font-weight: 800;
    color: var(--isa-text-muted);
    margin-right: 4px;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__wait {
    color: #b45309;
    font-weight: 700;
  }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__review.is-approved { color: #15803d; font-weight: 700; }
  body[data-role="teacher"] #attCorrPage .m-att-corr-card__review.is-rejected { color: #b91c1c; font-weight: 700; }

  /* Teacher Classes hub (DCT dashboard.php #mDctDay): hide desktop pulse /
     list / journey — same reuse-in-place idea as #studentTtRoot. */
  body[data-role="teacher"] #dctModule:has(#mDctDay) > .adm-journey,
  body[data-role="teacher"] #dctModule:has(#mDctDay) #dctKpis,
  body[data-role="teacher"] #dctModule:has(#mDctDay) .dct-main-grid {
    display: none !important;
  }

  /* Upcoming Classes — Pattern A desk (#mDctUpcoming) */
  body[data-role="teacher"] #dctModule:has(#mDctUpcoming) > .adm-journey,
  body[data-role="teacher"] #dctModule:has(#mDctUpcoming) #dctListBoard {
    display: none !important;
  }

  /* Running Classes — Pattern A desk (#mDctRunning) */
  body[data-role="teacher"] #dctModule:has(#mDctRunning) > .adm-journey,
  body[data-role="teacher"] #dctModule:has(#mDctRunning) #dctListBoard {
    display: none !important;
  }

  /* Missed Classes — Pattern A desk (#mDctMissed) */
  body[data-role="teacher"] #dctModule:has(#mDctMissed) > .adm-journey,
  body[data-role="teacher"] #dctModule:has(#mDctMissed) #dctListBoard {
    display: none !important;
  }

  /* Class Session workspace — drop website journey; app chrome owns nav */
  body[data-role="teacher"] #dctModule:has(#dctSessionPage) > .adm-journey {
    display: none !important;
  }

  /* Teacher Assignments — hide the website journey dock on every
     Assignments page (all hubs below own the phone UX). */
  body[data-role="teacher"] #asgnModule > .asgn-dock-card,
  body[data-role="teacher"] #asgnModule > .adm-journey {
    display: none !important;
  }

  /* List desk */
  body[data-role="teacher"] #asgnListPage {
    display: none !important;
  }

  /* Dashboard */
  body[data-role="teacher"] #asgnDashboardPage {
    display: none !important;
  }

  /* Evaluation: hide desktop queue/filter; keep #asgnEvalDesk for grading.
     When the desk is open, also tuck the mobile queue hub.
     Full grade-desk app skin lives further below in this file. */
  body[data-role="teacher"] #asgnEvalPage > .adm-focus-bar,
  body[data-role="teacher"] #asgnEvalPage > .adm-work-panel:not(.asgn-eval-desk) {
    display: none !important;
  }
  body[data-role="teacher"] #asgnModule:has(#asgnEvalDesk:not([hidden])) #mAsgnEval {
    display: none !important;
  }

  /* Submissions / Templates — full hubs; analytics & reports keep their
     live hosts and get an app-skin (below) instead of display:none. */
  body[data-role="teacher"] #asgnSubmissionsPage,
  body[data-role="teacher"] #asgnTemplatesPage {
    display: none !important;
  }

  /* Create wizard — keep the live form (no duplicate ids), but app-skin it.
     Hide website chrome / summary aside; sticky footer stays. */
  body[data-role="teacher"] #asgnCreatePage .asgn-create-hero {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 4px 2px 12px !important;
  }
  body[data-role="teacher"] #asgnCreatePage .asgn-create-hero .adm-panel-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--isa-text-muted) !important;
  }
  body[data-role="teacher"] #asgnCreatePage .asgn-create-hero .adm-focus-title {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
  }
  body[data-role="teacher"] #asgnCreatePage .asgn-create-hero .adm-focus-text {
    font-size: 0.84rem !important;
    color: var(--isa-text-secondary) !important;
  }
  body[data-role="teacher"] #asgnCreateAside {
    display: none !important;
  }
  body[data-role="teacher"] #asgnCreatePage .asgn-start-choice {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #asgnCreatePage .asgn-start-card {
    min-height: 88px;
  }
  body[data-role="teacher"] #asgnCreatePage .asgn-wizard-steps {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #asgnCreatePage .asgn-wizard-pane {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #asgnCreatePage {
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 88px);
  }
  body[data-role="teacher"] .asgn-wizard-m-schedule {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px !important;
  }

  /* Analytics + Reports — keep hosts alive, app-skin the chrome */
  body[data-role="teacher"] #asgnAnalyticsPage .asgn-dash-hero,
  body[data-role="teacher"] #asgnReportsPage .asgn-rep-hero {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 4px 2px 10px !important;
    flex-direction: column;
    align-items: stretch;
  }
  body[data-role="teacher"] #asgnAnalyticsPage .adm-focus-title,
  body[data-role="teacher"] #asgnReportsPage .adm-focus-title {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
  }
  body[data-role="teacher"] #asgnAnalyticsPage .asgn-dash-hero__actions,
  body[data-role="teacher"] #asgnReportsPage .asgn-rep-hero__steps {
    display: none !important;
  }
  body[data-role="teacher"] #asgnAnalyticsPage .asgn-dash-filters,
  body[data-role="teacher"] #asgnReportsPage .asgn-rep-catalog__head {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #asgnAnalyticsPage .asgn-field-grid,
  body[data-role="teacher"] #asgnReportsPage .asgn-field-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  body[data-role="teacher"] #asgnAnalyticsPage [class*="kpi"],
  body[data-role="teacher"] #asgnAnKpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body[data-role="teacher"] #asgnAnalyticsPage .chart-box {
    min-height: 200px !important;
  }
  body[data-role="teacher"] #asgnReportsPage .asgn-rep-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body[data-role="teacher"] #asgnReportsPage .asgn-rep-card {
    border-radius: var(--m-radius-lg) !important;
    padding: 14px !important;
    min-height: 72px;
  }
  body[data-role="teacher"] #asgnReportsPage .asgn-rep-group__head span {
    display: none;
  }
  body[data-role="teacher"] #btnAnLoad,
  body[data-role="teacher"] #btnRepLoad {
    min-height: 46px;
    width: 100%;
  }
  body[data-role="teacher"] #asgnReportsPage .asgn-rep-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Templates offcanvas → full-screen sheet (also uses .perf-student-offcanvas,
     so must reset --bs-offcanvas-width or Bootstrap keeps the sidebar calc). */
  body[data-role="teacher"] #asgnTplOffcanvas.offcanvas-end {
    --bs-offcanvas-width: 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Teacher Attendance journey (My Day · Mark · Corrections): only 3 steps,
     so keep labels visible on mobile — icon-only looked sparse and hid
     which desk you were on (esp. Corrections). Admin’s longer rail still
     uses admissions.css icon-only collapse. */
  body[data-role="teacher"] .att-module .adm-journey {
    margin-bottom: var(--m-space-4) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .att-module .adm-journey-track {
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    padding: 6px 4px;
  }
  body[data-role="teacher"] .att-module .adm-journey-step {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px !important;
    text-align: center;
  }
  body[data-role="teacher"] .att-module .adm-journey-label {
    display: block !important;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
    max-width: 100%;
  }
  body[data-role="teacher"] .att-module .adm-journey-connector {
    flex: 0 0 12px;
    width: 12px;
    min-width: 12px;
    margin: 0;
    align-self: center;
    margin-bottom: 18px; /* optically center on icon row, above labels */
  }

  /* ---- DCT live session workspace (#dctSessionPage) — match teacher
     mobile app chrome (Upcoming / Running desks): no journey rail,
     soft card hero, segmented tabs, thumb-sized Start/End. ---- */
  body[data-role="teacher"] .app-content:has(#dctSessionPage) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-role="teacher"] #dctSessionPage.m-dct-sess {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-3);
    max-width: 560px;
    margin: 0 auto;
    padding: var(--m-space-4) var(--m-space-4) calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-8));
    box-sizing: border-box;
  }
  body[data-role="teacher"] .m-dct-sess-nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  body[data-role="teacher"] .m-dct-sess-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 12px 0 8px;
    border-radius: var(--m-radius-pill);
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
    color: var(--isa-text);
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
  }
  body[data-role="teacher"] .m-dct-sess-back svg,
  body[data-role="teacher"] .m-dct-sess-back i {
    width: 18px;
    height: 18px;
  }
  body[data-role="teacher"] .m-dct-sess-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
    color: var(--isa-text-secondary);
  }
  body[data-role="teacher"] .m-dct-sess-home svg,
  body[data-role="teacher"] .m-dct-sess-home i {
    width: 18px;
    height: 18px;
  }
  body[data-role="teacher"] .dct-sess-hero {
    position: relative;
    top: auto;
    z-index: 1;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
    border: 1px solid var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1) !important;
  }
  body[data-role="teacher"] .dct-sess-hero .adm-panel-kicker {
    margin: 0 0 4px !important;
    color: var(--isa-primary-fx) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em;
  }
  body[data-role="teacher"] .dct-sess-hero .adm-focus-title {
    margin: 0 0 6px !important;
    font-size: 1.28rem !important;
    font-weight: 850 !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  body[data-role="teacher"] .dct-sess-hero .adm-focus-text {
    margin: 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.35;
    color: var(--isa-text-secondary) !important;
  }
  body[data-role="teacher"] .dct-sess-hero .adm-focus-text .isa-badge {
    vertical-align: middle;
  }
  body[data-role="teacher"] .dct-sess-hero__top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  body[data-role="teacher"] #sessActions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  body[data-role="teacher"] #sessActions .btn-isa,
  body[data-role="teacher"] #sessActions .m-dct-sess-cta {
    flex: 1 1 0;
    min-height: 48px;
    border-radius: 14px !important;
    font-weight: 800;
    font-size: 0.92rem;
  }
  body[data-role="teacher"] .dct-sess-hero__stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border-top: 1px solid var(--isa-border);
    padding-top: 12px !important;
  }
  body[data-role="teacher"] .dct-shs {
    border-right: 0 !important;
    border-bottom: 0 !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 14px;
    background: var(--isa-bg);
  }
  body[data-role="teacher"] .dct-shs--live {
    background: rgba(16, 185, 129, 0.1);
  }
  body[data-role="teacher"] .dct-shs--warn {
    background: rgba(245, 158, 11, 0.12);
  }
  body[data-role="teacher"] .dct-shs--ok {
    background: rgba(16, 185, 129, 0.08);
  }

  /* Tabs -> segmented control — always under topbar on phone */
  body[data-role="teacher"] .dct-session-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 !important;
    background: var(--isa-surface-solid);
    border-radius: var(--m-radius-pill);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
    list-style: none;
    position: sticky;
    top: calc(var(--m-topbar-h) + var(--m-safe-t));
    z-index: 22;
  }
  body[data-role="teacher"] .dct-session-tabs .nav-item {
    flex: 1 1 0;
    min-width: 0;
  }
  body[data-role="teacher"] .dct-session-tabs .nav-link {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    border-radius: var(--m-radius-pill) !important;
    padding: 10px 4px !important;
    font-size: 0.74rem;
    font-weight: 750;
    color: var(--isa-text-muted);
    text-align: center;
  }
  body[data-role="teacher"] .dct-session-tabs .nav-link.active {
    background: rgba(var(--isa-primary-rgb, 5, 150, 105), 0.12) !important;
    color: var(--isa-primary-fx) !important;
    box-shadow: none;
  }
  body[data-role="teacher"] #sessPanel {
    border-radius: 20px !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1) !important;
    background: var(--isa-surface-solid) !important;
    overflow: visible;
  }
  body[data-role="teacher"] #sessPanel > #sessBody {
    padding: 4px;
  }

  /* Compact chrome on Attendance / Chapter / Events — tabs at top like Overview left hero behind */
  body[data-role="teacher"].is-dct-desk .m-dct-sess-nav,
  body[data-role="teacher"].is-dct-desk .dct-sess-hero {
    display: none !important;
  }
  body[data-role="teacher"].is-dct-desk #sessPanel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body[data-role="teacher"].is-dct-desk #sessPanel > #sessBody {
    padding: 0 !important;
  }
  body[data-role="teacher"].is-dct-desk .dct-session-tabs {
    margin-bottom: 2px !important;
  }

  /* Overview tiles: 2-up */
  body[data-role="teacher"] .dct-ov-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body[data-role="teacher"] .dct-ov-tile {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  /* Chapter form: full-width single column, bigger save / end targets */
  body[data-role="teacher"] #sessBody .adm-form,
  body[data-role="teacher"] #sessBody .dct-ch-form {
    max-width: none !important;
  }
  body[data-role="teacher"] #sessBody .dct-ch-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body[data-role="teacher"] #sessBody #btnSaveChapter,
  body[data-role="teacher"] #sessBody .dct-ch-actions .btn-end {
    width: 100%;
    min-height: 48px;
    border-radius: 14px !important;
    justify-content: center;
  }

  /* ---- Speed roll-call desk (#attMarkRoot / .m-att-*) ---- */
  body[data-role="teacher"] .m-att-desk {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: calc(72px + var(--m-bottomnav-h) + var(--m-safe-b));
  }
  /* Not sticky — the control block is tall; sticky was painting over the
     first student card. Tabs stay sticky; this scrolls with the roster. */
  body[data-role="teacher"] .m-att-sticky {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    top: auto;
    z-index: 1;
    padding: 12px;
    margin: 0;
    border-radius: 16px;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
    flex: 0 0 auto;
  }
  body[data-role="teacher"] .m-att-grid {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body[data-role="teacher"] .m-att-summary {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  body[data-role="teacher"] .m-att-summary__pct {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(var(--isa-primary-rgb, 5, 150, 105), 0.12);
    color: var(--isa-primary-fx);
    font-size: 0.92rem;
    font-weight: 850;
    letter-spacing: -0.02em;
  }
  body[data-role="teacher"] .m-att-summary__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"] .m-att-summary__copy strong {
    font-size: 1rem;
    font-weight: 800;
  }
  body[data-role="teacher"] .m-att-summary__copy span {
    font-size: 0.78rem;
    color: var(--isa-text-secondary);
  }
  body[data-role="teacher"] .m-att-search {
    margin: 0 !important;
    min-height: 44px;
  }
  body[data-role="teacher"] .m-att-chips {
    margin: 0 !important;
    padding-bottom: 0 !important;
  }
  body[data-role="teacher"] .m-att-quick {
    display: flex;
    gap: 6px;
  }
  body[data-role="teacher"] .m-att-quick .btn-isa {
    flex: 1 1 0;
    min-height: 40px;
    border-radius: 12px !important;
    font-size: 0.72rem;
    font-weight: 750;
    padding: 0 8px !important;
  }
  body[data-role="teacher"] .m-att-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .m-att-card.is-present {
    border-color: rgba(16, 185, 129, 0.35);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #10b981 14%, var(--isa-surface-solid)) 0%,
      var(--isa-surface-solid) 50%
    );
  }
  body[data-role="teacher"] .m-att-card.is-absent {
    border-color: rgba(239, 68, 68, 0.32);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #ef4444 14%, var(--isa-surface-solid)) 0%,
      var(--isa-surface-solid) 50%
    );
  }
  body[data-role="teacher"] .m-att-card.is-late {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #f59e0b 14%, var(--isa-surface-solid)) 0%,
      var(--isa-surface-solid) 50%
    );
  }
  body[data-role="teacher"] .m-att-tap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
  }
  body[data-role="teacher"] .m-att-tap .att-stu-photo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    flex: 0 0 auto;
  }
  body[data-role="teacher"] .m-att-tap .att-stu-id {
    flex: 1 1 auto;
    min-width: 0;
  }
  body[data-role="teacher"] .m-att-tap .att-stu-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] .m-att-tap .att-stu-meta {
    font-size: 0.68rem;
    color: var(--isa-text-muted);
  }
  body[data-role="teacher"] .m-att-tap .att-stu-state {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: var(--m-radius-pill);
    background: var(--isa-bg-accent);
    color: var(--isa-text-secondary);
  }
  body[data-role="teacher"] .m-att-card.is-present .att-stu-state {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
  }
  body[data-role="teacher"] .m-att-card.is-absent .att-stu-state {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
  }
  body[data-role="teacher"] .m-att-card.is-late .att-stu-state {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
  }
  body[data-role="teacher"] .m-att-seg {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
  }
  body[data-role="teacher"] .m-att-seg .att-seg-btn {
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 0.72rem;
    font-weight: 750;
    gap: 4px;
  }
  body[data-role="teacher"] .m-att-note {
    border-top: 1px dashed var(--isa-border);
    padding-top: 4px;
  }
  body[data-role="teacher"] .m-att-note summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--isa-text-muted);
    padding: 4px 0;
  }
  body[data-role="teacher"] .m-att-note summary::-webkit-details-marker { display: none; }
  body[data-role="teacher"] .m-att-note .mark-remarks {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--isa-border);
    padding: 0 10px;
    font-size: 16px;
  }
  body[data-role="teacher"] .m-att-hint {
    text-align: center;
    font-size: 0.7rem;
    color: var(--isa-text-muted);
    padding: 4px 8px 8px;
  }
  body[data-role="teacher"] .m-att-actionbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b)) !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px var(--m-space-4) !important;
    background: var(--isa-surface-strong);
    border-top: 1px solid var(--isa-border);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
    box-sizing: border-box !important;
  }
  body[data-role="teacher"] .m-att-actionbar .btn-isa {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px;
    border-radius: 12px !important;
    font-weight: 750;
    font-size: 0.78rem;
    padding-inline: 8px !important;
    justify-content: center;
    order: 0 !important;
  }
  /* Save stays primary but shares the same row — never stack under All present. */
  body[data-role="teacher"] .m-att-actionbar #btnSaveAtt,
  body[data-role="teacher"] .m-att-actionbar #btnSaveMarkMobile {
    flex: 1.25 1 0 !important;
    min-height: 46px;
    font-size: 0.82rem;
  }

  /* Overview tiles: 2-up instead of desktop auto-fill(220px) which forces
     a too-narrow single column feel on a phone. */
  body[data-role="teacher"] .dct-ov-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body[data-role="teacher"] .dct-ov-tile {
    padding: 10px !important;
  }

  /* ---- Student Attendance history desk (#attListPage) ---- */
  body[data-role="teacher"] #attListPage.adm-workbench {
    max-width: 100%;
    min-width: 0;
  }
  body[data-role="teacher"] #attListPage .att-hist-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px !important;
  }
  body[data-role="teacher"] #attListPage .att-hist-hero-stats {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  body[data-role="teacher"] #attListPage .att-hist-hero-stats .att-mark-mini {
    padding: 8px 10px;
    border-radius: 12px;
  }
  body[data-role="teacher"] #attListPage .att-stu-focus {
    padding: 14px !important;
    overflow: visible;
  }
  body[data-role="teacher"] #attListPage .att-stu-focus-head {
    gap: 10px;
  }
  body[data-role="teacher"] #attListPage .att-stu-focus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-role="teacher"] #attListPage .adm-work-panel {
    max-width: 100%;
    min-width: 0;
  }
  /* Range + Apply: flex-end + nowrap was clipping "Today" off the left. */
  body[data-role="teacher"] #attListPage .adm-filter-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: stretch !important;
  }
  body[data-role="teacher"] #attListPage .adm-filter-actions .btn-isa {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 10px !important;
  }
  body[data-role="teacher"] #attListPage .att-stu-focus-stats .att-mark-mini {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
  }
  body[data-role="teacher"] #attListPage .att-stu-focus-stats .att-mark-mini em {
    min-width: 0;
    font-size: 0.62rem;
    line-height: 1.2;
  }
  body[data-role="teacher"] #attListPage .att-stu-focus-stats .att-mark-mini strong {
    font-size: 1rem;
    line-height: 1.2;
  }
  body[data-role="teacher"] #attListPage .att-hist-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
  }
  body[data-role="teacher"] #attListPage .att-hist-chips .att-chip {
    width: 100%;
    justify-content: center;
    min-height: 40px;
    padding: 8px 10px;
  }
  body[data-role="teacher"] #attListPage #attListHost.adm-work-list {
    gap: 12px;
  }
  body[data-role="teacher"] #attListPage #attListHost .adm-work-row {
    gap: 12px;
    padding: 14px 12px;
    align-items: start;
  }
  body[data-role="teacher"] #attListPage #attListHost .adm-work-main {
    gap: 6px;
  }
  body[data-role="teacher"] #attListPage #attListHost .adm-work-meta,
  body[data-role="teacher"] #attListPage #attListHost .adm-work-facts {
    gap: 6px 10px;
    line-height: 1.4;
  }
  body[data-role="teacher"] #attListPage .isa-table-footer {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ---- Mark Attendance desk (#attMarkPage) — teacher speed roll ---- */
  body[data-role="teacher"] .app-content:has(#attMarkPage) > .page-header {
    display: none;
  }
  body[data-role="teacher"] #attModule:has(#attMarkPage) > .adm-journey {
    display: none !important;
  }
  body[data-role="teacher"] #attMarkPage.m-att-mark {
    max-width: 430px;
    margin: 0 auto;
    padding: var(--m-space-3) var(--m-space-4)
      calc(88px + var(--m-bottomnav-h) + var(--m-safe-b));
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  body[data-role="teacher"] #attMarkPage .m-att-mark-nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  body[data-role="teacher"] #attMarkPage .m-att-mark-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 0 10px 0 4px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--isa-text);
    text-decoration: none;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #attMarkPage .m-att-mark-back svg,
  body[data-role="teacher"] #attMarkPage .m-att-mark-back i {
    width: 18px;
    height: 18px;
  }
  body[data-role="teacher"] #attMarkPage .m-att-mark-home {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--isa-text-secondary);
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
    text-decoration: none;
  }
  body[data-role="teacher"] #attMarkPage .att-mark-hero {
    display: none !important;
  }
  body[data-role="teacher"] #attMarkPage #markSessionBar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #attMarkPage #markSessionBar .adm-filter-fields {
    display: block;
    min-width: 0;
  }
  body[data-role="teacher"] #attMarkPage #markSessionBar .adm-filter-control,
  body[data-role="teacher"] #attMarkPage #markSessionBar .isa-ss {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  body[data-role="teacher"] #attMarkPage #markSessionBar .adm-filter-actions {
    margin: 0;
  }
  body[data-role="teacher"] #attMarkPage #btnLoadRoster {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-content: center;
  }
  body[data-role="teacher"] #attMarkPage .att-mark-toolbar {
    display: none !important;
  }
  body[data-role="teacher"] #attMarkPage #mMarkDesk:not([hidden]) {
    display: block !important;
  }
  body[data-role="teacher"] #attMarkPage .m-att-mark-desk {
    margin: 0;
  }
  body[data-role="teacher"] #attMarkPage .m-att-autosave {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--isa-text-muted);
    background: color-mix(in srgb, #94a3b8 14%, var(--isa-surface-solid));
    width: fit-content;
  }
  body[data-role="teacher"] #attMarkPage .m-att-autosave.is-dirty { color: var(--isa-warning); background: var(--isa-warning-soft); }
  body[data-role="teacher"] #attMarkPage .m-att-autosave.is-saving { color: var(--isa-primary-fx); background: rgba(var(--isa-primary-rgb), 0.12); }
  body[data-role="teacher"] #attMarkPage .m-att-autosave.is-saved { color: var(--isa-success); background: var(--isa-success-soft); }
  body[data-role="teacher"] #attMarkPage .m-att-autosave.is-error { color: var(--isa-danger); background: var(--isa-danger-soft); }
  body[data-role="teacher"] #attMarkPage .m-att-lock-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: var(--isa-warning-soft);
    border: 1px solid color-mix(in srgb, var(--isa-warning) 35%, var(--isa-border));
  }
  body[data-role="teacher"] #attMarkPage .m-att-lock-banner[hidden] {
    display: none !important;
  }
  body[data-role="teacher"] #attMarkPage .m-att-lock-banner strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: #92400e;
  }
  body[data-role="teacher"] #attMarkPage .m-att-lock-banner span {
    font-size: 0.78rem;
    color: #a16207;
  }
  body[data-role="teacher"] #attMarkPage .m-att-lock-banner .btn-isa {
    align-self: flex-start;
    min-height: 40px;
    border-radius: 12px !important;
  }
  body[data-role="teacher"] #attMarkPage .m-att-remark {
    margin-top: 2px;
  }
  body[data-role="teacher"] #attMarkPage .m-att-remark .mark-remarks {
    width: 100%;
    min-height: 40px;
    padding-left: 34px;
    border-radius: 10px;
    border: 1px solid var(--isa-border);
    font-size: 16px;
  }
  body[data-role="teacher"] #attMarkPage #markGrid {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    margin: 0 !important;
  }
  body[data-role="teacher"] #attMarkPage #markGrid .adm-empty {
    padding: 28px 16px;
    border-radius: 16px;
    background: var(--isa-surface-solid);
    border: 1px dashed var(--isa-border);
  }
  /* Body-mounted save bar */
  body[data-role="teacher"].is-att-mark .m-att-actionbar#mMarkActionBar {
    display: flex !important;
  }

  /* ---- Shared attendance marking desk (.att-mark-*, .att-stu-card,
     .att-seg-btn) — desktop toolbar polish on smaller widths when needed. ---- */
  body[data-role="teacher"] .att-mark-toolbar {
    padding: var(--m-space-3) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .att-mark-toolbar-row {
    gap: 8px !important;
  }
  body[data-role="teacher"] .att-mark-search {
    flex: 1 1 100% !important;
    order: -1;
  }
  body[data-role="teacher"] .att-mark-toolbar-end {
    width: 100%;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  body[data-role="teacher"] .att-mark-toolbar #btnSaveAtt,
  body[data-role="teacher"] .att-mark-toolbar-end #btnSaveAtt {
    flex: 1 1 100%;
    min-height: 46px;
    order: 5;
  }
  body[data-role="teacher"] .att-mark-bulk-row {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  body[data-role="teacher"] .att-mark-bulk-row .btn-isa {
    flex: 1 1 auto;
    min-height: 38px;
  }
  body[data-role="teacher"] .att-mark-bulk-hint {
    display: none !important;
  }
  body[data-role="teacher"] .att-student-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[data-role="teacher"] .att-stu-card {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .att-seg-btn {
    min-height: 40px;
  }

  /* ---- Assignments create wizard — fit 4 steps in viewport ----
     Number on top, short label under; thin rails between. No overflow. */
  body[data-role="teacher"] .asgn-wizard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    overflow: hidden;
    padding: 10px 8px 12px;
  }
  body[data-role="teacher"] .asgn-wizard-step {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding: 6px 2px;
    border-radius: 12px;
  }
  body[data-role="teacher"] .asgn-wizard-step__num {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }
  body[data-role="teacher"] .asgn-wizard-step__text {
    align-items: center;
    width: 100%;
    min-width: 0;
    text-align: center;
  }
  body[data-role="teacher"] .asgn-wizard-step__text strong {
    display: block;
    width: 100%;
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] .asgn-wizard-step__text small {
    display: none;
  }
  body[data-role="teacher"] .asgn-wizard-rail {
    flex: 0 0 10px;
    width: 10px;
    min-width: 10px;
    max-width: 14px;
    height: 2px;
    align-self: center;
    margin-top: 13px; /* optically center with step number circles */
  }
  body[data-role="teacher"] .asgn-wizard-pane {
    padding: var(--m-space-3) !important;
  }
  /* Create wizard sticky bar — one native app footer above bottom-nav:
     [ ← ]  [ Continue ████████████ ]   or   [ ← ] [ Draft ] [ Publish ]
     Secondary links (List / template tools) stay off the bar on phone. */
  body[data-role="teacher"] .asgn-wizard-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 40;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px var(--m-space-4) !important;
    border: 0 !important;
    border-top: 1px solid var(--isa-border) !important;
    border-radius: 0 !important;
    background: var(--isa-surface-strong) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
  }
  body[data-role="teacher"] .asgn-wizard-footer__spacer,
  body[data-role="teacher"] .asgn-wizard-footer__list,
  body[data-role="teacher"] #btnAsgnSaveTemplate,
  body[data-role="teacher"] #btnAsgnDuplicate,
  body[data-role="teacher"] .asgn-wizard-footer__schedule {
    display: none !important;
  }
  body[data-role="teacher"] #btnAsgnWizardBack {
    order: 1;
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0 !important;
    border-radius: 14px !important;
    justify-content: center;
  }
  body[data-role="teacher"] #btnAsgnWizardBack .asgn-wizard-footer__label {
    display: none;
  }
  body[data-role="teacher"] #btnAsgnWizardBack svg,
  body[data-role="teacher"] #btnAsgnWizardBack i {
    width: 20px;
    height: 20px;
    margin: 0;
  }
  body[data-role="teacher"] #btnAsgnWizardNext {
    order: 2;
    flex: 1 1 auto;
    width: auto !important;
    min-height: 48px;
    border-radius: 14px !important;
    font-weight: 750;
    justify-content: center;
    gap: 8px;
  }
  body[data-role="teacher"] .asgn-wizard-publish {
    order: 2;
    flex: 1 1 auto;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    width: auto !important;
    min-width: 0;
  }
  body[data-role="teacher"] .asgn-wizard-publish[hidden] {
    display: none !important;
  }
  body[data-role="teacher"] .asgn-wizard-publish button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    border-radius: 14px !important;
    font-weight: 750;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body[data-role="teacher"] .asgn-wizard-publish [data-save-mode="publish"] {
    flex: 1.35 1 0;
  }
  body[data-role="teacher"] #btnAsgnWizardBack:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  body[data-role="teacher"] #btnAsgnWizardNext:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
  }
  body[data-role="teacher"] #asgnCreateAside {
    order: -1;
  }
  body[data-role="teacher"] .asgn-start-choice__grid {
    grid-template-columns: 1fr !important;
  }
  body[data-role="teacher"] .asgn-audience__students,
  body[data-role="teacher"] .asgn-audience__search-row {
    flex-direction: column;
  }
  body[data-role="teacher"] #btnAsgnStuSearch {
    width: 100%;
  }

  /* =========================================================
     Grade desk — Pattern A mobile feed (#mEvalGradeFeed).
     Desktop table is hidden; real article cards avoid table/CSS wars.
     ========================================================= */
  body[data-role="teacher"].is-asgn-grading {
    --ev-grade-bar-h: 62px;
    overflow-x: hidden;
  }
  body[data-role="teacher"].is-asgn-grading .app-content,
  body[data-role="teacher"].is-asgn-grading #asgnModule,
  body[data-role="teacher"].is-asgn-grading #asgnEvalPage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    gap: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px var(--m-space-4) calc(var(--ev-grade-bar-h) + var(--m-bottomnav-h) + var(--m-safe-b) + 16px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk > * {
    grid-area: auto !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-eval-desk__sticky {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 6px;
    position: relative !important;
    top: auto !important;
    z-index: 1;
    width: 100%;
    margin: 0 0 10px !important;
    padding: 0 0 8px !important;
    background: transparent;
    border-bottom: 1px solid var(--isa-border);
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-eval-desk__head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"].is-asgn-grading #btnEvBack:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    margin: 0;
    background: var(--isa-surface-solid) !important;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-eval-desk__titles {
    flex: 1 1 auto;
    min-width: 0;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .adm-panel-kicker {
    display: none !important;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .isa-card-title {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-eval-desk__sub {
    font-size: 0.7rem !important;
    margin-top: 1px !important;
    color: var(--isa-text-secondary) !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body[data-role="teacher"].is-asgn-grading #evDeskProgress {
    display: inline-flex !important;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--m-radius-pill);
    background: rgba(var(--isa-primary-rgb), 0.12);
    color: var(--isa-primary-fx);
    font-size: 0.66rem;
    font-weight: 750;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-eval-templates {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-eval-templates__label { display: none; }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-chip-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 0 2px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-chip-row::-webkit-scrollbar { display: none; }
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-chip,
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .btn-ev-fb {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--m-radius-pill);
    font-size: 0.68rem;
    font-weight: 650;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    color: var(--isa-text-secondary);
  }

  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk .asgn-eval-table-wrap {
    display: none !important;
  }
  body[data-role="teacher"].is-asgn-grading #mEvalGradeFeed {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 2px 0 0;
    position: relative;
    z-index: 0;
  }
  body[data-role="teacher"].is-asgn-grading #mEvalGradeFeed[hidden] {
    display: none !important;
  }

  body[data-role="teacher"].is-asgn-grading .m-ev-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card.is-focus {
    border-color: rgba(var(--isa-primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--isa-primary-rgb), 0.1);
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card.is-evaluated,
  body[data-role="teacher"].is-asgn-grading .m-ev-card.is-published {
    border-color: rgba(16, 185, 129, 0.3);
    background: color-mix(in srgb, #10b981 10%, var(--isa-surface-solid));
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card.is-saved {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4);
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    flex: 0 0 auto;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card__who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card__who strong {
    font-size: 0.9rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card__who span {
    font-size: 0.7rem;
    color: var(--isa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-status-pill {
    display: inline-flex !important;
    flex: 0 0 auto;
    max-width: 5.2rem;
    padding: 2px 8px;
    font-size: 0.62rem;
    font-weight: 750;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card__grade {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-marks-wrap {
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    background: var(--isa-surface) !important;
    border: 1px solid var(--isa-border) !important;
    box-sizing: border-box !important;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-marks,
  body[data-role="teacher"].is-asgn-grading .m-ev-card .ev-completed {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: left !important;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-fb {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-max {
    flex: 0 0 auto !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--isa-text-muted) !important;
    white-space: nowrap !important;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-card .asgn-eval-actions .btn-isa {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  /* Keep feed hidden until JS opens the desk (overrides generic show rules). */
  #mEvalGradeFeed[hidden] {
    display: none !important;
  }

  /* Fixed action bar — mounted on body via JS (.m-ev-actionbar) so parent
     overflow/transform cannot trap position:fixed. */
  body[data-role="teacher"].is-asgn-grading .asgn-desk-toolbar.m-ev-actionbar,
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk > .asgn-desk-toolbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b)) !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 10px var(--m-space-4) !important;
    background: var(--isa-surface-strong);
    border: 0;
    border-top: 1px solid var(--isa-border);
    border-radius: 0;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
    box-sizing: border-box !important;
  }
  body[data-role="teacher"].is-asgn-grading .asgn-desk-toolbar.m-ev-actionbar .btn-isa,
  body[data-role="teacher"].is-asgn-grading #asgnEvalDesk > .asgn-desk-toolbar .btn-isa {
    flex: 1 1 0;
    min-height: 44px;
    font-weight: 750;
    border-radius: 12px !important;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-actionbar #btnEvLock,
  body[data-role="teacher"].is-asgn-grading #btnEvLock {
    flex: 0 0 44px !important;
    width: 44px;
    min-width: 44px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-role="teacher"].is-asgn-grading .m-ev-actionbar #btnEvLock .asgn-desk-toolbar__txt,
  body[data-role="teacher"].is-asgn-grading #btnEvLock .asgn-desk-toolbar__txt { display: none; }

  /* ---- Academic Performance — marks entry / records / class sheet ----
     Keep the School·Institute TRACK strip (Entry / Records / Class Subject)
     so teachers can reach class-subject desks. Hide only the primary
     Students→School→Institute→Lookup journey on these phones. ---- */
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) > .adm-journey > .adm-journey-track,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) > .adm-journey > .adm-journey-track,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) > .adm-journey > .adm-journey-track,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) > .adm-journey > .adm-journey-track,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) > .adm-journey > .adm-journey-track,
  body[data-role="teacher"] #perfModule:has(#perfStudentPage) > .adm-journey {
    display: none !important;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) > .adm-journey,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) > .adm-journey,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) > .adm-journey,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) > .adm-journey,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) > .adm-journey {
    max-width: 430px;
    /* Beat .mb-18 !important on the shell journey — it was doubling the
       white gap between the track strip and the back / title block. */
    margin: 8px var(--m-space-4) 6px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    box-shadow: var(--m-elevation-1);
    border: 1px solid var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) .perf-track-nav,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) .perf-track-nav,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) .perf-track-nav,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) .perf-track-nav,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) .perf-track-nav {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) .perf-track-nav__label,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) .perf-track-nav__label,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) .perf-track-nav__label,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) .perf-track-nav__label,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) .perf-track-nav__label {
    font-size: 0.68rem;
    line-height: 1.2;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) .perf-track-nav__steps,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) .perf-track-nav__steps,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) .perf-track-nav__steps,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) .perf-track-nav__steps,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) .perf-track-nav__steps {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) .perf-track-nav__steps::-webkit-scrollbar,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) .perf-track-nav__steps::-webkit-scrollbar,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) .perf-track-nav__steps::-webkit-scrollbar,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) .perf-track-nav__steps::-webkit-scrollbar,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) .perf-track-nav__steps::-webkit-scrollbar {
    display: none;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) .perf-track-nav__dot,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) .perf-track-nav__dot,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) .perf-track-nav__dot,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) .perf-track-nav__dot,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) .perf-track-nav__dot {
    display: none;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) .perf-track-nav__step,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) .perf-track-nav__step,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) .perf-track-nav__step,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) .perf-track-nav__step,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) .perf-track-nav__step {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface);
    font-weight: 700;
  }
  body[data-role="teacher"] #perfModule:has(#perfSchoolEntryPage) .perf-track-nav__step.is-active,
  body[data-role="teacher"] #perfModule:has(#perfInstEntryPage) .perf-track-nav__step.is-active,
  body[data-role="teacher"] #perfModule:has(#perfSchoolRecordsPage) .perf-track-nav__step.is-active,
  body[data-role="teacher"] #perfModule:has(#perfInstRecordsPage) .perf-track-nav__step.is-active,
  body[data-role="teacher"] #perfModule:has(#perfClassSubjectPage) .perf-track-nav__step.is-active {
    background: var(--isa-primary);
    border-color: var(--isa-primary);
    color: #fff;
  }
  body[data-role="teacher"] .app-content:has(#perfSchoolEntryPage) > .page-header,
  body[data-role="teacher"] .app-content:has(#perfInstEntryPage) > .page-header,
  body[data-role="teacher"] .app-content:has(#perfSchoolRecordsPage) > .page-header,
  body[data-role="teacher"] .app-content:has(#perfInstRecordsPage) > .page-header,
  body[data-role="teacher"] .app-content:has(#perfClassSubjectPage) > .page-header,
  body[data-role="teacher"] .app-content:has(#perfStudentPage) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#perfSchoolEntryPage),
  body[data-role="teacher"] .app-content:has(#perfInstEntryPage),
  body[data-role="teacher"] .app-content:has(#perfSchoolRecordsPage),
  body[data-role="teacher"] .app-content:has(#perfInstRecordsPage),
  body[data-role="teacher"] .app-content:has(#perfClassSubjectPage),
  body[data-role="teacher"] .app-content:has(#perfStudentPage) {
    padding: 0 !important;
  }
  body[data-role="teacher"] #perfSchoolEntryPage,
  body[data-role="teacher"] #perfInstEntryPage,
  body[data-role="teacher"] #perfSchoolRecordsPage,
  body[data-role="teacher"] #perfInstRecordsPage,
  body[data-role="teacher"] #perfClassSubjectPage,
  body[data-role="teacher"] #perfStudentPage {
    max-width: 430px;
    margin: 0 auto;
    padding: 4px var(--m-space-4)
      calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-8));
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-nav,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-nav,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-nav,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-nav,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-nav,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-nav {
    display: flex !important;
    margin: 0 0 6px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-back,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-back,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-back,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-back,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-back,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    padding: 0 10px 0 4px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--isa-text);
    text-decoration: none;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-back svg,
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-back i,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-back svg,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-back i,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-back svg,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-back i,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-back svg,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-back i,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-back svg,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-back i,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-back svg,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-back i {
    width: 16px;
    height: 16px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-head,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-head,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-head,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-head,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-head,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-head {
    display: block !important;
    margin: 0 0 10px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-head .m-dct-eyebrow,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-head .m-dct-eyebrow,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-head .m-dct-eyebrow,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-head .m-dct-eyebrow,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-head .m-dct-eyebrow,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-head .m-dct-eyebrow {
    margin-bottom: 2px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-head .m-dct-title,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-head .m-dct-title,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-head .m-dct-title,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-head .m-dct-title,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-head .m-dct-title,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-head .m-dct-title {
    margin-bottom: 4px;
    font-size: 1.22rem;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-head .m-dct-status,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-head .m-dct-status,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-head .m-dct-status,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-head .m-dct-status,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-head .m-dct-status,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-head .m-dct-status {
    font-size: 0.8rem;
    line-height: 1.35;
  }
  body[data-role="teacher"] #perfSchoolEntryPage > .adm-focus-bar,
  body[data-role="teacher"] #perfInstEntryPage > .adm-focus-bar,
  body[data-role="teacher"] #perfSchoolRecordsPage > .adm-focus-bar,
  body[data-role="teacher"] #perfInstRecordsPage > .adm-focus-bar,
  body[data-role="teacher"] #perfClassSubjectPage > .adm-focus-bar,
  body[data-role="teacher"] #perfStudentPage > .adm-focus-bar {
    display: none !important;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-section-head,
  body[data-role="teacher"] #perfInstEntryPage .perf-section-head,
  body[data-role="teacher"] #perfStudentPage .perf-section-head {
    display: none;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-tab-chips,
  body[data-role="teacher"] #perfInstEntryPage .perf-tab-chips {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-tab-chips .adm-chip,
  body[data-role="teacher"] #perfInstEntryPage .perf-tab-chips .adm-chip {
    flex: 1 1 0;
    justify-content: center;
    min-height: 40px;
    text-align: center;
    border-radius: 999px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-filters,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-filters,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-filters,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-filters,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-filters,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important; /* beat .mb-18 on the filter bar */
    padding: 10px !important;
    border-radius: 14px !important;
    background: var(--isa-surface-solid) !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-filters .adm-filter-search,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-filters .adm-filter-search,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-filters .adm-filter-search,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-filters .adm-filter-search,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-filters .adm-filter-search,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-filters .adm-filter-search {
    width: 100%;
    max-width: none;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-filters .adm-filter-search input,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-filters .adm-filter-search input,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-filters .adm-filter-search input,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-filters .adm-filter-search input,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-filters .adm-filter-search input,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-filters .adm-filter-search input {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-filters > .adm-filter-fields,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-filters > .adm-filter-fields,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-filters > .adm-filter-fields,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-filters > .adm-filter-fields,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-filters > .adm-filter-fields,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-filters > .adm-filter-fields {
    display: none !important;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-filters .adm-filter-actions,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-filters .adm-filter-actions,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-filters .adm-filter-actions,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-filters .adm-filter-actions,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-filters .adm-filter-actions,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-filters .adm-filter-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-entry-filters .adm-filter-actions .btn-isa,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-entry-filters .adm-filter-actions .btn-isa,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-entry-filters .adm-filter-actions .btn-isa,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-entry-filters .adm-filter-actions .btn-isa,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-filters .adm-filter-actions .btn-isa,
  body[data-role="teacher"] #perfStudentPage .m-perf-entry-filters .adm-filter-actions .btn-isa {
    flex: 1 1 auto;
    min-height: 40px;
    border-radius: 12px !important;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-more-filters,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-more-filters,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-more-filters,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-more-filters,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-more-filters,
  body[data-role="teacher"] #perfStudentPage .m-perf-more-filters {
    display: block !important;
    margin: 0 0 12px;
    border-radius: 14px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    overflow: hidden;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-more-filters > summary,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-more-filters > summary,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-more-filters > summary,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-more-filters > summary,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-more-filters > summary,
  body[data-role="teacher"] #perfStudentPage .m-perf-more-filters > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--isa-text);
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-more-filters > summary::-webkit-details-marker,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-more-filters > summary::-webkit-details-marker,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-more-filters > summary::-webkit-details-marker,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-more-filters > summary::-webkit-details-marker,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-more-filters > summary::-webkit-details-marker,
  body[data-role="teacher"] #perfStudentPage .m-perf-more-filters > summary::-webkit-details-marker {
    display: none;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-more-filters[open] > summary,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-more-filters[open] > summary,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-more-filters[open] > summary,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-more-filters[open] > summary,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-more-filters[open] > summary,
  body[data-role="teacher"] #perfStudentPage .m-perf-more-filters[open] > summary {
    border-bottom: 1px solid var(--isa-border);
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-more-filters__body,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-more-filters__body,
  body[data-role="teacher"] #perfSchoolRecordsPage .m-perf-more-filters__body,
  body[data-role="teacher"] #perfInstRecordsPage .m-perf-more-filters__body,
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-more-filters__body,
  body[data-role="teacher"] #perfStudentPage .m-perf-more-filters__body {
    padding: 12px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage #mSchoolFilterHost #schoolFilterFields,
  body[data-role="teacher"] #perfInstEntryPage #mInstFilterHost #instFilterFields,
  body[data-role="teacher"] #perfSchoolRecordsPage #mSchRecFilterHost #schRecFilterFields,
  body[data-role="teacher"] #perfInstRecordsPage #mInsRecFilterHost #insRecFilterFields,
  body[data-role="teacher"] #perfStudentPage #mStuPerfFilterHost #stuPerfFilterFields {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  body[data-role="teacher"] #perfSchoolEntryPage #schoolFilterFields .isa-select,
  body[data-role="teacher"] #perfSchoolEntryPage #schoolFilterFields .isa-ss,
  body[data-role="teacher"] #perfSchoolEntryPage #schoolFilterFields .adm-filter-control,
  body[data-role="teacher"] #perfInstEntryPage #instFilterFields .isa-select,
  body[data-role="teacher"] #perfInstEntryPage #instFilterFields .isa-ss,
  body[data-role="teacher"] #perfInstEntryPage #instFilterFields .adm-filter-control,
  body[data-role="teacher"] #perfSchoolRecordsPage #schRecFilterFields .isa-select,
  body[data-role="teacher"] #perfSchoolRecordsPage #schRecFilterFields .isa-ss,
  body[data-role="teacher"] #perfSchoolRecordsPage #schRecFilterFields .adm-filter-control,
  body[data-role="teacher"] #perfInstRecordsPage #insRecFilterFields .isa-select,
  body[data-role="teacher"] #perfInstRecordsPage #insRecFilterFields .isa-ss,
  body[data-role="teacher"] #perfInstRecordsPage #insRecFilterFields .adm-filter-control,
  body[data-role="teacher"] #perfClassSubjectPage #cspFilterFields .isa-select,
  body[data-role="teacher"] #perfClassSubjectPage #cspFilterFields .isa-ss,
  body[data-role="teacher"] #perfClassSubjectPage #cspFilterFields .adm-filter-control,
  body[data-role="teacher"] #perfStudentPage #stuPerfFilterFields .isa-select,
  body[data-role="teacher"] #perfStudentPage #stuPerfFilterFields .isa-ss,
  body[data-role="teacher"] #perfStudentPage #stuPerfFilterFields .adm-filter-control {
    /* Column stack — do NOT inherit flex:1 1 130px from the phone
       .adm-filter-fields > .isa-ss rule (that grows each control and
       blows "More filters" into huge vertical gaps). */
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
  }
  body[data-role="teacher"] #perfSchoolEntryPage #schoolFilterFields .isa-ss-trigger,
  body[data-role="teacher"] #perfInstEntryPage #instFilterFields .isa-ss-trigger,
  body[data-role="teacher"] #perfSchoolRecordsPage #schRecFilterFields .isa-ss-trigger,
  body[data-role="teacher"] #perfInstRecordsPage #insRecFilterFields .isa-ss-trigger,
  body[data-role="teacher"] #perfClassSubjectPage #cspFilterFields .isa-ss-trigger,
  body[data-role="teacher"] #perfStudentPage #stuPerfFilterFields .isa-ss-trigger {
    width: 100%;
    min-height: 42px;
    height: 42px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage #schoolFilterFields .adm-filter-dates,
  body[data-role="teacher"] #perfInstEntryPage #instFilterFields .adm-filter-dates,
  body[data-role="teacher"] #perfInstRecordsPage #insRecFilterFields .adm-filter-dates,
  body[data-role="teacher"] #perfClassSubjectPage #cspFilterFields .adm-filter-dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-perf-entry-filters > .adm-filter-actions {
    display: none !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-control {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 12px 12px 10px;
    border: 1px solid var(--isa-border);
    border-radius: 14px;
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    text-align: left;
    color: inherit;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context.is-ready {
    border-color: rgba(var(--isa-primary-rgb), 0.28);
    background: linear-gradient(180deg, var(--isa-surface-solid), rgba(var(--isa-primary-rgb), 0.08));
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(var(--isa-primary-rgb), 0.1);
    color: var(--isa-primary-fx);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context__icon svg,
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context__icon i {
    width: 18px;
    height: 18px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context__copy strong {
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.25;
    color: var(--isa-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context__copy span {
    font-size: 0.75rem;
    color: var(--isa-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-context__go {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--isa-primary-fx);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-toolbar .btn-isa {
    min-height: 42px;
    border-radius: 12px !important;
    justify-content: center;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-filter-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--isa-primary);
    color: #fff;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-filter-badge[hidden] {
    display: none !important;
  }
  body[data-role="teacher"] #mCspFiltersSheet.m-csp-filters-sheet.m-sheet {
    display: flex !important;
    max-height: 86vh;
    padding-bottom: 0;
    /* Above #mSheetBackdrop (1990) and shell chrome — sheet must receive taps */
    z-index: 2000;
  }
  body[data-role="teacher"] #mCspFiltersSheet:not(.is-open) {
    pointer-events: none;
  }
  body[data-role="teacher"] #mCspFiltersSheet.is-open {
    pointer-events: auto;
  }
  body[data-role="teacher"] #mCspFiltersSheet .m-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: var(--m-space-3);
    overflow-x: hidden;
    overflow-y: auto;
  }
  body[data-role="teacher"] #mCspSheetHost #cspFilterFields {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  body[data-role="teacher"] #mCspSheetHost #cspFilterFields .isa-select,
  body[data-role="teacher"] #mCspSheetHost #cspFilterFields .isa-ss,
  body[data-role="teacher"] #mCspSheetHost #cspFilterFields .adm-filter-control {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
  }
  body[data-role="teacher"] #mCspSheetHost #cspFilterFields .isa-ss-trigger {
    width: 100%;
    min-height: 42px;
    height: 42px;
  }
  body[data-role="teacher"] #mCspSheetHost #cspFilterFields .adm-filter-dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-role="teacher"] #mCspFiltersSheet .m-csp-sheet-foot {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--m-safe-b));
    border-top: 1px solid var(--isa-border);
    flex: 0 0 auto;
    background: var(--isa-surface-solid);
  }
  body[data-role="teacher"] #mCspFiltersSheet .m-csp-sheet-foot .btn-isa {
    flex: 1 1 0;
    min-height: 44px;
    justify-content: center;
    border-radius: 12px !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage .perf-csp-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px;
  }
  /* Pulse on the card feed already covers class avg / counts — drop the
     bulky KPI strip so results appear earlier on the phone. */
  body[data-role="teacher"] #perfClassSubjectPage #cspSummary {
    display: none !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage .perf-csp-wrap {
    /* Desktop class-sheet uses max-height + scroll; on phone cards that trapped
       the footer on top of overflowing content. Let the feed grow naturally. */
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-view-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--isa-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-view-btn svg,
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-view-btn i {
    width: 14px;
    height: 14px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-view-btn.is-active {
    background: var(--isa-surface-solid);
    color: var(--isa-primary-fx);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard .perf-entry-desk__table-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard .perf-entry-desk__table-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards .perf-entry-desk__table-head,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table .perf-entry-desk__table-head {
    padding: 0 0 8px !important;
    margin: 0 0 8px;
    border: 0;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards .perf-entry-desk__table-head .text-muted-isa,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table .perf-entry-desk__table-head .text-muted-isa,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards #btnCspFull {
    display: none !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table #btnCspFull {
    display: inline-flex !important;
    min-height: 34px;
    border-radius: 10px !important;
    padding: 0 10px !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table #btnCspFull span {
    display: none;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards .perf-subsection-title,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table .perf-subsection-title {
    font-size: 1.05rem;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards .isa-table-footer,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table .isa-table-footer {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid var(--isa-border) !important;
    border-radius: 14px !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards .isa-list-foot,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table .isa-list-foot {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-cards .isa-pagination,
  body[data-role="teacher"] #perfClassSubjectPage #cspSheetCard.is-m-csp-table .isa-pagination {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }
  /* ---- Table view (mobile-optimised desktop sheet) ---- */
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-wrap {
    max-height: min(62vh, 560px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--isa-border) !important;
    border-radius: 14px !important;
    background: var(--isa-surface-solid) !important;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table.perf-csp-fullcard .perf-csp-wrap {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-heat-legend {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    font-size: 0.68rem;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-heat-legend::-webkit-scrollbar {
    display: none;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-heat-legend .perf-heat-legend-note {
    display: none;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-table {
    width: max-content;
    min-width: 100%;
    font-size: 0.78rem;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-table th,
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-table td {
    padding: 8px 6px !important;
    white-space: nowrap;
  }
  /* Pin student col — fullscreen portals #cspSheetCard to <body>, so these
     rules must NOT depend on #perfClassSubjectPage ancestry. */
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-sticky-col,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    background: var(--isa-surface-solid);
    box-shadow: 4px 0 8px -6px rgba(15, 23, 42, 0.35);
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table thead .perf-sticky-col,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard thead .perf-sticky-col {
    z-index: 3;
    background: var(--isa-surface);
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-stu,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-csp-stu {
    gap: 6px;
    min-width: 0;
    max-width: 132px;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-stu > div,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-csp-stu > div {
    min-width: 0;
    max-width: 92px;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-ava,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-csp-ava {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    font-size: 0.62rem;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-stu strong,
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-stu span:not(.perf-csp-ava),
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-csp-stu strong,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-csp-stu span:not(.perf-csp-ava) {
    display: block;
    font-size: 0.78rem;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-csp-stu span:not(.perf-csp-ava),
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-csp-stu span:not(.perf-csp-ava) {
    font-size: 0.62rem;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .perf-heat-chip,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-heat-chip {
    min-width: 36px;
    padding: 4px 6px;
    font-size: 0.72rem;
  }
  body[data-role="teacher"] #cspSheetCard.is-m-csp-table .btn-perf-stu,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .btn-perf-stu {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.72rem;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard #btnCspFull span {
    display: inline !important;
  }
  /* Fullscreen table: one slim sticky pager row (not a tall centered stack) */
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer,
  body[data-role="teacher"] .perf-csp-fullcard.isa-card .isa-table-footer,
  body[data-role="teacher"] .perf-csp-fullcard .isa-table-footer {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 8px !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-top: 1px solid var(--isa-border) !important;
    border-radius: 0 !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer .isa-list-foot,
  body[data-role="teacher"] .perf-csp-fullcard .isa-table-footer .isa-list-foot {
    justify-content: flex-start !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer .isa-pagination,
  body[data-role="teacher"] .perf-csp-fullcard .isa-table-footer .isa-pagination {
    display: inline-flex !important;
    justify-content: flex-end !important;
    width: auto !important;
    flex: 0 0 auto;
    margin-left: 0 !important;
    gap: 4px !important;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer .isa-pagination button,
  body[data-role="teacher"] .perf-csp-fullcard .isa-table-footer .isa-pagination button {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 0.76rem;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer .isa-perpage,
  body[data-role="teacher"] .perf-csp-fullcard .isa-table-footer .isa-perpage {
    gap: 6px;
    font-size: 0.72rem;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer .isa-perpage .isa-select,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer .isa-perpage-select,
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .isa-table-footer .isa-perpage > .isa-ss,
  body[data-role="teacher"] .perf-csp-fullcard .isa-table-footer .isa-perpage > .isa-ss {
    min-width: 60px !important;
    max-width: 70px !important;
    height: 30px !important;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard .perf-entry-desk__table-head {
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }
  body[data-role="teacher"] #cspSheetCard.perf-csp-fullcard {
    padding: 10px 12px 6px !important;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-pulse {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-pulse > div {
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    text-align: center;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-pulse strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--isa-text);
    line-height: 1.2;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-pulse span {
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--isa-text-muted);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-legend > span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-legend > span.is-excellent {
    background: rgba(16, 185, 129, 0.14); color: #047857;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-legend > span.is-good {
    background: rgba(56, 189, 248, 0.16); color: #0369a1;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-legend > span.is-warn {
    background: rgba(245, 158, 11, 0.16); color: #b45309;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-legend > span.is-crit {
    background: rgba(239, 68, 68, 0.14); color: #b91c1c;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-legend > span.is-ab {
    background: var(--isa-chip-bg); color: #64748b;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    border-left: 3px solid #94a3b8;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-excellent { border-left-color: #10b981; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-good { border-left-color: #0ea5e9; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-warn { border-left-color: #f59e0b; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-crit { border-left-color: #ef4444; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-risk {
    background: linear-gradient(180deg, var(--isa-surface-solid), rgba(239, 68, 68, 0.08));
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__rank {
    flex: 0 0 auto;
    min-width: 22px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--isa-text-muted);
    text-align: center;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__rank.is-gold { color: #d97706; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__rank.is-silver { color: #64748b; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__rank.is-bronze { color: #b45309; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__av {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(150deg, #94a3b8, #64748b);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-excellent .m-csp-card__av {
    background: linear-gradient(150deg, #34d399, #059669);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-good .m-csp-card__av {
    background: linear-gradient(150deg, #38bdf8, #0284c7);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-warn .m-csp-card__av {
    background: linear-gradient(150deg, #fbbf24, #d97706);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card.is-crit .m-csp-card__av {
    background: linear-gradient(150deg, #f87171, #dc2626);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__copy strong {
    font-size: 0.9rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__copy span {
    font-size: 0.7rem;
    color: var(--isa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__score {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.15;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__score strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--isa-text);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__score em {
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--isa-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__bar {
    margin-top: 8px;
    height: 6px;
    border-radius: 999px;
    background: var(--isa-chip-bg);
    overflow: hidden;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__bar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #94a3b8;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__bar > i.is-excellent {
    background: linear-gradient(90deg, #34d399, #059669);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__bar > i.is-good {
    background: linear-gradient(90deg, #7dd3fc, #0284c7);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__bar > i.is-warn {
    background: linear-gradient(90deg, #fcd34d, #d97706);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__bar > i.is-crit {
    background: linear-gradient(90deg, #fca5a5, #dc2626);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 650;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__vs.is-up,
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__trend.is-up { color: #059669; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__vs.is-down,
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__trend.is-down { color: #dc2626; }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__trend.is-flat,
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__tests {
    color: var(--isa-text-muted);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__trend svg,
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__trend i {
    width: 14px;
    height: 14px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__chips::-webkit-scrollbar {
    display: none;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 0 0 auto;
    min-width: 58px;
    max-width: 88px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.15;
    background: var(--isa-surface);
    color: #475569;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip > em {
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-empty {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--isa-surface);
    color: var(--isa-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip.is-excellent {
    background: rgba(16, 185, 129, 0.14); color: #047857;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip.is-good {
    background: rgba(56, 189, 248, 0.16); color: #0369a1;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip.is-warn {
    background: rgba(245, 158, 11, 0.16); color: #b45309;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip.is-crit {
    background: rgba(239, 68, 68, 0.14); color: #b91c1c;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip.is-ab {
    background: var(--isa-chip-bg); color: #64748b;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip.is-na {
    background: var(--isa-surface); color: #94a3b8;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-chip.is-target {
    background: rgba(var(--isa-primary-rgb), 0.1); color: var(--isa-primary-fx);
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__actions {
    margin-top: 10px;
  }
  body[data-role="teacher"] #perfClassSubjectPage .m-csp-card__actions .btn-isa {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    border-radius: 10px !important;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-stu-results,
  body[data-role="teacher"] #perfInstEntryPage .perf-stu-results,
  body[data-role="teacher"] #perfStudentPage .perf-stu-results,
  body[data-role="teacher"] #perfSchoolRecordsPage #schRecList,
  body[data-role="teacher"] #perfInstRecordsPage #insRecList {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body[data-role="teacher"] #perfSchoolRecordsPage .adm-work-panel,
  body[data-role="teacher"] #perfInstRecordsPage .adm-work-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-role="teacher"] #perfSchoolRecordsPage .isa-table-footer,
  body[data-role="teacher"] #perfInstRecordsPage .isa-table-footer {
    margin-top: 12px;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--isa-border);
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  body[data-role="teacher"] #perfSchoolRecordsPage .isa-table-footer .isa-list-foot,
  body[data-role="teacher"] #perfInstRecordsPage .isa-table-footer .isa-list-foot {
    justify-content: center !important;
    width: 100%;
  }
  body[data-role="teacher"] #perfSchoolRecordsPage .isa-table-footer .isa-pagination,
  body[data-role="teacher"] #perfInstRecordsPage .isa-table-footer .isa-pagination {
    justify-content: center !important;
    width: 100%;
  }
  body[data-role="teacher"] .m-perf-rec-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .m-perf-rec-card.is-risk {
    border-left: 3px solid #ca8a04;
  }
  body[data-role="teacher"] .m-perf-rec-card.is-crit {
    border-left-color: #dc2626;
  }
  body[data-role="teacher"] .m-perf-rec-card__main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  body[data-role="teacher"] .m-perf-rec-card__av {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #fff;
    background: var(--isa-grad-brand);
  }
  body[data-role="teacher"] .m-perf-rec-card__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"] .m-perf-rec-card__copy strong {
    font-size: 0.92rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] .m-perf-rec-card__copy span,
  body[data-role="teacher"] .m-perf-rec-card__copy em {
    font-size: 0.72rem;
    color: var(--isa-text-secondary);
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] .m-perf-rec-card__pct {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--isa-primary-fx);
  }
  body[data-role="teacher"] .m-perf-rec-card__actions {
    display: flex;
    gap: 8px;
  }
  body[data-role="teacher"] .m-perf-rec-card__actions .btn-isa {
    flex: 1 1 auto;
    min-height: 40px;
    border-radius: 12px !important;
    justify-content: center;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-pick-card,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-pick-card,
  body[data-role="teacher"] #perfStudentPage .m-perf-pick-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    text-align: left;
    color: inherit;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-pick-card__av,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-pick-card__av,
  body[data-role="teacher"] #perfStudentPage .m-perf-pick-card__av {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: var(--isa-grad-brand);
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-pick-card__copy,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-pick-card__copy,
  body[data-role="teacher"] #perfStudentPage .m-perf-pick-card__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-pick-card__copy strong,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-pick-card__copy strong,
  body[data-role="teacher"] #perfStudentPage .m-perf-pick-card__copy strong {
    font-size: 0.92rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-pick-card__copy span,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-pick-card__copy span,
  body[data-role="teacher"] #perfStudentPage .m-perf-pick-card__copy span {
    font-size: 0.72rem;
    color: var(--isa-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .m-perf-pick-card__go,
  body[data-role="teacher"] #perfInstEntryPage .m-perf-pick-card__go,
  body[data-role="teacher"] #perfStudentPage .m-perf-pick-card__go {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--isa-primary-fx);
  }
  /* Student profile / marks-entry desks → full-screen sheet on phone.
     Shared .perf-student-offcanvas uses sidebar-aware width on desktop;
     when portaled to <body> that calc collapses to a ~60px sliver. */
  body[data-role="teacher"] .perf-student-offcanvas.offcanvas-end,
  body[data-role="teacher"] #stuPerfOffcanvas.offcanvas-end,
  body[data-role="teacher"] #schoolEntryOffcanvas.offcanvas-end,
  body[data-role="teacher"] #instEntryOffcanvas.offcanvas-end {
    --bs-offcanvas-width: 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  body[data-role="teacher"] #stuPerfOffcanvas .perf-drawer-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--isa-surface-solid);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  body[data-role="teacher"] #stuPerfOffcanvas .perf-drawer-nav__chip {
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 12px;
  }
  body[data-role="teacher"] #stuPerfOffcanvas .perf-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuPerfSummary.perf-kpi-grid--drawer,
  body[data-role="teacher"] #stuPerfOffcanvas .perf-kpi-grid--drawer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas .perf-kpi-grid--drawer > .adm-kpi,
  body[data-role="teacher"] #stuPerfOffcanvas .perf-kpi-grid--drawer > .kpi-card {
    min-height: 0 !important;
    padding: 10px 10px 8px !important;
    border-radius: 12px;
  }
  body[data-role="teacher"] #stuPerfOffcanvas .perf-kpi-grid--drawer .kpi-value {
    font-size: 1.05rem !important;
    line-height: 1.15;
    margin-bottom: 2px;
  }
  body[data-role="teacher"] #stuPerfOffcanvas .perf-kpi-grid--drawer .kpi-label {
    font-size: 0.64rem !important;
    line-height: 1.25;
    margin: 0;
  }
  body[data-role="teacher"] #stuPerfOffcanvas .chart-box {
    min-height: 180px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-import__steps,
  body[data-role="teacher"] #perfInstEntryPage .perf-import__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-import__head,
  body[data-role="teacher"] #perfInstEntryPage .perf-import__head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-import__actions,
  body[data-role="teacher"] #perfInstEntryPage .perf-import__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-role="teacher"] #perfSchoolEntryPage .perf-import__actions .btn-isa,
  body[data-role="teacher"] #perfInstEntryPage .perf-import__actions .btn-isa {
    width: 100%;
    min-height: 44px;
  }

  body[data-role="teacher"] .perf-student-offcanvas__head {
    padding: var(--m-space-3) var(--m-space-4);
    padding-top: calc(var(--m-space-3) + var(--m-safe-t));
  }
  body[data-role="teacher"] .perf-student-offcanvas__body {
    padding: var(--m-space-3) var(--m-space-4) calc(var(--m-bottomnav-h) + var(--m-safe-b) + 88px);
  }
  body[data-role="teacher"] .btn-close {
    width: 40px;
    height: 40px;
  }
  body[data-role="teacher"] .perf-entry-desk__hero {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .perf-entry-desk__insights {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[data-role="teacher"] .perf-entry-desk__chart {
    min-height: 180px;
  }
  body[data-role="teacher"] .perf-school-desk__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-role="teacher"] .perf-target-ladder {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Student drawer Target Progress — parent-style 2 then 1 */
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard.perf-target-ladder,
  body[data-role="teacher"] #stuPerfOffcanvas .perf-target-ladder {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 8px 6px !important;
    padding: 10px 8px !important;
    flex-wrap: unset;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-arrow {
    transform: none !important;
    align-self: center;
    justify-self: center;
    padding: 0 !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-arrow:nth-child(4) {
    display: none !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-step {
    padding: 12px 8px 10px !important;
    gap: 2px !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-step.is-gap {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px 12px !important;
    padding: 14px 12px 12px !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-step em {
    font-size: 0.58rem !important;
    letter-spacing: 0.04em !important;
    margin-top: 4px !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-step.is-gap em {
    margin-top: 0 !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-step strong {
    font-size: 1.25rem !important;
  }
  body[data-role="teacher"] #stuPerfOffcanvas #stuTargetCard .perf-target-step small {
    font-size: 0.62rem !important;
    line-height: 1.25;
  }
  body[data-role="teacher"] .perf-matrix th,
  body[data-role="teacher"] .perf-matrix td {
    padding: 9px 8px;
  }
  body[data-role="teacher"] .perf-matrix input[type="number"],
  body[data-role="teacher"] .perf-matrix input[type="text"] {
    min-height: 40px;
    font-size: 16px;
  }
  body[data-role="teacher"] .perf-matrix .perf-sticky-col {
    box-shadow: 2px 0 6px rgba(15, 23, 42, 0.08);
  }
  body[data-role="teacher"] .perf-inst-table .inst-inp,
  body[data-role="teacher"] .perf-inst-table input,
  body[data-role="teacher"] .perf-inst-table select {
    min-height: 40px;
    font-size: 16px;
  }
  body[data-role="teacher"] #schoolEntryOffcanvas .perf-entry-desk__table-actions,
  body[data-role="teacher"] #instEntryOffcanvas .perf-entry-desk__table-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 1056;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: var(--isa-surface-strong);
    border-top: 1px solid var(--isa-border);
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
  }
  body[data-role="teacher"] #schoolEntryOffcanvas .perf-entry-desk__table-actions .btn-isa,
  body[data-role="teacher"] #instEntryOffcanvas .perf-entry-desk__table-actions .btn-isa {
    flex: 1 1 auto;
    min-height: 44px;
    border-radius: 12px !important;
  }
  body[data-role="teacher"] #schoolEntryOffcanvas .perf-entry-desk__table-head,
  body[data-role="teacher"] #instEntryOffcanvas .perf-entry-desk__table-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body[data-role="teacher"] #schoolEntryOffcanvas .perf-entry-toolbar,
  body[data-role="teacher"] #instEntryOffcanvas .perf-entry-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Dashboard hub (teacher-only markup) — hide whole desktop stack */
  #atrModule:has(#mAtrDash) > .adm-journey,
  #atrModule:has(#mAtrDash) > #atrDashboardPage {
    display: none !important;
  }
  .app-content:has(#mAtrDash) > .page-header {
    display: none !important;
  }
  .app-content:has(#mAtrDash),
  .app-content:has(.atr-desk-page) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
  }
  #mAtrDash {
    display: flex !important;
    flex-direction: column;
    gap: var(--m-space-4);
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 24px);
    max-width: 440px;
    margin: 0 auto;
  }
  #mAtrDash .m-dct-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
  }
  #mAtrDash .m-dct-chip {
    min-height: 74px;
  }
  .m-atr-risk {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    border-left: 3px solid #94a3b8;
  }
  .m-atr-risk.is-critical { border-left-color: #e11d48; }
  .m-atr-risk.is-moderate { border-left-color: #d97706; }
  .m-atr-risk.is-minor { border-left-color: #ca8a04; }
  .m-atr-risk__top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .m-atr-risk__days {
    flex: 0 0 auto;
    min-width: 42px;
    text-align: center;
    font-size: 0.68rem;
    color: var(--isa-text-muted);
  }
  .m-atr-risk__days strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--isa-text);
    line-height: 1.1;
  }
  .m-atr-risk__copy { flex: 1 1 auto; min-width: 0; }
  .m-atr-risk__copy strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--isa-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-atr-risk__copy span {
    display: block;
    font-size: 0.72rem;
    color: var(--isa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-atr-risk__top > em {
    flex: 0 0 auto;
    font-style: normal;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--isa-primary-fx);
  }
  .m-atr-risk .btn-isa {
    width: 100%;
    min-height: 42px;
    border-radius: 12px !important;
    justify-content: center;
  }
  #mAtrRiskFeed {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Shared desk pages */
  #atrModule:has(.atr-desk-page) > .adm-journey {
    display: none !important;
  }
  .app-content:has(.atr-desk-page) > .page-header {
    display: none !important;
  }
  .atr-desk-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 28px);
  }
  .atr-desk-page > .adm-hero,
  .atr-desk-page > .asgn-rep-hero {
    display: none !important;
  }
  /* List desks: filters live in the bottom sheet */
  .atr-desk-page:not(.atr-rep-desk) > #atrFilters,
  .atr-desk-page:not(.atr-rep-desk) > .asgn-rep-scope {
    display: none !important;
  }
  .atr-desk-page .m-perf-entry-nav {
    display: flex !important;
    align-items: center;
  }
  .atr-desk-page .m-perf-entry-head {
    display: block !important;
  }
  .atr-desk-page .m-atr-desk-control,
  #mAtrDash .m-atr-dash-control {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .atr-desk-page .m-csp-context,
  #mAtrDash .m-csp-context {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 12px 12px 10px;
    border: 1px solid var(--isa-border);
    border-radius: 14px;
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    text-align: left;
    color: inherit;
  }
  .atr-desk-page .m-csp-context__icon,
  #mAtrDash .m-csp-context__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(var(--isa-primary-rgb), 0.1);
    color: var(--isa-primary-fx);
  }
  .atr-desk-page .m-csp-context__icon svg,
  .atr-desk-page .m-csp-context__icon i,
  #mAtrDash .m-csp-context__icon svg,
  #mAtrDash .m-csp-context__icon i {
    width: 18px;
    height: 18px;
  }
  .atr-desk-page .m-csp-context__copy,
  #mAtrDash .m-csp-context__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .atr-desk-page .m-csp-context__copy strong,
  #mAtrDash .m-csp-context__copy strong {
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.25;
    color: var(--isa-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .atr-desk-page .m-csp-context__copy span,
  #mAtrDash .m-csp-context__copy span {
    font-size: 0.75rem;
    color: var(--isa-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .atr-desk-page .m-csp-context__go,
  #mAtrDash .m-csp-context__go {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--isa-primary-fx);
  }
  .atr-desk-page .m-csp-toolbar,
  #mAtrDash .m-csp-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  #mAtrDash .m-csp-toolbar {
    grid-template-columns: 1fr auto auto;
  }
  .atr-desk-page .m-csp-toolbar .btn-isa,
  #mAtrDash .m-csp-toolbar .btn-isa {
    min-height: 44px;
    border-radius: 12px !important;
    justify-content: center;
  }
  .atr-desk-page .m-csp-filter-badge,
  #mAtrDash .m-csp-filter-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--isa-primary);
    color: #fff;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
  }
  .atr-desk-page .m-csp-filter-badge[hidden],
  #mAtrDash .m-csp-filter-badge[hidden] {
    display: none !important;
  }

  /* Parent Academic Tracker hub (#mAtrParentDash)
     Hub is NOT a full-page screen — subject cards follow, so never reserve
     bottom-nav padding on the hub itself (that caused the empty gap). */
  body[data-role="parent"] .app-content:has(#mAtrParentDash),
  body[data-role="parent"] .app-content:has(#atrParentPage) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
  }
  body[data-role="parent"] #mAtrParentDash.m-screen,
  body[data-role="parent"] #mAtrParentDash {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 8px 0 4px !important;
  }
  body[data-role="parent"] #atrParentPage:has(#mAtrParentDash) {
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 20px) !important;
  }
  body[data-role="parent"] #atrParentPage:has(#mAtrParentDash) .atr-parent-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-role="parent"] #mAtrParentDash .m-dct-head,
  body[data-role="parent"] #mAtrParentDash .m-dct-chips,
  body[data-role="parent"] #mAtrParentDash .m-dct-qa-section,
  body[data-role="parent"] #mAtrParentDash .m-section {
    margin-bottom: 0 !important;
  }
  body[data-role="parent"] #mAtrParentDash .m-dct-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body[data-role="parent"] #mAtrParentDash .m-dct-chip {
    min-height: 70px;
  }
  body[data-role="parent"] #mAtrParentDash .m-atr-parent-pulse {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--m-space-4);
    border-radius: var(--m-radius-xl);
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-2);
  }
  body[data-role="parent"] #mAtrParentDash .m-atr-parent-pulse .m-dct-head {
    margin: 0;
    padding: 0;
  }
  body[data-role="parent"] #mAtrParentDash .m-atr-parent-pulse .m-dct-qa-section {
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--isa-border);
  }
  body[data-role="parent"] #mAtrParentDash .m-atr-parent-pulse .m-section-head {
    margin-bottom: 10px;
  }

  /* Parent Academic Progress hub — same pulse card + edge spacing as Tracker */
  body[data-role="parent"] .app-content:has(#mPerfParentDash),
  body[data-role="parent"] .app-content:has(#perfParentPage) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
  }
  body[data-role="parent"] #mPerfParentDash.m-screen,
  body[data-role="parent"] #mPerfParentDash {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 8px 0 4px !important;
  }
  body[data-role="parent"] #perfParentPage:has(#mPerfParentDash) {
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 20px) !important;
  }
  body[data-role="parent"] #perfParentPage:has(#mPerfParentDash) .perf-parent-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-role="parent"] #mPerfParentDash .m-dct-head,
  body[data-role="parent"] #mPerfParentDash .m-dct-chips,
  body[data-role="parent"] #mPerfParentDash .m-dct-qa-section,
  body[data-role="parent"] #mPerfParentDash .m-section {
    margin-bottom: 0 !important;
  }
  body[data-role="parent"] #mPerfParentDash .m-perf-parent-pulse {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--m-space-4);
    border-radius: var(--m-radius-xl);
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-2);
  }
  body[data-role="parent"] #mPerfParentDash .m-perf-parent-pulse .m-dct-head {
    margin: 0;
    padding: 0;
  }
  body[data-role="parent"] #mPerfParentDash .m-perf-parent-pulse .m-dct-qa-section {
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--isa-border);
  }
  body[data-role="parent"] #mPerfParentDash .m-perf-parent-pulse .m-section-head {
    margin-bottom: 10px;
  }
  body[data-role="parent"] #mPerfParentDash .m-dct-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body[data-role="parent"] #mPerfParentDash .m-dct-chip {
    min-height: 70px;
  }
  /* Health is a phrase ("Needs Improvement"), not a % — number-sized
     1.35rem clips the second word in a 2-up chip. */
  body[data-role="parent"] #mPerfParentDash .m-dct-chip [data-kpi="health_chip"] {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: -0.015em !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  body[data-role="parent"] #perfParentPage:has(#mPerfParentDash) > .stu-profile-card > .stu-profile-hero-wrap,
  body[data-role="parent"] #perfParentPage:has(#mPerfParentDash) > .stu-profile-card > .stu-profile-nav,
  body[data-role="parent"] #perfParentPage:has(#mPerfParentDash) .perf-parent-sum {
    display: none !important;
  }
  body[data-role="parent"] #perfParentPage:has(#mPerfParentDash) > .stu-profile-card {
    margin-top: 8px;
  }

  /* Parent Homework hub — same pulse card + edge spacing as Tracker / Progress */
  body[data-role="parent"] .app-content:has(#mAsgnParentHome),
  body[data-role="parent"] .app-content:has(#asgnParentPage) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
  }
  body[data-role="parent"] #mAsgnParentHome.m-screen,
  body[data-role="parent"] #mAsgnParentHome {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 8px 0 4px !important;
  }
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) {
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 20px) !important;
  }
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) .asgn-parent-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-role="parent"] #mAsgnParentHome .m-asgn-head,
  body[data-role="parent"] #mAsgnParentHome .m-dct-qa-section,
  body[data-role="parent"] #mAsgnParentHome .m-section {
    margin-bottom: 0 !important;
  }
  body[data-role="parent"] #mAsgnParentHome .m-asgn-parent-pulse-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--m-space-4);
    border-radius: var(--m-radius-xl);
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-2);
  }
  body[data-role="parent"] #mAsgnParentHome .m-asgn-parent-pulse-card .m-asgn-head {
    margin: 0;
    padding: 0;
  }
  body[data-role="parent"] #mAsgnParentHome .m-asgn-parent-pulse-card .m-dct-qa-section {
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--isa-border);
  }
  body[data-role="parent"] #mAsgnParentHome .m-asgn-parent-pulse-card .m-section-head {
    margin-bottom: 10px;
  }
  body[data-role="parent"] #mAsgnParentHome .m-asgn-pulse {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
  }
  body[data-role="parent"] #mAsgnParentHome .m-dct-chip {
    min-height: 70px;
  }
  body[data-role="parent"] #mAsgnParentHome .m-asgn-parent-filters-btn {
    display: flex !important;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 12px !important;
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-asgn-parent-status-list {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-asgn-parent-status-opt {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--isa-border);
    border-radius: 12px;
    background: var(--isa-surface-solid);
    color: var(--isa-text);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-asgn-parent-status-opt.is-active {
    border-color: rgba(var(--isa-primary-rgb), 0.45);
    background: rgba(var(--isa-primary-rgb), 0.1);
    color: var(--isa-primary-fx);
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet #mAsgnParentStatusFilter {
    display: none !important;
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-sheet-body {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-sheet-body .isa-select,
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-sheet-body .isa-ss,
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-sheet-body .adm-filter-control {
    width: 100% !important;
    max-width: none !important;
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-csp-sheet-foot {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--m-safe-b));
    border-top: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    flex: 0 0 auto;
  }
  body[data-role="parent"] #mAsgnParentFiltersSheet .m-csp-sheet-foot .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) > .stu-profile-card > .stu-profile-hero-wrap,
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) > .stu-profile-card > .stu-profile-nav,
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) .asgn-parent-sum,
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) .asgn-parent-stats,
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) .asgn-parent-recs,
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) .asgn-parent-chips {
    display: none !important;
  }
  body[data-role="parent"] #asgnParentPage:has(#mAsgnParentHome) > .stu-profile-card {
    margin-top: 8px;
  }

  body[data-role="parent"] #atrParentPage:has(#mAtrParentDash) > .stu-profile-card > .stu-profile-hero-wrap,
  body[data-role="parent"] #atrParentPage:has(#mAtrParentDash) > .stu-profile-card .atr-kpi-section {
    display: none !important;
  }
  body[data-role="parent"] #atrParentPage:has(#mAtrParentDash) > .stu-profile-card {
    margin-top: 8px;
  }

  /* Grids + cards */
  #atrSyllabusGrid,
  #atrTeacherGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .atr-desk-page .atr-card,
  .atr-desk-page .atr-subject-card,
  .atr-desk-page .atr-teacher-card {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
    padding: 14px !important;
  }
  .atr-desk-page .atr-card__foot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .atr-desk-page .atr-card__foot .btn-isa {
    width: 100%;
    min-height: 44px;
    border-radius: 12px !important;
    justify-content: center;
  }
  .atr-desk-page .atr-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Teacher progress KPIs */
  #atrTeacherPage #atrKpis .atr-kpi-grid--compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #atrTeacherPage .atr-snap-kpi {
    border-radius: 14px !important;
    box-shadow: var(--m-elevation-1);
    min-height: 80px;
    padding: 10px 12px !important;
  }
  #atrTeacherPage .atr-snap-kpi__value {
    font-size: 1.2rem !important;
  }
  #atrTeacherPage .atr-kpi-fill {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    min-height: 80px;
    padding: 10px 12px 8px;
    border-radius: 14px !important;
    border: 1px solid rgba(var(--isa-primary-rgb), 0.16);
    background: linear-gradient(155deg, rgba(var(--isa-primary-rgb), 0.08), var(--isa-surface-solid) 72%);
    box-shadow: var(--m-elevation-1);
    text-decoration: none;
    color: inherit;
  }
  #atrTeacherPage .atr-kpi-fill__kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--isa-primary-fx);
  }
  #atrTeacherPage .atr-kpi-fill__line {
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.25;
    color: var(--isa-text);
  }
  #atrTeacherPage .atr-kpi-fill__art {
    display: block;
    margin: 0 auto;
    width: 72px;
    line-height: 0;
  }
  #atrTeacherPage .atr-kpi-fill__art img {
    width: 100%;
    height: auto;
    display: block;
  }
  #atrTeacherPage .atr-kpi-fill__go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--isa-primary-fx);
  }
  #atrTeacherPage .atr-kpi-fill__go svg,
  #atrTeacherPage .atr-kpi-fill__go i {
    width: 12px;
    height: 12px;
  }
  #atrTeacherPage .atr-list-footer,
  #atrDailyPage .atr-list-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* Daily feed */
  #atrDailyPage .atr-daily-panel {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  #atrDailyPage .atr-timeline {
    padding: 0 !important;
    gap: 10px;
  }
  #atrDailyPage .atr-timeline-item {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px !important;
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
  }
  #atrDailyPage .atr-timeline-item__when {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #atrDailyPage .atr-timeline-item__when time {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--isa-text-muted);
  }
  #atrDailyPage .atr-timeline-item__dot {
    width: 8px;
    height: 8px;
  }
  #atrDailyPage .atr-timeline-item__title {
    font-size: 0.95rem;
    font-weight: 800;
  }

  /* Reports — same pattern as SM Reports (on-page scope + sticky Generate) */
  #atrReportsPage.atr-rep-desk {
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 72px) !important;
  }
  #atrReportsPage .m-atr-desk-control {
    display: none !important;
  }
  #atrReportsPage .asgn-rep-catalog,
  #atrReportsPage .asgn-rep-scope,
  #atrReportsPage .asgn-rep-preview {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  #atrReportsPage > #atrFilters,
  #atrReportsPage > .asgn-rep-scope {
    display: block !important;
    padding: 14px !important;
  }
  #atrReportsPage .asgn-rep-catalog {
    padding: 14px !important;
  }
  #atrReportsPage .asgn-rep-catalog__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #atrReportsPage .asgn-rep-catalog__head h3 {
    font-size: 1.05rem !important;
  }
  #atrReportsPage .asgn-rep-group__head span {
    display: none;
  }
  #atrReportsPage .asgn-rep-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #atrReportsPage .asgn-rep-card {
    border-radius: 14px !important;
    padding: 14px !important;
    min-height: 72px;
  }
  #atrReportsPage .asgn-rep-scope__bar {
    display: block !important;
  }
  #atrReportsPage .asgn-rep-scope__actions {
    display: none !important;
  }
  #atrReportsPage #atrFilterFields {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
  }
  #atrReportsPage #atrFilterFields .asgn-field {
    /* Desktop rule uses flex:1 1 180px for row width — as a column
       stack that becomes 180px HEIGHT per field (huge gaps). */
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 4px;
  }
  #atrReportsPage #atrFilterFields .asgn-field__label {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--isa-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  #atrReportsPage #atrFilterFields .isa-select,
  #atrReportsPage #atrFilterFields .isa-ss,
  #atrReportsPage #atrFilterFields .adm-filter-control {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
  }
  #atrReportsPage #atrFilterFields .isa-ss-trigger {
    width: 100%;
    min-height: 46px;
    height: 46px;
  }
  #atrReportsPage .asgn-rep-preview {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  #atrReportsPage .asgn-rep-preview__head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #atrReportsPage .asgn-rep-host {
    overflow: visible;
    padding: 8px 0 !important;
  }
  #atrReportPrintArea .atr-rep-view-toggle {
    display: inline-flex !important;
  }
  #atrReportsPage.is-m-atr-rep-table .asgn-rep-host,
  #atrReportPrintArea.is-m-atr-rep-table .asgn-rep-host {
    overflow: visible;
    padding: 0 !important;
  }
  #atrReportPrintArea.is-m-atr-rep-table .atr-rep-table-wrap {
    display: block !important;
    margin: 0 -2px;
    border: 1px solid var(--isa-border);
    border-radius: 14px;
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
  }
  #atrReportPrintArea.is-m-atr-rep-cards .atr-rep-cards {
    display: flex !important;
  }
  #atrReportPrintArea.atr-rep-fullcard {
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #atrReportPrintArea.atr-rep-fullcard .asgn-rep-host {
    overflow: auto !important;
  }
  #atrReportsPage .asgn-rep-footer {
    justify-content: center;
    gap: 8px;
  }
  #atrReportsPage .atr-rep-sticky-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 30;
    margin: 0;
    padding: 10px var(--m-space-4);
    background: var(--isa-surface-strong);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
    border-radius: 0;
  }
  #atrReportsPage .atr-rep-sticky-actions .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }

  /* Shared filter sheet — tight stack (no flex-basis height blow-up) */
  #mAtrFiltersSheet.m-csp-filters-sheet.m-sheet {
    display: flex !important;
    max-height: 86vh;
    padding-bottom: 0;
    z-index: 2000;
  }
  #mAtrFiltersSheet:not(.is-open) { pointer-events: none; }
  #mAtrFiltersSheet.is-open { pointer-events: auto; }
  #mAtrFiltersSheet .m-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: var(--m-space-3);
    overflow-x: hidden;
    overflow-y: auto;
  }
  #mAtrSheetHost #atrFilterFields {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
  }
  #mAtrSheetHost #atrFilterFields .m-atr-field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    gap: 4px;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0;
  }
  #mAtrSheetHost #atrFilterFields .m-atr-field__label {
    display: block !important;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--isa-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  #mAtrSheetHost #atrFilterFields .asgn-field,
  #mAtrSheetHost #atrFilterFields .adm-filter-dates {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 4px;
  }
  #mAtrSheetHost #atrFilterFields .asgn-field__label {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--isa-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  #mAtrSheetHost #atrFilterFields > .isa-select,
  #mAtrSheetHost #atrFilterFields > .isa-ss,
  #mAtrSheetHost #atrFilterFields > .isa-ss--compact,
  #mAtrSheetHost #atrFilterFields .isa-select,
  #mAtrSheetHost #atrFilterFields .isa-ss,
  #mAtrSheetHost #atrFilterFields .adm-filter-control,
  #mAtrSheetHost #atrFilterFields .isa-input {
    /* Defeat .adm-filter-fields > .isa-ss { flex:1 1 140px } which
       becomes ~140px HEIGHT when the sheet stacks as a column. */
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
  }
  #mAtrSheetHost #atrFilterFields .isa-ss-trigger,
  #mAtrSheetHost #atrFilterFields input[type="date"] {
    width: 100%;
    min-height: 46px;
    height: 46px;
  }
  #mAtrSheetHost #atrFilterFields .adm-filter-dates {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  #mAtrFiltersSheet .m-csp-sheet-foot {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--m-safe-b));
    border-top: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
  }
  #mAtrFiltersSheet .m-csp-sheet-foot .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }

  /* Roadmap bottom-sheet feel */
  .atr-roadmap-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100%;
    align-items: flex-end;
  }
  .atr-roadmap-modal .modal-content {
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0;
    min-height: 72vh;
    max-height: 92vh;
  }

  /* ---- Study Materials — mobile desks (page IDs; shared chrome) ---- */
  #smModule:has(#mSmDash) > .adm-journey,
  #smModule:has(#mSmDash) > #smDashboardPage {
    display: none !important;
  }
  .app-content:has(#mSmDash) > .page-header,
  .app-content:has(.sm-desk-page) > .page-header,
  .app-content:has(#smUploadPage) > .page-header,
  .app-content:has(#smDetailPage) > .page-header {
    display: none !important;
  }
  .app-content:has(#mSmDash),
  .app-content:has(.sm-desk-page),
  .app-content:has(#smUploadPage),
  .app-content:has(#smDetailPage) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  #mSmDash {
    display: flex !important;
    flex-direction: column;
    gap: var(--m-space-4);
    max-width: 440px;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 24px);
  }
  #mSmDash .m-dct-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
  }
  #mSmDash .m-dct-chip { min-height: 74px; }
  #mSmDash .m-dct-chip--info strong { color: #4f46e5; }
  #mSmDash .m-sm-qa-5,
  #mSmDash .m-qa-grid--5 {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px 4px !important;
    margin-bottom: 0;
    padding-top: 4px;
  }
  #mSmDash .m-sm-qa-5 .m-qa,
  #mSmDash .m-qa-grid--5 .m-qa {
    min-width: 0;
    gap: 6px;
  }
  #mSmDash .m-sm-qa-5 .m-qa-icon,
  #mSmDash .m-qa-grid--5 .m-qa-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  #mSmDash .m-sm-qa-5 .m-qa-icon svg,
  #mSmDash .m-sm-qa-5 .m-qa-icon i,
  #mSmDash .m-qa-grid--5 .m-qa-icon svg,
  #mSmDash .m-qa-grid--5 .m-qa-icon i {
    width: 18px;
    height: 18px;
  }
  #mSmDash .m-sm-qa-5 .m-qa > .m-qa-icon-wrap + span,
  #mSmDash .m-qa-grid--5 .m-qa > .m-qa-icon-wrap + span {
    font-size: 0.62rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #mSmPopular .sm-mini-row,
  #mSmRecent .sm-material-card {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
    background: var(--isa-surface-solid);
  }
  #mSmPopular .sm-mini-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--isa-border);
    margin-bottom: 8px;
  }
  #mSmRecent {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #mSmRecent .sm-material-card__actions .btn-isa {
    min-height: 40px;
    border-radius: 11px !important;
  }

  /* Library desk */
  #smModule:has(.sm-desk-page) > .adm-journey { display: none !important; }
  .sm-desk-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 28px);
  }
  .sm-desk-page > .sm-lib-hero { display: none !important; }
  .sm-desk-page .m-perf-entry-nav { display: flex !important; align-items: center; }
  .sm-desk-page .m-perf-entry-head { display: block !important; }
  .sm-desk-page .m-sm-lib-control {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .sm-desk-page .m-csp-context {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 12px 12px 10px;
    border: 1px solid var(--isa-border);
    border-radius: 14px;
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    text-align: left;
    color: inherit;
  }
  .sm-desk-page .m-csp-context__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(var(--isa-primary-rgb), 0.1);
    color: var(--isa-primary-fx);
  }
  .sm-desk-page .m-csp-context__icon svg,
  .sm-desk-page .m-csp-context__icon i { width: 18px; height: 18px; }
  .sm-desk-page .m-csp-context__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sm-desk-page .m-csp-context__copy strong {
    font-size: 0.94rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sm-desk-page .m-csp-context__copy span {
    font-size: 0.75rem;
    color: var(--isa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sm-desk-page .m-csp-context__go {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--isa-primary-fx);
  }
  .sm-desk-page .m-csp-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .sm-desk-page .m-csp-toolbar .btn-isa {
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    border-radius: 12px !important;
    justify-content: center;
  }
  .sm-desk-page .m-csp-toolbar .btn-isa-primary {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .sm-desk-page .m-csp-filter-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--isa-primary);
    color: #fff;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
  }
  .sm-desk-page .m-csp-filter-badge[hidden] { display: none !important; }
  .sm-desk-page #smLibFilterBar {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .sm-desk-page #smLibFilterBar .adm-filter-fields,
  .sm-desk-page #smLibFilterBar .adm-filter-actions {
    display: none !important;
  }
  .sm-desk-page #smLibFilterBar .adm-filter-search {
    width: 100%;
    max-width: none;
  }
  .sm-desk-page #smLibFilterBar #libSearch {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px;
    border-radius: 12px;
  }
  .sm-desk-page .m-sm-lib-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .sm-desk-page .m-sm-lib-toolbar .sm-view-toggle {
    display: inline-flex !important;
    gap: 0;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid var(--isa-border);
    background: var(--isa-surface);
  }
  .sm-desk-page .m-sm-lib-toolbar .sm-view-toggle .btn-isa {
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
  }
  .sm-desk-page .m-sm-lib-toolbar .sm-view-toggle .btn-isa.is-active {
    background: var(--isa-surface-solid);
    color: var(--isa-primary-fx);
    box-shadow: var(--m-elevation-1);
  }
  .sm-desk-page #smLibraryGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-width: 0;
    max-width: 100%;
  }
  .sm-desk-page .sm-material-card {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .sm-desk-page .sm-material-card__title,
  .sm-desk-page .sm-material-card__title a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Grid view — stacked foot (phone cards) */
  .sm-desk-page #smLibraryGrid.is-view-grid .sm-material-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
  }
  .sm-desk-page #smLibraryGrid.is-view-grid .sm-material-card__stats {
    min-width: 0;
  }
  .sm-desk-page #smLibraryGrid.is-view-grid .sm-material-card__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }
  .sm-desk-page #smLibraryGrid.is-view-grid .sm-material-card__actions .btn-isa {
    min-height: 42px;
    min-width: 0;
    border-radius: 12px !important;
    justify-content: center;
  }

  /* List view — compact horizontal rows (override desktop→column mobile rule) */
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card {
    flex-direction: row !important;
    align-items: stretch;
    min-height: 0;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__cover {
    width: 58px !important;
    min-width: 58px;
    max-width: 58px;
    min-height: 0 !important;
    border-bottom: 0 !important;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__cover-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__cover-icon svg,
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__cover-icon i {
    width: 16px;
    height: 16px;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__type-pill {
    top: 6px;
    left: 4px;
    right: 4px;
    width: auto;
    font-size: 0.58rem;
    padding: 2px 4px;
    text-align: center;
    justify-content: center;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__body {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 10px 8px;
    gap: 6px;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__title {
    -webkit-line-clamp: 2;
    font-size: 0.9rem;
    margin: 0;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__path {
    max-height: 1.6em;
    overflow: hidden;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__meta-row {
    font-size: 0.7rem;
    flex-wrap: wrap;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__foot {
    flex-direction: column !important;
    justify-content: center;
    align-items: stretch !important;
    gap: 6px;
    width: auto;
    min-width: 76px;
    max-width: 88px;
    margin-top: 0;
    padding: 8px;
    border-top: 0 !important;
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(var(--isa-soft-rgb), 0.7);
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__stats {
    display: none !important;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__actions {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__actions .btn-isa {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding-left: 6px !important;
    padding-right: 6px !important;
    border-radius: 10px !important;
    justify-content: center;
    font-size: 0.7rem;
  }
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__actions .btn-isa .icon-sm,
  .sm-desk-page #smLibraryGrid.is-view-list .sm-material-card__actions .btn-isa svg {
    width: 14px;
    height: 14px;
  }
  .sm-desk-page .sm-library-meta--foot {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Filter sheet — body-portaled (see mobile-app.js); above bottom nav */
  #mLibFiltersSheet.m-csp-filters-sheet.m-sheet,
  #mLibFiltersSheet.sm-lib-filters-sheet.m-sheet,
  #mPackFiltersSheet.m-csp-filters-sheet.m-sheet,
  #mPackFiltersSheet.sm-lib-filters-sheet.m-sheet,
  #mAsgnParentFiltersSheet.m-csp-filters-sheet.m-sheet,
  #mAsgnParentFiltersSheet.m-sheet {
    display: flex !important;
    max-height: min(86vh, calc(100dvh - 12px));
    padding-bottom: 0 !important;
    z-index: 2100;
    overflow: hidden;
  }
  #mLibFiltersSheet:not(.is-open),
  #mPackFiltersSheet:not(.is-open),
  #mAsgnParentFiltersSheet:not(.is-open) {
    pointer-events: none !important;
    visibility: hidden !important;
  }
  /* When a filter sheet is open, searchable-select panels must sit above it
     (not clipped inside overflow:hidden). */
  body.m-sheet-locked > .isa-ss-panel.is-open,
  body.m-sheet-locked > .isa-ss-panel {
    z-index: 2300 !important;
    max-height: min(58vh, 420px) !important;
  }

  /* Filter sheets scroll the body only — keep the shell from clipping popovers. */
  #mLibFiltersSheet.m-sheet.is-open,
  #mPackFiltersSheet.m-sheet.is-open,
  #mAsgnParentFiltersSheet.m-sheet.is-open {
    overflow: visible;
  }
  #mLibFiltersSheet.is-open .m-sheet-body,
  #mPackFiltersSheet.is-open .m-sheet-body,
  #mAsgnParentFiltersSheet.is-open .m-sheet-body {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #mLibSheetHost #libFilterFields,
  #mLibFiltersSheet .m-sheet-body,
  #mPackSheetHost #packFilterFields,
  #mPackFiltersSheet .m-sheet-body,
  #mAsgnParentFiltersSheet .m-sheet-body {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #mLibSheetHost #libFilterFields .isa-select,
  #mLibSheetHost #libFilterFields .isa-ss,
  #mLibSheetHost #libFilterFields .adm-filter-control,
  #mLibFiltersSheet .m-sheet-body .isa-select,
  #mLibFiltersSheet .m-sheet-body .isa-ss,
  #mPackSheetHost #packFilterFields .isa-select,
  #mPackSheetHost #packFilterFields .isa-ss,
  #mPackFiltersSheet .m-sheet-body .isa-select,
  #mPackFiltersSheet .m-sheet-body .isa-ss,
  #mAsgnParentFiltersSheet .m-sheet-body .isa-select,
  #mAsgnParentFiltersSheet .m-sheet-body .isa-ss,
  #mAsgnParentFiltersSheet .m-sheet-body .adm-filter-control {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: 48px !important;
    max-height: 48px !important;
  }
  #mLibSheetHost #libFilterFields .isa-ss,
  #mLibFiltersSheet .m-sheet-body .isa-ss,
  #mPackFiltersSheet .m-sheet-body .isa-ss,
  #mAsgnParentFiltersSheet .m-sheet-body .isa-ss {
    height: auto !important;
    max-height: none !important;
  }
  #mLibSheetHost #libFilterFields .isa-ss-trigger,
  #mLibFiltersSheet .isa-ss-trigger,
  #mPackSheetHost #packFilterFields .isa-ss-trigger,
  #mPackFiltersSheet .isa-ss-trigger,
  #mAsgnParentFiltersSheet .isa-ss-trigger {
    min-height: 46px;
    height: 48px !important;
  }
  #mLibFiltersSheet .m-csp-sheet-foot,
  #mLibFiltersSheet .sm-lib-filters-foot,
  #mPackFiltersSheet .m-csp-sheet-foot,
  #mPackFiltersSheet .sm-lib-filters-foot,
  #mAsgnParentFiltersSheet .m-csp-sheet-foot {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--m-safe-b));
    border-top: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
  }
  #mLibFiltersSheet .m-csp-sheet-foot .btn-isa,
  #mLibFiltersSheet .sm-lib-filters-foot .btn-isa,
  #mPackFiltersSheet .m-csp-sheet-foot .btn-isa,
  #mPackFiltersSheet .sm-lib-filters-foot .btn-isa,
  #mAsgnParentFiltersSheet .m-csp-sheet-foot .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }

  /* Packs desk — same chrome as Library */
  .sm-packs-desk #smPackToolbar {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .sm-packs-desk #smPackToolbar .sm-lib-toolbar__row {
    display: none !important;
  }
  .sm-packs-desk #smPackToolbar .sm-lib-toolbar__search {
    width: 100%;
    max-width: none;
  }
  .sm-packs-desk #smPackToolbar #packSearch {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px;
    border-radius: 12px;
  }
  .sm-packs-desk #smPackGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sm-packs-desk .sm-pack-card {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  .sm-packs-desk .sm-pack-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .sm-packs-desk .sm-pack-card__foot .btn-isa {
    min-height: 42px;
    border-radius: 12px !important;
    justify-content: center;
  }
  .sm-packs-desk .m-sm-lib-toolbar {
    display: flex !important;
    justify-content: stretch;
  }
  .sm-packs-desk .m-sm-lib-toolbar .btn-isa {
    flex: 1 1 auto;
    min-height: 44px;
    border-radius: 12px !important;
    justify-content: center;
  }
  .sm-packs-desk .m-sm-lib-toolbar__hint {
    font-size: 0.82rem;
    color: var(--isa-text-muted);
  }

  /* Pack detail — reuse material detail hero + sticky */
  #smModule:has(#smPackDetailPage) > .adm-journey { display: none !important; }
  .app-content:has(#smPackDetailPage) > .page-header { display: none !important; }
  .app-content:has(#smPackDetailPage) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  #smPackDetailPage {
    max-width: 440px;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 72px);
  }
  #smPackDetailPage .m-perf-entry-nav { display: flex !important; align-items: center; }
  #smPackDetailPage .sm-detail-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px !important;
    border-radius: var(--m-radius-xl) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: var(--m-elevation-1) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(79, 70, 229, 0.1), transparent 46%),
      linear-gradient(160deg, var(--isa-surface-strong), var(--isa-surface)) !important;
  }
  #smPackDetailPage .sm-detail-hero__top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  #smPackDetailPage .sm-detail-hero__icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    flex: 0 0 auto;
  }
  #smPackDetailPage .sm-lib-hero__title {
    font-size: 1.22rem !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
    overflow-wrap: anywhere;
  }
  #smPackDetailPage .sm-lib-hero__text {
    font-size: 0.78rem !important;
    margin: 0 !important;
    color: var(--isa-text-muted) !important;
  }
  #smPackDetailPage .sm-detail-hero__chips:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
  }
  #smPackDetailPage .sm-lib-hero__actions {
    display: none !important;
  }
  #smPackDetailPage .sm-panel__head #btnPackAddMaterials2 {
    display: none !important;
  }
  #smPackDetailPage .sm-pack-item {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  #smPackDetailPage .sm-pack-item__actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    width: 100%;
  }
  #smPackDetailPage .sm-pack-item__actions .btn-isa {
    min-height: 40px;
    border-radius: 11px !important;
    justify-content: center;
  }
  #smPackDetailPage .sm-pack-detail-sticky:not([hidden]) {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 30;
    gap: 8px;
    padding: 10px var(--m-space-4);
    background: var(--isa-surface-strong);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
  }
  #smPackDetailPage .sm-pack-detail-sticky.is-dual .btn-isa {
    flex: 1 1 0;
  }
  #smPackDetailPage .sm-pack-detail-sticky .btn-isa {
    flex: 1 1 100%;
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }
  #smPackDetailPage .sm-pack-detail-sticky .btn-isa[hidden] {
    display: none !important;
  }
  /* Create / add-materials modals → bottom sheets on phone */
  #smPackModal.sm-modal:not([hidden]),
  #smPackAddModal.sm-modal:not([hidden]) {
    align-items: flex-end !important;
  }
  #smPackModal .sm-modal__panel,
  #smPackAddModal .sm-modal__panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(88vh, 720px);
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0 !important;
    margin: 0 !important;
  }

  /* Chapter library desk */
  #smModule:has(#smChapterPage) > .adm-journey { display: none !important; }
  .app-content:has(#smChapterPage) > .page-header { display: none !important; }
  .app-content:has(#smChapterPage) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  #smChapterPage.sm-chapter-desk {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 72px);
  }
  #smChapterPage > .adm-focus-bar {
    display: none !important;
  }
  #smChapterPage > #smChFilterBar {
    display: none !important;
  }
  #smChapterPage .m-perf-entry-nav {
    display: flex !important;
    align-items: center;
  }
  #smChapterPage .m-perf-entry-head {
    display: block !important;
  }
  #smChapterPage .m-sm-lib-control {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  #smChapterPage .m-csp-context {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 12px 12px 10px;
    border: 1px solid var(--isa-border);
    border-radius: 14px;
    background: var(--isa-surface-solid);
    box-shadow: var(--m-elevation-1);
    text-align: left;
    color: inherit;
  }
  #smChapterPage .m-csp-context__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(var(--isa-primary-rgb), 0.1);
    color: var(--isa-primary-fx);
  }
  #smChapterPage .m-csp-context__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  #smChapterPage .m-csp-context__copy strong {
    font-size: 0.94rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #smChapterPage .m-csp-context__copy span {
    font-size: 0.75rem;
    color: var(--isa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #smChapterPage .m-csp-context__go {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--isa-primary-fx);
  }
  #smChapterPage .m-csp-toolbar {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px;
  }
  #smChapterPage .m-csp-toolbar .btn-isa {
    min-height: 44px;
    border-radius: 12px !important;
    justify-content: center;
  }
  #smChapterPage .m-csp-filter-badge[hidden] {
    display: none !important;
  }
  #smChapterPage .m-sm-lib-toolbar {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 30;
    margin: 0;
    padding: 10px var(--m-space-4);
    background: var(--isa-surface-strong);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
  }
  #smChapterPage .m-sm-lib-toolbar .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }
  #smChapterPage .sm-chapter-group {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
    padding: 14px !important;
  }
  #smChapterPage .sm-material-grid,
  #smChapterPage .sm-material-grid--compact {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mChFiltersSheet.m-csp-filters-sheet.m-sheet,
  #mChFiltersSheet.sm-lib-filters-sheet.m-sheet {
    display: flex !important;
    max-height: 86vh;
    padding-bottom: 0;
    z-index: 2000;
  }
  #mChFiltersSheet:not(.is-open) { pointer-events: none; }
  #mChFiltersSheet.is-open { pointer-events: auto; }
  #mChSheetHost #chFilterFields {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  #mChSheetHost #chFilterFields .isa-select,
  #mChSheetHost #chFilterFields .isa-ss,
  #mChSheetHost #chFilterFields .adm-filter-control {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
  }
  #mChSheetHost #chFilterFields .isa-ss-trigger {
    min-height: 46px;
    height: 46px;
  }
  #mChFiltersSheet .m-csp-sheet-foot,
  #mChFiltersSheet .sm-lib-filters-foot {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--m-safe-b));
    border-top: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
  }
  #mChFiltersSheet .sm-lib-filters-foot .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }

  /* Analytics + Reports desks */
  #smModule:has(#smAnalyticsPage) > .adm-journey,
  #smModule:has(#smReportsPage) > .adm-journey { display: none !important; }
  .app-content:has(#smAnalyticsPage) > .page-header,
  .app-content:has(#smReportsPage) > .page-header { display: none !important; }
  .app-content:has(#smAnalyticsPage),
  .app-content:has(#smReportsPage) {
    padding-left: var(--m-space-4) !important;
    padding-right: var(--m-space-4) !important;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  .sm-an-desk > .sm-dash-hero,
  .sm-rep-desk > .sm-rep-hero {
    display: none !important;
  }
  .sm-an-desk #smAnFilterBar {
    display: none !important;
  }
  .sm-an-desk #smAnKpis .sm-kpi-row,
  .sm-an-desk #smAnKpis .sm-kpi-row--4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .sm-an-desk .sm-kpi {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
    min-height: 96px;
  }
  .sm-an-desk .sm-kpi__value {
    font-size: 1.35rem !important;
  }
  .sm-an-desk .sm-chart-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sm-an-desk .sm-chart-card {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  .sm-an-desk .chart-box {
    min-height: 200px !important;
  }
  .sm-an-desk .sm-an-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .sm-an-desk .adm-work-row {
    border-radius: 12px;
    box-shadow: var(--m-elevation-1);
  }
  #mSmAnFiltersSheet.m-csp-filters-sheet.m-sheet,
  #mSmAnFiltersSheet.sm-lib-filters-sheet.m-sheet {
    display: flex !important;
    max-height: 86vh;
    padding-bottom: 0;
    z-index: 2000;
  }
  #mSmAnFiltersSheet:not(.is-open) { pointer-events: none; }
  #mSmAnFiltersSheet.is-open { pointer-events: auto; }
  #mSmAnSheetHost #anFilterFields,
  #mSmAnFiltersSheet .m-sheet-body {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  #mSmAnSheetHost #anFilterFields .isa-select,
  #mSmAnSheetHost #anFilterFields .isa-ss,
  #mSmAnSheetHost #anFilterFields .adm-filter-control {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  #mSmAnSheetHost #anFilterFields .isa-ss-trigger {
    min-height: 46px;
  }
  #mSmAnFiltersSheet .m-csp-sheet-foot,
  #mSmAnFiltersSheet .sm-lib-filters-foot {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--m-safe-b));
    border-top: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
  }
  #mSmAnFiltersSheet .sm-lib-filters-foot .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }

  .sm-rep-desk {
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 72px) !important;
  }
  .sm-rep-desk .sm-rep-catalog,
  .sm-rep-desk .sm-rep-scope,
  .sm-rep-desk .sm-rep-preview {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  .sm-rep-desk .sm-rep-catalog__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .sm-rep-desk .sm-rep-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .sm-rep-desk .sm-rep-card {
    border-radius: var(--m-radius-lg) !important;
    padding: 14px !important;
    min-height: 72px;
  }
  .sm-rep-desk .sm-rep-group__head span {
    display: none;
  }
  .sm-rep-desk .sm-rep-scope__bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sm-rep-desk .sm-rep-scope__actions {
    display: none !important;
  }
  .sm-rep-desk .sm-rep-preview__head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sm-rep-desk .sm-rep-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sm-rep-desk .sm-rep-sticky-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 30;
    margin: 0;
    padding: 10px var(--m-space-4);
    background: var(--isa-surface-strong);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
    border-radius: 0;
  }
  .sm-rep-desk .sm-rep-sticky-actions .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }

  /* Upload — 3-step mobile wizard */
  #smModule:has(#smUploadPage) > .adm-journey { display: none !important; }
  #smUploadPage {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 88px);
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  #smModule:has(#smUploadPage),
  #smUploadPage .adm-form,
  #smUploadPage .sm-upload-pane,
  #smUploadPage .sm-field-grid,
  #smUploadPage .sm-field {
    min-width: 0;
    max-width: 100%;
  }
  #smUploadPage > .sm-lib-hero,
  #smUploadPage > .sm-upload-steps,
  #smUploadPage .sm-form-actions {
    display: none !important;
  }
  #smUploadPage .m-perf-entry-nav {
    display: flex !important;
    align-items: center;
    margin-bottom: 4px;
  }
  #smUploadPage .m-sm-wizard-head {
    display: block !important;
    margin: 0 0 14px;
  }
  #smUploadPage .m-sm-wizard-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
    /* Room for active halo + scale — page uses overflow-x: hidden */
    padding: 6px 8px;
  }
  #smUploadPage .m-sm-wizard-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid #e2e8f0;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  #smUploadPage .m-sm-wizard-dot.is-active {
    background: var(--isa-primary);
    border-color: var(--isa-primary);
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(var(--isa-primary-rgb), 0.16);
  }
  #smUploadPage .m-sm-wizard-dot.is-done {
    background: var(--isa-primary);
    border-color: var(--isa-primary);
  }
  #smUploadPage .m-sm-wizard-line {
    flex: 1 1 auto;
    height: 2px;
    margin: 0 6px;
    background: #e2e8f0;
    border-radius: 2px;
  }
  #smUploadPage .m-sm-wizard-line.is-done {
    background: var(--isa-primary);
  }
  #smUploadPage .m-sm-wizard-kicker {
    margin: 0 0 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--isa-text-muted);
  }
  #smUploadPage .m-sm-wizard-title {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--isa-text);
    letter-spacing: -0.02em;
  }
  #smUploadPage .m-sm-wizard-sub {
    margin: 0;
    font-size: 0.86rem;
    color: var(--isa-text-secondary);
    line-height: 1.35;
  }
  #smUploadPage.is-m-wizard .sm-upload-pane {
    margin-bottom: 0 !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
    padding: 14px !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  #smUploadPage.is-m-wizard .sm-upload-pane .sm-panel__head {
    display: none;
  }
  #smUploadPage .sm-field-grid,
  #smUploadPage .sm-field-grid--3,
  #smUploadPage .sm-field-grid--2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100%;
  }
  #smUploadPage .sm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  #smUploadPage .sm-field__label {
    font-size: 0.78rem;
    font-weight: 700;
  }
  #smUploadPage .sm-field > .isa-ss,
  #smUploadPage .sm-field .isa-ss {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #smUploadPage .isa-input,
  #smUploadPage .isa-select,
  #smUploadPage .isa-ss-trigger {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    box-sizing: border-box;
  }
  #smUploadPage .isa-ss-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #smUploadPage .sm-dropzone {
    padding: 28px 16px;
    border-radius: var(--m-radius-lg);
    text-align: center;
  }
  #smUploadPage .sm-dropzone__body strong {
    display: block;
    margin-top: 8px;
    font-size: 0.95rem;
  }
  #smUploadPage .m-sm-wizard-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 40;
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 10px var(--m-space-4);
    background: var(--isa-surface-strong);
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
  }
  #smUploadPage .m-sm-wizard-foot.is-final {
    grid-template-columns: auto 1fr 1.25fr;
  }
  #smUploadPage .m-sm-wizard-foot.is-final #mSmWizardBack:not([hidden]) {
    grid-column: 1;
  }
  #smUploadPage .m-sm-wizard-foot.is-final #mSmWizardDraft:not([hidden]) {
    grid-column: 2;
  }
  #smUploadPage .m-sm-wizard-foot.is-final #mSmWizardPublish:not([hidden]) {
    grid-column: 3;
  }
  #smUploadPage .m-sm-wizard-foot .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }
  #smUploadPage .m-sm-wizard-foot #mSmWizardBack[hidden],
  #smUploadPage .m-sm-wizard-foot #mSmWizardNext[hidden],
  #smUploadPage .m-sm-wizard-foot #mSmWizardDraft[hidden],
  #smUploadPage .m-sm-wizard-foot #mSmWizardPublish[hidden] {
    display: none !important;
  }
  #smUploadPage .m-sm-wizard-foot:not(.is-final) #mSmWizardNext {
    grid-column: 1 / -1;
  }
  #smUploadPage .m-sm-wizard-foot:not(.is-final):has(#mSmWizardBack:not([hidden])) #mSmWizardNext {
    grid-column: 2;
  }
  #smUploadPage .m-sm-wizard-foot:not(.is-final) #mSmWizardBack:not([hidden]) {
    grid-column: 1;
  }
  #smUploadPage.is-m-wizard .sm-upload-pane[hidden] {
    display: none !important;
  }


  #smUploadPage .sm-current-file {
    padding: 12px;
    border-radius: 14px;
    box-shadow: var(--m-elevation-1);
  }
  #smUploadPage .sm-current-file__row {
    flex-wrap: wrap;
  }
  #smUploadPage .sm-current-file__row .btn-isa {
    min-height: 40px;
    border-radius: 10px !important;
  }
  #smUploadPreviewModal.sm-modal {
    z-index: 1200;
  }
  #smUploadPreviewModal .sm-modal__panel--preview {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - var(--m-safe-t) - 12px);
    margin: var(--m-safe-t) 0 0;
    border-radius: 18px 18px 0 0;
  }
  #smUploadPreviewModal .sm-modal__body--preview {
    max-height: none;
    flex: 1 1 auto;
  }
  #smUploadPreviewModal .sm-preview-body iframe,
  #smUploadPreviewModal .sm-preview-frame__media {
    min-height: 52vh;
  }
  #smUploadPreviewModal .sm-preview-toolbar__actions .sm-detail-dl-dup {
    display: inline-flex;
  }

  /* Detail */
  #smModule:has(#smDetailPage) > .adm-journey { display: none !important; }
  #smDetailPage {
    max-width: 440px;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 72px);
  }
  #smDetailPage .m-perf-entry-nav { display: flex !important; align-items: center; }
  #smDetailPage .sm-detail-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px !important;
    border-radius: var(--m-radius-xl) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: var(--m-elevation-1) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(5, 150, 105, 0.1), transparent 46%),
      linear-gradient(160deg, var(--isa-surface-strong), var(--isa-surface)) !important;
  }
  #smDetailPage .sm-detail-hero__top {
    align-items: center;
    gap: 12px;
  }
  #smDetailPage .sm-detail-hero__icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
  #smDetailPage .sm-lib-hero__eyebrow {
    font-size: 0.68rem !important;
    padding: 3px 8px;
  }
  #smDetailPage .sm-lib-hero__title {
    font-size: 1.22rem !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
    overflow-wrap: anywhere;
  }
  #smDetailPage .sm-lib-hero__text {
    font-size: 0.78rem !important;
    margin: 0 !important;
    color: var(--isa-text-muted) !important;
  }
  #smDetailPage .sm-detail-hero__aside:not([hidden]) {
    display: block !important;
  }
  #smDetailPage .sm-detail-hero__chips:not([hidden]) {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
  }
  #smDetailPage .sm-detail-chip {
    max-width: 100%;
    padding: 5px 10px;
    font-size: 0.72rem;
    background: rgba(var(--isa-soft-rgb), 0.95);
  }
  /* Sticky Download + icon Edit in hero — hide duplicate hero action row on phone */
  #smDetailPage .sm-lib-hero__actions {
    display: none !important;
  }
  #smDetailPage .sm-detail-dl-dup,
  #smDetailPage .sm-detail-back-dup,
  #smDetailPage .sm-preview-toolbar__actions .sm-detail-dl-dup,
  #smDetailPage .sm-preview-fallback__actions .sm-detail-dl-dup {
    display: none !important;
  }
  #smDetailPage .sm-detail-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  #smDetailPage .sm-detail-sticky:not([hidden]) {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b));
    z-index: 30;
    gap: 8px;
    padding: 10px var(--m-space-4);
    background: var(--isa-surface-strong);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
  }
  #smDetailPage .sm-detail-sticky .btn-isa {
    flex: 1 1 100%;
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }
  #smDetailPage .sm-preview-frame {
    min-height: 220px;
    border-radius: var(--m-radius-lg);
  }
  #smDetailPage .sm-preview-toolbar__actions {
    display: flex;
    gap: 8px;
  }
  #smDetailPage .sm-preview-toolbar__actions .btn-isa {
    min-height: 40px;
    border-radius: 11px !important;
  }

  /* ---- Teacher Profile → Leave tab: apply-leave modal as a bottom sheet
     (same treatment as .tt-class-modal), chips/work-rows already inherit
     the shared .stu-profile-nav / .adm-work-row mobile rules above. ---- */
  body[data-role="teacher"] #tchLeaveModal .modal-dialog {
    margin: 0 !important;
    min-height: 100vh;
    align-items: flex-end !important;
    max-width: 100% !important;
  }
  body[data-role="teacher"] #tchLeaveModal .modal-content {
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0 !important;
    width: 100%;
    max-height: min(88vh, 720px);
    overflow-y: auto;
    padding-bottom: calc(var(--m-safe-b) + 8px);
  }
  body[data-role="teacher"] #tchLeaveChipsShell.tch-chips-shell {
    position: relative;
    margin-bottom: 14px;
  }
  body[data-role="teacher"] #tchLeaveChipsShell .tch-chips-fade {
    display: block !important;
    position: absolute;
    top: 0;
    bottom: 2px;
    width: 22px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  body[data-role="teacher"] #tchLeaveChipsShell .tch-chips-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--isa-surface-solid), transparent);
  }
  body[data-role="teacher"] #tchLeaveChipsShell .tch-chips-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--isa-surface-solid), transparent);
  }
  body[data-role="teacher"] #tchLeaveChipsShell .tch-chips-fade.is-on {
    opacity: 1;
  }
  body[data-role="teacher"] #tchLeaveChips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 0 !important;
  }
  body[data-role="teacher"] #tchLeaveChips::-webkit-scrollbar { display: none; }
  body[data-role="teacher"] #tchLeaveChips .adm-chip {
    flex: 0 0 auto;
  }
  body[data-role="teacher"] .tch-leave-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body[data-role="teacher"] .tch-leave-foot {
    justify-content: space-between;
  }

  /* Timetable mobile — denser day tabs + richer feed cards */
  body[data-role="parent"] .app-content:has(#mTtWeek),
  body[data-role="teacher"] .app-content:has(#mTtWeek),
  body[data-role="parent"] #ttTeacherDesk,
  body[data-role="teacher"] #ttTeacherDesk,
  body[data-role="parent"] .tt-student-desk:has(#mTtWeek),
  body[data-role="teacher"] .tt-student-desk:has(#mTtWeek) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  body[data-role="parent"] .m-tt-week,
  body[data-role="teacher"] .m-tt-week {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
    box-sizing: border-box !important;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + 48px) !important;
  }
  body[data-role="parent"] .m-tt-week .m-tt-hero,
  body[data-role="teacher"] .m-tt-week .m-tt-hero,
  body[data-role="parent"] .m-tt-week .m-tt-kpis,
  body[data-role="teacher"] .m-tt-week .m-tt-kpis,
  body[data-role="parent"] .m-tt-week .m-tt-spot,
  body[data-role="teacher"] .m-tt-week .m-tt-spot {
    max-width: 100%;
    min-width: 0;
  }
  body[data-role="parent"] .m-tt-week .m-daytabs,
  body[data-role="teacher"] .m-tt-week .m-daytabs {
    gap: 4px !important;
    margin-bottom: var(--m-space-3) !important;
    min-width: 0 !important;
  }
  body[data-role="parent"] .m-tt-week .m-daytab,
  body[data-role="teacher"] .m-tt-week .m-daytab {
    padding: 7px 1px 6px !important;
    border-radius: 12px !important;
    min-height: 52px;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  body[data-role="parent"] .m-tt-week .m-tt-feed,
  body[data-role="teacher"] .m-tt-week .m-tt-feed {
    gap: 10px !important;
  }
  body[data-role="parent"] .m-tt-week .m-tt-slot,
  body[data-role="teacher"] .m-tt-week .m-tt-slot {
    padding: 12px 12px !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  body[data-role="parent"] .m-tt-week .m-feed-status,
  body[data-role="teacher"] .m-tt-week .m-feed-status {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 3px 8px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body[data-role="parent"] .m-tt-week .m-feed-time,
  body[data-role="teacher"] .m-tt-week .m-feed-time {
    width: 48px !important;
    padding-top: 2px;
  }
  body[data-role="parent"] .m-tt-week .m-feed-rail,
  body[data-role="teacher"] .m-tt-week .m-feed-rail {
    align-self: stretch;
    min-height: 40px;
  }
  body[data-role="parent"] .tt-class-modal .modal-dialog,
  body[data-role="teacher"] .tt-class-modal .modal-dialog,
  body[data-role="parent"] .tt-class-modal .tt-class-modal-frame,
  body[data-role="teacher"] .tt-class-modal .tt-class-modal-frame {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    align-items: flex-end !important;
  }
  body[data-role="parent"] .tt-class-modal .modal-content,
  body[data-role="teacher"] .tt-class-modal .modal-content,
  body[data-role="parent"] .tt-class-modal .tt-class-panel,
  body[data-role="teacher"] .tt-class-modal .tt-class-panel {
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(88vh, 720px);
    padding-bottom: calc(var(--m-safe-b) + 8px);
  }

  body[data-role="teacher"] .m-topbar,
  body[data-role="parent"] .m-topbar {
    display: flex !important;
  }
  body[data-role="teacher"] .m-bottomnav,
  body[data-role="parent"] .m-bottomnav {
    display: grid !important;
  }
  body[data-role="teacher"] .m-sheet,
  body[data-role="parent"] .m-sheet {
    display: flex !important;
  }
  body[data-role="teacher"] .m-sheet-backdrop,
  body[data-role="parent"] .m-sheet-backdrop {
    display: block !important;
  }
  body[data-role="teacher"] .m-fab,
  body[data-role="parent"] .m-fab {
    display: flex !important;
  }

  body[data-role="teacher"] .app-shell,
  body[data-role="parent"] .app-shell {
    display: block;
  }
  body[data-role="teacher"] .app-main,
  body[data-role="parent"] .app-main {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }
  /* Safety-net clearance so the fixed bottom nav never covers content on
     screens not yet redesigned with .m-home (replicate phases 1-4). Pages
     that DO render .m-home add their own tighter bottom padding below. */
  body[data-role="teacher"] .app-content,
  body[data-role="parent"] .app-content {
    padding: var(--m-space-4) var(--m-space-4) calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-6));
  }
  body[data-role="teacher"] .app-content:has(.m-home),
  body[data-role="parent"] .app-content:has(.m-home) {
    padding: 0;
  }
  body[data-role="teacher"] .app-content:has(.m-screen),
  body[data-role="parent"] .app-content:has(.m-screen) {
    padding: 0;
  }
  body[data-role="teacher"] .app-footer,
  body[data-role="parent"] .app-footer {
    display: none;
  }
  /* Legacy page header hidden once a mobile screen root is present. */
  body[data-role="teacher"] .app-content:has(.m-home) > .page-header,
  body[data-role="parent"] .app-content:has(.m-home) > .page-header,
  body[data-role="teacher"] .app-content:has(.m-screen) > .page-header,
  body[data-role="parent"] .app-content:has(.m-screen) > .page-header,
  body[data-role="teacher"] .app-content:has(#attMarkPage) > .page-header,
  body[data-role="teacher"] .app-content:has(#dctSessionPage) > .page-header {
    display: none;
  }
  body[data-role="teacher"] .app-content:has(#attMarkPage) {
    padding: 0;
  }

  /* ---- Bottom-sheet skin for ISA.alert / ISA.confirm (Bootstrap modal) ---- */
  body[data-role="teacher"] .isa-dialog .modal-dialog,
  body[data-role="parent"] .isa-dialog .modal-dialog {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    align-items: flex-end !important;
  }
  body[data-role="teacher"] .isa-dialog .modal-content,
  body[data-role="parent"] .isa-dialog .modal-content {
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: var(--m-safe-b);
  }
  body[data-role="teacher"] .isa-dialog.fade .modal-dialog,
  body[data-role="parent"] .isa-dialog.fade .modal-dialog {
    transform: translateY(40px);
  }
  body[data-role="teacher"] .isa-dialog.show .modal-dialog,
  body[data-role="parent"] .isa-dialog.show .modal-dialog {
    transform: translateY(0);
  }

  /* ---- Bottom-sheet skin for searchable-select panels ---- */
  body[data-role="teacher"] .isa-ss-panel,
  body[data-role="parent"] .isa-ss-panel,
  body > .isa-ss-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0 !important;
    max-height: 65vh;
    padding-bottom: var(--m-safe-b);
    z-index: 2200 !important;
  }
}

/* =========================================================
   SHARED "STU-PROFILE / HIST-CARD" REUSE (Pattern B)
   =========================================================
   Unlike the Dashboard's dual-render .m-home block (Pattern A — see
   database/MOBILE_PATTERN_REFERENCE.md §2), these inner pages are fully
   AJAX/JS-rendered into fixed DOM ids (assets/js/attendance.js,
   assignments.js, students.js, teachers.js, academy-tracker.js,
   academic-performance.js, study-materials.js, daily-class.js all build
   HTML fragments client-side). Duplicating that markup server-side would
   require duplicate ids (invalid HTML) or JS changes to target two trees.

   Instead: this is a CSS-only reskin of the SAME shared component classes
   those scripts already emit (`.stu-profile-hero*`, `.stu-hist-*`,
   `.stu-child-switcher*`) — no JS/PHP/business-logic changes. Because this
   component system is reused across many parent/teacher screens
   (attendance-history, assignments parent-view, academic-performance
   parent-view, academy-tracker parent-view, study-materials material-list,
   daily-class-tracker parent-view, teacher-profile, student-profile), this
   one pass elevates all of them at once — see MOBILE_PATTERN_REFERENCE.md
   §9 for the full list + how to extend it to a not-yet-covered screen. */
@media (max-width: 992px) {
  body[data-role="teacher"] .stu-profile-card,
  body[data-role="parent"] .stu-profile-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body[data-role="teacher"] .stu-profile-hero,
  body[data-role="parent"] .stu-profile-hero {
    /* minmax(0, 1fr), NOT bare 1fr — a bare 1fr track's implicit minimum
       is its content's max-content width, so a nowrap row inside (e.g. the
       old scrolling actions row) would force this whole card, and the
       page, wider than the viewport instead of scrolling internally. */
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "main" "side" "actions" !important;
    gap: var(--m-space-3) !important;
    padding: var(--m-space-5) !important;
    border-radius: var(--m-radius-xl) !important;
    border: 1px solid var(--isa-border) !important;
    /* Flat surface — same plain card as .m-hero on Home. */
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-2);
    margin-bottom: var(--m-space-5);
    /* Absolute .m-hero-switch (injected by mobile-app.js) needs a
       positioned containing block — same as Home's .m-hero. */
    position: relative;
    overflow: visible;
  }
  /* Keep Switch Student above the identity row so taps always reach the sheet. */
  body[data-role="parent"] .stu-profile-hero > .m-hero-switch {
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  /* Parent: side KPIs are hidden — drop that grid row so gap doesn't
     leave a blank band between the hairline and the action buttons. */
  body[data-role="parent"] .stu-profile-hero {
    grid-template-areas: "main" "actions" !important;
    gap: var(--m-space-3) !important;
  }
  /* Topbar Switch Student chip stays visible on inner pages — parents
     liked having it there (and Home still uses the in-hero switch).
     Both open the same #mChildSheet. */
  body[data-role="teacher"] .stu-profile-hero-main,
  body[data-role="parent"] .stu-profile-hero-main {
    position: relative;
    z-index: 1;
    align-items: center !important;
  }
  /* Same avatar↔copy gap as Home `.m-hero-top` (inner Parent screens). */
  body[data-role="parent"] .stu-profile-hero-main {
    gap: var(--m-space-4) !important;
    /* Home hairline under identity (same token as `.m-hero-facts` border-top).
       Only on Parent inner `.stu-profile-hero` — not Home `.m-home`. */
    width: 100%;
    padding-bottom: var(--m-space-4) !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--isa-border);
  }
  /* Eyebrow ("Viewing") -> same muted, tight-margin treatment as
     .m-hero-eyebrow on Home. */
  body[data-role="teacher"] .stu-profile-hero-copy > .adm-eyebrow,
  body[data-role="parent"] .stu-profile-hero-copy > .adm-eyebrow {
    color: var(--isa-text-muted) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 2px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
  }
  /* .stu-profile-photo — same 58px centred circle as Home's .m-hero-avatar. */
  body[data-role="teacher"] .stu-profile-photo,
  body[data-role="parent"] .stu-profile-photo {
    flex-shrink: 0 !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background: var(--isa-grad-brand);
    box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.35) !important;
  }
  body[data-role="teacher"] .stu-profile-photo img,
  body[data-role="parent"] .stu-profile-photo img,
  body[data-role="teacher"] .stu-profile-photo .stu-avatar,
  body[data-role="parent"] .stu-profile-photo .stu-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
  }
  body[data-role="parent"] .stu-profile-photo .adm-work-avatar {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: none !important;
  }
  body[data-role="teacher"] .stu-profile-hero-title h2,
  body[data-role="parent"] .stu-profile-hero-title h2 {
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.22 !important;
  }
  body[data-role="parent"] .stu-profile-hero-title .isa-badge {
    display: none !important;
  }
  /* Home-matching stack on inner Parent screens only (never .m-home).
     Switch Student is absolute top-right — reserve space on VIEWING only.
     Putting padding-right on the whole copy column was what forced
     "Ananya Verma" onto two lines on Fees/Attendance/etc. */
  body[data-role="parent"] .stu-profile-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    flex: 1 1 auto !important;
  }
  body[data-role="parent"] .stu-profile-hero-copy > .adm-eyebrow {
    order: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 7rem; /* clearance vs .m-hero-switch only */
  }
  body[data-role="parent"] .stu-profile-hero-title {
    order: 1;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    margin-top: 0 !important;
  }
  /* Name stays ONE line (Home look). Place may wrap to 2 lines below. */
  body[data-role="parent"] .stu-profile-hero-title h2 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 3px !important;
  }
  body[data-role="parent"] .stu-hero-chips {
    order: 2;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }
  body[data-role="parent"] .stu-profile-hero-place {
    order: 3;
    margin-top: 0 !important;
    width: 100%;
    max-width: 100%;
  }
  body[data-role="teacher"] .stu-profile-hero-place,
  body[data-role="parent"] .stu-profile-hero-place {
    font-size: 0.8rem !important;
    color: var(--isa-text-secondary) !important;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  body[data-role="teacher"] .stu-hero-chips,
  body[data-role="parent"] .stu-hero-chips {
    position: relative;
    z-index: 1;
  }
  /* Only the student-code chip (UAT_STU_02) — matches Home. */
  body[data-role="parent"] .stu-hero-chip:not(.stu-hero-chip--code) {
    display: none !important;
  }
  body[data-role="parent"] .stu-hero-chip--code {
    display: inline-flex !important;
    background: var(--isa-bg) !important;
    border: 1px solid var(--isa-border) !important;
    color: var(--isa-text-secondary) !important;
    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    border-radius: var(--m-radius-pill) !important;
    padding: 4px 10px !important;
  }
  /* Hide hero KPI spots on parent mobile — too much for the identity card. */
  body[data-role="parent"] .stu-profile-hero > .stu-hero-side {
    display: none !important;
  }

  /* Rate / risk spots -> even KPI row (was a stacked side panel) */  /* Rate / risk spots -> even KPI row (was a stacked side panel) */
  body[data-role="teacher"] .stu-hero-side,
  body[data-role="parent"] .stu-hero-side {
    justify-self: stretch !important;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  body[data-role="teacher"] .stu-hero-spots,
  body[data-role="parent"] .stu-hero-spots {
    flex-direction: row !important;
    min-width: 0 !important;
    gap: var(--m-space-2) !important;
  }
  body[data-role="teacher"] .stu-hero-spot,
  body[data-role="parent"] .stu-hero-spot {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    border-radius: var(--m-radius-md) !important;
    background: var(--isa-bg) !important;
    border-color: var(--isa-border) !important;
  }
  body[data-role="teacher"] .stu-hero-spot.is-due,
  body[data-role="parent"] .stu-hero-spot.is-due {
    background: var(--isa-warning-soft) !important;
  }
  body[data-role="parent"] .perf-parent-desk #parHeroHealthSpot strong {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Action buttons -> max 2-per-row that WRAPS, never scrolls (the brief
     explicitly forbids horizontal scrolling) and never truncates a label.
     If there are ever 5+ actions, they just keep wrapping in pairs. */
  body[data-role="teacher"] .stu-hero-actions,
  body[data-role="parent"] .stu-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--m-space-2) !important;
    position: relative;
    z-index: 1;
  }
  body[data-role="teacher"] .stu-hero-actions .btn-isa,
  body[data-role="parent"] .stu-hero-actions .btn-isa {
    /* 3 unequal-length labels (Attendance/Performance/Profile) squeezed
       into one row via flex:1 1 0 left ~100px each — barely enough for
       icon + gap + "Attendance", so text-overflow:ellipsis was silently
       truncating a letter or two off the end. min-width:40% forces at
       most 2 per row (the 3rd wraps to its own row) so every label gets
       comfortable room and never needs to truncate. */
    flex: 1 1 40% !important;
    min-width: 40% !important;
    height: 40px;
    padding: 0 var(--m-space-3) !important;
    border-radius: var(--m-radius-pill) !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    justify-content: center !important;
  }
  /* Parent: primary CTA (Profile / Fees) on TOP full-width row; the two
     outline shortcuts sit on the row below. Teacher keeps prior order. */
  body[data-role="parent"] .stu-hero-actions .btn-isa-primary {
    order: -1;
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  body[data-role="teacher"] .stu-hero-actions .btn-isa-primary {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  /* Inline child switcher (#parChildSwitcher) — the topbar chip + shared
     #mChildSheet grid (includes/mobile-shell-top.php) already cover
     switching on every page, so this second, page-embedded switcher would
     just be a duplicate control (and its natural chip row is exactly the
     horizontal-scroll pattern the brief forbids). Hide it outright rather
     than reskin a control we don't need. */
  body[data-role="teacher"] .stu-child-switcher,
  body[data-role="parent"] .stu-child-switcher {
    display: none !important;
  }

  /* History / activity cards -> roomier, shadow instead of thin border */
  body[data-role="teacher"] .stu-hist-list,
  body[data-role="parent"] .stu-hist-list {
    gap: var(--m-space-3) !important;
  }
  body[data-role="teacher"] .stu-hist-card,
  body[data-role="parent"] .stu-hist-card {
    border-radius: var(--m-radius-lg) !important;
    border-color: var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1);
    padding: var(--m-space-4) !important;
  }
  body[data-role="teacher"] .stu-hist-card-ico,
  body[data-role="parent"] .stu-hist-card-ico {
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--m-radius-md) !important;
  }
  body[data-role="teacher"] .stu-hist-stats,
  body[data-role="parent"] .stu-hist-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--m-space-2) !important;
  }
  body[data-role="teacher"] .stu-hist-stat,
  body[data-role="parent"] .stu-hist-stat {
    border-radius: var(--m-radius-md) !important;
    background: var(--isa-bg) !important;
  }

  /* Pagination + per-page footer — centered stack at page bottom (thumb-friendly) */
  body[data-role="teacher"] .isa-table-footer,
  body[data-role="parent"] .isa-table-footer,
  body[data-role="teacher"] .adm-work-footer,
  body[data-role="parent"] .adm-work-footer {
    flex-direction: column !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="teacher"] .isa-table-footer .isa-list-foot,
  body[data-role="parent"] .isa-table-footer .isa-list-foot,
  body[data-role="teacher"] .adm-work-footer .isa-list-foot,
  body[data-role="parent"] .adm-work-footer .isa-list-foot {
    justify-content: center !important;
    width: 100% !important;
  }
  body[data-role="teacher"] .isa-table-footer .isa-pagination,
  body[data-role="parent"] .isa-table-footer .isa-pagination,
  body[data-role="teacher"] .adm-work-footer .isa-pagination,
  body[data-role="parent"] .adm-work-footer .isa-pagination {
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  body[data-role="teacher"] .isa-pagination button,
  body[data-role="parent"] .isa-pagination button {
    min-width: 36px;
    height: 36px;
  }

  /* Parent assignments — center pager block on mobile */
  body[data-role="parent"] .asgn-parent-desk .isa-table-footer {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="parent"] .asgn-parent-desk .isa-list-foot {
    justify-content: center !important;
    width: 100% !important;
  }
  body[data-role="parent"] .asgn-parent-desk .isa-pagination {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* ---- Attendance-history specific: pulse / mode switch / context pills.
     Flattened from decorative gradients to the same plain white-card
     language as the hero above, so the screen reads as one coherent app
     rather than several differently-skinned widgets stacked up. ---- */
  body[data-role="parent"] .att-parent-pulse {
    border-radius: var(--m-radius-lg) !important;
    border-color: var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1);
    grid-template-columns: 1fr !important;
    padding: var(--m-space-4) !important;
  }
  body[data-role="parent"] .att-parent-pulse__rate {
    border-right: 0 !important;
    border-bottom: 1px solid var(--isa-border) !important;
    padding: 0 0 var(--m-space-3) !important;
  }
  body[data-role="parent"] .att-pulse-pill {
    border-radius: var(--m-radius-md) !important;
    border-color: var(--isa-border) !important;
  }
  body[data-role="parent"] .att-parent-modebar {
    border-radius: var(--m-radius-lg) !important;
    border-color: var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1);
  }
  /* This is meant to read as ONE toggle switch ("show me A or B"), not two
     separate buttons — but desktop's .att-mode is two independently
     bordered/shadowed white pills, and at <=575px attendance.css even
     stacks them into two full-width rows, which looks exactly like two
     stacked buttons rather than a single control. Rebuild it as a real
     segmented control: one shared tinted track, segments have no border/
     shadow of their own (transparent, just colored text) so only the
     active segment's solid fill stands out as "the current selection"
     inside a shared frame — and keep it 2-up (never stacked), the
     horizontal layout is what visually says "toggle between these two". */
  body[data-role="parent"] .att-parent-modes {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 4px !important;
    background: var(--isa-bg) !important;
    border-radius: var(--m-radius-pill) !important;
    border: 1px solid var(--isa-border) !important;
  }
  body[data-role="parent"] .att-mode {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--m-radius-pill) !important;
    color: var(--isa-text-secondary) !important;
    height: 40px;
    min-height: 40px !important;
  }
  body[data-role="parent"] .att-mode.is-active {
    background: var(--isa-primary) !important;
    color: #fff !important;
    box-shadow: var(--m-elevation-1) !important;
  }
  /* "Classes held" wraps to 2 lines in a 2-up segment on a phone-width
     track — drop the "held" (kept for desktop/screen readers there) so
     the segment reads as a clean single-line "Classes" label. */
  body[data-role="parent"] .att-mode-more {
    display: none !important;
  }
  body[data-role="parent"] .att-context-pill {
    border-radius: var(--m-radius-md) !important;
    border-color: var(--isa-border) !important;
    min-height: 58px !important;
  }
  body[data-role="parent"] .att-classes-summary {
    border-radius: var(--m-radius-lg) !important;
    border-color: var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1) !important;
    padding: var(--m-space-4) !important;
  }

  /* Tip + history header polish (mobile only — desktop keeps dashed tip) */
  body[data-role="parent"] .att-parent-tip {
    align-items: center !important;
    gap: var(--m-space-3) !important;
    margin: var(--m-space-2) 0 var(--m-space-4) !important;
    padding: var(--m-space-3) var(--m-space-4) !important;
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  }
  body[data-role="parent"] .att-parent-tip__ico {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--m-radius-md) !important;
    background: rgba(var(--isa-primary-rgb), 0.12) !important;
  }
  body[data-role="parent"] .att-parent-tip p {
    padding-top: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    color: var(--isa-text) !important;
  }
  body[data-role="parent"] .att-pulse-pill.is-active {
    border-color: var(--isa-primary) !important;
    background: rgba(var(--isa-primary-rgb), 0.08) !important;
    box-shadow: 0 0 0 2px rgba(var(--isa-primary-rgb), 0.14) !important;
  }
  body[data-role="parent"] .att-parent-history {
    margin-top: var(--m-space-1) !important;
  }
  body[data-role="parent"] .att-parent-history-head {
    margin-bottom: var(--m-space-3) !important;
  }
  body[data-role="parent"] .att-parent-history-head__title {
    align-items: center !important;
    gap: 8px !important;
  }
  body[data-role="parent"] .att-parent-history-head .stu-panel-title {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }
  body[data-role="parent"] .att-parent-count {
    align-self: center !important;
    min-width: 30px !important;
    height: 26px !important;
    font-size: 0.74rem !important;
    background: var(--isa-bg) !important;
    border-color: var(--isa-border) !important;
    color: var(--isa-text-secondary) !important;
  }
  body[data-role="parent"] .att-parent-history-head .adm-focus-text {
    margin-top: 4px !important;
    font-size: 0.78rem !important;
  }
  body[data-role="parent"] .att-parent-desk .isa-table-footer {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="parent"] .att-parent-desk .isa-list-foot {
    justify-content: center !important;
    width: 100% !important;
  }
  body[data-role="parent"] .att-parent-desk .isa-pagination {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Attendance calendar — square day cells + wrapped legend chips (phone) */
  body[data-role="teacher"] #attCalendarPage .adm-work-panel,
  body[data-role="parent"] #attCalendarPage .adm-work-panel {
    padding: var(--m-space-3) !important;
    overflow-x: clip;
    max-width: 100%;
  }
  body[data-role="teacher"] #attCalendarPage .att-cal-grid,
  body[data-role="parent"] #attCalendarPage .att-cal-grid {
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-role="teacher"] #attCalendarPage .att-cal-cell,
  body[data-role="parent"] #attCalendarPage .att-cal-cell {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    padding: 3px 2px !important;
    border-radius: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  body[data-role="teacher"] #attCalendarPage .att-cal-cell .pct,
  body[data-role="parent"] #attCalendarPage .att-cal-cell .pct {
    font-size: 0.62rem !important;
  }
  body[data-role="teacher"] #attCalendarPage .att-cal-legend,
  body[data-role="parent"] #attCalendarPage .att-cal-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
  }
  body[data-role="teacher"] #attCalendarPage .att-cal-legend__item,
  body[data-role="parent"] #attCalendarPage .att-cal-legend__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  /* ---- Shared filter bar (admissions.css `.adm-filter-bar` — the
     mandatory pattern used by EVERY module, not just parent/teacher
     screens). admissions.css already stacks it to one column at <=991px,
     but that generic pass leaves native <input type=date> pairs and
     ghost+primary button pairs at their desktop min/max-width, which are
     too narrow to read and too easy to crowd on a phone. This scopes a
     stronger, touch-sized pass to teacher/parent only — full-width
     controls, 42px rows, dates and actions each own their own full row —
     so it reads as one native-feeling filter sheet instead of a squeezed
     desktop bar, on every screen that uses this component. */
  body[data-role="teacher"] .adm-filter-bar,
  body[data-role="parent"] .adm-filter-bar {
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: var(--m-radius-lg) !important;
    border-color: var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1);
    padding: var(--m-space-4) !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="teacher"] .adm-filter-bar:has(.adm-filter-search),
  body[data-role="parent"] .adm-filter-bar:has(.adm-filter-search) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-role="teacher"] .adm-filter-search,
  body[data-role="parent"] .adm-filter-search,
  body[data-role="teacher"] .adm-filter-fields,
  body[data-role="parent"] .adm-filter-fields,
  body[data-role="teacher"] .adm-filter-actions,
  body[data-role="parent"] .adm-filter-actions {
    width: 100% !important;
  }
  body[data-role="teacher"] .adm-filter-control.isa-select,
  body[data-role="parent"] .adm-filter-control.isa-select,
  body[data-role="teacher"] .adm-filter-control.isa-input,
  body[data-role="parent"] .adm-filter-control.isa-input,
  body[data-role="teacher"] .adm-filter-bar .adm-filter-control,
  body[data-role="parent"] .adm-filter-bar .adm-filter-control,
  body[data-role="teacher"] .adm-filter-fields > .isa-ss,
  body[data-role="parent"] .adm-filter-fields > .isa-ss,
  body[data-role="teacher"] .adm-filter-fields > .isa-ss--compact,
  body[data-role="parent"] .adm-filter-fields > .isa-ss--compact {
    flex: 1 1 130px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
  }
  /* Date-range pill -> its own full-width row, each input shares it evenly
     (was two fixed 128-140px inputs side by side, which don't fit a phone
     next to the buttons that follow them in the same row). */
  body[data-role="teacher"] .adm-filter-dates,
  body[data-role="parent"] .adm-filter-dates {
    flex: 1 1 100% !important;
    width: 100%;
    justify-content: space-between;
  }
  body[data-role="teacher"] .adm-filter-dates .adm-filter-control,
  body[data-role="parent"] .adm-filter-dates .adm-filter-control {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
  }
  /* Action buttons -> full-width row, evenly split (never a cramped
     ghost+primary pair fighting for space next to other controls). */
  body[data-role="teacher"] .adm-filter-actions,
  body[data-role="parent"] .adm-filter-actions {
    display: flex !important;
    gap: var(--m-space-2) !important;
  }
  body[data-role="teacher"] .adm-filter-actions .btn-isa,
  body[data-role="parent"] .adm-filter-actions .btn-isa {
    flex: 1 1 0 !important;
    height: 42px !important;
    justify-content: center !important;
  }

  /* ---- Shared KPI summary cards + "tips" overview card (Homework,
     Academic Performance, Daily Class Tracker parent-views, etc.) ---- */
  body[data-role="teacher"] .stu-sum-card,
  body[data-role="parent"] .stu-sum-card,
  body[data-role="teacher"] .stu-ov-card,
  body[data-role="parent"] .stu-ov-card {
    border-radius: var(--m-radius-lg) !important;
    border-color: var(--isa-border) !important;
    box-shadow: var(--m-elevation-1);
    padding: var(--m-space-4) !important;
  }
  /* .stu-sum-card's icon + hero number were sized for a full-width
     desktop card — on a ~150px mobile grid column the 36px icon badge
     and 1.65rem hero number read oversized/heavy relative to the card,
     "Workload / Assignments" feedback. Scale both down to match the
     compact density of .m-stat-card elsewhere on mobile. */
  body[data-role="teacher"] .stu-sum-card-head,
  body[data-role="parent"] .stu-sum-card-head {
    gap: var(--m-space-2) !important;
    margin-bottom: var(--m-space-2) !important;
  }
  body[data-role="teacher"] .stu-sum-ico,
  body[data-role="parent"] .stu-sum-ico {
    width: 30px !important;
    height: 30px !important;
    border-radius: var(--m-radius-sm) !important;
  }
  body[data-role="teacher"] .stu-sum-ico svg,
  body[data-role="parent"] .stu-sum-ico svg,
  body[data-role="teacher"] .stu-sum-ico i,
  body[data-role="parent"] .stu-sum-ico i {
    width: 14px !important;
    height: 14px !important;
  }
  body[data-role="teacher"] .stu-sum-card-head .stu-panel-title,
  body[data-role="parent"] .stu-sum-card-head .stu-panel-title {
    font-size: 0.86rem !important;
  }
  body[data-role="parent"] .stu-sum-card.is-coach .perf-coach-art,
  body[data-role="teacher"] .perf-parent-desk .stu-sum-card.is-coach .perf-coach-art {
    margin: 4px 0 6px !important;
    min-height: 88px !important;
    border-radius: var(--m-radius-md) !important;
  }
  body[data-role="parent"] .stu-sum-card.is-coach .perf-coach-art img,
  body[data-role="teacher"] .perf-parent-desk .stu-sum-card.is-coach .perf-coach-art img {
    max-width: 100% !important;
  }
  body[data-role="parent"] .stu-sum-card.is-coach .perf-coach-caption,
  body[data-role="teacher"] .perf-parent-desk .stu-sum-card.is-coach .perf-coach-caption {
    font-size: 0.68rem !important;
    padding-top: 6px !important;
  }
  body[data-role="teacher"] .stu-sum-hero,
  body[data-role="parent"] .stu-sum-hero {
    margin-bottom: var(--m-space-2) !important;
  }
  body[data-role="teacher"] .stu-sum-hero strong,
  body[data-role="parent"] .stu-sum-hero strong {
    font-size: 1.35rem !important;
  }
  body[data-role="parent"] .stu-sum-card.is-coach .stu-sum-hero--quote strong,
  body[data-role="teacher"] .perf-parent-desk .stu-sum-card.is-coach .stu-sum-hero--quote strong {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body[data-role="teacher"] .stu-sum-row,
  body[data-role="parent"] .stu-sum-row {
    padding: 6px 0 !important;
    font-size: 0.78rem !important;
  }
  /* .stu-sum-grid (Workload/Completion, Attendance/Performance, etc. pairs)
     is 2-col on desktop but a shared, unscoped assignments.css rule
     collapses it to 1-col at <=991px for plain responsive pages — override
     back to a 2-col pair here so it matches the Home .m-stat-grid rhythm
     instead of stacking into two full-width cards. */
  body[data-role="teacher"] .stu-sum-grid,
  body[data-role="parent"] .stu-sum-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--m-space-3) !important;
  }

  /* Status filter chips (Homework/Assignments quick filters, etc.) —
     already wrap (never scroll), just needs a comfortable tap height. */
  body[data-role="teacher"] .asgn-parent-chips .asgn-chip,
  body[data-role="parent"] .asgn-parent-chips .asgn-chip,
  body[data-role="teacher"] .asgn-chip-row .asgn-chip,
  body[data-role="parent"] .asgn-chip-row .asgn-chip {
    height: 36px;
    padding: 0 var(--m-space-4) !important;
    font-size: 0.8rem !important;
    font-weight: 600;
  }

  /* Academic Performance — charts + matrix fit the phone card (no clip / fat bars). */
  body[data-role="parent"] .perf-parent-charts,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-charts {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--m-space-3) !important;
    width: 100%;
    min-width: 0;
  }
  body[data-role="parent"] .perf-parent-charts .stu-ov-card,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-charts .stu-ov-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    padding: var(--m-space-4) !important;
  }
  body[data-role="parent"] .perf-parent-charts .chart-box,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-charts .chart-box {
    height: 240px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  body[data-role="parent"] .perf-parent-charts .chart-box::after,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-charts .chart-box::after {
    display: none !important;
  }
  body[data-role="parent"] .perf-parent-charts .apexcharts-canvas,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-charts .apexcharts-canvas,
  body[data-role="parent"] .perf-parent-charts .apexcharts-svg,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-charts .apexcharts-svg {
    max-width: 100% !important;
  }
  body[data-role="parent"] .perf-parent-matrix,
  body[data-role="parent"] .perf-matrix-wrap.perf-parent-matrix,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-matrix {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: min(55vh, 420px) !important;
    border-radius: var(--m-radius-lg) !important;
  }
  /* Full screen: lift the mobile max-height clamp so the matrix can use the viewport. */
  body[data-role="parent"] #parSchoolSheetCard.perf-csp-fullcard .perf-parent-matrix,
  body[data-role="parent"] #parSchoolSheetCard.perf-csp-fullcard.perf-parent-matrix,
  body.perf-csp-fullscreen-open #parSchoolSheetCard.perf-csp-fullcard .perf-parent-matrix {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0 !important;
  }
  body[data-role="parent"] #parSchoolSheetCard.perf-csp-fullcard {
    z-index: 2100;
  }
  body.perf-csp-fullscreen-open .m-topbar,
  body.perf-csp-fullscreen-open .m-bottomnav,
  body.perf-csp-fullscreen-open .m-fab {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body[data-role="parent"] .perf-parent-school-card__actions .btn-isa {
    min-height: 36px;
    white-space: nowrap;
  }
  body[data-role="parent"] .perf-parent-matrix .perf-matrix,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-matrix .perf-matrix {
    min-width: 520px;
    font-size: 0.78rem !important;
  }
  body[data-role="parent"] .perf-parent-matrix .perf-matrix th,
  body[data-role="parent"] .perf-parent-matrix .perf-matrix td,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-matrix .perf-matrix th,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-matrix .perf-matrix td {
    padding: 6px 7px !important;
    min-width: 72px;
  }
  body[data-role="parent"] .perf-parent-matrix .perf-sticky-col,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-matrix .perf-sticky-col {
    min-width: 112px !important;
  }
  body[data-role="parent"] .perf-parent-inst-panel .adm-work-row,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-panel .adm-work-row {
    min-width: 0;
  }
  body[data-role="parent"] .perf-parent-inst-panel,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-panel {
    overflow: hidden;
    max-width: 100%;
  }

  /* Institute tests filter — compact 2×2 (Subject|Exam / Show|Clear)
     instead of stacking every control full-width. */
  body[data-role="parent"] .perf-parent-inst-filter.adm-filter-bar,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-filter.adm-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--m-space-2) !important;
    padding: var(--m-space-3) !important;
    align-items: stretch;
  }
  body[data-role="parent"] .perf-parent-inst-filter .adm-filter-fields,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-filter .adm-filter-fields {
    display: contents !important;
    width: auto !important;
  }
  body[data-role="parent"] .perf-parent-inst-filter .adm-filter-fields > .isa-ss,
  body[data-role="parent"] .perf-parent-inst-filter .adm-filter-fields > .adm-filter-control,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-filter .adm-filter-fields > .isa-ss,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-filter .adm-filter-fields > .adm-filter-control {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
  }
  body[data-role="parent"] .perf-parent-inst-filter .adm-filter-actions,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-filter .adm-filter-actions {
    width: auto !important;
    display: flex !important;
    align-items: stretch;
    margin: 0 !important;
  }
  body[data-role="parent"] .perf-parent-inst-filter .adm-filter-actions .btn-isa,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-filter .adm-filter-actions .btn-isa {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 40px !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
  }
  body[data-role="parent"] .perf-parent-inst-filter .perf-inst-clear-label,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-filter .perf-inst-clear-label {
    margin-left: 4px;
  }

  /* Institute test cards — denser list rows (score hero right, meta + bar below). */
  body[data-role="parent"] .perf-parent-test-row,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "id marks" "score score" "target target" !important;
    gap: 8px 12px !important;
    align-items: start !important;
    padding: 12px 12px 12px 14px !important;
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1);
    position: relative;
    overflow: hidden;
  }
  body[data-role="parent"] .perf-parent-test-row::before,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #94a3b8;
  }
  body[data-role="parent"] .perf-parent-test-row.is-excellent::before,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-row.is-excellent::before {
    background: #10b981;
  }
  body[data-role="parent"] .perf-parent-test-row.is-good::before,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-row.is-good::before {
    background: #0ea5e9;
  }
  body[data-role="parent"] .perf-parent-test-row.is-warn::before,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-row.is-warn::before {
    background: #f59e0b;
  }
  body[data-role="parent"] .perf-parent-test-row.is-crit::before,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-row.is-crit::before,
  body[data-role="parent"] .perf-parent-test-row.is-ab::before,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-row.is-ab::before {
    background: #ef4444;
  }
  body[data-role="parent"] .perf-parent-test-id,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-id {
    grid-area: id !important;
    grid-column: auto !important;
    min-width: 0;
    padding-right: 4px;
  }
  body[data-role="parent"] .perf-parent-test-id strong,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-id strong {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
  body[data-role="parent"] .perf-parent-test-tags,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-tags {
    margin-top: 5px !important;
    gap: 6px !important;
  }
  body[data-role="parent"] .perf-parent-test-type,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-type {
    margin-top: 0 !important;
    padding: 2px 7px !important;
    font-size: 0.65rem !important;
  }
  body[data-role="parent"] .perf-parent-test-when,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-when {
    display: inline !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--isa-text-muted) !important;
    padding: 0 !important;
    background: none !important;
  }
  body[data-role="parent"] .perf-parent-test-when::before,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-when::before {
    content: "\00B7"; /* · middot — ASCII escape avoids encoding mojibake */
    margin-right: 6px;
    color: #cbd5e1;
  }
  body[data-role="parent"] .perf-parent-test-date,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-date {
    display: none !important;
  }
  body[data-role="parent"] .perf-parent-test-marks,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-marks {
    grid-area: marks !important;
    text-align: right;
  }
  body[data-role="parent"] .perf-parent-test-marks > em,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-marks > em,
  body[data-role="parent"] .perf-parent-test-score > em,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-score > em {
    display: none !important;
  }
  body[data-role="parent"] .perf-parent-test-marks .perf-heat-chip,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-marks .perf-heat-chip {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 2px !important;
    padding: 8px 10px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    min-width: 3.6rem;
    justify-content: center;
  }
  body[data-role="parent"] .perf-parent-test-marks .perf-heat-chip em,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-marks .perf-heat-chip em {
    font-size: 0.68rem !important;
    font-weight: 650 !important;
  }
  body[data-role="parent"] .perf-parent-test-score,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-score {
    grid-area: score !important;
    grid-column: auto !important;
    min-width: 0;
  }
  body[data-role="parent"] .perf-parent-test-result,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-result {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body[data-role="parent"] .perf-parent-test-result > strong,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-result > strong {
    font-size: 0.88rem !important;
    min-width: 2.4rem;
  }
  body[data-role="parent"] .perf-parent-test-bar,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-bar {
    height: 6px !important;
  }
  body[data-role="parent"] .perf-parent-test-target,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-target {
    grid-area: target !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(148, 163, 184, 0.28);
    margin: 0 !important;
  }
  body[data-role="parent"] .perf-parent-test-target em,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-target em {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 0.65rem !important;
  }
  body[data-role="parent"] .perf-parent-test-target strong,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-target strong {
    font-size: 0.9rem !important;
  }
  body[data-role="parent"] .perf-parent-test-target small,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-test-target small {
    margin-left: auto;
    font-size: 0.72rem !important;
  }
  body[data-role="parent"] .perf-parent-inst-panel > .adm-work-list,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-inst-panel > .adm-work-list {
    gap: 10px !important;
    padding: 10px !important;
  }

  /* Next Test Target — 1 & 2 in a row; 3 spans below from 1→2. */
  body[data-role="parent"] .perf-parent-targets,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-targets {
    margin-top: 0 !important;
  }
  body[data-role="parent"] .perf-parent-target-panel__head,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 4px 8px !important;
    padding: 12px 12px 0 !important;
  }
  body[data-role="parent"] .perf-parent-target-panel__head .adm-panel-kicker,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel__head .adm-panel-kicker {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }
  body[data-role="parent"] .perf-parent-target-panel__head .perf-parent-target-chip,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel__head .perf-parent-target-chip {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    max-width: 9rem !important;
  }
  body[data-role="parent"] .perf-parent-target-panel__head .perf-section-title,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel__head .perf-section-title {
    grid-column: 1 / -1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  body[data-role="parent"] .perf-parent-target-panel__head .adm-focus-text,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel__head .adm-focus-text {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
    overflow: visible;
    text-overflow: unset;
    margin: 0 !important;
    line-height: 1.35;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-ladder,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-ladder {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 8px 6px !important;
    padding: 10px 8px !important;
    margin: 10px 8px 12px !important;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-connector,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-connector {
    transform: none !important;
    justify-self: center;
    padding: 0 !important;
  }
  /* Hide the 2→3 arrow; gap sits on the next row instead. */
  body[data-role="parent"] .perf-parent-target-panel .perf-target-connector:nth-child(4),
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-connector:nth-child(4) {
    display: none !important;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-step,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-step {
    padding: 12px 8px 10px !important;
    gap: 2px !important;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-step.is-gap,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-step.is-gap {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px 12px !important;
    padding: 14px 12px 12px !important;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-step.is-gap .perf-target-step__badge,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-step.is-gap .perf-target-step__badge {
    left: 12px;
    transform: none;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-step.is-gap em,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-step.is-gap em {
    margin-top: 0 !important;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-step em,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-step em {
    font-size: 0.58rem !important;
    letter-spacing: 0.04em !important;
    margin-top: 4px !important;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-step strong,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-step strong {
    font-size: 1.25rem !important;
  }
  body[data-role="parent"] .perf-parent-target-panel .perf-target-step small,
  body[data-role="teacher"] .perf-parent-desk .perf-parent-target-panel .perf-target-step small {
    font-size: 0.62rem !important;
    line-height: 1.25;
  }

  /* Academic / Syllabus status chips — same tap height as Homework. */
  body[data-role="parent"] .atr-chip,
  body[data-role="teacher"] .atr-chip,
  body[data-role="parent"] .perf-tab-chips .stu-tab,
  body[data-role="parent"] .perf-heat-chip,
  body[data-role="teacher"] .perf-heat-chip {
    min-height: 36px;
    padding: 6px 12px !important;
    border-radius: var(--m-radius-pill) !important;
    font-size: 0.78rem !important;
  }

  /* Syllabus (Child Progress) KPI cards — 2-up on phones (academy-tracker.css
     collapses to 1-col below 480px, which stacks all 6 full-width). */
  body[data-role="parent"] .atr-parent-desk .atr-kpi-grid,
  body[data-role="parent"] .atr-parent-desk .atr-kpi-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="parent"] .atr-parent-desk .atr-snap-kpi,
  body[data-role="parent"] .atr-parent-desk .atr-kpi {
    min-height: 0 !important;
    padding: var(--m-space-3) !important;
  }
  body[data-role="parent"] .atr-parent-desk .atr-snap-kpi__value,
  body[data-role="parent"] .atr-parent-desk .atr-kpi__value {
    font-size: 1.35rem !important;
  }

  /* Academic roadmap — centered dialog on phone (not a bottom-submerged sheet). */
  body[data-role="parent"] .atr-roadmap-modal .modal-dialog {
    margin: 1.1rem auto !important;
    max-width: calc(100vw - 1.5rem) !important;
    min-height: auto !important;
    height: auto !important;
    align-items: center !important;
    display: flex !important;
  }
  body[data-role="parent"] .atr-roadmap-modal .modal-content {
    border-radius: var(--m-radius-xl) !important;
    min-height: 0 !important;
    max-height: min(86vh, calc(100vh - 2.2rem)) !important;
    width: 100%;
  }
  body[data-role="parent"] .atr-roadmap-modal .modal-footer {
    display: none !important;
  }
  body[data-role="parent"] .atr-roadmap-modal .atr-modal .modal-header {
    padding: 0.75rem 1rem !important;
  }
  body[data-role="parent"] .atr-roadmap-modal .atr-modal .modal-body {
    padding: 0.75rem 0.85rem 0.9rem !important;
    max-height: min(68vh, calc(100vh - 10rem)) !important;
    overflow-y: auto !important;
  }

  /* Study materials list cards → hist-card density. */
  body[data-role="parent"] .sm-parent-desk .sm-material-card,
  body[data-role="parent"] .sm-parent-desk .sm-mini-row {
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1);
  }

  /* Study Materials — search bar stays; filters are sheet-only from the hub button. */
  body[data-role="parent"] .sm-parent-desk #mSmLibControl,
  body[data-role="parent"] .sm-parent-desk .m-sm-lib-control {
    display: none !important;
  }
  body[data-role="parent"] #mSmParentHub {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 8px 0 4px !important;
  }
  body[data-role="parent"] #mSmParentHub .m-dct-head,
  body[data-role="parent"] #mSmParentHub .m-dct-chips,
  body[data-role="parent"] #mSmParentHub .m-dct-qa-section,
  body[data-role="parent"] #mSmParentHub .m-section {
    margin-bottom: 0 !important;
  }
  body[data-role="parent"] #mSmParentHub .m-sm-parent-pulse {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--m-space-4);
    border-radius: var(--m-radius-xl);
    background: var(--isa-surface-solid);
    border: 1px solid var(--isa-border);
    box-shadow: var(--m-elevation-2);
  }
  body[data-role="parent"] #mSmParentHub .m-sm-parent-pulse .m-dct-head {
    margin: 0;
    padding: 0;
  }
  body[data-role="parent"] #mSmParentHub .m-sm-parent-pulse .m-dct-qa-section {
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--isa-border);
  }
  body[data-role="parent"] #mSmParentHub .m-sm-parent-pulse .m-section-head {
    margin-bottom: 10px;
  }
  body[data-role="parent"] #mSmParentHub .m-dct-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
  }
  body[data-role="parent"] #mSmParentHub .m-dct-chip {
    min-height: 70px;
  }
  body[data-role="parent"] #mSmParentHub .m-sm-parent-filters-btn {
    display: flex !important;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 12px !important;
    position: relative;
  }
  body[data-role="parent"] .sm-parent-filter--compact {
    gap: var(--m-space-3) !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .sm-lib-toolbar-fields {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: var(--m-space-2) !important;
    width: 100% !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .sm-lib-filters-btn {
    flex: 0 0 auto !important;
    height: 42px !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 6px;
    position: relative;
  }
  body[data-role="parent"] .sm-parent-filter--compact .sm-lib-toolbar-fields > .isa-ss,
  body[data-role="parent"] .sm-parent-filter--compact .sm-lib-toolbar-fields > #libSort,
  body[data-role="parent"] .sm-parent-filter--compact .sm-lib-toolbar-fields > .adm-filter-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body[data-role="parent"] .sm-lib-filters-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--m-radius-pill);
    background: var(--isa-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
  }
  body[data-role="parent"] .sm-lib-filters-badge[hidden] {
    display: none !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .adm-filter-actions {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-space-2) !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .adm-filter-actions .sm-view-toggle {
    flex: 0 0 auto;
  }
  body[data-role="parent"] .sm-parent-filter--compact .adm-filter-actions .sm-view-toggle .btn-isa {
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .adm-filter-actions .sm-lib-refresh-btn {
    flex: 0 0 auto !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .sm-lib-refresh-label {
    display: none !important;
  }
  body[data-role="parent"] .sm-lib-filters-sheet .m-sheet-body {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-2);
    padding-bottom: var(--m-space-3);
  }
  body[data-role="parent"] .sm-lib-filters-sheet .sm-lib-filter-label {
    margin: var(--m-space-2) 0 0;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--isa-text-secondary);
  }
  body[data-role="parent"] .sm-lib-filters-sheet .sm-lib-filter-label:first-child {
    margin-top: 0;
  }
  body[data-role="parent"] .sm-lib-filters-sheet .adm-filter-control,
  body[data-role="parent"] .sm-lib-filters-sheet .isa-ss {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: 48px !important;
    max-height: 48px !important;
  }
  body[data-role="parent"] .sm-lib-filters-sheet .isa-ss {
    height: auto !important;
    max-height: none !important;
  }
  body[data-role="parent"] .sm-lib-filters-sheet .isa-ss-trigger {
    height: 48px !important;
  }
  body[data-role="parent"] .sm-lib-filters-foot {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--m-safe-b));
    border-top: 1px solid var(--isa-border);
    background: var(--isa-surface-solid);
    flex: 0 0 auto;
  }
  body[data-role="parent"] .sm-lib-filters-foot .btn-isa {
    min-height: 48px;
    border-radius: 12px !important;
    justify-content: center;
  }
  /* Sheet already has padding-bottom for safe area — foot owns it instead. */
  body[data-role="parent"] .sm-lib-filters-sheet.m-sheet,
  body[data-role="parent"] #mLibFiltersSheet.m-csp-filters-sheet.m-sheet {
    display: flex !important;
    padding-bottom: 0;
    z-index: 2000;
  }

  /* ---- Material detail (parent + teacher) — phone-first, no horizontal overflow ---- */
  body[data-role="parent"] .sm-detail-desk,
  body[data-role="teacher"] .sm-detail-desk {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
    padding-bottom: var(--m-space-6) !important;
    box-sizing: border-box;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-hero,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px !important;
    border-radius: var(--m-radius-xl) !important;
    margin-bottom: var(--m-space-3) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-hero__top,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-hero__top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-hero__aside:not([hidden]),
  body[data-role="teacher"] .sm-detail-desk .sm-detail-hero__aside:not([hidden]) {
    display: block !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-lib-hero__eyebrow,
  body[data-role="teacher"] .sm-detail-desk .sm-lib-hero__eyebrow {
    font-size: 0.68rem !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-lib-hero__title,
  body[data-role="teacher"] .sm-detail-desk .sm-lib-hero__title {
    font-size: 1.22rem !important;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
    overflow-wrap: anywhere;
  }
  body[data-role="parent"] .sm-detail-desk .sm-lib-hero__text,
  body[data-role="teacher"] .sm-detail-desk .sm-lib-hero__text {
    font-size: 0.78rem !important;
    color: var(--isa-text-muted) !important;
    margin: 0 !important;
  }
  /* Sticky Download + icon Edit — hide stretched hero button row */
  body[data-role="parent"] .sm-detail-desk .sm-lib-hero__actions,
  body[data-role="teacher"] .sm-detail-desk .sm-lib-hero__actions {
    display: none !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-lib-hero__actions .sm-detail-dl-dup,
  body[data-role="teacher"] .sm-detail-desk .sm-lib-hero__actions .sm-detail-dl-dup,
  body[data-role="parent"] .sm-detail-desk .sm-lib-hero__actions .sm-detail-back-dup,
  body[data-role="teacher"] .sm-detail-desk .sm-lib-hero__actions .sm-detail-back-dup,
  body[data-role="parent"] .sm-detail-desk .sm-detail-dl-dup,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-dl-dup {
    display: none !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-sticky:not([hidden]),
  body[data-role="teacher"] .sm-detail-desk .sm-detail-sticky:not([hidden]) {
    display: flex !important;
  }
  body[data-role="parent"] .sm-detail-hero__chips,
  body[data-role="teacher"] .sm-detail-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
  }
  body[data-role="parent"] .sm-detail-chip,
  body[data-role="teacher"] .sm-detail-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: var(--m-radius-pill);
    background: rgba(var(--isa-soft-rgb), 0.95);
    border: 1px solid var(--isa-border);
    color: var(--isa-text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
  }
  body[data-role="parent"] .sm-detail-chip--type,
  body[data-role="teacher"] .sm-detail-chip--type {
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.22);
    color: #047857;
  }

  body[data-role="parent"] .sm-detail-desk .sm-detail-layout,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-3) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-main,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-main,
  body[data-role="parent"] .sm-detail-desk .sm-detail-side,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-side {
    display: contents !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--preview,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--preview { order: 1; }
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--summary,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--summary { order: 2; }
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--related > .sm-panel,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--related > .sm-panel { order: 3; }
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--versions,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--versions { order: 4; }
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--preview,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--preview,
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--summary,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--summary,
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--versions,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--versions,
  body[data-role="parent"] .sm-detail-desk .sm-detail-block--related > .sm-panel,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-block--related > .sm-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
    padding: var(--m-space-4) !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }
  body[data-role="parent"] .sm-detail-desk .sm-panel__head,
  body[data-role="teacher"] .sm-detail-desk .sm-panel__head {
    margin-bottom: var(--m-space-3) !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-section-title,
  body[data-role="teacher"] .sm-detail-desk .sm-section-title,
  body[data-role="parent"] .sm-detail-desk .perf-section-title,
  body[data-role="teacher"] .sm-detail-desk .perf-section-title {
    font-size: 1rem !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-section-sub,
  body[data-role="teacher"] .sm-detail-desk .sm-section-sub {
    display: none !important;
  }

  body[data-role="parent"] .sm-detail-desk .sm-detail-summary,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-summary .sm-field--wide,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-summary .sm-field--wide {
    grid-column: 1 / -1;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-summary dt,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-summary dt {
    font-size: 0.66rem !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-detail-summary dd,
  body[data-role="teacher"] .sm-detail-desk .sm-detail-summary dd {
    font-size: 0.86rem !important;
    word-break: break-word;
  }

  /* Preview shell — contained, centered, never wider than card */
  body[data-role="parent"] .sm-detail-desk .sm-preview-frame,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-frame,
  body[data-role="parent"] .sm-detail-desk .sm-preview-shell,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-sizing: border-box !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-toolbar,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--m-space-2) !important;
    padding: var(--m-space-3) !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-toolbar__actions,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-toolbar__actions {
    display: flex !important;
    gap: var(--m-space-2) !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-toolbar__actions .btn-isa,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-toolbar__actions .btn-isa {
    flex: 1 1 0 !important;
    justify-content: center !important;
    height: 40px !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-body,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-body {
    min-height: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #0f172a;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-body iframe,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-body iframe {
    width: 100% !important;
    min-height: 240px !important;
    max-height: 50vh !important;
  }
  /* Video player — 16:9 box centered in the dark frame (previous look) */
  body[data-role="parent"] .sm-detail-desk .sm-preview-media-wrap--video,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-media-wrap--video {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #0f172a !important;
    overflow: hidden;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-media-wrap--video video,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-media-wrap--video video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 42vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    object-position: center !important;
    background: #000 !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-fallback,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-fallback {
    padding: var(--m-space-5) var(--m-space-4) !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-preview-fallback__actions .btn-isa,
  body[data-role="teacher"] .sm-detail-desk .sm-preview-fallback__actions .btn-isa {
    width: 100%;
    justify-content: center;
  }

  body[data-role="parent"] .sm-detail-desk .sm-mini-row,
  body[data-role="teacher"] .sm-detail-desk .sm-mini-row {
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--isa-border) !important;
    padding: var(--m-space-3) !important;
    gap: var(--m-space-3) !important;
    min-width: 0;
  }
  body[data-role="parent"] .sm-detail-desk .sm-mini-list,
  body[data-role="teacher"] .sm-detail-desk .sm-mini-list {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-2);
  }

  body[data-role="parent"] .sm-detail-desk .sm-version-item__body,
  body[data-role="teacher"] .sm-detail-desk .sm-version-item__body {
    padding: var(--m-space-3) !important;
    border-radius: var(--m-radius-md) !important;
  }
  body[data-role="parent"] .sm-detail-desk .sm-version-item__actions .btn-isa,
  body[data-role="teacher"] .sm-detail-desk .sm-version-item__actions .btn-isa {
    width: 100%;
    justify-content: center;
  }

  body[data-role="parent"] .sm-detail-desk .sm-detail-block--parent-hide {
    display: none !important;
  }

  /* My Profile (parent/teacher self desk) — stack like Home identity card. */
  body[data-role="parent"] .um-self-hero,
  body[data-role="teacher"] .um-self-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-4) !important;
    padding: var(--m-space-5) !important;
    border-radius: var(--m-radius-xl) !important;
    border: 1px solid var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-2);
  }
  body[data-role="parent"] .um-self-hero__glow,
  body[data-role="teacher"] .um-self-hero__glow {
    display: none !important;
  }
  /* Keep avatar + name on one row (Home identity card), not a stacked column. */
  body[data-role="parent"] .um-self-hero__main,
  body[data-role="teacher"] .um-self-hero__main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--m-space-3) !important;
    min-width: 0 !important;
  }
  /* Same 58px filled circle as Home `.m-hero-avatar` — image must cover fully
     or the brand-green avatar fill shows as a crescent (live mobile bug). */
  body[data-role="parent"] .um-self-avatar,
  body[data-role="teacher"] .um-self-avatar {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    border: none !important;
    box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.35) !important;
    background: var(--isa-grad-brand) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    isolation: isolate;
  }
  body[data-role="parent"] .um-self-avatar img,
  body[data-role="teacher"] .um-self-avatar img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    box-shadow: none !important;
  }
  body[data-role="parent"] .um-self-avatar > span,
  body[data-role="teacher"] .um-self-avatar > span {
    position: relative !important;
    z-index: 1 !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
  }
  body[data-role="parent"] .um-self-spots,
  body[data-role="teacher"] .um-self-spots {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--m-space-2) !important;
  }
  body[data-role="parent"] .um-self-spot,
  body[data-role="teacher"] .um-self-spot {
    border-radius: var(--m-radius-md) !important;
    background: var(--isa-bg) !important;
    padding: var(--m-space-3) !important;
  }

  /* Session insight — chip row, full-width CTA */
  body[data-role="parent"] .um-self-login,
  body[data-role="teacher"] .um-self-login {
    gap: var(--m-space-3) !important;
    padding: var(--m-space-4) !important;
    border-radius: var(--m-radius-xl) !important;
    border: 1px solid var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  }
  body[data-role="parent"] .um-self-login__top,
  body[data-role="teacher"] .um-self-login__top {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: var(--m-space-3) !important;
    align-items: start !important;
  }
  body[data-role="parent"] .um-self-login__icon,
  body[data-role="teacher"] .um-self-login__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  body[data-role="parent"] .um-self-login__copy,
  body[data-role="teacher"] .um-self-login__copy {
    grid-column: 2 !important;
  }
  body[data-role="parent"] .um-self-login__when,
  body[data-role="teacher"] .um-self-login__when {
    margin-top: 6px !important;
  }
  body[data-role="parent"] .um-self-login__when strong,
  body[data-role="teacher"] .um-self-login__when strong {
    font-size: 0.92rem !important;
  }
  body[data-role="parent"] .um-self-login__cta,
  body[data-role="teacher"] .um-self-login__cta {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
    border-radius: var(--m-radius-pill) !important;
  }
  body[data-role="parent"] .um-self-login__chips,
  body[data-role="teacher"] .um-self-login__chips {
    padding-left: 0 !important;
    gap: 6px !important;
  }
  body[data-role="parent"] .um-self-login__chip,
  body[data-role="teacher"] .um-self-login__chip {
    color: var(--isa-text) !important;
    background: color-mix(in srgb, #94a3b8 14%, var(--isa-surface-strong)) !important;
    border-color: color-mix(in srgb, #94a3b8 28%, var(--isa-border)) !important;
    font-size: 0.72rem !important;
  }
  body[data-role="parent"] .um-self-hero__actions,
  body[data-role="teacher"] .um-self-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--m-space-2) !important;
  }
  body[data-role="parent"] .um-self-hero__actions .btn-isa,
  body[data-role="teacher"] .um-self-hero__actions .btn-isa {
    flex: 1 1 40% !important;
    min-width: 40% !important;
    height: 40px !important;
    justify-content: center !important;
    border-radius: var(--m-radius-pill) !important;
  }
  body[data-role="parent"] .um-self-hero__actions .btn-isa-primary,
  body[data-role="teacher"] .um-self-hero__actions .btn-isa-primary {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    order: -1;
  }
  /* Change Password / Profile / Activity — sliding segment full width */
  body[data-role="parent"] .um-seg,
  body[data-role="teacher"] .um-seg {
    max-width: none !important;
    width: 100% !important;
    margin-bottom: var(--m-space-4) !important;
  }
  body[data-role="parent"] .um-seg__tab,
  body[data-role="teacher"] .um-seg__tab {
    min-height: 42px !important;
    font-size: 0.82rem !important;
  }

  body[data-role="parent"] .um-self-tabs,
  body[data-role="teacher"] .um-self-tabs {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: var(--m-space-2) 0 !important;
  }

  /* Student Profile tab strip — teacher + parent: one-row Instagram-style
     scroller. Real fade chips (not ::after) signal "swipe for more". */
  body[data-role="parent"] .stu-profile-tabs-shell {
    position: relative;
  }
  body[data-role="parent"] .stu-profile-tabs-fade {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  body[data-role="parent"] .stu-profile-tabs-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--isa-bg), transparent);
  }
  body[data-role="parent"] .stu-profile-tabs-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--isa-bg), transparent);
  }
  body[data-role="parent"] .stu-profile-tabs-shell.has-more-left .stu-profile-tabs-fade--left,
  body[data-role="parent"] .stu-profile-tabs-shell.has-more-right .stu-profile-tabs-fade--right {
    opacity: 1 !important;
  }
  body[data-role="teacher"] .stu-profile-nav,
  body[data-role="parent"] .stu-profile-nav {
    padding: var(--m-space-3) var(--m-space-4) !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--isa-border) !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  /* Fees desk (bottom-nav → ?tab=fees): hide the profile tab scroller —
     parents land straight on Fees and don't need Overview/Family/etc. */
  body[data-role="parent"] #profileTabs.is-fees-only,
  body[data-role="parent"] #profileTabsShell:has(#profileTabs.is-fees-only) {
    display: none !important;
  }
  body[data-role="teacher"] .stu-profile-nav::-webkit-scrollbar,
  body[data-role="parent"] .stu-profile-nav::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
  body[data-role="teacher"] .stu-tab,
  body[data-role="parent"] .stu-tab {
    height: 38px;
    padding: 0 var(--m-space-4) !important;
    font-size: 0.82rem !important;
    border-radius: var(--m-radius-pill) !important;
  }
  body[data-role="teacher"] .stu-tab.is-active,
  body[data-role="parent"] .stu-tab.is-active {
    background: var(--isa-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* ---- Fees tab (Student Profile — parents' ONLY fee surface, see
     parent-portal-handoff rule) — .stu-fee-* is its own component family,
     not shared with .stu-sum-card/.stu-hist-card, so it needs its own
     pass. Content already avoids nowrap rows (flex-wrap everywhere), the
     one real problem is the 4-across summary grid, far too cramped on a
     phone; everything else just needs the same card language (bigger
     radius, soft shadow instead of a thin hairline border) as the rest of
     the app. ---- */
  body[data-role="teacher"] .stu-fee-summary,
  body[data-role="parent"] .stu-fee-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="teacher"] .stu-fee-stat,
  body[data-role="parent"] .stu-fee-stat,
  body[data-role="teacher"] .stu-fee-account,
  body[data-role="parent"] .stu-fee-account,
  body[data-role="teacher"] .stu-fee-emi,
  body[data-role="parent"] .stu-fee-emi,
  body[data-role="teacher"] .stu-fee-pay,
  body[data-role="parent"] .stu-fee-pay {
    border-radius: var(--m-radius-lg) !important;
    border-color: var(--isa-border) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .stu-fee-head,
  body[data-role="parent"] .stu-fee-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body[data-role="teacher"] .stu-fee-head-actions,
  body[data-role="parent"] .stu-fee-head-actions {
    width: 100%;
  }
  body[data-role="teacher"] .stu-fee-head-actions .btn-isa,
  body[data-role="parent"] .stu-fee-head-actions .btn-isa,
  body[data-role="teacher"] .stu-pay-online,
  body[data-role="parent"] .stu-pay-online {
    flex: 1 1 auto !important;
    height: 42px !important;
    justify-content: center !important;
  }
  /* Account/EMI/payment rows read as a label+value pair on desktop
     (title left, amount right in one row) — on a narrow card that pair
     wraps into two visually disconnected lines; stack each row's own
     head/side block so amount always sits directly under its own label. */
  body[data-role="teacher"] .stu-fee-account-top,
  body[data-role="parent"] .stu-fee-account-top {
    flex-direction: column !important;
  }
  body[data-role="teacher"] .stu-fee-account-due,
  body[data-role="parent"] .stu-fee-account-due {
    text-align: left !important;
  }
  body[data-role="teacher"] .stu-fee-emi,
  body[data-role="parent"] .stu-fee-emi,
  body[data-role="teacher"] .stu-fee-pay,
  body[data-role="parent"] .stu-fee-pay {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body[data-role="teacher"] .stu-fee-emi-side,
  body[data-role="parent"] .stu-fee-emi-side,
  body[data-role="teacher"] .stu-fee-pay-side,
  body[data-role="parent"] .stu-fee-pay-side {
    justify-content: flex-start !important;
    width: 100%;
  }

}

/* Parent Study Materials — desktop/tablet-large: keep facet selects inline
   (sheet chrome hidden) so filters still work when .m-shell is off. */
@media (min-width: 993px) {
  body[data-role="parent"] .sm-lib-filters-btn {
    display: none !important;
  }
  body[data-role="parent"] #mLibFiltersSheet.sm-lib-filters-sheet {
    display: block !important;
    position: static !important;
    transform: none !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 10px;
  }
  body[data-role="parent"] #mLibFiltersSheet .m-sheet-handle,
  body[data-role="parent"] #mLibFiltersSheet .m-sheet-head,
  body[data-role="parent"] #mLibFiltersSheet .sm-lib-filters-foot {
    display: none !important;
  }
  body[data-role="parent"] #mLibFiltersSheet .m-sheet-body {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    overflow: visible !important;
    padding: 0 !important;
  }
  body[data-role="parent"] #mLibFiltersSheet .sm-lib-filter-label {
    display: none !important;
  }
  body[data-role="parent"] #mLibFiltersSheet .adm-filter-control,
  body[data-role="parent"] #mLibFiltersSheet .isa-ss {
    width: 100% !important;
    max-width: none !important;
    height: 40px !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .sm-lib-refresh-label {
    display: inline !important;
  }
  body[data-role="parent"] .sm-parent-filter--compact .adm-filter-actions .sm-lib-refresh-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ---- Change Password (parent/teacher phone only) ---- */
  body[data-role="teacher"] .app-content:has(.m-pw-desk) > .page-header,
  body[data-role="parent"] .app-content:has(.m-pw-desk) > .page-header {
    display: none !important;
  }
  body[data-role="teacher"] .m-pw-desk,
  body[data-role="parent"] .m-pw-desk {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-b) + var(--m-space-6));
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-hero,
  body[data-role="parent"] .m-pw-desk .um-pw-hero {
    margin-bottom: var(--m-space-3) !important;
    border-radius: var(--m-radius-xl) !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1);
    overflow: hidden;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-hero__main,
  body[data-role="parent"] .m-pw-desk .um-pw-hero__main {
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--m-space-3) !important;
    padding: var(--m-space-4) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-hero__icon,
  body[data-role="parent"] .m-pw-desk .um-pw-hero__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-hero__icon svg,
  body[data-role="parent"] .m-pw-desk .um-pw-hero__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-self-hero__title,
  body[data-role="parent"] .m-pw-desk .um-self-hero__title {
    font-size: 1.15rem !important;
    margin: 0 !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-hero__lead,
  body[data-role="parent"] .m-pw-desk .um-pw-hero__lead {
    font-size: 0.78rem !important;
    margin-top: 4px !important;
    gap: 6px !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-hero__spots,
  body[data-role="parent"] .m-pw-desk .um-pw-hero__spots {
    display: none !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-self-tabs .um-self-tab.is-active,
  body[data-role="parent"] .m-pw-desk .um-self-tabs .um-self-tab.is-active,
  body[data-role="teacher"] .um-pw-desk > .um-self-tabs .um-self-tab.is-active,
  body[data-role="parent"] .um-pw-desk > .um-self-tabs .um-self-tab.is-active {
    background: var(--isa-surface-solid) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-alert,
  body[data-role="parent"] .m-pw-desk .um-pw-alert {
    padding: var(--m-space-3) !important;
    gap: var(--m-space-3) !important;
    border-radius: var(--m-radius-lg) !important;
    margin-bottom: var(--m-space-4) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-layout,
  body[data-role="parent"] .m-pw-desk .um-pw-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-form > .isa-card,
  body[data-role="parent"] .m-pw-desk .um-pw-form > .isa-card {
    border-radius: var(--m-radius-xl) !important;
    border: 1px solid var(--isa-border) !important;
    box-shadow: var(--m-elevation-1);
    padding: var(--m-space-4) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-form .isa-card-header,
  body[data-role="parent"] .m-pw-desk .um-pw-form .isa-card-header {
    padding: 0 0 var(--m-space-3) !important;
    margin-bottom: var(--m-space-3) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-form .isa-card-subtitle,
  body[data-role="parent"] .m-pw-desk .um-pw-form .isa-card-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-fields,
  body[data-role="parent"] .m-pw-desk .um-pw-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-4) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-input-wrap .isa-input,
  body[data-role="parent"] .m-pw-desk .um-pw-input-wrap .isa-input {
    height: 46px !important;
    font-size: 1rem !important;
  }
  body[data-role="teacher"] .m-pw-desk .isa-input-action,
  body[data-role="parent"] .m-pw-desk .isa-input-action {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-reqs,
  body[data-role="parent"] .m-pw-desk .um-pw-reqs {
    order: 0;
    padding: var(--m-space-3) !important;
    border-radius: var(--m-radius-lg) !important;
    background: rgba(var(--isa-soft-rgb), 0.95);
    border: 1px solid var(--isa-border);
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-form__actions,
  body[data-role="parent"] .m-pw-desk .um-pw-form__actions {
    position: static;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: var(--m-space-2) !important;
    margin-top: var(--m-space-4) !important;
    padding-top: var(--m-space-4) !important;
    border-top: 1px solid var(--isa-border) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-form__actions .btn-isa,
  body[data-role="parent"] .m-pw-desk .um-pw-form__actions .btn-isa {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-aside,
  body[data-role="parent"] .m-pw-desk .um-pw-aside {
    order: 3;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-3) !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-tip,
  body[data-role="parent"] .m-pw-desk .um-pw-tip {
    margin: 0 !important;
    padding: var(--m-space-3) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-elevation-1);
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-tip .isa-card-title,
  body[data-role="parent"] .m-pw-desk .um-pw-tip .isa-card-title {
    font-size: 0.9rem !important;
  }
  body[data-role="teacher"] .m-pw-desk .um-pw-tip__list,
  body[data-role="parent"] .m-pw-desk .um-pw-tip__list,
  body[data-role="teacher"] .m-pw-desk .um-pw-tip__text,
  body[data-role="parent"] .m-pw-desk .um-pw-tip__text {
    font-size: 0.78rem !important;
  }
}

/* Desktop safeguard: never let phone Change Password styles leak into
   parent/teacher desk at >=993px (form + tips two-column layout). */
@media (min-width: 993px) {
  body[data-role="parent"] .m-pw-desk,
  body[data-role="teacher"] .m-pw-desk {
    max-width: none !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
  }
  body[data-role="parent"] .m-pw-desk .um-pw-layout,
  body[data-role="teacher"] .m-pw-desk .um-pw-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    gap: 18px !important;
  }
  body[data-role="parent"] .m-pw-desk .um-pw-hero__spots,
  body[data-role="teacher"] .m-pw-desk .um-pw-hero__spots {
    display: flex !important;
  }
  body[data-role="parent"] .m-pw-desk .um-self-tabs,
  body[data-role="teacher"] .m-pw-desk .um-self-tabs {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: none !important;
    grid-template-columns: none !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, 0.04) !important;
    box-shadow: none !important;
  }
  body[data-role="parent"] .m-pw-desk .um-self-tabs .um-self-tab.is-active,
  body[data-role="teacher"] .m-pw-desk .um-self-tabs .um-self-tab.is-active {
    background: var(--isa-surface-solid) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  }
  body[data-role="parent"] .m-pw-desk .um-pw-form__actions,
  body[data-role="teacher"] .m-pw-desk .um-pw-form__actions {
    position: static !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    margin: 8px 0 0 !important;
    padding-top: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body[data-role="parent"] .m-pw-desk .um-pw-form__actions .btn-isa,
  body[data-role="teacher"] .m-pw-desk .um-pw-form__actions .btn-isa {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  body[data-role="parent"] .m-pw-desk .um-pw-aside,
  body[data-role="teacher"] .m-pw-desk .um-pw-aside {
    order: 0 !important;
  }

  /* My Activity — timeline feed cards (Home-style) */
  body[data-role="parent"] #umActivityPage .adm-focus-bar,
  body[data-role="teacher"] #umActivityPage .adm-focus-bar {
    padding: var(--m-space-3) var(--m-space-4) !important;
    border-radius: var(--m-radius-lg) !important;
  }
  body[data-role="parent"] #umActivityPage .adm-focus-steps,
  body[data-role="teacher"] #umActivityPage .adm-focus-steps,
  body[data-role="parent"] #umActivityPage .adm-focus-text,
  body[data-role="teacher"] #umActivityPage .adm-focus-text {
    display: none !important;
  }
  body[data-role="parent"] #umActivityPage .adm-focus-title,
  body[data-role="teacher"] #umActivityPage .adm-focus-title {
    font-size: 1rem !important;
    margin: 0 !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-panel,
  body[data-role="teacher"] #umActivityPage .um-act-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-list,
  body[data-role="teacher"] #umActivityPage .um-act-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-2) !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row,
  body[data-role="teacher"] #umActivityPage .um-act-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 12px 12px 8px !important;
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--isa-border) !important;
    background: var(--isa-surface-solid) !important;
    box-shadow: var(--m-elevation-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__av,
  body[data-role="teacher"] #umActivityPage .um-act-row__av,
  body[data-role="parent"] #umActivityPage .um-act-row__name,
  body[data-role="teacher"] #umActivityPage .um-act-row__name,
  body[data-role="parent"] #umActivityPage .um-act-row__mod,
  body[data-role="teacher"] #umActivityPage .um-act-row__mod,
  body[data-role="parent"] #umActivityPage .um-act-row__when,
  body[data-role="teacher"] #umActivityPage .um-act-row__when,
  body[data-role="parent"] #umActivityPage .um-act-row__facts--desk,
  body[data-role="teacher"] #umActivityPage .um-act-row__facts--desk,
  body[data-role="parent"] #umActivityPage .um-act-row__meta--desk,
  body[data-role="teacher"] #umActivityPage .um-act-row__meta--desk {
    display: none !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__time,
  body[data-role="teacher"] #umActivityPage .um-act-row__time {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    color: var(--isa-primary-fx) !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__time strong,
  body[data-role="teacher"] #umActivityPage .um-act-row__time strong {
    color: var(--isa-primary-fx) !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__rail,
  body[data-role="teacher"] #umActivityPage .um-act-row__rail {
    display: block !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__icon,
  body[data-role="teacher"] #umActivityPage .um-act-row__icon {
    display: flex !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__desc,
  body[data-role="teacher"] #umActivityPage .um-act-row__desc {
    margin-top: 4px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--isa-text, #0f172a) !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__chips,
  body[data-role="teacher"] #umActivityPage .um-act-row__chips {
    display: flex !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-chip,
  body[data-role="teacher"] #umActivityPage .um-act-chip {
    background: var(--isa-bg, #f8fafc) !important;
    border-color: var(--isa-border) !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__more,
  body[data-role="teacher"] #umActivityPage .um-act-row__more {
    display: block !important;
  }
  body[data-role="parent"] #umActivityPage .um-act-row__more > summary,
  body[data-role="teacher"] #umActivityPage .um-act-row__more > summary {
    color: var(--isa-primary-fx) !important;
    min-height: 28px;
  }
}