/* ==========================================================================
   Study With Rameen · LMS Design System
   Palette: brand red dominant; green is the second brand colour — used for
   success/live/highlight states, download/"get your content" actions, and a
   few deliberate brand accents (the page-title bar). Never as filler noise.
   ========================================================================== */

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

[hidden] {
  display: none !important;
}

:root {
  color-scheme: light;

  /* Brand */
  --red: #C8202C;
  --red-deep: #971822;        /* darker red — used as button/hover BACKGROUNDS */
  --red-blush: #FBE7E9;
  --red-blush-soft: #FDF3F4;
  --red-blush-line: #EFCED1;

  --green: #3C9A44;
  --green-deep: #2E7D36;      /* darker green — used as button/hover BACKGROUNDS */
  --green-light: #E7F5E8;

  /* "Ink" brand colours — the red/green used as TEXT on tint backgrounds.
     Split from --red-deep/--green-deep so dark mode can make the text light
     (readable on dark tints) without lightening the hover backgrounds. */
  --ink-red: var(--red-deep);
  --ink-green: var(--green-deep);

  /* Neutrals */
  --ink: #1A1A1A;
  --gray: #6B7280;
  --gray-soft: #9CA3AF;
  --gray-light: #E5E7EB;
  --bg: #FAF8F8;
  --surface: #FFFFFF;
  --surface-2: #F3F1F1;       /* subtle raised/hover/muted surface */
  --border-soft: #F1EFEF;     /* faint hairline borders */

  /* Shape */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow-card: 0 4px 18px rgba(151, 24, 34, 0.05);
  --shadow-pop: 0 10px 30px rgba(26, 26, 26, 0.12);
}

/* ==========================================================================
   Dark theme — set via data-theme="dark" on <html> (theme.js + a no-flash
   inline <head> script). Only tokens are overridden here; every component
   below draws from these variables, so the whole portal follows. A few
   components with hardcoded decorative tints get explicit overrides at the
   end of this block.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — cool charcoal layers; depth comes from the step between
     them, not from shadows. Darkest = the page, lightest = hover. */
  --bg: #111318;              /* app background */
  --bg-header: #171A21;       /* top bar + cohort bar */
  --bg-sidebar: #191C24;
  --surface: #1C2029;         /* cards & panels */
  --surface-2: #232834;       /* elevated: popovers, modals, nested fills, row hover */
  --bg-hover: #292F3B;        /* hover on controls and menu rows */
  --input-bg: #171A21;

  /* Brand red. White text needs 4.5:1, which #E63946 can't give (4.17:1) —
     so filled buttons use a notch deeper (--red, 5.1:1) and lighten to
     --red-deep on hover (4.6:1, still AA). #E63946 survives as
     --brand-primary for marks that never carry white text: the nav
     indicator, focus rings, accent dots. */
  --red: #CF2F3C;
  --red-deep: #D93644;
  --red-pressed: #B9222F;
  --brand-primary: #E63946;
  --red-blush: #351F27;       /* red-tinted surface (active nav, active pill) */
  --red-blush-soft: #2B1B21;
  --red-blush-line: #71313A;  /* red border */

  --green: #2F8238;           /* fills with white text: 4.8:1 (#3C9A44 was 3.6:1) */
  --green-deep: #276B2E;
  --green-light: #1A2F22;

  --ink-red: #FF7A84;         /* red as text/glyph — 5.4:1 or better on every dark surface */
  --ink-green: #7FD18B;

  /* Text */
  --ink: #F1F3F5;             /* primary */
  --gray: #B0B8C5;            /* secondary */
  --gray-soft: #8E97A7;       /* muted — 4.6:1 even on the hover surface */
  --gray-disabled: #626B79;

  /* Borders. Cards and rows take the two quiet tiers; anything the user has
     to find and operate (inputs, selects) takes --border-control, which
     clears WCAG 1.4.11's 3:1 against every surface it sits on. */
  --gray-light: #303642;      /* standard */
  --border-soft: #292E38;     /* subtle divider */
  --border-strong: #414958;   /* emphasised */
  --border-control: #6B768A;

  /* Semantic status colours — tinted background + readable text, kept apart
     from the brand red. */
  --success: #7FD18B;  --success-bg: #1A2F22;  --success-border: #2B5A36;
  --warning: #F2B84B;  --warning-bg: #33290F;  --warning-border: #5C4A17;
  --danger: #FF8A92;   --danger-bg: #3A1F26;   --danger-border: #71313A;
  --info: #7DB8FF;     --info-bg: #1B2A3F;     --info-border: #2C4A73;

  --shadow-card: none;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Safety net against sideways page scroll on phones. `clip`, not `hidden`:
   hidden would turn body into a scroll container and break every sticky
   header (topnav, cohort bar, sidebar). */
html,
body {
  overflow-x: clip;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Poppins', 'Inter', sans-serif;
  color: var(--ink);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

::selection {
  background: var(--red-blush);
}

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

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}

.btn-primary:hover {
  background: var(--red-deep);
  box-shadow: 0 5px 14px rgba(200, 32, 44, 0.3);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-outline {
  background: var(--surface);
  border: 1px solid var(--red);
  color: var(--red);
}

.btn-outline:hover {
  background: var(--red-blush);
  color: var(--ink-red);
}

/* Green "get your content" action — downloads and other positive
   retrieval actions. Gives brand green a real, recurring job rather than
   being purely decorative. */
.btn-download {
  background: var(--green);
  color: #fff;
}

.btn-download:hover {
  background: var(--green-deep);
  box-shadow: 0 5px 14px rgba(60, 154, 68, 0.3);
}

.btn-download:active {
  transform: scale(0.98);
}

.btn-sm {
  padding: 7px 13px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}

.btn-block {
  display: flex;
  width: 100%;
  padding: 12px;
}

.btn.disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* ==========================================================================
   Top navigation
   ========================================================================== */

.topnav {
  position: sticky;
  top: 0;
  z-index: 70;
  height: 64px;
  background: var(--surface);
  border-bottom: 2px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand .logo {
  width: 40px;
  height: 40px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}

.brand-text strong {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.brand-text small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gray-light);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray);
}

.icon-btn:hover {
  background: var(--red-blush-soft);
  color: var(--ink-red);
  border-color: var(--red-blush-line);
}

.icon-btn .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}

.divider-v {
  width: 1px;
  height: 26px;
  background: var(--gray-light);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--ink);
}

.user-chip:hover {
  background: var(--red-blush-soft);
}

.user-chip svg {
  width: 16px;
  height: 16px;
  color: var(--gray-soft);
}

.user-chip-name {
  font-size: 13.5px;
  font-weight: 600;
}

.avatar-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-initials.sm {
  width: 30px;
  height: 30px;
  font-size: 10.5px;
  background: var(--red-blush);
  color: var(--ink-red);
}

/* ==========================================================================
   Cohort bar
   ========================================================================== */

.cohort-bar {
  position: sticky;
  top: 64px;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--gray-light);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cohort-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray);
}

.cohort-pills {
  display: flex;
  gap: 8px;
}

.pill {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--red-blush-line);
  background: var(--surface);
  color: var(--ink-red);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pill:hover {
  background: var(--red-blush);
}

.pill.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 3px 10px rgba(200, 32, 44, 0.25);
}

.cohort-meta {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--gray);
}

.cohort-meta strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   Layout: sidebar + content
   ========================================================================== */

.layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 26px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 28px 44px;
}

.sidebar {
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  padding: 12px;
  position: sticky;
  top: 136px;
  z-index: 50;
  /* Cap to the viewport below the sticky header so the sidebar is never
     taller than its sticky window. Without this, on short-content pages
     (e.g. Dashboard) the sidebar — taller than the content — makes the
     layout collapse to ~sidebar height, leaving no sticky travel, so it
     scrolls up and overlaps the header. Overflow stays visible on .sidebar
     itself so the owl's cross-screen flight isn't clipped; the nav list
     (.snav) scrolls internally instead. */
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: calc(100vh - 152px);
}

.snav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.snav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px 11px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray);
  transition: background 0.15s ease, color 0.15s ease;
}

.snav-item svg {
  width: 19px;
  height: 19px;
  opacity: 0.85;
}

.snav-item:hover {
  background: var(--red-blush-soft);
  color: var(--ink-red);
}

.snav-item.active {
  background: var(--red-blush);
  color: var(--ink-red);
  font-weight: 600;
}

.snav-item.active::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 3px;
  background: var(--red);
}

.snav-sep {
  height: 1px;
  background: var(--gray-light);
  margin: 10px 4px;
}

.snav-item.logout:hover {
  background: var(--red-blush);
  color: var(--red);
}

/* Student sidebar fold-out groups (Resources / Tests & Practice / Progress
   Report). The group holding the current page is always open; its header
   turns red so the student can see where they are even when it's folded. */
.snav-group-h {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px 11px 14px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font: 600 13.5px 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.snav-group-h svg {
  width: 19px;
  height: 19px;
  flex: none;
  opacity: 0.85;
}

.snav-group-h span {
  min-width: 0;
  line-height: 1.25;
}

.snav-group-h .snav-chev {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--gray);
  transition: transform 0.2s ease;
}

.snav-group-h:hover {
  background: var(--red-blush-soft);
  color: var(--ink-red);
}

.snav-group.has-active .snav-group-h {
  color: var(--ink-red);
}

.snav-group.open .snav-chev {
  transform: rotate(180deg);
}

.snav-group-b {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.snav-group.open .snav-group-b {
  grid-template-rows: 1fr;
}

.snav-group-in {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 22px;
  padding-left: 4px;
  border-left: 1px solid var(--gray-light);
}

/* Folded items mustn't be reachable by Tab. */
.snav-group:not(.open) .snav-group-in {
  visibility: hidden;
  transition: visibility 0s 0.2s;
}

.snav-group-in .snav-item {
  padding: 9px 8px 9px 10px;
  gap: 9px;
  line-height: 1.25;
}

:root[data-theme="dark"] .snav-group-h:hover {
  background: var(--surface-2);
  color: var(--ink);
}

:root[data-theme="dark"] .snav-group.has-active .snav-group-h {
  color: var(--ink-red);
}

@media (prefers-reduced-motion: reduce) {
  .snav-group-b,
  .snav-group-h .snav-chev {
    transition: none;
  }
}

.content {
  min-width: 0;
}

/* ==========================================================================
   Page head
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-head h1 {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  padding-left: 14px;
}

/* Brand accent: green-over-red bar marking the page title — both of Study
   With Rameen's brand colours, on every page. */
.page-head h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(var(--green), var(--red));
}

.page-head p {
  font-size: 13px;
  color: var(--gray);
  margin-top: 3px;
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: 13px;
  padding: 17px 16px 15px;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--red-blush-line);
  box-shadow: 0 10px 24px rgba(151, 24, 34, 0.1);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--red-blush);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 21px;
  height: 21px;
}

.stat-body {
  min-width: 0;
}

.stat-value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray);
  margin-top: 1px;
}

.stat-sub {
  display: block;
  font-size: 11.5px;
  color: var(--gray-soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Panels
   ========================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-head h2 {
  font-size: 16.5px;
  font-weight: 600;
}

.panel-hint {
  font-size: 12px;
  color: var(--gray);
}

.panel-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-select {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  cursor: pointer;
}

.tool-select:focus {
  border-color: var(--red);
}

/* ==========================================================================
   Upload manager
   ========================================================================== */

.upload-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 22px;
}

/* Grid items default to min-width:auto, so a long <select> option or file
   name could push the whole column wider than a phone screen. */
.upload-grid > *,
.two-col > * {
  min-width: 0;
}

.tag-red {
  color: var(--ink-red);
  font-weight: 700;
}

.list-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray);
  margin-bottom: 4px;
}

.upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  margin: 0 -6px;
  border-radius: 9px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.15s ease;
}

.upload-item:hover {
  background: var(--red-blush-soft);
}

.upload-item:last-child {
  border-bottom: none;
}

.file-chip {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--red-blush);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-chip svg {
  width: 18px;
  height: 18px;
}

.u-info {
  flex: 1;
  min-width: 0;
}

.u-info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u-info small {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-top: 1px;
}

.u-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gray-soft);
  border: 1px solid var(--gray-light);
  padding: 2px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}

.kebab {
  background: none;
  border: none;
  color: var(--gray-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
}

.kebab:hover {
  background: var(--red-blush-soft);
  color: var(--ink-red);
}

.kebab svg {
  width: 17px;
  height: 17px;
}

/* ==========================================================================
   Resource CMS — Upload Notes / Video Lectures admin card grid
   Replaces the old ever-growing .upload-item list with a searchable/
   filterable card grid + a shared edit modal, matching the reference admin
   portal she uses on her other site. Student-facing Notes/Vault are
   untouched — this section is admin-only.
   ========================================================================== */

.res-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.res-search {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}

.res-search:focus {
  border-color: var(--red);
}

.res-toolbar .tool-select {
  flex-shrink: 0;
  width: 170px;
}

.res-count {
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 10px;
}

.res-list {
  max-height: 640px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.res-list:empty {
  border: none;
  padding: 0;
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  padding: 10px;
}

.res-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.res-card:hover {
  border-color: var(--red-blush-line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.res-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.res-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-red);
  background: var(--red-blush);
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.res-kind {
  color: var(--red);
  flex-shrink: 0;
}

.res-kind svg {
  width: 18px;
  height: 18px;
}

.res-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.res-chapter {
  font-size: 12px;
  color: var(--gray);
}

.res-desc {
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.res-meta {
  font-size: 11px;
  color: var(--gray-soft);
  margin-top: auto;
}

.res-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.res-actions .btn {
  flex: 1;
  justify-content: center;
  padding: 6px 8px;
  font-size: 12px;
}

.res-actions .btn svg {
  width: 14px;
  height: 14px;
}

/* Base look — usable standalone (e.g. the Chapter Manager's per-item
   delete) as well as inside .res-actions (Resource CMS cards). */
.btn-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-light);
  background: none;
  color: var(--gray-soft);
  cursor: pointer;
}

.btn-icon-danger svg {
  width: 14px;
  height: 14px;
}

.btn-icon-danger:hover {
  color: var(--ink-red);
  border-color: var(--red-blush-line);
  background: var(--red-blush-soft);
}

.btn-icon-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.res-actions .btn-icon-danger {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------- modal --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 16, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.modal-head h3 {
  font-size: 16px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--gray-soft);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
}

.modal-close:hover {
  color: var(--ink-red);
}

.modal-card .settings-form {
  gap: 10px;
}

/* Inline "set max marks" prompt shown at the top of the Weekly Test
   detail view when max_marks wasn't set at post time (e.g. old tests
   posted before grading existed). Disappears after first save. */
.wt-max-setter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 260px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--red-blush-line);
  background: var(--red-blush-soft);
  border-radius: var(--radius-md);
}

.wt-max-setter label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
}

.wt-max-setter input {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}

.wt-max-setter input:focus {
  border-color: var(--red);
}

/* ==========================================================================
   Manage Content — cohort-scoped topic / sub-topic / item tree
   Replaced the old "Manage Chapters" modal 2026-08-16. Uploading lives on
   Upload Notes; this page only reorganises what already exists.
   ========================================================================== */

.mc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gray-light);
  margin-bottom: 16px;
}

.mc-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.mc-tab svg { width: 15px; height: 15px; }
.mc-tab:hover { color: var(--ink); }
.mc-tab.active { color: var(--red); border-bottom-color: var(--red); }

.mc-subjects {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mc-subj {
  border: 1px solid var(--gray-light);
  border-radius: 9px;
  padding: 8px 14px;
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mc-subj:hover { border-color: var(--red-blush-line); }

.mc-subj.active {
  background: var(--red-blush);
  border-color: var(--red-blush-line);
  color: var(--ink-red);
}

.mc-subj em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  opacity: .75;
}

.mc-tree { display: flex; flex-direction: column; gap: 6px; }

.mc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.mc-row:hover { border-color: var(--red-blush-line); }
.mc-row.sub { margin-left: 26px; background: var(--surface-2); }

.mc-chev {
  border: none;
  background: none;
  padding: 2px;
  cursor: pointer;
  color: var(--gray-soft);
  display: flex;
  flex-shrink: 0;
}

.mc-chev svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}

.mc-chev.open svg { transform: none; }

.mc-idx {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-red);
  background: var(--red-blush);
  border-radius: 5px;
  padding: 2px 6px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mc-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mc-title { font-size: 13.5px; font-weight: 600; }
.mc-meta { font-size: 11.5px; color: var(--gray); }

.mc-acts { display: flex; gap: 4px; flex-shrink: 0; }

.mc-ico {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--gray);
  cursor: pointer;
}

.mc-ico svg { width: 14px; height: 14px; }

.mc-ico:hover {
  border-color: var(--red-blush-line);
  background: var(--red-blush-soft);
  color: var(--ink-red);
}

.mc-ico.danger:hover { color: var(--red); }

.mc-ico:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: var(--surface);
  border-color: var(--gray-light);
  color: var(--gray-soft);
}

.mc-items {
  margin: -3px 0 0 52px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-item { display: flex; align-items: center; gap: 9px; }

.mc-item-icon { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.mc-item-icon svg { width: 100%; height: 100%; }

.mc-item-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-none { margin: 0; font-size: 12px; color: var(--gray-soft); }

.mc-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--gray-light);
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--ink-green);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mc-add svg { width: 15px; height: 15px; }
.mc-add:hover { border-color: var(--green); }
.mc-add.sub { margin-left: 26px; }

/* Inline chooser used by Move and Merge — one list of destinations rather
   than a <select> per row, which is what made the old manager cluttered. */
.mc-choose { max-width: 380px; }

.mc-choose-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 50vh;
  overflow-y: auto;
}

.mc-choose-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mc-choose-row:hover {
  background: var(--red-blush-soft);
  border-color: var(--red-blush-line);
}

.mc-choose-row small { font-size: 11.5px; color: var(--gray); flex-shrink: 0; }

@media (max-width: 640px) {
  .mc-row.sub, .mc-add.sub { margin-left: 12px; }
  .mc-items { margin-left: 24px; }
  .mc-row { flex-wrap: wrap; }
  .mc-label { min-width: 120px; }
}

/* ==========================================================================
   "View as a student" — topnav preview picker + preview-mode banner
   ========================================================================== */

.preview-picker {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 300px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 150;
}

.preview-picker[hidden] {
  display: none;
}

.preview-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preview-picker-hint {
  font-size: 12px;
  color: var(--gray);
  margin: 0;
}

.preview-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.preview-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  border-radius: var(--radius-sm);
}

.preview-picker-row:hover {
  background: var(--red-blush-soft);
}

.preview-picker-empty {
  font-size: 12.5px;
  color: var(--gray);
  padding: 8px 10px;
}

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.preview-banner .btn-outline {
  border-color: #fff;
  color: #fff;
  background: transparent;
}

.preview-banner .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

@media (max-width: 640px) {
  .preview-picker {
    right: 12px;
    left: 12px;
    width: auto;
  }
  .preview-banner {
    padding: 10px 12px;
    font-size: 12px;
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   Data tables — shared by Students roster, Assignments marking queue, My Grades
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
}

.sub-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.sub-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-light);
}

.sub-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  vertical-align: middle;
}

.sub-table tbody tr:hover td {
  background: var(--surface-2);
}

.student-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.status-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
}

.status-pill.ontime {
  background: var(--green-light);
  color: var(--ink-green);
}

.status-pill.late {
  background: var(--red-blush);
  color: var(--ink-red);
}

.new-tag {
  background: var(--green-light);
  color: var(--ink-green);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 7px;
}

/* Roster row actions (cohort shift + reset password + remove) */
.roster-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.roster-cohort-select {
  min-width: 150px;
}

.roster-remove {
  color: var(--ink-red);
}

/* ==========================================================================
   Empty states, footer, toast
   ========================================================================== */

.empty-note {
  padding: 22px;
  text-align: center;
  color: var(--gray);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px dashed var(--gray-light);
  border-radius: var(--radius-md);
}

.foot {
  text-align: center;
  color: var(--gray);
  font-size: 12px;
  padding-top: 8px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-left: 4px solid var(--green);
  border-radius: 11px;
  padding: 13px 18px 13px 14px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 340px;
}

.toast.show {
  opacity: 1;
  transform: none;
}

.toast-icon {
  color: var(--green);
  margin-top: 1px;
}

.toast-icon svg {
  width: 18px;
  height: 18px;
}

.toast strong {
  display: block;
  font-size: 13.5px;
}

.toast small {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-top: 2px;
}

/* ==========================================================================
   Dashboard two-column band & view router
   ========================================================================== */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.jump {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
}

.jump:hover {
  color: var(--ink-red);
  text-decoration: underline;
}

/* ==========================================================================
   Content date (backdating)
   ========================================================================== */

.date-hint {
  font-size: 12px;
  color: var(--gray-soft);
  line-height: 1.5;
}

.status-pill.muted {
  background: var(--surface-2);
  color: var(--gray);
}

/* ==========================================================================
   Scoreboard podium
   ========================================================================== */

.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 14px 0 4px;
}

.podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 130px;
}

.podium-name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.podium-bar {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 10px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  background: var(--green-light);
  color: var(--ink-green);
  animation: podium-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.podium-col.first .podium-bar {
  height: 118px;
  background: var(--green);
  color: #fff;
  animation-delay: 0.5s;
}

.podium-col.second .podium-bar {
  height: 86px;
  animation-delay: 0.28s;
}

.podium-col.third .podium-bar {
  height: 64px;
  animation-delay: 0.1s;
}

.podium-col .avatar-initials,
.podium-col .podium-name {
  animation: pop-in 0.45s ease backwards;
}

.podium-col.third .avatar-initials,
.podium-col.third .podium-name {
  animation-delay: 0.3s;
}

.podium-col.second .avatar-initials,
.podium-col.second .podium-name {
  animation-delay: 0.5s;
}

.podium-col.first .avatar-initials,
.podium-col.first .podium-name {
  animation-delay: 0.72s;
}

.podium-col.first .podium-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: podium-shine 0.9s ease 1.25s forwards;
}

@keyframes podium-rise {
  from { height: 0; }
}

@keyframes podium-shine {
  to { transform: translateX(120%); }
}

/* ==========================================================================
   Scoreboard — bar leaderboard (restyled 2026-10-16)
   Was a one-off poster look (cream, 6px black frame, hard shadow, Anton);
   now built from the portal's own tokens so it matches every other page and
   follows light/dark automatically. Same markup and class names as before
   (all sb-prefixed, scoped under .sb-panel). Ranks only: the bar width uses
   an internal rollup score for sizing and is never printed as a number.
   ========================================================================== */

.sb-panel {
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
  padding: 24px 26px;
  color: var(--ink);
}

.sb-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

@keyframes sbLiveDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.sb-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-light);
  color: var(--ink-green);
  font: 700 11px 'Poppins', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.sb-live-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: sbLiveDot 2.4s ease-in-out infinite;
}

.sb-title {
  font: 700 24px 'Poppins', sans-serif;
  color: var(--ink);
  margin: 8px 0 0;
  text-wrap: balance;
}

.sb-sub {
  font: 400 13px 'Inter', sans-serif;
  color: var(--gray);
  margin-top: 4px;
}

.sb-controls {
  display: flex;
  align-items: flex-start;
}

.sb-month-select {
  cursor: pointer;
  font: 600 13px 'Inter', sans-serif;
  padding: 8px 34px 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-control, var(--gray-light));
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right 8px center / 18px no-repeat;
  color: var(--ink);
  appearance: none;
}

.sb-month-select:focus-visible {
  outline: 2px solid var(--brand-primary, var(--red));
  outline-offset: 2px;
}

.sb-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
}

.sb-row.clickable {
  cursor: pointer;
}

.sb-row.clickable:hover {
  background: var(--surface-2);
}

.sb-rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px 'Poppins', sans-serif;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--gray);
}

.sb-rank-badge.top {
  background: var(--green-light);
  color: var(--ink-green);
}

.sb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px 'Poppins', sans-serif;
  flex-shrink: 0;
  background: var(--red-blush);
  color: var(--ink-red);
}

.sb-avatar.top {
  background: var(--green-light);
  color: var(--ink-green);
}

.sb-name {
  width: 148px;
  font: 600 14px 'Inter', sans-serif;
  color: var(--ink);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-name .you-tag {
  margin-left: 4px;
}

.sb-bar-track {
  flex: 1;
  min-width: 40px;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.sb-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--red);
}

.sb-bar-fill.top {
  background: var(--green);
}

.sb-delta {
  width: 24px;
  text-align: center;
  font: 700 13px 'Poppins', sans-serif;
  flex-shrink: 0;
}

.sb-delta.up { color: var(--ink-green); }
.sb-delta.down { color: var(--ink-red); }
.sb-delta.same { color: var(--gray-soft); }

.sb-detail {
  margin: 0 0 6px 50px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  font: 400 12.5px 'Inter', sans-serif;
  color: var(--ink);
  display: none;
  flex-direction: column;
  gap: 6px;
}

.sb-detail.open {
  display: flex;
}

.sb-detail .sb-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sb-detail .sb-detail-muted {
  color: var(--gray);
}

.sb-detail-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.sb-footer {
  text-align: center;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--gray-light);
  font: 400 12.5px 'Inter', sans-serif;
  color: var(--gray);
}

.sb-unranked {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-light);
}

.sb-unranked-title {
  font: 700 12px 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 10px;
}

.sb-unranked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-unranked-chip {
  font: 500 13px 'Inter', sans-serif;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--ink);
}

@media (max-width: 640px) {
  .sb-panel {
    padding: 18px 14px;
    border-radius: 14px;
  }
  .sb-title {
    font-size: 21px;
  }
  .sb-row {
    display: grid;
    grid-template-columns: 28px 36px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 6px;
  }
  .sb-name {
    width: auto;
    min-width: 0;
  }
  .sb-bar-track {
    grid-column: 3 / 5;
    grid-row: 2;
  }
  .sb-detail {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-live-pill::before { animation: none; }
}

/* ==========================================================================
   Settings form
   ========================================================================== */

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 440px;
}

.settings-form label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
  margin-top: 10px;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus {
  border-color: var(--red);
}

.settings-form .btn {
  margin-top: 18px;
  align-self: flex-start;
}

/* Course/subject enrolment pickers (Add Student + Student Report). Green
   marks an enrolled course — a positive "on" state, same role as the
   download toggle and watched markers. */
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
  margin-top: 10px;
}

.course-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.course-option:hover {
  border-color: var(--red-blush-line);
}

.course-option.on {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--ink-green);
}

/* .settings-form styles every input as a text field — checkboxes need that
   padding/border undone. */
.course-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  accent-color: var(--green);
  cursor: pointer;
}

/* ==========================================================================
   Teacher portal — chapter management (Upload Notes)
   ========================================================================== */

.chapter-select-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.chapter-add-link {
  margin-left: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   Teacher portal — add student
   ========================================================================== */

.as-password-row {
  display: flex;
  gap: 8px;
}

.as-password-row input {
  flex: 1;
  min-width: 0;
  font-family: 'Inter', monospace;
}

.as-result {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--green-light);
  border: 1px solid var(--green);
  border-radius: 10px;
  max-width: 440px;
}

.as-result p {
  font-size: 13px;
  margin-bottom: 6px;
}

.as-result-title {
  font-weight: 700;
  color: var(--ink-green);
}

/* ==========================================================================
   Assignments & marking (teacher marking queue + student upload cards)
   ========================================================================== */

.asg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.asg-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.asg-detail-title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
}

.asg-delete {
  color: var(--ink-red);
}

.mark-input {
  width: 78px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
  outline: none;
}

.mark-feedback {
  width: 100%;
  min-width: 150px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
  outline: none;
}

.mark-input:focus,
.mark-feedback:focus {
  border-color: var(--red);
}

.asg-files {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.asg-card {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.asg-card + .asg-card {
  margin-top: 10px;
}

.asg-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.asg-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.asg-meta {
  font-size: 12px;
  color: var(--gray);
}

.asg-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.asg-score {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.asg-feedback {
  width: 100%;
  font-size: 12.5px;
  color: var(--gray);
  background: var(--red-blush-soft);
  border-radius: 8px;
  padding: 8px 11px;
  line-height: 1.5;
}

.asg-upload-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.asg-file-input {
  font-size: 12.5px;
  color: var(--gray);
}

.asg-upload-form > .asg-meta {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12px;
}

/* The question and/or PDF Miss Rameen attached to an assignment: on the student's card and
   at the top of the teacher's open assignment (2026-11-02). Portal tokens only. */
.asg-brief {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.asg-detail-head + .asg-brief {
  margin: 12px 0;
}

.asg-brief .btn {
  align-self: flex-start;
}

.asg-question {
  margin: 0;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Two date boxes side by side: neither one stretches like the Weekly Test form's first box (phones stay full width) */
@media (min-width: 641px) {
  #asgDatesForm .wt-edit-field:first-child {
    flex: 0 1 auto;
  }
}

/* Weekly-test paper download — a big, tactile download card (brand green)
   in place of a thin outline button. The whole tile is the click target. */
.wt-paper {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--green);
  background: linear-gradient(115deg, var(--green-light), var(--surface) 72%);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.wt-paper:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(46, 125, 54, 0.16);
  background: linear-gradient(115deg, var(--green-light), #F3FBF3 82%);
}

.wt-paper-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(46, 125, 54, 0.28);
}

.wt-paper-icon svg {
  width: 26px;
  height: 26px;
}

.wt-paper-info {
  flex: 1;
  min-width: 0;
}

.wt-paper-info strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-green);
}

.wt-paper-info small {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-top: 2px;
}

.wt-paper-cta {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.16s ease, transform 0.16s ease;
}

.wt-paper:hover .wt-paper-cta {
  background: var(--green-deep);
  transform: translateY(2px);
}

/* ==========================================================================
   Gateway (index.html)
   ========================================================================== */

.gateway-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #FDF1F2, var(--bg) 55%);
  padding: 20px;
}

.gateway-card {
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-top: 4px solid var(--red);
  border-radius: 18px;
  padding: 42px 36px 30px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 50px rgba(151, 24, 34, 0.08);
}

.gateway-card .logo {
  width: 76px;
  height: 76px;
  margin-bottom: 16px;
}

.gateway-card h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.gw-sub {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.55;
  margin: 8px 0 26px;
}

.gw-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   Student login (login.html)
   ========================================================================== */

.auth-card {
  text-align: left;
}

.auth-card .logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.auth-card h1,
.auth-card .gw-sub {
  text-align: center;
}

.auth-form {
  max-width: none;
}

.auth-forgot {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-top: 6px;
}

.auth-forgot:hover {
  color: var(--ink-red);
  text-decoration: underline;
}

.auth-error {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-red);
  background: var(--red-blush);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 14px;
}

.auth-error.auth-success {
  color: var(--ink-green);
  background: var(--green-light);
}

/* Boot state. The <head> script already sent anyone without a stored
   session to the login page before first paint, so the shell (nav,
   sidebar) is safe to show at once; only the data-dependent parts wait,
   behind a skeleton. The full-screen overlay is now for errors only. */
body.auth-checking .content > .view {
  display: none !important;
}

.boot-skeleton {
  display: none;
}

body.auth-checking .boot-skeleton {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sk-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sk-block {
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-soft) 40%, var(--surface-2) 55%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

.sk-card { height: 96px; }
.sk-panel { height: 230px; }
.sk-panel.short { height: 150px; }

/* Student identity (name chip, avatar, cohort pill) shimmers too — unless
   the head script found this account's cached profile, in which case the
   real name is already painted. Never shows another account's details:
   the cache is only used when its id matches the signed-in session. */
html:not(.identity-cached) body.auth-checking[data-portal="student"] .topnav .user-chip-name,
html:not(.identity-cached) body.auth-checking[data-portal="student"] .topnav .avatar-initials,
html:not(.identity-cached) body.auth-checking[data-portal="student"] #cohortPillLabel {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-soft) 40%, var(--surface-2) 55%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

@keyframes sk-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

@media (max-width: 640px) {
  .sk-row { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sk-block,
  body.auth-checking .topnav .user-chip-name,
  body.auth-checking .topnav .avatar-initials,
  body.auth-checking #cohortPillLabel {
    animation: none;
  }
}

.auth-overlay[hidden] {
  display: none;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  background: var(--bg);
  z-index: 500;
  text-align: center;
  padding: 20px;
}

.soon-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--red-blush);
  color: var(--ink-red);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}

.gw-foot {
  font-size: 11.5px;
  color: var(--gray-soft);
  margin-top: 26px;
}

/* ==========================================================================
   Student portal — cohort label (static pill row)
   ========================================================================== */

.cohort-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gray);
  white-space: nowrap;
}

.pill.static {
  pointer-events: none;
  cursor: default;
}

/* ==========================================================================
   Student portal — welcome banner
   ========================================================================== */

.welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(120deg, var(--red) 0%, var(--red-deep) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 22px;
}

.welcome-banner h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.fact-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Student portal — stats three-column variant
   ========================================================================== */

.stats.three {
  grid-template-columns: repeat(3, 1fr);
}

.stats.stats-two {
  grid-template-columns: repeat(2, 1fr);
}

.stat-value.up {
  color: var(--ink-green);
  font-size: 18px;
}

.stat-value.down {
  color: var(--ink-red);
  font-size: 18px;
}

/* ==========================================================================
   Student portal — lecture vault grid & cards
   ========================================================================== */

.lecture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 4px;
}

.lecture-card {
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lecture-card:hover {
  transform: translateY(-4px);
  border-color: var(--red-blush-line);
  box-shadow: 0 14px 30px rgba(151, 24, 34, 0.13);
}

.lecture-card:hover .play-btn {
  background: var(--red-deep);
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(200, 32, 44, 0.45);
}

.lecture-card:hover .lec-body h3 {
  color: var(--ink-red);
}

.lec-thumb {
  position: relative;
  height: 110px;
  background: linear-gradient(145deg, var(--red-blush) 0%, #F3DADE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.subject-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: var(--red);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
}

.lec-thumb .new-tag {
  position: absolute;
  top: 10px;
  right: 10px;
}

.play-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.12s ease;
  box-shadow: 0 4px 14px rgba(200, 32, 44, 0.35);
}

.play-btn:hover {
  background: var(--red-deep);
  transform: scale(1.08);
}

.play-btn:active {
  transform: scale(0.94);
}

.play-btn svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.duration {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(26, 26, 26, 0.65);
  color: #fff;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}

.lec-body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.lec-body h3 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.lec-meta {
  font-size: 11.5px;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.watched {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-green);
  font-size: 11px;
  font-weight: 600;
}

.watched svg {
  width: 13px;
  height: 13px;
}

/* ---------- Download toggle switch ---------- */

.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  gap: 10px;
}

.dl-label {
  font-size: 11.5px;
  color: var(--gray);
}

.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--gray-light);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.switch-input:checked + .switch,
.switch.on {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(60, 154, 68, 0.18);
}

.switch-input:checked + .switch::after,
.switch.on::after {
  transform: translateX(16px);
}

.dl-row:active .switch::after {
  width: 17px;
}

.dl-row:active .switch-input:checked + .switch::after,
.dl-row:active .switch.on::after {
  transform: translateX(13px);
}

/* ==========================================================================
   Student portal — notes category tag
   ========================================================================== */

.cat-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--red-blush);
  color: var(--ink-red);
}

/* ==========================================================================
   Student portal — grade chip
   ========================================================================== */

.grade-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  background: var(--green-light);
  color: var(--ink-green);
  border-radius: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================================
   Student portal — feedback row
   ========================================================================== */

.feedback-row td {
  background: var(--red-blush-soft);
  border-bottom: 1px solid var(--red-blush-line);
}

.feedback-row td > div {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
  padding: 4px 6px;
  border-left: 3px solid var(--red);
  padding-left: 12px;
  font-style: italic;
}

/* ==========================================================================
   Student portal — rank callout & YOU tag (scoreboard)
   ========================================================================== */

.you-tag {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: var(--green);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ==========================================================================
   Student portal — subject drill-down navigation (vault & notes)
   ========================================================================== */

.subject-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.subject-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 15px 16px;
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--gray-light);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.subject-card:hover {
  transform: translateY(-3px);
  border-color: var(--red-blush-line);
  box-shadow: 0 10px 24px rgba(151, 24, 34, 0.1);
}

.subject-glyph {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--red-blush);
  color: var(--red);
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease;
}

.subject-info {
  flex: 1;
  min-width: 0;
}

.subject-info strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.subject-info small {
  display: block;
  font-size: 11px;
  color: var(--gray);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subject-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-red);
  background: var(--red-blush);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.subject-card.active {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 8px 22px rgba(200, 32, 44, 0.3);
}

.subject-card.active .subject-glyph {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.subject-card.active .subject-info strong {
  color: #fff;
}

.subject-card.active .subject-info small {
  color: rgba(255, 255, 255, 0.75);
}

.subject-card.active .subject-count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.chapter-hint {
  text-align: center;
  padding: 28px 20px;
  border: 1.5px dashed var(--red-blush-line);
  border-radius: 12px;
  color: var(--gray);
  font-size: 13px;
  background: var(--surface-2);
  animation: view-in 0.3s ease;
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: view-in 0.3s ease;
}

.ch-item {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ch-item.open {
  border-color: var(--red-blush-line);
  box-shadow: var(--shadow-card);
}

.ch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.ch-row:hover,
.ch-item.open .ch-row {
  background: var(--red-blush-soft);
}

.ch-idx {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-blush);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ch-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.ch-count {
  font-size: 11px;
  color: var(--gray);
  white-space: nowrap;
}

.ch-chev {
  width: 16px;
  height: 16px;
  color: var(--gray-soft);
  transition: transform 0.3s ease, color 0.3s ease;
}

.ch-item.open .ch-chev {
  transform: rotate(180deg);
  color: var(--red);
}

.ch-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-item.open .ch-body {
  grid-template-rows: 1fr;
}

.ch-body-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ch-item.open .ch-body-inner {
  opacity: 1;
}

.ch-body .lecture-grid,
.ch-body .note-grid {
  padding: 8px 16px 18px;
}

/* Sub-chapter accordion (nested inside a chapter's .ch-body-inner) — a
   distinct class set, not reused .ch-item/.ch-body, because those use
   descendant selectors (.ch-item.open .ch-body) that would incorrectly
   also match a *nested* sub-chapter's body just because the outer chapter
   is open, regardless of the sub-chapter's own state. */

.sub-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 14px;
}

.sub-ch-item {
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.sub-ch-item.open {
  border-color: var(--red-blush-line);
}

.sub-ch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.sub-ch-row:hover,
.sub-ch-item.open > .sub-ch-row {
  background: var(--red-blush-soft);
}

.sub-ch-item .ch-idx {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.sub-ch-item .ch-chev {
  width: 15px;
  height: 15px;
}

.sub-ch-item.open > .sub-ch-row .ch-chev {
  transform: rotate(180deg);
  color: var(--red);
}

.sub-ch-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sub-ch-item.open > .sub-ch-body {
  grid-template-rows: 1fr;
}

.sub-ch-body-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sub-ch-item.open > .sub-ch-body > .sub-ch-body-inner {
  opacity: 1;
}

.sub-ch-body .lecture-grid,
.sub-ch-body .note-grid {
  padding: 6px 14px 14px;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.note-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: 11px 12px;
  background: var(--surface);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.note-card:hover {
  transform: translateY(-2px);
  border-color: var(--red-blush-line);
  box-shadow: var(--shadow-card);
}

.note-card .btn {
  flex-shrink: 0;
}

.note-info {
  flex: 1;
  min-width: 0;
}

.note-info strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-info small {
  display: block;
  font-size: 11px;
  color: var(--gray);
  margin-top: 1px;
}

/* ==========================================================================
   Student portal — dashboard widgets (rings, mini podium, announcements)
   ========================================================================== */

.ring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 4px;
}

.ring-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  margin-bottom: 8px;
}

.ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: var(--red-blush);
  stroke-width: 10;
}

.ring-fill {
  fill: none;
  stroke: var(--red);
  stroke-width: 10;
  stroke-linecap: round;
  animation: ring-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

@keyframes ring-in {
  from { stroke-dashoffset: var(--circ); }
}

.ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}

.ring-pct small {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  margin-left: 1px;
}

.ring-name {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
}

.ring-sub {
  font-size: 11.5px;
  color: var(--gray);
}

.ring-card.complete .ring-fill {
  stroke: var(--green);
}

.ring-card.complete .ring-pct,
.ring-card.complete .ring-pct small,
.ring-card.complete .ring-sub {
  color: var(--ink-green);
}

.ring-card.complete .ring-sub {
  font-weight: 700;
}

.podium.mini {
  gap: 12px;
  padding: 10px 0 2px;
}

.podium.mini .podium-col {
  width: 92px;
}

.podium.mini .podium-bar {
  font-size: 16px;
}

.podium.mini .podium-col.first .podium-bar {
  height: 84px;
}

.podium.mini .podium-col.second .podium-bar {
  height: 60px;
}

.podium.mini .podium-col.third .podium-bar {
  height: 44px;
}

.ann-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ann-item {
  border: 1px solid var(--gray-light);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--surface);
  animation: pop-in 0.4s ease backwards;
}

.ann-item:nth-child(2) { animation-delay: 0.08s; }
.ann-item:nth-child(3) { animation-delay: 0.16s; }

.ann-item.pinned {
  background: var(--red-blush-soft);
  border-color: var(--red-blush-line);
  border-left-color: var(--red);
}

.ann-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ann-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}

.ann-item.action .ann-tag {
  background: var(--red-blush);
  color: var(--ink-red);
}

.ann-item.info .ann-tag {
  background: var(--surface-2);
  color: var(--gray);
}

.ann-date {
  font-size: 11px;
  color: var(--gray-soft);
}

.ann-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.ann-item p {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.55;
}

/* ==========================================================================
   Teacher portal — Immediate Attention banner
   ========================================================================== */

.attn-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

.attn-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.attn-icon svg {
  width: 23px;
  height: 23px;
}

.attn-body {
  flex: 1;
  min-width: 0;
}

.attn-pending {
  background: linear-gradient(120deg, var(--red) 0%, var(--red-deep) 100%);
  color: #fff;
  margin-bottom: 22px;
}

.attn-pending .attn-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.attn-pending.zero {
  background: var(--surface);
  border: 1px solid var(--gray-light);
  color: var(--ink);
}

.attn-pending.zero .attn-icon {
  background: var(--red-blush);
  color: var(--red);
}

.attn-pending.zero .attn-label {
  color: var(--ink);
  font-size: 14px;
}

.attn-count {
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.attn-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  opacity: 0.95;
  margin-top: 2px;
}

.attn-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dashboard attendance nudge — actionable reminder, red-blush (attention),
   never green per the color rule. */
.attn-nudge {
  background: var(--red-blush);
  border: 1px solid var(--red-blush-line);
  color: var(--ink);
  margin-bottom: 22px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.attn-nudge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(151, 24, 34, 0.12);
}

.attn-nudge .attn-icon {
  background: var(--surface);
  color: var(--red);
}

.attn-nudge .attn-label {
  color: var(--ink);
  opacity: 1;
  font-size: 14px;
}

.attn-nudge .attn-link {
  color: var(--ink-red);
  margin-top: 4px;
}

/* Stat card that's also a link (e.g. Submissions to Mark → Assignments). */
.stat-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Teacher portal — needs attention
   ========================================================================== */

.attn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--gray-light);
  color: inherit;
}

.attn-row:last-child {
  border-bottom: none;
}

.attn-row:hover .attn-row-body strong {
  color: var(--ink-red);
}

.attn-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.attn-row-body small {
  color: var(--gray);
  font-size: 12px;
}

.attn-row-chevron {
  width: 18px;
  height: 18px;
  fill: var(--gray-soft);
  flex-shrink: 0;
}

.grade-spread-link {
  display: inline-block;
  margin-top: 10px;
}

/* ==========================================================================
   Teacher portal — quick-publish control dock
   ========================================================================== */

.publish-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.publish-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
  flex: 1;
}

.publish-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gray);
}

.publish-field .tool-select {
  width: 100%;
  padding: 9px 11px;
}

.publish-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.list-title.spaced {
  margin-top: 20px;
}

/* ==========================================================================
   Teacher portal — broadcast noticeboard
   ========================================================================== */

.notice-form {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.notice-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s ease;
}

.notice-form input:focus {
  border-color: var(--red);
}

.notice-form .btn {
  flex-shrink: 0;
}

/* ==========================================================================
   Student portal — weekly test
   ========================================================================== */

/* Each test is one card: title + status on top, a progress ring beside the
   single next thing to do. Status colours: green = good/open, amber = waiting
   on the teacher, red = missed. The ring and the pill always carry words or a
   symbol too, so colour is never the only cue. */

.wt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.wt-meta {
  font-size: 12.5px;
  color: var(--gray);
  margin-top: 2px;
}

.wt-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wt-score {
  font: 800 17px 'Poppins', sans-serif;
  color: var(--ink);
}

.wt-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 11px;
  font: 700 11.5px 'Inter', sans-serif;
  white-space: nowrap;
}

.wt-pill.open,
.wt-pill.done { background: var(--green-light); color: var(--ink-green); }
.wt-pill.wait { background: var(--warning-bg, #FEF3C7); color: var(--warning, #8A5A00); }
.wt-pill.miss { background: var(--red-blush); color: var(--ink-red); }

.wt-ringrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}

.wt-ring {
  --p: 0;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--surface-2) 0);
}

.wt-ring.bad {
  background: conic-gradient(var(--red) calc(var(--p) * 1%), var(--surface-2) 0);
}

.wt-ring span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  font: 800 15px 'Poppins', sans-serif;
  color: var(--ink);
}

.wt-next {
  flex: 1;
  min-width: 0;
}

.wt-next-lab {
  font: 700 11px 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

.wt-next-txt {
  display: block;
  font: 700 16px 'Poppins', sans-serif;
  color: var(--ink);
  margin-top: 2px;
}

.wt-next-sub {
  font-size: 12.5px;
  color: var(--gray);
}

.wt-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.wt-action .asg-upload-form {
  min-width: 0;
}

.wt-action:empty {
  display: none;
}

.wt-action .wt-paper {
  margin: 0;
}

.wt-action .btn {
  justify-self: start;
}

.wt-feedback {
  font-size: 13px;
}

.wt-feedback summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-red);
}

.wt-feedback p {
  margin: 4px 0 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  color: var(--ink);
  white-space: pre-wrap;
}

@media (max-width: 480px) {
  .wt-ringrow { gap: 14px; }
  .wt-ring { width: 64px; height: 64px; }
  .wt-ring span { width: 48px; height: 48px; font-size: 13px; }
}

.weekly-title {
  font-size: 17px;
}

/* ==========================================================================
   Gateway entrance & typing
   ========================================================================== */

.gateway-card {
  position: relative;
  animation: gw-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.gateway-card .logo {
  animation: gw-logo-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s backwards;
}

.gateway-card h1 { animation: gw-rise 0.5s ease 0.32s backwards; }
.gateway-card .gw-sub { animation: gw-rise 0.5s ease 0.46s backwards; }
.gw-actions .btn:nth-child(1) { animation: gw-rise 0.45s ease 0.6s backwards; }
.gw-actions .btn:nth-child(2) { animation: gw-rise 0.45s ease 0.72s backwards; }
.gw-foot { animation: gw-rise 0.5s ease 0.9s backwards; }

@keyframes gw-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
}

@keyframes gw-logo-in {
  from { opacity: 0; transform: scale(0.5) rotate(-8deg); }
}

@keyframes gw-rise {
  from { opacity: 0; transform: translateY(12px); }
}

.gw-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--red);
  margin-left: 3px;
  vertical-align: -0.15em;
  animation: gw-caret-blink 0.8s steps(1) infinite;
  transition: opacity 0.5s ease;
}

.gw-caret.done {
  opacity: 0;
}

@keyframes gw-caret-blink {
  50% { opacity: 0; }
}

.gw-line2 {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.gw-line2.show {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Study-buddy owl easter egg (owl.js)
   ========================================================================== */

.swr-owl {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 130;
  pointer-events: none;
  visibility: hidden;
}

.swr-owl.perched {
  visibility: visible;
}

.swr-owl.perched {
  pointer-events: auto;
}

.swr-owl.portal {
  position: relative;
  display: block;
  width: 64px;
  height: 66px;
  margin: 16px auto 0;
}

.swr-owl.gateway {
  position: absolute;
  width: 72px;
  height: 72px;
  top: -58px;
  right: 22px;
}

.owl-twig {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62px;
  margin-left: -31px;
  visibility: visible;
}

.swr-owl.gateway .owl-twig {
  display: none;
}

.owl-fly {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
}

.swr-owl.perched .owl-fly {
  animation: owl-land 0.45s ease;
}

.swr-owl.hop .owl-fly {
  animation: owl-hop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.owl-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  transition: transform 0.35s ease;
}

.owl-bob {
  position: absolute;
  inset: 0;
  display: block;
}

.swr-owl.portal.perched .owl-svg {
  transform: scaleX(-1);
}

.owl-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: owl-blink 4.4s ease-in-out infinite;
}

.swr-owl.still .owl-eye {
  animation: none;
}

@keyframes owl-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 95% { transform: scaleY(0.08); }
}

@keyframes owl-land {
  0% { transform: translateY(-7px); }
  45% { transform: translateY(2px) scaleY(0.94); }
}

@keyframes owl-hop {
  30% { transform: translateY(-10px); }
  60% { transform: translateY(1px) scaleY(0.93); }
}

.owl-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  width: max-content;
  max-width: 230px;
  white-space: normal;
  text-align: left;
  box-shadow: var(--shadow-pop);
  animation: pop-in 0.3s ease;
}

.owl-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  background: var(--surface);
  border-right: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
  transform: rotate(45deg);
}

.swr-owl.portal .owl-bubble { left: 4px; }
.swr-owl.portal .owl-bubble::after { left: 18px; }
.swr-owl.gateway .owl-bubble { right: 4px; }
.swr-owl.gateway .owl-bubble::after { right: 18px; }

@media (max-width: 900px) {
  .swr-owl.portal {
    width: 48px;
    height: 50px;
  }
  .owl-twig {
    width: 46px;
    margin-left: -23px;
  }
}

/* ==========================================================================
   Teacher portal — student report page (progress system Phase 3)
   ========================================================================== */

.report-back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
}

.report-back:hover {
  color: var(--red);
}

.report-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Enrolment editor sits to the right of the name, dropping below it when
   there isn't room. */
.report-subjects {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-subjects .form-label {
  margin-top: 0;
}

@media (max-width: 640px) {
  .report-subjects {
    margin-left: 0;
    width: 100%;
  }
}

.report-identity h2 {
  font-size: 18px;
  font-weight: 700;
}

.avatar-initials.lg {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

.student-cell-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.student-cell-link:hover {
  color: var(--red);
}

.stat-sub.up {
  color: var(--ink-green);
}

.stat-sub.down {
  color: var(--ink-red);
}

.report-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.report-bands-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-light);
}

.band-chip {
  display: flex;
  align-items: center;
  gap: 6px;
}

.band-range {
  font-size: 12px;
  color: var(--gray);
}

.grade-chip.mid {
  background: var(--gray-light);
  color: var(--ink);
}

.grade-chip.risk {
  background: var(--red-blush);
  color: var(--ink-red);
}

.report-work-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-light);
}

.report-work-item:last-child {
  border-bottom: none;
}

.report-work-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.report-work-top strong {
  flex: 1;
  font-size: 14px;
}

.report-work-trend {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-red);
}

.report-work-trend.up {
  color: var(--ink-green);
}

.report-work-score {
  font-size: 13px;
  color: var(--gray);
}

.progress-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--gray-light);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
}

.report-work-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--gray);
}

.report-work-feedback {
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink);
  border-left: 3px solid var(--red);
  padding-left: 10px;
}

/* ==========================================================================
   Attendance (progress system Phase 4)
   ========================================================================== */

.att-toggle {
  display: flex;
  gap: 6px;
}

.att-btn {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--gray-light);
  background: var(--surface);
  color: var(--gray);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.att-btn:hover {
  border-color: var(--red-blush-line);
}

.att-btn.present.active {
  background: var(--green-light);
  color: var(--ink-green);
  border-color: var(--green-light);
}

.att-btn.leave.active {
  background: var(--gray-light);
  color: var(--ink);
  border-color: var(--gray-light);
}

.att-btn.absent.active {
  background: var(--red-blush);
  color: var(--ink-red);
  border-color: var(--red-blush);
}

/* An untagged mark from before attendance had subjects — still counted,
   but visibly not yet confirmed for the subject being marked. */
.att-btn.active.legacy {
  opacity: 0.6;
  border-style: dashed;
  border-color: var(--gray-soft);
}

.att-legacy-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--gray);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.att-legacy-note[hidden],
.table-wrap[hidden] {
  display: none;
}

/* ==========================================================================
   Motion & interaction polish
   ========================================================================== */

.view {
  animation: view-in 0.32s ease;
}

.snav-item.active::before {
  animation: indicator-in 0.25s ease;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes indicator-in {
  from { height: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Mobile navigation (hamburger + off-canvas drawer)
   Hidden on desktop; the ≤900 breakpoint below turns the sidebar into a
   slide-in drawer and reveals the toggle.
   ========================================================================== */

.nav-toggle {
  display: none;
  margin-right: 4px;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nav-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Course tabs — Pakistan Studies / Islamiyat switch (scoreboards, the
   dashboard leaderboard, My Grades) + the teacher's per-item course picker
   ========================================================================== */

.course-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.course-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--red-blush-line);
  background: var(--surface);
  color: var(--ink-red);
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.course-tab:hover {
  background: var(--red-blush);
}

.course-tab.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.grade-course-tabs {
  margin-bottom: 18px;
}

.course-retag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 4px 0 16px;
}

.course-retag label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
}

.course-retag .date-hint {
  flex-basis: 100%;
}

/* Weekly test "Edit details" form (teacher) */
.wt-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 4px 0 16px;
}

.wt-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wt-edit-field:first-child {
  flex: 1 1 240px;
}

.wt-edit label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray);
}

.wt-edit .date-hint {
  flex-basis: 100%;
}

@media (max-width: 640px) {
  .wt-edit-field, .wt-edit .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Examiner Scripts — grade-first cards + in-portal PDF reader (2026-10-25)
   Student cards, the reader overlay, and the teacher's posted list share the
   same card. Portal tokens only, so light and dark follow automatically.
   ========================================================================== */

.xs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.xs-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
  text-align: left;
  font: inherit;
  color: inherit;
}

button.xs-card {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

button.xs-card:hover {
  border-color: var(--red-blush-line);
  transform: translateY(-2px);
}

button.xs-card:focus-visible,
.xs-reader button:focus-visible {
  outline: 3px solid var(--brand-primary, var(--red));
  outline-offset: 2px;
}

.xs-grade {
  width: 74px;
  height: 74px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font: 800 32px 'Poppins', sans-serif;
  background: var(--surface-2);
  color: var(--ink);
}

.xs-grade.top { background: var(--green-light); color: var(--ink-green); }
.xs-grade.low { background: var(--red-blush); color: var(--ink-red); }

.xs-body {
  flex: 1;
  min-width: 0;
}

.xs-body h3,
.xs-title {
  display: block;
  font: 700 16px 'Poppins', sans-serif;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.xs-meta {
  display: block;
  font-size: 12.5px;
  color: var(--gray);
  margin: 2px 0 10px;
}

.xs-marks {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 5px;
}

.xs-marks b {
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
}

.xs-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.xs-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--red);
}

.xs-fill.top { background: var(--green); }

.xs-go {
  flex-shrink: 0;
  font: 600 13px 'Inter', sans-serif;
  color: var(--ink-red);
  white-space: nowrap;
}

.xs-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.xs-form-note {
  margin-top: 4px;
}

@media (max-width: 480px) {
  .xs-grid { grid-template-columns: minmax(0, 1fr); }
  .xs-card { gap: 12px; padding: 14px; }
  .xs-grade { width: 60px; height: 60px; font-size: 26px; border-radius: 15px; }
  .xs-go { display: none; }
}

/* Reader */

body.xs-reading { overflow: hidden; }

.xs-reader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.xs-reader[hidden] { display: none; }

.xs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--gray-light);
  flex-wrap: wrap;
}

.xs-bar-title {
  flex: 1;
  min-width: 140px;
}

.xs-bar-title strong {
  display: block;
  font: 700 15px 'Poppins', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xs-bar-title span {
  display: block;
  font-size: 12px;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xs-ctl {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 700 16px 'Inter', sans-serif;
  cursor: pointer;
}

.xs-ctl:hover { background: var(--surface-2); }
.xs-ctl.close { border-color: var(--red-blush-line); color: var(--ink-red); font-size: 14px; }

.xs-pageno {
  font: 600 13px 'Inter', sans-serif;
  color: var(--gray);
  min-width: 72px;
  text-align: center;
}

.xs-scroll {
  flex: 1;
  overflow: auto;
  background: var(--surface-2);
  padding: 16px 12px 40px;
  -webkit-overflow-scrolling: touch;
}

.xs-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  min-width: 100%;
}

.xs-page {
  position: relative;
  margin: 0 auto 14px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.xs-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.xs-state {
  max-width: 420px;
  margin: 60px auto;
  text-align: center;
  color: var(--gray);
  font-size: 14px;
}

.xs-state .xs-spin {
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  border: 3px solid var(--gray-light);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: xsSpin 0.8s linear infinite;
}

@keyframes xsSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .xs-state .xs-spin { animation-duration: 2.4s; }
  button.xs-card { transition: none; }
  button.xs-card:hover { transform: none; }
}

@media (max-width: 480px) {
  .xs-bar {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas: "title title title close" "page page zo zi";
    gap: 6px 8px;
    padding: 8px 10px;
    align-items: center;
  }
  .xs-bar-title { grid-area: title; min-width: 0; }
  .xs-ctl.close { grid-area: close; }
  .xs-pageno { grid-area: page; text-align: left; }
  #xsZoomOut { grid-area: zo; }
  #xsZoomIn { grid-area: zi; }
  .xs-scroll { padding: 10px 6px 40px; }
}

/* ==========================================================================
   Syllabus checklist — My Syllabus (student) + Syllabus Confidence (teacher)
   Three states, always with a text label so colour is never the only cue.
   ========================================================================== */

:root {
  --syl-amber: #D99A1B;
  --syl-amber-bg: #FEF3C7;
  --syl-amber-ink: #7A4F00;
}

:root[data-theme="dark"] {
  --syl-amber: #F2B84B;
  --syl-amber-bg: #33290F;
  --syl-amber-ink: #F2B84B;
}

.syl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.syl-dot.g { background: var(--green); }
.syl-dot.a { background: var(--syl-amber); }
.syl-dot.r { background: var(--red); }

.syl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}

.syl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.syl-chip {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-light);
  background: var(--surface);
  color: var(--ink);
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
}
.syl-chip b { color: var(--gray); margin-left: 4px; }
.syl-chip:hover { background: var(--surface-2); }
.syl-chip.on,
.syl-chip[aria-pressed="true"].on {
  background: var(--red-blush);
  border-color: var(--red);
  color: var(--ink-red);
}
.syl-chip.on b { color: var(--ink-red); }

.syl-group {
  margin: 16px 0 4px;
  font: 700 11px 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

.syl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}

.syl-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.syl-main b { font: 600 15px 'Inter', sans-serif; color: var(--ink); }

.syl-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.syl-link {
  padding: 0;
  min-height: 24px;
  border: 0;
  background: none;
  color: var(--ink-red);
  font: 600 12.5px 'Inter', sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.syl-none { font-size: 12.5px; color: var(--gray); }

.syl-rag { display: flex; gap: 6px; flex: none; }

.syl-rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--gray-light);
  background: var(--surface);
  color: var(--gray);
  font: 600 12.5px 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.syl-rate:hover { background: var(--surface-2); color: var(--ink); }
.syl-rate[aria-pressed="true"].r { background: var(--red-blush); border-color: var(--red); color: var(--ink-red); }
.syl-rate[aria-pressed="true"].a { background: var(--syl-amber-bg); border-color: var(--syl-amber); color: var(--syl-amber-ink); }
.syl-rate[aria-pressed="true"].g { background: var(--green-light); border-color: var(--green); color: var(--ink-green); }

.syl-side { display: grid; gap: 14px; position: sticky; top: 156px; }

.syl-card {
  padding: 16px;
  border: 1px solid var(--gray-light);
  border-radius: 14px;
  background: var(--surface);
}
.syl-card h3 { margin: 0 0 10px; font: 700 14px 'Poppins', sans-serif; }

.syl-prog { display: flex; align-items: center; gap: 16px; }
.syl-prog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--gray); flex: 1; }
.syl-prog li { display: flex; align-items: center; gap: 8px; }
.syl-prog li b { color: var(--ink); margin-left: auto; padding-left: 10px; }

.syl-ring {
  --p: 0;
  flex: none;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--gray-light) 0);
}
.syl-ring span {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--surface);
  font: 700 17px 'Poppins', sans-serif;
  color: var(--ink);
}

.syl-next { background: var(--red-blush); border-color: var(--red-blush-line); }
.syl-next h3 { color: var(--ink-red); }
.syl-next ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-red); font-weight: 600; }
.syl-next p { margin: 0; font-size: 13.5px; color: var(--ink-red); }

/* Teacher: class-wide view */
.syl-tsummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: 14px;
}
.syl-tsummary > div:not(.syl-tlegend) { display: flex; flex-direction: column; }
.syl-tsummary b { font: 700 22px 'Poppins', sans-serif; color: var(--ink); }
.syl-tsummary span { font-size: 12.5px; color: var(--gray); }
.syl-tlegend { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray); margin-left: auto; }
.syl-tlegend .syl-dot { margin-left: 8px; }

.syl-trow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr) 170px;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.syl-tmain { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.syl-tmain b { font: 600 14.5px 'Inter', sans-serif; color: var(--ink); }
.syl-tgroup { font-size: 12px; color: var(--gray); }

.syl-tbar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.syl-tbar i { display: block; height: 100%; }
.syl-tbar i.g { background: var(--green); }
.syl-tbar i.a { background: var(--syl-amber); }
.syl-tbar i.r { background: var(--red); opacity: 0.55; }

.syl-tnum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; color: var(--gray); }
.syl-tnum b { color: var(--ink); }

.syl-reteach {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red-blush);
  color: var(--ink-red);
  font: 700 11px 'Inter', sans-serif;
}

@media (max-width: 900px) {
  .syl-grid { grid-template-columns: minmax(0, 1fr); }
  .syl-side { position: static; order: -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .syl-row { flex-direction: column; align-items: stretch; }
  .syl-rag { width: 100%; }
  .syl-rate { flex: 1; justify-content: center; padding: 0 6px; }
  .syl-side { grid-template-columns: 1fr; }
  .syl-trow { grid-template-columns: minmax(0, 1fr); }
  .syl-tlegend { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .syl-rate { transition: none; }
}

/* ==========================================================================
   Sunday Letter — student banner (blush pink), one-time pop-up, letter
   reader; teacher write/post panel
   ========================================================================== */

:root {
  --lt-paper: #FFFDF8;
  --lt-paper-line: #EBE3D6;
  --lt-paper-ink: #2B2620;
}

:root[data-theme="dark"] {
  --lt-paper: #25221D;
  --lt-paper-line: #3A352D;
  --lt-paper-ink: #EDE6DA;
}

.lt-seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 700 13px 'Poppins', sans-serif;
  box-shadow: 0 3px 8px rgba(151, 24, 34, 0.25);
}
.lt-seal.small { width: 36px; height: 36px; font-size: 11px; }

.lt-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--red-blush-line);
  border-radius: 16px;
  background: var(--red-blush);
}

.lt-banner-text { flex: 1; min-width: 0; }

.lt-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 11px 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-red);
}

.lt-new {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  letter-spacing: 0.06em;
}

.lt-banner h2 {
  margin: 4px 0 2px;
  font: 700 19px 'Poppins', sans-serif;
  color: var(--ink);
}

.lt-banner p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.lt-read { flex: none; min-height: 44px; }

/* one-time pop-up, slides down under the top bar */
.lt-popup {
  position: fixed;
  left: 50%;
  top: 76px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100% - 32px));
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--red-blush-line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -24px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.25s ease;
}
.lt-popup.show { transform: translate(-50%, 0); opacity: 1; }
.lt-pop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--gray); }
.lt-pop-text b { font-size: 14px; color: var(--ink); }
.lt-pop-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-popup .btn { min-height: 40px; }
.lt-pop-x {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gray);
  font-size: 20px;
  cursor: pointer;
}
.lt-pop-x:hover { background: var(--surface-2); color: var(--ink); }

/* reader */
.lt-reader {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  padding: 40px 16px;
  background: rgba(20, 16, 18, 0.55);
}
.lt-reader:not([hidden]) { display: flex; justify-content: center; align-items: flex-start; }
body.lt-lock { overflow: hidden; }

.lt-paper {
  position: relative;
  width: min(660px, 100%);
  padding: 44px 44px 32px;
  border-radius: 14px;
  background: var(--lt-paper);
  color: var(--lt-paper-ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  animation: lt-rise 0.35s ease;
}
@keyframes lt-rise { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

.lt-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lt-paper-line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}

.lt-meta {
  font: 700 12px 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-red);
  padding-right: 48px;
}

.lt-paper h2 {
  margin: 8px 0 18px;
  font: 700 26px/1.25 'Poppins', sans-serif;
  color: var(--lt-paper-ink);
}

.lt-body p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.75;
  white-space: pre-line;
}

.lt-sign {
  margin-top: 22px;
  font: 600 18px 'Poppins', sans-serif;
  color: var(--ink-red);
}
.lt-sign::before { content: "— "; }

.lt-earlier { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--lt-paper-line); }
.lt-earlier h3 { margin: 0 0 6px; font: 700 14px 'Poppins', sans-serif; color: var(--lt-paper-ink); }
.lt-earlier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--lt-paper-line);
  background: none;
  color: var(--lt-paper-ink);
  font: 500 14px 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
}
.lt-earlier-row:hover span { color: var(--ink-red); text-decoration: underline; }
.lt-earlier-row small { flex: none; font-size: 12.5px; color: var(--gray); }

/* teacher panel */
.lt-admin { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lt-form { display: flex; flex-direction: column; gap: 6px; }
.lt-form label { display: flex; justify-content: space-between; margin-top: 6px; font: 600 13px 'Inter', sans-serif; color: var(--ink); }
.lt-form input,
.lt-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 14.5px/1.55 'Inter', sans-serif;
  resize: vertical;
}
.lt-count { font-weight: 500; color: var(--gray); }
.lt-help { margin: 0; font-size: 12.5px; color: var(--gray); }
.lt-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lt-posted h3 { margin: 0 0 8px; font: 700 14px 'Poppins', sans-serif; }
.lt-posted-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.lt-posted-main { display: flex; flex-direction: column; }
.lt-posted-main b { font-size: 14.5px; }
.lt-posted-main span { font-size: 12.5px; color: var(--gray); }
.lt-posted-actions { display: flex; gap: 8px; }

@media (max-width: 900px) {
  .lt-admin { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .lt-banner { flex-wrap: wrap; padding: 16px; }
  .lt-banner .lt-read { width: 100%; }
  .lt-popup { top: 68px; }
  .lt-reader { padding: 16px 10px; }
  .lt-paper { padding: 36px 20px 24px; }
  .lt-paper h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-popup, .lt-paper { transition: none; animation: none; }
}

/* ==========================================================================
   Class reviews — student Review page; teacher Student Reviews page,
   unread count on the sidebar item
   ========================================================================== */

.snav-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 700 11.5px/18px 'Inter', sans-serif;
  text-align: center;
}

.rv-form { display: flex; flex-direction: column; gap: 6px; max-width: 680px; }
.rv-form label { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; font: 600 14px 'Inter', sans-serif; color: var(--ink); }
.rv-opt { font-size: 12px; font-weight: 500; color: var(--gray); }
.rv-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: 14.5px/1.55 'Inter', sans-serif;
  resize: vertical;
}
.rv-form .btn { align-self: flex-start; margin-top: 10px; min-height: 44px; }

.rv-rate { border: 0; margin: 0; padding: 0; }
.rv-rate legend { padding: 0; margin-bottom: 10px; font: 700 16px 'Poppins', sans-serif; color: var(--ink); }
.rv-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rv-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 120px;
  padding: 12px 6px;
  border: 1px solid var(--gray-light);
  border-radius: 14px;
  background: var(--surface);
  color: var(--gray);
  font: 600 12.5px/1.3 'Inter', sans-serif;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.rv-face:hover { background: var(--surface-2); }
.rv-emoji { display: block; line-height: 0; transition: transform 0.15s ease; }
.rv-emoji img { width: 64px; height: 64px; }
.rv-face:hover .rv-emoji { transform: scale(1.06); }
.rv-face[aria-pressed="true"] { border-color: var(--red); background: var(--red-blush); color: var(--ink-red); }
.rv-face[aria-pressed="true"] .rv-emoji { transform: scale(1.12); }

.rv-private { margin: 8px 0 0; font-size: 13px; color: var(--gray); }

.rv-thanks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--green);
  border-radius: 14px;
  background: var(--green-light);
}
.rv-thanks-face { font-size: 30px; }
.rv-thanks div { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.rv-thanks b { color: var(--ink-green); font-size: 15px; }
.rv-thanks span { color: var(--ink); font-size: 13.5px; }

.rv-past { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--gray-light); }
.rv-past h3 { margin: 0 0 8px; font: 700 15px 'Poppins', sans-serif; }
.rv-past-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.rv-past-face { flex: none; line-height: 0; }
.rv-past-face img { width: 36px; height: 36px; }
.rv-past-row b { display: block; font-size: 14px; }
.rv-past-row small { color: var(--gray); font-size: 12.5px; }
.rv-past-row p { margin: 6px 0 0; font-size: 14px; white-space: pre-line; }

/* teacher */
.rv-summary { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-bottom: 16px; }
.rv-summary div { display: flex; flex-direction: column; }
.rv-summary b { font: 700 22px 'Poppins', sans-serif; color: var(--ink); }
.rv-summary span { font-size: 12.5px; color: var(--gray); }

.rv-list { display: grid; gap: 12px; }
.rv-card { padding: 16px 18px; border: 1px solid var(--gray-light); border-radius: 14px; background: var(--surface); }
.rv-card.fresh { border-color: var(--red-blush-line); box-shadow: inset 4px 0 0 var(--red); }
.rv-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-card-face { flex: none; line-height: 0; }
.rv-card-face img { width: 40px; height: 40px; }
.rv-avg { display: inline-flex; align-items: center; gap: 6px; }
.rv-avg img { width: 28px; height: 28px; }
.rv-card-who { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.rv-card-who b { font-size: 15px; color: var(--ink); }
.rv-card-who small { font-size: 12.5px; color: var(--gray); }
.rv-new { padding: 2px 9px; border-radius: 999px; background: var(--red); color: #fff; font: 700 11px 'Inter', sans-serif; }
.rv-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); white-space: pre-line; }
.rv-change span { display: block; margin-bottom: 2px; font: 700 11.5px 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-red); }
.rv-none { color: var(--gray); font-style: italic; }

@media (max-width: 640px) {
  .rv-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rv-face { min-height: 104px; font-size: 12px; }
  .rv-emoji img { width: 52px; height: 52px; }
  .rv-form .btn { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-face, .rv-emoji { transition: none; }
}

/* ==========================================================================
   Winner celebration — full-screen "you won" screen (2026-11-01)
   Shown once to a student who has an unseen row in `winners`. Deliberately its
   own fixed celebratory palette (deep red, gold, white) in both themes, like a
   congratulations card, so it reads the same in light and dark. Motion is
   switched off for prefers-reduced-motion (the message still shows).
   ========================================================================== */

body.win-open { overflow: hidden; }

.win-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  overflow-y: auto;
  color: #fff;
  background: radial-gradient(ellipse at 50% 28%, #D2303C 0%, #8F1D27 46%, #3A0C12 100%);
  animation: win-fade 0.5s ease both;
}

.win-overlay.out { animation: win-fade-out 0.35s ease both; }

@keyframes win-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes win-fade-out { to { opacity: 0; } }

.win-rays {
  position: fixed;
  left: 50%;
  top: 30%;
  width: 170vmax;
  height: 170vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0 7deg, transparent 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 52%);
  mask-image: radial-gradient(circle, #000 0, transparent 52%);
  animation: win-spin 46s linear infinite;
  pointer-events: none;
}

@keyframes win-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.win-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.win-card {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  text-align: center;
}

.win-trophy-wrap {
  position: relative;
  width: 150px;
  height: 165px;
  margin: 0 auto 6px;
  animation: win-drop 1s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.win-trophy {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.38));
}

@keyframes win-drop {
  0% { transform: translateY(-120px) scale(0.4) rotate(-12deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.win-sweep { animation: win-sweep 3.2s ease-in-out 1.2s infinite; }

@keyframes win-sweep {
  0% { transform: translateX(-140px); }
  55%, 100% { transform: translateX(260px); }
}

.win-spark {
  position: absolute;
  width: 18px;
  height: 18px;
  color: #FFE9A8;
  animation: win-twinkle 1.8s ease-in-out infinite;
}

.win-spark svg { width: 100%; height: 100%; display: block; }

@keyframes win-twinkle {
  0%, 100% { transform: scale(0.2) rotate(0); opacity: 0; }
  50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

.win-eyebrow {
  font: 700 12.5px 'Inter', sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #FFD98A;
  animation: win-rise 0.8s 0.5s both;
}

.win-title {
  margin: 8px 0 6px;
  font: 800 clamp(30px, 8vw, 52px)/1.05 'Poppins', sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
  animation: win-rise 0.8s 0.7s both;
}

.win-title .win-name {
  display: block;
  background: linear-gradient(90deg, #FFE9A8, #F6C453 50%, #FFE9A8);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: win-gold 3s linear infinite;
}

@keyframes win-gold { to { background-position: -200% 0; } }

.win-sub {
  margin: 0 0 20px;
  font-size: clamp(15px, 3.8vw, 18px);
  color: rgba(255, 255, 255, 0.92);
  animation: win-rise 0.8s 0.9s both;
}

.win-prize {
  display: inline-block;
  min-width: min(340px, 100%);
  padding: 18px 26px 16px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: win-rise 0.8s 1.1s both, win-float 4s ease-in-out 2s infinite;
}

.win-prize small {
  display: block;
  font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFD98A;
}

.win-prize b {
  display: block;
  font: 800 clamp(40px, 11vw, 64px)/1.1 'Poppins', sans-serif;
  color: #fff;
  text-shadow: 0 4px 18px rgba(246, 196, 83, 0.55);
}

@keyframes win-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.win-note {
  margin: 20px auto 22px;
  max-width: 440px;
  font-size: clamp(14px, 3.6vw, 16px);
  color: rgba(255, 255, 255, 0.92);
  animation: win-rise 0.8s 1.4s both;
}

.win-note strong { color: #fff; }

.win-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  animation: win-rise 0.8s 1.6s both;
}

.win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font: 700 15px 'Inter', sans-serif;
  cursor: pointer;
}

.win-btn.main {
  background: #fff;
  color: #8F1D27;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.win-btn.main:hover { transform: translateY(-2px); }

.win-btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.win-btn:focus-visible {
  outline: 3px solid #FFD98A;
  outline-offset: 3px;
}

@keyframes win-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .win-overlay, .win-overlay * { animation: none !important; transition: none !important; }
  .win-rays { display: none; }
}

/* ==========================================================================
   AI Practice — student practice flow + teacher monitoring (2026-10-09)
   Brand tokens only, so light/dark follow automatically. The mark chip always
   prints the number, so colour is never the only cue.
   ========================================================================== */

.pr-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
  font: 700 13px 'Poppins', sans-serif;
  white-space: nowrap;
}

.pr-mark[data-band="high"] {
  background: var(--green-light);
  color: var(--ink-green);
}

.pr-mark[data-band="low"] {
  background: var(--red-blush);
  color: var(--ink-red);
}

.pr-note {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--red-blush-soft);
  color: var(--ink-red);
  font-size: 12.5px;
  font-weight: 600;
}

.pr-sub {
  display: block;
  margin-top: 2px;
  color: var(--gray);
  font-size: 11.5px;
  font-weight: 500;
}

.pr-none {
  color: var(--gray);
  font-size: 12.5px;
}

/* ---- student: landing ---- */

.pr-intro {
  margin-bottom: 20px;
  color: var(--gray);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 720px;
}

.pr-rules {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}

.pr-rules li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
}

.pr-rules li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.pr-rules strong {
  color: var(--ink);
}

.pr-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.pr-section-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pr-section-card:hover {
  border-color: var(--red-blush-line);
  background: var(--red-blush-soft);
}

.pr-section-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--red-blush);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 19px 'Poppins', sans-serif;
}

.pr-section-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.pr-section-body strong {
  font: 700 15px 'Poppins', sans-serif;
}

.pr-section-meta {
  color: var(--gray);
  font-size: 12px;
}

.pr-progress {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--gray-light);
  overflow: hidden;
}

.pr-progress i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: inherit;
}

.pr-recent {
  display: grid;
  gap: 6px;
}

.pr-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.pr-recent-row:hover {
  border-color: var(--red-blush-line);
  background: var(--red-blush-soft);
}

.pr-recent-q {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-recent-when {
  flex-shrink: 0;
  color: var(--gray);
  font-size: 12px;
}

/* ---- student: question list ---- */

.pr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12.5px;
}

.pr-crumb {
  border: none;
  background: none;
  padding: 2px 0;
  color: var(--red);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pr-crumb:hover {
  text-decoration: underline;
}

.pr-crumb.current {
  color: var(--gray);
  cursor: default;
}

.pr-crumb-sep {
  color: var(--gray-soft);
}

.pr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.pr-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pr-filter > span {
  color: var(--gray);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.pr-filter .tool-select {
  min-width: 220px;
  max-width: 100%;
}

.pr-filter-grow {
  flex: 1;
  min-width: 220px;
}

.pr-q-list {
  display: grid;
  gap: 8px;
}

.pr-q-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pr-q-card:hover {
  border-color: var(--red-blush-line);
  background: var(--red-blush-soft);
}

.pr-q-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pr-q-text {
  font-size: 14px;
  line-height: 1.35;
}

.pr-q-meta {
  color: var(--gray);
  font-size: 12px;
}

.pr-q-status {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.pr-q-status small {
  color: var(--gray);
  font-size: 11px;
}

.pr-new {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--gray);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---- student: answer ---- */

.pr-question-box {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--gray-light);
  border-left: 4px solid var(--red);
  border-radius: 12px;
  background: var(--surface-2);
}

.pr-question {
  margin: 4px 0 8px;
  font-size: 19px;
  line-height: 1.35;
}

.pr-marks-tag {
  display: inline-block;
  margin-right: 12px;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.pr-tried {
  color: var(--gray);
  font-size: 12.5px;
}

.pr-answer-form {
  max-width: none;
  gap: 8px;
}

.pr-counter-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pr-counter {
  flex-shrink: 0;
  color: var(--gray);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pr-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pr-grading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 13.5px;
}

.pr-grading small {
  display: block;
  margin-top: 2px;
  color: var(--gray);
  font-size: 12px;
}

.pr-spinner {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 3px solid var(--gray-light);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: pr-spin 0.8s linear infinite;
}

@keyframes pr-spin {
  to { transform: rotate(360deg); }
}

/* ---- student result + teacher detail ---- */

.pr-result-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
  padding: 18px;
  border: 1px solid var(--gray-light);
  border-radius: 14px;
  background: var(--surface-2);
}

.pr-result-head[data-band="high"] {
  background: var(--green-light);
  border-color: var(--green);
}

.pr-result-head[data-band="low"] {
  background: var(--red-blush-soft);
  border-color: var(--red-blush-line);
}

.pr-score-ring {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 6px solid var(--gray-soft);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pr-result-head[data-band="high"] .pr-score-ring { border-color: var(--green); }
.pr-result-head[data-band="low"] .pr-score-ring { border-color: var(--red); }

.pr-score-ring strong {
  font: 700 32px 'Poppins', sans-serif;
}

.pr-score-ring span {
  margin-top: 3px;
  color: var(--gray);
  font-size: 11px;
  font-weight: 600;
}

.pr-result-head h2 {
  font-size: 21px;
}

.pr-result-q {
  margin: 4px 0 6px;
  color: var(--gray);
  font-size: 13.5px;
}

.pr-block {
  margin-top: 22px;
}

.pr-block h3,
.pr-h {
  margin: 18px 0 8px;
  color: var(--gray);
  font: 700 11.5px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.pr-block h3 {
  margin-top: 0;
}

.pr-credit-list,
.pr-not-list {
  display: grid;
  gap: 8px;
}

.pr-credit,
.pr-not-list li {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.45;
}

.pr-tick,
.pr-cross {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.pr-tick {
  background: var(--green);
  color: #fff;
}

.pr-cross {
  background: var(--red-blush);
  color: var(--ink-red);
}

.pr-type {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--ink-green);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.pr-type.detail {
  background: var(--surface-2);
  color: var(--ink);
}

.pr-credit blockquote {
  margin-top: 4px;
  padding-left: 10px;
  border-left: 3px solid var(--gray-light);
  color: var(--gray);
  font-size: 12.5px;
  font-style: italic;
}

.pr-not-list li div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-not-list li span:not(.pr-cross) {
  color: var(--gray);
  font-size: 12.5px;
}

.pr-more-list {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  list-style: disc;
  font-size: 13.5px;
  line-height: 1.45;
}

.pr-feedback {
  font-size: 14px;
  line-height: 1.6;
}

.pr-yours {
  margin-top: 18px;
  font-size: 13px;
}

.pr-yours summary {
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
}

.pr-yours p {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  white-space: pre-wrap;
  line-height: 1.55;
}

/* ---- teacher dashboard ---- */

.pr-head {
  flex-wrap: wrap;
}

.pr-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pr-stat-text {
  font-size: 15px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pr-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray);
  font-size: 12px;
  font-weight: 600;
}

.pr-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-soft);
}

.pr-live[data-live="on"] {
  color: var(--ink-green);
}

.pr-live[data-live="on"] i {
  background: var(--green);
  animation: pr-pulse 2s ease-in-out infinite;
}

@keyframes pr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.pr-refresh.spinning svg {
  animation: pr-spin 0.8s linear infinite;
}

.pr-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gray-light);
  overflow-x: auto;
  scrollbar-width: none;
}

.pr-tab {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  margin-bottom: -2px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--gray);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.pr-tab:hover {
  color: var(--ink);
}

@media (max-width: 480px) {
  .pr-tab { padding: 9px 10px; font-size: 13px; }
}

.pr-tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.pr-q-clamp {
  display: -webkit-box;
  max-width: 420px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
}

.pr-topic-cell {
  font-weight: 600;
}

.pr-table tr.pr-quiet td {
  color: var(--gray);
}

.pr-q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.pr-q-head .res-count {
  margin: 0;
}

.pr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.pr-avg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pr-bar {
  display: inline-block;
  width: 96px;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-light);
  overflow: hidden;
}

.pr-bar i {
  display: block;
  height: 100%;
  background: var(--gray-soft);
  border-radius: inherit;
}

.pr-bar i[data-band="high"] { background: var(--green); }
.pr-bar i[data-band="low"] { background: var(--red); }

.pr-more {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.pr-modal-card {
  max-width: 640px;
}

.pr-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}

.pr-detail-q {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.4;
}

.pr-answer-text {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .pr-result-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pr-q-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .pr-q-status {
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
  }

  .pr-filter .tool-select {
    min-width: 0;
    width: 100%;
  }

  .pr-filter {
    flex: 1 1 100%;
  }

  .pr-actions .btn {
    flex: 1 1 100%;
  }

  .pr-q-clamp {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pr-spinner,
  .pr-refresh.spinning svg,
  .pr-live[data-live="on"] i {
    animation: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .upload-grid,
  .two-col {
    grid-template-columns: 1fr;
  }
  .layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .lecture-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats.three {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .stats,
  .stats.three {
    grid-template-columns: repeat(2, 1fr);
  }
  .lecture-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .welcome-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .subject-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .note-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .publish-row {
    flex-direction: column;
    align-items: stretch;
  }
  .publish-actions .btn {
    flex: 1;
  }

  /* Content spans the full width; the sidebar becomes a slide-in drawer. */
  .nav-toggle {
    display: inline-flex;
  }
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 18px 16px 36px;
  }
  .content {
    min-width: 0;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(80vw, 290px);
    max-height: none;
    border-radius: 0;
    border-width: 0 1px 0 0;
    padding: 14px 12px;
    overflow-y: auto;
    z-index: 210;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open {
    transform: none;
    box-shadow: var(--shadow-pop);
  }
  /* Full labels inside the drawer (undo any desktop icon-rail assumptions). */
  .snav-item {
    justify-content: flex-start;
    padding: 12px 14px;
  }
  .snav-item span {
    display: inline;
  }
  .snav-item.active::before {
    display: block;
  }
  .user-chip-name,
  .user-chip svg {
    display: none;
  }
}

@media (max-width: 640px) {
  .topnav {
    padding: 0 16px;
  }
  .cohort-bar {
    padding: 10px 16px;
    gap: 10px;
  }
  .cohort-meta {
    display: none;
  }
  /* Wrap rather than a hidden sideways scroll, so both cohorts are always
     visible. Not a full-width vertical stack: this bar is sticky, and every
     extra row of it is screen lost on every page. */
  .cohort-pills {
    flex-wrap: wrap;
    min-width: 0;
  }
  .page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .page-head-actions {
    flex-wrap: wrap;
  }
  .page-head-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Panel heads (Attendance subject + date, Scoreboard month, etc.): the
     controls sat on the title's row with no wrapping and pushed ~230px off
     a 360px screen. Title on its own line, each control full-width below. */
  .panel-head {
    flex-wrap: wrap;
  }
  .panel-tools {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .panel-tools > * {
    width: 100%;
    min-width: 0;
  }
  .tool-select {
    padding: 10px 12px;
    font-size: 14px;
  }

  .settings-form {
    max-width: none;
  }
  .settings-form input,
  .settings-form select,
  .settings-form textarea {
    min-width: 0;
    max-width: 100%;
  }
  .settings-form .btn {
    align-self: stretch;
    justify-content: center;
  }

  .asg-upload-form {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .asg-upload-form > .asg-meta {
    flex: 0 0 auto;
  }
  .course-retag .tool-select {
    width: 100%;
  }
  .course-tab {
    flex: 1 1 0;
  }
  .asg-file-input {
    max-width: 100%;
    min-width: 0;
  }
  .asg-upload-form .btn {
    justify-content: center;
  }
  /* Logo alone stands in for the brand on mobile — the wordmark plus the
     hamburger would overflow a narrow topnav. */
  .brand-text {
    display: none;
  }
  .ring-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .note-card .cat-tag {
    display: none;
  }

  /* Upload rows (Notes/Lectures history, Weekly Test posted list): the PDF/
     MP4 badge and the trash button were crowding titles down to ~15
     visible characters before an ellipsis. Drop the redundant badge, let
     the title wrap onto two lines instead of truncating, and give the
     delete button room to breathe and an actual touch-friendly target. */
  .upload-item {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 8px;
  }
  .u-kind {
    display: none;
  }
  .u-info strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }
  .kebab {
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .res-toolbar {
    flex-wrap: wrap;
  }
  .res-toolbar .tool-select {
    width: 100%;
  }
  .res-grid {
    grid-template-columns: 1fr;
  }
  .modal-card {
    padding: 18px;
  }

  /* Data tables (roster, assignments marking, weekly-test detail, grading
     tracker, attendance): min-width:640px forced ~2.3x horizontal scrolling
     just to reach the action buttons. Below the point where columns can
     read comfortably side by side, drop the grid and render each row as a
     labeled card instead — a standard responsive-table pattern. Cells opt
     in via a data-label attribute (added in the render functions); cells
     without one (colspan empty-state rows, the lone Save-button cell) just
     render unlabeled. */
  .sub-table {
    min-width: 0;
  }
  .sub-table thead {
    display: none;
  }
  .sub-table,
  .sub-table tbody,
  .sub-table tr {
    display: block;
    width: 100%;
  }
  .sub-table tr {
    border: 1px solid var(--gray-light);
    border-radius: 12px;
    padding: 4px 12px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .sub-table tr:last-child {
    margin-bottom: 0;
  }
  .sub-table tbody tr:hover td {
    background: none;
  }
  .sub-table td {
    display: block;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-soft);
  }
  .sub-table td:last-child {
    border-bottom: none;
  }
  .sub-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-soft);
    margin-bottom: 4px;
  }
  .sub-table td[colspan] {
    text-align: center;
    color: var(--gray);
  }
  .mark-input,
  .mark-feedback {
    width: 100%;
  }

  .notice-form {
    flex-direction: column;
    align-items: stretch;
  }

  /* Podium columns are a fixed 130px each on desktop (~390px) — let them
     share the row instead of forcing horizontal overflow. */
  .podium {
    gap: 8px;
  }
  .podium-col {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
  .podium-name {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  /* Detail toolbars (weekly test / assignment marking): flex-wrap alone
     squeezed the flex:1 title into an unreadable few-px-wide, many-line-tall
     column once the buttons ran out of room. Stack instead — title gets its
     own full-width line, the buttons wrap into a row underneath. */
  .asg-detail-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .asg-detail-title {
    flex: none;
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .stats,
  .stats.three {
    grid-template-columns: 1fr;
  }
  .lecture-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .topnav {
    padding: 0 12px;
    gap: 8px;
  }
  .topnav-right {
    gap: 6px;
    min-width: 0;
  }
  .topnav .icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .topnav .divider-v {
    display: none;
  }
  .user-chip {
    padding: 4px;
  }
  .cohort-bar {
    padding: 8px 12px;
  }
  .pill {
    padding: 7px 12px;
    font-size: 12.5px;
  }
  .layout {
    padding: 14px 12px 32px;
  }
  .panel {
    padding: 16px 14px;
  }
  .sub-table tr {
    padding: 4px 10px;
  }
}

/* ==========================================================================
   Notifications — student topnav bell + unread-announcements panel
   ========================================================================== */

.icon-btn .badge[hidden] {
  display: none;
}

#notifBadge {
  width: auto;
  min-width: 17px;
  padding: 0 3px;
  border-radius: 999px;
}

.notif-panel {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 460px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 150;
}

.notif-panel[hidden] {
  display: none;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.notif-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}

.notif-item + .notif-item {
  margin-top: 2px;
}

.notif-item.unread {
  background: var(--red-blush-soft);
  border-left-color: var(--red);
}

.notif-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.notif-item.tag-action .ann-tag {
  background: var(--red-blush);
  color: var(--ink-red);
}

.notif-item.tag-info .ann-tag {
  background: var(--surface-2);
  color: var(--gray);
}

.notif-date {
  font-size: 11px;
  color: var(--gray-soft);
}

.notif-item strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.notif-item p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-empty {
  padding: 18px 12px;
  font-size: 12.5px;
  color: var(--gray);
  text-align: center;
}

.notif-foot {
  display: block;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-red);
  text-align: center;
  text-decoration: none;
}

.notif-foot:hover {
  background: var(--surface-2);
}

@media (max-width: 640px) {
  .notif-panel {
    right: 16px;
  }
}

/* ==========================================================================
   Monthly PDF report — Student Report panel + the exported document.
   The .mr-pdf document deliberately uses fixed light hex values, not theme
   tokens: it's rendered to a PDF, which must stay white-on-paper even when
   the portal is in dark mode.
   ========================================================================== */

.mr-form {
  max-width: 560px;
}

.mr-form select {
  max-width: 260px;
}

.mr-summary {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--gray);
}

.mr-summary:empty {
  display: none;
}

.mr-pdf-host {
  position: fixed;
  left: -10000px;
  top: 0;
  pointer-events: none;
}

.mr-pdf {
  width: 720px;
  padding: 4px 6px;
  background: #ffffff;
  color: #1A1A1A;
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}

.mr-pdf h3,
.mr-pdf h4 {
  font-family: "Poppins", Arial, sans-serif;
  color: #1A1A1A;
  margin: 0;
}

.mr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 3px solid #C8202C;
}

.mr-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.mr-brand {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mr-brand strong {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #C8202C;
}

.mr-brand span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #3C9A44;
}

.mr-period {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
}

.mr-id {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0;
  padding: 12px 14px;
  background: #FDF3F4;
  border: 1px solid #EFCED1;
  border-radius: 8px;
}

.mr-id span,
.mr-card-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6B7280;
}

.mr-id strong {
  font-size: 12.5px;
}

.mr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.mr-card {
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-top: 3px solid #C8202C;
  border-radius: 8px;
}

.mr-card-value {
  display: block;
  margin: 4px 0 2px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.mr-card-sub {
  font-size: 10.5px;
  color: #6B7280;
}

.mr-trend-up { color: #2E7D36; }
.mr-trend-same { color: #1A1A1A; }
.mr-trend-down { color: #971822; }

.mr-section {
  margin-bottom: 12px;
}

.mr-section h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.mr-chart-img {
  display: block;
  width: 680px;
  max-width: 100%;
}

.mr-group {
  font-size: 12px;
  margin: 10px 0 6px;
  color: #971822;
}

.mr-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11.5px;
}

.mr-table th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6B7280;
  padding: 6px 8px;
  border-bottom: 2px solid #E5E7EB;
}

.mr-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #F1EFEF;
  vertical-align: top;
}

.mr-table td:nth-child(n+2),
.mr-table th:nth-child(n+2) {
  white-space: nowrap;
}

.mr-type {
  display: block;
  font-size: 10px;
  color: #6B7280;
}

.mr-band {
  display: inline-block;
  min-width: 28px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  background: #E7F5E8;
  color: #2E7D36;
}

.mr-band.mid {
  background: #F3F1F1;
  color: #1A1A1A;
}

.mr-band.risk {
  background: #FBE7E9;
  color: #971822;
}

.mr-empty {
  margin: 0;
  color: #6B7280;
  font-style: italic;
}

.mr-remarks {
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-left: 3px solid #3C9A44;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.mr-sign {
  margin: 8px 0 0;
  text-align: right;
  font-weight: 600;
}

.mr-foot {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #E5E7EB;
  font-size: 9.5px;
  color: #9CA3AF;
  text-align: center;
}

/* ==========================================================================
   Theme toggle + dark-mode component overrides
   (kept at the end so these win by source order over the base rules)
   ========================================================================== */

/* Smooth fade when switching themes — only the large surfaces, so small
   controls stay snappy. Suppressed for reduced-motion users above. */
body,
.topnav,
.cohort-bar,
.sidebar,
.panel,
.stat-card,
.note-card,
.asg-card,
.lecture-card,
.welcome-banner {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Sun/moon swap: light mode shows the moon (tap to go dark), dark shows the sun. */
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .ic-sun {
  display: none;
}

.theme-toggle .ic-moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .ic-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .ic-sun {
  display: block;
}

.theme-toggle.floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Dark theme refinement — dark-only; light mode is untouched.
   The tokens in the :root[data-theme="dark"] block at the top do most of the
   work. These rules cover where a token swap alone gives the wrong result:
   the chrome layers, nav states, red that was doing too many jobs, form
   controls and status badges. Two rules of thumb keep the red a deliberate
   accent: primary actions are the only solid-red controls, and red TEXT or
   glyphs use --ink-red (readable), never the fill red.
   ========================================================================== */

:root[data-theme="dark"] {
  scrollbar-color: var(--border-strong) transparent;
}

:root[data-theme="dark"] :focus-visible {
  outline-color: var(--brand-primary);
}

/* :where() keeps this at the lowest specificity so a component's own accent
   (e.g. the green course checkboxes) still wins. */
:root[data-theme="dark"] :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--brand-primary);
}

/* -- Chrome: header + cohort bar are one quiet layer above the page ------- */

:root[data-theme="dark"] .topnav {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-soft);
}

:root[data-theme="dark"] .cohort-bar {
  background: var(--bg-header);
  border-bottom: 1px solid var(--gray-light);
}

:root[data-theme="dark"] .brand-text small {
  color: var(--ink-red);
}

:root[data-theme="dark"] .icon-btn {
  background: transparent;
  border-color: var(--gray-light);
  color: var(--gray);
}

:root[data-theme="dark"] .icon-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--ink);
}

:root[data-theme="dark"] .icon-btn .badge {
  border-color: var(--bg-header);
}

:root[data-theme="dark"] .theme-toggle.floating {
  background: var(--surface);
}

:root[data-theme="dark"] .user-chip:hover {
  background: var(--bg-hover);
}

/* Cohort pills: the active one is a red-tinted pill with a dot, not a solid
   red block — recognisable without the dot's colour, and not shouting. */
:root[data-theme="dark"] .pill {
  background: transparent;
  border-color: var(--gray-light);
  color: var(--gray);
}

:root[data-theme="dark"] .pill:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

:root[data-theme="dark"] .pill.active {
  background: var(--red-blush);
  border-color: var(--red-blush-line);
  color: var(--ink);
  box-shadow: none;
}

:root[data-theme="dark"] .pill.active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* -- Sidebar --------------------------------------------------------------- */

:root[data-theme="dark"] .sidebar {
  background: var(--bg-sidebar);
  border-color: var(--border-soft);
}

:root[data-theme="dark"] .snav-item {
  color: var(--gray);
}

:root[data-theme="dark"] .snav-item svg {
  opacity: 1;
  color: var(--gray-soft);
}

:root[data-theme="dark"] .snav-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

:root[data-theme="dark"] .snav-item:hover svg {
  color: var(--gray);
}

:root[data-theme="dark"] .snav-item.active {
  background: var(--red-blush);
  color: var(--ink);
}

:root[data-theme="dark"] .snav-item.active svg {
  color: var(--ink-red);
}

:root[data-theme="dark"] .snav-item.active::before {
  background: var(--brand-primary);
}

:root[data-theme="dark"] .snav-item.logout:hover {
  background: var(--red-blush);
  color: var(--ink-red);
}

:root[data-theme="dark"] .snav-sep {
  background: var(--border-soft);
}

/* -- Red as text/glyph: --red is a fill colour now, so every place that used
      it to colour text or an icon points at --ink-red instead ------------- */

:root[data-theme="dark"] :is(
  .stat-icon, .file-chip, .mc-item-icon, .subject-glyph, .ch-idx, .pr-section-num,
  .jump, .auth-forgot, .mc-tab.active, .pr-tab.active, .pr-crumb:not(.current), .pr-yours summary, .attn-pending.zero .attn-icon,
  .attn-nudge .attn-icon, .ch-item.open .ch-chev,
  .sub-ch-item.open > .sub-ch-row .ch-chev
) {
  color: var(--ink-red);
}

:root[data-theme="dark"] :is(
  .mc-ico.danger:hover, .report-back:hover, .student-cell-link:hover
) {
  color: var(--ink-red);
}

/* -- Cards ----------------------------------------------------------------- */

:root[data-theme="dark"] .stat-card:hover {
  box-shadow: none;
  border-color: var(--border-strong);
}

:root[data-theme="dark"] .stat-card::before {
  background: var(--red-blush-line);
}

/* Attention banners: a tinted surface rather than a solid red gradient slab. */
:root[data-theme="dark"] .attn-pending:not(.zero) {
  background: var(--red-blush);
  box-shadow: inset 0 0 0 1px var(--red-blush-line);
}

:root[data-theme="dark"] .attn-nudge:hover {
  box-shadow: none;
}

:root[data-theme="dark"] .upload-item:hover {
  background: var(--surface-2);
}

/* Cards that sit inside a panel step up a surface so they don't melt into it.
   Subject tags and file-kind icons are metadata, not accents — neutral. */
:root[data-theme="dark"] .res-card {
  background: var(--surface-2);
  border-color: var(--gray-light);
}

:root[data-theme="dark"] .res-card:hover {
  border-color: var(--border-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .res-tag {
  background: var(--bg-hover);
  color: var(--gray);
}

:root[data-theme="dark"] .res-kind {
  color: var(--gray-soft);
}

/* -- Buttons: one solid-red action per view; everything else is neutral ---- */

:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-download:hover {
  box-shadow: none;
}

:root[data-theme="dark"] .btn-primary:active {
  background: var(--red-pressed);
}

:root[data-theme="dark"] .btn-outline {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--ink);
}

:root[data-theme="dark"] .btn-outline:hover {
  background: var(--bg-hover);
  border-color: var(--red-blush-line);
  color: var(--ink);
}

/* Active filter chips match the active nav item and cohort pill: tinted
   surface + red border, neutral label. */
:root[data-theme="dark"] .mc-subj.active {
  color: var(--ink);
}

:root[data-theme="dark"] .mc-subj:hover {
  background: var(--bg-hover);
}

:root[data-theme="dark"] .mc-subj.active:hover {
  background: var(--red-blush);
}

/* A column of identical per-row Save/Update buttons would be a wall of solid
   red, so inside tables they take the restrained tint; page-level primary
   actions (Upload Content, Post, Add Student…) keep the solid fill. */
:root[data-theme="dark"] .sub-table .btn-primary {
  background: var(--red-blush);
  box-shadow: inset 0 0 0 1px var(--red-blush-line);
  color: var(--ink-red);
}

:root[data-theme="dark"] .sub-table .btn-primary:hover {
  background: var(--red);
  box-shadow: none;
  color: #fff;
}

:root[data-theme="dark"] .sub-table .btn-primary:active {
  background: var(--red-pressed);
}

/* Destructive stays recognisable (soft red label) without a red fill. */
:root[data-theme="dark"] .btn-outline.asg-delete,
:root[data-theme="dark"] .btn-outline.roster-remove {
  color: var(--danger);
}

:root[data-theme="dark"] .btn-outline.asg-delete:hover,
:root[data-theme="dark"] .btn-outline.roster-remove:hover {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* -- Form controls --------------------------------------------------------- */

:root[data-theme="dark"] input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: var(--input-bg);
  color: var(--ink);
  border-color: var(--border-control);
}

:root[data-theme="dark"] input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]):focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.28);
  outline: none;
}

:root[data-theme="dark"] ::placeholder {
  color: var(--gray-soft);
  opacity: 1;
}

:root[data-theme="dark"] :is(input, select, textarea):disabled {
  color: var(--gray-disabled);
  border-color: var(--gray-light);
  cursor: not-allowed;
}

:root[data-theme="dark"] input[type="file"] {
  color: var(--gray);
}

:root[data-theme="dark"] input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

:root[data-theme="dark"] input[type="file"]::file-selector-button:hover {
  background: var(--bg-hover);
}

/* -- Tables and status badges --------------------------------------------- */

:root[data-theme="dark"] .sub-table th {
  color: var(--gray-soft);
  border-bottom-color: var(--border-strong);
}

:root[data-theme="dark"] .avatar-initials.sm {
  background: var(--surface-2);
  color: var(--gray);
  box-shadow: inset 0 0 0 1px var(--gray-light);
}

:root[data-theme="dark"] .status-pill.muted {
  background: var(--bg-hover);
  color: var(--gray);
}

:root[data-theme="dark"] .status-pill.ontime {
  background: var(--success-bg);
  color: var(--success);
}

:root[data-theme="dark"] .status-pill.late {
  background: var(--warning-bg);
  color: var(--warning);
}

:root[data-theme="dark"] .auth-error {
  background: var(--danger-bg);
  color: var(--danger);
}

:root[data-theme="dark"] .auth-error.auth-success {
  background: var(--success-bg);
  color: var(--success);
}

/* -- Overlays: modals, popovers, toasts sit one step above the cards ------- */

:root[data-theme="dark"] .modal-overlay {
  background: rgba(5, 7, 10, 0.66);
}

:root[data-theme="dark"] .modal-card {
  background: var(--surface-2);
  border: 1px solid var(--gray-light);
}

:root[data-theme="dark"] .preview-picker,
:root[data-theme="dark"] .notif-panel,
:root[data-theme="dark"] .toast {
  background: var(--surface-2);
}

:root[data-theme="dark"] .preview-picker-row:hover {
  background: var(--bg-hover);
}

/* The first-place shine sweep is a white 45% streak — far too bright on dark. */
:root[data-theme="dark"] .podium-col.first .podium-bar::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
}

/* Decorative tints that were hardcoded light — restated for dark so they
   don't glow. */
:root[data-theme="dark"] .gateway-body {
  background: linear-gradient(165deg, #241216, var(--bg) 55%);
}

:root[data-theme="dark"] .welcome-banner {
  background: linear-gradient(120deg, #5C2230 0%, #3B1F29 100%);
  box-shadow: inset 0 0 0 1px var(--red-blush-line);
}

:root[data-theme="dark"] .lec-thumb {
  background: linear-gradient(145deg, var(--red-blush) 0%, var(--red-blush-soft) 100%);
}

:root[data-theme="dark"] .wt-paper:hover {
  background: linear-gradient(115deg, var(--green-light), #223029 82%);
}