/* styles.css */
:root {
  --bg: #0b0f17;
  --panel: #111827;
  --border: #243244;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --danger: #ef4444;
  --ok: #22c55e;
  --btn: #1f2937;
  --btnHover: #273449;
  --focus: #60a5fa;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --btnText: var(--text);
  --primaryBg: rgba(96,165,250,.18);
  --primaryBorder: rgba(96,165,250,.35);
  --primaryText: var(--text);
  --primaryHoverBg: rgba(96,165,250,.26);
  --accentBg: rgba(34,197,94,.16);
  --accentBorder: rgba(34,197,94,.28);
  --accentText: var(--text);
  --accentHoverBg: rgba(34,197,94,.24);
  --bgGlow1: rgba(59,130,246,.22);
  --bgGlow2: rgba(34,197,94,.16);

  /* Common translucent surfaces */
  --panelA: rgba(17,24,39,.92);
  --panelB: rgba(17,24,39,.74);
  --surface: rgba(2,6,23,.35);
  --surface2: rgba(2,6,23,.18);
  --borderA: rgba(36,50,68,.95);
  --borderB: rgba(36,50,68,.85);
  --inputBg: rgba(2,6,23,.55);

  /* Interaction */
  --hoverBg: rgba(255,255,255,.03);
  --glassBg: rgba(255,255,255,.01);
  --rowActiveBg: rgba(96,165,250,.06);

  /* Status + accents (used by pills/status chips) */
  --infoBorder: rgba(96,165,250,.45);
  --infoBg: rgba(96,165,250,.10);
  --infoHoverBg: rgba(96,165,250,.18);
  --infoText: rgba(191,219,254,.95);

  --warnBorder: rgba(250,204,21,.35);
  --warnBg: rgba(250,204,21,.08);
  --warnText: rgba(254,249,195,.95);

  --successBorder: rgba(34,197,94,.45);
  --successBg: rgba(34,197,94,.08);
  --successText: rgba(187,247,208,.95);

  --dangerBorder: rgba(239,68,68,.45);
  --dangerBg: rgba(239,68,68,.08);
  --dangerText: rgba(254,202,202,.95);

  --disabledBorder: rgba(148,163,184,.35);
  --disabledBg: rgba(148,163,184,.08);
  --disabledText: rgba(148,163,184,.95);

  /* Switch */
  --switchBg: rgba(36,50,68,.85);
  --switchBorder: rgba(36,50,68,.95);
  --switchKnob: rgba(229,231,235,.95);
  --switchOnBg: rgba(34,197,94,.22);
  --switchOnBorder: rgba(34,197,94,.35);

  /* Scrollbars */
  --scrollTrack: transparent;
  --scrollThumbTop: rgba(96,165,250,.42);
  --scrollThumb: rgba(148,163,184,.35);
  --scrollThumbHover: rgba(148,163,184,.55);
  --scrollThumbActive: rgba(96,165,250,.62);
}

:root[data-theme="light"] {
  --bg: #f8fafc;
  --panel: #ffffff;
  --border: #cbd5e1;
  --text: #0f172a;
  --muted: #475569;
  --danger: #dc2626;
  --ok: #16a34a;
  --btn: #0f172a;
  --btnHover: #111827;
  --focus: #2563eb;
  --shadow: 0 12px 30px rgba(2,6,23,.12);
  --bgGlow1: rgba(37,99,235,.16);
  --bgGlow2: rgba(22,163,74,.12);
  --panelA: rgba(255,255,255,.96);
  --panelB: rgba(255,255,255,.88);
  --surface: rgba(15,23,42,.05);
  --surface2: rgba(15,23,42,.03);
  --borderA: rgba(203,213,225,.95);
  --borderB: rgba(203,213,225,.75);
  --inputBg: rgba(255,255,255,.92);
  --primaryBg: var(--focus);
  --primaryBorder: rgba(37,99,235,.9);
  --primaryText: #ffffff;
  --primaryHoverBg: rgba(29,78,216,.95);
  --accentBg: rgba(22,163,74,.92);
  --accentBorder: rgba(22,163,74,.92);
  --accentText: #ffffff;
  --accentHoverBg: rgba(21,128,61,.95);

  /* Interaction */
  --hoverBg: rgba(15,23,42,.04);
  --glassBg: rgba(15,23,42,.02);
  --rowActiveBg: rgba(37,99,235,.08);

  /* Status + accents */
  --infoBorder: rgba(37,99,235,.35);
  --infoBg: rgba(37,99,235,.10);
  --infoHoverBg: rgba(37,99,235,.14);
  --infoText: #1d4ed8;

  --warnBorder: rgba(217,119,6,.45);
  --warnBg: rgba(217,119,6,.10);
  --warnText: #92400e;

  --successBorder: rgba(22,163,74,.40);
  --successBg: rgba(22,163,74,.10);
  --successText: #166534;

  --dangerBorder: rgba(220,38,38,.45);
  --dangerBg: rgba(220,38,38,.10);
  --dangerText: #991b1b;

  --disabledBorder: rgba(100,116,139,.45);
  --disabledBg: rgba(100,116,139,.10);
  --disabledText: #475569;

  /* Switch */
  --switchBg: rgba(203,213,225,.9);
  --switchBorder: rgba(203,213,225,.95);
  --switchKnob: rgba(255,255,255,.98);
  --switchOnBg: rgba(22,163,74,.16);
  --switchOnBorder: rgba(22,163,74,.35);

  /* Scrollbars */
  --scrollTrack: transparent;
  --scrollThumbTop: rgba(37,99,235,.28);
  --scrollThumb: rgba(15,23,42,.22);
  --scrollThumbHover: rgba(15,23,42,.35);
  --scrollThumbActive: rgba(37,99,235,.42);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* Modern, subtle scrollbars (Chrome/Safari + Firefox). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollThumb) var(--scrollTrack);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scrollTrack); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollThumbTop), var(--scrollThumb));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scrollThumbTop), var(--scrollThumbHover));
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--scrollThumbActive), var(--scrollThumbHover));
  background-clip: content-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 30% 10%, var(--bgGlow1), transparent 60%),
              radial-gradient(1000px 500px at 80% 30%, var(--bgGlow2), transparent 55%),
              var(--bg);
  /* Keep the "atmosphere" stable while scrolling long pages. */
  background-attachment: fixed;
  color: var(--text);
}

/* ------------------------------------------------------------------------- */
/* Marketing homepage (index.html) — dark-premium with subtle motion */
body.home {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: radial-gradient(1200px 600px at 18% 5%, rgba(217,185,99,.14), transparent 55%),
              radial-gradient(900px 480px at 82% 18%, rgba(96,165,250,.12), transparent 60%),
              var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

.home-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--borderB);
  background: var(--panelA);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.home-header .logo {
  background: linear-gradient(135deg, rgba(217,185,99,.92), rgba(96,165,250,.82));
}

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

.home-title {
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;
}

.home-tagline {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.home-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.home-nav .btn {
  padding: 9px 12px;
  font-size: 12px;
  border-radius: 12px;
}

.nav-inline {
  display: none;
  align-items: center;
  gap: 10px;
}

.nav-dropdown {
  position: relative;
}

.nav-trigger {
  list-style: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--borderA);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.nav-trigger::-webkit-details-marker { display: none; }

.nav-icon {
  width: 18px;
  height: 18px;
  color: #0f172a;
  transition: transform .18s ease;
}

.nav-dropdown[open] .nav-icon { transform: rotate(180deg); }

.nav-panel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 22px 14px 32px;
}

.home-container {
  width: min(1100px, 100%);
  display: grid;
  gap: 20px;
}

.glass {
  border: 1px solid var(--borderB);
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01))
              , var(--panelA);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}

.home-hero-text h1 {
  margin: 12px 0 14px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .1px;
}

.home-hero-text .lead {
  font-size: 13px;
  line-height: 1.55;
  max-width: 54ch;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-badges .pill {
  flex: 1 1 180px;
  justify-content: center;
  text-align: center;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}

.stat-card {
  border: 1px solid var(--borderA);
  border-radius: 14px;
  background: var(--surface2);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.stat-title {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-value {
  font-weight: 800;
  font-size: 14px;
}

.stat-note {
  font-size: 11px;
  color: var(--muted);
}

.section-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

body.home h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: .2px;
}

.home-section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.who-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.who-card {
  border: 1px solid var(--borderA);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(2,6,23,.18));
  padding: 16px;
  display: grid;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.who-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(180px 120px at 80% 0%, rgba(217,185,99,.18), transparent 60%);
  opacity: .6;
  pointer-events: none;
}

.who-top,
.who-meta,
.who-card p,
.who-card .btn {
  position: relative;
  z-index: 1;
}

.who-top {
  display: grid;
  gap: 6px;
}

.who-icon {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.who-title {
  font-weight: 800;
  font-size: 15px;
}


.pill-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.glow { animation: glowPulse 3.6s ease-in-out infinite; }

.home-hero-panel .panel-card {
  border: 1px solid var(--borderA);
  background: var(--surface);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.panel-title {
  font-weight: 820;
  letter-spacing: .18px;
  margin-bottom: 8px;
}

.panel-list {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.panel-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface2);
  font-size: 12px;
  color: var(--muted);
}

.home-section {
  border: 1px solid var(--borderB);
  background: var(--panelA);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.home-grid.trio {
  grid-template-columns: 1fr;
}

.home-card {
  border: 1px solid var(--borderA);
  border-radius: 14px;
  background: var(--surface2);
  padding: 14px;
  display: grid;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.home-card:hover {
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.38);
  background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(2,6,23,.18));
}

.home-card-title {
  font-weight: 820;
  letter-spacing: .2px;
}

.home-cred {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

.promise-card,
.measure-card {
  border: 1px solid var(--borderA);
  background: var(--surface2);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.promise-copy {
  display: grid;
  gap: 10px;
}

.promise-stats {
  display: grid;
  gap: 10px;
}

.promise-chip {
  border: 1px solid var(--borderA);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(2,6,23,.22);
  display: grid;
  gap: 4px;
}

.promise-chip .label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.promise-chip .value {
  font-weight: 800;
  font-size: 13px;
}

.promise-chart {
  border: 0;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(2,6,23,.26), rgba(2,6,23,.12));
  display: grid;
  gap: 10px;
  position: relative;
}

.chart-title {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.promise-chart svg {
  width: 100%;
  height: auto;
}

.chart-grid {
  stroke: rgba(148,163,184,.2);
  stroke-width: 1;
  fill: none;
}

.chart-line {
  fill: none;
  stroke-width: 2.5;
}

.chart-line.assist { stroke: url(#masteryStroke); }
.chart-line.base { stroke: rgba(148,163,184,.5); stroke-dasharray: 4 4; }

.chart-area { fill: url(#masteryFill); }

.chart-dots circle {
  fill: rgba(217,185,99,.95);
}

.chart-point {
  cursor: pointer;
  transition: r .15s ease;
}

.chart-point:hover { r: 6; }

.chart-axis {
  font-size: 10px;
  fill: rgba(148,163,184,.8);
}

.chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.legend-dot.assist { background: rgba(217,185,99,.95); }
.legend-dot.base { background: rgba(148,163,184,.6); }

.chart-footnote {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  border-top: 1px dashed rgba(148,163,184,.25);
  padding-top: 8px;
}

.chart-tooltip {
  position: absolute;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--borderA);
  background: var(--panelA);
  color: var(--text);
  font-size: 11px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: var(--shadow);
  z-index: 5;
}

.measure-title {
  font-weight: 800;
  letter-spacing: .2px;
}

.measure-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 12px;
}

.measure-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--text);
}

.measure-list .muted {
  color: var(--muted);
  font-size: 11px;
}

.measure-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-footer {
  margin-top: auto;
  border-top: 1px solid var(--borderB);
  padding: 14px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  flex-direction: column;
}

.home-footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 720px) {
  .home-main { padding: 28px 18px 36px; }
  .home-container { gap: 24px; }
  .home-header { padding: 18px 22px; }
  .home-brand { flex-direction: row; align-items: center; gap: 12px; }
  .hero-visual { min-height: 400px; }
}

@media (min-width: 690px) {
  .home-header { grid-template-columns: 1fr auto; }
  .home-nav { justify-content: end; }
  .nav-inline { display: flex; }
  .nav-dropdown { display: none; }
  .home-nav .btn { width: auto; }
  .home-footer { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 900px) {
  .home-cred { grid-template-columns: 1fr; }
  .promise-card {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
  }
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .home-hero { grid-template-columns: 1.05fr .95fr; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-cred { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-container { gap: 28px; }
}

/* Hero visual animation */
.hero-visual {
  position: relative;
  min-height: 380px;
  border-radius: 18px;
  border: 1px solid var(--borderA);
  background: radial-gradient(600px 380px at 40% 30%, rgba(217,185,99,.14), transparent 70%),
              radial-gradient(520px 340px at 80% 70%, rgba(96,165,250,.16), transparent 70%),
              var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.blob {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(36px);
  opacity: .36;
  animation: blobFloat 14s ease-in-out infinite;
}

.blob-a { background: #d9b963; top: -80px; left: -60px; animation-delay: 0s; }
.blob-b { background: #60a5fa; bottom: -120px; right: -80px; animation-delay: -5s; }

.practice-shell {
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  border: 1px solid var(--borderA);
  background: linear-gradient(180deg, rgba(17,24,39,.96), rgba(17,24,39,.88));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  z-index: 2;
}

.practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.practice-title {
  display: grid;
  gap: 6px;
}

.practice-meta {
  font-size: 11px;
  color: var(--muted);
}

.practice-score {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--infoBorder);
  background: var(--infoBg);
  color: var(--infoText);
  font-size: 11px;
  font-weight: 700;
}

.practice-body {
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: auto;
  padding-right: 4px;
}

.practice-question {
  border: 1px solid var(--borderA);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface2);
}

.question-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.question-text {
  font-weight: 700;
  font-size: 15px;
}

.practice-answers {
  display: grid;
  gap: 8px;
}

.answer-chip {
  text-align: left;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--borderA);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  user-select: none;
}

.answer-chip.correct {
  border-color: var(--successBorder);
  background: rgba(34,197,94,.12);
  color: var(--successText);
  animation: answerPulse 4.2s ease-in-out infinite;
}

.practice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.practice-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.practice-step {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
}

@media (max-width: 689px) {
  .hero-visual { min-height: 440px; }
  .practice-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .practice-step { align-self: flex-start; }
  .answer-chip { font-size: 12px; padding: 9px 10px; }
  .home-header { padding: 14px 14px; gap: 12px; }
  .home-brand { flex-direction: row; align-items: center; gap: 10px; }
  .home-tagline { display: none; }
  .home-nav { width: auto; }
  .nav-dropdown { width: auto; }
  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 0;
  }
  .nav-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(220px, 90vw);
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--borderA);
    background: var(--panelA);
    box-shadow: var(--shadow);
    z-index: 20;
  }
  .nav-dropdown:not([open]) > .nav-panel { display: none; }
  .nav-panel .btn {
    width: 100%;
    justify-content: center;
    padding: 9px 10px;
    font-size: 12px;
  }

  .auth-tagline { display: none; }
  .auth-nav { width: 100%; }
  .auth-nav .btn {
    width: 100%;
    justify-content: center;
  }
}

.pill.soft {
  background: var(--surface2);
  border-color: var(--borderB);
}

@keyframes blobFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(20px, -20px, 0) scale(1.08); }
}

@keyframes answerPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(96,165,250,0); }
  50% { transform: translateY(-1px); box-shadow: 0 0 18px rgba(96,165,250,.28); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(217,185,99,.0); }
  50% { box-shadow: 0 0 24px rgba(217,185,99,.25); }
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .glow,
  .hero-options .chip.filled {
    animation: none !important;
  }
}

a { color: var(--focus); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.card {
  width: 100%;
  max-width: 860px;
  background: var(--panelA);
  border: 1px solid var(--borderB);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.header {
  padding: 22px 22px 10px;
  border-bottom: 1px solid var(--borderB);
}

.header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
}

.header p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 13px;
}

.content {
  padding: 18px 22px 22px;
}

.grid {
  display: grid;
  gap: 14px;
}

.grid.two {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--inputBg);
  color: var(--text);
  outline: none;
}

/* Extra breathing room for the sign-in form fields */
.login-card form {
  padding: 0 10px 12px;
}

.login-tools {
  margin-top: 10px;
  justify-content: space-between;
  gap: 10px;
}

.inline-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.inline-toggle input {
  width: auto;
  margin: 0;
}

.link-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--focus);
  padding: 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.link-btn:hover { text-decoration: underline; }

/* Simple modal for password reset */
.modal[hidden] { display: none !important; }

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 50;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.modal-card {
  position: relative;
  width: min(720px, calc(100% - 24px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--panelA);
  border: 1px solid var(--borderB);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.modal-card.review-modal {
  width: min(920px, calc(100% - 24px));
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--borderB);
}

.modal-header h2 {
  margin: 6px 0 0;
  font-size: 18px;
  letter-spacing: .2px;
}

.modal-body {
  padding: 14px 18px 18px;
}

/* Moderator review modal layout */
.review-layout {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}

.review-side {
  display: grid;
  gap: 10px;
}

.review-kv {
  border: 1px solid var(--borderA);
  background: var(--surface);
  border-radius: 14px;
  padding: 10px 12px;
}

.review-val {
  margin-top: 6px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 12px;
}

.review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Keep decision textareas usable inside the right rail. */
.review-side textarea {
  min-height: 72px;
  resize: vertical;
}

.modal .icon-button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.modal .icon-button:hover { background: var(--hoverBg); }

textarea { min-height: 92px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: rgba(96,165,250,.85);
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 3px;
}

#coursesPageMeta{
  padding-top: 4px;
}

.stack {
  display: grid;
  gap: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--btn);
  border: 1px solid var(--borderA);
  color: var(--btnText);
  cursor: pointer;
  font-weight: 600;
}

.btn:hover { background: var(--btnHover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn.small {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 10px;
}

.btn.primary {
  background: var(--primaryBg);
  border-color: var(--primaryBorder);
  color: var(--primaryText);
}
.btn.primary:hover { background: var(--primaryHoverBg); }

.btn.ghost {
  background: transparent;
  border-color: var(--borderA);
}
.btn.ghost:hover { background: var(--hoverBg); }

.btn.accent {
  background: var(--accentBg);
  border-color: var(--accentBorder);
  color: var(--accentText);
}
.btn.accent:hover { background: var(--accentHoverBg); }

.btn.toggle-active {
  background: var(--infoBg);
  border-color: var(--infoBorder);
  color: var(--infoText);
  font-weight: 800;
}

.btn.toggle-active:hover {
  background: var(--infoHoverBg);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}

/* Compact pill variants for table badges (scope/assignment). */
.pill.small {
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
}

.pill.in-scope {
  border-color: rgba(34, 197, 94, .40);
  color: rgba(187, 247, 208, .95);
  background: rgba(34, 197, 94, .08);
}

.pill.out-scope {
  border-color: rgba(239, 68, 68, .45);
  color: rgba(254, 202, 202, .95);
  background: rgba(239, 68, 68, .08);
}

.pill.assigned {
  border-color: var(--infoBorder);
  color: var(--infoText);
  background: var(--infoBg);
}

.pill.unassigned {
  border-color: var(--warnBorder);
  color: var(--warnText);
  background: var(--warnBg);
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--borderB);
  background: var(--surface);
}

.segmented .btn {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}

/* Authoring: question editor option rows */
.options-list {
  display: grid;
  gap: 10px;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--borderA);
  background: var(--surface2);
}

.option-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.option-letter {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  border: 1px solid var(--infoBorder);
  background: var(--infoBg);
  color: var(--infoText);
  flex: 0 0 auto;
}

.option-row input {
  flex: 1;
  min-width: 0;
}

.option-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------------- */
/* Rich text editor (math-ish authoring) */
/* ------------------------------------------------------------------------- */

.rt-wrap {
  border: 1px solid var(--borderA);
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}

.rt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--borderB);
  background: var(--glassBg);
}

.rt-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rt-btn {
  width: 38px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface2);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

.rt-btn:hover { background: var(--hoverBg); }

.rt-select {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  outline: none;
  max-width: 220px;
}

.rt-editor {
  padding: 11px 12px;
  min-height: 140px;
  max-height: 360px;
  overflow: auto;
  outline: none;
  color: var(--text);
  line-height: 1.55;
}

.rt-editor:focus {
  box-shadow: 0 0 0 3px rgba(96,165,250,.18) inset;
}

.rt-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--muted);
}

/* ------------------------------------------------------------------------- */
/* Searchable dropdown (combobox) */
/* ------------------------------------------------------------------------- */

.combo {
  position: relative;
}

.combo-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--inputBg);
  color: var(--text);
  cursor: pointer;
}

.combo-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.combo-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.combo-caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: var(--muted);
}

.combo-pop[hidden] { display: none !important; }

.combo-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  border: 1px solid var(--borderA);
  background: var(--panelA);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.combo-search {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--borderB);
  background: var(--surface2);
  color: var(--text);
  outline: none;
}

.combo-list {
  max-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.combo-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-top: 1px solid var(--borderB);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.combo-item:hover { background: var(--hoverBg); }

.combo-empty {
  padding: 12px 12px;
  color: var(--muted);
  font-size: 12px;
}

.notice {
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.notice.ok { border-color: var(--successBorder); color: var(--successText); background: var(--successBg); }
.notice.err { border-color: var(--dangerBorder); color: var(--dangerText); background: var(--dangerBg); }

.small {
  font-size: 12px;
  color: var(--muted);
}

/* Modern toast notifications (fixed, no layout impact) */
.toast-host {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
}

.toast {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--borderA);
  background: var(--panelA);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  animation: toast-in 180ms ease-out;
}

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

.toast-msg {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}

.toast.ok { border-color: rgba(34,197,94,.45); }
.toast.err { border-color: rgba(239,68,68,.45); }

.toast-close {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.toast-close:hover { background: var(--hoverBg); }

.is-hidden { display: none !important; }

hr.sep {
  border: none;
  border-top: 1px solid var(--borderB);
  margin: 14px 0;
}

.checklist {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--borderA);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px;
}

.check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 6px;
  border-radius: 10px;
}

.check-item:hover { background: var(--hoverBg); }
.check-item input { width: auto; margin-top: 2px; }

.footer {
  padding: 14px 22px;
  border-top: 1px solid var(--borderB);
  color: var(--muted);
  font-size: 12px;
}

.auth-footer {
  margin-top: auto;
  border-top: 1px solid var(--borderB);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  flex-wrap: wrap;
}

.auth-footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------------------------- */
/* Sign-in page layout (desktop-first, but tolerates resize) */
/* ------------------------------------------------------------------------- */

body.auth-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--borderB);
  background: var(--panelA);
  flex-wrap: wrap;
}

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

.auth-tagline {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.auth-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-nav .btn {
  padding: 9px 12px;
  font-size: 12px;
  border-radius: 12px;
}

.shell {
  min-height: 100%;
  display: grid;
  gap: 22px;
  align-content: center;
  justify-items: center;
  padding: 34px 20px 44px;
}

body.auth-page .shell {
  flex: 1;
  min-height: auto;
}

.auth-page .container {
  flex: 1;
  width: 100%;
}

.brand {
  width: min(860px, 100%);
  display: flex;
  gap: 14px;
  align-items: center;
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(135deg, rgba(96,165,250,.9), rgba(34,197,94,.75));
  border: 1px solid var(--borderA);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

h1 {
  margin: 6px 0 0;
  font-size: 28px;
  letter-spacing: .2px;
}

.lead {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.callout {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--borderA);
  background: radial-gradient(900px 240px at 10% 0%, rgba(96,165,250,.16), transparent 65%),
              radial-gradient(700px 220px at 90% 60%, rgba(34,197,94,.12), transparent 62%),
              var(--surface);
  margin-bottom: 16px;
}

.callout-title {
  margin-top: 6px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;
}

.callout-text {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------------- */
/* Admin dashboard (desktop only) */
/* ------------------------------------------------------------------------- */

body.dashboard {
  min-width: 920px;
}

.desktop-only-warning {
  display: none;
}

@media (max-width: 919px) {
  body.dashboard { min-width: 0; }
  .app-shell { display: none; }
  .desktop-only-warning {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 26px 18px;
  }
  .desktop-only-warning .card {
    max-width: 520px;
  }
}

.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.sidebar {
  padding: 18px 16px;
  border-right: 1px solid var(--borderB);
  background: var(--panelB);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 10px 16px;
  border-bottom: 1px solid var(--borderB);
  margin-bottom: 16px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .4px;
  background: linear-gradient(135deg, rgba(96,165,250,.9), rgba(34,197,94,.75));
  border: 1px solid var(--borderA);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.brand-name {
  font-weight: 800;
  letter-spacing: .2px;
}

.brand-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.nav {
  display: grid;
  gap: 8px;
  padding: 0 6px;
}

.nav-section {
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  color: var(--muted);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text);
  border: 1px solid var(--borderB);
  background: var(--surface2);
  font-size: 13px;
}

.nav-link:hover {
  background: var(--hoverBg);
  border-color: rgba(96,165,250,.3);
}

.nav-link.active {
  background: var(--infoBg);
  border-color: var(--infoBorder);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  font-weight: 800;
}

.sidebar-foot {
  margin-top: 18px;
  padding: 0 6px 10px;
  display: grid;
  gap: 8px;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--borderB);
  background: var(--panelA);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(6px);
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  min-width: clamp(200px, 30vw, 420px);
}

.search svg {
  width: 18px;
  height: 18px;
  fill: var(--muted);
}

.search input {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--text);
}

.top-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.icon-button {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.icon-button.is-disabled {
  opacity: .65;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: var(--text);
}

.icon-button:hover { background: var(--hoverBg); }

.theme-toggle svg { fill: var(--text); }

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: rgba(239,68,68,.95);
  color: #fff;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid var(--borderA);
}

.avatar-menu {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--borderA);
  background: var(--surface2);
  border-radius: 14px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(96,165,250,.16);
  border: 1px solid rgba(96,165,250,.28);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.avatar-name {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
}

.avatar-links {
  font-size: 12px;
  color: var(--muted);
}

.avatar-links a { color: var(--muted); }
.dot { margin: 0 6px; opacity: .6; }

.dash-content {
  padding: 22px;
  display: grid;
  gap: 18px;
}

.page-header {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.page-header h2 {
  margin: 6px 0 0;
  font-size: 22px;
  letter-spacing: .2px;
}

.page-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.kpi-card {
  border: 1px solid var(--borderA);
  background: var(--panelB);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.kpi-title {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.kpi-value {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .2px;
}

.kpi-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.panel {
  border: 1px solid var(--borderA);
  background: var(--panelB);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .2px;
}

.exam-stack {
  display: grid;
  gap: 22px;
  align-items: stretch;
}

.exam-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.exam-left { height: clamp(240px, 38vh, 420px); }
.exam-right { height: clamp(280px, 50vh, 620px); }

.exam-filters {
  margin-bottom: 10px;
  align-items: end;
}

.exam-right .exam-filters {
  margin-bottom: 6px;
}

.exam-hint {
  margin-left: auto;
  user-select: none;
}

.exam-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

.select-compact {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--inputBg);
  color: var(--text);
  font-size: 12px;
  min-width: 120px;
}

.exam-right .page-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}

#selectedSubjectPill {
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.course-stack {
  display: grid;
  gap: 22px;
  align-items: stretch;
}

.course-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.course-catalog { height: clamp(280px, 44vh, 520px); }
.outline-panel { height: clamp(460px, 68vh, 1040px); }

.course-filters {
  margin-bottom: 10px;
  align-items: end;
}

.course-hint {
  margin-left: auto;
  user-select: none;
}

.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

.course-catalog .data-table tbody tr { cursor: pointer; }
.course-catalog .data-table tbody tr:hover td { background: var(--hoverBg); }
.course-catalog .data-table tbody tr.row-active td { background: rgba(96,165,250,.08); }

.course-catalog .course-table {
  table-layout: fixed;
  min-width: 720px;
}

.course-catalog .course-table th,
.course-catalog .course-table td {
  padding-left: 2px;
  padding-right: 8px;
}

/* Keep catalog rows clean + aligned when columns get tight. */
.course-catalog .course-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-catalog .course-table td:last-child {
  overflow: visible; /* action buttons */
}

.course-actions {
  white-space: nowrap;
}

.course-actions .btn {
  margin-right: 6px;
}

.course-actions .btn:last-child {
  margin-right: 0;
}

.user-table {
  table-layout: fixed;
  min-width: 0;
}

.user-table tbody tr { cursor: pointer; }

.user-table th:first-child,
.user-table td:first-child {
  padding-right: 18px;
}

/* Only push the Access column away from User; keep other columns unchanged. */
.user-table th:nth-child(2),
.user-table td:nth-child(2) {
  padding-left: 40px;
}

.user-table td {
  vertical-align: middle;
}

.user-email {
  font-weight: 900;
  letter-spacing: .1px;
}

.user-roles {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-security .small {
  margin-top: 4px;
}

.user-actions {
  white-space: normal;
}

.user-actions .actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.user-actions .btn { margin-right: 0; }

#selectedCoursePill,
#selectedVersionPill {
  background: rgba(2,6,23,.26);
}

#selectedCoursePill {
  border-color: rgba(96,165,250,.22);
}

#selectedVersionPill {
  border-color: rgba(34,197,94,.22);
}

#selectedVersionMeta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}

.inline-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--inputBg);
  min-width: 260px;
}

.inline-search svg {
  width: 16px;
  height: 16px;
  fill: var(--muted);
  flex: 0 0 auto;
}

.inline-search input {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  outline: none;
  width: 100%;
}

.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.outline-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--borderB);
  background: radial-gradient(900px 220px at 10% 0%, rgba(96,165,250,.12), transparent 65%),
              radial-gradient(700px 220px at 90% 60%, rgba(34,197,94,.10), transparent 62%),
              var(--surface);
}

.outline-top-left {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  flex-wrap: wrap;
}

.outline-top-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.outline-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.42fr 0.58fr;
  gap: 14px;
  min-height: 0;
  flex: 1;
}

.outline-pane {
  border: 1px solid var(--borderA);
  border-radius: 14px;
  background: var(--surface2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.outline-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--borderB);
  background: var(--glassBg);
}

.outline-pane-title {
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 13px;
}

.outline-pane-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.outline-items .outline-pane-tools {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  align-items: center;
  gap: 10px;
  flex-wrap: unset;
}

.outline-items .inline-search {
  min-width: 0;
  width: 100%;
}

.outline-items .btn-group {
  flex-wrap: nowrap;
}

.outline-subhint { display: none; }

.outline-pane-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 12px;
}

.outline-search {
  min-width: 240px;
}

#selectedCoursePill {
  max-width: 640px;
  white-space: normal;
}

#selectedVersionPill {
  max-width: 420px;
  white-space: normal;
}

.outline-panel #versionsList .list-item {
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.outline-panel #versionsList .list-item.row-active {
  border-color: var(--infoBorder);
  background: var(--infoBg);
}

.outline-panel #versionsList .list-item:hover {
  background: var(--hoverBg);
}

/* Outline editor: versions list should be a bit quieter (less shouty). */
.outline-panel #versionsList .list-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12px;
}
.outline-panel #versionsList .small { font-size: 11px; }

.outline-panel .outline-tree {
  gap: 7px;
}

.outline-panel .outline-tree .tree-item {
  padding: 9px 10px;
  align-items: center;
}

.outline-panel .outline-tree .tree-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12px;
}

.outline-panel .outline-tree .tree-meta {
  font-size: 10.5px;
}

.outline-panel .outline-tree .outline-item-titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  letter-spacing: .12px;
  font-size: 12px;
}

.outline-panel .outline-tree .outline-item-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.outline-panel .outline-tree .outline-item-tags .type-pill {
  background: var(--infoBg);
  border-color: var(--infoBorder);
  color: var(--infoText);
}

.outline-panel .outline-tree .outline-item-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.outline-panel .outline-tree .tree-item:hover .outline-item-actions {
  opacity: 1;
  pointer-events: auto;
}

.outline-panel .outline-tree .tree-item.tree-summary .outline-item-actions {
  /* Summary rows should show actions without fighting the details toggle UX. */
  opacity: 1;
  pointer-events: auto;
}

.icon-mini {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.icon-mini svg {
  width: 16px;
  height: 16px;
  fill: var(--muted);
}

.icon-mini:hover { background: var(--hoverBg); }
.icon-mini:hover svg { fill: var(--text); }

.outline-panel .outline-tree .tree-right {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.outline-panel #outlineHint {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--borderB);
  background: var(--surface);
}

.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
}

.exam-left .data-table td,
.exam-left .data-table th {
  padding-right: 10px;
}

.exam-left .data-table tbody tr {
  cursor: pointer;
}

.exam-left .data-table tbody tr:hover td {
  background: var(--hoverBg);
}

.exam-left .data-table tbody tr.row-active td {
  background: var(--rowActiveBg);
}

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

.spark {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-items: end;
  height: 90px;
  margin-top: 10px;
}

.spark span {
  display: block;
  height: var(--h);
  background: rgba(96,165,250,.28);
  border-radius: 8px 8px 4px 4px;
  border: 1px solid var(--borderB);
}

.spark.two-tone span:nth-child(odd) {
  background: rgba(34,197,94,.22);
}

.trend-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.trend-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.trend-value {
  font-size: 18px;
  font-weight: 900;
  margin-top: 6px;
}

.heatmap {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.heat {
  width: 100%;
  padding-top: 100%;
  border-radius: 6px;
  border: 1px solid var(--borderB);
  background: var(--surface);
}

.heat.h1 { background: rgba(96,165,250,.08); }
.heat.h2 { background: rgba(96,165,250,.14); }
.heat.h3 { background: rgba(96,165,250,.20); }
.heat.h4 { background: rgba(96,165,250,.28); }

.muted { color: var(--muted); }

/* Dashboard components used across admin pages */

.split {
  display: grid;
  gap: 12px;
}
.split.two {
  grid-template-columns: 1.6fr 1fr;
  align-items: start;
}

/* Stack multiple panels within a single split column. */
.col-stack {
  display: grid;
  gap: 16px;
  align-content: start;
  min-height: 0;
}

/* Moderator overview: add a bit more breathing room between major sections. */
.mod-overview > .split { margin-top: 16px; }
.mod-overview .col-stack { gap: 22px; }

/* Inbox layout (stacked: threads above conversation). */
.inbox-stack {
  grid-template-columns: 1fr;
  gap: 14px;
}

.inbox-left,
.inbox-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Fixed-ish panel heights so thread list / conversation can scroll internally. */
.inbox-left { height: clamp(260px, 32vh, 420px); }
.inbox-right { height: clamp(280px, 40vh, 460px); }

/* Inbox thread list: a little quieter than the global "list" style. */
.inbox-left .list-title {
  font-weight: 550;
  font-size: 13px;
}

.inbox-left .list-item {
  padding: 9px 10px;
}

/* Inbox conversation: slightly tighter + smaller text to avoid oversized threads. */
.inbox-right #messagesList { font-size: 12px; }
.inbox-right #messagesList .small { font-size: 11px; }

.inbox-right #replyBody {
  min-height: 64px;
}

/* WhatsApp-ish message bubbles */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  display: flex;
}
.chat-msg.in { justify-content: flex-start; }
.chat-msg.out { justify-content: flex-end; }

.chat-bubble {
  width: fit-content;
  max-width: 74%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--borderA);
  background: rgba(2,6,23,.18);
}

.chat-bubble.out {
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.12);
}

.chat-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.chat-from {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
}

.chat-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.chat-body {
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Timestamp appears like a WhatsApp-style subscript at the end of the message. */
.chat-stamp {
  font-size: 10px;
  color: var(--muted);
  margin-left: 8px;
  vertical-align: sub;
  white-space: nowrap;
}

/* Bell popover (unread inbox preview) */
.bell-popover {
  position: fixed;
  z-index: 90;
  width: 360px;
  max-width: calc(100vw - 28px);
  max-height: 440px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--borderA);
  background: var(--panelB);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.bell-popover .bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--borderB);
}

.bell-popover .bell-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bell-popover .bell-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

.bell-popover .bell-open:hover { background: var(--hoverBg); }

.bell-popover .bell-body {
  max-height: 380px;
  overflow: auto;
  overscroll-behavior: contain;
}

.bell-item {
  display: grid;
  gap: 6px;
  padding: 12px 12px;
  border-top: 1px solid var(--borderB);
  cursor: pointer;
}
.bell-item:hover { background: var(--hoverBg); }

.bell-item-top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}
.bell-item-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bell-item-time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.bell-item-preview {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bell-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 13px;
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filter {
  display: grid;
  gap: 6px;
}

.filter input, .filter select {
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(148,163,184,.9);
  padding: 8px 0 10px;
}

.data-table td {
  padding: 12px 0;
  border-top: 1px solid rgba(36,50,68,.85);
  vertical-align: top;
}

/* Table action buttons: keep a consistent gap so "View / Claim / ..." don't hug. */
.data-table td.actions-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.apps-table th:first-child,
.apps-table td:first-child,
.mods-table th:first-child,
.mods-table td:first-child {
  text-align: left;
}

.apps-table th:not(:first-child),
.apps-table td:not(:first-child),
.mods-table th:not(:first-child),
.mods-table td:not(:first-child) {
  text-align: center;
}

/* Add breathing room between centered columns so Status/Actions don't feel fused. */
.apps-table th,
.apps-table td,
.mods-table th,
.mods-table td {
  padding-left: 10px;
  padding-right: 10px;
}

#auditTable tbody tr { cursor: pointer; }

.audit-pre {
  margin: 0;
  border: 1px solid rgba(36,50,68,.95);
  background: rgba(2,6,23,.22);
  border-radius: 14px;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
}

.row-active td {
  background: rgba(96,165,250,.06);
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  border: 1px solid rgba(36,50,68,.95);
  background: rgba(2,6,23,.35);
  color: rgba(229,231,235,.92);
}

.status.pending { border-color: rgba(250, 204, 21, .35); color: rgba(254, 249, 195, .95); background: rgba(250,204,21,.08); }
.status.approved { border-color: rgba(34, 197, 94, .35); color: rgba(187, 247, 208, .95); background: rgba(34,197,94,.08); }
.status.rejected { border-color: rgba(239, 68, 68, .45); color: rgba(254, 202, 202, .95); background: rgba(239,68,68,.08); }

.audit-hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(36,50,68,.95);
  background: rgba(2,6,23,.18);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.audit-hint strong {
  color: rgba(229,231,235,.92);
  font-weight: 900;
}
.status.rejected { border-color: rgba(239, 68, 68, .35); color: rgba(254, 202, 202, .95); background: rgba(239,68,68,.08); }
.status.active { border-color: rgba(34, 197, 94, .35); color: rgba(187, 247, 208, .95); background: rgba(34,197,94,.08); }
.status.disabled { border-color: rgba(148,163,184,.35); color: rgba(148,163,184,.95); background: rgba(148,163,184,.08); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(36,50,68,.95);
  background: rgba(2,6,23,.35);
  color: rgba(148,163,184,.95);
  font-size: 11px;
}

.access-card {
  border: 1px solid rgba(36,50,68,.95);
  background: rgba(2,6,23,.18);
  border-radius: 14px;
  padding: 12px;
}

.access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

.access-perms {
  border: 1px solid rgba(36,50,68,.95);
  background: rgba(2,6,23,.22);
  border-radius: 12px;
  padding: 10px;
  min-height: 92px;
  max-height: 260px;
  overflow: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-content: flex-start;
}

.pill.active {
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.14);
  color: rgba(191,219,254,.95);
}

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

.subnav a.pill:hover { text-decoration: none; }

.drawer {
  position: sticky;
  top: 92px;
}

.drawer-block {
  display: grid;
  gap: 8px;
}

.drawer-title {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(148,163,184,.9);
}

.check-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: rgba(229,231,235,.92);
}

.pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  border-radius: 999px;
  padding: 5px 9px;
  border: 1px solid rgba(36,50,68,.95);
  background: rgba(2,6,23,.35);
  font-size: 11px;
  color: rgba(229,231,235,.92);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

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

.role-card {
  border: 1px solid rgba(36,50,68,.95);
  border-radius: 14px;
  padding: 14px;
  background: rgba(2,6,23,.18);
}

.role-card.assigned {
  border-color: rgba(96,165,250,.55);
  background: rgba(96,165,250,.12);
}

.role-title { font-weight: 900; letter-spacing: .2px; }

.list {
  display: grid;
  gap: 10px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(36,50,68,.95);
  background: rgba(2,6,23,.18);
}

.list-title { font-weight: 900; letter-spacing: .2px; }

/* My Scope page: slightly smaller typography for long labels. */
#scopesChips .chip { font-size: 10px; }
#scopesList .list-title { font-size: 12px; font-weight: 800; letter-spacing: .15px; }
#scopesList .small { font-size: 11px; }
#permGrid .role-title { font-size: 12px; font-weight: 850; letter-spacing: .15px; }
#permGrid .small { font-size: 11px; }

/* Moderator Overview: keep performance/activity readable but compact. */
#modRecentActivity .list-title { font-size: 12px; font-weight: 750; letter-spacing: .12px; }
#modRecentActivity .small { font-size: 11px; }
#statApprovalsPerDay,
#statReversalRate,
#statAvgDecisionTime { font-size: 18px !important; }

/* Moderator Overview: keep recent activity contained (scroll inside the panel). */
.mod-overview #modRecentActivity {
  max-height: clamp(220px, 26vh, 340px);
  overflow: auto;
  padding-right: 4px; /* avoids text under scrollbar */
}

/* Authored content review history should feel compact. */
#authoredAuditList .list-item {
  padding: 8px 10px;
}
#authoredAuditList .list-title {
  font-size: 12px;
  font-weight: 800;
}
#authoredAuditList .small {
  font-size: 11px;
}

.tree {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.tree-hint {
  min-height: 0;
  margin-bottom: 6px;
}

.tree-group {
  border: none;
  padding: 0;
  margin: 0;
}

.tree-group > summary {
  list-style: none;
}

.tree-group > summary::-webkit-details-marker {
  display: none;
}

.tree-summary .tree-caret {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid var(--borderA);
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
  transform: rotate(0deg);
  transition: transform 160ms ease;
  margin-right: 8px;
  flex: 0 0 auto;
}

.tree-group[open] > summary .tree-caret {
  transform: rotate(90deg);
}

.tree-children {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.tree-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  padding-left: calc(12px + var(--indent, 0px));
  border-radius: 12px;
  border: 1px solid var(--borderA);
  background: var(--surface2);
}

.tree-item:hover { background: var(--surface); }

.tree-left { min-width: 0; }

.tree-title { font-weight: 900; letter-spacing: .2px; font-size: 13px; }

.tree-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-right {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.tree-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.exam-right .tree-actions .btn.xsmall {
  padding: 8px 10px;
  font-size: 11px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(36,50,68,.85);
}
.toggle-row:last-child { border-bottom: none; }

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(36,50,68,.85);
  border-radius: 999px;
  transition: 0.2s;
  border: 1px solid rgba(36,50,68,.95);
}

.slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: rgba(229,231,235,.95);
  border-radius: 50%;
  transition: 0.2s;
}

.switch input:checked + .slider {
  background: rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.35);
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

.btn.xsmall { padding: 7px 10px; font-size: 11px; border-radius: 11px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
  --btnText: #f8fafc;