/* ============================================================
   SCHOOL — design system for the PortalXM school app suite
   /lib/com/school/school.css

   One token layer, two modes:
     .sch-app                          → light tokens (default)
     html[data-sch-mode="dark"] .sch-app → dark overrides

   Every class is prefixed sch- (never collides with Bootstrap 3).
   Hue helpers (.hue-*) power subject/category coloring in both
   modes. Screens compose these components; page CSS stays small.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@600;700;800&display=swap');

/* ============================================================
   1 · TOKENS
   ============================================================ */
.sch-app {
  /* surfaces */
  --s-bg: #f3f5fb;
  --s-surface: #ffffff;
  --s-surface-2: #f8fafd;
  --s-surface-3: #eef2f8;
  --s-glass: rgba(255, 255, 255, .82);

  /* ink */
  --s-ink: #0f172a;
  --s-ink-2: #334155;
  --s-mute: #64748b;
  --s-faint: #94a3b8;

  /* lines + depth */
  --s-border: #e2e8f0;
  --s-border-2: #eaeef5;
  --s-shadow: 0 8px 26px rgba(15, 23, 42, .07);
  --s-shadow-lg: 0 24px 64px rgba(15, 23, 42, .16);
  --s-shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);

  /* brand */
  --s-primary: #4f46e5;
  --s-primary-2: #7c3aed;
  --s-primary-ink: #4338ca;
  --s-primary-soft: #eef2ff;
  --s-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #9333ea 100%);
  --s-grad-gold: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);

  /* status */
  --s-good: #059669;
  --s-good-soft: #ecfdf5;
  --s-warn: #d97706;
  --s-warn-soft: #fffbeb;
  --s-bad: #e11d48;
  --s-bad-soft: #fff1f2;
  --s-info: #0284c7;
  --s-info-soft: #f0f9ff;
  --s-gold: #f59e0b;
  --s-gold-ink: #b45309;
  --s-gold-soft: #fef3c7;

  /* type + shape */
  --s-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --s-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --s-radius: 18px;
  --s-radius-sm: 12px;
  --s-radius-xs: 9px;

  /* shell metrics */
  --s-rail-w: 260px;
  --s-rail-w-sm: 84px;
  --s-topbar-h: 64px;
  --s-pagebar-h: 52px;
  --s-tabbar-h: 64px;

  font-family: var(--s-font);
  color: var(--s-ink);
  background: var(--s-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  line-height: 1.45;
  font-size: 14px;
  box-sizing: border-box;
}

html[data-sch-mode="dark"] .sch-app {
  --s-bg: #0a0f1e;
  --s-surface: #111a30;
  --s-surface-2: #0d1526;
  --s-surface-3: #172136;
  --s-glass: rgba(17, 26, 48, .86);

  --s-ink: #e8edf8;
  --s-ink-2: #c3cde0;
  --s-mute: #8d9bb5;
  --s-faint: #64748b;

  --s-border: #223052;
  --s-border-2: #1a2540;
  --s-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --s-shadow-lg: 0 28px 70px rgba(0, 0, 0, .55);
  --s-shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);

  --s-primary: #818cf8;
  --s-primary-2: #a78bfa;
  --s-primary-ink: #a5b4fc;
  --s-primary-soft: rgba(99, 102, 241, .16);
  --s-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #a21caf 100%);

  --s-good: #34d399;
  --s-good-soft: rgba(16, 185, 129, .13);
  --s-warn: #fbbf24;
  --s-warn-soft: rgba(245, 158, 11, .13);
  --s-bad: #fb7185;
  --s-bad-soft: rgba(225, 29, 72, .15);
  --s-info: #38bdf8;
  --s-info-soft: rgba(14, 165, 233, .13);
  --s-gold: #fbbf24;
  --s-gold-ink: #fcd34d;
  --s-gold-soft: rgba(245, 158, 11, .14);

  color-scheme: dark;
}

/* ambient backdrop */
.sch-app::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at 8% -6%, rgba(79, 70, 229, .07) 0%, transparent 60%),
    radial-gradient(760px 420px at 96% 4%, rgba(147, 51, 234, .06) 0%, transparent 55%);
}
html[data-sch-mode="dark"] .sch-app::before {
  background:
    radial-gradient(900px 480px at 8% -6%, rgba(99, 102, 241, .12) 0%, transparent 60%),
    radial-gradient(760px 420px at 96% 4%, rgba(168, 85, 247, .10) 0%, transparent 55%);
}

/* ============================================================
   2 · SCOPED RESET + BASICS
   ============================================================ */
.sch-app *, .sch-app *::before, .sch-app *::after { box-sizing: border-box; }
.sch-app h1, .sch-app h2, .sch-app h3, .sch-app h4, .sch-app p { margin: 0; }
.sch-app h1.sch-h, .sch-app h2.sch-h, .sch-app h3.sch-h {
  font-family: var(--s-display);
  letter-spacing: -.02em;
  color: var(--s-ink);
}
.sch-app img { max-width: 100%; }
.sch-app a { color: var(--s-primary-ink); text-decoration: none; }
.sch-app a:hover { text-decoration: none; }
.sch-app button { font-family: inherit; }
.sch-app ::selection { background: rgba(124, 58, 237, .22); }

.sch-app :focus-visible {
  outline: 2px solid var(--s-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

.sch-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.sch-app ::-webkit-scrollbar-thumb { background: var(--s-border); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.sch-app ::-webkit-scrollbar-track { background: transparent; }

.sch-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   3 · HUES  (subject / category coloring, mode-aware)
   Sets: --hue (strong), --hue-ink (text on soft), --hue-soft (tint)
   ============================================================ */
.hue-indigo { --hue: #4f46e5; --hue-ink: #4338ca; --hue-soft: #eef2ff; }
.hue-violet { --hue: #7c3aed; --hue-ink: #6d28d9; --hue-soft: #f5f3ff; }
.hue-pink   { --hue: #db2777; --hue-ink: #be185d; --hue-soft: #fdf2f8; }
.hue-rose   { --hue: #e11d48; --hue-ink: #be123c; --hue-soft: #fff1f2; }
.hue-amber  { --hue: #d97706; --hue-ink: #b45309; --hue-soft: #fffbeb; }
.hue-green  { --hue: #059669; --hue-ink: #047857; --hue-soft: #ecfdf5; }
.hue-teal   { --hue: #0d9488; --hue-ink: #0f766e; --hue-soft: #f0fdfa; }
.hue-blue   { --hue: #2563eb; --hue-ink: #1d4ed8; --hue-soft: #eff6ff; }
.hue-sky    { --hue: #0284c7; --hue-ink: #0369a1; --hue-soft: #f0f9ff; }
.hue-slate  { --hue: #475569; --hue-ink: #334155; --hue-soft: #f1f5f9; }

html[data-sch-mode="dark"] .hue-indigo { --hue: #818cf8; --hue-ink: #a5b4fc; --hue-soft: rgba(99,102,241,.16); }
html[data-sch-mode="dark"] .hue-violet { --hue: #a78bfa; --hue-ink: #c4b5fd; --hue-soft: rgba(139,92,246,.16); }
html[data-sch-mode="dark"] .hue-pink   { --hue: #f472b6; --hue-ink: #f9a8d4; --hue-soft: rgba(236,72,153,.16); }
html[data-sch-mode="dark"] .hue-rose   { --hue: #fb7185; --hue-ink: #fda4af; --hue-soft: rgba(225,29,72,.17); }
html[data-sch-mode="dark"] .hue-amber  { --hue: #fbbf24; --hue-ink: #fcd34d; --hue-soft: rgba(245,158,11,.15); }
html[data-sch-mode="dark"] .hue-green  { --hue: #34d399; --hue-ink: #6ee7b7; --hue-soft: rgba(16,185,129,.14); }
html[data-sch-mode="dark"] .hue-teal   { --hue: #2dd4bf; --hue-ink: #5eead4; --hue-soft: rgba(20,184,166,.14); }
html[data-sch-mode="dark"] .hue-blue   { --hue: #60a5fa; --hue-ink: #93c5fd; --hue-soft: rgba(59,130,246,.15); }
html[data-sch-mode="dark"] .hue-sky    { --hue: #38bdf8; --hue-ink: #7dd3fc; --hue-soft: rgba(14,165,233,.15); }
html[data-sch-mode="dark"] .hue-slate  { --hue: #94a3b8; --hue-ink: #cbd5e1; --hue-soft: rgba(100,116,139,.18); }

/* ============================================================
   4 · SHELL LAYOUT  (rail · topbar · main · tabbar · fab)
   ============================================================ */
/* The app frame owns its own scrolling: the frame fills the viewport,
   the full-width header + page bar are fixed grid rows, and only the
   content column (.sch-body) scrolls. This survives any host-page
   wrappers (portal overflow/transform ancestors would break
   viewport-sticky). */
.sch-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--s-topbar-h) var(--s-pagebar-h) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.sch-frame {
  display: grid;
  grid-template-columns: var(--s-rail-w) minmax(0, 1fr);
  min-height: 0;
}

/* ---- left rail ---- */
.sch-rail {
  min-height: 0;
  overflow-y: auto;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  background: var(--s-surface);
  border-right: 1px solid var(--s-border-2);
}
/* brand lives in the full-width header; long school names get the whole
   bar and truncate gracefully only when they must */
.sch-brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex-shrink: 1; margin-right: 6px; }
.sch-brand-ic {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  background: var(--s-grad);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .35);
}
.sch-brand-stack { min-width: 0; }
.sch-brand-name { display: block; font-family: var(--s-display); font-size: 15.5px; font-weight: 800; letter-spacing: -.015em; color: var(--s-ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-brand-tag { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--s-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sch-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.sch-nav-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--s-faint); padding: 14px 12px 6px; }
.sch-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--s-mute);
  font-size: 13.5px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.sch-nav a i { width: 20px; text-align: center; font-size: 15px; }
.sch-nav a:hover { background: var(--s-surface-3); color: var(--s-ink); }
.sch-nav a.active { background: var(--s-primary-soft); color: var(--s-primary-ink); font-weight: 700; }
.sch-nav a.active::before {
  content: '';
  position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3.5px;
  border-radius: 0 4px 4px 0;
  background: var(--s-grad);
}
.sch-nav a .sch-nav-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 800;
  background: var(--s-bad); color: #fff;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

/* ---- full-width main header ---- */
.sch-body { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-gutter: stable; }
.sch-topbar {
  z-index: 50;
  height: var(--s-topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 0 20px;
  background: var(--s-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--s-border-2);
  position: relative;
}
.sch-topbar-spacer { flex: 1; }

/* ---- page-title bar (second header row, full width) ---- */
.sch-pagebar {
  z-index: 45;
  height: var(--s-pagebar-h);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 26px;
  background: var(--s-surface);
  border-bottom: 1px solid var(--s-border-2);
  min-width: 0;
}
.sch-pagebar-title { font-family: var(--s-display); font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--s-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-pagebar-sub { font-size: 10.5px; font-weight: 600; color: var(--s-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- header user button (name dropdown) ---- */
.sch-user {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px;
  padding: 0 11px 0 5px;
  border-radius: 12px;
  border: 1px solid var(--s-border);
  background: var(--s-surface);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease;
  min-width: 0;
}
.sch-user:hover { border-color: var(--s-primary); }
.sch-user .sch-avatar { width: 30px; height: 30px; font-size: 11px; }
.sch-user-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; min-width: 0; }
.sch-user-copy .u-name { font-size: 12px; font-weight: 800; color: var(--s-ink); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-user-copy .u-role { font-size: 9.5px; font-weight: 700; color: var(--s-mute); white-space: nowrap; }
.sch-user > .fa-angle-down { color: var(--s-faint); font-size: 11px; }

/* ---- account panel (role switcher, theme, demo controls) ---- */
.sch-panel {
  position: fixed;
  top: calc(var(--s-topbar-h) + 8px);
  right: 14px;
  z-index: 86;
  width: min(336px, calc(100vw - 20px));
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: 18px;
  box-shadow: var(--s-shadow-lg);
  overflow: hidden;
  display: none;
}
.sch-panel.open { display: block; animation: schPanelIn .16s ease; }
@keyframes schPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sch-panel-id { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--s-surface-2); border-bottom: 1px solid var(--s-border-2); }
.sch-panel-id b { display: block; font-size: 14px; font-weight: 800; color: var(--s-ink); }
.sch-panel-id small { display: block; font-size: 11px; font-weight: 600; color: var(--s-mute); }
.sch-panel-sec { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--s-faint); padding: 13px 16px 6px; }
.sch-panel-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  border: 0; background: transparent;
  padding: 9px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease;
}
.sch-panel-row:hover { background: var(--s-surface-2); }
.sch-panel-row .t { flex: 1; min-width: 0; }
.sch-panel-row .t b { display: block; font-size: 12.5px; font-weight: 800; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-panel-row .t small { display: block; font-size: 10.5px; font-weight: 600; color: var(--s-mute); }
.sch-panel-row .check { color: var(--s-primary); font-size: 14px; opacity: 0; flex-shrink: 0; }
.sch-panel-row.on { background: var(--s-primary-soft); }
.sch-panel-row.on .check { opacity: 1; }
.sch-panel-theme { padding: 4px 16px 8px; }
.sch-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--s-border-2); margin-top: 8px; background: var(--s-surface-2); }
.sch-panel-foot .note { font-size: 10px; font-weight: 600; color: var(--s-faint); line-height: 1.4; }

.sch-iconbtn {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 12px;
  border: 1px solid var(--s-border);
  background: var(--s-surface);
  color: var(--s-ink-2);
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.sch-iconbtn:hover { border-color: var(--s-primary); color: var(--s-primary-ink); }
.sch-iconbtn:active { transform: scale(.94); }
.sch-iconbtn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--s-bad);
  border: 2px solid var(--s-surface);
}

.sch-search-hint {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--s-border);
  background: var(--s-surface);
  color: var(--s-faint);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease;
}
.sch-search-hint:hover { border-color: var(--s-primary); color: var(--s-mute); }
.sch-search-hint kbd {
  font-family: inherit; font-size: 10px; font-weight: 800;
  background: var(--s-surface-3);
  border: 1px solid var(--s-border);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--s-mute);
}

/* child switcher pill (parent persona) */
.sch-kidpill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--s-border);
  background: var(--s-surface);
  cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--s-ink-2);
  transition: border-color .15s ease;
}
.sch-kidpill:hover { border-color: var(--s-primary); }
.sch-kidpill .sch-avatar { width: 26px; height: 26px; font-size: 10px; }

/* ---- main content ---- */
.sch-main {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 26px 26px 56px;
  position: relative;
  flex: 1;
}

/* ---- mobile tab bar + coach fab ---- */
.sch-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  height: calc(var(--s-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--s-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--s-border-2);
}
.sch-tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 12px;
  color: var(--s-faint);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.sch-tabbar a i { font-size: 17px; }
.sch-tabbar a.active { color: var(--s-primary-ink); }
.sch-tabbar a.active i { transform: translateY(-1px); }

.sch-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(var(--s-tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));
  z-index: 44;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--s-grad);
  color: #fff;
  font-size: 19px;
  box-shadow: 0 14px 30px rgba(79, 70, 229, .45);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.sch-fab:active { transform: scale(.93); }

/* ---- responsive shell ---- */
@media (max-width: 1180px) {
  .sch-frame { grid-template-columns: var(--s-rail-w-sm) minmax(0, 1fr); }
  .sch-rail { padding: 14px 10px; align-items: center; }
  .sch-nav-label, .sch-nav a span, .sch-nav a .sch-nav-badge { display: none; }
  .sch-nav { width: 100%; }
  .sch-nav a { justify-content: center; padding: 12px 0; }
  .sch-nav a.active::before { left: -10px; }
}
@media (max-width: 900px) {
  .sch-user-copy { display: none; }
}
@media (max-width: 767px) {
  .sch-frame { grid-template-columns: minmax(0, 1fr); }
  .sch-rail { display: none; }
  .sch-tabbar { display: flex; }
  .sch-fab { display: inline-flex; }
  .sch-main { padding: 18px 14px calc(var(--s-tabbar-h) + 34px); }
  .sch-topbar { padding: 0 10px 0 14px; }
  .sch-topbar > .sch-themetoggle { display: none; } /* theme lives in the account panel on phones */
  .sch-pagebar { padding: 0 14px; }
  .sch-search-hint span, .sch-search-hint kbd { display: none; }
  .sch-search-hint { width: 38px; justify-content: center; padding: 0; }
}
@media (max-width: 640px) {
  .sch-brand-tag { display: none; }
}

/* ============================================================
   5 · PAGE SCAFFOLD  (page head, section heads, grids)
   ============================================================ */
.sch-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.sch-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--s-primary-ink); margin-bottom: 4px; }
.sch-pagetitle { font-family: var(--s-display); font-size: clamp(21px, 3vw, 27px); font-weight: 800; letter-spacing: -.02em; color: var(--s-ink); line-height: 1.15; }
.sch-pagesub { font-size: 12.5px; font-weight: 500; color: var(--s-mute); margin-top: 4px; }

.sch-sechead { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.sch-sechead h3 { font-family: var(--s-display); font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--s-ink); display: flex; align-items: center; gap: 9px; }
.sch-sechead .spacer { flex: 1; }
.sch-sec-ic {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--hue-soft, var(--s-primary-soft));
  color: var(--hue-ink, var(--s-primary-ink));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px;
}

.sch-grid { display: grid; gap: 14px; }
.sch-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sch-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sch-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sch-grid.main-side { grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr); align-items: start; }
@media (max-width: 1023px) {
  .sch-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-grid.main-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sch-grid.cols-2, .sch-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .sch-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   6 · CARDS + HERO
   ============================================================ */
.sch-card {
  background: var(--s-surface);
  border: 1px solid var(--s-border-2);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow-sm);
}
.sch-card.pad { padding: 18px; }
.sch-card.hover { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; cursor: pointer; }
.sch-card.hover:hover { transform: translateY(-2px); box-shadow: var(--s-shadow); border-color: var(--s-border); }

.sch-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--s-grad);
  color: #fff;
  padding: 24px 26px;
  box-shadow: 0 18px 44px rgba(79, 70, 229, .30);
}
.sch-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 220px at 88% -20%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(320px 200px at 4% 120%, rgba(255,255,255,.13) 0%, transparent 55%);
  pointer-events: none;
}
.sch-hero > * { position: relative; }
.sch-hero .sch-eyebrow { color: rgba(255,255,255,.75); }
.sch-hero-title { font-family: var(--s-display); font-size: clamp(20px, 3vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.sch-hero-sub { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.85); margin-top: 5px; max-width: 640px; }
.sch-hero.gold { background: var(--s-grad-gold); box-shadow: 0 18px 44px rgba(245, 158, 11, .28); }

.sch-hero-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.sch-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(4px);
}

/* ============================================================
   7 · KPI TILES
   ============================================================ */
.sch-kpi { padding: 15px 16px; display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; }
.sch-kpi .k-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sch-kpi .k-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--s-mute); }
.sch-kpi .k-ic {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--hue-soft, var(--s-primary-soft));
  color: var(--hue-ink, var(--s-primary-ink));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.sch-kpi .k-val { font-family: var(--s-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--s-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sch-kpi .k-val small { font-size: 13px; font-weight: 700; color: var(--s-mute); margin-left: 2px; }
.sch-kpi .k-sub { font-size: 11px; font-weight: 600; color: var(--s-mute); display: flex; align-items: center; gap: 5px; }
.sch-kpi .k-sub .up { color: var(--s-good); font-weight: 800; }
.sch-kpi .k-sub .down { color: var(--s-bad); font-weight: 800; }

/* ============================================================
   8 · BUTTONS · CHIPS · TAGS · SEGMENTED
   ============================================================ */
.sch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.sch-btn:active { transform: scale(.97); }
.sch-btn.primary { background: var(--s-grad); color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .30); }
.sch-btn.primary:hover { box-shadow: 0 12px 26px rgba(79, 70, 229, .40); }
.sch-btn.gold { background: var(--s-grad-gold); color: #fff; box-shadow: 0 8px 20px rgba(245, 158, 11, .30); }
.sch-btn.soft { background: var(--s-primary-soft); color: var(--s-primary-ink); }
.sch-btn.ghost { background: var(--s-surface); color: var(--s-ink-2); border-color: var(--s-border); }
.sch-btn.ghost:hover { border-color: var(--s-primary); color: var(--s-primary-ink); }
.sch-btn.danger { background: var(--s-bad-soft); color: var(--s-bad); }
.sch-btn.sm { padding: 7px 12px; font-size: 11.5px; border-radius: 10px; }
.sch-btn.lg { padding: 13px 22px; font-size: 14px; border-radius: 14px; }
.sch-btn.block { width: 100%; }
.sch-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.sch-btn.onhero { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff; backdrop-filter: blur(4px); }
.sch-btn.onhero:hover { background: rgba(255,255,255,.26); }

.sch-textbtn { border: 0; background: none; padding: 4px 2px; color: var(--s-primary-ink); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.sch-textbtn:hover { text-decoration: underline; }

.sch-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  border-radius: 999px;
  padding: 3.5px 10px;
  background: var(--hue-soft, var(--s-surface-3));
  color: var(--hue-ink, var(--s-ink-2));
}
.sch-tag.good { background: var(--s-good-soft); color: var(--s-good); }
.sch-tag.warn { background: var(--s-warn-soft); color: var(--s-warn); }
.sch-tag.bad { background: var(--s-bad-soft); color: var(--s-bad); }
.sch-tag.info { background: var(--s-info-soft); color: var(--s-info); }
.sch-tag.gold { background: var(--s-gold-soft); color: var(--s-gold-ink); }
.sch-tag.live { background: var(--s-bad-soft); color: var(--s-bad); }
.sch-tag.live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--s-bad); animation: schPulse 1.4s ease infinite; }
@keyframes schPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* filter chip row */
.sch-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.sch-chip {
  border: 1px solid var(--s-border);
  background: var(--s-surface);
  color: var(--s-mute);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .14s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.sch-chip:hover { border-color: var(--s-primary); color: var(--s-primary-ink); }
.sch-chip.on { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-bg); }
html[data-sch-mode="dark"] .sch-chip.on { background: var(--s-primary); border-color: var(--s-primary); color: #0a0f1e; }

/* segmented control */
.sch-seg {
  display: inline-flex; gap: 3px;
  background: var(--s-surface-3);
  border: 1px solid var(--s-border-2);
  border-radius: 12px;
  padding: 3px;
}
.sch-seg button {
  border: 0; background: transparent;
  color: var(--s-mute);
  font-family: inherit; font-size: 12px; font-weight: 700;
  border-radius: 9px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .14s ease;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.sch-seg button.on { background: var(--s-surface); color: var(--s-ink); box-shadow: var(--s-shadow-sm); }
@media (max-width: 600px) {
  .sch-seg { width: 100%; overflow-x: auto; }
  .sch-seg button { flex: 1; justify-content: center; padding: 7px 10px; }
}

/* ============================================================
   9 · LISTS · ROWS · TABLES
   ============================================================ */
.sch-rows { display: flex; flex-direction: column; }
.sch-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--s-border-2);
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  font-size: 13px;
}
.sch-rows > .sch-row:first-child { border-top: 0; }
button.sch-row, a.sch-row { cursor: pointer; transition: background .13s ease; }
button.sch-row:hover, a.sch-row:hover { background: var(--s-surface-2); }
.sch-app .r-ic {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 11px;
  background: var(--hue-soft, var(--s-surface-3));
  color: var(--hue-ink, var(--s-ink-2));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.sch-app .r-main { flex: 1; min-width: 0; }
.sch-app .r-title { display: block; font-size: 13px; font-weight: 700; color: var(--s-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-app .r-sub { display: block; font-size: 11px; font-weight: 600; color: var(--s-mute); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-app .r-end { text-align: right; flex-shrink: 0; }
.sch-app .r-val { display: block; font-size: 13px; font-weight: 800; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.sch-app .r-cap { display: block; font-size: 10px; font-weight: 700; color: var(--s-faint); }
.sch-row .fa-chevron-right { color: var(--s-faint); font-size: 11px; }

.sch-tablewrap { overflow-x: auto; border-radius: var(--s-radius); }
.sch-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.sch-table th {
  text-align: left;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--s-faint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--s-border);
  white-space: nowrap;
}
.sch-table td { padding: 11px 14px; border-bottom: 1px solid var(--s-border-2); color: var(--s-ink-2); font-weight: 500; vertical-align: middle; }
.sch-table tr:last-child td { border-bottom: 0; }
.sch-table td b { color: var(--s-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============================================================
   10 · PROGRESS · RINGS · SPARK
   ============================================================ */
.sch-bar { height: 8px; border-radius: 999px; background: var(--s-surface-3); overflow: hidden; }
.sch-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--hue, var(--s-primary)); transition: width .7s cubic-bezier(.22, 1, .36, 1); }
.sch-bar.thin { height: 5px; }
.sch-bar.grad > span { background: var(--s-grad); }
.sch-bar.gold > span { background: var(--s-grad-gold); }

.sch-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.sch-ring svg { transform: rotate(-90deg); display: block; }
.sch-ring .track { fill: none; stroke: var(--s-surface-3); }
.sch-ring .bar { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.22, 1, .36, 1); }
.sch-ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* grade pill */
.sch-gradepill {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: 6px 10px;
  border-radius: 13px;
  background: var(--hue-soft, var(--s-surface-3));
  color: var(--hue-ink, var(--s-ink));
  line-height: 1.05;
}
.sch-gradepill b { font-family: var(--s-display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.sch-gradepill small { font-size: 9.5px; font-weight: 800; opacity: .75; }

/* ============================================================
   11 · FORMS
   ------------------------------------------------------------
   The host portal (Bootstrap 3 + legacy site CSS) styles bare
   input/select/textarea with its own border, inset box-shadow,
   radius and font. Those rules load AFTER this file and often
   out-specify a plain class, so every field we own re-asserts
   its look with !important. Without this the AI Coach composer
   shows a second inset box inside the pill.
   ============================================================ */
.sch-app input, .sch-app select, .sch-app textarea, .sch-app button {
  font-family: inherit !important;
}
/* chromeless fields that sit inside their own styled shell */
.sch-app .sch-composer textarea,
.sch-app .sch-palette-input input,
.sch-app .ms-search input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  color: var(--s-ink) !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.sch-app .sch-composer textarea { padding: 7px 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; }
.sch-app .sch-palette-input input { padding: 0 !important; font-size: 14px !important; }
.sch-app .ms-search input { padding: 8px 0 !important; font-size: 12.5px !important; }
/* fields that own a visible shell of their own */
.sch-app .sch-input, .sch-app .sch-select, .sch-app .sch-textarea {
  border: 1.5px solid var(--s-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: var(--s-surface-2) !important;
  color: var(--s-ink) !important;
  height: auto !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.sch-app .sch-input:focus, .sch-app .sch-select:focus, .sch-app .sch-textarea:focus {
  border-color: var(--s-primary) !important;
  background: var(--s-surface) !important;
  box-shadow: none !important;
  outline: none !important;
}
.sch-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sch-field label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--s-mute); }
.sch-input, .sch-select, .sch-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--s-ink);
  background: var(--s-surface-2);
  border: 1.5px solid var(--s-border);
  border-radius: 12px;
  padding: 10px 13px;
  transition: border-color .15s ease, background .15s ease;
}
.sch-input:focus, .sch-select:focus, .sch-textarea:focus { outline: none; border-color: var(--s-primary); background: var(--s-surface); }
.sch-input::placeholder, .sch-textarea::placeholder { color: var(--s-faint); font-weight: 500; }
.sch-textarea { min-height: 88px; resize: vertical; }
.sch-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--s-mute) 50%), linear-gradient(135deg, var(--s-mute) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* toggle switch */
.sch-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--s-ink-2); }
.sch-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sch-switch .tk {
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--s-border);
  position: relative;
  transition: background .18s ease;
  flex: 0 0 38px;
}
.sch-switch .tk::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  transition: left .18s ease;
}
.sch-switch input:checked + .tk { background: var(--s-primary); }
.sch-switch input:checked + .tk::after { left: 19px; }

/* ============================================================
   12 · AVATARS
   ============================================================ */
.sch-avatar {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--s-grad);
  color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
}
.sch-avatar.teal { background: linear-gradient(135deg, #0d9488, #059669); }
.sch-avatar.pink { background: linear-gradient(135deg, #db2777, #e11d48); }
.sch-avatar.amber { background: linear-gradient(135deg, #d97706, #ea580c); }
.sch-avatar.slate { background: linear-gradient(135deg, #475569, #334155); }
.sch-avatar.lg { width: 52px; height: 52px; font-size: 17px; }
.sch-avatar.sm { width: 28px; height: 28px; font-size: 10px; }

/* ============================================================
   13 · MODALS (desktop dialog / mobile bottom sheet)
   ============================================================ */
.sch-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.sch-modal.open { display: block; }
.sch-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 8, 20, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  animation: schFade .18s ease;
}
.sch-sheet {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 36px));
  max-height: min(86vh, 780px);
  display: flex; flex-direction: column;
  background: var(--s-surface);
  border: 1px solid var(--s-border-2);
  border-radius: 22px;
  box-shadow: var(--s-shadow-lg);
  overflow: hidden;
  animation: schRise .22s cubic-bezier(.22, 1, .36, 1);
}
.sch-sheet.wide { width: min(860px, calc(100vw - 36px)); }
.sch-sheet-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--s-border-2); flex-shrink: 0; }
.sch-sheet-head .t { flex: 1; min-width: 0; }
.sch-sheet-title { font-family: var(--s-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--s-ink); }
.sch-sheet-sub { font-size: 11.5px; font-weight: 600; color: var(--s-mute); margin-top: 2px; }
.sch-sheet-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.sch-sheet-foot { padding: 14px 20px; border-top: 1px solid var(--s-border-2); display: flex; gap: 10px; justify-content: flex-end; background: var(--s-surface-2); flex-shrink: 0; }
.sch-sheet .handle { display: none; }
@media (max-width: 640px) {
  .sch-sheet {
    top: auto; bottom: 0; left: 0;
    transform: none;
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    animation: schSlideUp .26s cubic-bezier(.22, 1, .36, 1);
  }
  .sch-sheet.wide { width: 100%; }
  .sch-sheet .handle { display: block; width: 42px; height: 4.5px; border-radius: 999px; background: var(--s-border); margin: 10px auto 0; }
  .sch-sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes schFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes schRise { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes schSlideUp { from { transform: translateY(60px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   13A · FIVE-LANGUAGE QUICK-START GUIDE
   Shared by the public landing page and every app screen.
   ============================================================ */
.sch-guide-sheet { max-height: min(92vh, 860px); }
.sch-guide-body { padding-top: 14px; }
.sch-guide-language {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--s-surface-2);
  border: 1px solid var(--s-border-2);
  border-radius: 13px;
}
.sch-guide-language button {
  min-height: 38px;
  padding: 7px 10px;
  color: var(--s-mute);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font: 800 11.5px/1.2 var(--s-font);
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.sch-guide-language button.on {
  color: var(--s-primary-ink);
  background: var(--s-surface);
  box-shadow: var(--s-shadow-sm);
}
.sch-guide-language button i { margin-right: 5px; }

.sch-guide-lab {
  --lab-accent: #4f46e5;
  --lab-soft: #eef2ff;
  float: none;
  width: auto;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr);
  gap: 22px;
  margin: 0 0 24px;
  padding: 0;
}
.sch-guide-lab-stage {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  overflow: hidden;
  background:
    radial-gradient(280px 180px at 15% 5%, rgba(255,255,255,.32), transparent 70%),
    radial-gradient(280px 220px at 95% 95%, rgba(236,72,153,.2), transparent 70%),
    var(--s-grad);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(49,46,129,.2);
  position: relative;
}
.sch-guide-lab-stage::before,
.sch-guide-lab-stage::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 42px;
  transform: rotate(28deg);
}
.sch-guide-lab-stage::before { top: -104px; right: -70px; }
.sch-guide-lab-stage::after { bottom: -118px; left: -62px; }
.sch-guide-device {
  width: min(100%, 370px);
  overflow: hidden;
  color: #182032;
  background: #f7f8fc;
  border: 5px solid rgba(18,24,42,.9);
  border-radius: 27px;
  box-shadow: 0 26px 58px rgba(12,18,42,.34), inset 0 0 0 1px rgba(255,255,255,.55);
  position: relative;
  z-index: 1;
  transform: perspective(1000px) rotateY(2deg) rotateX(1deg);
  transition: transform .24s ease, box-shadow .24s ease;
}
.sch-guide-device:hover { transform: perspective(1000px) rotateY(0) rotateX(0) translateY(-2px); box-shadow: 0 30px 66px rgba(12,18,42,.4); }
.sch-guide-device[data-feature="home"] { --lab-accent: #4f46e5; --lab-soft: #eef2ff; }
.sch-guide-device[data-feature="grades"] { --lab-accent: #0284c7; --lab-soft: #e0f2fe; }
.sch-guide-device[data-feature="attendance"] { --lab-accent: #059669; --lab-soft: #d1fae5; }
.sch-guide-device[data-feature="calendar"] { --lab-accent: #db2777; --lab-soft: #fce7f3; }
.sch-guide-device[data-feature="messages"] { --lab-accent: #7c3aed; --lab-soft: #ede9fe; }
.sch-guide-device[data-feature="coach"] { --lab-accent: #9333ea; --lab-soft: #f3e8ff; }
.sch-guide-device[data-feature="rewards"] { --lab-accent: #d97706; --lab-soft: #fef3c7; }
.sch-guide-device-top {
  height: 39px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  background: #fff;
  border-bottom: 1px solid #e8ebf2;
}
.sch-guide-device-brand {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 7px;
  font-size: 9px;
}
.sch-guide-device-school { flex: 1; overflow: hidden; font: 800 9px/1 var(--s-font); text-overflow: ellipsis; white-space: nowrap; }
.sch-guide-device-live { display: inline-flex; align-items: center; gap: 4px; color: #64748b; font: 750 7.5px/1 var(--s-font); text-transform: uppercase; letter-spacing: .08em; }
.sch-guide-device-live > i { width: 5px; height: 5px; background: #10b981; border-radius: 50%; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.sch-guide-device-screen { padding: 12px; }
.sch-guide-device-hero {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--lab-accent), #7c3aed);
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(49,46,129,.18);
  transition: background .22s ease;
}
.sch-guide-device-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  font-size: 15px;
}
.sch-guide-device-copy { flex: 1; min-width: 0; }
.sch-guide-device-copy small,
.sch-guide-device-copy strong,
.sch-guide-device-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-guide-device-copy small { color: rgba(255,255,255,.75); font: 750 7px/1.2 var(--s-font); text-transform: uppercase; letter-spacing: .08em; }
.sch-guide-device-copy strong { margin-top: 3px; font: 850 15px/1.1 var(--s-display); }
.sch-guide-device-copy em { margin-top: 3px; color: rgba(255,255,255,.82); font: 600 8px/1.25 var(--s-font); font-style: normal; }
.sch-guide-device-avatar { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--lab-accent); background: #fff; border-radius: 50%; font: 850 8px/1 var(--s-font); }
.sch-guide-device-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.sch-guide-device-kpis > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  column-gap: 5px;
  align-items: center;
  padding: 8px 7px;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 10px;
}
.sch-guide-device-kpis i { grid-row: 1 / 3; color: var(--lab-accent); font-size: 9px; }
.sch-guide-device-kpis strong { font: 850 11px/1 var(--s-display); }
.sch-guide-device-kpis small { overflow: hidden; color: #94a3b8; font: 700 6px/1.2 var(--s-font); text-overflow: ellipsis; white-space: nowrap; }
.sch-guide-device-chart { margin-top: 8px; padding: 10px; background: #fff; border: 1px solid #e8ebf2; border-radius: 11px; }
.sch-guide-device-chart-head { display: flex; align-items: center; gap: 8px; }
.sch-guide-device-chart-head b { flex: 1; font: 800 8px/1 var(--s-font); }
.sch-guide-device-chart-head em { color: #059669; font: 800 7px/1 var(--s-font); font-style: normal; }
.sch-guide-device-bars { height: 52px; display: flex; align-items: flex-end; gap: 5px; margin-top: 8px; }
.sch-guide-device-bars i { flex: 1; min-height: 8px; background: linear-gradient(180deg, var(--lab-accent), var(--lab-soft)); border-radius: 4px 4px 2px 2px; animation: schGuideBar .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes schGuideBar { from { height: 7px; opacity: .3; } }
.sch-guide-device-feed { display: grid; gap: 5px; margin-top: 8px; }
.sch-guide-device-feed > span { display: grid; grid-template-columns: 20px 1fr 38px; align-items: center; gap: 7px; padding: 6px 8px; background: #fff; border: 1px solid #e8ebf2; border-radius: 9px; }
.sch-guide-device-feed i { color: var(--lab-accent); font-size: 8px; text-align: center; }
.sch-guide-device-feed b,
.sch-guide-device-feed em { height: 5px; background: #e8ebf2; border-radius: 999px; }
.sch-guide-device-feed em { background: var(--lab-soft); }
.sch-guide-device-nav { height: 39px; display: flex; align-items: center; justify-content: space-around; padding: 0 10px; background: #fff; border-top: 1px solid #e8ebf2; }
.sch-guide-device-nav i { color: #b0b8c8; font-size: 10px; }
.sch-guide-device-nav i.on { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; color: var(--lab-accent); background: var(--lab-soft); border-radius: 8px; }
.sch-guide-lab-controls { min-width: 0; align-self: center; }
.sch-guide-lab-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--s-primary-ink); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.sch-guide-lab-eyebrow i { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--s-grad); border-radius: 8px; font-size: 10px; }
.sch-guide-lab-controls h2 { margin: 9px 0 0; color: var(--s-ink); font-family: var(--s-display); font-size: clamp(22px, 3vw, 30px); font-weight: 850; letter-spacing: -.025em; line-height: 1.08; }
.sch-guide-lab-intro { max-width: 58ch; margin: 9px 0 0; color: var(--s-mute); font-size: 12px; font-weight: 550; line-height: 1.6; }
.sch-guide-lab-group { margin-top: 17px; }
.sch-guide-lab-label { display: block; margin-bottom: 7px; color: var(--s-faint); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.sch-guide-lab-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sch-guide-lab-roles button,
.sch-guide-lab-features button {
  min-width: 0;
  border: 1px solid var(--s-border-2);
  background: var(--s-surface);
  color: var(--s-mute);
  cursor: pointer;
  font-family: var(--s-font);
  font-weight: 750;
  transition: transform .13s ease, color .13s ease, border-color .13s ease, background .13s ease;
}
.sch-guide-lab-roles button:hover,
.sch-guide-lab-features button:hover { color: var(--s-ink); border-color: var(--s-primary); transform: translateY(-1px); }
.sch-guide-lab-roles button { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px; border-radius: 11px; font-size: 10px; }
.sch-guide-lab-roles button span { white-space: nowrap; }
.sch-guide-lab-roles button.on { color: var(--s-primary-ink); background: var(--s-primary-soft); border-color: var(--s-primary); box-shadow: inset 0 0 0 1px var(--s-primary); }
.sch-guide-lab-role-card { display: flex; align-items: flex-start; gap: 10px; margin-top: 7px; padding: 10px 11px; color: var(--s-ink); background: var(--s-surface-2); border: 1px solid var(--s-border-2); border-radius: 12px; animation: schGuideFade .2s ease; }
.sch-guide-lab-role-card > span { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--s-primary-ink); background: var(--s-primary-soft); border-radius: 9px; font-size: 11px; }
.sch-guide-lab-role-card p { margin: 0; }
.sch-guide-lab-role-card strong,
.sch-guide-lab-role-card small { display: block; }
.sch-guide-lab-role-card strong { font-size: 10.5px; font-weight: 850; }
.sch-guide-lab-role-card small { margin-top: 2px; color: var(--s-mute); font-size: 9.5px; font-weight: 550; line-height: 1.45; }
.sch-guide-lab-journey { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.sch-guide-lab-journey button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; color: var(--s-ink-2); background: var(--s-surface-2); border: 1px solid var(--s-border-2); border-radius: 999px; cursor: pointer; font: 750 9px/1.2 var(--s-font); }
.sch-guide-lab-journey button:hover { color: var(--s-ink); border-color: var(--s-primary); }
.sch-guide-lab-journey button.on { color: var(--s-primary-ink); background: var(--s-primary-soft); border-color: var(--s-primary); }
.sch-guide-lab-journey > i { flex: 0 0 auto; color: var(--s-faint); font-size: 7px; }
.sch-guide-lab-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sch-guide-lab-features button { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-radius: 11px; font-size: 8.5px; }
.sch-guide-lab-features button i { font-size: 12px; }
.sch-guide-lab-features button.on { color: #fff; background: var(--s-grad); border-color: transparent; box-shadow: 0 7px 16px rgba(79,70,229,.24); }
.sch-guide-lab-open { width: 100%; min-height: 43px; justify-content: center; margin-top: 17px; }
@keyframes schGuideFade { from { opacity: .35; transform: translateY(3px); } }
@media (max-width: 860px) {
  .sch-guide-lab { grid-template-columns: minmax(0, 1fr); }
  .sch-guide-lab-stage { padding: 22px; }
  .sch-guide-device { width: min(100%, 410px); }
}
@media (max-width: 520px) {
  .sch-guide-lab { gap: 18px; }
  .sch-guide-lab-stage { padding: 16px 10px; border-radius: 18px; }
  .sch-guide-device { border-width: 4px; border-radius: 23px; transform: none; }
  .sch-guide-lab-roles { grid-template-columns: minmax(0, 1fr); }
  .sch-guide-lab-roles button { justify-content: flex-start; padding-right: 11px; padding-left: 11px; }
  .sch-guide-lab-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sch-guide-panel[hidden] { display: none; }
.sch-guide-hero {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 17px;
  color: #fff;
  background: var(--s-grad);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(79, 70, 229, .22);
}
.sch-guide-hero-ic {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 15px;
  font-size: 19px;
}
.sch-guide-hero h3,
.sch-guide-hero p,
.sch-guide-section h3,
.sch-guide-steps p,
.sch-guide-people p,
.sch-guide-note p { margin: 0; }
.sch-guide-hero h3 { font-family: var(--s-display); font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.sch-guide-hero p { max-width: 68ch; margin-top: 4px; color: rgba(255,255,255,.84); font-size: 11.5px; font-weight: 550; line-height: 1.55; }
.sch-guide-section { float: none; width: auto; max-width: none; margin: 22px 0 0; padding: 0; }
.sch-guide-section > h3 { margin-bottom: 10px; color: var(--s-ink); font-family: var(--s-display); font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.sch-guide-steps,
.sch-guide-people { display: grid; gap: 10px; }
.sch-guide-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sch-guide-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sch-guide-steps article,
.sch-guide-people article {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  background: var(--s-surface-2);
  border: 1px solid var(--s-border-2);
  border-radius: 14px;
}
.sch-guide-steps article > b,
.sch-guide-people article > i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--s-primary-ink);
  background: var(--s-primary-soft);
  border-radius: 10px;
  font-size: 12px;
}
.sch-guide-steps strong,
.sch-guide-people strong { display: block; color: var(--s-ink); font-size: 11.5px; font-weight: 800; line-height: 1.35; }
.sch-guide-steps p,
.sch-guide-people p { margin-top: 3px; color: var(--s-mute); font-size: 10.5px; font-weight: 550; line-height: 1.5; }
.sch-guide-people article.on {
  background: var(--s-primary-soft);
  border-color: var(--s-primary);
  box-shadow: inset 3px 0 0 var(--s-primary);
}
.sch-guide-areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.sch-guide-areas > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 10px;
  background: var(--s-surface);
  border: 1px solid var(--s-border-2);
  border-radius: 12px;
}
.sch-guide-areas i {
  grid-row: 1 / 3;
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--s-primary-ink);
  background: var(--s-primary-soft);
  border-radius: 9px;
  font-size: 11px;
}
.sch-guide-areas b { overflow: hidden; color: var(--s-ink); font-size: 10.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sch-guide-areas small { overflow: hidden; color: var(--s-faint); font-size: 8.75px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sch-guide-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 14px;
  color: var(--s-info);
  background: var(--s-info-soft);
  border: 1px solid var(--s-info);
  border-radius: 13px;
}
.sch-guide-note > i { margin-top: 2px; }
.sch-guide-note strong,
.sch-guide-note span { display: block; }
.sch-guide-note strong { color: var(--s-ink); font-size: 11px; font-weight: 800; }
.sch-guide-note span { margin-top: 2px; color: var(--s-mute); font-size: 10px; font-weight: 550; line-height: 1.5; }
@media (max-width: 760px) {
  .sch-guide-steps,
  .sch-guide-people { grid-template-columns: minmax(0, 1fr); }
  .sch-guide-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .sch-guide-body { padding-right: 14px; padding-left: 14px; }
  .sch-guide-hero { grid-template-columns: 42px minmax(0, 1fr); padding: 14px; }
  .sch-guide-hero-ic { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
  .sch-guide-language button { padding-right: 6px; padding-left: 6px; font-size: 10.5px; }
}

/* ============================================================
   14 · DRAWER (notifications) + COMMAND PALETTE
   ============================================================ */
.sch-drawer { position: fixed; inset: 0; z-index: 88; display: none; }
.sch-drawer.open { display: block; }
.sch-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 94vw);
  background: var(--s-surface);
  border-left: 1px solid var(--s-border-2);
  box-shadow: var(--s-shadow-lg);
  display: flex; flex-direction: column;
  animation: schSlideIn .24s cubic-bezier(.22, 1, .36, 1);
}
@keyframes schSlideIn { from { transform: translateX(60px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.sch-drawer-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--s-border-2); flex-shrink: 0; }
.sch-drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 20px; }

.sch-notif {
  display: flex; gap: 12px;
  padding: 13px 12px;
  border-radius: 14px;
  transition: background .13s ease;
  position: relative;
}
.sch-notif:hover { background: var(--s-surface-2); }
.sch-notif .n-body { flex: 1; min-width: 0; }
.sch-notif .n-title { font-size: 12.5px; font-weight: 800; color: var(--s-ink); }
.sch-notif .n-text { font-size: 12px; font-weight: 500; color: var(--s-mute); line-height: 1.45; margin-top: 2px; }
.sch-notif .n-time { font-size: 10px; font-weight: 700; color: var(--s-faint); margin-top: 5px; }
.sch-notif.unread::after {
  content: '';
  position: absolute; top: 18px; right: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--s-primary);
}

.sch-palette { position: fixed; inset: 0; z-index: 95; display: none; }
.sch-palette.open { display: block; }
.sch-palette-box {
  position: absolute; left: 50%; top: 14vh;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: 18px;
  box-shadow: var(--s-shadow-lg);
  overflow: hidden;
  animation: schRiseSm .18s ease;
}
@keyframes schRiseSm { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.sch-palette-input { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--s-border-2); color: var(--s-faint); }
.sch-palette-input input { flex: 1; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--s-ink); }
.sch-palette-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.sch-palette-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  border: 0; background: transparent;
  padding: 10px 11px;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  color: var(--s-ink-2);
  font-size: 13px; font-weight: 600;
}
.sch-palette-item i { width: 20px; text-align: center; color: var(--s-mute); }
.sch-palette-item .hint { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--s-faint); text-transform: uppercase; letter-spacing: .05em; }
.sch-palette-item:hover, .sch-palette-item.sel { background: var(--s-primary-soft); color: var(--s-primary-ink); }
.sch-palette-item:hover i, .sch-palette-item.sel i { color: var(--s-primary-ink); }

/* ============================================================
   15 · TOASTS
   ============================================================ */
.sch-toastrack {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  width: min(440px, calc(100vw - 30px));
}
@media (max-width: 767px) { .sch-toastrack { bottom: calc(var(--s-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); } }
.sch-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--s-ink);
  color: var(--s-bg);
  font-size: 12.5px; font-weight: 700;
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: var(--s-shadow-lg);
  animation: schToastIn .22s cubic-bezier(.22, 1, .36, 1);
  max-width: 100%;
}
html[data-sch-mode="dark"] .sch-toast { background: #e8edf8; color: #0a0f1e; }
.sch-toast i { flex-shrink: 0; }
.sch-toast.good i { color: #34d399; }
.sch-toast.bad i { color: #fb7185; }
.sch-toast.gold i { color: #fbbf24; }
html[data-sch-mode="dark"] .sch-toast.good i { color: #059669; }
html[data-sch-mode="dark"] .sch-toast.bad i { color: #e11d48; }
html[data-sch-mode="dark"] .sch-toast.gold i { color: #d97706; }
@keyframes schToastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sch-toast.out { animation: schToastOut .2s ease forwards; }
@keyframes schToastOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ============================================================
   16 · TIMELINE (schedule) + CALENDAR + HEATMAP
   ============================================================ */
.sch-timeline { display: flex; flex-direction: column; }
.sch-tl-row { display: flex; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--s-border-2); align-items: center; }
.sch-timeline > .sch-tl-row:first-child { border-top: 0; }
.sch-tl-time { width: 74px; flex: 0 0 74px; text-align: right; }
.sch-tl-time b { display: block; font-size: 12.5px; font-weight: 800; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.sch-tl-time small { font-size: 10px; font-weight: 700; color: var(--s-faint); }
.sch-tl-dotcol { width: 14px; flex: 0 0 14px; display: flex; justify-content: center; position: relative; align-self: stretch; }
.sch-tl-dotcol::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--s-border-2); }
.sch-tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--hue, var(--s-primary)); border: 2.5px solid var(--s-surface); position: relative; z-index: 1; margin-top: 14px; box-shadow: 0 0 0 2px var(--hue-soft, var(--s-primary-soft)); }
.sch-tl-row.now .sch-tl-dot { animation: schPulse 1.6s ease infinite; }

/* month grid */
.sch-cal-days, .sch-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.sch-cal-days b { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--s-faint); padding: 5px 0; text-transform: uppercase; }
.sch-cal-cell {
  min-height: 74px;
  border-radius: 12px;
  border: 1px solid var(--s-border-2);
  background: var(--s-surface);
  padding: 6px 7px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
  display: flex; flex-direction: column; gap: 3px;
  overflow: hidden;
}
.sch-cal-cell:hover { border-color: var(--s-primary); }
.sch-cal-cell.dim { opacity: .38; }
.sch-cal-cell.today { border-color: var(--s-primary); background: var(--s-primary-soft); }
.sch-cal-cell .d { font-size: 11px; font-weight: 800; color: var(--s-ink-2); }
.sch-cal-cell.today .d { color: var(--s-primary-ink); }
.sch-cal-evt {
  font-size: 9px; font-weight: 700;
  color: var(--hue-ink, var(--s-ink-2));
  background: var(--hue-soft, var(--s-surface-3));
  border-radius: 5px;
  padding: 1.5px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.sch-cal-more { font-size: 9px; font-weight: 800; color: var(--s-faint); }
@media (max-width: 640px) {
  .sch-cal-cell { min-height: 46px; padding: 4px 5px; border-radius: 9px; }
  .sch-cal-evt { display: none; }
  .sch-cal-cell .marks { display: flex; gap: 2.5px; flex-wrap: wrap; }
  .sch-cal-cell .mark { width: 5.5px; height: 5.5px; border-radius: 50%; background: var(--hue, var(--s-primary)); }
}
@media (min-width: 641px) { .sch-cal-cell .marks { display: none; } }

/* attendance heat strip */
.sch-heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sch-heat-cell {
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  cursor: default;
  position: relative;
  border: 1px solid var(--s-border-2);
  background: var(--s-surface-2);
  color: var(--s-faint);
}
.sch-heat-cell.present { background: var(--s-good-soft); border-color: transparent; color: var(--s-good); }
.sch-heat-cell.tardy { background: var(--s-warn-soft); border-color: transparent; color: var(--s-warn); }
.sch-heat-cell.absent { background: var(--s-bad-soft); border-color: transparent; color: var(--s-bad); }
.sch-heat-cell.excused { background: var(--s-info-soft); border-color: transparent; color: var(--s-info); }
.sch-heat-cell.future { opacity: .35; }

/* ============================================================
   17 · CHAT (AI Coach)
   ============================================================ */
.sch-chat { display: flex; flex-direction: column; gap: 14px; }
.sch-msg { display: flex; gap: 10px; max-width: min(620px, 92%); animation: schMsgIn .25s ease; }
@keyframes schMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sch-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.sch-msg-av {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 11px;
  background: var(--s-grad);
  color: #fff; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.sch-msg.me .sch-msg-av { background: linear-gradient(135deg, #0d9488, #059669); }
.sch-msg-bubble {
  background: var(--s-surface);
  border: 1px solid var(--s-border-2);
  border-radius: 16px 16px 16px 5px;
  padding: 11px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--s-ink-2);
  line-height: 1.55;
  box-shadow: var(--s-shadow-sm);
}
.sch-msg-bubble b, .sch-msg-bubble strong { color: var(--s-ink); font-weight: 800; }
.sch-msg.me .sch-msg-bubble { background: var(--s-primary-soft); border-color: transparent; color: var(--s-ink); border-radius: 16px 16px 5px 16px; }
.sch-msg-bubble ul { margin: 6px 0 2px; padding-left: 18px; }
.sch-msg-bubble li { margin: 3px 0; }

.sch-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.sch-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--s-faint); animation: schTyping 1.2s ease infinite; }
.sch-typing span:nth-child(2) { animation-delay: .15s; }
.sch-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes schTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* rich card inside a coach message */
.sch-msg-card {
  margin-top: 9px;
  border: 1px solid var(--s-border-2);
  border-radius: 13px;
  background: var(--s-surface-2);
  padding: 11px 13px;
}
.sch-msg-card .t { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--s-mute); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }

.sch-composer {
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--s-surface);
  border: 1.5px solid var(--s-border);
  border-radius: 18px;
  padding: 8px 8px 8px 16px;
  box-shadow: var(--s-shadow-sm);
  transition: border-color .15s ease;
}
.sch-composer:focus-within { border-color: var(--s-primary); }
.sch-composer textarea {
  flex: 1;
  border: 0; outline: none; background: transparent; resize: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--s-ink);
  line-height: 1.5;
  max-height: 120px;
  padding: 7px 0;
}
.sch-composer textarea::placeholder { color: var(--s-faint); }
.sch-composer .send {
  width: 40px; height: 40px; flex: 0 0 40px;
  border: 0; border-radius: 13px;
  background: var(--s-grad);
  color: #fff; font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .35);
}
.sch-composer .send:disabled { opacity: .45; box-shadow: none; cursor: default; }

/* ============================================================
   18 · REWARDS  (events, radar, leaderboard, store, badges)
   ============================================================ */
.sch-event { padding: 16px; display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden; }
.sch-event .e-top { display: flex; align-items: flex-start; gap: 11px; }
.sch-event .e-ic {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 13px;
  background: var(--hue-soft, var(--s-primary-soft));
  color: var(--hue-ink, var(--s-primary-ink));
  font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sch-event .e-title { font-size: 14px; font-weight: 800; color: var(--s-ink); line-height: 1.3; }
.sch-event .e-meta { font-size: 11px; font-weight: 600; color: var(--s-mute); margin-top: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sch-event .e-pts {
  margin-left: auto;
  flex-shrink: 0;
  text-align: center;
  background: var(--s-gold-soft);
  color: var(--s-gold-ink);
  border-radius: 12px;
  padding: 6px 11px;
  line-height: 1.1;
}
.sch-event .e-pts b { font-family: var(--s-display); font-size: 15px; font-weight: 800; display: block; }
.sch-event .e-pts small { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sch-event .e-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sch-event.done { opacity: .78; }

/* geofence radar */
.sch-radar-wrap { position: relative; border-radius: 16px; overflow: hidden; background: var(--s-surface-2); border: 1px solid var(--s-border-2); }
.sch-radar-canvas { display: block; width: 100%; }
.sch-radar-read {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--s-border-2);
  background: var(--s-surface);
  flex-wrap: wrap;
}
.sch-radar-read .dist b { font-family: var(--s-display); font-size: 17px; font-weight: 800; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.sch-radar-read .dist small { font-size: 10px; font-weight: 700; color: var(--s-mute); display: block; }

/* leaderboard */
.sch-lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--s-border-2); }
.sch-lb-row:first-child { border-top: 0; }
.sch-lb-rank { width: 30px; flex: 0 0 30px; text-align: center; font-family: var(--s-display); font-size: 14px; font-weight: 800; color: var(--s-faint); }
.sch-lb-row.top1 .sch-lb-rank { color: #f59e0b; font-size: 17px; }
.sch-lb-row.top2 .sch-lb-rank { color: #94a3b8; font-size: 16px; }
.sch-lb-row.top3 .sch-lb-rank { color: #b45309; font-size: 15px; }
.sch-lb-row.you { background: var(--s-primary-soft); border-radius: 13px; border-top-color: transparent; }
.sch-lb-row.you + .sch-lb-row { border-top-color: transparent; }
.sch-lb-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--s-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-lb-name small { display: block; font-size: 10.5px; font-weight: 600; color: var(--s-mute); }
.sch-lb-pts { font-family: var(--s-display); font-size: 14px; font-weight: 800; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.sch-lb-pts small { font-size: 9px; font-weight: 800; color: var(--s-faint); margin-left: 2px; }

/* store */
.sch-store-item { padding: 16px; display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.sch-store-ic {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--hue-soft, var(--s-primary-soft));
  color: var(--hue-ink, var(--s-primary-ink));
  font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sch-store-item .s-name { font-size: 13px; font-weight: 800; color: var(--s-ink); line-height: 1.3; }
.sch-store-item .s-desc { font-size: 11px; font-weight: 500; color: var(--s-mute); line-height: 1.45; min-height: 32px; }
.sch-store-item .s-cost { display: inline-flex; align-items: center; gap: 5px; font-family: var(--s-display); font-size: 14px; font-weight: 800; color: var(--s-gold-ink); }

/* badges */
.sch-badge { padding: 15px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; }
.sch-badge-medal {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #fff;
  background: var(--s-grad-gold);
  box-shadow: 0 10px 22px rgba(245, 158, 11, .35);
}
.sch-badge .b-name { font-size: 12px; font-weight: 800; color: var(--s-ink); }
.sch-badge .b-how { font-size: 10px; font-weight: 600; color: var(--s-mute); line-height: 1.4; }
.sch-badge.locked .sch-badge-medal { background: var(--s-surface-3); color: var(--s-faint); box-shadow: none; }
.sch-badge.locked .b-name { color: var(--s-mute); }

/* celebration overlay */
.sch-celebrate {
  position: fixed; inset: 0; z-index: 97;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 8, 20, .66);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.sch-celebrate.open { display: flex; }
.sch-celebrate-card {
  text-align: center;
  color: #fff;
  animation: schCeleb .5s cubic-bezier(.22, 1, .36, 1);
  padding: 20px;
}
@keyframes schCeleb { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.sch-celebrate-ic {
  width: 92px; height: 92px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--s-grad-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  box-shadow: 0 20px 50px rgba(245, 158, 11, .5);
}
.sch-celebrate-pts { font-family: var(--s-display); font-size: 46px; font-weight: 800; letter-spacing: -.02em; }
.sch-celebrate-title { font-size: 17px; font-weight: 800; margin-top: 4px; }
.sch-celebrate-sub { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.75); margin-top: 6px; }
.sch-confetti { position: fixed; inset: 0; z-index: 98; pointer-events: none; }

/* ---- digital student ID card ---- */
.sch-idcard {
  border-radius: 18px;
  overflow: hidden;
  background: var(--s-grad);
  color: #fff;
  box-shadow: 0 18px 44px rgba(79, 70, 229, .35);
}
.sch-idcard .idc-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.sch-idcard .idc-school { flex: 1; min-width: 0; font-family: var(--s-display); font-size: 13.5px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-idcard .idc-school small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.sch-idcard .idc-role { font-size: 9px; font-weight: 900; letter-spacing: .14em; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 3px 9px; }
.sch-idcard .idc-body { display: flex; align-items: center; gap: 14px; padding: 8px 16px 14px; }
.sch-idcard .idc-who { flex: 1; min-width: 0; }
.sch-idcard .idc-who b { display: block; font-family: var(--s-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.sch-idcard .idc-who small { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); margin-top: 2px; }
.sch-idcard .idc-who .sch-tag { display: inline-flex; }
.sch-idcard .idc-qr { width: 92px; height: 92px; flex: 0 0 92px; background: #fff; border-radius: 12px; padding: 7px; display: flex; align-items: center; justify-content: center; }
.sch-idcard .idc-qr svg { width: 100%; height: 100%; display: block; }
.sch-idcard .idc-bars { display: flex; align-items: flex-end; gap: 2px; height: 26px; padding: 0 16px; }
.sch-idcard .idc-bars i { display: block; height: 100%; background: rgba(255,255,255,.85); border-radius: 1px; }
.sch-idcard .idc-foot { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.75); padding: 8px 16px 13px; }

/* ============================================================
   19 · MISC  (announce, empty, skeleton, divider, insight)
   ============================================================ */
.sch-announce {
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--s-border-2);
  background: var(--s-surface);
  padding: 12px 16px;
  box-shadow: var(--s-shadow-sm);
}
.sch-announce .a-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--hue-soft, var(--s-info-soft)); color: var(--hue-ink, var(--s-info)); }

.sch-insight {
  display: flex; gap: 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--s-surface), var(--s-surface)) padding-box,
    linear-gradient(135deg, #4f46e5, #a21caf) border-box;
  padding: 14px 16px;
  box-shadow: var(--s-shadow-sm);
}
.sch-insight .i-ic {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 11px;
  background: var(--s-grad);
  color: #fff; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sch-insight .i-eyebrow { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(135deg, var(--s-primary), #a21caf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sch-insight .i-text { font-size: 12.5px; font-weight: 500; color: var(--s-ink-2); line-height: 1.5; margin-top: 2px; }
.sch-insight .i-text b { color: var(--s-ink); font-weight: 800; }

.sch-empty { text-align: center; padding: 36px 20px; color: var(--s-mute); }
.sch-empty i { font-size: 26px; color: var(--s-faint); margin-bottom: 10px; display: block; }
.sch-empty .t { font-size: 13.5px; font-weight: 800; color: var(--s-ink-2); }
.sch-empty .s { font-size: 11.5px; font-weight: 500; margin-top: 3px; }

.sch-skel { position: relative; overflow: hidden; background: var(--s-surface-3); border-radius: 10px; min-height: 14px; }
.sch-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: schShimmer 1.4s infinite; }
html[data-sch-mode="dark"] .sch-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes schShimmer { to { transform: translateX(100%); } }

.sch-div { height: 1px; background: var(--s-border-2); border: 0; margin: 14px 0; }

.sch-chartbox { position: relative; }

/* score coloring */
.sch-score-great { color: var(--s-good) !important; }
.sch-score-good { color: var(--s-info) !important; }
.sch-score-ok { color: var(--s-warn) !important; }
.sch-score-low { color: var(--s-bad) !important; }

/* ============================================================
   20 · THEME TOGGLE
   ============================================================ */
.sch-themetoggle {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--s-surface-3);
  border: 1px solid var(--s-border-2);
  border-radius: 999px;
  padding: 3px;
}
.sch-themetoggle button {
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--s-faint);
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.sch-themetoggle button.on { background: var(--s-surface); color: var(--s-primary-ink); box-shadow: var(--s-shadow-sm); }
.sch-themetoggle.labels { width: 100%; }
.sch-themetoggle.labels button { width: auto; flex: 1; border-radius: 999px; gap: 7px; font-size: 11.5px; font-weight: 800; font-family: inherit; padding: 0 12px; height: 32px; }

/* ============================================================
   21 · PRINT + MOTION
   ============================================================ */
@media print {
  .sch-rail, .sch-topbar, .sch-tabbar, .sch-fab, .sch-toastrack, .sch-drawer, .sch-palette, .sch-themetoggle, .sch-panel { display: none !important; }
  .sch-app, .sch-frame { display: block; background: #fff; height: auto; overflow: visible; }
  .sch-pagebar { height: auto; padding: 0 0 10px; border: 0; }
  .sch-body { overflow: visible; }
  .sch-main { max-width: none; padding: 0; }
  .sch-card, .sch-hero { box-shadow: none; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .sch-app *, .sch-app *::before, .sch-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}