/* ═══════════════════════════════════════════════════════════════════
   NorthShore CTE — 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-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: var(--red); color: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.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.15s, color 0.15s;
}
.rail-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.rail-btn.active { background: var(--red); color: #fff; }
.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) ── */
#sb-course-switch { margin-bottom: 14px; }
.course-switch {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--off); border: 1px solid var(--border); border-radius: 10px;
}
.cs-opt {
  flex: 1 1 calc(50% - 2px); min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; border: none; background: transparent; cursor: pointer;
  border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.3px; color: var(--muted2); white-space: nowrap;
  transition: background .14s, color .14s, box-shadow .14s;
}
.cs-opt span { overflow: hidden; text-overflow: ellipsis; }
.cs-opt i { font-size: 12px; }
.cs-opt:hover { color: var(--text); }
.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; }
.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);
}

#sb-nav { flex: 1; overflow-y: auto; padding: 8px 8px 8px; }
#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; }

.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; animation: fadeUp 0.2s ease; }
.page.active { display: block; }
@keyframes fadeUp { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:translateY(0); } }

.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; }

/* 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; }
.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; }

.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;
}
.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; }
}

/* 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.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; }
.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);
}

/* ───────── 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;
  z-index: 200;
  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);
  backdrop-filter: blur(3px); display: none; z-index: 90;
  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: #fafafb;
  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); }
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 takes over the full screen when open */
.lesson.open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 600 !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--page-bg) !important;
  box-shadow: none !important;
  animation: ldSlideIn 0.22s cubic-bezier(.22,1,.36,1);
}
@keyframes ldSlideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Hide the row header — we have our own topbar */
.lesson.open .l-head { display: none !important; }

/* Body becomes the scrollable middle area */
.lesson.open .l-body {
  flex: 1 !important;
  overflow-y: auto !important;
  display: block !important;
  padding: 32px 24px !important;
  background: var(--page-bg) !important;
}
.lesson.open .l-body > * {
  max-width: 780px;
  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;
}

/* Hide the inline submit-bar — the bottom bar handles it */
.lesson.open .l-body .submit-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   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 ── */
.lesson.open .l-body .submit-wrap { 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); }
.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); }

/* ── 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; }
  .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; }
  #sidebar:not(.collapsed)::after {
    content: ''; position: fixed; inset: 0 0 0 100%; width: 100vw; background: rgba(0,0,0,.4); z-index: -1;
  }

  #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; }
  #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.open { z-index: 760 !important; }
#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(.92); }

/* 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: #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: #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: #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); }