/* ═══════════════════════════════════════════════════════════════════
   The Golden — BETA stylesheet
   Design DNA from Module 1.html: white cards, NorthShore red (#C8102E),
   Outfit + JetBrains Mono, checkered badge, calm density.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --red: #C8102E;
  --red-dark: #8f0b20;
  --red-glow: rgba(200,16,46,0.08);
  --badge-bg: #111418;
  --black: #1a1d23;
  --surface: #ffffff;   /* elevated surface — USE THIS on new cards */
  --surface-2: #fbfbfc;  /* controls / inputs */
  --card: var(--surface);
  --card2: var(--surface-2);
  --off: #f7f7f8;
  --page-bg: #f1f2f5;
  --border: #e6e6e9;
  --border-light: #d6d6dc;
  --text: #1a1d23;
  --muted: #6b7280;
  --muted2: #4b5563;
  --green: #15803d;
  --green-glow: rgba(21,128,61,0.08);
  --amber: #b45309;
  --amber-glow: rgba(180,83,9,0.08);
  --blue: #1d4ed8;
  --blue-glow: rgba(29,78,216,0.08);
  --purple: #7c3aed;
  --r: 12px;
  --r-sm: 6px;
  --r-lg: 16px;
  --shadow-card: 0 1px 2px rgba(15,39,71,0.04);
  --shadow-hover: 0 6px 18px rgba(15,39,71,0.06);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--page-bg);
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── subtle photographic grid texture on content area ── */
#content {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,39,71,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

/* ── checkered-stripe utility (reusable) ── */
.stripes {
  background-image:
    linear-gradient(135deg, var(--red) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(225deg, var(--red) 25%, transparent 25%) 0 0 / 12px 12px;
}

/* ── module accent CSS-vars helper ── */
[data-mod-accent] { --m-accent: var(--red); }
[data-mod-accent="m1"]  { --m-accent: #C8102E; }
[data-mod-accent="m2"]  { --m-accent: #7c3aed; }
[data-mod-accent="m3"]  { --m-accent: #0891b2; }
[data-mod-accent="m4"]  { --m-accent: #b45309; }
[data-mod-accent="m5"]  { --m-accent: #ea580c; }
[data-mod-accent="m6"]  { --m-accent: #15803d; }
[data-mod-accent="m7"]  { --m-accent: #1d4ed8; }
[data-mod-accent="m8"]  { --m-accent: #a16207; }
[data-mod-accent="m9"]  { --m-accent: #8f0b20; }
[data-mod-accent="mWU"] { --m-accent: #6b7280; }
/* Audio/Video modules */
[data-mod-accent="a1"]  { --m-accent: #0e7490; }
[data-mod-accent="a2"]  { --m-accent: #0891b2; }
[data-mod-accent="a3"]  { --m-accent: #0369a1; }
[data-mod-accent="a4"]  { --m-accent: #1d4ed8; }
[data-mod-accent="a5"]  { --m-accent: #0e7490; }
[data-mod-accent="a6"]  { --m-accent: #0891b2; }
[data-mod-accent="a7"]  { --m-accent: #0369a1; }
[data-mod-accent="a8"]  { --m-accent: #1d4ed8; }
[data-mod-accent="a9"]  { --m-accent: #155e75; }

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

/* ───────── LOGIN ───────── */
#login-screen {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #1a1d23 0%, #0f1115 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.login-box {
  width: 420px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 40px 36px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.login-logo {
  width: 64px; height: 64px;
  background: var(--badge-bg); color: #fff;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; letter-spacing: 1px;
  margin: 0 auto 18px;
  position: relative; overflow: hidden;
}
.login-logo::before, .login-logo::after {
  content:''; position:absolute; left:0; right:0; height:10px;
  background-image:
    linear-gradient(135deg, var(--red) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(225deg, var(--red) 25%, transparent 25%) 0 0 / 8px 8px;
  opacity: 0.8;
}
.login-logo::before { top: 0; }
.login-logo::after  { bottom: 0; transform: scaleY(-1); }
.login-logo span { position: relative; z-index: 1; }
.login-title {
  text-align: center; font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 4px;
}
.login-sub {
  text-align: center; font-size: 13px; color: var(--muted);
  margin-bottom: 24px; line-height: 1.5;
}
.login-brand { text-align: center; margin-bottom: 24px; }
.lb-eyebrow { font-family:'JetBrains Mono',monospace; font-weight:500; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.lb-word { display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:-.03em; font-size:40px; color:var(--text); line-height:.9; }
.lb-word svg { width:40px; height:40px; margin:0 1px; }
.lb-tag { display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.lb-dot { width:8px; height:8px; border-radius:50%; background:var(--red); }
.login-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--off); border-radius: 8px;
  margin-bottom: 18px;
}
.login-tab {
  flex: 1; border: none; background: transparent;
  padding: 9px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.login-tab.active { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.login-section { display: none; }
.login-section.active { display: block; }
.google-btn {
  width: 100%; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; transition: all 0.15s;
  margin-bottom: 12px;
}
.google-btn:hover { border-color: var(--border-light); background: var(--off); }
.google-btn i.fa-graduation-cap { color: var(--red); font-size: 17px; }
.login-divider {
  text-align: center; color: var(--muted); font-size: 11px;
  margin: 18px 0 12px; position: relative; letter-spacing: 2px;
}
.login-divider::before, .login-divider::after {
  content:''; position:absolute; top:50%; width:calc(50% - 24px); height:1px; background: var(--border);
}
.login-divider::before { left: 0; }
.login-divider::after  { right: 0; }
.login-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; outline: none; margin-bottom: 8px;
  transition: border-color 0.15s;
}
.login-input:focus { border-color: var(--red); }
.login-note { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.5; margin-top: 12px; }
.login-pilot {
  background: var(--amber-glow); border: 1px solid rgba(180,83,9,0.25);
  border-radius: 8px; padding: 10px 12px; margin-top: 14px;
  font-size: 11.5px; color: var(--amber); display: flex; gap: 8px; align-items: flex-start;
}
.login-pilot i { margin-top: 2px; }
.login-pilot strong { display: block; margin-bottom: 2px; }

/* roster picker (for pilot quick-login) */
.login-roster {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--off); margin-top: 8px;
}
.login-roster-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: 13px; transition: background 0.1s;
}
.login-roster-item:last-child { border-bottom: none; }
.login-roster-item:hover { background: var(--surface-2); }
.login-roster-item .avatar { width: 26px; height: 26px; border-radius: 50%; font-size: 11px; }

/* teacher account chooser */
.login-accounts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.login-account {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); transition: border-color .12s, background .12s, transform .05s;
}
.login-account:hover { border-color: var(--red); background: var(--off); }
.login-account:active { transform: scale(.99); }
.login-account .avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 13px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.google-btn i.fa-google { color: var(--red); font-size: 16px; }
.login-empty-roster {
  font-size: 11.5px; color: var(--muted); line-height: 1.55;
  padding: 14px; text-align: center;
}

/* ───────── APP SHELL ───────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* RAIL */
#rail {
  width: 64px; flex-shrink: 0;
  background: var(--badge-bg);
  display: flex; flex-direction: column;
  align-items: center; padding: 14px 0 12px;
  gap: 6px; z-index: 30;
}
.rail-logo {
  width: 40px; height: 40px;
  background: transparent;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.rail-logo svg { width: 34px; height: 34px; }
.rail-btn {
  width: 40px; height: 40px;
  border-radius: 8px; background: transparent; border: none;
  color: rgba(255,255,255,0.55); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: background 0.18s ease, color 0.18s ease, transform 0.14s cubic-bezier(.2,.7,.2,1), box-shadow 0.18s ease;
}
.rail-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.rail-btn.active { background: var(--red); color: #fff; box-shadow: 0 6px 16px -9px rgba(200,16,46,0.75); }
/* gold "you are here" indicator that slides in on the active item */
.rail-btn::before {
  content: ''; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 0; border-radius: 2px; background: var(--gold, #eccb78);
  transform: translateY(-50%); transition: height 0.22s cubic-bezier(.2,.7,.2,1);
}
.rail-btn.active::before { height: 22px; }
.rail-btn .tip {
  position: absolute; left: calc(100% + 12px);
  background: #2a2e36; color: #fff;
  font-size: 11px; padding: 5px 10px; border-radius: 5px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.rail-btn:hover .tip { opacity: 1; transform: translateX(0); }
.rail-sep { width: 24px; height: 1px; background: rgba(255,255,255,0.08); margin: 6px 0; }
.rail-avatar {
  margin-top: auto;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; cursor: pointer;
}

/* SIDEBAR */
#sidebar {
  width: 264px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  transition: width 0.3s, opacity 0.3s;
}
#sidebar.collapsed { width: 0; opacity: 0; pointer-events: none; }

.sb-head {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.sb-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.sb-title {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
}
.sb-meta {
  margin-top: 6px; font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}

/* ── course switcher (Photo ↔ A/V), grouped by subject track ── */
#sb-course-switch { margin-bottom: 14px; }
.course-switch {
  display: flex; flex-direction: column; gap: 3px; padding: 4px;
  background: var(--off); border: 1px solid var(--border); border-radius: 11px;
}
.cs-track {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 4px 3px 9px; border-radius: 8px;
}
.cs-track-name {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-track-name i { font-size: 12.5px; color: var(--muted); width: 14px; text-align: center; flex-shrink: 0; }
.cs-levels { display: flex; gap: 3px; flex-shrink: 0; }
.cs-opt {
  min-width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 11px; border: none; background: transparent; cursor: pointer;
  border-radius: 7px; font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; color: var(--muted2); white-space: nowrap;
  transition: background .14s, color .14s, box-shadow .14s;
}
.cs-opt:hover { color: var(--text); background: var(--surface-2); }
.cs-opt.active {
  background: var(--red); color: #fff;
  box-shadow: 0 1px 4px rgba(200,16,46,0.28);
}
.cs-opt.active i { color: #fff; }

/* ── section (period) switcher ── */
#sb-section-switch { margin-top: 12px; position: relative; }
/* compact one-click period chips (preferred for a handful of short labels) */
.sec-switch { display: flex; flex-wrap: wrap; gap: 4px; }
.sec-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 8px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--muted2); cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.sec-chip > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.sec-chip i { font-size: 10px; color: var(--muted); }
.sec-chip:hover { color: var(--text); border-color: var(--border-light); }
.sec-chip .sc-n {
  font-size: 9.5px; font-weight: 700; color: var(--muted2);
  background: var(--off); border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
}
.sec-chip.active {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 1px 4px rgba(200,16,46,0.24);
}
.sec-chip.active i { color: #fff; }
.sec-chip.active .sc-n { background: rgba(255,255,255,0.22); color: #fff; }
.sec-switch-single {
  font-size: 11.5px; font-weight: 600; color: var(--muted2);
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; background: var(--off); border: 1px solid var(--border); border-radius: 8px;
}
.sec-switch-single i { color: var(--red); }
.sec-switch-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.sec-switch-btn:hover { border-color: var(--red); background: var(--off); }
.sec-switch-btn i:first-child { color: var(--red); }
.sec-switch-btn .ss-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-switch-btn .ss-caret { font-size: 9px; color: var(--muted); }
.ss-count {
  font-size: 10px; font-weight: 700; color: var(--muted2);
  background: var(--off); border: 1px solid var(--border); border-radius: 20px;
  padding: 1px 7px; min-width: 18px; text-align: center;
}
.sec-switch-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14); padding: 5px;
  display: none; flex-direction: column; gap: 2px;
}
.sec-switch-menu.open { display: flex; }
.ss-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; background: none; border: none; border-radius: 7px;
  font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; text-align: left;
}
.ss-opt span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-opt i { color: var(--muted); width: 13px; }
.ss-opt:hover { background: var(--off); }
.ss-opt.active { background: var(--red-glow); color: var(--red); }
.ss-opt.active i { color: var(--red); }

.sb-search {
  padding: 12px 12px 4px;
  position: relative;
}
.sb-search input {
  width: 100%; padding: 8px 10px 8px 32px;
  background: var(--off); border: 1px solid transparent;
  border-radius: 7px; font-size: 12.5px; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.sb-search input:focus { border-color: var(--border-light); background: var(--surface-2); }
.sb-search i {
  position: absolute; left: 22px; top: 50%; transform: translateY(-25%);
  font-size: 11px; color: var(--muted);
}

/* min-height:0 lets this flex child shrink below its content height so its own
   overflow-y:auto actually scrolls — without it the flexbox min-height:auto trap
   grows the nav to full content height and #sidebar's overflow:hidden clips the
   bottom (account + sync row) with no scrollbar on short viewports. */
#sb-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#sb-nav::-webkit-scrollbar { width: 4px; }
#sb-nav::-webkit-scrollbar-thumb { background: #d0d2d6; border-radius: 2px; }

.sb-section { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #9aa0a6; padding: 14px 10px 6px; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  background: transparent; border: none; width: 100%;
  text-align: left; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--muted2);
  transition: background 0.15s, color 0.15s;
  margin-bottom: 1px;
}
.sb-item:hover { background: var(--off); color: var(--text); }
.sb-item.active { background: var(--red); color: #fff; }
.sb-item.active i { color: #fff; }
.sb-item i { width: 16px; font-size: 12px; color: inherit; flex-shrink: 0; }
.sb-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 100px;
  background: var(--off); color: var(--muted);
}
.sb-item.active .badge { background: rgba(255,255,255,0.2); color: #fff; }
.sb-item.done .check { color: var(--green); font-size: 11px; }
.sb-item.locked { opacity: 0.5; cursor: not-allowed; }
.sb-item.locked .lock { color: #c0c4ca; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   PR1 · ONE NAVIGATION — the desktop icon strip is gone; the sidebar
   is the whole map. (On phones the #rail stays as the bottom tab bar.)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 821px){ body.nav-teacher #rail, body.nav-student #rail { display: none !important; } }

/* #sb-nav becomes a column so the utility cluster can pin to the bottom */
#sb-nav { display: flex; flex-direction: column; }

/* THE scroll fix. The .sb-sub accordions use overflow:hidden for their open/close
   animation — and per the flex spec, a flex item with overflow:hidden has an
   implied min-height:0, so the flex algorithm is free to SHRINK it. When the nav
   overflowed, instead of #sb-nav scrolling, the accordions got squeezed and their
   lower items (e.g. Points Log) were clipped with no way to scroll to them.
   Locking every nav child (except the deliberate collapsing .sb-spacer) to
   flex-shrink:0 forces #sb-nav to overflow and scroll instead. Verified live. */
#sb-nav > *:not(.sb-spacer) { flex-shrink: 0; }

/* expandable primary group (Classes) — both a header and an expander */
.sb-group-hd .chev { margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .18s ease; }
.sb-group-hd.open .chev { transform: rotate(90deg); }
/* "inside this group" = subtle (not the full-red primary highlight) so the active
   sub-item is what reads as the destination */
.sb-item.sb-group-hd.active { background: transparent; color: var(--text); }
.sb-item.sb-group-hd.active > i:first-child { color: var(--red); }
.sb-group-hd.active .chev { color: var(--muted); }
.sb-sub { max-height: 0; overflow: hidden; transition: max-height .26s ease; margin: 0 0 3px 13px; border-left: 1px solid var(--border); padding-left: 5px; }
.sb-sub.open { max-height: 1200px; }  /* headroom for a teacher with many sections/tools; #sb-nav scrolls past it */
.sb-subitem { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border-radius: 7px;
  background: transparent; border: none; text-align: left; cursor: pointer; font-size: 12.5px; font-weight: 500;
  color: var(--muted); transition: background .15s, color .15s; margin-bottom: 1px; }
.sb-subitem:hover { background: var(--off); color: var(--text); }
.sb-subitem.active { background: var(--off); color: var(--text); font-weight: 600; }
.sb-subitem i { width: 15px; font-size: 11px; flex-shrink: 0; opacity: .85; }
.sb-subitem .badge { margin-left: auto; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 100px;
  background: var(--red-glow, #fdecef); color: var(--red); }

/* utility cluster — pinned to the bottom, deliberately muted */
/* The util cluster used to pin with margin-top:auto — but an auto-margin child in
   an overflow:auto flex column BREAKS the container's scrolling, so when the nav
   overflowed (e.g. Mustang Media expanded) the bottom items got clipped and were
   unreachable. Pin instead with a collapsible <.sb-spacer> sibling: it grows to
   push the utils down when the nav is short, and collapses to 0 when the nav
   overflows so everything scrolls normally. */
.sb-util { flex: 0 0 auto; padding-top: 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.sb-util .sb-item { color: var(--muted); font-size: 12.5px; }
.sb-util .sb-item i { color: var(--muted); }
.sb-spacer { flex: 1 1 auto; min-height: 0; }
/* Tools launcher docked in the sidebar (was a floating FAB when the rail existed) */
#ns-tools-launch.nst-sb { color: var(--muted); font-size: 12.5px; position: relative; }
#ns-tools-launch.nst-sb .nst-badge { margin-left: auto; position: static; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--red); color: #fff; font: 700 10px/18px system-ui; text-align: center; padding: 0 5px; box-shadow: none; }

/* account row at the very bottom (relocated from the rail) */
.sb-acct { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 4px; padding: 8px 10px;
  border-radius: 8px; background: transparent; border: none; cursor: pointer; text-align: left; transition: background .15s; }
.sb-acct:hover { background: var(--off); }
.sb-acct .av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sb-acct .who { flex: 1; min-width: 0; }
.sb-acct .who .nm { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct .who .rl { font-size: 10px; color: var(--muted); }
.sb-acct .go { font-size: 11px; color: var(--muted); }

.sb-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: #fafafa;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted);
}
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #c8cbd0; flex-shrink: 0; }
.sync-dot.ok { background: var(--green); }
.sync-dot.busy { background: var(--amber); animation: blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* MAIN */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--page-bg); }
#topbar {
  height: 54px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px; flex-shrink: 0;
  position: sticky; top: 0; z-index: 20;
}
.tb-toggle {
  width: 30px; height: 30px;
  background: var(--off); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; color: var(--muted2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all 0.15s;
}
.tb-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-light); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumb strong { color: var(--text); font-weight: 600; }
.crumb i { font-size: 9px; color: #c0c4ca; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.role-pill {
  background: var(--off); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 12px;
  font-size: 11.5px; font-weight: 600; color: var(--muted2);
  display: flex; align-items: center; gap: 6px;
}
.role-pill i { color: var(--red); font-size: 11px; }
.tb-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  transition: all 0.15s;
}
.tb-btn:hover { border-color: var(--border-light); background: var(--off); }
.tb-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.tb-btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.tb-btn.ghost { background: transparent; border: none; }
.tb-btn.ghost:hover { background: var(--off); }

#content {
  flex: 1; overflow-y: auto;
  padding: 28px 32px 60px;
}
@media (min-width: 2200px) {
  #content { padding: 32px 48px 80px; }
  #sidebar { width: 300px; }
  .grid-4 { grid-template-columns: repeat(5, 1fr); }
  .grid-3 { grid-template-columns: repeat(4, 1fr); }
  .grid-2 { grid-template-columns: repeat(3, 1fr); }
  .course-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .modules-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
  .std-stats { grid-template-columns: repeat(6, 1fr); }
  .dash-hero .h-title { font-size: 38px; }
  .unit-head { grid-template-columns: 160px 1fr auto; }
}
@media (min-width: 3000px) {
  #content { padding: 36px 64px 100px; }
  #sidebar { width: 320px; }
  .grid-4 { grid-template-columns: repeat(6, 1fr); }
  .grid-3 { grid-template-columns: repeat(5, 1fr); }
  .course-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
#content::-webkit-scrollbar { width: 8px; }
#content::-webkit-scrollbar-thumb { background: #d0d2d6; border-radius: 4px; }
.page-inner { max-width: clamp(1180px, 92%, 1900px); margin: 0 auto; }

/* PAGE TITLES */
.page { display: none; }
.page.active { display: block; animation: fadeUp 0.34s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:translateY(0); } }
/* Background refresh (same-route re-render): no fade — the content updates in place
   instead of flashing/jiggling each time a cloud sync or poll re-renders the page. */
body.no-page-fade .page.active, body.no-page-fade .page.active .cc-grid > * { animation: none !important; }

.page-h1 {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 4px;
}
.page-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head-row .page-h1 { margin-bottom: 4px; }

.sec-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}

/* CARDS */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 20px 22px; }

/* GRIDS */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 980px){
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}

/* STAT CARDS */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
}
.stat .stat-icon {
  width: 32px; height: 32px;
  background: var(--red-glow); color: var(--red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; font-size: 13px;
}
.stat .stat-icon.green { background: var(--green-glow); color: var(--green); }
.stat .stat-icon.amber { background: var(--amber-glow); color: var(--amber); }
.stat .stat-icon.blue  { background: var(--blue-glow); color: var(--blue); }
.stat .stat-label { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.stat .stat-value { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stat .stat-sub { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* CHIP */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
  background: var(--off); color: var(--muted2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.chip.red    { background: var(--red-glow); color: var(--red); border-color: rgba(200,16,46,0.2); }
.chip.green  { background: var(--green-glow); color: var(--green); border-color: rgba(21,128,61,0.2); }
.chip.amber  { background: var(--amber-glow); color: var(--amber); border-color: rgba(180,83,9,0.2); }
.chip.blue   { background: var(--blue-glow); color: var(--blue);  border-color: rgba(29,78,216,0.2); }
.chip.dark   { background: var(--badge-bg); color: #fff; border-color: var(--badge-bg); }
.chip.outline { background: transparent; }
.chip i { font-size: 8px; }

/* AVATAR */
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11.5px;
  flex-shrink: 0;
}
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.avatar.xl { width: 72px; height: 72px; font-size: 22px; }

/* PROGRESS BAR */
.prog { height: 6px; background: #ebebef; border-radius: 100px; overflow: hidden; }
.prog .fill { height: 100%; background: var(--red); border-radius: 100px; transition: width 0.4s ease; }
.prog .fill.green { background: var(--green); }
.prog .fill.amber { background: var(--amber); }
.prog .fill.thin { height: 4px; }

/* UPLOAD PROGRESS — per-file bar: lesson-block transient row + turn-in in-chip.
   Tokens are all dark-mode mapped, so no theme override needed. */
.ul-uploading {
  display: flex; align-items: center; gap: 9px;
  box-sizing: border-box; min-height: 60px; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--card);
  font-size: 12px; animation: slideUp .18s ease;
}
.ul-uploading > i { color: var(--gold, #eccb78); flex-shrink: 0; }
.ul-uploading .ulg-name {
  flex: 0 1 auto; min-width: 0; max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--text);
}
.ulg-track { flex: 1 1 auto; height: 6px; min-width: 40px; background: var(--off); border-radius: 100px; overflow: hidden; }
.ulg-fill { display: block; height: 100%; width: 0; background: var(--gold, #eccb78); border-radius: 100px; transition: width .2s ease; }
.ulg-pct { flex-shrink: 0; min-width: 34px; text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; color: var(--muted); }
/* indeterminate (Supabase fallback — no byte events): a sweeping chunk */
.ul-uploading.indet .ulg-fill,
.ul-chip.is-uploading.indet .ulg-fill { width: 38% !important; animation: ulgIndet 1.05s ease-in-out infinite; }
@keyframes ulgIndet { 0% { transform: translateX(-115%); } 100% { transform: translateX(285%); } }
/* turn-in in-chip variant: the bar sits where the file size normally shows */
.ul-chip.is-uploading .fn { flex: 0 1 auto; max-width: 45%; }
.ul-chip.is-uploading .ulg-track { margin: 0 4px; }
.ul-chip.is-uploading > i { color: var(--gold, #eccb78); }

/* OPEN-IN-DRIVE — teacher jumps straight to the mirrored copy in their own Drive.
   #C8961E is a legible gold on both light chips and the dark grading pane. */
.ns-drivebtn { flex-shrink: 0; color: #C8961E; cursor: pointer; padding: 2px 5px; border-radius: 5px; line-height: 1; }
.ns-drivebtn:hover { background: var(--off); }
.ti-att-link .ns-drivebtn i { color: #C8961E; }   /* beat turn-in's .ti-att-link i muted rule */
/* The grading drive-row lives in the always-dark work pane → hard-coded dark, not themed */
.gs-drive-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.1); }
.gs-drive-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a909b; display: inline-flex; align-items: center; gap: 6px; }
.gs-drive-lbl i { color: #C8961E; }
.gs-drive-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; font-size: 12px; font-weight: 600; color: #e7eaef; text-decoration: none; padding: 5px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: #23272e; }
.gs-drive-chip:hover { border-color: #C8961E; }
.gs-drive-chip i { color: #C8961E; flex-shrink: 0; }
.gs-drive-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* AUTHORSHIP CUE — "pasted" flag on a written response (teacher-only). Neutral
   amber, not alarming red: it's a cue to look closer, not an accusation. */
.paste-flag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; vertical-align: middle;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--amber, #b45309); background: rgba(180,83,9,.10); border: 1px solid rgba(180,83,9,.28);
  border-radius: 6px; padding: 2px 7px; }
.gs-paste-flag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #f0a23b; background: rgba(240,162,59,.13); border: 1px solid rgba(240,162,59,.30);
  border-radius: 6px; padding: 1px 6px; }

/* DRIVE-LINK SHARING CHECK badge (persona David) — teacher-only, self-probing.
   Literal colors so it reads on both the light panels and the dark grading pane. */
.nsds { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; vertical-align: middle;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(140,144,155,.35); color: #8a909b; white-space: nowrap; }
.nsds i { font-size: 11px; }
.nsds-checking { opacity: .6; }
.nsds-ok { color: #2fa365; border-color: rgba(47,163,101,.42); background: rgba(47,163,101,.12); }
.nsds-ok i { color: #2fa365; }
.nsds-warn { color: #e0912f; border-color: rgba(224,145,47,.42); background: rgba(224,145,47,.12); }
.nsds-warn i { color: #e0912f; }

/* COURSE BADGE (checkered) */
.cbadge {
  width: 132px; height: 132px;
  border-radius: 16px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.07), transparent 55%),
    linear-gradient(165deg, #1f232a 0%, #0c0e11 100%);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: #fff; flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 22px rgba(0,0,0,0.20);
}
/* film-strip perforations down both edges */
.cbadge::before, .cbadge::after {
  content:''; position:absolute; top:11px; bottom:11px; width:7px; z-index:1;
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 2.1px, transparent 2.5px);
  background-size: 7px 15px; background-repeat: repeat-y;
  opacity: 0.9;
}
.cbadge::before { left: 7px; }
.cbadge::after  { right: 7px; }
.cbadge .b-mark {
  font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--m-accent, var(--red)); position: relative; z-index: 2;
}
.cbadge .b-num  {
  font-size: 52px; font-weight: 800; line-height: 0.92; position: relative; z-index: 2;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.cbadge .b-tag  {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--m-accent, var(--red)); position: relative; z-index: 2; white-space: nowrap;
  padding-top: 3px; margin-top: 1px; border-top: 1px solid rgba(255,255,255,0.10);
}

/* ───────── TEACHER DASHBOARD ───────── */
.dash-hero {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 32px 36px; margin-bottom: 22px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  position: relative; overflow: hidden;
}
.dash-hero::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 280px;
  background-image:
    linear-gradient(135deg, rgba(200,16,46,0.08) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(225deg, rgba(200,16,46,0.08) 25%, transparent 25%) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
          mask-image: linear-gradient(to left, #000 0%, transparent 100%);
  pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero .hero-badge {
  width: 92px; height: 92px; border-radius: 14px;
  background: var(--badge-bg); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.dash-hero .hero-badge::before, .dash-hero .hero-badge::after {
  content:''; position:absolute; left:0; right:0; height:12px;
  background-image:
    linear-gradient(135deg, var(--red) 25%, transparent 25%) 0 0 / 9px 9px,
    linear-gradient(225deg, var(--red) 25%, transparent 25%) 0 0 / 9px 9px;
  opacity: 0.85;
}
.dash-hero .hero-badge::before { top: 0; }
.dash-hero .hero-badge::after  { bottom: 0; transform: scaleY(-1); }
.dash-hero .hero-badge .mark { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: var(--red); position: relative; z-index: 1; }
.dash-hero .hero-badge .num { font-size: 38px; font-weight: 800; line-height: 1; position: relative; z-index: 1; }
.dash-hero .h-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 8px; }
.dash-hero .h-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--border); min-width: 30px; }
.dash-hero .h-title { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 6px; }
.dash-hero .h-sub { font-size: 14px; color: var(--muted2); line-height: 1.5; max-width: 540px; }
.dash-hero .h-stats { display: flex; gap: 26px; padding-left: 22px; border-left: 1px solid var(--border); }
.dash-hero .h-stat .val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.dash-hero .h-stat .lbl { font-size: 10.5px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; }

/* ───────── DASHBOARD WIDGET REORDER ───────── */
.dash-widget { position: relative; }
/* the dashed gap that shows where a dragged card will land */
.dw-placeholder {
  border: 2px dashed color-mix(in srgb, var(--red) 42%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--red) 6%, transparent);
  box-sizing: border-box;
}
/* the lifted card following the cursor */
.dash-widget.dragging {
  opacity: 1 !important;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.30), 0 4px 12px rgba(15, 23, 42, 0.16) !important;
  cursor: grabbing !important;
}
body.dw-grabbing, body.dw-grabbing * { cursor: grabbing !important; }
.reorder-handle { -webkit-touch-callout: none; }

/* COURSE CARDS (teacher dashboard) */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; margin-bottom: 28px; }
.course-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.course-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.course-card .stripe { height: 4px; background: var(--red); }
.course-card .stripe.photo2 { background: var(--purple); }
.course-card .stripe.av { background: var(--blue); }
.course-card .stripe.av2 { background: var(--green); }
.course-card .cc-body { padding: 18px 20px 16px; }
.course-card .cc-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 1px; margin-bottom: 4px; }
.course-card .cc-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; line-height: 1.25; }
.course-card .cc-stats { display: flex; gap: 16px; }
.course-card .cc-stat { display: flex; flex-direction: column; }
.course-card .cc-stat strong { font-size: 17px; font-weight: 700; }
.course-card .cc-stat span { font-size: 10.5px; color: var(--muted); }
.course-card .cc-foot {
  padding: 12px 20px; border-top: 1px solid var(--border);
  background: #fafafb;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--muted);
}

/* GRADEBOOK / ROSTER */
.toolbar {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 14px;
}
.tb-input {
  flex: 1; min-width: 200px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; outline: none; transition: border-color 0.15s;
}
.tb-input:focus { border-color: var(--red); }
.pf-row { display: flex; gap: 4px; padding: 3px; background: var(--off); border-radius: 7px; }
.pf-btn {
  background: transparent; border: none;
  padding: 6px 12px; border-radius: 5px;
  font-size: 12px; font-weight: 600; color: var(--muted2);
  cursor: pointer; transition: all 0.15s;
}
.pf-btn:hover { color: var(--text); }
.pf-btn.active { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.gb-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.gb-scroll { overflow-x: auto; max-width: 100%; }
table.gb {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
table.gb thead {
  position: sticky; top: 0;
  background: #fafafb; z-index: 2;
}
table.gb th {
  text-align: left; padding: 11px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.gb td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; vertical-align: middle;
}
table.gb tbody tr:hover { background: var(--off); }
table.gb tbody tr:last-child td { border-bottom: none; }
/* Class-average footer row — themed for light + dark (was a hardcoded #fafafb
   inline background that stayed white in dark mode). The #gb-table id keeps it
   above the sticky first-column background overrides. */
#gb-table tfoot .gb-avg-row td { background: var(--off); font-weight: 700; }
#gb-table tfoot .gb-avg-row td:first-child { color: var(--text); }

/* ── "Turned in" panel (per-class turned-in work + one-tap grading) ── */
.cti-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 18px; overflow: hidden; }
.cti-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14px; color: var(--text); }
.cti-head i { color: var(--red); }
.cti-badge { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--red); border-radius: 20px; padding: 3px 10px; }
.cti-badge.done { background: var(--green); }
.cti-empty { padding: 20px 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cti-empty i { color: var(--green); }
.cti-list { display: flex; flex-direction: column; }
.cti-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cti-row:last-child { border-bottom: none; }
.cti-count { flex: 0 0 auto; width: 56px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.cti-count .n { font-size: 22px; font-weight: 800; line-height: 1; }
.cti-count .u { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted2); }
.cti-count.major .n { color: var(--red); }
.cti-count.daily .n { color: var(--amber); }
.cti-count.done .n { color: var(--green); }
.cti-info { flex: 1; min-width: 0; }
.cti-info .t { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cti-info .m { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.cti-btn { flex: 0 0 auto; }
.cti-ok { flex: 0 0 auto; color: var(--green); font-size: 20px; }
.chip.blue { color: #1d4ed8; background: rgba(29,78,216,.12); }
body.theme-dark .chip.blue { color: #7aa7ff; background: rgba(122,167,255,.14); }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell .name { font-weight: 600; font-size: 13px; }
.name-cell .sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }

.grade-pill {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 6px;
  background: var(--off); color: var(--text);
  min-width: 44px; justify-content: center;
}
.grade-pill.A { background: var(--green-glow); color: var(--green); }
.grade-pill.B { background: var(--blue-glow); color: var(--blue); }
.grade-pill.C { background: var(--amber-glow); color: var(--amber); }
.grade-pill.F { background: var(--red-glow); color: var(--red); }
.grade-pill.dash { color: #c0c4ca; background: #f7f7f8; }

/* ═════════ STANDARDS & TEKS PAGE (S3 / S14) ═════════ */
.std-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 6px;
}
.std-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r, 12px);
  padding: 16px 18px;
}
.std-stat-v { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.std-stat-l { font-size: 12.5px; font-weight: 700; color: var(--muted2); margin-top: 8px; }
.std-stat-s { font-size: 11px; color: var(--muted); margin-top: 2px; }

table.std-matrix, table.std-mastery {
  width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface);
}
table.std-matrix th, table.std-mastery th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted2); background: var(--off); border-bottom: 1px solid var(--border);
  padding: 9px 10px; text-align: left; position: sticky; top: 0; z-index: 1;
}
table.std-matrix td, table.std-mastery td {
  padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top;
}
table.std-matrix tbody tr:hover, table.std-mastery tbody tr:hover { background: var(--card2); }
.std-modh { text-align: center !important; min-width: 38px; white-space: nowrap; }
.std-code { white-space: nowrap; }
.std-cite {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500;
  color: var(--red); background: var(--red-glow); padding: 2px 6px; border-radius: 5px;
}
.std-text { color: var(--muted2); line-height: 1.45; max-width: 460px; }
.std-cell { text-align: center; color: var(--green); position: relative; }
.std-cell.on { background: var(--green-glow); }
.std-cell i { font-size: 11px; }
.std-cnt {
  font-size: 9.5px; font-weight: 800; vertical-align: 2px; margin-left: 2px; color: var(--green);
}
.std-total { text-align: center; font-weight: 700; color: var(--text); }
.std-grouprow td {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--off); padding: 7px 10px;
}
.std-note {
  display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 8px;
  background: var(--card2); border: 1px solid var(--border); border-radius: var(--r, 12px);
  padding: 14px 16px; font-size: 12.5px; color: var(--muted2); line-height: 1.55;
}
.std-note i { color: var(--blue); margin-top: 2px; }
@media (max-width: 820px){
  .std-stats { grid-template-columns: repeat(2, 1fr); }
}

.bar-cell { min-width: 70px; }
.bar-cell .pct { font-size: 11px; color: var(--muted); margin-bottom: 3px; }

.flag-btn {
  background: transparent; border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 8px; font-size: 11px;
  color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.flag-btn:hover { color: var(--red); border-color: var(--red); }
.flag-btn.on { color: #fff; background: var(--red); border-color: var(--red); }

.icon-btn {
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 5px; cursor: pointer; color: var(--muted2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; transition: all 0.15s;
}
.icon-btn:hover { background: var(--off); color: var(--text); border-color: var(--border-light); }

/* DISTRIBUTION (sparkline / mini bars) */
.dist-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.dist-bar {
  flex: 1; min-width: 18px;
  background: var(--red-glow); border-radius: 3px 3px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--red);
  padding-bottom: 2px;
}
.dist-bar.green { background: var(--green-glow); color: var(--green); }
.dist-bar.amber { background: var(--amber-glow); color: var(--amber); }
.dist-bar.blue { background: var(--blue-glow); color: var(--blue); }

/* ───────── MODULES LIST (student dashboard) ───────── */
.module-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 18px;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.module-row:hover { border-color: var(--border-light); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.module-row.locked { opacity: 0.55; cursor: not-allowed; }
.module-row.locked:hover { transform: none; box-shadow: none; border-color: var(--border); }
/* MODULE NUM TILE — uses --m-accent when in a [data-mod-accent] ancestor */
.module-row .m-num {
  width: 56px; height: 56px;
  background: var(--badge-bg); color: #fff;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; flex-shrink: 0;
  letter-spacing: 0.5px; position: relative; overflow: hidden;
}
.module-row .m-num::before {
  content:''; position:absolute; inset:0; opacity:0.4;
  background-image:
    linear-gradient(135deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(225deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 8px 8px;
}
.module-row .m-num span { position: relative; z-index: 1; }
.module-row .m-info { flex: 1; min-width: 0; }
.module-row .m-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 3px; }
.module-row .m-sub { font-size: 11.5px; color: var(--muted); }
.module-row .m-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.module-row .m-right .pct { font-size: 11px; color: var(--muted); text-align: right; margin-bottom: 4px; }
.module-row .m-right .prog { width: 100px; }

/* GRID variant */
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.modules-grid .m-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.modules-grid .m-card::before {
  content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px;
  background-image:
    linear-gradient(135deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 10px 10px,
    linear-gradient(225deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 10px 10px;
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(circle at top right, #000 30%, transparent 70%);
          mask-image: radial-gradient(circle at top right, #000 30%, transparent 70%);
  pointer-events: none;
}
.modules-grid .m-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.modules-grid .m-card.locked { opacity: 0.55; cursor: not-allowed; }
.modules-grid .m-card .banner { height: 6px; background: var(--m-accent, var(--red)); }
.modules-grid .m-card .body { padding: 20px 22px 18px; }
.modules-grid .m-card .num-line { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--m-accent, var(--muted)); letter-spacing: 1.5px; margin-bottom: 8px; font-weight: 600; text-transform: uppercase; }
.modules-grid .m-card .title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 6px; }
.modules-grid .m-card .desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; min-height: 36px; }
.modules-grid .m-card .foot { display: flex; align-items: center; justify-content: space-between; }
.modules-grid .m-card .foot .pct { font-size: 11px; color: var(--muted); }
.modules-grid .m-card .foot .prog { width: 100px; }
.modules-grid .m-card .foot .prog .fill { background: var(--m-accent, var(--red)); }

/* TIMELINE variant */
.modules-timeline { position: relative; padding-left: 32px; }
.modules-timeline::before {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: 14px;
  width: 2px; background: var(--border);
}
.modules-timeline .tl-item {
  position: relative; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px 14px;
  cursor: pointer; transition: all 0.2s;
}
.modules-timeline .tl-item::before {
  content: ''; position: absolute; left: -22px; top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
}
.modules-timeline .tl-item.done::before { background: var(--green); border-color: var(--green); }
.modules-timeline .tl-item.active::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px var(--red-glow); }
.modules-timeline .tl-item:hover { border-color: var(--border-light); box-shadow: var(--shadow-hover); }
.modules-timeline .tl-item.locked { opacity: 0.55; cursor: not-allowed; }
.modules-timeline .tl-week { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: 1px; margin-bottom: 4px; }
.modules-timeline .tl-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2px; }
.modules-timeline .tl-meta { font-size: 11.5px; color: var(--muted); }
.modules-timeline .tl-bar { margin-top: 10px; }

/* ───────── MODULE VIEWER ───────── */
.unit-head {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 24px 26px; margin-bottom: 14px;
  display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 26px;
  position: relative; overflow: hidden;
}
.unit-head::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 220px;
  background: linear-gradient(to left, var(--m-accent), transparent);
  opacity: 0.05; pointer-events: none;
}
.unit-head > * { position: relative; z-index: 1; }
.unit-head .cbadge .b-mark { color: var(--m-accent); }
.unit-head .cbadge .b-tag  { color: var(--m-accent); }
.unit-head .u-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--m-accent); margin-bottom: 6px; }
.unit-head .u-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; }
.unit-head .u-desc { font-size: 13.5px; color: var(--muted2); max-width: 560px; line-height: 1.55; margin-bottom: 12px; }
.unit-head .u-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.unit-head .u-right {
  border-left: 1px solid var(--border); padding-left: 24px;
  text-align: left; min-width: 170px; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
.unit-head .u-prog-num { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.unit-head .u-prog-num strong { color: var(--text); font-size: 16px; }
.unit-head .u-right .prog .fill { background: var(--m-accent); }
.unit-head .u-right .prog .fill.green { background: var(--green); }

/* ───────── MODULE READER (Blackboard-style contents + document) ───────── */
.mod-reader {
  display: grid; grid-template-columns: 264px 1fr;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-bottom: 22px; min-height: 520px;
}
.reader-nav {
  border-right: 1px solid var(--border); background: #fafafb;
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: start; max-height: calc(100vh - 54px);
}
.reader-nav .rn-top { padding: 16px 16px 13px; border-bottom: 1px solid var(--border); }
.rn-title {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 11px; display: flex; align-items: center; gap: 7px;
}
.rn-title i { font-size: 11px; }
.rn-prog-row { font-size: 12px; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.reader-nav .prog { height: 5px; border-radius: 99px; }
.reader-nav .prog .fill { background: var(--m-accent, var(--red)); }
.reader-nav .prog .fill.green { background: var(--green); }
.rn-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rn-item {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: transparent; border: none; cursor: pointer; border-radius: 9px;
  padding: 9px 10px; color: var(--text); font-family: inherit; transition: background 0.12s;
}
.rn-item:hover { background: rgba(0,0,0,0.045); }
.rn-item.active { background: var(--m-accent, var(--red)); color: #fff; }
.rn-ic { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rn-ic i { color: var(--green); font-size: 16px; }
.rn-item.active .rn-ic i { color: #fff; }
.rn-num {
  width: 23px; height: 23px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  background: #e6e7ea; color: var(--muted);
}
.rn-item.active .rn-num { background: rgba(255,255,255,0.25); color: #fff; }
.rn-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rn-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.rn-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.rn-item.active .rn-sub { color: rgba(255,255,255,0.82); }
.rn-here {
  margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  background: var(--m-accent, var(--red)); color: #fff; padding: 2px 7px; border-radius: 99px; flex-shrink: 0;
}

.reader-main { padding: 28px 32px; min-width: 0; }
.reader-doc { max-width: 740px; }
.reader-doc .dn-card:first-of-type { margin-top: 4px; }
.rd-head { border-bottom: 1px solid var(--border); padding-bottom: 15px; margin-bottom: 20px; }
.rd-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--m-accent, var(--red)); margin-bottom: 7px;
}
.rd-title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.rd-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border);
}
.rd-counter { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

@media (max-width: 860px){
  .mod-reader { grid-template-columns: 1fr; }
  .reader-nav { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--border); }
  .rn-list { flex-direction: row; flex-wrap: wrap; }
  .rn-item { width: auto; flex: 1 1 200px; }
  .reader-main { padding: 20px; }
}

/* LESSON LIST */
.lesson-list {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-bottom: 22px;
}
.lesson {
  border-top: 1px solid var(--border);
  transition: background 0.15s;
}
.lesson:first-child { border-top: none; }
.lesson.open { background: #fbfbfc; }
.lesson.locked { opacity: 0.55; }

.l-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer;
}
.l-head:hover { background: var(--off); }
.l-circle {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); border: 1.5px solid #c8ccd2;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted);
  flex-shrink: 0; transition: all 0.2s;
}
.lesson.open .l-circle { border-color: var(--red); color: var(--red); }
.lesson.done .l-circle {
  background: var(--green); border-color: var(--green); color: #fff;
}
/* lesson day circle gets module accent */
.lesson .l-circle { color: var(--m-accent, var(--muted)); }
.lesson.open .l-circle { border-color: var(--m-accent, var(--red)); color: var(--m-accent, var(--red)); background: var(--surface-2); }
.lesson.done .l-circle { background: var(--green); border-color: var(--green); color: #fff; }
.lesson.done .l-circle::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.lesson.done .l-circle span { display: none; }
.lesson .l-circle { position: relative; }

/* lesson list border colored by accent */
.lesson-list[data-mod-accent] { border-top: 3px solid var(--m-accent); }

.l-info { flex: 1; min-width: 0; }
.l-eyebrow {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); margin-bottom: 2px;
  display: flex; align-items: center; gap: 8px;
}
.l-eyebrow .type-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.8px;
  padding: 2px 7px; border-radius: 100px; text-transform: uppercase;
  background: var(--red-glow); color: var(--red);
}
.l-eyebrow .type-tag.warmup { background: rgba(107,114,128,0.12); color: var(--muted2); }
.l-eyebrow .type-tag.lesson  { background: var(--blue-glow); color: var(--blue); }
.l-eyebrow .type-tag.activity { background: var(--red-glow); color: var(--red); }
.l-eyebrow .type-tag.quiz    { background: var(--amber-glow); color: var(--amber); }
.l-eyebrow .type-tag.project { background: var(--badge-bg); color: #fff; }
.l-eyebrow .type-tag.reflection { background: var(--green-glow); color: var(--green); }
.l-eyebrow .cat-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--muted); padding: 2px 7px; border-radius: 100px;
  background: var(--off); border: 1px solid var(--border);
}
.l-eyebrow .cat-tag.major { color: var(--red); border-color: rgba(200,16,46,0.25); background: var(--red-glow); }
.l-eyebrow .teks-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(29,78,216,0.07); color: var(--blue);
  border: 1px solid rgba(29,78,216,0.18);
  cursor: help;
}
.l-eyebrow .teks-tag i { font-size: 9px; }

/* ═════════ S6 · COURSE PRESETS & FEATURE VISIBILITY ═════════ */
body.hide-rank .rank-card,
body.hide-rank .rank-ladder { display: none !important; }
body.hide-video .upload-area { display: none !important; }
body.hide-video .upload-area + .ul-files { display: none !important; }
body.hide-portfolio .pf-cta { display: none !important; }

.cp-presets { display: flex; flex-direction: column; gap: 9px; }
.cp-preset {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 11px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.cp-preset:hover { border-color: var(--border-light); }
.cp-preset.on { border-color: var(--red); background: var(--red-glow); }
.cp-preset input { margin-top: 3px; accent-color: var(--red); }
.cp-preset-t { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; }
.cp-preset-d { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

.cp-feats { display: flex; flex-direction: column; gap: 4px; }
.cp-feat {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 4px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.cp-feat:last-child { border-bottom: 0; }
.cp-feat-ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--off); color: var(--muted2);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.cp-feat-txt { flex: 1; display: flex; flex-direction: column; }
.cp-feat-t { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13.5px; }
.cp-feat-d { font-size: 12px; color: var(--muted); }
.cp-switch { width: 38px; height: 22px; appearance: none; -webkit-appearance: none;
  background: #d4d4d8; border-radius: 20px; position: relative; cursor: pointer; flex-shrink: 0;
  transition: background .18s; }
.cp-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cp-switch:checked { background: var(--green); }
.cp-switch:checked::after { transform: translateX(16px); }
.cp-switch:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.cp-mods { display: flex; flex-wrap: wrap; gap: 7px; }
.cp-modchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12px;
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  background: var(--green-glow); color: var(--green); border: 1px solid rgba(21,128,61,.2);
}
.cp-modchip.off { background: var(--off); color: var(--muted); border-color: var(--border); }
.cp-modchip i { font-size: 10px; }
.sb-item.mod-hidden { opacity: .5; }
.sb-item.mod-hidden .lbl::after { content: ' · hidden'; font-size: 10px; color: var(--muted); font-weight: 600; }

/* ═════════ S9 · TIME-CODED VIDEO REVIEW MODAL ═════════ */
#ns-review-modal { display: none; }
#ns-review-modal.open { display: block; }
.nsrv-backdrop { position: fixed; inset: 0; background: rgba(10,12,16,.6); z-index: 400; backdrop-filter: blur(2px); }
.nsrv-panel {
  position: fixed; z-index: 401; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(960px, 94vw); max-height: 92vh; overflow: hidden;
  background: var(--card); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
}
.nsrv-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.nsrv-eyebrow { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 6px; }
.nsrv-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; margin-top: 3px; }
.nsrv-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--off); cursor: pointer; color: var(--muted2); }
.nsrv-x:hover { background: var(--border); }
.nsrv-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; min-height: 0; flex: 1; }
.nsrv-left { padding: 18px 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; overflow: auto; }
#nsrv-video { width: 100%; border-radius: 11px; background: #000; aspect-ratio: 16/9; }
.nsrv-nomedia { aspect-ratio: 16/9; border: 1.5px dashed var(--border-light); border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }
.nsrv-nomedia i { font-size: 30px; color: var(--border-light); }
.nsrv-urlrow { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.nsrv-urlrow .field { flex: 1; }
.nsrv-timeline { position: relative; height: 34px; background: var(--off); border-radius: 8px; cursor: pointer; overflow: hidden; }
.nsrv-track { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red-glow); border-right: 2px solid var(--red); }
.nsrv-marker { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--amber); border: 0; padding: 0; cursor: pointer; transition: width .1s; }
.nsrv-marker::after { content: ''; position: absolute; top: -3px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.nsrv-marker:hover { width: 5px; }
.nsrv-addrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nsrv-right { padding: 18px 18px; display: flex; flex-direction: column; min-height: 0; }
.nsrv-notes-h { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.nsrv-badge { background: var(--badge-bg); color: #fff; font-size: 11px; border-radius: 20px; padding: 1px 8px; }
.nsrv-notes { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.nsrv-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; }
.nsrv-ts { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--red); background: var(--red-glow); border: 0; border-radius: 6px; padding: 3px 8px; cursor: pointer; flex-shrink: 0; }
.nsrv-ts:hover { background: var(--red); color: #fff; }
.nsrv-note-tx { flex: 1; font-size: 13.5px; line-height: 1.45; }
.nsrv-del { background: 0; border: 0; color: var(--muted); cursor: pointer; opacity: .5; padding: 2px; flex-shrink: 0; }
.nsrv-del:hover { opacity: 1; color: var(--red); }
.nsrv-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 12px; }
.nsrv-open { margin-top: 10px; }
@media (max-width: 720px){
  .nsrv-body { grid-template-columns: 1fr; }
  .nsrv-left { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ═════════ S8 · GROUP PROJECTS ═════════ */
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-top: 18px; }
.grp-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 16px; }
.grp-head { display: flex; align-items: center; gap: 10px; }
.grp-title-input {
  flex: 1; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--text);
  border: 0; border-bottom: 1.5px solid transparent; background: 0; padding: 2px 0;
}
.grp-title-input:hover { border-bottom-color: var(--border); }
.grp-title-input:focus { outline: 0; border-bottom-color: var(--red); }
.grp-del { background: 0; border: 0; color: var(--muted); cursor: pointer; padding: 4px; opacity: .55; }
.grp-del:hover { opacity: 1; color: var(--red); }
.grp-sub { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; flex-wrap: wrap; }
.grp-asgn { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grp-asgn span { font-family: 'Outfit', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); }
.grp-asgn select { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--off); color: var(--text); }
.grp-teks { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--blue); background: rgba(29,78,216,.07); border: 1px solid rgba(29,78,216,.18); padding: 3px 7px; border-radius: 5px; align-self: flex-end; cursor: help; }
.grp-members-h { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 8px; }
.grp-members-h span:first-child { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); }
.grp-graded { font-size: 11.5px; color: var(--muted); font-family: 'Outfit', sans-serif; }
.grp-members { display: flex; flex-direction: column; gap: 7px; }
.grp-member { display: grid; grid-template-columns: 1fr auto 56px auto; gap: 7px; align-items: center; }
.grp-m-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.grp-m-avatar { width: 26px; height: 26px; border-radius: 7px; background: var(--badge-bg); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.grp-m-name { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 6px 7px; font-size: 12.5px; background: var(--card); color: var(--text); }
.grp-m-role { border: 1px solid var(--border); border-radius: 7px; padding: 6px 7px; font-size: 12px; background: var(--off); color: var(--muted2); font-family: 'Outfit', sans-serif; font-weight: 600; }
.grp-m-grade { width: 56px; border: 1px solid var(--border); border-radius: 7px; padding: 6px 6px; font-size: 13px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.grp-m-grade:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
.grp-m-x { background: 0; border: 0; color: var(--muted); cursor: pointer; padding: 4px; opacity: .5; }
.grp-m-x:hover { opacity: 1; color: var(--red); }
.grp-empty-m { font-size: 12.5px; color: var(--muted); padding: 10px 0; }
.grp-addm { margin-top: 12px; }
.l-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.lesson.locked .l-title { color: var(--muted); }
.l-meta { display: flex; gap: 12px; margin-top: 5px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.l-meta span { display: inline-flex; align-items: center; gap: 5px; }

.l-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.l-status {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
  background: var(--surface-2); color: var(--red); border: 1px solid rgba(200,16,46,0.3);
}
.l-status.done { background: var(--green-glow); color: var(--green); border-color: rgba(21,128,61,0.25); }
.l-status.locked { background: var(--off); color: var(--muted); border-color: var(--border); }
.l-status.late { background: var(--amber-glow); color: var(--amber); border-color: rgba(180,83,9,0.25); }
.l-chev { color: var(--muted); font-size: 11px; transition: transform 0.2s; }
.lesson.open .l-chev { transform: rotate(90deg); color: var(--red); }

/* LESSON BODY */
.l-body {
  display: none;
  border-top: 1px solid var(--border);
  padding: 22px 24px 28px;
  background: var(--surface);
}
.lesson.open .l-body { display: block; animation: fadeUp 0.2s ease; }

/* STEP variant — pager */
.l-body.step-view { padding-bottom: 22px; }
.step-progress {
  display: flex; gap: 4px; margin-bottom: 18px;
}
.step-progress .pip {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--border);
  transition: background 0.3s;
}
.step-progress .pip.done { background: var(--green); }
.step-progress .pip.active { background: var(--red); }
.step-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
}
.step-actions .nav {
  display: flex; gap: 8px;
}
.step-counter { font-size: 12px; color: var(--muted); }

/* COMPACT lesson variant */
.lesson-list.compact .l-head { padding: 11px 16px; }
.lesson-list.compact .l-meta { display: none; }
.lesson-list.compact .l-title { font-size: 14px; }

/* ───────── BLOCK PACING (90-min class days) ───────── */
.pace-banner {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--m-accent, var(--red));
  border-radius: var(--r); padding: 16px 20px; margin-bottom: 14px;
}
.pace-banner-ic {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #f2f3f5;
  color: var(--m-accent, var(--red)); font-size: 18px;
}
.pace-banner .pb-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pace-banner .pb-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

.block-plan { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }

.block-folder {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
}
.block-folder.current { border-color: var(--m-accent, var(--red)); box-shadow: 0 0 0 1px var(--m-accent, var(--red)); }
.bf-head {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  cursor: pointer; user-select: none;
}
.bf-head:hover { background: var(--hover, #fafafb); }
.bf-num {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px;
  color: #fff; background: var(--m-accent, var(--red));
}
.block-folder.done .bf-num { background: var(--green); }
.bf-info { flex: 1; min-width: 0; }
.bf-eyebrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; font-size: 11px; }
.bf-tag {
  font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--m-accent, var(--red)); font-size: 10.5px;
}
.bf-eyebrow .muted { color: var(--muted); }
.bf-here {
  background: var(--m-accent, var(--red)); color: #fff; font-weight: 700;
  padding: 1px 8px; border-radius: 99px; font-size: 10px; letter-spacing: 0.3px;
}
.bf-ok { color: var(--green); font-weight: 700; }
.bf-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.bf-chev { color: var(--muted); transition: transform 0.2s; font-size: 13px; }
.block-folder.open .bf-chev { transform: rotate(180deg); }

.bf-body { display: none; padding: 0 18px 18px; }
.block-folder.open .bf-body { display: block; }

.bf-flow {
  display: flex; flex-direction: column; gap: 2px;
  background: #f7f7f9; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px;
}
.flow-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 4px; }
.flow-row + .flow-row { border-top: 1px dashed var(--border); }
.flow-t {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
  width: 76px; flex-shrink: 0; padding-top: 2px; font-weight: 600;
}
.flow-ic {
  width: 24px; flex-shrink: 0; text-align: center; color: var(--m-accent, var(--red)); font-size: 13px; padding-top: 1px;
}
.flow-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.flow-body strong { font-size: 13px; font-weight: 600; }
.flow-body span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── Step-by-step "Your steps today" ── */
.step-label, .bf-work-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.bf-steps {
  display: flex; flex-direction: column; gap: 2px;
  background: #f7f7f9; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 14px 8px; margin-bottom: 16px;
}
.step-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px; }
.step-item + .step-item { border-top: 1px dashed var(--border); }
.step-num {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
  color: #fff; background: var(--m-accent, var(--red)); margin-top: 1px;
}
.step-main { flex: 1; min-width: 0; }
.step-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.step-line strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.step-time {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted);
  font-weight: 600; flex-shrink: 0; white-space: nowrap;
}
.step-time i { color: var(--m-accent, var(--red)); margin-right: 3px; }
.step-detail { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* ── Do-Now / Exit-Ticket interactive cards ── */
.dn-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--m-accent, var(--red));
  border-radius: 10px; padding: 13px 15px; margin: 0 0 16px;
}
.dn-card.exit { margin: 16px 0 2px; }
.dn-card.answered { border-left-color: var(--green); background: #fafdfb; }
.dn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dn-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--m-accent, var(--red));
  display: flex; align-items: center; gap: 7px;
}
.dn-card.answered .dn-tag { color: var(--green); }
.dn-state {
  display: none; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  color: var(--green);
}
.dn-card.answered .dn-state { display: flex; }
.dn-prompt { font-size: 13.5px; color: var(--text); line-height: 1.55; font-weight: 500; margin-bottom: 10px; }
.dn-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: 13px; color: var(--text); line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: var(--surface-2);
}
.dn-input:focus { outline: none; border-color: var(--m-accent, var(--red)); box-shadow: 0 0 0 2px rgba(200,16,46,0.12); }
.dn-teacher {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
  font-style: italic; padding: 9px 11px; border: 1px dashed var(--border); border-radius: 8px; background: #fafafb;
}

.lesson-wu-wrap { margin: 0 0 16px; }   /* per-lesson warm-up sits at the top of the lesson body (photo2/av2) */
/* ── Daily Warm-Up card (a graded warm-up surfaced inside its block) ── */
.wu-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--m-accent, var(--red));
  border-radius: 10px; padding: 13px 15px; margin: 0 0 16px;
}
.wu-card.answered { border-left-color: var(--green); }
.wu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wu-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--m-accent, var(--red));
  display: flex; align-items: center; gap: 7px;
}
.wu-card.answered .wu-tag { color: var(--green); }
.wu-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--green); }
.wu-state.todo { color: var(--muted); }
.wu-state.scored { color: var(--m-accent, var(--red)); }
.wu-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); line-height: 1.35; margin-bottom: 4px; }
.wu-prompt { font-size: 13px; color: var(--text); line-height: 1.5; font-weight: 500; margin: 2px 0 10px; }
.wu-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.wu-video { margin: 8px 0 10px; }
.wu-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.wu-link {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--text); text-decoration: none; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.wu-link:hover { border-color: var(--m-accent, var(--red)); color: var(--m-accent, var(--red)); }
.wu-link i { color: var(--m-accent, var(--red)); }
.wu-watch { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text); line-height: 1.45; margin: 10px 0; padding: 8px 11px; background: var(--surface-2); border-radius: 8px; }
.wu-watch i { color: var(--m-accent, var(--red)); margin-top: 2px; }
.wu-qs { margin: 10px 0 12px; display: flex; flex-direction: column; gap: 11px; }
.wu-q-label { font-size: 13px; color: var(--text); font-weight: 600; line-height: 1.45; margin-bottom: 6px; }
.wu-turnin { width: 100%; justify-content: center; }
.wu-turnin.done { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.wu-teacher {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
  font-style: italic; padding: 9px 11px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2);
}
.dn-teacher i { color: var(--m-accent, var(--red)); }

/* ── "Watch & respond" — active follow-along on every video ── */
.watch-respond {
  margin-top: 10px; border: 1px solid var(--border);
  border-left: 3px solid var(--m-accent, var(--red));
  background: var(--surface); border-radius: 9px; padding: 11px 13px;
}
.watch-respond.answered { border-left-color: var(--green); background: #fafdfb; }
.wr-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--m-accent, var(--red)); display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.watch-respond.answered .wr-head { color: var(--green); }
.wr-state { display: none; align-items: center; gap: 4px; margin-left: auto; }
.watch-respond.answered .wr-state { display: inline-flex; }
.wr-cue {
  display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--muted);
  line-height: 1.5; margin-bottom: 9px;
}
.wr-cue i { color: var(--m-accent, var(--red)); margin-top: 2px; }
.wr-cue strong { color: var(--text); }
.wr-q { font-size: 13px; color: var(--text); font-weight: 500; line-height: 1.5; margin-bottom: 7px; }
.wr-item + .wr-item { margin-top: 11px; }
.watch-respond textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: 13px; color: var(--text); line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: var(--surface-2);
}
.watch-respond textarea:focus { outline: none; border-color: var(--m-accent, var(--red)); box-shadow: 0 0 0 2px rgba(200,16,46,0.12); }

.mini-lesson {
  border: 1px solid var(--border);
  border-left: 3px solid var(--m-accent, var(--red));
  background: #fafafb;
  border-radius: 10px; padding: 12px 15px; margin-bottom: 14px;
}
.mini-lesson .ml-head {
  font-size: 12.5px; font-weight: 700; color: var(--m-accent, var(--red));
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.mini-lesson .ml-teach { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0 0 10px; }
.mini-lesson .ml-take {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 5px;
}
.mini-lesson ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.mini-lesson li { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.ml-video { margin: 4px 0 4px; }
.mlv-frame {
  position: relative; aspect-ratio: 16 / 9; max-width: 440px; border-radius: 9px;
  overflow: hidden; cursor: pointer; background: #000;
}
.mlv-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; transition: opacity 0.15s; }
.mlv-frame:hover img { opacity: 1; }
.mlv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.mlv-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200,16,46,0.92); color: #fff; border-radius: 50%; font-size: 18px;
  padding-left: 3px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); pointer-events: none;
}
.mlv-frame.playing .mlv-play, .mlv-frame.playing .mlv-cap, .mlv-frame.playing img, .mlv-frame.playing .mlv-cc { display: none; }
.mlv-cc {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(0,0,0,0.72); color: #fff; pointer-events: none;
}
.mlv-cc i { font-size: 10px; }
.mlv-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 12px 9px;
  color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.mlv-watch {
  display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--muted2, var(--muted));
  line-height: 1.5; margin-top: 8px;
}
.mlv-watch i { color: var(--m-accent, var(--red)); margin-top: 2px; }
.mlv-watch strong { color: var(--text); }
.ml-check {
  margin-top: 11px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2);
  border: 1px dashed var(--border); font-size: 12.5px; color: var(--text); line-height: 1.5;
}
.ml-check i { color: var(--m-accent, var(--red)); margin-right: 6px; }

.bf-work-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.bf-body .lesson-list { margin-bottom: 0; }

.cont-row {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px; cursor: pointer;
  border-top: 1px solid var(--border); font-size: 13.5px;
}
.cont-row:first-child { border-top: none; }
.cont-row:hover { background: var(--hover, #fafafb); }
.cont-row > i:first-child { color: var(--m-accent, var(--red)); }
.cont-row .muted { color: var(--muted); font-weight: 400; }


/* ─── lesson blocks ─── */
.block { margin-bottom: 22px; }
.block:last-child { margin-bottom: 0; }
.block-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.block-h .req { color: var(--red); margin-left: 4px; }

/* Intro */
.block.intro { font-size: 14.5px; color: var(--muted2); line-height: 1.65; padding: 14px 16px;
  background: var(--off); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; }

/* Chapter reader — full textbook at the top of a module */
.chapter-read { border: 1.5px solid var(--red); border-radius: 14px; background: var(--card, #fff);
  margin: 0 0 20px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.chapter-read .cr-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.chapter-read .cr-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: var(--red);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.chapter-read .cr-meta { flex: 1; min-width: 0; }
.chapter-read .cr-k { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.chapter-read .cr-t { font-size: 17px; font-weight: 700; color: var(--text); margin: 3px 0 4px; letter-spacing: -.01em; }
.chapter-read .cr-d { font-size: 12.5px; line-height: 1.5; color: var(--muted2); max-width: 60ch; }
.chapter-read .cr-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: stretch; }
.chapter-read .cr-toggle { font-size: 12.5px; font-weight: 700; background: var(--red); color: #fff; border: none;
  padding: 9px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px; justify-content: center; }
.chapter-read .cr-toggle:hover { filter: brightness(.94); }
.chapter-read .cr-full { font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  text-align: center; padding: 4px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.chapter-read .cr-full:hover { color: var(--text); }
.chapter-read .cr-body { border-top: 1.5px solid var(--off); }
.chapter-read .cr-body iframe { width: 100%; height: 78vh; border: 0; display: block; background: #fff; }
@media (max-width: 640px){
  .chapter-read .cr-head { flex-wrap: wrap; }
  .chapter-read .cr-actions { flex-direction: row; width: 100%; }
  .chapter-read .cr-toggle { flex: 1; }
  .chapter-read .cr-body iframe { height: 70vh; }
}

/* ── In-lesson slide deck (block kind 'deck') — chapter-reader's sibling,
      blue-accented so "presentation" reads differently from "textbook".
      Tokens only, so it flips itself in dark mode. ── */
.deck-read { border: 1.5px solid var(--blue); border-radius: 14px; background: var(--surface);
  overflow: hidden; box-shadow: var(--shadow-card); }
.deck-read .dr-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.deck-read .dr-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.deck-read .dr-meta { flex: 1; min-width: 0; }
.deck-read .dr-k { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }
.deck-read .dr-t { font-size: 17px; font-weight: 700; color: var(--text); margin: 3px 0 4px; letter-spacing: -.01em; }
.deck-read .dr-d { font-size: 12.5px; line-height: 1.5; color: var(--muted2); max-width: 60ch; }
.deck-read .dr-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: stretch; }
.deck-read .dr-toggle { font-size: 12.5px; font-weight: 700; background: var(--blue); color: #fff; border: none;
  border-radius: 9px; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; justify-content: center; font-family: inherit; }
.deck-read .dr-toggle:hover { filter: brightness(.94); }
.deck-read .dr-full { font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.deck-read .dr-full:hover { color: var(--text); }
.deck-read .dr-body { border-top: 1.5px solid var(--off); }
.deck-read .dr-body iframe { width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; border: 0; display: block; background: #0a0b0d; }
@media (max-width: 640px){
  .deck-read .dr-head { flex-wrap: wrap; }
  .deck-read .dr-actions { flex-direction: row; width: 100%; }
  .deck-read .dr-toggle { flex: 1; }
}

/* Reading */
.block.reading h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.block.reading ul { list-style: none; padding: 0; }
.block.reading li { font-size: 13.5px; line-height: 1.65; color: var(--muted2); padding: 6px 0; }

/* Prose — textbook-style flowing reading */
.block.prose h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.block.prose .prose-sub { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--red); margin: 16px 0 6px; }
.block.prose p { font-size: 14.5px; line-height: 1.72; color: var(--text); margin: 0 0 12px; text-wrap: pretty; }
.block.prose p:last-of-type { margin-bottom: 0; }
.block.prose strong { font-weight: 700; color: var(--text); }
.block.prose code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .88em;
  background: var(--off); padding: 1px 5px; border-radius: 4px; }
.block.prose .prose-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted2); background: var(--off);
  border-left: 3px solid #d7dee8; border-radius: 0 6px 6px 0; padding: 9px 12px; }
.block.prose .prose-note i { color: var(--muted); margin-top: 2px; }

/* Data table — specs / do-don't / comparison */
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th { background: var(--text); color: #fff; text-align: left; padding: 8px 11px;
  font-size: 12px; letter-spacing: .02em; font-weight: 700; }
.data-table td { border: 1px solid #d7dee8; padding: 8px 11px; vertical-align: top;
  line-height: 1.5; color: var(--muted2); }
.data-table tr:nth-child(even) td { background: var(--off); }

/* Figure — labeled textbook diagram extracted from the print backbone */
.block.av-figure { margin: 0 0 22px; text-align: center; }
.av-figure img { max-width: 100%; height: auto; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; }
.av-figure figcaption { font-size: 12.5px; line-height: 1.5; color: var(--muted);
  margin-top: 8px; text-wrap: pretty; }

/* Worksheet header — marks the start of the do-it-here interactive worksheet */
.block.ws-head { background: linear-gradient(180deg, var(--off), #fff);
  border: 1px solid var(--border); border-left: 4px solid var(--accent, #0e7490);
  border-radius: 10px; padding: 14px 16px; }
.ws-head .wsh-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ws-head .wsh-n { font-size: 11.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--accent, #0e7490); }
.ws-head .wsh-badge { font-size: 11px; font-weight: 600; color: var(--muted2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.ws-head .wsh-t { font-size: 16px; font-weight: 800; color: var(--text); }
.ws-head .wsh-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 6px; }

/* Offline explainer printed under a video — the "no internet" fallback text */
.video-offline { font-size: 12.5px; line-height: 1.55; color: var(--muted2);
  background: var(--off); border-radius: 8px; padding: 9px 12px; margin-top: 8px; }
.video-offline strong { color: var(--text); }

/* Steps — numbered "do this now" card with menu paths */
.steps-block {
  border: 1px solid var(--border); border-left: 3px solid var(--red);
  border-radius: 10px; padding: 14px 16px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 4%, var(--off)) 0%, var(--off) 100%);
}
.steps-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.steps-h i { font-size: 13px; }
.steps-list { margin: 0; padding-left: 0; list-style: none; counter-reset: step; }
.steps-list li {
  position: relative; counter-increment: step;
  padding: 7px 0 7px 34px; font-size: 13.5px; line-height: 1.6; color: var(--text);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.steps-list li:first-child { border-top: none; }
.steps-list li::before {
  content: counter(step); position: absolute; left: 0; top: 7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps-list code.menu-path {
  background: var(--text); color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 5px; white-space: nowrap;
}
.steps-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--muted2); display: flex; align-items: center; gap: 7px;
}
.steps-foot i { color: var(--red); }

/* Video reference (teacher-fill anchor video) */
.vref-block {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px;
  background: var(--off);
}
.vref-ic {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  background: #ff0000; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.vref-body { min-width: 0; }
.vref-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.vref-kicker i { font-size: 9px; }
.vref-title { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--text); }
.vref-by { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.vref-note { font-size: 12.5px; color: var(--muted2); margin-top: 6px; line-height: 1.5; }
.vref-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--red); text-decoration: none;
}
.vref-link i { font-size: 10px; }
.vref-link:hover { text-decoration: underline; }

/* Callout */
.callout {
  border-radius: 8px; padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13px; line-height: 1.55;
}
.callout.info { background: var(--blue-glow); border: 1px solid rgba(29,78,216,0.18); color: var(--blue); }
.callout.warn { background: var(--amber-glow); border: 1px solid rgba(180,83,9,0.18); color: var(--amber); }
.callout.tip  { background: var(--green-glow); border: 1px solid rgba(21,128,61,0.18); color: var(--green); }
.callout i { font-size: 14px; margin-top: 2px; }
.callout strong { display: block; margin-bottom: 2px; }
.callout div { color: var(--muted2); }
.callout.info div { color: var(--text); }
.callout.warn div { color: var(--muted2); }

/* Video */
.video-wrap {
  position: relative; padding-top: 56.25%;
  background: #000; border-radius: 8px; overflow: hidden;
  margin-bottom: 8px;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster {
  position: absolute; inset: 0;
  background: #1a1d23;
  cursor: pointer;
  overflow: hidden;
}
.video-poster img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.7);
  transition: filter 0.25s, transform 0.4s;
}
.video-poster:hover img { filter: brightness(0.55); transform: scale(1.02); }
.play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.play-overlay i {
  width: 64px; height: 64px;
  background: rgba(200,16,46,0.95);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  padding-left: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  transition: transform 0.15s, background 0.15s;
}
.video-poster:hover .play-overlay i { transform: scale(1.06); background: var(--red); }
.video-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.video-meta i.fa-youtube { color: var(--red); font-size: 14px; }
.yt-fallback {
  margin-left: auto;
  color: var(--muted2); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.yt-fallback:hover { color: var(--text); border-color: var(--border-light); background: var(--off); }

/* Checkpoints */
.cp-rail { display: flex; gap: 4px; margin: 12px 0; }
.cp-rail .pip {
  flex: 1; height: 4px; background: var(--border); border-radius: 2px;
  position: relative; cursor: pointer;
}
.cp-rail .pip.done { background: var(--green); }
.cp-rail .pip.active { background: var(--red); }
.cp-rail .pip .ts {
  position: absolute; top: 8px; left: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted);
}
.cp-card {
  background: var(--off); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; margin-top: 10px;
}
.cp-card .cp-head {
  display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 1px;
  margin-bottom: 8px;
}
.cp-card .cp-q { font-size: 14px; font-weight: 600; margin-bottom: 12px; }

/* Gallery */
.gallery {
  display: grid; gap: 10px;
}
.gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-item {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--off);
}
.gallery-item .ph {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e8e9ec 0%, #d8d9dc 100%);
  display: flex; align-items: center; justify-content: center;
  color: #6b7280; font-size: 11px; text-align: center; padding: 12px;
  position: relative;
}
.gallery-item .ph::before {
  content: '\f03e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 10px; left: 10px; font-size: 16px; color: rgba(0,0,0,0.15);
}
.gallery-item .lbl { padding: 8px 10px; font-size: 12px; font-weight: 600; }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 4px; }
.cl-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: all 0.15s;
}
.cl-item:hover { background: var(--off); }
.cl-item.checked { background: var(--green-glow); border-color: rgba(21,128,61,0.2); }
.cl-box {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--border-light); flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); transition: all 0.15s;
}
.cl-item.checked .cl-box { background: var(--green); border-color: var(--green); color: #fff; font-size: 10px; }
.cl-text { font-size: 13.5px; line-height: 1.5; }

/* Vocab */
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.vocab-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px;
}
.vocab-card .term { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.vocab-card .term::before { content:'A'; display:inline-block; margin-right:8px; width:18px; height:18px;
  background: var(--red); color:#fff; border-radius: 4px; font-size: 10px;
  text-align: center; line-height: 18px; font-weight: 700; }
.vocab-card .def { font-size: 12.5px; color: var(--muted2); line-height: 1.55; }

/* Inputs (within lesson) */
.field {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
  color: var(--text);
}
.field:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
.field::placeholder { color: #b0b3b8; }
textarea.field { resize: vertical; min-height: 80px; line-height: 1.55; }

.mc { display: flex; flex-direction: column; gap: 6px; }
.mc-q { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.mc-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
  cursor: pointer; transition: all 0.15s;
  font-size: 13.5px;
}
.mc-opt:hover { border-color: var(--border-light); background: var(--off); }
.mc-opt .dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
}
.mc-opt.selected { border-color: var(--red); background: var(--red-glow); }
.mc-opt.selected .dot { border-color: var(--red); }
.mc-opt.selected .dot::after {
  content:''; position:absolute; inset:3px;
  background: var(--red); border-radius: 50%;
}
.mc-opt.selected { border-color: var(--accent, #C8102E); background: var(--accent-soft, rgba(200,16,46,.07)); }
.mc-opt.selected .dot { border-color: var(--accent, #C8102E); background: var(--accent, #C8102E); }
.mc-opt.correct { border-color: var(--green); background: var(--green-glow); }
.mc-opt.correct .dot { border-color: var(--green); }
.mc-opt.correct .dot::after { background: var(--green); }
.mc-opt.wrong { border-color: var(--red); background: var(--red-glow); }
.mc-feedback {
  margin-top: 8px; padding: 10px 12px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.5;
}
.mc-feedback.ok   { background: var(--green-glow); color: var(--green); }
.mc-feedback.bad  { background: var(--red-glow); color: var(--red); }

/* Upload */
.upload-area {
  border: 2px dashed var(--border-light); border-radius: 8px;
  padding: 22px; text-align: center; background: var(--off);
  cursor: pointer; transition: all 0.2s;
}
.upload-area:hover { border-color: var(--red); background: var(--red-glow); }
.upload-area i { font-size: 22px; color: var(--muted); margin-bottom: 8px; display: block; }
.upload-area .ul-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.upload-area .ul-sub { font-size: 11.5px; color: var(--muted); }
.upload-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.upload-tiles .tile {
  aspect-ratio: 1;
  background: var(--off); border: 1px dashed var(--border-light); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11px; font-weight: 700;
}
.upload-tiles .tile.filled { background: #d8d9dc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23a0a3a8" d="M2 2h12v12H2V2zm2 8l2-2 2 2 4-4v6H4v-2z"/></svg>') center/40% no-repeat; border-style: solid; }

/* Rubric */
.rubric-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  font-size: 12.5px;
}
.rubric-table th, .rubric-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.rubric-table thead th {
  background: var(--off); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted);
}
.rubric-table tbody tr:last-child td { border-bottom: none; }
.rubric-table .crit-name { font-weight: 700; font-size: 13px; }
.rubric-table .crit-desc { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.rubric-table .score-row { display: flex; gap: 6px; }
/* Self-Assessment rubric table scrolls horizontally on a phone instead of
   crushing its columns (Sofia #7). */
.rubric-scroll { width: 100%; }
@media (max-width: 640px) {
  .rubric-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; }
  .rubric-scroll .rubric-table { min-width: 540px; border: none; border-radius: 0; }
}
.score-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--muted2); transition: all 0.15s;
  min-width: 40px;
}
.score-btn:hover { border-color: var(--red); color: var(--red); }
.score-btn.selected { background: var(--red); color: #fff; border-color: var(--red); }

/* Reflect (1-5 scale) */
.reflect-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.reflect-row:last-child { border-bottom: none; }
.reflect-row .lbl { font-size: 13px; }
.scale-pills { display: flex; gap: 4px; }
.scale-pill {
  width: 28px; height: 28px;
  border: 1px solid var(--border); border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--muted2);
  background: var(--surface-2); cursor: pointer; transition: all 0.15s;
}
.scale-pill:hover { border-color: var(--red); color: var(--red); }
.scale-pill.selected { background: var(--red); color: #fff; border-color: var(--red); }

/* Legacy material list (for stub lessons) */
.legacy-mats { display: flex; flex-direction: column; gap: 6px; }
.legacy-mat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; text-decoration: none; color: var(--text);
  transition: all 0.15s;
}
.legacy-mat:hover { border-color: var(--border-light); background: var(--off); }
.legacy-mat .icon {
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--red-glow); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.legacy-mat .icon.form  { background: rgba(124,58,237,0.1); color: var(--purple); }
.legacy-mat .icon.drive { background: var(--blue-glow); color: var(--blue); }
.legacy-mat .icon.link  { background: var(--off); color: var(--muted); }
.legacy-mat .info { flex: 1; min-width: 0; }
.legacy-mat .info .t { font-weight: 600; font-size: 13px; }
.legacy-mat .info .s { font-size: 11px; color: var(--muted); }

/* Submit footer */
.submit-bar {
  margin-top: 8px; padding: 14px 16px;
  background: var(--badge-bg); color: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.submit-bar .reqs { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5; }
.submit-bar .reqs strong { color: #fff; }
.submit-bar .reqs ul { margin: 4px 0 0; padding-left: 16px; }
.submit-bar .reqs li { margin: 2px 0; }
.submit-bar .reqs li.met { color: var(--green); }
.submit-bar .submit-btn {
  background: var(--red); color: #fff; border: none;
  padding: 10px 22px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.submit-bar .submit-btn:hover { background: var(--red-dark); }
.submit-bar .submit-btn.done {
  background: var(--green);
}

/* PR4 — LIVE pre-submit checklist on the dark submit bar. Chips are readable on
   the badge-bg surface; done items go green, to-do items are tappable and scroll
   to their block. */
.submit-bar.has-checklist { align-items: flex-start; }
.submit-bar .reqs .sb-chk-count {
  font-weight: 700; font-size: 11px; color: #fff;
  background: rgba(255,255,255,.16); border-radius: 100px; padding: 1px 8px; margin-left: 5px;
}
.sb-chk-items { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.sb-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12.5px;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  border-radius: 100px; padding: 5px 11px; cursor: pointer;
  transition: background .12s, transform .1s;
}
.sb-chk:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.sb-chk i { font-size: 11px; opacity: .85; }
.sb-chk.done { color: #eafff1; background: rgba(21,128,61,.5); border-color: rgba(21,128,61,.66); cursor: default; }
.sb-chk.done:hover { transform: none; background: rgba(21,128,61,.5); }
.sb-chk.done i { color: #7ef0a8; opacity: 1; }
@media (min-width: 560px){ .sb-chk { font-size: 13px; } }
/* Authored requirements the live checklist can't auto-track — kept as reminders. */
.submit-bar .reqs .sb-req-also { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 12px; }
.submit-bar .reqs .sb-req-extra { margin: 5px 0 0; padding-left: 16px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.5; }
.submit-bar .reqs .sb-req-extra li { margin: 2px 0; }

/* PR4 — briefly ring a block / the submit block when a chip or a "due" deep-link
   jumps to it, so the student's eye lands in the right place. */
.blk-flash { animation: nsBlkFlash 1.5s ease; border-radius: 12px; }
@keyframes nsBlkFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); } 18% { box-shadow: 0 0 0 3px rgba(200,16,46,.4); } }
.submit-wrap.flash { animation: nsBarFlash 1.6s ease; border-radius: 12px; }
@keyframes nsBarFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); } 22% { box-shadow: 0 0 0 4px rgba(200,16,46,.3); } }

/* ═══════════════ PR6 addendum — required / optional RESOURCES ═══════════════ */
.res { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin: 12px 0; background: var(--surface); }
.res.required { border-left: 3px solid var(--red); }
.res.required.done { border-left-color: var(--green); }
.res.optional { background: var(--off); border-style: dashed; }
.res-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer; transition: background .15s; }
.res-head:hover { background: var(--off); }
.res.optional .res-head:hover { background: rgba(127,127,127,.06); }
.res-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 15px; }
.res-ic.video { background: rgba(200,16,46,.12); color: var(--red); }
.res-ic.read, .res-ic.reading { background: rgba(240,168,60,.15); color: #b45309; }
.res-ic.figure, .res-ic.gallery { background: rgba(37,99,235,.12); color: #2563eb; }
.res-ic.file { background: rgba(21,128,61,.12); color: var(--green); }
.res-body { flex: 1; min-width: 0; }
.res-kind { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; font-weight: 800; margin-bottom: 2px; }
.res-kind.video { color: var(--red); } .res-kind.read, .res-kind.reading { color: #b45309; }
.res-kind.figure, .res-kind.gallery { color: #2563eb; } .res-kind.file { color: var(--green); }
.res-title { font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-meta { font-size: 11.5px; color: var(--muted2); margin-top: 2px; }
.res-flag { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 5px; flex: none; }
.res-flag.req { background: var(--red); color: #fff; }
.res-flag.opt { background: var(--off); color: var(--muted2); border: 1px solid var(--border); }
.res-check { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; background: var(--off); color: var(--muted2); border: 1px solid var(--border); transition: .25s; }
.res-check.ok { background: var(--green); color: #fff; border-color: var(--green); }
.res-chev { color: var(--muted2); font-size: 12px; flex: none; transition: transform .2s; }
.res.open .res-chev { transform: rotate(90deg); }
.res-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.res.open .res-content { max-height: 1400px; }
.res-inner { padding: 0 15px 15px; }
.res-video-wrap { margin-top: 2px; }
/* reading resource */
.res-reading { background: var(--off); border: 1px solid var(--border); border-radius: 10px; padding: 15px; max-height: 240px; overflow-y: auto; }
.res-reading h4 { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 9px; }
.res-reading p { font-size: 14px; color: var(--text); opacity: .82; margin: 0 0 11px; line-height: 1.65; }
.res-pull { border-left: 2px solid var(--amber); padding-left: 12px; color: var(--text); font-style: italic; margin: 12px 0; }
.res-readprog { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12px; color: var(--muted2); }
.res-readprog .rp-bar { flex: 1; height: 4px; background: var(--off); border-radius: 99px; overflow: hidden; }
.res-readprog .rp-bar i { display: block; height: 100%; width: 0%; background: var(--amber); transition: width .2s; }
/* figure resource */
.res-figure { margin: 0; }
.res-figure img { width: 100%; border-radius: 9px; display: block; }
.res-figure figcaption { font-size: 12px; color: var(--muted2); text-align: center; margin-top: 7px; }
/* file / download resource */
.res-dl { display: flex; align-items: center; gap: 12px; background: var(--off); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.res-dl .dic { width: 38px; height: 38px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: 16px; flex: none; color: var(--muted2); }
.res-dl .dn { flex: 1; min-width: 0; }
.res-dl .dt { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); }
.res-dl .ds { font-size: 11.5px; color: var(--muted2); }
.res-dbtn { padding: 9px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; flex: none; text-decoration: none; }
.res-dbtn:hover { border-color: var(--green); color: var(--green); }
/* the "If you want more" shelf label */
.shelf-lab { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--muted2); font-weight: 800; text-transform: uppercase; margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
.shelf-lab::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ───────── BUTTONS ───────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 600;
  border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: all 0.15s;
  font-family: inherit;
}
.btn:hover { background: var(--off); border-color: var(--border-light); }
.btn.primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn.dark { background: var(--badge-bg); color: #fff; border-color: var(--badge-bg); }
.btn.dark:hover { background: #000; }
.btn.ghost { background: transparent; border: none; }
.btn.ghost:hover { background: var(--off); }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }

/* ───────── MODAL ───────── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
  z-index: 90; padding: 20px;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--r-lg);
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-h {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-h .title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.modal-close {
  width: 28px; height: 28px;
  background: var(--off); border: none; border-radius: 5px;
  color: var(--muted2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #e0e0e3; color: var(--text); }
.modal-b { padding: 22px; overflow-y: auto; }
.modal-f {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ───────── TOAST ───────── */
#toasts {
  position: fixed; bottom: 20px; right: 20px;
  /* Toasts must sit ABOVE everything transient — the full-screen lesson overlay
     (.lesson.open, 760) and modals (#modal-bg, 900) — or they render hidden
     behind an open lesson and look like nothing happened. */
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--badge-bg); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  min-width: 220px; max-width: 360px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  animation: slideUp 0.2s ease;
}
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.toast.ok i { color: var(--green); }
.toast.warn i { color: var(--amber); }
.toast.err i { color: var(--red); }

/* ───────── TWEAKS PANEL ───────── */
#tweaks-panel {
  position: fixed; bottom: 16px; right: 16px; width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  z-index: 60; display: none;
  font-size: 13px;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  flex-direction: column;
}
#tweaks-panel.open { display: flex; }
.tw-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.tw-head .title { flex: 1; font-weight: 700; font-size: 13px; letter-spacing: -0.005em; }
.tw-head .title i { color: var(--red); margin-right: 6px; }
.tw-head .close {
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--off); border: none; cursor: pointer; color: var(--muted2);
}
.tw-body { padding: 12px 14px; overflow-y: auto; }
.tw-section { margin-bottom: 16px; }
.tw-section:last-child { margin-bottom: 0; }
.tw-section-h {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.tw-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tw-label { font-size: 12.5px; color: var(--text); }
.tw-seg {
  display: flex; gap: 2px; padding: 2px;
  background: var(--off); border-radius: 6px;
}
.tw-seg button {
  background: transparent; border: none;
  padding: 5px 10px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--muted2);
  cursor: pointer;
}
.tw-seg button.active { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* ───────── STUDENT DASHBOARD (variants) ───────── */
.dash-variant-classic .hero-row { display: grid; grid-template-columns: 132px 1fr auto; gap: 24px; align-items: center; }
.dash-variant-classic .hero-row .name-block { min-width: 0; }
.dash-variant-classic .hero-row .name-block .nm { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: break-word; }
.dash-variant-classic .hero-row .name-block .greeting { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.dash-variant-classic .hero-row .name-block .chips { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 880px){
  .dash-variant-classic .hero-row { grid-template-columns: 84px 1fr; }
  .dash-variant-classic .hero-row .cbadge { width: 84px; height: 84px; }
  .dash-variant-classic .hero-row .cbadge .b-num { font-size: 38px; }
  .dash-variant-classic .hero-row .ring-wrap { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
  .dash-variant-classic .hero-row .name-block .nm { font-size: 22px; }
}
.ring-wrap { position: relative; }
.ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

.dash-variant-focus .focus-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 24px 28px; margin-bottom: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.dash-variant-focus .focus-card .e { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.dash-variant-focus .focus-card .t { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; }
.dash-variant-focus .focus-card .s { font-size: 13px; color: var(--muted2); line-height: 1.55; max-width: 540px; margin-bottom: 14px; }

/* TEACHER STUDENT VIEWER (drawer) */
.drawer-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: none; z-index: 80;
}
.drawer-bg.open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 540px; max-width: 100vw;
  z-index: 81; /* must sit ABOVE .drawer-bg (z-index:80) or the dim covers the panel */
  background: var(--surface); box-shadow: -10px 0 40px rgba(0,0,0,0.15);
  display: flex; flex-direction: column;
  animation: drawerIn 0.2s ease;
}
@keyframes drawerIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-h { padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; }
.drawer-h .who .nm { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.drawer-h .who .sub { font-size: 12px; color: var(--muted); }
.drawer-h .close { margin-left: auto; }
.drawer-b { flex: 1; overflow-y: auto; padding: 18px 22px; }

/* mini-distribution */
.gd-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.gd-overview .box {
  background: var(--off); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px;
}
.gd-overview .box .l { font-size: 10.5px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; }
.gd-overview .box .v { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.gd-overview .box .v small { font-size: 12px; color: var(--muted); font-weight: 500; }

.grade-row {
  display: grid; grid-template-columns: 1fr 90px 90px;
  align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.grade-row:last-child { border-bottom: none; }
.grade-row .a-title { font-weight: 600; }
.grade-row .a-meta { font-size: 11px; color: var(--muted); }
.grade-row input.grade-in {
  width: 70px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 13px; font-weight: 600; text-align: center;
  outline: none;
}
.grade-row input.grade-in:focus { border-color: var(--red); }

/* Empty state */
.empty {
  padding: 56px 24px; text-align: center; color: var(--muted);
}
.empty i { font-size: 36px; opacity: 0.3; margin-bottom: 14px; display: block; }
.empty .l { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty .s { font-size: 12.5px; }

/* Misc */
.div { height: 1px; background: var(--border); margin: 16px 0; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.row { display: flex; align-items: center; gap: 10px; }
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC FX  —  "Reel Time" flow on a light base
   All gated behind body.fx-on so Tweaks can revert to the calm look.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. FILM-REEL LOADER (entry) ── */
#fx-loader {
  position: fixed; inset: 0; z-index: 9000;
  background: radial-gradient(ellipse at center, #1c1f26 0%, #0e1014 70%, #0a0b0e 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; opacity: 1; visibility: visible;
  transition: opacity 0.55s ease, visibility 0s linear 0s;
}
#fx-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s; }
/* faint grain inside loader */
#fx-loader::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.fx-reel {
  width: 86px; height: 86px; position: relative;
  animation: fxspin 1.4s cubic-bezier(.5,.1,.3,1) infinite;
}
.fx-reel svg { display: block; width: 100%; height: 100%; }
@keyframes fxspin { to { transform: rotate(360deg); } }
.fx-load-brand {
  font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: 4px;
  font-size: 15px; color: #fff; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.fx-load-brand .dotmark { width: 8px; height: 8px; border-radius: 2px; background: var(--red); box-shadow: 0 0 12px var(--red); }
.fx-load-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px;
  color: rgba(255,255,255,0.4); text-transform: uppercase; margin-top: -10px;
}
.fx-load-bar { width: 180px; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.fx-load-bar i { display: block; height: 100%; width: 40%; background: var(--red); box-shadow: 0 0 10px var(--red);
  border-radius: 2px; animation: fxsweep 1.1s ease-in-out infinite; }
@keyframes fxsweep { 0%{ transform: translateX(-120%);} 100%{ transform: translateX(360%);} }

/* ── 2. CINEMATIC PAGE TRANSITION (letterbox + scanline + flash) ── */
#fx-ct { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: flex; flex-direction: column; }
#fx-ct .bar {
  background: linear-gradient(180deg, #14161c 0%, #1f0608 100%);
  height: 0; transition: height 0.16s cubic-bezier(.7,0,.3,1); position: relative; overflow: hidden;
}
#fx-ct .bar.top::after, #fx-ct .bar.bot::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 26px var(--red-dark);
}
#fx-ct .bar.top::after { bottom: 0; }
#fx-ct .bar.bot::after { top: 0; }
#fx-ct.active .bar { height: 50%; }
#fx-ct .spacer { flex: 1; }
#fx-ct .scan {
  position: absolute; left: 0; right: 0; height: 2px; top: -4px; opacity: 0;
  background: rgba(200,16,46,0.55); box-shadow: 0 0 12px rgba(200,16,46,0.6);
}
#fx-ct.active .scan { animation: fxscan 0.32s linear; }
@keyframes fxscan { 0%{ top: 0; opacity: 0.9; } 100%{ top: 100vh; opacity: 0; } }

#fx-flash { position: fixed; inset: 0; background: #fff; opacity: 0; z-index: 69; pointer-events: none; transition: opacity 0.09s; }
#fx-flash.pop { opacity: 0.05; }

/* ── 3. FILM-GRAIN OVERLAY (very subtle, light-tuned) ── */
body.fx-grain::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}

/* ── 4. RED-GLOW HOVER + accent shimmer (only when FX on) ── */
body.fx-on .course-card:hover,
body.fx-on .module-row:hover,
body.fx-on .modules-grid .m-card:hover,
body.fx-on .stat:hover {
  box-shadow: 0 8px 26px rgba(200,16,46,0.13), 0 1px 3px rgba(15,39,71,0.05);
  border-color: rgba(200,16,46,0.32);
}
body.fx-on .stat { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
body.fx-on .stat:hover { transform: translateY(-2px); }
body.fx-on .tb-btn.primary:hover { box-shadow: 0 4px 18px rgba(200,16,46,0.35); }
body.fx-on .module-row .m-num,
body.fx-on .dash-hero .hero-badge,
body.fx-on .cbadge { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.18); }

/* darkened checker seams (deeper, more filmic) when FX on */
body.fx-on .dash-hero::before { opacity: 1; }
body.fx-on #content {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,39,71,0.07) 1px, transparent 0);
}

/* topbar gets a hairline red underglow when FX on */
body.fx-on #topbar { box-shadow: 0 1px 0 rgba(200,16,46,0.12); }

/* login entry flourish */
body.fx-on .login-logo { box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 10px 30px rgba(200,16,46,0.18); }

/* ═══════════════════════════════════════════════════════════════════
   STUDENT RANK CARD  —  cinematic photography rank ladder
   ═══════════════════════════════════════════════════════════════════ */
.rank-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #14161c 0%, #1d2027 60%, #221318 100%);
  border: 1px solid #2a2e36; border-radius: var(--r-lg);
  padding: 26px 28px; margin-bottom: 20px; color: #fff;
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
}
.rank-card::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 320px;
  background-image:
    linear-gradient(135deg, var(--rk-accent, var(--red)) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(225deg, var(--rk-accent, var(--red)) 25%, transparent 25%) 0 0 / 16px 16px;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 92%);
          mask-image: linear-gradient(to left, #000, transparent 92%);
  pointer-events: none;
}
.rank-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.rank-card > * { position: relative; z-index: 1; }
/* rank emblem — aperture ring + checker core */
.rank-emblem {
  width: 104px; height: 104px; border-radius: 16px; flex-shrink: 0;
  background: #0e1014; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.rank-emblem::before, .rank-emblem::after {
  content: ''; position: absolute; left: 0; right: 0; height: 14px;
  background-image:
    linear-gradient(135deg, var(--rk-accent, var(--red)) 25%, transparent 25%) 0 0 / 10px 10px,
    linear-gradient(225deg, var(--rk-accent, var(--red)) 25%, transparent 25%) 0 0 / 10px 10px;
  opacity: 0.85;
}
.rank-emblem::before { top: 0; }
.rank-emblem::after { bottom: 0; transform: scaleY(-1); }
.rank-emblem .rk-svg { position: relative; z-index: 1; filter: drop-shadow(0 0 8px rgba(0,0,0,0.5)); }
.rank-emblem .rk-tier {
  position: absolute; z-index: 2; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px;
  color: var(--rk-accent, var(--red)); font-weight: 700;
}
.rank-body .rk-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 7px;
  display: flex; align-items: center; gap: 9px;
}
.rank-body .rk-eyebrow .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.rank-body .rk-name {
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: #fff; margin-bottom: 4px;
}
.rank-body .rk-name .star { color: var(--rk-accent, var(--red)); }
.rank-body .rk-blurb { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; max-width: 460px; margin-bottom: 16px; }
.rank-prog-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.rank-prog-head .nextrk { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.rank-prog-head .nextrk strong { color: #fff; font-weight: 600; }
.rank-prog-head .frames { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--rk-accent, var(--red)); letter-spacing: 0.5px; }
.rank-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 100px; overflow: hidden; }
.rank-track .fill {
  height: 100%; border-radius: 100px; transition: width 0.7s cubic-bezier(.22,1,.36,1);
  background: linear-gradient(90deg, var(--rk-accent, var(--red)), color-mix(in oklch, var(--rk-accent, var(--red)) 55%, #fff));
  box-shadow: 0 0 12px var(--rk-accent, var(--red));
}
/* right column: meta tiles */
.rank-meta { display: flex; flex-direction: column; gap: 12px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.1); }
.rank-meta .rk-stat .v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.rank-meta .rk-stat .v small { font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 600; }
.rank-meta .rk-stat .l { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 5px; font-family: 'JetBrains Mono', monospace; }
@media (max-width: 880px){
  .rank-card { grid-template-columns: auto 1fr; }
  .rank-meta { grid-column: 1 / -1; flex-direction: row; padding-left: 0; padding-top: 16px; border-left: none; border-top: 1px solid rgba(255,255,255,0.1); gap: 28px; }
}

/* rank ladder strip — upcoming tiers */
.rank-ladder { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
.rank-ladder .rung {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 8px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted2);
  transition: all 0.2s;
}
.rank-ladder .rung .pip { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; font-weight: 800; }
.rank-ladder .rung.done { border-color: rgba(21,128,61,0.3); background: var(--green-glow); color: var(--green); }
.rank-ladder .rung.current { border-color: var(--rk-accent, var(--red)); color: var(--text); font-weight: 700;
  box-shadow: 0 2px 10px rgba(200,16,46,0.12); }
.rank-ladder .rung.locked { opacity: 0.55; }
.rank-ladder .rung .name { white-space: nowrap; }

/* rank-up celebration toast banner */
.rankup-banner {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-16px);
  z-index: 210; background: linear-gradient(135deg, #14161c, #221318);
  border: 1px solid var(--rk-accent, var(--red)); border-radius: 14px;
  padding: 14px 22px 14px 16px; color: #fff; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 30px rgba(200,16,46,0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s;
}
.rankup-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.rankup-banner .ru-spin { width: 44px; height: 44px; animation: fxspin 4s linear infinite; }
.rankup-banner .ru-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--rk-accent, var(--red)); }
.rankup-banner .ru-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.rankup-banner .ru-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); }

/* ═══════════════════════════════════════════════════════════════════
   CENTERED MODAL  (New Module, Add Resource, Import, New Assignment)
   ═══════════════════════════════════════════════════════════════════ */
#modal-bg {
  position: fixed; inset: 0; background: rgba(10,11,14,0.55);
  /* Must sit ABOVE the portalled full-screen lesson overlay (.lesson.open,
     z-index 760) and the block-detail overlay (700) — otherwise confirm/take-back
     dialogs open behind the lesson and look like dead buttons. */
  backdrop-filter: blur(3px); display: none; z-index: 900;
  align-items: flex-start; justify-content: center; padding: 60px 20px;
  overflow-y: auto;
}
#modal-bg.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  width: 560px; max-width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  animation: modalIn 0.22s cubic-bezier(.22,1,.36,1); overflow: hidden;
  align-self: flex-start;
}
.modal.wide { width: 760px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-h {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.modal-h .m-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--red-glow); color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.modal-h .m-tt { flex: 1; }
.modal-h .m-tt .t { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.modal-h .m-tt .s { font-size: 12px; color: var(--muted); margin-top: 1px; }
.modal-h .m-x {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--off); cursor: pointer; color: var(--muted2); flex-shrink: 0;
}
.modal-h .m-x:hover { background: var(--surface-2); color: var(--text); }
.modal-b { padding: 20px 22px; max-height: 60vh; overflow-y: auto; }
.modal-f {
  padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.modal-f .mr-auto { margin-right: auto; }
.fld-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block; }
.fld-row { margin-bottom: 16px; }
.fld-row:last-child { margin-bottom: 0; }
.modal .field { font-size: 14px; }
.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.12s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.sel { border-color: #1a1d23; box-shadow: 0 0 0 2px #fff inset; }

/* file dropzone for import */
.dropzone {
  border: 2px dashed var(--border-light); border-radius: 12px;
  padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.2s;
  background: var(--off);
}
.dropzone:hover, .dropzone.drag { border-color: var(--red); background: var(--red-glow); }
.dropzone i { font-size: 28px; color: var(--muted); margin-bottom: 10px; display: block; }
.dropzone .dz-t { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.dropzone .dz-s { font-size: 11.5px; color: var(--muted); }
.import-summary {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px;
}
.import-summary .is-tile { background: var(--off); border: 1px solid var(--border); border-radius: 9px; padding: 12px; text-align: center; }
.import-summary .is-tile .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.import-summary .is-tile .l { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.imp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.imp-fld { display: flex; flex-direction: column; gap: 4px; }
.imp-fld span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.imp-fld input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; }
.imp-fld input:focus { outline: none; border-color: var(--red); }
.imp-fld input:disabled { background: var(--off); color: var(--muted2); }

/* gradebook bulk-entry column menu */
.gb-colmenu-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: left; width: 100%; color: inherit;
  border-radius: 4px; transition: background .12s;
}
.gb-colmenu-btn:hover { background: var(--red-glow); }
.gb-bulk-menu {
  position: fixed; z-index: 200; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.18); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.gb-bulk-menu .gbm-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  padding: 6px 9px 7px; border-bottom: 1px solid var(--border); margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gbm-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; background: none; border: none; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer; text-align: left;
}
.gbm-opt i { color: var(--muted); width: 14px; text-align: center; }
.gbm-opt:hover { background: var(--off); }
.gbm-opt.danger { color: var(--red); }
.gbm-opt.danger i { color: var(--red); }
/* Optional-assignment mode picker in the gradebook column menu (Marcus #4) */
.gbm-modes { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 3px; }
.gbm-mode { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 7px 9px; background: none; border: 1px solid transparent; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.gbm-mode i { color: var(--muted); width: 14px; text-align: center; margin-top: 2px; }
.gbm-mode span { display: flex; flex-direction: column; line-height: 1.3; }
.gbm-mode em { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.gbm-mode:hover { background: var(--off); }
.gbm-mode.on { border-color: var(--red); background: var(--red-glow); }
.gbm-mode.on i, .gbm-mode.on em { color: var(--red); }
.gb-opttag { display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted2); background: var(--off); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; vertical-align: middle; }
.gb-opttag.bonus { color: var(--amber); background: var(--amber-glow); border-color: rgba(180,83,9,.2); }
/* Per-quiz answer-reveal control on the quiz lesson (Elliot #11) */
.nsqr-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 11px 14px; background: var(--card2); border: 1px solid var(--border); border-radius: 11px; }
.nsqr-h { font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.nsqr-h i { color: var(--red); }
.nsqr-btns { display: inline-flex; gap: 5px; background: var(--off); border-radius: 9px; padding: 3px; }
.nsqr-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 7px; padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.nsqr-btn i { font-size: 11px; }
.nsqr-btn.on { background: var(--red); color: #fff; }
.nsqr-hint { font-size: 11.5px; color: var(--muted); flex-basis: 100%; }
.nsqr-note { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 11px 14px; background: var(--off); border: 1px solid var(--border); border-radius: 11px; font-size: 13px; color: var(--muted2); }
.nsqr-note i { color: var(--muted); }
kbd {
  font-family: inherit; font-size: 10px; font-weight: 700;
  background: var(--off); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px;
}

/* sync requirements checklist */
.sync-check { display: flex; flex-direction: column; gap: 9px; }
.sync-check .sc-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.sync-check .sc-item i { font-size: 16px; }
.sync-check .sc-item.ok i { color: var(--green); }
.sync-check .sc-item.no { color: var(--muted2); }
.sync-check .sc-item.no i { color: var(--muted); }

/* student: what's due */
.due-section { margin-bottom: 22px; }
.due-sec-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.due-sec-h.red { color: var(--red); }
.due-sec-h.amber { color: var(--amber); }
.due-sec-h.green { color: var(--green); }
.due-sec-h i { font-size: 12px; }
.due-sec-n {
  font-size: 10px; font-weight: 700; color: var(--muted2);
  background: var(--off); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px;
}
.due-list { display: flex; flex-direction: column; gap: 8px; }
.due-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  cursor: pointer; transition: border-color .12s, transform .05s, box-shadow .12s;
}
.due-card:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.due-card:active { transform: scale(.995); }
.due-card.needswork { border-left: 3px solid var(--red); }
.due-card.overdue { border-left: 3px solid var(--red); }
.due-card.soon { border-left: 3px solid var(--amber); }
.due-card.graded { opacity: 0.78; }
.due-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.due-cat {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap; flex-shrink: 0;
  background: var(--off); color: var(--muted2);
}
.due-cat.major { background: var(--amber-glow); color: var(--amber); }
.due-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.due-right { flex-shrink: 0; }
.due-when { font-size: 12.5px; font-weight: 600; color: var(--muted2); white-space: nowrap; }
.due-when.overdue { color: var(--red); }
.due-when.needswork { color: var(--red); }
.due-when.soon { color: var(--amber); }

/* settings: section list */
.set-sec-list { display: flex; flex-direction: column; gap: 8px; }
.set-sec-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; background: var(--off); border: 1px solid var(--border); border-radius: 10px;
}
.import-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; font-size: 13px;
}
.import-row .ir-ico { width: 26px; height: 26px; border-radius: 6px; background: var(--blue-glow); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; }
.import-row .ir-meta { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════
   RESOURCES  —  module-grouped, lock-aware
   ═══════════════════════════════════════════════════════════════════ */
.res-group { margin-bottom: 26px; }
.res-group-h {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.res-group-h .rg-num {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: var(--badge-bg); color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.res-group-h .rg-num::before {
  content:''; position:absolute; inset:0; opacity:0.4;
  background-image:
    linear-gradient(135deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 7px 7px,
    linear-gradient(225deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 7px 7px;
}
.res-group-h .rg-num span { position: relative; z-index: 1; }
.res-group-h .rg-tt { flex: 1; }
.res-group-h .rg-tt .t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.res-group-h .rg-tt .s { font-size: 11.5px; color: var(--muted); }
.res-group.locked { opacity: 0.65; }
.res-locked-note {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: var(--off); border: 1px dashed var(--border-light); border-radius: 10px;
  font-size: 12.5px; color: var(--muted2);
}
.res-locked-note i { color: var(--muted); }
.res-badge-day1 {
  font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px; background: var(--green-glow); color: var(--green);
  border: 1px solid rgba(21,128,61,0.25);
}
.mini-spin {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: fxspin 0.7s linear infinite; vertical-align: -2px;
}

/* cinematic section-header accent (Mustang red bar) when FX on */
body.fx-on .page-h1 { display: flex; align-items: center; gap: 11px; }
body.fx-on .page-h1::before {
  content: ''; width: 4px; height: 0.92em; border-radius: 2px;
  background: var(--red); box-shadow: 0 0 8px rgba(200,16,46,0.4); flex-shrink: 0;
}
body.fx-on .sec-label { display: flex; align-items: center; gap: 8px; }
body.fx-on .sec-label::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px; background: var(--red); flex-shrink: 0;
}
body.fx-on .unit-head .u-title { display: flex; align-items: center; gap: 11px; }
body.fx-on .unit-head .u-title::before {
  content: ''; width: 4px; height: 0.9em; border-radius: 2px;
  background: var(--m-accent, var(--red)); box-shadow: 0 0 8px var(--m-accent, var(--red)); flex-shrink: 0;
}

/* first-day welcome strip */
.welcome-strip {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #14161c 0%, #1d2027 70%, #221318 100%);
  border: 1px solid #2a2e36; border-radius: var(--r); color: #fff;
  padding: 14px 18px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
}
.welcome-strip::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.welcome-strip > * { position: relative; z-index: 1; }
.welcome-strip .ws-ico { font-size: 18px; color: var(--red); }
.welcome-strip .ws-tt { flex: 1; }
.welcome-strip .ws-tt strong { font-size: 14px; display: block; }
.welcome-strip .ws-tt span { font-size: 12px; color: rgba(255,255,255,0.6); }
.welcome-strip .ws-x { background: rgba(255,255,255,0.08); border: none; color: #fff; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.welcome-strip .ws-x:hover { background: rgba(255,255,255,0.16); }

/* callout color aliases */
.callout.green { background: var(--green-glow); border: 1px solid rgba(21,128,61,0.18); color: var(--green); }
.callout.amber { background: var(--amber-glow); border: 1px solid rgba(180,83,9,0.18); color: var(--amber); }
.callout.green span, .callout.amber span { color: var(--muted2); }

/* large buttons */
.btn.lg { padding: 12px 20px; font-size: 14px; border-radius: 10px; }

/* ───────── CLASS SETUP / EMPTY ROSTER ───────── */
.setup-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #14161c 0%, #1d2027 60%, #2a1418 100%);
  border: 1px solid #2a2e36; border-radius: 16px; color: #fff;
  padding: 40px 38px; margin-bottom: 22px;
}
.setup-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.setup-hero > * { position: relative; z-index: 1; }
.setup-mark {
  width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font-size: 22px; margin-bottom: 18px;
  box-shadow: 0 6px 24px rgba(200,16,46,0.4);
}
.setup-eyebrow { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 8px; }
.setup-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; margin-bottom: 12px; }
.setup-sub { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 600px; margin-bottom: 22px; }
.setup-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.setup-actions .btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #fff; }
.setup-actions .btn:hover { background: rgba(255,255,255,0.16); }
.setup-actions .btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.setup-note { font-size: 12.5px; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 8px; }
.setup-note strong { color: rgba(255,255,255,0.85); }
.setup-cards { margin-bottom: 8px; }
.setup-cards .sc-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 12px; background: var(--red-glow); color: var(--red); }
.setup-cards .sc-ico.blue { background: var(--blue-glow); color: var(--blue); }
.setup-cards .sc-ico.green { background: var(--green-glow); color: var(--green); }
.setup-cards .sc-ico.amber { background: var(--amber-glow); color: var(--amber); }
.setup-cards .sc-t { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.setup-cards .sc-s { font-size: 12.5px; color: var(--muted2); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════
   LESSON DETAIL — full-screen page view (app-wide)
   ═══════════════════════════════════════════════════════════════════ */

/* Lesson opens as an INLINE detail card within the page — NOT a full-screen
   portal. Keeps the sidebar/nav visible (Classroom-style) and removes the whole
   portal/z-index/stuck-overlay bug class. */
.lesson.open {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.09) !important;
  overflow: hidden !important;
  margin: 4px 0 !important;
  animation: ldSlideIn 0.2s ease;
}
@keyframes ldSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide the row header — we have our own topbar */
.lesson.open .l-head { display: none !important; }
/* …except an INLINE block assignment, where the row header IS the metadata header
   above the inlined questions (no OPEN, no navigation), so keep it visible + static. */
.lesson.lesson-inline.open .l-head { display: flex !important; cursor: default; }

/* Body flows inline (page scrolls, not an inner fixed pane) */
.lesson.open .l-body {
  display: block !important;
  padding: 28px 24px !important;
  background: var(--surface) !important;
}
.lesson.open .l-body > * {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Detail top navigation bar ─── */
.ld-topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 12px 20px; flex-shrink: 0;
}
.ld-back {
  display: flex; align-items: center; gap: 7px;
  background: var(--off); border: 1px solid var(--border);
  color: var(--text); font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ld-back:hover { background: #1a1d23; color: #fff; border-color: #1a1d23; }
.ld-crumb {
  flex: 1; text-align: center; font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-crumb strong { color: var(--text); font-weight: 600; }

/* ─── Sticky complete bar at the bottom ─── */
.ld-complete-bar {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 14px 24px; flex-shrink: 0;
}
.ld-complete-inner {
  max-width: 780px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ld-complete-status {
  font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; min-width: 160px;
}
.ld-complete-status.is-done { color: var(--green); font-weight: 600; }
.ld-complete-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.ld-mark-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff; border: none;
  padding: 11px 22px; border-radius: var(--r-sm);
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s, transform 0.1s; white-space: nowrap;
}
.ld-mark-btn:hover { background: #16a34a; transform: translateY(-1px); }
.ld-mark-btn.done-state {
  background: #1a1d23; cursor: default; transform: none;
}

/* Inline lesson: the in-body submit block IS the Turn In control (the old
   full-screen completion bar is hidden below), so let it show. */

/* ═══════════════════════════════════════════════════════════════════
   BLOCK CARDS LIST  (replaces sidebar+reader layout)
   ═══════════════════════════════════════════════════════════════════ */
.blk-prog-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.blk-prog-row .prog .fill { background: var(--m-accent, var(--red)); }

.blk-list {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px;
}

.blk-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.blk-card:hover {
  border-color: var(--m-accent, var(--red));
  box-shadow: var(--shadow-hover);
  transform: translateX(4px);
}
.blk-card.current { border-left: 3px solid var(--m-accent, var(--red)); }
.blk-card.done    { opacity: 0.75; }

.blk-num-badge {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 10px; background: var(--badge-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700; color: #fff;
  position: relative; overflow: hidden;
}
.blk-num-badge::before {
  content: ''; position: absolute; inset: 0; opacity: 0.4;
  background-image:
    linear-gradient(135deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 6px 6px,
    linear-gradient(225deg, var(--m-accent, var(--red)) 25%, transparent 25%) 0 0 / 6px 6px;
}
.blk-num-badge span, .blk-num-badge i { position: relative; z-index: 1; }
.blk-num-badge.done    { background: var(--green); }
.blk-num-badge.current { background: var(--m-accent, var(--red)); }

.blk-info    { flex: 1; min-width: 0; }
.blk-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--m-accent, var(--red)); margin-bottom: 3px;
}
.blk-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.blk-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.blk-status-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 3px 10px; border-radius: 100px;
  background: var(--off); color: var(--muted); border: 1px solid var(--border);
}
.blk-status-pill.done    { background: var(--green-glow); color: var(--green); border-color: rgba(21,128,61,0.25); }
.blk-status-pill.current { background: var(--red-glow); color: var(--red); border-color: rgba(200,16,46,0.25); }

/* ═══════════════════════════════════════════════════════════════════
   BLOCK DETAIL OVERLAY  (full-screen, lives at document.body)
   ═══════════════════════════════════════════════════════════════════ */
#block-detail-overlay {
  position: fixed; inset: 0; z-index: 700;
  display: flex; flex-direction: column;
  background: var(--page-bg);
  opacity: 0; pointer-events: none;
  transform: translateX(30px);
  transition: opacity 0.22s cubic-bezier(.22,1,.36,1), transform 0.22s cubic-bezier(.22,1,.36,1);
}
#block-detail-overlay.open {
  opacity: 1; pointer-events: all; transform: translateX(0);
}

.bdo-topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 12px 20px; flex-shrink: 0;
}
.bdo-nav-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.bdo-nav-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--off); border: 1px solid var(--border);
  color: var(--text); font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bdo-nav-btn:hover { background: #1a1d23; color: #fff; border-color: #1a1d23; }
.bdo-nav-btn.primary {
  background: var(--m-accent, var(--red));
  color: #fff;
  border-color: var(--m-accent, var(--red));
}
.bdo-nav-btn.primary:hover { opacity: 0.88; }

.bdo-scroll {
  flex: 1; overflow-y: auto; padding: 32px 24px;
  scroll-behavior: smooth;
}
.bdo-doc {
  max-width: 780px; margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   STUDENT UPGRADES  —  added components + responsive + accessibility
   ═══════════════════════════════════════════════════════════════════ */

/* ── M1 · Next-action banner ── */
.next-action {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--muted);
  border-radius: var(--r); padding: 16px 20px; margin-bottom: 18px;
  transition: box-shadow .15s, transform .05s; font: inherit; color: var(--text);
}
.next-action:hover { box-shadow: var(--shadow-hover); }
.next-action:active { transform: scale(.995); }
.next-action.red    { border-left-color: var(--red); }
.next-action.amber  { border-left-color: var(--amber); }
.next-action.green  { border-left-color: var(--green); }
.next-action .na-icon {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
  background: var(--muted);
}
.next-action.red .na-icon { background: var(--red); }
.next-action.amber .na-icon { background: var(--amber); }
.next-action.green .na-icon { background: var(--green); }
.next-action .na-text { flex: 1; min-width: 0; }
.next-action .na-lead { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.next-action .na-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.next-action .na-go {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--red);
}

/* ── H1 · Submission receipt + bar extras ── */
/* Inline lesson: hide the old full-screen completion bar; the in-body submit
   block (with requirements + Turn In / Take back + receipt) is the control. */
.lesson.open .ld-complete-bar { display: none !important; }
.submit-receipt {
  background: var(--green-glow); border: 1px solid rgba(21,128,61,.25);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.submit-receipt .sr-main { font-size: 14px; font-weight: 700; color: var(--green); }
.submit-receipt .sr-main i { margin-right: 6px; }
.submit-receipt .sr-sub { font-size: 12px; color: var(--muted2); margin-top: 3px; }
.submit-receipt .sr-fb { font-size: 12.5px; color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(21,128,61,.3); }
.howto-link {
  background: none; border: none; color: rgba(255,255,255,.85); cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 6px 0 0; display: inline-flex; gap: 6px; align-items: center;
}
.howto-link:hover { color: #fff; text-decoration: underline; }
.ld-where { font-weight: 400; color: var(--muted); margin-left: 4px; font-size: 12px; }
.ld-fb { display: block; font-weight: 400; font-size: 12px; color: var(--muted2); margin-top: 3px; }
.ld-howto {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted2); cursor: pointer; font-size: 14px; flex-shrink: 0;
}
.ld-howto:hover { border-color: var(--red); color: var(--red); }
.ld-complete-actions { display: flex; align-items: center; gap: 8px; }

/* ── How-to-turn-in drawer (M7) ── */
.howto-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.howto-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.howto-steps .hn {
  width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.howto-note {
  margin-top: 18px; background: var(--off); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--muted2); display: flex; gap: 10px; align-items: flex-start;
}
.howto-note i { color: var(--blue); margin-top: 2px; }

/* ── H3/P3 · Due countdowns + required tag ── */
.req-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--red-glow); color: var(--red); border: 1px solid rgba(200,16,46,.25);
  padding: 1px 6px; border-radius: 5px; vertical-align: 1px; margin-left: 6px;
}
.due-when { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.due-when.overdue  { background: var(--red-glow);   color: var(--red);   border: 1px solid rgba(200,16,46,.25); }
.due-when.today    { background: var(--amber-glow); color: var(--amber); border: 1px solid rgba(180,83,9,.25); }
.due-when.soon     { background: var(--amber-glow); color: var(--amber); }
.due-when.upcoming { background: var(--off);        color: var(--muted2); }
.due-when.none     { background: var(--off);        color: var(--muted); font-weight: 600; font-style: italic; }

/* ── C1/H6 · Real uploads ── */
.upload-area.drag { border-color: var(--red); background: var(--red-glow); }
.upload-area:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ul-files { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ul-files:empty { display: none; }
.ul-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--off); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.ul-chip i { color: var(--muted2); }
.ul-chip.drive i { color: #1a73e8; }
.ul-chip .fn { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul-chip .fz { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ul-chip .ul-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 4px; }
.ul-chip .ul-x:hover { color: var(--red); }
/* clickable uploaded file + inline preview so students can confirm the upload */
.ul-chip.is-cloud { cursor: pointer; }
.ul-chip.is-cloud:hover { border-color: var(--accent, #7C3AED); }
.ul-chip.is-cloud:focus-visible { outline: 2px solid var(--accent, #7C3AED); outline-offset: 1px; }
.ul-thumb { width: 42px; height: 42px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--page, #f4f4f6); border: 1px solid var(--border); }
.ul-thumb i { color: var(--muted2); font-size: 15px; }
.ul-thumb.has-img { border-color: transparent; }
.ul-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ul-chip .ul-state { font-size: 11px; flex-shrink: 0; white-space: nowrap; }
.ul-chip.is-cloud .ul-state { color: var(--green, #15803d); font-weight: 600; }
.ul-chip.is-local .ul-state { color: var(--amber, #b45309); font-weight: 600; }
/* Google Workspace backup/export card */
.gpwr-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--off); }
.gpwr-row > div:first-child { min-width: 0; }
.gpwr-row .sm { font-size: 12px; margin-top: 2px; }
.gpwr-row .btn { flex-shrink: 0; }
.sc-head { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 2px; }
.sc-head .fa-google { color: #4285F4; }
@media (max-width: 560px){ .gpwr-row { flex-direction: column; align-items: stretch; } .gpwr-row .btn { width: 100%; } }
.ul-or { margin-top: 8px; }
.ul-drive {
  background: var(--surface); border: 1px dashed var(--border-light); border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted2); cursor: pointer;
  display: inline-flex; gap: 8px; align-items: center; width: 100%; justify-content: center;
}
.ul-drive:hover { border-color: #1a73e8; color: #1a73e8; }
.ul-drive i { color: #1a73e8; }

/* ── M6 · incomplete highlight ── */
.needs-attn { animation: needsAttn 1.6s ease; }
@keyframes needsAttn {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
  20%,60% { box-shadow: 0 0 0 3px rgba(200,16,46,.28); border-color: var(--red) !important; }
}

/* ── H4 · Save indicator ── */
.save-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--green);
  background: var(--green-glow); border: 1px solid rgba(21,128,61,.2); border-radius: 20px;
  padding: 2px 9px; margin-top: 6px; opacity: 0; transform: translateY(-2px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.save-pill.show { opacity: 1; transform: translateY(0); }
.save-pill.saving { color: var(--amber); background: var(--amber-glow); border-color: rgba(180,83,9,.2); }
.save-pill.saving i { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── H7 · Read-aloud FAB ── */
.ns-read-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--badge-bg); color: #fff; font-size: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.ns-read-fab:hover { background: var(--red); }
/* Accommodation variant: a labeled pill so a read-aloud (IEP/504) student can
   always find the control. Uses theme vars so it's correct in light + dark. */
.ns-read-fab.accom {
  width: auto; height: 46px; border-radius: 23px; padding: 0 18px 0 15px;
  display: inline-flex; align-items: center; gap: 9px; background: var(--red);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.ns-read-fab.accom .ns-read-lab { font-size: 14px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }

/* ── P2 · Streak + leaderboard ── */
.streak-card .streak-big {
  font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.streak-card .streak-big i { color: #ea580c; }
.streak-card .streak-big span { font-size: 16px; font-weight: 600; color: var(--muted); }
.lb-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px;
}
.lb-row.me { background: var(--red-glow); }
.lb-row .lb-rank { width: 20px; font-weight: 800; color: var(--muted); text-align: center; }
.lb-row.me .lb-rank { color: var(--red); }
.lb-row .lb-name { flex: 1; font-weight: 600; }
.lb-row .lb-you { font-size: 10px; font-weight: 700; color: var(--red); background: var(--surface); border: 1px solid rgba(200,16,46,.3); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.lb-row .lb-score { font-weight: 800; color: var(--text); }
.lb-row .lb-pts { color: var(--red); display: inline-flex; align-items: baseline; gap: 3px; }
.lb-row .lb-pts small { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.lb-row.lb-sep { margin-top: 6px; border-top: 1px dashed var(--border, #e7e7ea); border-radius: 0 0 8px 8px; padding-top: 9px; }
.lb-mygrade { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 10px 13px; border-radius: 10px; background: var(--red-glow, #fbe9ec);
  border: 1px solid rgba(200,16,46,.18); }
.lb-mygrade .lb-mg-lab { font-size: 12.5px; font-weight: 700; color: #7a1322; display: inline-flex; align-items: center; gap: 7px; }
.lb-mygrade .lb-mg-lab i { font-size: 11px; opacity: .8; }
.lb-mygrade .lb-mg-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--red); line-height: 1; }
.lb-mg-note { font-size: 11px; margin-top: 6px; }
.ar-syncnote { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 9px; font-family: 'Outfit', sans-serif; font-size: 12.5px; line-height: 1.4; }
.ar-syncnote i { margin-top: 1px; }
.ar-syncnote.ok { background: var(--win-soft, #e9f6ee); color: #1a5c32; border: 1px solid #b6e5c8; }
.ar-syncnote.local { background: var(--surface)8ec; color: #92620a; border: 1px solid #f5d77e; }

/* ── Panel headings (P5) ── */
.tw-group-title {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); display: flex; gap: 7px; align-items: center; margin: 0 0 10px;
}
.tw-hint { font-size: 10px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tw-note { font-size: 11.5px; color: var(--green); margin-top: 8px; display: flex; gap: 6px; align-items: center; }

/* ── M2 · Not-enrolled rescue ── */
.ne-code-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ne-code-input {
  flex: 1; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; outline: none; text-transform: uppercase; letter-spacing: .05em;
}
.ne-code-input:focus { border-color: var(--red); }
.google-btn.ne-join { width: auto; margin: 0; padding: 11px 16px; background: var(--red); color: #fff; border: none; }
.google-btn.ne-join:hover { background: var(--red-dark); }
.ne-request {
  width: 100%; background: none; border: none; color: var(--muted2); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 6px; margin-bottom: 8px; display: inline-flex; gap: 7px; align-items: center; justify-content: center;
}
.ne-request:hover { color: var(--red); }
.ne-status { font-size: 12.5px; line-height: 1.5; margin: 4px 0 10px; color: var(--muted2); }
.ne-status.ok { color: var(--green); }
.ne-status i { margin-right: 5px; }

/* ── H7 · Bigger text mode ── */
body.big-text { font-size: 17px; }
body.big-text .l-body, body.big-text .block, body.big-text .block p,
body.big-text .field, body.big-text .dn-input, body.big-text .due-title,
body.big-text .na-lead, body.big-text .mc-opt, body.big-text .sb-item .lbl { font-size: 1.06em; }
body.big-text .reader-body, body.big-text .bdo-doc { font-size: 16.5px; line-height: 1.7; }

/* ── H7 · honor reduced motion / calm mode ── */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
body.reduce-motion #fx-ct, body.reduce-motion #fx-flash, body.reduce-motion .scan { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   H2 · RESPONSIVE — phone & small tablet
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){
  #app { flex-direction: column; height: 100dvh; }

  /* rail → bottom tab bar */
  #rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: 60px; flex-direction: row; align-items: stretch;
    justify-content: space-around; padding: 0; z-index: 300;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .rail-logo, .rail-sep, .rail-avatar { display: none; }
  .rail-btn { flex: 1; height: 100%; border-radius: 0; flex-direction: column; gap: 3px; font-size: 17px; }
  /* bottom bar → indicator becomes a top bar, active item uses color not fill */
  .rail-btn::before { left: 50%; top: 0; transform: translateX(-50%); width: 0; height: 3px; transition: width 0.22s cubic-bezier(.2,.7,.2,1); }
  .rail-btn.active::before { width: 26px; height: 3px; }
  .rail-btn.active { background: transparent; color: var(--gold, #eccb78); box-shadow: none; }
  .rail-btn .tip {
    position: static; opacity: 1; transform: none; background: none; color: inherit;
    padding: 0; font-size: 9px; font-weight: 600; letter-spacing: .02em; box-shadow: none;
  }

  /* sidebar → off-canvas drawer */
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 320;
    width: 84%; max-width: 320px; height: 100dvh;
    box-shadow: 12px 0 40px rgba(0,0,0,.25);
    transform: translateX(0); transition: transform .25s;
  }
  #sidebar.collapsed { width: 84%; opacity: 1; transform: translateX(-104%); pointer-events: none; }
  /* The backdrop used to be `#sidebar:not(.collapsed)::after` — a pseudo-element,
     so there was nothing to bind a tap to and the only way out of the drawer was
     a hamburger the drawer itself covered. It is now a REAL element (#nav-scrim,
     created in beta-app.js) that closes the menu when tapped. */
  #nav-scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 310;
    -webkit-tap-highlight-color: transparent;
    /* HIDDEN BY DEFAULT, shown only while the sidebar is genuinely open. The
       scrim's visibility is derived from the SIDEBAR'S OWN CLASS rather than
       from JS bookkeeping, because the JS teardown proved to be timing-
       dependent: navigating from inside the drawer re-renders the shell, and
       whichever path won the race could leave the element behind — a
       transparent full-screen overlay swallowing every click with no visible
       cause. Deriving it in CSS makes that impossible: a stale node cannot
       block anything, because it cannot be displayed while #sidebar is
       collapsed. The JS teardown stays as the tidy path; this is the guarantee.
       (#nav-scrim is appended to <body> after #sidebar, so the sibling
       combinator holds.) */
    display: none;
  }
  #sidebar:not(.collapsed) ~ #nav-scrim { display: block; }

  #main { width: 100%; min-height: 0; }
  #topbar { padding: 0 14px; gap: 8px; }
  .tb-right { gap: 6px; }
  .tb-btn span, .role-pill span { display: none; }
  .tb-btn { padding: 7px 10px; }
  #content { padding: 18px 14px calc(72px + env(safe-area-inset-bottom)); overflow-x: hidden; }
  .page-inner { max-width: 100%; }

  /* stacks */
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .dash-hero { grid-template-columns: 1fr; padding: 20px; gap: 16px; text-align: left; }
  .dash-hero .h-stats { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 14px; }
  .next-action { flex-wrap: wrap; }
  .next-action .na-go { width: 100%; justify-content: flex-end; }

  /* hero rows + rank cards already have their own breakpoints; tighten */
  .dash-variant-classic .hero-row { grid-template-columns: 1fr !important; }
  .dash-variant-classic .hero-row .cbadge { display: none; }
  .focus-card { flex-direction: column; gap: 16px; }

  /* tables scroll inside their own container, never the page */
  .gb-wrap, .gb-scroll, .card { max-width: 100%; }
  .gb-scroll { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  table.gb { font-size: 12px; }
  /* keep the student-name column pinned while assignments scroll sideways (H2) */
  table.gb th:first-child, table.gb td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    box-shadow: 1px 0 0 var(--border), 6px 0 9px -8px rgba(0,0,0,.25);
  }
  table.gb thead th:first-child { z-index: 3; background: #fafafb; }
  /* 44px tap targets on every grade cell + its editable input */
  table.gb td { min-height: 44px; }
  table.gb td .gb-cell, table.gb td input, table.gb td .gb-input { min-height: 40px; }
  table.gb th[data-asgn] { scroll-snap-align: start; }

  /* tap targets */
  .sb-item { padding: 11px 12px; }
  .due-card { padding: 14px; }
  .mc-opt { padding: 12px 14px; }
  .submit-btn, .ld-mark-btn { min-height: 44px; }

  /* tweaks panel full-width sheet */
  #tweaks-panel { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 80dvh; }
  .ns-read-fab { bottom: 74px; }
}

/* ═══════════════════════════════════════════════════════════════════
   H2 · PHONE (≤640) — dense tables become cards, daily-loop stays tappable
   The 820px rules above keep a scroll-table on tablets; below 640 the
   gradebook collapses to one card per student and What's Due breathes.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  /* ── Gradebook: card-per-student, not a sideways-scrolling grid ── */
  #gb-table, #gb-table tbody, #gb-table tr, #gb-table td { display: block; width: 100%; }
  #gb-table thead, #gb-table tfoot { display: none; }
  .gb-wrap { border: none; background: transparent; border-radius: 0; overflow: visible; }
  .gb-scroll { overflow: visible; scroll-snap-type: none; }

  #gb-table tbody tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    margin-bottom: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  #gb-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; padding: 8px 15px; white-space: normal;
    border-bottom: 1px solid var(--border); position: static; box-shadow: none;
  }
  #gb-table tbody tr td:last-child { border-bottom: none; }

  /* name row = card header */
  #gb-table td:first-child {
    min-height: 56px; background: var(--off);
  }
  #gb-table td:first-child .sub { display: block; }

  /* labeled value rows: assignment title / Daily / Major / etc. on the left */
  #gb-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* the four roll-up rows read as one tinted summary strip */
  #gb-table td[data-sum] { background: #fcfcfd; }
  body.theme-dark #gb-table td[data-sum] { background: var(--off); }
  #gb-table td[data-sum]::before { color: var(--text); }

  /* editable grade input → real tap target */
  #gb-table td .grade-in {
    width: 96px; min-height: 40px; text-align: center; font-size: 16px; flex: 0 0 auto;
  }
  #gb-table td .grade-pill, #gb-table td .chip { flex: 0 0 auto; }
  #gb-table td .flag-btn { min-height: 40px; padding: 8px 12px; }

  /* ── What's Due: dense rows breathe and stay 44px+ tappable ── */
  .due-card { align-items: flex-start; gap: 12px; min-height: 56px; padding: 14px; }
  .due-title { white-space: normal; }
  .due-when { white-space: normal; text-align: right; }
}

@media (max-width: 460px){
  .dash-hero .h-stats { gap: 18px; }
  .next-action .na-icon { width: 38px; height: 38px; font-size: 16px; }
  .next-action .na-lead { font-size: 15px; }
}

/* Fix: an opened lesson detail must sit ABOVE the block-detail overlay
   (z-index 700), or the turn-in / upload UI is hidden behind it. */
/* (lesson opens inline now — no portal stacking needed) */
#block-detail-overlay { z-index: 700; }

/* Google Drive save button in lesson footer */
.ld-drive-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: #1a73e8; color: #fff; border: none;
  cursor: pointer; text-decoration: none;
  transition: opacity .15s;
  font-family: inherit;
}
.ld-drive-btn:hover { opacity: .85; }
.ld-drive-btn i { font-size: 13px; }

/* Drive files list in student drawer */
.drive-files-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px;
}
.drive-file-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: border-color .13s, background .13s;
}
.drive-file-row:hover { border-color: #1a73e8; background: rgba(26,115,232,.06); }

/* YouTube result cards */
.yt-result-card {
  cursor: pointer; padding: 6px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  transition: border-color .13s;
}
.yt-result-card:hover { border-color: #ff0000; }

/* ══════════════════════════════════════════
   CALENDAR VIEW
══════════════════════════════════════════ */
.cal-nav {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.cal-nav-title {
  font-size: 17px; font-weight: 700;
  min-width: 180px; text-align: center;
}
.cal-legend {
  display: flex; gap: 16px; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cal-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}

/* Month grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-head {
  text-align: center; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 6px 0;
}
.cal-cell {
  min-height: 80px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  cursor: default;
  transition: border-color .13s, background .13s;
}
.cal-cell.empty {
  background: transparent; border-color: transparent;
}
.cal-cell.past {
  opacity: .5;
}
.cal-cell.today {
  border-color: var(--red);
  background: var(--red-glow);
}
.cal-cell.today .cal-day-num {
  color: var(--red); font-weight: 800;
}
.cal-cell.has-items {
  cursor: pointer;
}
.cal-cell.has-items:hover {
  border-color: rgba(255,255,255,.18);
  background: #222;
}
.cal-day-num {
  font-size: 12px; font-weight: 600;
  color: var(--muted); margin-bottom: 5px;
}
.cal-dots {
  display: flex; flex-wrap: wrap; gap: 3px;
}
.cal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.cal-dot.major { background: var(--red); }
.cal-dot.daily { background: #3b82f6; }
.cal-dot.done  { background: var(--green); opacity: .6; }
.cal-more {
  font-size: 10px; color: var(--muted);
  line-height: 8px;
}

/* List groups */
.cal-list-group { margin-bottom: 22px; }

/* Responsive */
@media (max-width: 640px) {
  .cal-cell { min-height: 54px; padding: 4px 5px; }
  .cal-day-num { font-size: 11px; }
  .cal-dot { width: 6px; height: 6px; }
  .cal-nav-title { min-width: 130px; font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE  ·  body.theme-dark
   Re-maps the design tokens to a dark palette and remaps the surfaces
   that hard-code white. NorthShore red stays the accent.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-dark {
  /* Apple-style layered near-black: a dim base, elevated surfaces a step
     lighter, controls a step lighter still, hairline separators. */
  --page-bg:     #0a0a0b;   /* base canvas            */
  --surface:     #1c1c1e;   /* elevated surface       */
  --surface-2:   #2c2c2e;   /* controls / inputs      */
  --card:        var(--surface);
  --card2:       var(--surface-2);
  --off:         #2c2c2e;   /* subtle fills & tracks  */
  --raised:      #3a3a3c;   /* selected segment       */
  --border:      #38383c;   /* hairline separator     */
  --border-light:#48484c;
  --text:        #f5f5f7;   /* primary (off-white)    */
  --muted:       #98989f;   /* secondary              */
  --muted2:      #c9c9d0;   /* tertiary               */
  --badge-bg:    #000000;
  /* accent brightens for legibility on black (semantic adaptation) */
  --red:         #ff4d62;
  --red-dark:    #e03650;
  --red-glow:    rgba(255,77,98,0.16);
  --green:       #34d27b;
  --green-glow:  rgba(52,210,123,0.16);
  --amber:       #f0a23b;
  --amber-glow:  rgba(240,162,59,0.16);
  --blue:        #5e9bff;
  --blue-glow:   rgba(94,155,255,0.16);
  --purple:      #b08cff;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-hover:0 8px 26px rgba(0,0,0,0.6);
  color-scheme: dark;
}

/* native scrollbars + the dotted content grid */
body.theme-dark #content,
body.theme-dark.fx-on #content {
  background-color: var(--page-bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
}
body.theme-dark ::-webkit-scrollbar { width: 12px; height: 12px; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #3a3a3c; border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }
body.theme-dark ::-webkit-scrollbar-track { background: transparent; }

/* ── elevated surfaces (these hard-code white across the app) ──
   NOTE: New components should set `background: var(--surface)` (cards) or
   `var(--surface-2)` (controls/inputs) — those tokens flip themselves in
   dark mode, so a new surface is NEVER invisible. The enumerated list
   below is now a backstop for legacy selectors only; don't grow it. ── */
body.theme-dark #sidebar,
body.theme-dark #topbar,
body.theme-dark .card,
body.theme-dark .stat,
body.theme-dark .dash-hero,
body.theme-dark .course-card,
body.theme-dark .toolbar,
body.theme-dark .gb-wrap,
body.theme-dark table.gb,
body.theme-dark table.std-matrix,
body.theme-dark table.std-mastery,
body.theme-dark .module-row,
body.theme-dark .blk-card,
body.theme-dark .modules-grid .m-card,
body.theme-dark .modules-timeline .tl-item,
body.theme-dark .unit-head,
body.theme-dark .mod-reader,
body.theme-dark .lesson-list,
body.theme-dark .lesson.open,
body.theme-dark .lesson.open .l-body,
body.theme-dark .block-folder,
body.theme-dark .dn-card,
body.theme-dark .watch-respond,
body.theme-dark .vocab-card,
body.theme-dark .rubric-table,
body.theme-dark .pace-banner,
body.theme-dark .legacy-mat,
body.theme-dark .modal,
body.theme-dark #tweaks-panel,
body.theme-dark .drawer,
body.theme-dark .set-sec-row,
body.theme-dark .login-box,
body.theme-dark .focus-card,
body.theme-dark .chapter-read,
body.theme-dark #cc-page .cc-plan,
body.theme-dark #cc-page .cc-grade-cta,
body.theme-dark #cc-page .cc-stat,
body.theme-dark #cc-page .cc-panel,
body.theme-dark #cc-page .cc-setup-cta,
body.theme-dark #cc-page .cc-periods,
body.theme-dark #gs-page .gs-q-group,
body.theme-dark #gs-page .gs-clear,
body.theme-dark #gs-page .gs-q-stu,
body.theme-dark #gs-review .gs-panel,
body.theme-dark #rs-page .rs-chips,
body.theme-dark #rs-page .rs-search,
body.theme-dark #rs-page .rs-grp,
body.theme-dark #rs-page .rs-noresults,
body.theme-dark #rs-page .rs-empty,
body.theme-dark #gs-review .gsr-card {
  background: var(--card);
}

/* dimmer header strips / inset rows */
body.theme-dark .lesson.open { background: var(--card); }
body.theme-dark #sb-footer,
body.theme-dark .sidebar-foot,
body.theme-dark .gb-wrap thead th,
body.theme-dark #rs-page .rs-grp-head { background: var(--off); }

/* ── controls: buttons, inputs, chips (one step lighter, hairline edge) ── */
body.theme-dark .field,
body.theme-dark .dn-input,
body.theme-dark .watch-respond textarea,
body.theme-dark .checkbox-option,
body.theme-dark .mc-opt,
body.theme-dark .cl-item,
body.theme-dark .sb-search input,
body.theme-dark .sec-switch-btn,
body.theme-dark .sec-switch-menu,
body.theme-dark .tb-btn,
body.theme-dark .btn,
body.theme-dark .google-btn,
body.theme-dark .login-account,
body.theme-dark .score-btn,
body.theme-dark .scale-pill,
body.theme-dark .l-circle,
body.theme-dark .ml-check,
body.theme-dark .ws-head .wsh-badge,
body.theme-dark .l-status,
body.theme-dark #cc-page .pa-btn,
body.theme-dark #cc-page .step-btn,
body.theme-dark #cc-page .gq-btn,
body.theme-dark #cc-page .ny-go,
body.theme-dark #cc-page .cc-qa,
body.theme-dark #cc-page .cc-setup-cta .csc-ghost,
body.theme-dark #gs-page .gs-q-gradeall,
body.theme-dark #gs-page .gs-rr-row,
body.theme-dark #gs-review .gs-stu-drawer,
body.theme-dark #gs-review .gs-qs,
body.theme-dark #cc-page .gs-cc-btn,
body.theme-dark #rs-page .rs-act,
body.theme-dark .rs-move-opt,
body.theme-dark #gs-review .gsr-lv {
  background: var(--card2);
  color: var(--text);
}

/* selected segment / active filter chip pops one step lighter */
body.theme-dark .tw-seg button.active,
body.theme-dark .pf-btn.active,
body.theme-dark .login-tab.active {
  background: var(--raised);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* small affordances that read on white */
body.theme-dark .l-circle { border-color: var(--border-light); }
body.theme-dark .cl-box { background: var(--card2); border-color: var(--border-light); }
body.theme-dark .grade-pill.dash { background: var(--off); color: var(--muted2); }
body.theme-dark .av-figure img { background: var(--card2); }
body.theme-dark #cc-page .cc-qa:hover > i { background: var(--card); }
body.theme-dark #cc-page .mp-track,
body.theme-dark .progress-bar { background: var(--off); }

/* gradients / fades that bake in #fff */
body.theme-dark .block.ws-head { background: linear-gradient(180deg, var(--off), var(--card)); }
body.theme-dark #fx-flash { background: #fff; }

/* hover states that flip to #fff */
body.theme-dark .tb-toggle:hover,
body.theme-dark .login-roster-item:hover,
body.theme-dark .sb-search input:focus { background: var(--card2); }

/* the toggle knob stays light on its colored track */
body.theme-dark .cp-switch::after { background: #f5f5f7; }

/* ── editor / utility modals that ship their own light palette ── */
body.theme-dark .nsedit-modal .field,
body.theme-dark .nsedit-correct,
body.theme-dark .nsedit-add,
body.theme-dark .tt-field .field,
body.theme-dark .tt-btn,
body.theme-dark .ttv-row,
body.theme-dark .tt-res-add,
body.theme-dark .tt-res-card,
body.theme-dark .gc-sel {
  background: var(--card2);
  color: var(--text);
  border-color: var(--border);
}
body.theme-dark .tt-res-block { background: var(--card); border-color: var(--border); }
body.theme-dark .nsedit-field > label,
body.theme-dark .gc-lab { color: var(--muted2); }
body.theme-dark .gc-auto-preview { background: var(--off); color: var(--muted2); border-color: var(--border); }

/* gradebook sticky header + pinned name column bake in #fafafb / #fff */
body.theme-dark table.gb thead,
body.theme-dark table.gb thead th:first-child { background: var(--off); }
body.theme-dark table.gb th:first-child,
body.theme-dark table.gb td:first-child { background: var(--card); }

/* language card (s7-i18n) ships a light slate palette */
body.theme-dark .ns-lang-btn { background: var(--card2); border-color: var(--border); }
body.theme-dark .ns-lang-btn:hover { border-color: var(--border-light); }
body.theme-dark .ns-lang-btn.active { background: var(--red-glow); border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,77,98,0.14); }
body.theme-dark .ns-lang-flag { background: var(--off); color: var(--muted2); }
body.theme-dark .ns-lang-name { color: var(--text); }
body.theme-dark .ns-lang-active { color: var(--muted); }

/* ── lesson reader / lesson-body blocks (hard-code light fills) ── */
body.theme-dark .l-body,
body.theme-dark .bf-steps,
body.theme-dark .mini-lesson,
body.theme-dark .bdo-topbar,
body.theme-dark .steps-box,
body.theme-dark .quiz-card,
body.theme-dark .anatomy-cell { background: var(--card); }
body.theme-dark .dn-teacher { background: var(--card2); color: var(--muted2); }
body.theme-dark .sb-foot { background: var(--off); }
body.theme-dark .prog { background: var(--off); }

/* the Appearance row in Settings */
.set-appearance { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.set-appearance .tw-seg { flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════
   POLISH LAYER  (folded in from the former polish.css — it only ever
   loaded right after this sheet, so appending it here is identical in
   cascade order. One fewer stylesheet + request; the refinements now
   live with the base they refine.)
   ═══════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────
   1 · ROSTER-TOOLS FAB  — was pinned left:76px, sitting on top of
   the sidebar nav + sync footer. It's a rarely-used teacher utility,
   so collapse it to a compact icon-only puck in the bottom-right
   corner that expands to its label only on hover/focus — so it stops
   covering page content while staying one click away.
   ───────────────────────────────────────────────────────────── */
#ns-roster-tools-fab {
  left: auto !important;
  right: 22px !important;
  bottom: 22px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: 0 !important;            /* collapses the "Roster tools" text node */
  box-shadow: 0 8px 24px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.04) inset !important;
  transition: width .18s cubic-bezier(.4,0,.2,1), border-radius .18s, background .16s, box-shadow .16s, transform .16s !important;
}
#ns-roster-tools-fab i { font-size: 15px !important; }
#ns-roster-tools-fab:hover,
#ns-roster-tools-fab:focus-visible {
  width: auto !important;
  padding: 0 16px !important;
  gap: 8px !important;
  border-radius: 22px !important;
  font-size: 12.5px !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.30) !important;
}
#ns-roster-tools-fab:active { transform: translateY(0) scale(.97) !important; }
@media (max-width: 640px) {
  #ns-roster-tools-fab {
    right: 14px !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   2 · BUTTON MICRO-INTERACTIONS
   The base buttons hover but never acknowledge a press. Add a
   consistent tactile press, a gentle lift on primary actions, and
   swap the linear `all .15s` easing for a softer cubic curve.
   ───────────────────────────────────────────────────────────── */
.btn, .tb-btn, .google-btn, .ld-back, .bdo-nav-btn, .flag-btn, .icon-btn, .pf-btn, .cs-opt {
  transition: background .17s cubic-bezier(.4,0,.2,1),
              border-color .17s cubic-bezier(.4,0,.2,1),
              color .17s cubic-bezier(.4,0,.2,1),
              box-shadow .17s cubic-bezier(.4,0,.2,1),
              transform .12s cubic-bezier(.4,0,.2,1);
}

/* tactile press — pulls everything together with one consistent feel */
.btn:active,
.tb-btn:active,
.google-btn:active,
.icon-btn:active,
.flag-btn:active,
.pf-btn:active,
.ld-back:active,
.bdo-nav-btn:active,
.cp-preset:active,
.set-sec-row .btn:active { transform: translateY(0) scale(.975); }

/* primary calls-to-action lift slightly off the surface on hover */
.tb-btn.primary:hover,
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(200,16,46,0.26);
}
.tb-btn.primary:active,
.btn.primary:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 8px rgba(200,16,46,0.22); }

/* the dark Google / sign-in button gets the same lift vocabulary */
.google-btn.ne-join:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(200,16,46,0.26); }

/* ─────────────────────────────────────────────────────────────
   3 · NAV & LIST FEEDBACK
   Sidebar items, reader nav, menus and switchers get a faint press
   so taps feel registered — matches the card/due-card vocabulary
   that already exists elsewhere.
   ───────────────────────────────────────────────────────────── */
.sb-item, .rn-item, .gbm-opt, .ss-opt, .rail-btn, .module-row, .blk-card, .login-account {
  transition: background .15s cubic-bezier(.4,0,.2,1),
              color .15s cubic-bezier(.4,0,.2,1),
              border-color .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s cubic-bezier(.4,0,.2,1),
              transform .12s cubic-bezier(.4,0,.2,1);
}
.sb-item:active,
.rn-item:active,
.gbm-opt:active,
.ss-opt:active { transform: scale(.985); }
.rail-btn:active { transform: scale(.95); }

/* active sidebar item earns a hairline shadow so it reads as "lifted" */
.sb-item.active { box-shadow: 0 2px 8px rgba(200,16,46,0.22); }

/* course switch active pill: smoother engagement */
.cs-opt.active { transition: background .18s cubic-bezier(.4,0,.2,1), color .18s, box-shadow .18s; }

/* ─────────────────────────────────────────────────────────────
   4 · INPUT FOCUS — soften the focus ring on text inputs into a
   gentle red halo (keeps the accessible :focus-visible outline for
   keyboard users via the base sheet; this only adds warmth on fields).
   ───────────────────────────────────────────────────────────── */
.tb-input:focus,
.login-input:focus,
.ne-code-input:focus,
.imp-fld input:focus,
.sb-search input:focus,
.grade-row input.grade-in:focus {
  box-shadow: 0 0 0 3px var(--red-glow);
}
.tb-input, .login-input, .ne-code-input, .imp-fld input, .grade-row input.grade-in {
  transition: border-color .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1);
}

/* ─────────────────────────────────────────────────────────────
   5 · EMPTY STATES — give the generic .empty block more presence and
   a soft entrance, and round off its icon into a tinted token so it
   matches the stat-icon / setup-card language instead of a bare glyph.
   ───────────────────────────────────────────────────────────── */
.empty {
  animation: polishEmptyIn .32s cubic-bezier(.22,1,.36,1) both;
}
.empty i {
  width: 64px; height: 64px; line-height: 64px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--off);
  color: var(--muted);
  opacity: 1;
  font-size: 26px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.empty .l { letter-spacing: -0.01em; }
.empty .s { max-width: 360px; margin: 0 auto; line-height: 1.55; }
@keyframes polishEmptyIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* setup-hero CTA buttons: same tactile lift as the rest of the app */
.setup-actions .btn:hover { transform: translateY(-1px); }
.setup-actions .btn:active { transform: translateY(0) scale(.98); }

/* ─────────────────────────────────────────────────────────────
   6 · SMALL CONSISTENCY NITS
   ───────────────────────────────────────────────────────────── */
/* chips/grade-pills hint they're interactive only where clickable
   already handled — leave static ones alone. Just tighten the
   gradebook column-menu button press. */
.gb-colmenu-btn:active { transform: scale(.99); }

/* drawer + modal close buttons: clearer hover affordance */
.modal-h .m-x, #tweaks-panel .close {
  transition: background .15s, color .15s, transform .12s;
}
.modal-h .m-x:active, #tweaks-panel .close:active { transform: scale(.9); }

/* topbar sidebar-toggle press */
.tb-toggle:active { transform: scale(.92); }

/* ─────────────────────────────────────────────────────────────
   7 · CLOUD SYNC card (Settings ▸ Cloud sync & backup)
   ───────────────────────────────────────────────────────────── */
.nsc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nsc-ico {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.nsc-ico.nsc-ok    { background: rgba(31,138,91,0.10); color: #1F8A5B; }
.nsc-ico.nsc-off   { background: rgba(180,120,10,0.12); color: #9a6a00; }
.nsc-ico.nsc-local { background: var(--off, #f4f4f5); color: var(--muted, #6b7280); box-shadow: inset 0 0 0 1px var(--border, #e6e6e9); }
.nsc-tx { flex: 1; min-width: 200px; }
.nsc-tx .t { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.nsc-tx .s { font-size: 12.5px; color: var(--muted, #6b7280); line-height: 1.55; margin-top: 2px; text-wrap: pretty; }
.nsc-meta {
  font-size: 11.5px; font-weight: 600; color: #1F8A5B;
  margin-top: 7px; display: inline-flex; align-items: center; gap: 6px;
}
.nsc-meta i { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
   N · PHOTO II BLOCK KINDS — videoref + scorelog
   Additive renderers used by the Adobe Certified Professional course.
   ───────────────────────────────────────────────────────────── */
/* Link-rot-proof "search YouTube" video reference card */
.vref {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 15px; border: 1px solid var(--border, #e6e6e9);
  border-radius: 12px; background: var(--off, #f7f7f8);
}
.vref-ico {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface, #fff); color: #FF0000; font-size: 18px;
  box-shadow: inset 0 0 0 1px var(--border, #e6e6e9);
}
.vref-main { flex: 1; min-width: 0; }
.vref-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted, #6b7280); margin-bottom: 3px;
}
.vref-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; text-wrap: pretty; }
.vref-by { font-size: 12px; color: var(--muted2, #4b5563); margin-top: 3px; }
.vref-note { font-size: 12px; color: var(--muted, #6b7280); margin-top: 6px; line-height: 1.5; text-wrap: pretty; }
.vref-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
  padding: 7px 13px; border-radius: 8px; text-decoration: none;
  background: var(--surface, #fff); border: 1px solid var(--border, #e6e6e9);
  color: var(--text, #1a1d23); font-size: 12.5px; font-weight: 600;
  transition: border-color .14s, background .14s, transform .05s;
}
.vref-btn:hover { border-color: var(--m-accent, var(--red, #C8102E)); background: var(--off, #f7f7f8); }
.vref-btn:active { transform: scale(.98); }
.vref-btn i { font-size: 11px; color: var(--m-accent, var(--red, #C8102E)); }

/* GMetrix / Certiport score logger */
.scorelog {
  border: 1px solid var(--border, #e6e6e9); border-radius: 11px;
  overflow: hidden; background: var(--surface, #fff);
}
.sl-row {
  display: grid; grid-template-columns: 1fr 110px; align-items: center;
  gap: 12px; padding: 9px 13px; border-top: 1px solid var(--border, #e6e6e9);
}
.sl-row:first-child { border-top: none; }
.sl-head {
  background: var(--off, #f7f7f8);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted, #6b7280);
}
.sl-head span:last-child { text-align: center; }
.sl-label { font-size: 13px; font-weight: 600; color: var(--text, #1a1d23); }
.sl-input.field {
  width: 100%; text-align: center; padding: 7px 8px; margin: 0;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.sl-total { background: var(--off, #f7f7f8); }
.sl-total .sl-label { color: var(--m-accent, var(--red, #C8102E)); }
.sl-target {
  margin-top: 10px; font-size: 12.5px; color: var(--muted2, #4b5563);
  display: flex; align-items: center; gap: 8px;
}
.sl-target i { color: var(--m-accent, var(--red, #C8102E)); }
.sl-target strong { color: var(--text, #1a1d23); }

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL HOVER MOTION — app-wide liveliness on hover, mirroring the
   Mustang Media club's "hover energy". The POLISH LAYER above already
   handles active/press feedback; this adds the *hover* half — gentle
   lifts on buttons, a small indent on clickable rows, and icon pops.
   Reveal-safe (transform only) and gated on prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Every button gently lifts on hover — primary CTAs already do this,
     so this brings secondary / ghost / icon buttons up to the same feel.
     (Their transform transition is already declared in the polish layer.) */
  .btn:hover, .tb-btn:hover, .icon-btn:hover, .flag-btn:hover,
  .google-btn:hover, .score-btn:hover, .scale-pill:hover,
  .legacy-mat:hover .icon { transform: translateY(-1px); }

  /* Button leading icons give a small spring kick on hover */
  .btn > i, .tb-btn > i, .icon-btn > i {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .btn:hover > i, .tb-btn:hover > i, .icon-btn:hover > i { transform: scale(1.14); }

  /* Clickable rows & menu options slide in a touch on hover */
  .sb-item, .rn-item, .ss-opt, .gbm-opt, .cont-row,
  .cl-item, .mc-opt, .legacy-mat {
    transition: background .15s ease, color .15s ease, border-color .15s ease,
                box-shadow .18s ease, transform .16s cubic-bezier(.4,0,.2,1);
  }
  .sb-item:hover, .rn-item:hover, .ss-opt:hover, .gbm-opt:hover,
  .cont-row:hover, .cl-item:hover, .mc-opt:hover,
  .legacy-mat:hover { transform: translateX(3px); }
  .sb-item.active:hover, .ss-opt.active:hover { transform: none; }   /* current item holds position */

  /* Leading icons / avatars pop with their row */
  .name-cell .avatar, .legacy-mat .icon, .cont-row > i:first-child,
  .cl-item .cl-box {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .cont-row:hover > i:first-child,
  .name-cell:hover .avatar { transform: scale(1.12) rotate(-4deg); }

  /* Cards that already lift get a softer spring on the lift */
  .course-card, .module-row, .modules-grid .m-card,
  .modules-timeline .tl-item {
    transition: border-color .2s ease, box-shadow .2s ease,
                transform .2s cubic-bezier(.34,1.4,.5,1);
  }
  .modules-timeline .tl-item:hover { transform: translateY(-2px); }
}

/* ═══════════════ SATISFYING NAVIGATION (v3511) ═══════════════ */
/* Softer cinematic: a quick letterbox pinch instead of a full shutter wipe. */
#fx-ct.active .bar { height: 9%; }
#fx-flash.pop { opacity: 0.03; }

@media (prefers-reduced-motion: no-preference) {
  /* dashboard widgets cascade in for a satisfying settle */
  .page.active .cc-grid > * { animation: ngRise 0.5s cubic-bezier(.2,.7,.2,1) both; }
  .page.active .cc-grid > *:nth-child(1) { animation-delay: 0.02s; }
  .page.active .cc-grid > *:nth-child(2) { animation-delay: 0.07s; }
  .page.active .cc-grid > *:nth-child(3) { animation-delay: 0.12s; }
  .page.active .cc-grid > *:nth-child(4) { animation-delay: 0.17s; }
  .page.active .cc-grid > *:nth-child(5) { animation-delay: 0.22s; }
  .page.active .cc-grid > *:nth-child(n+6) { animation-delay: 0.27s; }
}
@keyframes ngRise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* Tactile press across nav + actionable chrome — taps feel registered. */
.rail-btn:active { transform: scale(0.9); }
.sb-item:active, .cc-qa:active, .cc-per:active, .ph-link:active,
.btn:active, .gbtn:active, .pa-btn:active, .qg-all:active { transform: scale(0.97); }
.rail-btn, .cc-qa, .cc-per, .btn, .gbtn, .pa-btn { transition: transform .12s cubic-bezier(.2,.7,.2,1), background .18s ease, color .18s ease, box-shadow .18s ease; }

/* ═══════════ DECLUTTERED SIDEBAR (v3515) ═══════════
   Class context (course switcher, teacher tag, course title, section line,
   section card) is now handled by the Overview page + the dashboard header,
   so the sidebar stays purposeful: Club → Search → Navigation. */
#sb-course-switch,
#sidebar .sb-tag,
#sidebar .sb-title,
#sidebar .sb-meta,
#sb-section-switch { display: none !important; }

#sidebar .sb-head {
  padding: 12px 14px 6px;
  border-bottom: none;
}
#sb-club-switch { margin: 0 0 2px; }
.sb-search { margin-top: 4px; }

/* Curriculum course picker — which course the teacher is editing (buildSidebarNav) */
.sb-coursepick{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 14px 8px; }
.sb-cp{ font-size:12px; font-weight:600; line-height:1; padding:6px 9px; border-radius:8px;
  border:1px solid var(--border, #e3e5e9); background:var(--surface, #fff);
  color:var(--muted, #5b6270); cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.sb-cp:hover{ border-color:var(--red, #C8102E); color:var(--red, #C8102E); }
.sb-cp.on{ background:var(--red, #C8102E); border-color:var(--red, #C8102E); color:#fff; }

/* Per-section picker in the New Assignment / Add Resource modals */
.sec-pick{ display:flex; flex-wrap:wrap; gap:8px; }
.sec-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:6px 10px;
  border:1px solid var(--border, #e3e5e9); border-radius:8px; cursor:pointer; user-select:none; }
.sec-chip input{ width:15px; height:15px; accent-color:var(--red, #C8102E); }

/* Honest per-file upload status (cloud = teacher can open; device = can't) */
.ul-chip .ul-state{ font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.ul-chip.is-cloud .ul-state{ color:var(--green, #15803d); }
.ul-chip.is-local .ul-state{ color:var(--red, #C8102E); }
.ld-where.warn{ color:var(--red, #C8102E); font-weight:600; }

/* Deep-link focus: briefly highlight the submission card the email pointed at */
.ms-focus{ border-radius:10px; animation: msFocusPulse 2.6s ease; }
@keyframes msFocusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); background: transparent; }
  12%, 62% { box-shadow: 0 0 0 3px rgba(200,16,46,.5); background: rgba(200,16,46,.06); }
}

/* ── Peer-critique checkpoint block (lesson blocks; ns-peer-grade.js) ──
   Themed via CSS vars so it follows dark mode (body.theme-dark) like every
   other block — never hardcode #fff here. */
.crit-block{border:1px solid var(--line,#e3e5ec);border-radius:14px;overflow:hidden;background:var(--surface,#fff);margin:14px 0}
.crit-h{display:flex;align-items:center;gap:9px;padding:11px 15px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;color:var(--accent-text,#5a46f0);background:var(--off,#f6f7fa);border-bottom:1px solid var(--line,#e3e5ec)}
.crit-pts{margin-left:auto;color:var(--muted,#6b7280)}
.crit-body{padding:15px;display:flex;flex-wrap:wrap;align-items:center;gap:13px}
.crit-copy{flex:1;min-width:220px;font-size:14px;line-height:1.55;color:var(--text,#101118)}
.crit-go{flex-shrink:0}
.crit-wait{flex-shrink:0}
.crit-foot{display:flex;align-items:flex-start;gap:8px;padding:10px 15px;border-top:1px solid var(--line,#e3e5ec);background:var(--off,#f6f7fa);line-height:1.5}

/* ── Preview-as-student banner (teacher only) ────────────────────────
   A teacher in preview sees the REAL student controls, so there must be a
   permanent, unmissable marker — otherwise "why didn't my answer save?" is
   a support ticket waiting to happen. Themed via vars for dark mode. */
body.ns-preview-student .ml-body,
body.ns-preview-student .scw-screen{ outline:2px solid var(--accent-text,#5a46f0); outline-offset:-2px; border-radius:12px; }
.ns-pv-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9600;display:flex;align-items:center;gap:10px;padding:9px 15px;border-radius:999px;background:var(--accent-text,#5a46f0);color:#fff;font-size:12.5px;font-weight:600;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.ns-pv-banner button{background:rgba(255,255,255,.2);border:none;color:#fff;font:inherit;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer}
.ns-pv-banner button:hover{background:rgba(255,255,255,.32)}

/* Chapter textbook inside the coursework stepper. The reader markup is shared
   with the classic module page (renderChapterReader), so this only spaces it
   into the stepper's column — never restyles the reader itself. */
.scw-chapter{margin:0 0 14px}
.scw-chapter .chapter-read{margin:0}

/* ── NOT-ENROLLED SCREEN ────────────────────────────────────────────
   This element had NO rules at all. #login-screen (above) is fixed/inset-0/
   centred over a dark gradient; its twin here inherited none of that, and
   because every preceding body sibling is position:fixed it was the first
   in-flow child — so the card laid out at x:0,y:0 with its rounded corners
   clipped by the viewport edge, on the bare grey page background. A student
   whose teacher has not imported the roster yet sees this as the FIRST thing
   after signing in, and it reads as "my account is broken". Mirrors
   #login-screen exactly so both states look like the same product. */
#not-enrolled-screen {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #1a1d23 0%, #0f1115 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  /* The card is ~460px tall and body is overflow:hidden, so on a short window
     the "Sign out & try another account" escape hatch was unreachable. */
  overflow-y: auto; padding: 24px 16px;
}

/* ── STUDENT COURSE SWITCHER ────────────────────────────────────────
   Only rendered when a student is enrolled in more than one course. */
.sb-courseswitch { display: flex; gap: 6px; padding: 10px 12px 4px; }
.sb-cs {
  flex: 1; padding: 7px 4px; border-radius: 8px; cursor: pointer;
  font: 600 11.5px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .02em;
  background: transparent; color: var(--muted, #6b7280);
  border: 1px solid var(--border, #e5e7eb);
}
.sb-cs:hover { background: var(--hover, #f3f4f6); color: var(--ink, #111827); }
.sb-cs.on {
  background: var(--accent, #b91c1c); border-color: var(--accent, #b91c1c); color: #fff;
}