/* ══════════════════════════════════════════════════════════════
   QBANK LEARN — Claymorphism Design System
   Fonts: Baloo 2 (headings) · Comic Neue (body)
   ══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  --color-primary:       #2563EB;
  --color-primary-dark:  #1d4ed8;
  --color-on-primary:    #FFFFFF;
  --color-secondary:     #F59E0B;
  --color-on-secondary:  #0F172A;
  --color-accent:        #EC4899;
  --color-on-accent:     #FFFFFF;
  --color-bg:            #EFF6FF;
  --color-fg:            #0F172A;
  --color-card:          #FFFFFF;
  --color-muted:         #F1F5FD;
  --color-muted-fg:      #475569;
  --color-border:        #bfdbfe;
  --color-success:       #16a34a;
  --color-success-light: #dcfce7;
  --color-error:         #dc2626;
  --color-error-light:   #fee2e2;

  /* Clay shadow system */
  --shadow-clay-sm:  0 2px 0 3px rgba(0,0,0,.12), 0 4px 12px rgba(37,99,235,.10);
  --shadow-clay-md:  0 4px 0 4px rgba(0,0,0,.14), 0 8px 24px rgba(37,99,235,.13);
  --shadow-clay-lg:  0 6px 0 5px rgba(0,0,0,.16), 0 16px 40px rgba(37,99,235,.15);
  --shadow-clay-press: 0 1px 0 2px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.10);

  /* Radius */
  --radius-sm:  12px;
  --radius-md:  18px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  /* Spacing (8dp grid) */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;

  /* Typography */
  --font-heading: 'Baloo 2', sans-serif;
  --font-body:    'Comic Neue', cursive;

  /* Time-of-Day (defaults = afternoon; overridden by tod-* body classes) */
  --tod-hero-gradient: linear-gradient(135deg, #2563EB 0%, #7c3aed 100%);
  --tod-top-bar:       linear-gradient(90deg, #2563EB 0%, #EC4899 60%, #F59E0B 100%);
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-fg);
  height: 100dvh;
  overflow: hidden;
  /* Subtle dot-grid texture */
  background-image: radial-gradient(circle, #c7d9f8 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Thin top accent bar */
body::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--tod-top-bar);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  font-family: var(--font-body);
  touch-action: manipulation;
}

img { max-width: 100%; display: block; }

/* ── View System ──────────────────────────────────────────────── */
.view {
  display: none;
  height: 100dvh;
  overflow-y: auto;
  position: relative;
  padding-top: 4px; /* offset for top accent bar */
}
.view.view-active { display: block; }

.view-inner {
  max-width: min(80vw, 1200px);   /* center card-grid views comfortably */
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-6);
}

/* ── Quiz Split-Panel Layout ──────────────────────────────────── */
.quiz-view {
  /* display controlled by .view / .view-active — override only when active */
  flex-direction: column;
  height: 100dvh;    /* fixed height — prevents content from pushing toolbar off-screen */
  overflow: hidden;
}
.quiz-view.view-active {
  display: flex;
}

.quiz-shell {
  flex: 1 1 0;       /* grow/shrink within quiz-view's fixed 100dvh */
  min-height: 0;     /* required: allow flex child to shrink below content size */
  display: grid;
  grid-template-areas:
    "left    right"
    "toolbar toolbar";
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr auto;
  padding-top: 44px;       /* clear fixed app header (4px accent bar + 36px header + 4px gap) */
  box-sizing: border-box;
}

.quiz-left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: var(--sp-3) var(--sp-2) var(--sp-2) var(--sp-3);
  overflow-y: auto;
  min-height: 0; /* required so grid row constrains this column */
}

.quiz-right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--color-border);
  background: var(--color-muted, #f8fafc);
  min-height: 0;
  position: relative;
  overflow: hidden; /* children handle their own scroll */
}

.quiz-right__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
  padding: var(--sp-4);
  color: var(--color-muted-fg);
  text-align: center;
  font-size: .9rem;
}
.quiz-right__placeholder span { font-size: 2rem; }

.quiz-right .feedback-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Written mode — collapse to single column, hide right panel */
.quiz-shell--written {
  grid-template-columns: 1fr !important;
  grid-template-areas: "left" "toolbar" !important;
}
.quiz-shell--written .quiz-right { display: none; }

.quiz-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--color-card);
  border-top: 2px solid var(--color-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}

.quiz-toolbar__left  { flex-shrink: 0; }
.quiz-toolbar__center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-toolbar__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile: single column */
@media (max-width: 767px) {
  .quiz-shell {
    grid-template-areas:
      "left"
      "right"
      "toolbar";
    grid-template-columns: 1fr;
  }
  .quiz-right {
    border-left: none;
    border-top: 2px solid var(--color-border);
    background: var(--color-card);
  }
  .quiz-left, .quiz-right { padding: var(--sp-2) var(--sp-2); }
  .quiz-right { min-height: 0; }
}

/* Legacy — keep for any remaining references */
.view-inner--question {
  max-width: 82%;
  padding-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── Clay Card ────────────────────────────────────────────────── */
.clay-card {
  background: var(--color-card);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-md);
  transition: box-shadow .2s ease, transform .2s ease;
}

.clay-card:hover {
  box-shadow: var(--shadow-clay-lg);
  transform: translateY(-2px);
}

/* ── Clay Buttons ─────────────────────────────────────────────── */
.clay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: 52px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  border: 3px solid transparent;
  box-shadow: var(--shadow-clay-sm);
  transition: box-shadow .15s ease, transform .15s ease;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.clay-btn:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-clay-press);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary-dark);
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  border-color: #d97706;
}
.btn-secondary:hover { background: #d97706; }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: #db2777;
}
.btn-accent:hover { background: #db2777; }

.btn-ghost {
  background: var(--color-muted);
  color: var(--color-muted-fg);
  border-color: var(--color-border);
  box-shadow: none;
}

.btn-correct {
  background: #0f172a;
  color: #fff;
  border-color: #1e293b;
}

.btn-wrong {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* ── Back & Exit Buttons ──────────────────────────────────────── */
.btn-back, .btn-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-card);
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow-clay-sm);
  color: var(--color-fg);
  flex-shrink: 0;
  transition: box-shadow .15s, transform .15s;
  touch-action: manipulation;
}
.btn-back:active, .btn-exit:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-clay-press);
}

/* ── Brand Header ─────────────────────────────────────────────── */
.brand-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  justify-content: center;
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-3);
}
.brand-logo { font-size: 2rem; }
.brand-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
}
.brand-accent { color: var(--color-accent); }

/* ── Screen Titles ────────────────────────────────────────────── */
.screen-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-fg);
  text-align: center;
  line-height: 1.2;
}

.screen-sub {
  text-align: center;
  color: var(--color-muted-fg);
  font-size: 0.95rem;
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.top-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.top-bar .screen-title { text-align: left; font-size: 1.3rem; flex: 1; }

/* ── Branded page header (subjects / chapters views) ─────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--sp-3) 0 var(--sp-3);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--sp-3);
}
.page-header__back {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-card);
  border: 2.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg);
  cursor: pointer;
  transition: background .15s, transform .15s;
  touch-action: manipulation;
}
.page-header__back:hover { background: var(--color-muted); transform: scale(1.08); }
.page-header__back:active { transform: scale(0.93); }
.page-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.page-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(37,99,235,.35);
  letter-spacing: -.02em;
}
.page-header__wordmark {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted-fg);
  letter-spacing: -.01em;
}
.page-header__wordmark strong {
  color: var(--color-primary);
  font-weight: 800;
}
.page-header__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
}
.page-header__title-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 4px;
  border-left: 2px solid var(--color-border);
  min-width: 0;
}
.page-header__title-group .page-header__title {
  flex: none;
  padding-left: 0;
  border-left: none;
}
.page-header__crumb {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-muted-fg);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  opacity: 0.75;
}
.page-header__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-fg);
  letter-spacing: -.02em;
  flex: 1;
  padding-left: 4px;
  border-left: 2px solid var(--color-border);
}

/* ── Profile Grid ─────────────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: var(--color-card);
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow-clay-md);
  transition: box-shadow .2s, transform .2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.profile-card:hover {
  box-shadow: var(--shadow-clay-lg);
  transform: translateY(-3px) scale(1.02);
}
.profile-card:active {
  transform: translateY(1px) scale(.98);
  box-shadow: var(--shadow-clay-press);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.7);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: -1px;
  user-select: none;
}

.profile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  color: var(--color-fg);
}

/* Add profile card */
.profile-add {
  border-style: dashed;
  border-color: var(--color-primary);
  background: var(--color-muted);
  box-shadow: none;
  color: var(--color-primary);
}
.profile-add:hover {
  background: #dbeafe;
  box-shadow: var(--shadow-clay-sm);
}
.profile-add-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px dashed var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-primary);
}

/* ── Section Select (MCQ vs Structured) ──────────────────────── */
.section-select-cards {
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 820px;
  margin: var(--sp-4) auto 0;
}

/* Per-card accent colours */
#ss-mcq-btn { --sc-color: #2563EB; }
#ss-str-btn { --sc-color: #F59E0B; }

.section-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 32px 88px 32px 32px;
  border-radius: 18px;
  border: 0.5px solid #d1d5db;
  background: var(--color-card);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  text-align: left;
  flex: 1;
  min-height: 300px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.section-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.section-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Right-edge coloured accent strip with diagonal lines */
.section-card::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 62px;
  background: var(--sc-color, var(--color-primary));
  border-radius: 0 18px 18px 0;
}

/* Locked state */
.section-card--locked {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.5);
}
.section-card--locked:hover  { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.section-card--locked:active { transform: none; }

/* Overall mastery progress bar — pinned to bottom */
.section-card__prog-wrap {
  position: absolute;
  left: 0; right: 62px; bottom: 0;
  height: 5px;
  background: var(--color-border);
  border-radius: 0 0 0 18px;
  overflow: hidden;
}
.section-card__prog-fill {
  height: 100%;
  width: 0%;
  background: var(--sc-color, var(--color-primary));
  border-radius: inherit;
  transition: width .6s ease;
}

/* Icon — top of card */
.section-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
  margin-bottom: 4px;
}
#ss-mcq-btn .section-card__icon { background: #dbeafe; }
#ss-str-btn .section-card__icon { background: #fef9c3; }

/* Body — bottom of card */
.section-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.section-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-heading);
  border-bottom: 1.5px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 12px;
  width: 100%;
}
.section-card__desc {
  font-size: .88rem;
  color: var(--color-muted-fg);
  line-height: 1.5;
}
.section-card__count {
  font-size: .82rem;
  font-weight: 700;
  color: var(--sc-color, var(--color-primary));
  margin-top: 4px;
}
.section-card__arrow { display: none; }

/* ── Generic Card Grid ────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-2);
}

/* Subject grid — 2-col landscape tiles */
#subject-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Landscape subject tile — icon top-left, label bottom-left */
.subject-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px 28px 28px;
  border-radius: 16px;
  border: none;
  background: var(--subj-bg, #5468B8);
  /* faint blue→amber wash echoing the Learn/Review mode palette */
  background-image: linear-gradient(145deg, rgba(37,99,235,0.13) 0%, rgba(245,158,11,0.09) 100%);
  box-shadow: none;
  min-height: 205px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter .18s ease, transform .18s ease;
}
.subject-card:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}
.subject-card:active {
  filter: brightness(0.9);
  transform: scale(0.97);
}

.subj-card-icon {
  /* sits top-left, no extra styling needed */
  line-height: 0;
}

.subj-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.subj-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.25;
  word-break: break-word;
}
.subj-stats {
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
}

@media (min-width: 600px) {
  #subject-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  #subject-grid { grid-template-columns: repeat(3, 1fr); }
  .subject-card { min-height: 220px; }
}

/* ── Chapter Cards — redesigned ─────────────────────────────────── */
.chapter-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px 21px 18px 22px;
  border: 0.5px solid var(--color-border);
  border-left: 1.5px solid var(--ch-color, var(--color-primary));
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: var(--color-card);
  box-shadow: none;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  transition: background .15s, transform .15s;
}
.chapter-card:hover {
  background: var(--color-card);
  border-left-width: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
.chapter-card:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Faded chapter-number watermark */
.ch-watermark {
  position: absolute;
  right: 8px;
  top: -2px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.8rem;
  color: var(--ch-color, var(--color-primary));
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

/* Top row: icon + due badge */
.ch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.ch-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ch-due,
.due-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 99px;
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #f59e0b;
  white-space: nowrap;
}
.due-badge {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 12px;
  margin-left: 0;
}

/* Chapter name + subtitle */
.ch-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-fg);
  line-height: 1.3;
  margin-bottom: 3px;
}
.ch-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--color-muted-fg);
  margin-bottom: 18px;
}

/* Mastery progress bar */
.ch-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  width: 100%;
}
.ch-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.ch-track {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: hidden;
}
.ch-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}
.ch-mastery-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  white-space: nowrap;
  min-width: 76px;
  text-align: right;
  color: var(--color-muted-fg);
}
.ch-rounds-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ch-color, var(--color-primary));
  opacity: 0.75;
}

/* ── Chapters Banner (card-style subject header) ─────────────── */
.chapters-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-3) 0 var(--sp-3);
}
.chapters-banner__card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 14px 18px;
  min-width: 0;
}
.chapters-banner__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.chapters-banner__logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapters-banner__wordmark {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.chapters-banner__wordmark strong { color: var(--color-heading); }
.chapters-banner__divider {
  width: 1px;
  height: 26px;
  background: var(--color-border);
  flex-shrink: 0;
}
.chapters-banner__title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapters-banner__back { flex-shrink: 0; }

/* ── Flashcard view banner (chapter context header) ─────────── */
.fc-view-banner {
  display: flex;
  align-items: center;
  padding: 10px 20px 0;
  flex-shrink: 0;
}
.fc-view-banner__card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 11px 18px;
  width: 100%;
}
.fc-view-banner__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fc-view-banner__logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-view-banner__wordmark {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.fc-view-banner__wordmark strong { color: var(--color-heading); }
.fc-view-banner__divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  flex-shrink: 0;
}
.fc-view-banner__chapter {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-heading);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chapters page mode toggle (MCQ / Flash) */
.ch-mode-toggle {
  display: flex;
  align-items: center;
  background: var(--color-muted);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.ch-mode-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.ch-mode-btn.active {
  background: var(--color-card);
  color: var(--color-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
#ch-mode-flash.active {
  color: #D97706;
}
.ch-mode-btn svg { flex-shrink: 0; }

.card-icon {
  font-size: 2.4rem;
  line-height: 1;
}
.card-icon-svg {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.card-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-fg);
}
.card-count {
  font-size: 0.85rem;
  color: var(--color-muted-fg);
}
.card-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-top: 4px;
}

/* Term group heading inside chapter grid */
/* Each term is wrapped in .term-section so spacing is fully explicit */
#chapter-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.term-section {
  display: flex;
  flex-direction: column;
}

.term-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
  gap: var(--sp-2);
}

.term-group-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  padding: 0 0 var(--sp-1);
  margin-bottom: var(--sp-2);
}

.loading-msg {
  text-align: center;
  color: var(--color-muted-fg);
  padding: var(--sp-4) 0;
  font-size: 1rem;
}

/* ── Mode Cards ───────────────────────────────────────────────── */
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Top row: Learn + Review side by side always */
.mode-row {
  display: flex;
  gap: var(--sp-2);
}
.mode-row .mode-card { flex: 1; }

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-xl);
  border: 3px solid transparent;
  box-shadow: var(--shadow-clay-lg);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 100%;
}
.mode-card:hover { transform: translateY(-3px); }
.mode-card:active { transform: translateY(2px); box-shadow: var(--shadow-clay-press); }

.mode-learn {
  background: linear-gradient(135deg, #2563EB 0%, #3b82f6 100%);
  border-color: #1d4ed8;
  color: #fff;
}
.mode-review {
  background: linear-gradient(135deg, #F59E0B 0%, #fbbf24 100%);
  border-color: #d97706;
  color: #0F172A;
}

.mode-icon { opacity: .9; }
.mode-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
}
.mode-desc { font-size: 0.82rem; opacity: .85; }

.mode-due-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 99px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ── Question Screen ──────────────────────────────────────────── */
/* .question-top-bar removed — replaced by .quiz-toolbar */

/* Reference-style question card (inside quiz-left) */
.quiz-left .question-card {
  border: 1.5px solid #e8ecf1;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 26px 24px 23px;
  flex-shrink: 0;
}
/* Remove clay hover lift inside quiz */
.quiz-left .question-card:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* Timer bar — full-width thin line at very top of card */
.quiz-left .q-timer-bar {
  margin: -26px -24px 16px;
  height: 4px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* Question meta chips — clean pill badges */
.quiz-left .question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.quiz-left .q-tag {
  font-size: .6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

/* Question number badge prefix (Q1, Q2…) */
.q-stem-num {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(37,99,235,.08);
  border-radius: 5px;
  padding: 1px 6px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: .02em;
}

/* Larger, cleaner question text */
.quiz-left .question-text {
  font-size: 1.2rem;
  line-height: 1.75;
  color: #1e293b;
  font-weight: 400;
}

/* Stats display (top-left of question screen) */
.stats-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-clay-sm);
  flex-shrink: 0;
  min-width: 90px;
}
.stats-chip-line {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--color-muted-fg);
  white-space: nowrap;
}
.stats-chip-line strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

/* Exit modal extras */
.exit-modal-box { text-align: center; }
.exit-modal-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--color-muted-fg);
}
.exit-modal-msg {
  font-size: 0.9rem;
  color: var(--color-muted-fg);
  margin: 4px 0 20px;
}
/* ── Streak fire strip (above progress bar) ──────────────────── */
#streak-fire-strip {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 2px;
  min-height: 18px;
  margin-bottom: 3px;
}
.streak-pip {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
  transform-origin: bottom center;
  animation: pip-flicker 2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(251,146,60,.7));
}
@keyframes pip-flicker {
  0%,100% { transform: scaleY(1)   scaleX(1)    translateY(0);    }
  15%     { transform: scaleY(1.2) scaleX(0.88) translateY(-1px); }
  35%     { transform: scaleY(0.9) scaleX(1.06) translateY(1px);  }
  55%     { transform: scaleY(1.15)scaleX(0.92) translateY(-1px); }
  75%     { transform: scaleY(0.95)scaleX(1.03) translateY(0);    }
}

.progress-wrap { flex: 1; }
.progress-bar {
  height: 10px;
  background: var(--color-muted);
  border-radius: 99px;
  overflow: hidden;
  border: 2px solid var(--color-border);
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 99px;
  transition: width .4s cubic-bezier(.34,1.56,.64,1);
}
.progress-label {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-top: 4px;
}

.question-card {
  padding: var(--sp-3);
  border-left: 6px solid var(--color-primary);
  overflow: hidden; /* keeps timer bar corners clipped */
}

/* ── Question timer bar ────────────────────────────────────────── */
.q-timer-bar {
  height: 5px;
  background: var(--color-muted);
  border-radius: 99px;
  overflow: hidden;
  margin: -var(--sp-3) calc(-1 * var(--sp-3)) var(--sp-2) calc(-1 * var(--sp-3) - 6px);
  /* bleeds to card edges */
  margin-top: calc(-1 * var(--sp-3));
  margin-left: calc(-1 * var(--sp-3) - 6px);
  margin-right: calc(-1 * var(--sp-3));
  margin-bottom: var(--sp-2);
}
.q-timer-fill {
  height: 100%;
  width: 100%;
  background: #22c55e;
  border-radius: 99px;
  transition: background 0.5s;
  transform-origin: left center;
}
.question-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-bottom: 10px;
}
.question-card-header .question-meta { margin-bottom: 0; flex: 1; }

/* Small countdown shown in question card top-right when timer is active */
.q-card-timer {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
  transition: color 0.3s ease;
}
.q-card-timer:empty { display: none; }

.btn-flag {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-muted);
  border: 2px solid transparent;
  color: var(--color-muted-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  touch-action: manipulation;
}
.btn-flag:active { transform: scale(.92); }
.btn-flag.flagged {
  background: #fef3c7;
  border-color: #F59E0B;
  color: #d97706;
}

/* ── Question Nav Arrows ──────────────────────────────────────── */
.btn-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-clay-sm);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  flex-shrink: 0;
}
.btn-nav-arrow:hover:not(:disabled) { transform: scale(1.12); box-shadow: var(--shadow-clay-md); }
.btn-nav-arrow:active:not(:disabled) { transform: scale(0.9); box-shadow: none; }
.btn-nav-arrow:disabled { opacity: 0.25; cursor: not-allowed; }

.mode-flagged {
  background: linear-gradient(135deg, #EC4899 0%, #f472b6 100%);
  border-color: #db2777;
  color: #fff;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.mode-flagged .mode-label { font-size: 1rem; }
.mode-flagged .mode-icon  { width: 32px; height: 32px; opacity: .9; flex-shrink: 0; }

.mode-study-notes {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  border-color: #1d4ed8;
  color: #fff;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.mode-study-notes .mode-label { font-size: 1rem; }
.mode-study-notes .mode-icon  { width: 36px; height: 36px; opacity: .9; flex-shrink: 0; }
.mode-study-notes .mode-desc  { opacity: .75; }

/* ── Study Notes: section hint ──────────────────── */
.sn-section-hint {
  font-size: .83rem; color: var(--text-secondary);
  margin: -4px 0 16px; padding: 0 2px;
}

/* ── Study Notes: unified panel ─────────────────── */
.sn-unified { display: flex; flex-direction: column; gap: 0; height: 100%; }

.sn-sel-row {
  display: flex; gap: 12px; padding: 16px 16px 14px;
  border-bottom: 2px solid var(--border-light);
  background: var(--color-bg);
  flex-shrink: 0; flex-wrap: wrap;
}
.sn-sel-group {
  flex: 1; min-width: 160px; position: relative; display: flex; flex-direction: column; gap: 5px;
}
.sn-sel-label {
  font-size: .70rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: #6C47FF;
}
.sn-sel-input {
  width: 100%; padding: 11px 16px; border-radius: 10px;
  border: 2px solid #6C47FF;
  background: #fff;
  color: #1e1b4b;
  font-size: .88rem; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(108,71,255,.10);
  box-sizing: border-box;
}
.sn-sel-input:focus {
  border-color: #4f28d9;
  box-shadow: 0 0 0 3px rgba(108,71,255,.18);
}
.sn-sel-input:disabled {
  border-color: #d1d5db; box-shadow: none;
  background: #f9fafb; color: #9ca3af; cursor: not-allowed;
}
.sn-sel-input::placeholder { color: #a5b4fc; }

.sn-sel-input-wrap {
  position: relative; display: flex; align-items: center;
}
.sn-sel-input-wrap .sn-sel-input { padding-right: 34px; }
.sn-sel-clear {
  position: absolute; right: 10px;
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: #e0e7ff; color: #6C47FF;
  font-size: .85rem; line-height: 1; cursor: pointer;
  transition: background .13s;
}
.sn-sel-clear:hover { background: #6C47FF; color: #fff; }

.sn-sel-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-card); border: 1.5px solid #a78bfa;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 50; max-height: 220px; overflow-y: auto;
}
.sn-sel-opt {
  padding: 9px 14px; font-size: .84rem; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-primary); transition: background .12s;
}
.sn-sel-opt:hover { background: #f5f3ff; color: #6C47FF; }
.sn-sel-opt-badge {
  background: #ede9fe; color: #6C47FF;
  font-size: .68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
}
.sn-unified-files {
  flex: 1; overflow-y: auto; padding: 0;
}
.sn-sel-hint {
  padding: 40px 24px; text-align: center;
  color: var(--text-muted); font-size: .88rem;
}

/* ── Study Notes: chapter portrait grid ─────────── */
.sn-search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 18px;
}
.sn-search-bar svg { flex-shrink: 0; color: var(--text-muted); }
.sn-search-bar input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .88rem; color: var(--text-primary); font-family: inherit;
}

.sn-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  padding-bottom: 24px;
}
.sn-chapter-card {
  position: relative;
  aspect-ratio: 9 / 13;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px 10px 10px;
  overflow: hidden; text-align: left;
  background: linear-gradient(175deg, color-mix(in srgb, var(--sn-card-accent) 70%, #000 30%) 0%, var(--sn-card-accent) 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
  transition: transform .18s, box-shadow .18s;
}
.sn-chapter-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.55) 100%);
}
.sn-chapter-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.sn-chapter-card__body { position: relative; z-index: 1; }
.sn-chapter-card__subject {
  display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.7); margin-bottom: 4px;
}
.sn-chapter-card__name {
  display: block; font-size: .82rem; font-weight: 700; color: #fff;
  line-height: 1.3;
}
.sn-chapter-card__badge {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
  color: #fff; font-size: .65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
}

/* ── Study Notes: subject panel grid (4-up) ─────── */
.sn-subject-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px;
}
.sn-subject-card {
  min-height: 130px !important;
  padding: 16px 14px 14px !important;
}
.sn-subject-card .subj-name { font-size: .9rem !important; }
.sn-subject-card .subj-card-icon svg { width: 28px !important; height: 28px !important; }
@media (max-width: 700px) {
  .sn-subject-panel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Study Notes: file list ─────────────────────── */
.sn-files-wrap { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; }

.sn-files-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--surface-card);
  border-bottom: 1px solid var(--border-light); gap: 8px;
}
.sn-toolbar-check {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.sn-toolbar-check input { width: 15px; height: 15px; cursor: pointer; accent-color: #2563eb; }

.sn-dl-zip-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 8px; border: none; cursor: pointer;
  background: #2563eb; color: #fff; font-size: .76rem; font-weight: 700;
  transition: background .14s, opacity .14s;
}
.sn-dl-zip-btn:disabled { opacity: .4; cursor: default; }
.sn-dl-zip-btn:not(:disabled):hover { background: #1d4ed8; }

/* File card list */
.sn-files-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 24px;
}

/* ── Stitch-style note cards ── */
.sn-nc {
  display: flex; align-items: center; gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 12px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.sn-nc:hover {
  border-color: #a78bfa;
  box-shadow: 0 4px 18px rgba(109,71,255,.10);
}
.sn-nc__check { flex-shrink: 0; cursor: pointer; align-self: flex-start; padding-top: 2px; }
.sn-nc__check input { width: 15px; height: 15px; cursor: pointer; accent-color: #6C47FF; }

.sn-nc__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1;
  transition: transform .18s;
}
.sn-nc:hover .sn-nc__icon { transform: scale(1.07); }
.sn-nc__icon-img { width: 22px; height: 22px; object-fit: contain; display: block; }

.sn-nc__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.sn-nc__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sn-nc__title {
  font-size: .88rem; font-weight: 700; color: var(--text-primary);
  margin: 0; transition: color .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sn-nc:hover .sn-nc__title { color: #6C47FF; }

.sn-nc__desc {
  font-size: .74rem; color: var(--text-secondary); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sn-nc__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: .70rem; color: var(--text-muted); margin-top: 2px;
}
.sn-nc__tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 5px;
  font-size: .68rem; font-weight: 700;
}
.sn-nc__meta-dot { opacity: .4; }
.sn-nc__meta-text { color: var(--text-muted); }

.sn-nc__actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; align-self: center; }

.sn-nc__view-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 10px;
  border: 1.5px solid #6C47FF; background: transparent; color: #6C47FF;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  transition: background .13s, color .13s;
  white-space: nowrap;
}
.sn-nc__view-btn:hover { background: #6C47FF; color: #fff; }

.sn-nc__dl-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border-light);
  background: transparent; color: var(--text-secondary); text-decoration: none;
  transition: background .13s, color .13s, border-color .13s;
}
.sn-nc__dl-btn:hover { background: #f5f3ff; color: #6C47FF; border-color: #a78bfa; }

/* keep legacy selectors for old file-view if referenced elsewhere */
.sn-file-card, .sn-file-sel, .sn-file-icon, .sn-file-meta, .sn-file-name,
.sn-file-sub, .sn-file-actions, .sn-view-btn, .sn-dl-icon-btn { /* legacy */ }

/* ── Inline back row (replaces removed topbars) ── */
.sn-inline-back { padding: 10px 16px 4px; }
.sn-inline-back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-size: .8rem; font-weight: 700;
  color: var(--color-accent, #6C47FF);
  padding: 4px 8px; border-radius: 7px;
  transition: background .13s;
}
.sn-inline-back-btn:hover { background: rgba(108,71,255,.08); }

/* ── Review Panel subject cards ── */
.jrev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 16px;
}
.jrev-subj-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: 16px; padding: 20px 12px 16px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.jrev-subj-card:hover {
  border-color: #a78bfa;
  box-shadow: 0 6px 20px rgba(109,71,255,.12);
  transform: translateY(-3px);
}
.jrev-subj-icon {
  width: 144px; height: 198px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.jrev-subj-icon svg { width: 76px; height: 76px; }
.jrev-subj-info { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.jrev-subj-name { font-size: .85rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.jrev-subj-due  { font-size: .72rem; font-weight: 600; color: #f59e0b; }
.jrev-start-btn {
  width: 100%;
  padding: 7px 0; border-radius: 10px;
  border: 1.5px solid #6C47FF; background: transparent; color: #6C47FF;
  font-size: .75rem; font-weight: 700; cursor: pointer;
  transition: background .13s, color .13s;
}
.jrev-start-btn:hover { background: #6C47FF; color: #fff; }
/* ── Review Heat Grid ──────────────────────────────────────────────── */
.jrev-heat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding: 14px 14px 20px;
}
.jrev-heat-card {
  border-radius: 16px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  background: var(--subj-bg, #5C6EC8);
  border: 2.5px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* Diagonal light wash — same feel as question bank cards */
.jrev-heat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 100%);
  pointer-events: none;
}
.jrev-heat-card:hover { transform: translateY(-3px); }
/* Heat border + glow */
.jrev-heat-card--cool   { border-color: rgba(255,255,255,.35); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.jrev-heat-card--warm   { border-color: #FFD07A; box-shadow: 0 4px 18px rgba(255,160,40,.35); }
.jrev-heat-card--hot    { border-color: #FF8C55; box-shadow: 0 4px 20px rgba(232,96,44,.45); }
.jrev-heat-card--urgent {
  border-color: #FF4560;
  box-shadow: 0 4px 22px rgba(208,37,58,.55);
  animation: hcPulse 2.2s ease-in-out infinite;
}
@keyframes hcPulse {
  0%,100% { box-shadow: 0 4px 22px rgba(208,37,58,.55); }
  50%      { box-shadow: 0 4px 32px rgba(208,37,58,.85); }
}
.jrev-heat-icon {
  position: absolute; top: 11px; right: 13px;
  font-size: 1.15rem; line-height: 1;
}
.jrev-heat-xp-badge {
  display: inline-block;
  background: rgba(255,255,255,.22);
  border: 1.5px solid #FFD700;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.76rem; font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 7px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 6px rgba(255,215,0,.35);
}
.jrev-heat-xp-star { font-size: 1rem; vertical-align: -1px; }
.jrev-heat-subject {
  font-size: 0.78rem; font-weight: 700;
  color: rgba(255,255,255,.95); line-height: 1.2;
  margin-bottom: 6px; padding-right: 26px;
}
.jrev-heat-count {
  font-size: 1.65rem; font-weight: 900; line-height: 1;
  color: #fff; margin-bottom: 2px;
}
.jrev-heat-count-label {
  font-size: 0.62rem; font-weight: 600;
  color: rgba(255,255,255,.7); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 8px;
}
.jrev-heat-urgency {
  font-size: 0.63rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  margin-bottom: 10px;
}
.jrev-heat-btn {
  width: 100%; padding: 7px 0; border-radius: 9px;
  background: rgba(255,255,255,.22); color: #fff;
  font-size: 0.71rem; font-weight: 700; letter-spacing: 0.04em;
  border: 1.5px solid rgba(255,255,255,.45); cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  position: relative; z-index: 1;
  backdrop-filter: blur(4px);
}
.jrev-heat-btn:hover  { background: rgba(255,255,255,.35); }
.jrev-heat-btn:active { transform: scale(0.97); }

.jrev-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px 24px; text-align: center;
  color: var(--text-secondary);
}
.jrev-empty strong { font-size: 1.05rem; color: var(--text-primary); }
.jrev-empty p { font-size: .85rem; max-width: 280px; line-height: 1.5; }

/* legacy selectors kept for old views */
.sn-action-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 7px; border: none; cursor: pointer;
  font-size: .75rem; font-weight: 600; text-decoration: none;
  transition: background .13s;
}
.sn-action-view { background: #eff6ff; color: #2563eb; }
.sn-action-view:hover { background: #dbeafe; }
.sn-action-dl   { background: #f0fdf4; color: #16a34a; }
.sn-action-dl:hover { background: #dcfce7; }

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.q-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6rem;
  border: 1.5px solid transparent;
  text-transform: capitalize;
}
.q-tag--bloom {
  background: #ede9fe;
  color: #7c3aed;
  border-color: #c4b5fd;
}
.q-tag--history {
  background: var(--color-muted);
  color: var(--color-muted-fg);
  border-color: var(--color-border);
  font-weight: 400;
  font-family: var(--font-body);
  font-size: 0.7rem;
}
.q-tag--year {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde68a;
}
.q-tag--repeat {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
}
.q-tag--tested-mcq {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #c4b5fd;
  font-weight: 600;
}
.q-tag--marks {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
  font-weight: 700;
}
/* Marks tag row — shown below question text in all modes */
.question-marks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 8px;
  min-height: 0;
}
/* Organization tag — slate blue */
.q-tag--org {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Textbook page tag — emerald green */
.q-tag--tbp {
  background: #ecfdf5;
  color: #065f46;
  border-color: #6ee7b7;
  font-weight: 700;
}
/* Textbook page row below answer */
.answer-tbp-row {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.question-text {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-fg);
}

/* Question body: text+marks column left, image right (written default) */
.question-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.question-text-col {
  flex: 1;
  min-width: 0;
}
.question-text-col .question-text { margin: 0; }
.question-text-col .question-marks-row { margin: 4px 0 0; }
.question-image-wrap { flex-shrink: 0; }
.question-image { border-radius: var(--radius-sm); height: auto; width: auto; display: block; }

/* MCQ: image below question text */
.question-body--mcq {
  flex-direction: column;
  gap: 10px;
}
.question-body--mcq .question-image-wrap { width: 100%; }
.question-body--mcq .question-image { height: 125px; width: auto; }

/* MCQ Options */
.mcq-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* ── Reference-style MCQ option rows ──────────────────────────── */
.mcq-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--color-card);
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--color-fg);
}
.mcq-option:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
.mcq-option:active:not(:disabled) { transform: translateY(1px); }
.mcq-option:disabled { cursor: default; }

/* Circle letter badge */
.mcq-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  color: #64748b;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.mcq-option:hover:not(:disabled) .mcq-badge {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.mcq-text { flex: 1; font-family: var(--font-body); }

/* Correct state — green border + green text/badge */
.mcq-option.correct {
  background: #f0fdf4;
  border-color: #22c55e;
  border-width: 2px;
}
.mcq-option.correct .mcq-text { color: #15803d; }
.mcq-option.correct .mcq-badge {
  background: transparent;
  border-color: #22c55e;
  color: #15803d;
}

/* Wrong state — light red fill, bright red border, mid-dark red text/badge */
.mcq-option.wrong {
  background: #fee2e2;
  border-color: #ef4444;
  border-width: 2px;
}
.mcq-option.wrong .mcq-text { color: #b91c1c; }
.mcq-option.wrong .mcq-badge {
  background: #fecaca;
  border-color: #ef4444;
  color: #991b1b;
}

/* Struck-through */
.mcq-option.struck { opacity: .42; }
.mcq-option.struck .mcq-text { text-decoration: line-through; }

/* Legacy option-btn (static HTML fallback — hidden in new layout) */
.option-btn { display: none; }

/* Structured */
.structured-area { display: flex; flex-direction: column; gap: var(--sp-1); position: relative; }

/* Sub-question header — shown above textarea for multi-part structured questions */
.struct-sub-header {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
}
.struct-sub-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1d4ed8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 4px;
}
.struct-sub-stem {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 600;
  color: #1e3a8a;
  line-height: 1.5;
}
/* All-done banner after last sub-question */
.struct-all-done {
  margin-top: 10px;
  padding: 8px 14px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  color: #15803d;
  font-size: 0.85rem;
  font-weight: 700;
}
/* Dedicated cloze answer word (flashcard back) */
.fc-cloze-answer-word {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.structured-expl-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 10px;
  flex-shrink: 0;
}
.struct-ans-expl-img {
  display: block;
  max-height: 280px;
  width: auto;
  max-width: 100%;
  border-radius: 8px;
  margin-top: 12px;
  object-fit: contain;
}
.structured-answer-img {
  display: block;
  max-width: 20%;
  height: auto;
  border-radius: 8px;
  margin-top: 10px;
}
.structured-expl-text {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--color-fg);
  margin: 0 0 8px;
}
.structured-expl-card .theory-card { margin-bottom: 8px; }
.answer-label {
  display: block;
  background: #f1f5f9;
  color: #64748b;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.answer-body {
  background: #f8fafc;
  padding: 14px 16px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--color-fg);
  white-space: pre-wrap;
}
.answer-textarea {
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  border: 3px solid var(--color-border);
  background: var(--color-card);
  font-size: 1.15rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 120px;
  box-shadow: var(--shadow-clay-sm);
  transition: border-color .2s;
}
.answer-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15), var(--shadow-clay-sm);
}

/* Feedback Panel — inside quiz-right on desktop, standalone on mobile */
.feedback-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--sp-2) var(--sp-3);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.feedback-header {
  font-family: Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}
.feedback-title--correct { color: var(--color-success); }
.feedback-title--wrong   { color: var(--color-muted-fg); font-weight: 500; font-size: .95rem; }

/* Answer box — clean white card, no distracting hue */
.feedback-answer {
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.answer-label {
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted-fg);
  white-space: nowrap;
}
/* Circle badge for the correct option letter — green circle */
.answer-letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #16a34a;
  border: 2px solid #16a34a;
  color: #fff;
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.answer-opt-text {
  font-family: Verdana, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.45;
  flex: 1;
}

.feedback-explanation {
  font-family: Verdana, sans-serif;
  font-size: 0.9rem;
  color: var(--color-muted-fg);
  line-height: 1.5;
}

/* Show Answer button — neutral slate */
.btn-show-answer {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
.btn-show-answer:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px);
}
body.theme-dark .btn-show-answer {
  background: rgba(255,255,255,.08) !important;
  color: #cbd5e1 !important;
  border-color: rgba(255,255,255,.15) !important;
}

.self-rate-btns { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 20px; }
.self-rate-btns .clay-btn { flex: 1; height: 52px; font-size: 0.95rem; transition: background .18s, color .18s, border-color .18s, border-width .18s, box-shadow .18s, transform .18s; }
/* Always reset transform when disabled so hover rotation never sticks */
.self-rate-btns .clay-btn:disabled { transform: none !important; filter: none !important; }

/* Got it hover — stays dark, slight lift */
#btn-self-correct:hover:not(:disabled) {
  background: #1e293b;
  color: #fff;
  border-color: #334155;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
/* Partially — amber tone */
.btn-partial {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fbbf24 !important;
}
#btn-self-partial:hover:not(:disabled) {
  background: #fde68a !important;
  border-color: #f59e0b !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245,158,11,.25);
}
/* Wrong hover — transparent bg, dark border */
#btn-self-wrong:hover:not(:disabled) {
  background: transparent;
  color: #0f172a;
  border-color: #475569;
  border-width: 2px;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}

/* Next button — pinned to bottom of quiz-right */
.quiz-right #btn-next {
  flex-shrink: 0;
  width: calc(100% - 48px);
  height: 52px;
  margin: 0 24px 16px;
  align-self: center;
}
/* Fallback for when btn-next is outside quiz-right (mobile/structured) */
.btn-next { width: 100%; height: 52px; margin-top: 4px; }

/* ── Results Screen ───────────────────────────────────────────── */
#view-results.view-active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: #eef2f7;
}
#view-results.view-active .view-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--sp-4) var(--sp-3);
}
.results-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 32px rgba(0,0,0,.10);
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 520px;
}

.results-mascot {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--sp-2);
}
.results-mascot svg { filter: drop-shadow(0 4px 12px rgba(0,0,0,.15)); }

.results-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
  color: var(--color-fg);
}
.results-score {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: var(--sp-1) 0;
}
.results-marks {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: -4px 0 var(--sp-1);
}
.results-stars {
  text-align: center;
  font-size: 2.5rem;
  letter-spacing: 4px;
  margin-bottom: var(--sp-3);
}
.results-btns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.results-btns .clay-btn { width: 100%; height: 56px; font-size: 1.1rem; }

/* Redo pill row */
.redo-pill-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.redo-pill {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border-radius: 50px;
  font-size: 0.8rem; font-weight: 800;
  border-bottom: 3px solid rgba(0,0,0,.18);
  cursor: pointer; white-space: nowrap;
  transition: box-shadow .15s, transform .1s, filter .1s;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 0 2px rgba(0,0,0,.10);
  background: #E8602C; color: #fff;
}
.redo-pill:hover  { filter: brightness(1.1); }
.redo-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 1px rgba(0,0,0,.10); }
.redo-pill--flag  { background: #F59E0B; color: #0F172A; }
.redo-pill--both  { background: #EC4899; color: #fff; }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--sp-2);
}
.modal-box {
  width: 100%;
  max-width: 360px;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
}
.avatar-picker {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.avatar-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  touch-action: manipulation;
}
.avatar-swatch:hover { transform: scale(1.15); }
.avatar-swatch.selected {
  border-color: var(--color-fg);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-fg);
}
.profile-name-input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-md);
  border: 3px solid var(--color-border);
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--color-muted);
  color: var(--color-fg);
  transition: border-color .2s;
}
.profile-name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.modal-btns { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.modal-btns .clay-btn { flex: 1; min-width: 100px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 400px) {
  .brand-title { font-size: 1.6rem; }
  .screen-title { font-size: 1.3rem; }
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
  .mode-label { font-size: 1.2rem; }
}

@media (min-width: 600px) {
  .profile-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .view-inner { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .mode-row .mode-card { min-height: 160px; }
  .question-card { padding: var(--sp-4); }
  .question-text { font-size: 1.2rem; }
  .option-btn { padding: 16px var(--sp-3); font-size: 1rem; }
  .feedback-answer { font-size: 1rem; }
  .feedback-panel { padding: var(--sp-3) var(--sp-4); }
}

@media (min-width: 1024px) {
  .view-inner { padding: var(--sp-4) var(--sp-5) var(--sp-6); }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .profile-grid { grid-template-columns: repeat(5, 1fr); }
  .question-text { font-size: 1.25rem; line-height: 1.75; }
  .option-btn { padding: 18px var(--sp-3); font-size: 1.05rem; }
}

/* ── Wide question screen — vertical stack, bigger everything ─── */
@media (min-width: 1100px) {
  .question-text { font-size: 1.4rem; line-height: 1.85; }
  .option-btn { padding: 20px var(--sp-4); font-size: 1.15rem; }
  .answer-textarea { min-height: 160px; font-size: 1.05rem; }
  .question-card { padding: var(--sp-4) var(--sp-5); }
  .feedback-panel { padding: var(--sp-3) var(--sp-5); }
}

/* ── XP / Level bar — hidden; XP still tracked for summary/achievements ── */
.xp-bar-row {
  display: none;
}
.xp-level-tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--color-primary);
  white-space: nowrap;
  min-width: 36px;
}
.xp-track {
  flex: 1;
  height: 8px;
  background: var(--color-muted);
  border-radius: 99px;
  overflow: hidden;
  border: 1.5px solid var(--color-border);
}
.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 99px;
  transition: width .55s cubic-bezier(.34,1.56,.64,1);
}
.xp-pts {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  color: #f59e0b;
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}
.streak-fire {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  color: #ea580c;
  white-space: nowrap;
  animation: fire-pulse 1.1s ease-in-out infinite;
}
@keyframes fire-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

/* On-fire card glow */
.question-card.on-fire {
  border-color: #fb923c !important;
  animation: fire-glow 2s ease-in-out infinite;
}
@keyframes fire-glow {
  0%, 100% { box-shadow: var(--shadow-clay-md), 0 0 18px rgba(234,88,12,.3); }
  50%       { box-shadow: var(--shadow-clay-md), 0 0 36px rgba(234,88,12,.55); }
}

/* Correct opt-key pop */
@keyframes opt-key-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.option-btn.correct .opt-key { animation: opt-key-pop .4s ease forwards; }

/* Mascot mini in feedback */
.mascot-mini {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

/* Session summary chips */
.session-summary {
  display: flex;
  gap: var(--sp-1);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.summary-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-card);
  border: 2.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-fg);
}

/* Level-up toast */
.level-up-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  padding: 18px 36px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-lg);
  pointer-events: none;
  z-index: 9999;
  animation: lvl-up 1.8s ease forwards;
}
@keyframes lvl-up {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  25%  { transform: translate(-50%,-50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-58%); }
}

/* ── Achievement Popup ───────────────────────────────────────── */
#ach-popup {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  background: var(--color-card);
  border: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-lg);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 280px;
  max-width: 380px;
  pointer-events: none;
  opacity: 0;
}
.ach-popup-icon {
  font-size: 2.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.ach-popup-body { flex: 1; }
.ach-popup-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
.ach-popup-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-fg);
}
.ach-popup-desc {
  font-size: 0.8rem;
  color: var(--color-muted-fg);
  margin-top: 2px;
}

/* ── Rank Badge (fixed top-right) ────────────────────────────── */
#rank-badge {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--color-card);
  border: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  padding: 6px 10px;
  cursor: pointer;
  min-width: 60px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  user-select: none;
}
#rank-badge:hover {
  border-color: var(--color-primary);
  background: #dbeafe;
  box-shadow: var(--shadow-clay-md);
}
#rank-badge-icon {
  font-size: 1.1rem;
  line-height: 1;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-fg);
  text-align: center;
  white-space: nowrap;
}
#rank-badge-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  text-align: center;
  white-space: nowrap;
}

/* ── Session Badge Strip (in progress bar area) ──────────────── */
#session-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
  min-height: 0;
}
.session-badge-pip {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* ── Achievement Gallery Modal ───────────────────────────────── */
.ach-gallery-box {
  max-width: 540px;
  width: 90vw;
}
.ach-gallery-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-muted-fg);
  text-align: center;
  margin: -8px 0 16px;
}
.ach-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  max-height: 60vh;
  overflow-y: auto;
}
.ach-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 10px;
  border-radius: var(--radius-md);
  border: 2.5px solid var(--color-border);
  background: var(--color-card);
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.ach-gallery-item.earned {
  border-color: var(--color-secondary);
  background: #fffbeb;
  box-shadow: var(--shadow-clay-sm);
}
.ach-gallery-icon {
  font-size: 2.2rem;
  line-height: 1;
}
.ach-gallery-item.locked .ach-gallery-icon {
  filter: grayscale(1) opacity(.35);
}
.ach-gallery-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-fg);
  line-height: 1.2;
}
.ach-gallery-item.locked .ach-gallery-name {
  color: var(--color-muted-fg);
}
.ach-gallery-desc {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--color-muted-fg);
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 9 — AUTH, DASHBOARDS, ANALYTICS
   ══════════════════════════════════════════════════════════════ */

/* ── Auth views ───────────────────────────────────────────────── */
.view-inner--auth {
  max-width: 480px;
  padding-top: var(--sp-4);
}

.auth-subtitle {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  margin-bottom: var(--sp-3);
}

.auth-page-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-fg);
  text-align: center;
  margin-bottom: 4px;
}

.auth-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted-fg);
  margin-top: var(--sp-2);
}

/* ── Login / Register box ─────────────────────────────────────── */
.login-box, .register-box, .add-child-box {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.login-btn { width: 100%; height: 52px; font-size: 1.05rem; }

/* ── Form elements ────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-fg);
}

.form-hint {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-muted-fg);
}

.form-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-md);
  border: 3px solid var(--color-border);
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--color-muted);
  color: var(--color-fg);
  transition: border-color .2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.form-select {
  height: 48px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.hint-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: inherit;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  touch-action: manipulation;
}
.hint-link:hover { color: var(--color-primary-dark); }

.parent-login-hint { margin-top: 6px; }

.remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-muted-fg);
  cursor: pointer;
  user-select: none;
}
.remember-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.auth-error {
  background: var(--color-error-light);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--color-error);
  font-family: var(--font-body);
  line-height: 1.4;
}

/* Passcode row with suggest button */
.passcode-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.passcode-input-row .form-input { flex: 1; }

/* ── Small button variant ─────────────────────────────────────── */
.btn-sm {
  height: 36px !important;
  padding: 0 var(--sp-2) !important;
  font-size: 0.82rem !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Top bar with auth controls ──────────────────────────────── */
.top-bar--auth {
  justify-content: space-between;
  padding-top: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.top-bar-greeting {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-fg);
}

/* ── Section headers ──────────────────────────────────────────── */
.section-header {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-fg);
  margin-bottom: var(--sp-2);
  padding-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   PARENT PORTAL — Professional Dashboard
   ══════════════════════════════════════════════════════════════ */

.view-inner--pdash {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 var(--sp-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── Header ──────────────────────────────────────────────────── */
.pdash-header {
  background: #fff;
  border-bottom: 2px solid var(--color-border);
  padding: 14px var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 14px rgba(37,99,235,.08);
}

.pdash-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdash-brand-icon { font-size: 1.5rem; line-height: 1; }
.pdash-brand-text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-fg);
  letter-spacing: -.01em;
}
.pdash-brand-text strong { color: var(--color-primary); }
.pdash-portal-tag {
  background: #EFF6FF;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1.5px solid #BFDBFE;
}

.pdash-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.pdash-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdash-user-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #7c3aed);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.pdash-user-info { text-align: right; }
.pdash-user-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-fg);
}
.pdash-user-date {
  font-size: 0.7rem;
  color: var(--color-muted-fg);
  margin-top: 1px;
}
.pdash-signout {
  background: none;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  cursor: pointer;
  transition: border-color .2s, color .2s;
  touch-action: manipulation;
  white-space: nowrap;
}
.pdash-signout:hover { border-color: #ef4444; color: #ef4444; }

/* ── Stats Strip ─────────────────────────────────────────────── */
.pdash-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
}
.pdash-stat {
  background: #fff;
  border-radius: 16px;
  border: 2px solid var(--color-border);
  border-left: 5px solid var(--s-color, var(--color-primary));
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 16px var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdash-stat-value {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--s-color, var(--color-primary));
  line-height: 1;
}
.pdash-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Panels (section cards) ──────────────────────────────────── */
.pdash-panel {
  background: #fff;
  border-radius: 18px;
  border: 2px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  overflow: hidden;
  margin: 0 var(--sp-4);
}
.pdash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 16px var(--sp-4);
  background: #FAFBFF;
  border-bottom: 2px solid var(--color-border);
}
.pdash-panel-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-fg);
  margin: 0;
}
.pdash-panel-sub {
  font-size: 0.74rem;
  color: var(--color-muted-fg);
  margin: 3px 0 0 0;
}

/* ── Goals List ──────────────────────────────────────────────── */
.pdash-goals-list {
  display: flex;
  flex-direction: column;
}
.pdash-goal-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  transition: background .15s;
}
.pdash-goal-row:last-child { border-bottom: none; }
.pdash-goal-row:hover { background: #F8FAFF; }
.pdash-goal-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pdash-goal-info { flex: 1; min-width: 0; }
.pdash-goal-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-fg);
}
.pdash-goal-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.pdash-goal-progress-text {
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  white-space: nowrap;
}
.pdash-goal-bar {
  flex: 1;
  height: 5px;
  background: var(--color-muted);
  border-radius: 99px;
  overflow: hidden;
  max-width: 120px;
}
.pdash-goal-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-primary), #3b82f6);
  transition: width .4s ease;
}
.pdash-goal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pdash-goal-controls-label {
  font-size: 0.7rem;
  color: var(--color-muted-fg);
  font-weight: 600;
  white-space: nowrap;
}
.pdash-goal-input {
  width: 58px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-fg);
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.pdash-goal-input:focus { border-color: var(--color-primary); }
.pdash-goal-set-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 13px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
  touch-action: manipulation;
  white-space: nowrap;
}
.pdash-goal-set-btn:hover { background: #1d4ed8; }
.pdash-goal-set-btn:active { transform: scale(.95); }
.pdash-goal-saved {
  font-size: 0.72rem;
  color: var(--color-success);
  font-weight: 700;
  opacity: 0;
  transition: opacity .3s;
  white-space: nowrap;
}
.pdash-goal-saved.show { opacity: 1; }

/* ── Learners Grid (inside panel) ────────────────────────────── */
.pdash-add-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
  touch-action: manipulation;
  white-space: nowrap;
  flex-shrink: 0;
}
.pdash-add-btn:hover { background: #1d4ed8; }
.pdash-add-btn:active { transform: scale(.96); }

.parent-dash-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pdash-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .pdash-portal-tag { display: none; }
  .pdash-user-date  { display: none; }
  .pdash-goal-bar   { display: none; }
  .pdash-panel, .pdash-stats-strip { margin: 0 var(--sp-2); }
}
@media (max-width: 420px) {
  .pdash-brand-text { display: none; }
  .pdash-goal-controls-label { display: none; }
}

/* Legacy alias (keep old class working for child cards) */
.parent-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-2);
}

/* ── Child Card (parent view) ─────────────────────────────────── */
.child-card {
  background: var(--color-card);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-md);
  padding: var(--sp-3);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.child-card:hover {
  box-shadow: var(--shadow-clay-lg);
  transform: translateY(-3px);
}
.child-card:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-clay-press);
}

.child-card-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.child-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.6);
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  flex-shrink: 0;
}
.child-card-info { flex: 1; min-width: 0; }
.child-card-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  margin-top: 3px;
}

.child-card-ach {
  display: flex;
  gap: 4px;
  align-items: center;
}

.ach-mini-badge {
  font-size: 1.4rem;
  line-height: 1;
}

.child-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.last-active-label {
  font-size: 0.78rem;
  color: var(--color-muted-fg);
}

.acc-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  background: var(--color-success-light);
  color: var(--color-success);
  border: 1.5px solid var(--color-success);
}

.child-card-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-muted-fg);
}
.goal-mini-bar {
  flex: 1;
  height: 6px;
  background: var(--color-muted);
  border-radius: 99px;
  overflow: hidden;
  border: 1.5px solid var(--color-border);
}
.goal-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #3b82f6);
  border-radius: 99px;
}

/* Centile placeholder chip (parent child card) */
.child-card-centile {
  margin-top: 2px;
}
.centile-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--color-muted);
  border: 1.5px dashed var(--color-border);
  font-size: 0.7rem;
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Centile stat tile (child dashboard) */
.child-stat-tile--centile {
  position: relative;
}
.centile-placeholder-val {
  color: var(--color-muted-fg) !important;
  font-size: 1.4rem !important;
}
.centile-placeholder-tag {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  background: var(--color-muted);
  border: 1px dashed var(--color-border);
  border-radius: 99px;
  padding: 1px 6px;
  margin-top: 3px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Add child card (dashed) */
.child-card-add {
  border-style: dashed;
  border-color: var(--color-primary);
  background: var(--color-muted);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  gap: 8px;
  color: var(--color-primary);
}
.child-card-add:hover {
  background: #dbeafe;
  box-shadow: var(--shadow-clay-sm);
}
.child-card-add-icon {
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
}
.child-card-add-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Add child form */
.add-child-btns { margin-top: 8px; }

/* ── Child Dashboard (redesigned) ────────────────────────────── */

/* Hero banner */
.child-dash-hero {
  background: linear-gradient(135deg, #2563EB 0%, #7c3aed 100%);
  border-radius: var(--radius-xl);
  border: 3px solid #1d4ed8;
  box-shadow: var(--shadow-clay-lg);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  margin-bottom: var(--sp-2);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.child-dash-hero::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.child-dash-hero-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.child-dash-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800; font-size: 1.4rem; color: #fff;
  flex-shrink: 0;
}
.child-dash-hero-info { flex: 1; }
.child-dash-hero-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
}
.child-dash-hero-sub {
  font-size: 0.82rem;
  opacity: .85;
  margin-top: 2px;
}
.child-dash-level-badge {
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px;
  padding: 3px 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}
/* XP bar inside hero */
.child-dash-xp { }
.child-dash-xp-info { }
.child-dash-level-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  opacity: .9;
  margin-bottom: 6px;
}
.dash-xp-track {
  height: 10px;
  background: rgba(255,255,255,.2);
  border-radius: 99px;
  overflow: hidden;
}
.dash-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f97316);
  border-radius: 99px;
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
.dash-xp-label {
  font-size: 0.7rem;
  opacity: .75;
  margin-top: 4px;
  font-family: var(--font-heading);
}

/* Quick stats strip */
.child-dash-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--sp-2);
}
.child-stat-tile {
  background: var(--color-card);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  padding: 12px 8px;
  text-align: center;
}
.child-stat-tile-val {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-primary);
  line-height: 1;
}
.child-stat-tile-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  margin-top: 4px;
}

/* Weekly goal ring */
.goal-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-card);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.goal-ring-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-fg);
}

/* Two action buttons */
.dash-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.dash-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 110px;
  padding: var(--sp-2);
  border-radius: var(--radius-xl);
  border: 3px solid transparent;
  box-shadow: var(--shadow-clay-lg);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  transition: box-shadow .2s, transform .2s;
  touch-action: manipulation;
}
.dash-action-btn:hover { transform: translateY(-4px); box-shadow: 0 8px 0 5px rgba(0,0,0,.16), 0 20px 40px rgba(37,99,235,.2); }
.dash-action-btn:active { transform: translateY(2px); box-shadow: var(--shadow-clay-press); }
.dash-action-btn--practice {
  background: linear-gradient(145deg, #2563EB 0%, #1d4ed8 100%);
  border-color: #1e40af;
  color: #fff;
}
.dash-action-btn--review {
  background: linear-gradient(145deg, #F59E0B 0%, #d97706 100%);
  border-color: #b45309;
  color: #0F172A;
}
.dash-action-btn-icon { font-size: 2.2rem; line-height: 1; }
.dash-action-btn-sub {
  font-size: 0.75rem;
  opacity: .85;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1;
}

/* Dashboard sections */
.dash-section {
  background: var(--color-card);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.dash-section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-fg);
  margin-bottom: var(--sp-1);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Exam readiness strip */
.readiness-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 14px;
  background: var(--color-card);
  border: 2.5px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  box-shadow: var(--shadow-clay-sm);
}
.readiness-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-fg);
  min-width: 120px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.readiness-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-muted);
  border-radius: 99px;
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  min-width: 60px;
}
.readiness-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}
.readiness-pct {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.82rem;
  min-width: 36px;
  text-align: right;
}

/* Weak spots */
.weak-spot-card {
  background: var(--color-card);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  padding: 12px var(--sp-2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.weak-spot-q {
  flex: 1;
  font-size: 0.88rem;
  color: var(--color-fg);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.weak-spot-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-error-light);
  border: 1.5px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  min-width: 44px;
}
.weak-spot-count {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-error);
}
.weak-spot-label {
  font-size: 0.6rem;
  color: var(--color-error);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Recent achievements (dash) */
.recent-ach-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.recent-ach-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fffbeb;
  border: 2.5px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-clay-sm);
  min-width: 80px;
}
.recent-ach-icon { font-size: 1.8rem; line-height: 1; }
.recent-ach-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--color-fg);
  text-align: center;
  line-height: 1.2;
}

/* Sparkline */
.sparkline-wrap {
  background: var(--color-card);
  border: 2.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  padding: 14px var(--sp-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sparkline-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
}

/* ── Stat chip row (child detail) ─────────────────────────────── */
.stat-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-card);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  padding: 10px 18px;
  flex: 1;
  min-width: 80px;
}
.stat-chip-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-primary);
}
.stat-chip-label {
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  text-align: center;
}

/* ── Session log ──────────────────────────────────────────────── */
.session-log {
  max-height: 320px;
  overflow-y: auto;
  border: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  box-shadow: var(--shadow-clay-sm);
}
.session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--color-muted);
  font-size: 0.82rem;
  color: var(--color-fg);
  flex-wrap: wrap;
}
.session-row:last-child { border-bottom: none; }
.session-row-date {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-muted-fg);
  white-space: nowrap;
  min-width: 80px;
}
.session-row-chapter {
  flex: 1;
  font-size: 0.82rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 80px;
}
.session-score-pill {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.session-score-pill.good  { background: var(--color-success-light); color: var(--color-success); border: 1.5px solid var(--color-success); }
.session-score-pill.mid   { background: #fef3c7; color: #d97706; border: 1.5px solid #d97706; }
.session-score-pill.bad   { background: var(--color-error-light); color: var(--color-error); border: 1.5px solid var(--color-error); }
.session-mode-badge {
  font-size: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--color-muted);
  color: var(--color-muted-fg);
  border: 1.5px solid var(--color-border);
  white-space: nowrap;
}
.session-time {
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  white-space: nowrap;
}

/* Weekly goal setter (parent) */
.goal-setter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-1);
}
.goal-setter input[type="number"] {
  width: 80px;
  height: 44px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  border: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-muted);
  color: var(--color-fg);
}
.goal-setter input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  color: var(--color-muted-fg);
}
.empty-state-icon { font-size: 3rem; margin-bottom: var(--sp-1); }
.empty-state-msg {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-muted-fg);
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Persistent App Header ────────────────────────────────────── */
#app-header {
  position: fixed;
  top: 4px; left: 0; right: 0;      /* sits just below the 4px accent bar */
  height: 36px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 96px 0 var(--sp-2);   /* right: 96px clears the rank badge (fixed, right:14px, ~80px wide) */
  z-index: 150;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
body.theme-dark #app-header {
  background: rgba(30,41,59,.97);
  border-color: var(--color-border);
}
.app-hdr-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background .15s;
}
.app-hdr-brand:hover { background: rgba(37,99,235,.08); }
.app-hdr-brand:active { background: rgba(37,99,235,.15); }
.page-header__brand {
  border-radius: 8px;
  padding: 3px 6px;
  margin: -3px -6px;
  transition: background .15s;
}
.page-header__brand:hover { background: rgba(37,99,235,.08); }
.page-header__brand:active { background: rgba(37,99,235,.15); }
.app-hdr-logo { font-size: 1rem; line-height: 1; }
.app-hdr-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-fg);
  letter-spacing: -.01em;
}
.app-hdr-name strong { color: var(--color-primary); }
.app-hdr-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: 0 10px;
}
.app-hdr-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

/* ── Chapters subheader (toggle + back, below app-header) ─────── */
.chapters-subheader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-2) 0 var(--sp-3);
}


/* XP bar row in the persistent app header */
.app-hdr-xp {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding-left: var(--sp-2);
}
.app-hdr-xp .xp-level-tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.app-hdr-xp .xp-track {
  width: 90px;
  height: 6px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.app-hdr-xp .xp-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transition: width 0.4s ease;
}
.app-hdr-xp .xp-pts {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  color: #f59e0b;
  white-space: nowrap;
}
.app-hdr-xp .streak-fire {
  font-size: 0.78rem;
  font-weight: 700;
}
@media (max-width: 400px) {
  .app-hdr-xp .xp-track { width: 56px; }
  .app-hdr-xp .xp-pts { display: none; }
}

/* Push view content below header when shown (4px bar + 36px header = 40px) */
body.has-app-header .view-inner {
  padding-top: calc(var(--sp-3) + 40px);
}

/* ── Grade Rank Strip (between greeting and hero) ──────────────── */
.grade-rank-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--sp-2);
  background: var(--color-card);
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-border);
  margin-bottom: var(--sp-2);
}
.grade-rank-icon { font-size: 1rem; flex-shrink: 0; }
.grade-rank-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-fg);
}
.grade-rank-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-primary);
  min-width: 24px;
}
.grade-rank-tag {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* ── Focus Styles ─────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   THEME ENGINE — Grade × Gender × Time-of-Day × Dark Mode
   Layers as body classes: grade-7 gender-female tod-evening theme-dark
   ══════════════════════════════════════════════════════════════ */

/* ── Ambient Hue Drift (Option C — ±12 deg, 40 s cycle) ─────── */
@keyframes hue-drift {
  0%   { filter: hue-rotate(0deg);  }
  33%  { filter: hue-rotate(12deg); }
  66%  { filter: hue-rotate(-8deg); }
  100% { filter: hue-rotate(0deg);  }
}
.child-dash-hero   { animation: hue-drift 40s ease-in-out infinite; }
.child-dash-avatar { animation: hue-drift 40s ease-in-out infinite 8s; }
.pdash-user-av     { animation: hue-drift 40s ease-in-out infinite 4s; }

/* ── Grade 6 — full claymorphism (default :root values) ───────── */
/* No overrides needed — :root already holds grade-6 values */

/* ── Grade 7 ─────────────────────────────────────────────────── */
body.grade-7 {
  --radius-sm: 10px; --radius-md: 15px; --radius-lg: 20px; --radius-xl: 28px;
  --shadow-clay-sm:    0 2px 0 2.5px rgba(0,0,0,.11), 0 4px 10px rgba(37,99,235,.09);
  --shadow-clay-md:    0 3px 0 3.5px rgba(0,0,0,.13), 0 6px 20px rgba(37,99,235,.11);
  --shadow-clay-lg:    0 5px 0 4px   rgba(0,0,0,.14), 0 12px 32px rgba(37,99,235,.13);
  --shadow-clay-press: 0 1px 0 2px   rgba(0,0,0,.13), 0 2px 6px  rgba(0,0,0,.09);
}

/* ── Grade 8 ─────────────────────────────────────────────────── */
body.grade-8 {
  --font-body: 'Nunito', sans-serif;
  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px;
  --shadow-clay-sm:    0 1px 0 2px   rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.08);
  --shadow-clay-md:    0 1px 4px rgba(0,0,0,.06);
  --shadow-clay-lg:    0 2px 8px rgba(0,0,0,.07);
  --shadow-clay-press: 0 1px 2px rgba(0,0,0,.06);
}
body.grade-8 .clay-card, body.grade-8 .clay-btn { border-width: 1px; }

/* ── Grade 9 ─────────────────────────────────────────────────── */
body.grade-9 {
  --font-body: 'Nunito', sans-serif;
  --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 13px; --radius-xl: 18px;
  --shadow-clay-sm:    0 1px 2px rgba(0,0,0,.06);
  --shadow-clay-md:    0 1px 4px rgba(0,0,0,.06);
  --shadow-clay-lg:    0 2px 8px rgba(0,0,0,.07);
  --shadow-clay-press: 0 1px 2px rgba(0,0,0,.05);
}
body.grade-9 .clay-card, body.grade-9 .clay-btn { border-width: 1px; }

/* ── Grade 6-7: same layout approach as grade 8/9, compressed sizes ── */

/* Sidebar: hidden-scroll so Sign Out is always reachable on short screens */
body.grade-6 .pro-sidebar,
body.grade-7 .pro-sidebar { overflow-y: auto; scrollbar-width: none; }
body.grade-6 .pro-sidebar::-webkit-scrollbar,
body.grade-7 .pro-sidebar::-webkit-scrollbar { display: none; }

/* Grade 6-7 use new .pro-sb-* card layout — old user section overrides not needed */

/* pro-main: invisible scrollbar as safety net */
body.grade-6 .pro-main,
body.grade-7 .pro-main { scrollbar-width: none; }
body.grade-6 .pro-main::-webkit-scrollbar,
body.grade-7 .pro-main::-webkit-scrollbar { display: none; }

/* Wrap — standard gap layout (same as grade 8/9), just tighter padding */
body.grade-6 .pro-main .jdash-wrap,
body.grade-7 .pro-main .jdash-wrap { padding: 8px 20px; }

/* Stat cards — compressed */
body.grade-6 .jdash-stat,
body.grade-7 .jdash-stat { padding: 12px 8px; gap: 2px; }
body.grade-6 .jdash-stat-icon,
body.grade-7 .jdash-stat-icon { font-size: 1.35rem; }
body.grade-6 .jdash-stat-val,
body.grade-7 .jdash-stat-val  { font-size: 1.35rem; }

/* Practice/Review buttons — fixed height like grade 8/9 */
body.grade-6 .jdash-actions,
body.grade-7 .jdash-actions   { margin-top: 0; gap: 12px; }
body.grade-6 .jdash-action-btn,
body.grade-7 .jdash-action-btn { height: 164px; font-size: 1rem; }

/* Activity card — compressed padding */
body.grade-6 .jdash-activity,
body.grade-7 .jdash-activity   { padding: 8px 14px; }
body.grade-6 .jdash-activity__header,
body.grade-7 .jdash-activity__header { margin-bottom: 4px; }

/* This Week card — compressed */
body.grade-6 .jdash-card,
body.grade-7 .jdash-card       { padding: 10px 14px; }
body.grade-6 .jdash-card-head,
body.grade-7 .jdash-card-head  { margin-bottom: 6px; }
body.grade-6 .jdash-dot,
body.grade-7 .jdash-dot        { width: 28px; height: 28px; }
body.grade-6 .jdash-week-dots,
body.grade-7 .jdash-week-dots  { gap: 5px; }

body.grade-6 .jdash-card--week,
body.grade-7 .jdash-card--week { margin-top: 0; }

/* ── Grade 10 — refined, low-color professional ──────────────── */
body.grade-10 {
  --font-body:          'DM Sans', sans-serif;
  --font-heading:       'DM Sans', sans-serif;
  --radius-sm: 5px;     --radius-md: 8px;   --radius-lg: 10px;  --radius-xl: 14px;
  --color-primary:      #3730a3;  /* deep indigo */
  --color-primary-dark: #312e81;
  --color-secondary:    #64748b;
  --color-accent:       #4f46e5;
  --color-bg:           #eef2f7;
  --color-card:         #ffffff;
  --color-border:       #dde3ec;
  --shadow-clay-sm:    0 1px 3px rgba(0,0,0,.07);
  --shadow-clay-md:    0 2px 6px rgba(0,0,0,.08);
  --shadow-clay-lg:    0 4px 12px rgba(0,0,0,.08);
  --shadow-clay-press: 0 1px 2px rgba(0,0,0,.06);
  background-image: none;
}
body.grade-10 .clay-card, body.grade-10 .clay-btn { border-width: 1.5px; }
/* Grade 10 hero: fixed deep-indigo gradient regardless of TOD */
body.grade-10.tod-morning,
body.grade-10.tod-afternoon,
body.grade-10.tod-evening,
body.grade-10.tod-night {
  --tod-hero-gradient: linear-gradient(135deg, #3730a3 0%, #1e293b 100%);
  --tod-top-bar:       linear-gradient(90deg, #3730a3 0%, #4f46e5 50%, #1e293b 100%);
}
/* Disable hue-drift for grade 10 */
body.grade-10 .child-dash-hero,
body.grade-10 .child-dash-avatar,
body.grade-10 .pdash-user-av { animation: none; }

/* ── Grade 11 — ultra-minimal, monochrome professional ───────── */
body.grade-11 {
  --font-body:          'DM Sans', sans-serif;
  --font-heading:       'DM Sans', sans-serif;
  --radius-sm: 4px;     --radius-md: 6px;   --radius-lg: 8px;   --radius-xl: 10px;
  --color-primary:      #1e293b;  /* near-black slate */
  --color-primary-dark: #0f172a;
  --color-secondary:    #475569;
  --color-accent:       #334155;
  --color-bg:           #f0f4f8;
  --color-card:         #ffffff;
  --color-border:       #dde3ec;
  --color-muted:        #f8fafc;
  --shadow-clay-sm:    0 1px 2px rgba(0,0,0,.06);
  --shadow-clay-md:    0 1px 4px rgba(0,0,0,.07);
  --shadow-clay-lg:    0 2px 8px rgba(0,0,0,.07);
  --shadow-clay-press: 0 1px 1px rgba(0,0,0,.05);
  background-image: none;
}
body.grade-11 .clay-card, body.grade-11 .clay-btn { border-width: 1px; }
/* Grade 11 hero: near-black slate, no color */
body.grade-11.tod-morning,
body.grade-11.tod-afternoon,
body.grade-11.tod-evening,
body.grade-11.tod-night {
  --tod-hero-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --tod-top-bar:       linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}
/* Disable hue-drift and remove decorative accents for grade 11 */
body.grade-11 .child-dash-hero,
body.grade-11 .child-dash-avatar,
body.grade-11 .pdash-user-av { animation: none; }
body.grade-11 .child-dash-hero::after { display: none; }
body.grade-11 .grade-rank-strip { border-style: solid; }

/* ── Gender Palettes (JS adds class only when grade ≤ 8) ──────── */

/* Female — rose / warm */
body.gender-female {
  --color-primary:      #DB2777;
  --color-primary-dark: #be185d;
  --color-accent:       #F97316;
  --color-bg:           #FFF1F5;
  --color-border:       #fbcfe8;
  --color-muted:        #fdf2f8;
  --shadow-clay-sm:  0 2px 0 3px rgba(0,0,0,.12), 0 4px 12px rgba(219,39,119,.10);
  --shadow-clay-md:  0 4px 0 4px rgba(0,0,0,.14), 0 8px 24px rgba(219,39,119,.13);
  --shadow-clay-lg:  0 6px 0 5px rgba(0,0,0,.16), 0 16px 40px rgba(219,39,119,.15);
  background-image: radial-gradient(circle, #fbcfe8 1px, transparent 1px);
}
/* Prefer not to say — violet / teal */
body.gender-neutral {
  --color-primary:      #7C3AED;
  --color-primary-dark: #6d28d9;
  --color-accent:       #06B6D4;
  --color-bg:           #F5F3FF;
  --color-border:       #ddd6fe;
  --color-muted:        #f0eeff;
  --shadow-clay-sm:  0 2px 0 3px rgba(0,0,0,.12), 0 4px 12px rgba(124,58,237,.10);
  --shadow-clay-md:  0 4px 0 4px rgba(0,0,0,.14), 0 8px 24px rgba(124,58,237,.13);
  --shadow-clay-lg:  0 6px 0 5px rgba(0,0,0,.16), 0 16px 40px rgba(124,58,237,.15);
  background-image: radial-gradient(circle, #ddd6fe 1px, transparent 1px);
}

/* Female: override TOD gradients with rose/pink tones (so hero matches bg) */
body.gender-female {
  --tod-hero-gradient: linear-gradient(135deg, #DB2777 0%, #9333ea 100%);
  --tod-top-bar:       linear-gradient(90deg, #DB2777 0%, #EC4899 55%, #F97316 100%);
}
body.gender-female.tod-morning   {
  --tod-hero-gradient: linear-gradient(135deg, #FDA4AF 0%, #DB2777 100%);
  --tod-top-bar:       linear-gradient(90deg, #FDA4AF 0%, #DB2777 55%, #F97316 100%);
}
body.gender-female.tod-afternoon {
  --tod-hero-gradient: linear-gradient(135deg, #DB2777 0%, #9333ea 100%);
  --tod-top-bar:       linear-gradient(90deg, #DB2777 0%, #EC4899 55%, #F97316 100%);
}
body.gender-female.tod-evening   {
  --tod-hero-gradient: linear-gradient(135deg, #9333ea 0%, #DB2777 100%);
  --tod-top-bar:       linear-gradient(90deg, #9333ea 0%, #DB2777 55%, #F97316 100%);
}
body.gender-female.tod-night     {
  --tod-hero-gradient: linear-gradient(135deg, #831843 0%, #4c1d95 100%);
  --tod-top-bar:       linear-gradient(90deg, #831843 0%, #4c1d95 55%, #DB2777 100%);
}

/* Neutral (prefer not to say): violet/teal tones */
body.gender-neutral {
  --tod-hero-gradient: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --tod-top-bar:       linear-gradient(90deg, #7C3AED 0%, #06B6D4 55%, #8B5CF6 100%);
}
body.gender-neutral.tod-morning   {
  --tod-hero-gradient: linear-gradient(135deg, #06B6D4 0%, #7C3AED 100%);
  --tod-top-bar:       linear-gradient(90deg, #06B6D4 0%, #7C3AED 55%, #8B5CF6 100%);
}
body.gender-neutral.tod-afternoon {
  --tod-hero-gradient: linear-gradient(135deg, #7C3AED 0%, #0891b2 100%);
  --tod-top-bar:       linear-gradient(90deg, #7C3AED 0%, #06B6D4 55%, #8B5CF6 100%);
}
body.gender-neutral.tod-evening   {
  --tod-hero-gradient: linear-gradient(135deg, #6d28d9 0%, #0891b2 100%);
  --tod-top-bar:       linear-gradient(90deg, #6d28d9 0%, #7C3AED 55%, #06B6D4 100%);
}
body.gender-neutral.tod-night     {
  --tod-hero-gradient: linear-gradient(135deg, #4c1d95 0%, #0c4a6e 100%);
  --tod-top-bar:       linear-gradient(90deg, #4c1d95 0%, #1e3a8a 55%, #0c4a6e 100%);
}

/* ── Time of Day ─────────────────────────────────────────────── */
body.tod-morning {
  --tod-hero-gradient: linear-gradient(135deg, #06b6d4 0%, #2563EB 100%);
  --tod-top-bar:       linear-gradient(90deg, #06b6d4 0%, #2563EB 55%, #7c3aed 100%);
}
body.tod-afternoon {
  --tod-hero-gradient: linear-gradient(135deg, #2563EB 0%, #7c3aed 100%);
  --tod-top-bar:       linear-gradient(90deg, #2563EB 0%, #EC4899 60%, #F59E0B 100%);
}
body.tod-evening {
  --tod-hero-gradient: linear-gradient(135deg, #7c3aed 0%, #EC4899 100%);
  --tod-top-bar:       linear-gradient(90deg, #7c3aed 0%, #EC4899 55%, #F97316 100%);
}
body.tod-night {
  --tod-hero-gradient: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
  --tod-top-bar:       linear-gradient(90deg, #1e3a8a 0%, #4c1d95 55%, #0891b2 100%);
}

/* TOD hero on child dash (overrides hardcoded gradient) */
.child-dash-hero {
  background: var(--tod-hero-gradient) !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* TOD hero on login/register brand header */
#view-login .brand-header,
#view-register .brand-header {
  background: var(--tod-hero-gradient);
  border-radius: var(--radius-xl);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  box-shadow: var(--shadow-clay-md);
  margin-bottom: var(--sp-2);
}
#view-login .brand-logo,
#view-register .brand-logo { font-size: 2.8rem; }
#view-login .brand-title,
#view-register .brand-title { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
#view-login .brand-accent,
#view-register .brand-accent { color: rgba(255,255,255,.82); }

/* ── Dark Mode ───────────────────────────────────────────────── */
body.theme-dark .btn-correct {
  background: #f1f5f9; color: #0f172a; border-color: #cbd5e1;
}
body.theme-dark .btn-wrong {
  background: rgba(255,255,255,.07); color: #e2e8f0; border-color: rgba(255,255,255,.15);
}
body.theme-dark #btn-self-correct:hover:not(:disabled) {
  background: #fff; color: #0f172a; border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
body.theme-dark #btn-self-wrong:hover:not(:disabled) {
  background: transparent; color: #e2e8f0; border-color: #94a3b8; border-width: 2px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
body.theme-dark {
  --color-bg:           #0F172A;
  --color-card:         #1E293B;
  --color-fg:           #F1F5F9;
  --color-muted:        #1E293B;
  --color-muted-fg:     #94A3B8;
  --color-border:       #334155;
  --color-success-light: #052e16;
  --color-error-light:   #2d0a0a;
  --shadow-clay-sm:    0 2px 0 3px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.30);
  --shadow-clay-md:    0 4px 0 4px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
  --shadow-clay-lg:    0 6px 0 5px rgba(0,0,0,.60), 0 16px 40px rgba(0,0,0,.40);
  --shadow-clay-press: 0 1px 0 2px rgba(0,0,0,.50), 0 2px 6px  rgba(0,0,0,.30);
  background-image: radial-gradient(circle, #1e3a5f 1px, transparent 1px);
}
body.theme-dark .clay-card     { background: var(--color-card); }
body.theme-dark .form-input,
body.theme-dark .form-select   { background: #0F172A; color: var(--color-fg); border-color: var(--color-border); }
body.theme-dark .login-box,
body.theme-dark .register-box  { background: var(--color-card); }
body.theme-dark .pdash-header,
body.theme-dark .pdash-panel   { background: var(--color-card); border-color: var(--color-border); }
body.theme-dark .pdash-panel-head,
body.theme-dark .pdash-goal-row { border-color: var(--color-border); }
body.theme-dark .pdash-stat    { background: var(--color-card); border-color: var(--color-border); }
body.theme-dark .pdash-signout { border-color: var(--color-border); }
body.theme-dark .pdash-goal-row:hover { background: rgba(255,255,255,.04); }
/* Female dark */
body.theme-dark.gender-female  { --color-bg: #1a0a14; --color-card: #2a1020; --color-border: #5b2945; }
/* Neutral dark */
body.theme-dark.gender-neutral { --color-bg: #140d24; --color-card: #1f1335; --color-border: #3b2264; }

/* ── Quiz Interactive Features ───────────────────────────────── */

/* Question card actions (flag + study note) */
.question-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Study notes pill in question card — full styles in pill section at bottom */
.btn-question-sn { flex-shrink: 0; }

/* ── Floating XP bubble (correct answer reward) ─────────────── */
.xp-float-bubble {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.18);
  user-select: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.xp-float-val {
  font-size: 1.55rem;
  line-height: 1;
}
.xp-float-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.03em;
}
/* Session accuracy bonus chip */
.summary-chip--acc-bonus {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

/* ── Bonus chip animations ─────────────────────────────────────── */

/* Slot machine rolling number */
.xp-roll-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-width: 2.8ch;
  text-align: right;
  transition: filter 0.05s linear;
}

/* Main XP chip — sweeping shimmer */
.summary-chip:first-child {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  border-color: #f59e0b;
  animation: xpChipPop 0.55s cubic-bezier(.34,1.56,.64,1) both;
}
.summary-chip:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: xpShimmer 2.2s ease-in-out 0.6s infinite;
  pointer-events: none;
}
@keyframes xpChipPop {
  0%   { transform: scale(0.5) rotate(-6deg); opacity: 0; }
  70%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0deg); opacity: 1; }
}
@keyframes xpShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}

/* Review/urgency summary chips */
.summary-chip--urgency {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  font-weight: 700;
  border-color: #f59e0b;
  animation: urgencyBurst 0.6s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow: 0 0 0 0 rgba(245,158,11,.5);
}
.summary-chip--urgency::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: transparent;
  border: 2px solid #f59e0b;
  animation: urgencyRing 1.8s ease-out 0.6s infinite;
  pointer-events: none;
}
@keyframes urgencyBurst {
  0%   { transform: scale(0.4); opacity: 0; box-shadow: 0 0 0 0 rgba(245,158,11,.7); }
  60%  { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(245,158,11,.0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(245,158,11,.0); }
}
@keyframes urgencyRing {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.5); opacity: 0;  }
}

/* Review Complete chip — orbiting glow + rainbow border */
.summary-chip--review-bonus {
  position: relative;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  font-weight: 700;
  border-color: #7c3aed;
  animation: reviewBonusPop 0.65s cubic-bezier(.34,1.56,.64,1) both,
             reviewBonusGlow 2.5s ease-in-out 0.7s infinite;
  overflow: visible;
}
.summary-chip--review-bonus::before,
.summary-chip--review-bonus::after {
  content: '✦';
  position: absolute;
  font-size: 0.75rem;
  color: #7c3aed;
  animation: orbitStar 2.4s linear 0.7s infinite;
  pointer-events: none;
}
.summary-chip--review-bonus::after {
  animation-delay: 1.9s;
  color: #a855f7;
}
@keyframes reviewBonusPop {
  0%   { transform: scale(0.3) translateY(10px); opacity: 0; }
  70%  { transform: scale(1.13) translateY(-2px); opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
@keyframes reviewBonusGlow {
  0%,100% { box-shadow: 0 0 6px 1px rgba(124,58,237,.25); }
  50%     { box-shadow: 0 0 18px 4px rgba(124,58,237,.50); }
}
@keyframes orbitStar {
  0%   { transform: rotate(0deg)   translateX(34px) rotate(0deg);   opacity: 1; }
  50%  { opacity: .5; }
  100% { transform: rotate(360deg) translateX(34px) rotate(-360deg); opacity: 1; }
}

.summary-chip--streak {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #9d174d;
  font-weight: 700;
  animation: streakSlide 0.55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes streakSlide {
  0%   { transform: scale(0.6) rotate(5deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0deg); opacity: 1; }
}
}

/* Text highlight */
.q-highlight {
  background: #fef08a;
  color: #713f12;
  border-radius: 3px;
  padding: 0 2px;
}
body.theme-dark .q-highlight { background: rgba(234,179,8,.3); color: #fef08a; }

/* ── Timer Settings ──────────────────────────────────────────── */
.q-timer-countdown {
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Restart Quiz Button ──────────────────────────────────────── */
.btn-restart-quiz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: none;
  border: 2px solid var(--color-border);
  cursor: pointer;
  color: var(--color-muted-fg);
  transition: color .15s, border-color .15s;
}
.btn-restart-quiz:hover { color: #f59e0b; border-color: #f59e0b; }

.btn-timer-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: none;
  border: 2px solid var(--color-border);
  cursor: pointer;
  color: var(--color-muted-fg);
  transition: color .15s, border-color .15s;
}
.btn-timer-settings:hover { color: var(--color-primary); border-color: var(--color-primary); }

.timer-settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
}
.timer-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-muted-fg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timer-toggle-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.timer-toggle-row small { font-weight: 400; font-size: .78rem; display: block; color: var(--color-muted-fg); }
.timer-duration-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.timer-dur-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: none;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-fg);
  transition: border-color .15s, background .15s, color .15s;
}
.timer-dur-btn:hover { border-color: var(--color-primary); }
.timer-dur-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Quiz: Grade 6-7 clay overrides ─────────────────────────── */
body.grade-6 .quiz-left,
body.grade-7 .quiz-left { padding: var(--sp-3) var(--sp-2) var(--sp-2) var(--sp-3); }

body.grade-6 .mcq-option,
body.grade-7 .mcq-option {
  border-radius: 18px;
}
body.grade-6 .mcq-option .mcq-badge,
body.grade-7 .mcq-option .mcq-badge {
  border-radius: 12px; /* squircle badge for clay grade */
}

/* Grade 6-7 subtle float animation on unanswered options */
@keyframes mcq-float {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-1.5px); }
  70%      { transform: translateX(1.5px); }
}
body.grade-6 .mcq-options:not(.answered) .mcq-option,
body.grade-7 .mcq-options:not(.answered) .mcq-option {
  animation: mcq-float 6s ease-in-out infinite;
}
body.grade-6 .mcq-options:not(.answered) .mcq-option:nth-child(2),
body.grade-7 .mcq-options:not(.answered) .mcq-option:nth-child(2) { animation-delay: -1.5s; }
body.grade-6 .mcq-options:not(.answered) .mcq-option:nth-child(3),
body.grade-7 .mcq-options:not(.answered) .mcq-option:nth-child(3) { animation-delay: -3s; }
body.grade-6 .mcq-options:not(.answered) .mcq-option:nth-child(4),
body.grade-7 .mcq-options:not(.answered) .mcq-option:nth-child(4) { animation-delay: -4.5s; }

body.grade-6 .quiz-toolbar,
body.grade-7 .quiz-toolbar {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -3px 0 3px rgba(0,0,0,.08), 0 -6px 20px rgba(0,0,0,.06);
}

body.grade-6 .explain-tab-btn,
body.grade-7 .explain-tab-btn { font-family: var(--font-heading); font-size: .85rem; }

/* Grade 6-9: correct — same as base (green border + green text, no solid fill) */

/* ── Quiz: Grade 8-11 flat/clean overrides ───────────────────── */
body.grade-8 .question-card,
body.grade-9 .question-card,
body.grade-10 .question-card,
body.grade-11 .question-card { border-width: 1px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

body.grade-8 .mcq-option,
body.grade-9 .mcq-option,
body.grade-10 .mcq-option,
body.grade-11 .mcq-option {
  border-radius: 8px;
}

body.grade-10 .quiz-right,
body.grade-11 .quiz-right { background: #f8fafc; }

/* Grade 10-11 study subheading: darker indigo to match blue theme */
body.grade-10 .theory-head,
body.grade-11 .theory-head {
  color: #4338ca;
}

/* Grade 10-11 answer letter badge: indigo to match blue theme */
body.grade-10 .answer-letter-badge,
body.grade-11 .answer-letter-badge {
  background: #4f46e5;
  border-color: #4f46e5;
}

/* Grade 10-11 right panel: answer card 1px border, tabs wrapper borderless, tab bar line gone */
body.grade-10 .feedback-answer,
body.grade-11 .feedback-answer {
  border-width: 1px;
}
body.grade-10 .explain-tabs-wrap,
body.grade-11 .explain-tabs-wrap {
  border-color: transparent;
}
body.grade-10 .explain-tab-bar,
body.grade-11 .explain-tab-bar {
  border-bottom-color: transparent;
}
body.grade-10 .why-correct,
body.grade-11 .why-correct {
  background: #fff;
  color: #14532d;
}
body.grade-10 .why-wrong,
body.grade-11 .why-wrong {
  background: #fff;
  color: #7f1d1d;
}
body.grade-10 .why-item,
body.grade-11 .why-item {
  border-top: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

/* Grade 10-11 — black bullets, black left border, all text black */
body.grade-10 .why-correct,
body.grade-11 .why-correct {
  border-left-color: #0f172a;
}
body.grade-10 .why-wrong,
body.grade-11 .why-wrong {
  border-left-color: #0f172a;
}
body.grade-10 .why-correct .why-bullet,
body.grade-11 .why-correct .why-bullet,
body.grade-10 .why-wrong .why-bullet,
body.grade-11 .why-wrong .why-bullet {
  background: #0f172a;
}
body.grade-10 .why-option-text,
body.grade-11 .why-option-text {
  color: #0f172a;
  font-weight: 700;
}
body.grade-10 .why-expl,
body.grade-11 .why-expl {
  color: #0f172a;
  opacity: 1;
}


/* Grade 10-11 — tag backgrounds: light indigo tint */
body.grade-10 .q-tag,
body.grade-11 .q-tag {
  background: #eef2ff;
  color: #4338ca;
}

/* ── All grades: correct/wrong use the base styles defined above ── */

/* Grade 6-9 right-panel: option text black */
body.grade-6 .why-option-text,
body.grade-7 .why-option-text,
body.grade-8 .why-option-text,
body.grade-9 .why-option-text {
  color: #0f172a;
  font-weight: 700;
}


/* Grade 6-9 — no visible borders on question tags */
body.grade-6 .q-tag,
body.grade-7 .q-tag,
body.grade-8 .q-tag,
body.grade-9 .q-tag {
  border-color: transparent;
}

/* Grade 10-11 — no border, sharp corners */
body.grade-10 .q-tag,
body.grade-11 .q-tag {
  border-color: transparent;
  border-radius: 3px;
}

/* Grade 6-9 — why-correct / why-wrong: white background, keep colored border + bullet */
body.grade-6 .why-correct,
body.grade-7 .why-correct,
body.grade-8 .why-correct,
body.grade-9 .why-correct {
  background: #fff;
  color: #14532d;
}
body.grade-6 .why-wrong,
body.grade-7 .why-wrong,
body.grade-8 .why-wrong,
body.grade-9 .why-wrong {
  background: #fff;
  color: #7f1d1d;
}

/* Grade 6-9 — explanation text (why-expl) always black */
body.grade-6 .why-expl,
body.grade-7 .why-expl,
body.grade-8 .why-expl,
body.grade-9 .why-expl {
  color: #0f172a;
  opacity: 1;
}

/* Grade 6-9 — remove blue border around explain tabs wrapper */
body.grade-6 .explain-tabs-wrap,
body.grade-7 .explain-tabs-wrap,
body.grade-8 .explain-tabs-wrap,
body.grade-9 .explain-tabs-wrap {
  border-color: transparent;
}

/* Grade 6-9 — remove border from answer card */
body.grade-6 .feedback-answer,
body.grade-7 .feedback-answer,
body.grade-8 .feedback-answer,
body.grade-9 .feedback-answer {
  border-color: transparent;
}

/* Grade 6-9 — remove blue bottom line from tab bar */
body.grade-6 .explain-tab-bar,
body.grade-7 .explain-tab-bar,
body.grade-8 .explain-tab-bar,
body.grade-9 .explain-tab-bar {
  border-bottom-color: transparent;
}

/* ── Quiz: Dark mode overrides ───────────────────────────────── */
body.theme-dark .quiz-right {
  background: #162032;
  border-left-color: var(--color-border);
}
body.theme-dark .quiz-right__placeholder { color: #475569; }
body.theme-dark .feedback-answer {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-fg);
}
body.theme-dark .answer-opt-text { color: var(--color-fg); }
body.theme-dark .why-correct { background: #052e16; border-left-color: #16a34a; color: #bbf7d0; }
body.theme-dark .why-wrong   { background: #2d0a0a; border-left-color: #ef4444; color: #fca5a5; }

body.theme-dark .quiz-toolbar {
  background: #1e293b;
  border-top-color: var(--color-border);
}

body.theme-dark .explain-tabs-wrap {
  border-color: var(--color-border);
}
body.theme-dark .explain-tab-bar {
  background: #0f172a;
  border-bottom-color: var(--color-border);
}
body.theme-dark .explain-tab-btn { color: #64748b; }
body.theme-dark .explain-tab-btn:hover { color: #93c5fd; }
body.theme-dark .explain-tab-btn.active {
  color: #93c5fd;
  border-bottom-color: #93c5fd;
  background: #1e293b;
}
body.theme-dark .explain-tab-body { background: #1e293b; }
body.theme-dark .theory-row { color: #cbd5e1; border-left-color: #334155; }
body.theme-dark .theory-key { color: #e2e8f0; }
body.theme-dark .theory-head { color: #93c5fd; }

/* MCQ option dark mode */
body.theme-dark .mcq-option {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-fg);
}
body.theme-dark .mcq-option:hover:not(:disabled) {
  background: #1e3a5f;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
body.theme-dark .mcq-badge { border-color: #475569; color: #94a3b8; }
body.theme-dark .mcq-option:hover:not(:disabled) .mcq-badge { border-color: #3b82f6; color: #93c5fd; }
body.theme-dark .mcq-option.correct { background: #052e16; border-color: #22c55e; }
body.theme-dark .mcq-option.wrong   { background: #2d0a0a; border-color: #ef4444; }
body.theme-dark .mcq-option.wrong .mcq-badge { border-color: #ef4444; color: #fca5a5; }

/* Question card dark mode in quiz */
body.theme-dark .quiz-left .question-card {
  border-color: var(--color-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
body.theme-dark .quiz-left .question-text { color: var(--color-fg); }

body.theme-dark .section-card { background: var(--color-card); border-color: var(--color-border); }
body.theme-dark .section-card__name { color: var(--color-fg); }
body.theme-dark .section-card__desc { color: var(--color-muted-fg); }

body.theme-dark #btn-self-partial {
  background: rgba(251,191,36,.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.3) !important;
}

/* ── Theme Toggle (standalone row below hero) ────────────────── */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--sp-2);
  background: var(--color-card);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-clay-sm);
  margin-bottom: 4px;
}
.theme-toggle-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted-fg);
}
.theme-toggle-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--color-muted);
  border: 2px solid var(--color-border);
  border-radius: 99px;
  padding: 3px;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.theme-toggle-btn {
  border: none;
  background: none;
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-muted-fg);
  cursor: pointer;
  transition: background .2s, color .2s;
  touch-action: manipulation;
  white-space: nowrap;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}
.theme-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════════════
   PRO DASHBOARD — Grade 10-11 PassMedicine-style interface
   Rendered when child.grade >= 10. All classes scoped as needed.
   ══════════════════════════════════════════════════════════════ */

/* Hide grade 6-9 child-dash elements for grade 10-11 */
body.grade-10 #child-dash-greeting,
body.grade-11 #child-dash-greeting { display: none; }
body.grade-10 #view-child-dash .grade-rank-strip,
body.grade-11 #view-child-dash .grade-rank-strip { display: none; }

/* Pro header (replaces hero banner) */
.pro-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--sp-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  box-shadow: var(--shadow-clay-sm);
}
.pro-hdr-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 1rem; color: #fff;
  flex-shrink: 0;
}
.pro-hdr-info { flex: 1; min-width: 0; }
.pro-hdr-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-fg);
  line-height: 1.2;
}
.pro-hdr-sub {
  font-size: 0.75rem;
  color: var(--color-muted-fg);
  margin-top: 2px;
}
.pro-hdr-right { flex-shrink: 0; }
.pro-xp-badge {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 4px 10px;
  white-space: nowrap;
  display: inline-block;
}

/* Stats summary bar */
.pro-stats-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px var(--sp-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  box-shadow: var(--shadow-clay-sm);
}
.pro-stat-item {
  font-size: 0.78rem;
  color: var(--color-muted-fg);
}
.pro-stat-item strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-fg);
}
.pro-stat-sep {
  color: var(--color-border);
  font-size: 0.7rem;
  user-select: none;
}

/* Section labels (PassMedicine-style small-caps) */
.pro-section-label {
  font-family: var(--font-heading);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  padding: 0 2px;
  margin: 20px 0 6px;
  display: block;
}

/* Generic panel */
.pro-panel {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  overflow: hidden;
  margin-bottom: 4px;
}

/* Resume last session card */
.pro-resume-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--sp-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-clay-sm);
  margin-bottom: 4px;
}
.pro-resume-info { flex: 1; min-width: 0; }
.pro-resume-chapter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--color-fg);
}
.pro-resume-meta {
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  margin-top: 2px;
}

/* Subject row inside panel */
.pro-subject-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--sp-2);
  border-bottom: 1px solid var(--color-border);
}
.pro-subject-row:last-child { border-bottom: none; }
.pro-subject-icon { font-size: 1.2rem; flex-shrink: 0; line-height: 1; }
.pro-subject-info { flex: 1; min-width: 0; }
.pro-subject-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--color-fg);
}
.pro-subject-meta {
  font-size: 0.72rem;
  color: var(--color-muted-fg);
  margin-top: 2px;
}
.pro-subject-btns {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}

/* Compact arrow-style action buttons */
.pro-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
  min-height: 34px;
}
.pro-action-btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.pro-action-btn:active { transform: scale(.97); }
.pro-action-btn--outline {
  background: transparent;
  color: var(--color-primary);
}
.pro-action-btn--outline:hover { background: var(--color-muted); }

/* Due count badge inside outline button */
.pro-due-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-left: 2px;
}

/* Continue button (outlined arrow) */
.pro-continue-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  min-height: 38px;
  flex-shrink: 0;
}
.pro-continue-btn:hover { background: var(--color-muted); border-color: var(--color-primary); }

/* Performance table */
.pro-perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.pro-perf-table thead { background: var(--color-muted); }
.pro-perf-table th {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.pro-perf-table td {
  padding: 9px 14px;
  color: var(--color-fg);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.pro-perf-table tbody tr:last-child td { border-bottom: none; }
.pro-perf-table tbody tr:hover { background: var(--color-muted); }
.pro-acc-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
}
.pro-acc-pill.good { background: #dcfce7; color: #16a34a; }
.pro-acc-pill.mid  { background: #fef3c7; color: #d97706; }
.pro-acc-pill.poor { background: #fee2e2; color: #dc2626; }
.pro-perf-bar-wrap {
  width: 70px; height: 4px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.pro-perf-bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }

/* Mini inline button */
.pro-mini-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-muted);
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  min-height: 32px;
}
.pro-mini-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* 7-day week strip */
.pro-week-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px var(--sp-2);
  flex-wrap: wrap;
}
.pro-week-boxes { display: flex; gap: 5px; }
.pro-day-box {
  width: 28px; height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.6rem; font-weight: 700;
  color: var(--color-muted-fg);
  background: var(--color-muted);
  transition: background .2s, border-color .2s, color .2s;
  user-select: none;
}
.pro-day-box.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pro-day-box.today  { border-color: var(--color-primary); color: var(--color-primary); font-weight: 800; }
.pro-day-box.today.active { background: var(--color-primary); color: #fff; }
.pro-week-right { display: flex; flex-direction: column; gap: 2px; }
.pro-week-goal-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-fg);
}
.pro-week-goal-sub { font-size: 0.7rem; color: var(--color-muted-fg); }

/* Weak areas ordered list */
.pro-weak-list { list-style: none; padding: 0; margin: 0; }
.pro-weak-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.pro-weak-item:last-child { border-bottom: none; }
.pro-weak-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-muted-fg);
  min-width: 18px;
  flex-shrink: 0;
}
.pro-weak-q {
  flex: 1;
  font-size: 0.8rem;
  color: var(--color-fg);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pro-weak-count {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  color: #dc2626;
  background: #fee2e2;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Exam countdown row */
.pro-exam-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--sp-2);
  flex-wrap: wrap;
}
.pro-exam-info { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.pro-exam-days {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-primary);
  line-height: 1;
}
.pro-exam-label { font-size: 0.72rem; color: var(--color-muted-fg); }
.pro-exam-empty { flex: 1; font-size: 0.8rem; color: var(--color-muted-fg); }
.pro-date-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--color-fg);
  background: var(--color-muted);
  cursor: pointer;
}
.pro-date-input:focus { outline: none; border-color: var(--color-primary); }

/* Theme toggle inside pro-panel (no extra card border) */
.pro-panel .theme-toggle-row {
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* ── Grade 10-11: override existing screens to match pro aesthetic ── */

/* Subject/chapter card grid → compact single-column list */
body.grade-10 .card-grid,
body.grade-11 .card-grid {
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-clay-sm);
}
/* Subject cards in grade-10/11: revert to compact horizontal list rows */
body.grade-10 .subject-card,
body.grade-11 .subject-card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-radius: 0;
  border: none;
  border-left: 4px solid var(--subj-bg, var(--color-primary));
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  background: var(--color-card);
  padding: 10px 14px;
  min-height: unset;
  filter: none !important;
  transform: none !important;
}
body.grade-10 .subject-card:hover, body.grade-11 .subject-card:hover { background: var(--color-muted); }
body.grade-10 .subj-card-icon, body.grade-11 .subj-card-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--subj-bg, var(--color-primary));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.grade-10 .subj-card-bottom, body.grade-11 .subj-card-bottom { flex: 1; gap: 1px; }
body.grade-10 .subj-name, body.grade-11 .subj-name {
  color: var(--color-fg); font-size: .85rem; font-weight: 600;
}
body.grade-10 .subj-stats, body.grade-11 .subj-stats { color: var(--color-muted-fg); }

/* Chapter cards in grade-10/11: compact */
body.grade-10 .chapter-card,
body.grade-11 .chapter-card {
  border-radius: 0;
  border: none;
  border-left: 4px solid var(--ch-color, var(--color-primary));
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  background: var(--color-card);
  padding: 10px 12px 10px 14px;
}
body.grade-10 .chapter-card:hover,
body.grade-11 .chapter-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-muted);
}
body.grade-10 .chapter-card:active,
body.grade-11 .chapter-card:active { transform: none; }
body.grade-10 .card-icon, body.grade-11 .card-icon { font-size: 1.1rem; }
/* chapter card grade-10/11 compact inner */
body.grade-10 .ch-top, body.grade-11 .ch-top { margin-bottom: 4px; }
body.grade-10 .ch-icon, body.grade-11 .ch-icon { width: 26px; height: 26px; border-radius: 6px; }
body.grade-10 .ch-name, body.grade-11 .ch-name { font-size: 0.85rem; font-weight: 700; margin-bottom: 1px; }
body.grade-10 .ch-sub, body.grade-11 .ch-sub { font-size: 0.7rem; margin-bottom: 6px; }
body.grade-10 .ch-watermark, body.grade-11 .ch-watermark { font-size: 3rem; }
body.grade-10 .ch-due, body.grade-11 .ch-due { margin-left: auto; }
body.grade-10 .ch-mastery-label, body.grade-11 .ch-mastery-label { font-size: 0.62rem; min-width: 58px; }

/* Mode cards → bigger, cleaner cards for grade 10/11 */
body.grade-10 .mode-cards, body.grade-11 .mode-cards { gap: 16px; }
body.grade-10 .mode-row, body.grade-11 .mode-row { gap: 16px; }
body.grade-10 .mode-card, body.grade-11 .mode-card {
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px;
  border-radius: 14px;
  min-height: 160px;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-width: 1.5px;
}
body.grade-10 .mode-learn, body.grade-11 .mode-learn {
  background: linear-gradient(135deg, #1e40af 0%, #2563EB 100%);
  border-color: #1d4ed8;
  color: #fff;
}
body.grade-10 .mode-review, body.grade-11 .mode-review {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-fg);
}
body.grade-10 .mode-card:hover, body.grade-11 .mode-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
body.grade-10 .mode-card:active, body.grade-11 .mode-card:active { transform: translateY(0); }
body.grade-10 .mode-icon, body.grade-11 .mode-icon { font-size: 1.6rem; opacity: 1; }
body.grade-10 .mode-label, body.grade-11 .mode-label { font-size: 1.05rem; font-weight: 700; }
body.grade-10 .mode-desc, body.grade-11 .mode-desc { font-size: 0.8rem; opacity: .8; }
body.grade-10 .mode-due-badge, body.grade-11 .mode-due-badge { position: static; margin-top: auto; }

/* ── Pro dash dark mode adjustments ───────────────────────────── */
body.theme-dark .pro-acc-pill.good { background: #052e16; color: #4ade80; }
body.theme-dark .pro-acc-pill.mid  { background: #451a03; color: #fbbf24; }
body.theme-dark .pro-acc-pill.poor { background: #2d0a0a; color: #f87171; }
body.theme-dark .pro-weak-count    { background: #2d0a0a; }
body.theme-dark .pro-perf-bar-wrap { background: #334155; }
body.theme-dark .pro-perf-table thead { background: rgba(255,255,255,.05); }
body.theme-dark .pro-perf-table tbody tr:hover { background: rgba(255,255,255,.04); }
body.theme-dark .pro-date-input { background: #1e293b; color: var(--color-fg); }

/* ══════════════════════════════════════════════════════════════
   PRO DASHBOARD FULLSCREEN — Grade 10-11
   Fullscreen layout: fixed left sidebar + scrollable main
   ══════════════════════════════════════════════════════════════ */

/* ── Fullscreen context (added to <body> when grade 10/11 active) ── */
body.pro-fs-active {
  overflow: hidden;
  height: 100dvh;
}
body.pro-fs-active #view-child-dash {
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  padding: 0;
}
body.pro-fs-active #view-child-dash .view-inner {
  max-width: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.pro-fs-active #view-child-dash .top-bar,
body.pro-fs-active #view-child-dash .grade-rank-strip { display: none; }
body.pro-fs-active #app-header { display: none !important; }
body.pro-fs-active .quiz-shell { padding-top: 4px; } /* header hidden in quiz — only accent bar remains */
body.grade-10.pro-fs-active #rank-badge,
body.grade-11.pro-fs-active #rank-badge { display: none !important; }
body.pro-fs-active #view-child-dash #child-dash-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  min-height: 0;
}
body.grade-10 #view-child-dash .grade-rank-strip,
body.grade-11 #view-child-dash .grade-rank-strip { display: none; }

/* ── Layout wrapper ────────────────────────────────────────── */
.pro-fs-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR  — always dark navy, theme-independent
   ══════════════════════════════════════════════════════════════ */
.pro-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: #161942;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  color-scheme: dark;
}

/* ── Logo (pro dash, grade 10-11) ── */
.pro-sidebar-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px 11px;
  border-bottom: 1px solid rgba(99,102,241,.22);
  flex-shrink: 0;
}
.pro-sidebar-logo-mark {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #FF3B69 0%, #FF6B4A 100%);
  color: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-weight: 800; font-size: 0.77rem; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255,59,105,.3);
}
.pro-sidebar-logo-text {
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-weight: 700; font-size: .83rem; color: #fff; letter-spacing: -.01em;
}
.pro-sidebar-logo-accent { color: #FF8D3B; }

/* ── Profile (pro dash) ── */
.pro-sidebar-user {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px; text-align: center;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(99,102,241,.2);
  flex-shrink: 0;
}
.pro-sidebar-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-weight: 700; font-size: 0.95rem; color: #fff;
  box-shadow: 0 0 0 2px rgba(165,180,252,.3); flex-shrink: 0;
}
.pro-sidebar-name {
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-weight: 700; font-size: 0.77rem; color: #fff; line-height: 1.2; margin-top: 3px;
}
.pro-sidebar-grade { font-size: 0.61rem; color: #a5b4fc; }
.pro-sidebar-badge {
  display: inline-block; padding: 2px 9px;
  background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.25);
  border-radius: 99px; font-size: 0.56rem; color: #c7d2fe;
}
.pro-sidebar-centile {
  margin: 6px 10px 2px; padding: 7px 10px;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2);
  border-radius: 10px; text-align: center; flex-shrink: 0;
}
.pro-sidebar-centile-val {
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-size: 1.31rem; font-weight: 700; color: #fff; line-height: 1;
}
.pro-sidebar-centile-sup { font-size: 0.61rem; color: #a5b4fc; vertical-align: super; }
.pro-sidebar-centile-lbl {
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-size: 0.53rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #818cf8; margin-top: 3px;
}

/* ── Junior logo (new) ── */
.pro-sb-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(99,102,241,.22);
  flex-shrink: 0;
}
.pro-sb-logo-mark {
  width: 29px; height: 29px;
  background: linear-gradient(135deg, #FF3B69 0%, #FF6B4A 100%);
  color: #fff; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.81rem; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255,59,105,.35);
}
.pro-sb-logo-words { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pro-sb-logo-text {
  font-weight: 700; font-size: .86rem; color: #fff;
  letter-spacing: -.02em; line-height: 1.2;
}
.pro-sb-logo-accent { color: #FF8D3B; }
.pro-sb-grade-hub {
  font-size: 0.52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #a5b4fc; margin-top: 1px;
}

/* ── Junior profile card ── */
.pro-sb-profile {
  margin: 9px 9px 4px;
  background: rgba(35,40,91,.8);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 14px; padding: 11px 11px 10px;
  flex-shrink: 0;
}
.pro-sb-profile-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pro-sb-av-wrap { position: relative; flex-shrink: 0; }
.pro-sb-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; color: #fff;
  box-shadow: 0 0 0 2px rgba(165,180,252,.35);
}
.pro-sb-lv {
  position: absolute; bottom: -4px; right: -5px;
  background: #fbbf24; color: #1e1b4b;
  font-size: 0.47rem; font-weight: 900;
  padding: 2px 5px; border-radius: 99px;
  border: 1.5px solid #161942; white-space: nowrap; line-height: 1.2;
}
.pro-sb-profile-info { min-width: 0; flex: 1; }
.pro-sb-name {
  font-weight: 700; font-size: 0.78rem; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.pro-sb-tier {
  font-size: 0.60rem; color: #a5b4fc; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* XP bar */
.pro-sb-xp { margin-bottom: 10px; }
.pro-sb-xp-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.60rem; font-weight: 600; margin-bottom: 5px; color: #c7d2fe;
}
.pro-sb-xp-pct { color: #fbbf24; font-weight: 700; }
.pro-sb-xp-track {
  height: 7px; background: rgba(17,19,75,.85); border-radius: 99px;
  overflow: hidden; padding: 1px;
}
.pro-sb-xp-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #fbbf24 0%, #f472b6 55%, #FF4A6B 100%);
  transition: width .55s cubic-bezier(.34,1.56,.64,1);
}
.pro-sb-xp-hint { font-size: 0.55rem; color: #818cf8; margin-top: 4px; }

/* Stats row */
.pro-sb-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  padding-top: 8px; border-top: 1px solid rgba(99,102,241,.2);
}
.pro-sb-stat {
  background: rgba(17,19,75,.7); border: 1px solid rgba(99,102,241,.2);
  border-radius: 9px; padding: 6px 5px; text-align: center;
}
.pro-sb-stat-val {
  display: block; font-size: 0.9rem; font-weight: 800; color: #fff; line-height: 1;
}
.pro-sb-stat-val--amber { color: #fbbf24; }
.pro-sb-stat-lbl {
  display: block; font-size: 0.49rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #818cf8; margin-top: 3px;
}

/* ── Shared Nav ── */
.pro-sidebar-nav {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.25) transparent;
  padding: 2px 0;
}
.pro-nav-section { padding: 7px 9px 2px; }
.pro-nav-label {
  display: block; font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-size: 0.52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #818cf8; padding: 0 7px 4px;
}
.pro-nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 9px;
  border-radius: 9px; border: none; background: none;
  color: #c7d2fe;
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-size: 0.70rem; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
  transition: background .13s, color .13s;
  text-align: left; line-height: 1;
}
.pro-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.pro-nav-item.active {
  background: #6C47FF; color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(108,71,255,.35);
}
.pro-nav-item--muted { opacity: .5; cursor: not-allowed; }
.pro-nav-item--muted:hover { background: none; color: #c7d2fe; }

/* Daily Quest Sprint button states */
.pro-nav-item--done {
  opacity: .6;
  cursor: default;
}
.pro-nav-item--done .pro-nav-item-xp {
  color: #4ade80;
  font-weight: 800;
}
.pro-nav-item-icon { font-size: 0.77rem; flex-shrink: 0; }
.pro-nav-item-badge {
  margin-left: auto; background: #FF4A6B; color: #fff;
  font-size: 0.52rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.pro-nav-item-xp {
  margin-left: auto; color: #fbbf24; font-size: 0.57rem; font-weight: 700;
}
/* Daily Quest XP badge — animated pill with shooting stars */
.dq-xp-badge {
  position: relative;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.58rem; font-weight: 800;
  padding: 2px 7px 2px 5px;
  border-radius: 99px;
  overflow: visible;
  animation: dqXpPulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(245,158,11,.6);
}
.dq-xp-badge::before {
  content: '✦';
  font-size: 0.55rem;
  animation: dqStarSpin 2.4s linear infinite;
}
/* Floating star particles via siblings injected by JS */
.dq-star-particle {
  position: absolute;
  pointer-events: none;
  font-size: 0.55rem;
  color: #fde68a;
  animation: dqStarFloat 1.8s ease-out forwards;
  opacity: 0;
}
@keyframes dqXpPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 5px rgba(245,158,11,.0); transform: scale(1.07); }
}
@keyframes dqStarSpin {
  0%   { transform: rotate(0deg) scale(1);   opacity: 1; }
  50%  { transform: rotate(180deg) scale(1.3); opacity: .7; }
  100% { transform: rotate(360deg) scale(1);  opacity: 1; }
}
@keyframes dqStarFloat {
  0%   { opacity: 1; transform: translateY(0)   scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(.5); }
}
/* Done state overrides */
.pro-nav-item--done .dq-xp-badge {
  background: linear-gradient(135deg, #16a34a, #15803d);
  animation: none;
  box-shadow: none;
}
.pro-nav-item--done .dq-xp-badge::before { content: '✓'; animation: none; }
.pro-nav-item-rank {
  margin-left: auto;
  background: rgba(17,19,75,.8); color: #a5b4fc;
  font-size: 0.53rem; font-weight: 600;
  padding: 2px 6px; border-radius: 5px;
  border: 1px solid rgba(99,102,241,.3);
}

/* ── Bottom ── */
.pro-sidebar-bottom {
  padding: 8px 11px 11px;
  border-top: 1px solid rgba(99,102,241,.2);
  background: rgba(11,13,40,.55);
  display: flex; flex-direction: column; gap: 7px; flex-shrink: 0;
}
.pro-sidebar-theme-label {
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-size: 0.51rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #818cf8;
}
.pro-sidebar-theme {
  display: flex; gap: 2px;
  background: rgba(10,12,38,.9); border: 1px solid rgba(99,102,241,.25);
  border-radius: 11px; padding: 3px;
}
.pro-sb-theme-btn {
  flex: 1; border: none; background: none; border-radius: 8px;
  padding: 5px 0; font-size: 0.74rem; color: rgba(165,180,252,.55);
  cursor: pointer; touch-action: manipulation;
  transition: background .16s, color .16s; line-height: 1;
}
.pro-sb-theme-btn:hover { color: #fff; }
.pro-sb-theme-btn.active { background: #ec4899; color: #fff; }
.pro-sidebar-logout {
  width: 100%; padding: 6px 10px; border-radius: 9px;
  background: none; border: 1px solid transparent;
  color: #a5b4fc;
  font-family: 'Plus Jakarta Sans', var(--font-heading), sans-serif;
  font-size: 0.68rem; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
  transition: background .14s, color .14s, border-color .14s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pro-sidebar-logout:hover {
  background: rgba(255,255,255,.05); color: #fff;
  border-color: rgba(99,102,241,.35);
}

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════════════════════ */
.pro-main {
  flex: 1; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  height: 100%; background: var(--color-bg);
  display: flex; flex-direction: column;
}
.pro-kpi-strip {
  display: flex; gap: 0; flex-shrink: 0;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.pro-kpi {
  flex: 1; padding: 13px 16px;
  border-right: 1px solid var(--color-border);
  min-width: 0; transition: background .12s;
}
.pro-kpi:last-child { border-right: none; }
.pro-kpi:hover { background: var(--color-muted); }
.pro-kpi-value {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700;
  color: var(--color-fg); line-height: 1; font-variant-numeric: tabular-nums;
}
.pro-kpi-label {
  font-family: var(--font-heading); font-size: 0.58rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-muted-fg); margin-top: 3px;
}
.pro-kpi--accent .pro-kpi-value  { color: var(--color-primary); }
.pro-kpi--centile .pro-kpi-value { color: #16a34a; }

.pro-tab-bar {
  display: flex; gap: 0; flex-shrink: 0;
  background: var(--color-card);
  border-bottom: 2px solid var(--color-border);
  padding: 0 20px; overflow-x: auto; scrollbar-width: none;
}
.pro-tab-bar::-webkit-scrollbar { display: none; }
.pro-tab {
  padding: 11px 16px; background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  font-family: var(--font-heading); font-size: 0.77rem; font-weight: 600;
  color: var(--color-muted-fg); cursor: pointer; white-space: nowrap;
  transition: color .14s, border-color .14s; touch-action: manipulation;
}
.pro-tab:hover { color: var(--color-fg); }
.pro-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.pro-tab-panel { display: none; padding: 24px 28px 40px; }
.pro-tab-panel.active { display: block; }

.pro-section-label {
  font-family: var(--font-heading); font-size: 0.59rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-muted-fg); margin: 0 0 10px;
}
.pro-panel {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden; margin-bottom: 24px;
}

/* ══ HOME TAB ══ */
.pro-home-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.pro-qbank-card {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.pro-qbank-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.11); transform: translateY(-3px); }

/* Coloured accent header */
.pro-qbank-header {
  padding: 22px 24px 18px;
  display: flex; align-items: flex-start; gap: 14px;
}
.pro-qbank-header--mcq   { background: linear-gradient(130deg, #1e40af 0%, #2563EB 100%); }
.pro-qbank-header--essay { background: linear-gradient(130deg, #065f46 0%, #059669 100%); }
.pro-qbank-icon {
  width: 46px; height: 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; flex-shrink: 0;
}
.pro-qbank-icon--mcq   { background: rgba(255,255,255,.18); }
.pro-qbank-icon--essay { background: rgba(255,255,255,.18); }
.pro-qbank-header-text { display: flex; flex-direction: column; gap: 4px; }
.pro-qbank-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #fff; }
.pro-qbank-subtitle { font-size: 0.75rem; color: rgba(255,255,255,.7); line-height: 1.4; }

/* Card body */
.pro-qbank-body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.pro-qbank-desc { font-size: 0.82rem; color: var(--color-muted-fg); line-height: 1.6; }

/* Stats row */
.pro-qbank-meta { display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.pro-qbank-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 12px 8px;
  border-right: 1px solid var(--color-border);
}
.pro-qbank-stat:last-child { border-right: none; }
.pro-qbank-stat-val { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--color-fg); line-height: 1; }
.pro-qbank-stat-lbl { font-family: var(--font-heading); font-size: 0.6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted-fg); text-align: center; }

/* Action buttons */
.pro-qbank-actions { display: flex; gap: 10px; margin-top: auto; }
.pro-qbank-btn {
  flex: 1; padding: 11px 12px; border-radius: 9px;
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700;
  cursor: pointer; border: none; touch-action: manipulation;
  transition: background .14s, transform .1s, box-shadow .14s;
  letter-spacing: .01em;
}
.pro-qbank-btn:active { transform: scale(.97); }
.pro-qbank-btn--primary {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.pro-qbank-btn--primary:hover { background: #1d4ed8; box-shadow: 0 4px 14px rgba(37,99,235,.4); }
.pro-qbank-btn--secondary {
  background: var(--color-muted); color: var(--color-muted-fg);
  border: 1.5px solid var(--color-border);
}
.pro-qbank-btn--secondary:hover { background: var(--color-border); }

.pro-resume-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md); padding: 15px 18px;
  margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pro-resume-chapter { font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; color: var(--color-fg); }
.pro-resume-meta    { font-size: 0.74rem; color: var(--color-muted-fg); margin-top: 2px; }
.pro-continue-btn {
  padding: 8px 18px; background: var(--color-primary); color: #fff;
  border: none; border-radius: 7px;
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; flex-shrink: 0; transition: background .14s; touch-action: manipulation;
}
.pro-continue-btn:hover { background: #1d4ed8; }

/* ══ PERFORMANCE TAB ══ */
.pro-centile-wrap {
  display: flex; gap: 32px; align-items: center; padding: 22px 26px;
}
.pro-centile-svg-box { flex: 1; min-width: 0; }
.pro-centile-svg-box svg { width: 100%; height: auto; display: block; }
.pro-centile-legend { flex-shrink: 0; width: 215px; display: flex; flex-direction: column; gap: 10px; }
.pro-centile-legend-title { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--color-fg); margin-bottom: 4px; }
.pro-centile-legend-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.77rem; color: var(--color-muted-fg); }
.pro-centile-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pro-centile-legend-label { flex: 1; }
.pro-centile-legend-val {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.74rem;
  color: var(--color-fg); background: var(--color-muted);
  border: 1px solid var(--color-border); border-radius: 4px; padding: 2px 7px;
}
.pro-centile-placeholder {
  font-size: 0.68rem; color: var(--color-muted-fg); font-style: italic;
  padding-top: 8px; border-top: 1px solid var(--color-border);
  margin-top: 4px; line-height: 1.5;
}
.pro-perf-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pro-perf-table th {
  text-align: left; padding: 10px 14px;
  font-family: var(--font-heading); font-size: 0.63rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted-fg); background: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}
.pro-perf-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); color: var(--color-fg); }
.pro-perf-table tbody tr:last-child td { border-bottom: none; }
.pro-perf-table tbody tr:hover { background: var(--color-muted); }
.pro-acc-pill { padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; }
.pro-acc-pill.good { background: #dcfce7; color: #16a34a; }
.pro-acc-pill.mid  { background: #fef9c3; color: #b45309; }
.pro-acc-pill.poor { background: #fee2e2; color: #dc2626; }
.pro-perf-bar-wrap { background: var(--color-muted); border-radius: 99px; height: 6px; width: 120px; overflow: hidden; }
.pro-perf-bar-fill { height: 100%; border-radius: 99px; }

/* ══ THIS WEEK TAB ══ */
.pro-week-panel { padding: 18px 22px; }
.pro-week-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.pro-week-boxes { display: flex; gap: 8px; }
.pro-day-box {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--color-muted); border: 1.5px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  color: var(--color-muted-fg);
}
.pro-day-box.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pro-day-box.today  { border-color: var(--color-accent); }
.pro-week-right { margin-left: auto; text-align: right; }
.pro-week-goal-text { font-family: var(--font-heading); font-size: 1.0rem; font-weight: 700; color: var(--color-fg); }
.pro-week-goal-sub  { font-size: 0.74rem; color: var(--color-muted-fg); margin-top: 2px; }
.pro-activity-chart { padding: 0 22px 18px; }
.pro-activity-chart-title {
  font-family: var(--font-heading); font-size: 0.59rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-muted-fg); margin-bottom: 12px;
}
.pro-bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 90px; }
.pro-bar-col   { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.pro-bar-fill  { width: 100%; border-radius: 4px 4px 0 0; background: var(--color-primary); opacity: .75; min-height: 3px; }
.pro-bar-fill.today-bar { background: var(--color-accent); opacity: 1; }
.pro-bar-lbl   { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; color: var(--color-muted-fg); }

/* ══ WEAK AREAS TAB ══ */
.pro-weak-list { list-style: none; padding: 0; margin: 0; }
.pro-weak-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--color-border); }
.pro-weak-item:last-child { border-bottom: none; }
.pro-weak-num   { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--color-muted-fg); flex-shrink: 0; }
.pro-weak-q     { flex: 1; font-size: 0.8rem; color: var(--color-fg); }
.pro-weak-count { padding: 2px 8px; background: #fee2e2; color: #dc2626; border-radius: 99px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.pro-weak-chart { padding: 18px 22px; }
.pro-weak-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.75rem; }
.pro-weak-bar-label { width: 150px; flex-shrink: 0; color: var(--color-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-weak-bar-track { flex: 1; height: 8px; background: var(--color-muted); border-radius: 99px; overflow: hidden; }
.pro-weak-bar-inner { height: 100%; border-radius: 99px; background: #ef4444; }
.pro-weak-bar-val   { font-family: var(--font-heading); font-weight: 700; font-size: 0.72rem; color: var(--color-muted-fg); width: 30px; text-align: right; flex-shrink: 0; }

/* ══ EXAM TAB ══ */
.pro-exam-row  { display: flex; align-items: center; gap: 20px; padding: 22px 24px; }
.pro-exam-days { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.pro-exam-label  { font-size: 0.8rem; color: var(--color-muted-fg); margin-top: 4px; }
.pro-exam-empty  { font-size: 0.84rem; color: var(--color-muted-fg); font-style: italic; }
.pro-exam-info   { display: flex; flex-direction: column; }
.pro-mini-btn {
  padding: 8px 16px; border-radius: 7px; background: var(--color-primary);
  color: #fff; border: none; font-family: var(--font-heading);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: background .14s;
}
.pro-mini-btn:hover { background: #1d4ed8; }
.pro-date-input {
  padding: 8px 12px; border: 1.5px solid var(--color-border); border-radius: 7px;
  font-family: var(--font-body); font-size: 0.82rem;
  background: var(--color-card); color: var(--color-fg); outline: none;
}
.pro-date-input:focus { border-color: var(--color-primary); }

/* ══ REVISION PAPERS TAB ══ */
.pro-revision-empty { text-align: center; padding: 60px 24px; }
.pro-revision-icon  { font-size: 3rem; margin-bottom: 16px; }
.pro-revision-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--color-fg); margin-bottom: 8px; }
.pro-revision-sub   { font-size: 0.82rem; color: var(--color-muted-fg); line-height: 1.6; }

/* ══ DARK MODE ══ */
body.theme-dark .pro-panel       { box-shadow: none; }
body.theme-dark .pro-kpi-strip   { background: var(--color-card); }
body.theme-dark .pro-tab-bar     { background: var(--color-card); }
body.theme-dark .pro-qbank-card  { box-shadow: none; border-color: rgba(255,255,255,.08); }
body.theme-dark .pro-qbank-meta  { border-color: rgba(255,255,255,.08); }
body.theme-dark .pro-qbank-stat  { border-right-color: rgba(255,255,255,.08); }
body.theme-dark .pro-resume-card { box-shadow: none; }
body.theme-dark .pro-acc-pill.good { background: #14532d; color: #86efac; }
body.theme-dark .pro-acc-pill.mid  { background: #78350f; color: #fcd34d; }
body.theme-dark .pro-acc-pill.poor { background: #450a0a; color: #fca5a5; }
body.theme-dark .pro-weak-count    { background: #450a0a; color: #fca5a5; }
body.theme-dark .pro-perf-bar-wrap { background: #334155; }
body.theme-dark .pro-perf-table thead { background: rgba(255,255,255,.04); }
body.theme-dark .pro-perf-table tbody tr:hover { background: rgba(255,255,255,.04); }
body.theme-dark .pro-date-input { background: #1e293b; color: var(--color-fg); border-color: #334155; }
body.theme-dark .pro-centile-legend-val { background: #1e293b; border-color: #334155; }
body.theme-dark .pro-qbank-icon--mcq  { background: rgba(37,99,235,.18); }
body.theme-dark .pro-qbank-icon--essay{ background: rgba(22,163,74,.18); }

/* ── Explanation Tabs ────────────────────────────────── */
.explain-tabs-wrap {
  margin-top: 12px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.explain-tab-bar {
  display: flex;
  background: var(--color-muted, #f1f5f9);
  border-bottom: 2px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.explain-tab-bar::-webkit-scrollbar { display: none; }

.explain-tab-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-muted-fg);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.explain-tab-btn:hover { color: var(--color-primary); }
.explain-tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-card);
}

/* Expand-to-fullscreen pill — small, sits in tab bar right side */
.sn-expand-pill {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  height: 24px;
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background .14s, color .14s;
  white-space: nowrap;
}
.sn-expand-pill:hover { background: var(--color-primary); color: #fff; }
.sn-expand-pill:active { opacity: 0.8; }
@keyframes sn-pill-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 transparent; }
  50% { opacity: 0.15; box-shadow: 0 0 6px 2px var(--color-primary); }
}
.sn-expand-pill.is-blinking {
  animation: sn-pill-blink 0.55s ease-in-out 9;
}
/* When pill is in standalone wrap (flashcard notes panel) */
.sn-expand-pill-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

/* Study note fullscreen modal */
.sn-fullscreen-overlay {
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 9000;
}
.sn-fullscreen-box {
  background: var(--color-card, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  width: clamp(320px, 80vw, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sn-fullscreen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.sn-fullscreen-title {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -.01em;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sn-fullscreen-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-muted-fg);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sn-fullscreen-close:hover { background: var(--color-muted); color: var(--color-fg); }
.sn-fullscreen-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.sn-fullscreen-body::-webkit-scrollbar { width: 5px; }
.sn-fullscreen-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* Section cards in modal — keep card boxes, generous spacing between them */
.sn-fullscreen-body .sn-section-card { margin: 32px 0; }
.sn-fullscreen-body .sn-section-card:first-child { margin-top: 0; }

/* Font scale — readable but not oversized; 0.95rem ≈ 15.2px at 16px root */
.sn-fullscreen-body .sn-h2   { font-size: 1.15rem; margin-bottom: 10px; }
.sn-fullscreen-body .sn-h3   { font-size: 1rem;    margin-bottom: 6px; color: var(--ch-color, var(--color-primary)); }
.sn-fullscreen-body .sn-p    { font-size: 0.95rem; line-height: 1.65; margin: 5px 0; }
.sn-fullscreen-body .sn-ul,
.sn-fullscreen-body .sn-ol   { font-size: 0.95rem; line-height: 1.65; gap: 4px; }
.sn-fullscreen-body .sn-callout { font-size: 0.92rem; line-height: 1.6; }
.sn-fullscreen-body .sn-img  { max-height: 300px; width: auto; max-width: 100%; object-fit: contain; margin: 12px 0; }
.sn-fullscreen-body .sn-spacer { height: 14px; }
.sn-fullscreen-body .sn-hr  { margin: 16px 0; }

body.theme-dark .sn-fullscreen-box {
  background: var(--color-card, #1e293b);
}

.explain-tab-body { padding: 12px 14px; }

.explain-tab-panel { display: none; }
.explain-tab-panel.active { display: block; }

/* Answer tabs (correct / wrong / study): independently scrollable */
.explain-tab-panel[data-panel="why-correct"],
.explain-tab-panel[data-panel="why-wrong"],
.explain-tab-panel[data-panel="theory"] {
  max-height: clamp(180px, 38vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  padding-right: 4px;
}
.explain-tab-panel[data-panel="why-correct"]::-webkit-scrollbar,
.explain-tab-panel[data-panel="why-wrong"]::-webkit-scrollbar,
.explain-tab-panel[data-panel="theory"]::-webkit-scrollbar { width: 4px; }
.explain-tab-panel[data-panel="why-correct"]::-webkit-scrollbar-thumb,
.explain-tab-panel[data-panel="why-wrong"]::-webkit-scrollbar-thumb,
.explain-tab-panel[data-panel="theory"]::-webkit-scrollbar-thumb {
  background: var(--color-border); border-radius: 4px;
}

/* ── Why + Theory collapsibles (answer reveal) ──────── */
.reveal-extras { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.reveal-extra-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 2px solid var(--border,#e2e8f0);
  border-radius: 10px; padding: 10px 14px;
  font-family: 'Comic Neue', cursive; font-size: .95rem; font-weight: 700;
  color: var(--primary,#2563EB); cursor: pointer; width: 100%;
  transition: background .15s;
}
.reveal-extra-btn:hover { background: #eff6ff; }
.reveal-extra-btn .extra-arrow { margin-left: auto; transition: transform .2s; }
.reveal-extra-btn.open .extra-arrow { transform: rotate(180deg); }
.reveal-extra-body {
  display: none; padding: 12px 14px;
  border: 2px solid var(--border,#e2e8f0);
  border-top: none; border-radius: 0 0 10px 10px;
  margin-top: -10px; background: #fff;
}
.reveal-extra-body.open { display: block; }

/* Why? option rows */
.why-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: 8px;
  font-family: 'Comic Neue', cursive; font-size: 1rem; line-height: 1.5;
  margin-bottom: 8px;
}
.why-correct {
  background: #f0fdf4; border-left: 3px solid #16a34a; color: #14532d;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.why-wrong   { background: #fff5f5; border-left: 3px solid #ef4444; color: #7f1d1d; }
.why-bullet  {
  font-weight: 700; min-width: 24px; height: 24px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0; color: #fff;
}
.why-correct .why-bullet { background: #16a34a; }
.why-wrong   .why-bullet { background: #ef4444; }
.why-body { display: flex; flex-direction: column; gap: 2px; }
.why-option-text {
  color: var(--color-primary);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.4;
}
.why-expl {
  font-size: .92rem;
  color: inherit;
  opacity: .85;
  line-height: 1.75;
}
.why-option-header {
  font-weight: 700;
  font-size: 0.93rem;
  color: #374151;
  line-height: 1.4;
}
.expl-key {
  background: #dbeafe;
  color: #1e40af;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  font-family: Verdana, sans-serif;
  font-size: .8rem;
}

/* Theory sections */
/* Theory card wrapper — white card per subtopic */
.theory-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px 12px;
  margin-bottom: 8px;
}
.theory-card:last-child { margin-bottom: 0; }
.theory-card .theory-head { margin-top: 0; }

.theory-head {
  font-family: 'Baloo 2', cursive; font-size: 1rem; font-weight: 700;
  color: var(--color-primary); margin: 12px 0 4px; text-transform: uppercase;
  letter-spacing: .04em;
}
.theory-head:first-child { margin-top: 0; }
.theory-row {
  font-family: 'Comic Neue', cursive; font-size: 1rem;
  line-height: 1.75; padding: 2px 0 2px 10px;
  border-left: 2px solid #e2e8f0; margin-bottom: 3px; color: #334155;
}
.theory-key { font-weight: 700; color: #1e293b; }

/* ══ RESPONSIVE ≤720px ══ */
@media (max-width: 720px) {
  body.pro-fs-active #view-child-dash { height: 100dvh; overflow: hidden; }
  body.pro-fs-active #view-child-dash #child-dash-body { height: auto; overflow: visible; min-height: 0; display: flex; }
  .pro-fs-layout { flex-direction: column; height: 100%; overflow: hidden; }
  .pro-sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 10px 8px; scrollbar-width: none; }
  .pro-sidebar::-webkit-scrollbar { display: none; }
  .pro-sidebar-user { flex-direction: row; padding: 0 12px 0 0; border-bottom: none; border-right: 1px solid rgba(255,255,255,.1); margin-right: 8px; gap: 10px; min-width: fit-content; text-align: left; }
  .pro-sidebar-av { width: 34px; height: 34px; font-size: 0.82rem; }
  .pro-sidebar-badge, .pro-sidebar-centile { display: none; }
  .pro-nav-section { padding: 0 4px; white-space: nowrap; }
  .pro-nav-label { display: none; }
  .pro-nav-item { padding: 5px 8px; font-size: 0.72rem; gap: 5px; }
  .pro-sidebar-bottom { margin-top: 0; border-top: none; flex-direction: row; align-items: center; gap: 6px; padding: 0 4px; border-left: 1px solid rgba(255,255,255,.1); margin-left: 4px; }
  .pro-sidebar-theme-label { display: none; }
  .pro-sidebar-logout { padding: 5px 10px; font-size: 0.72rem; }
  .pro-main { height: 100%; overflow-y: auto; }
  .pro-kpi-strip { overflow-x: auto; scrollbar-width: none; }
  .pro-kpi { min-width: 90px; padding: 11px 12px; }
  .pro-kpi-value { font-size: 1.15rem; }
  .pro-home-grid { grid-template-columns: 1fr; }
  .pro-centile-wrap { flex-direction: column; padding: 16px; }
  .pro-centile-legend { width: 100%; }
  .pro-tab-panel { padding: 16px 14px 32px; }
  .pro-perf-bar-wrap { width: 80px; }
}


/* ══════════════════════════════════════════════════════════════════
   JUNIOR PANEL SYSTEM  — full-page panels inside .pro-main
   Replaces modals for Performance on grades 6-9
   ══════════════════════════════════════════════════════════════════ */

/* Each panel fills the remaining space below the sticky header */
.jdash-panel-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* The performance panel is scrollable (not viewport-constrained like home) */
.jdash-panel-page--perf {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  scrollbar-width: none;
}
.jdash-panel-page--perf::-webkit-scrollbar { display: none; }

/* Top bar: back button + title */
.jdash-panel-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.jdash-panel-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 4px 8px 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.jdash-panel-back-btn:hover { opacity: .75; }
.jdash-panel-topbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Body scrolls, matches pro-panel-* padding */
.jdash-panel-body {
  padding: 0 0 32px;
  flex: 1;
}
.jdash-panel-body--scroll {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* ══════════════════════════════════════════════════════════════════
   EXAM READINESS CARD  — .exam-ready-card
   Circular gauge card shown at the top of the Performance section
   ══════════════════════════════════════════════════════════════════ */

.exam-ready-card {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 14px;
  padding: 18px 20px;
  color: white;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 210px;
  align-self: flex-start;
  margin: 0 0 4px;
  box-sizing: border-box;
}
.exam-ready-card__title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
}
.exam-ready-card__gauge {
  margin: 4px 0 6px;
  align-self: center;
}
.exam-ready-card__gauge svg text {
  font-family: var(--font-body, 'Nunito', sans-serif);
}
.exam-ready-card__sub {
  font-size: .75rem;
  color: rgba(255,255,255,.75);
  text-align: left;
  margin-top: 2px;
}

/* Inspiration note */
.perf-inspiration-note {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-card);
  border: 1.5px dashed var(--color-border);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 0 0 4px;
}
.perf-inspiration-note a {
  color: var(--color-primary);
  text-decoration: underline;
  word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════
   SUBJECT BREAKDOWN CHART  — .subj-* classes
   Used in Performance tab (all grades) and junior Performance modal
   ══════════════════════════════════════════════════════════════════ */

.subj-breakdown {
  display: flex;
  flex-direction: column;
}

/* Column header row */
.subj-breakdown__cols {
  display: grid;
  grid-template-columns: 130px 1fr 46px 76px 52px;
  gap: 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--color-muted-fg);
}
.subj-col--qs,
.subj-col--acc,
.subj-col--trend { text-align: right; }

/* Data rows */
.subj-row {
  display: grid;
  grid-template-columns: 130px 1fr 46px 76px 52px;
  gap: 8px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
}
.subj-row:last-of-type { border-bottom: none; }

.subj-row__name {
  font-weight: 600;
  font-size: .88rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bar */
.subj-row__bar-col { position: relative; }
.subj-row__track {
  position: relative;
  height: 8px;
  background: var(--color-border, #e5e7eb);
  border-radius: 6px;
}
.subj-row__fill {
  height: 100%;
  border-radius: 6px;
  transition: width .5s ease;
}
/* Grade-average marker — a thin vertical blue tick */
.subj-row__avg-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #3b82f6;
  border-radius: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Stats columns */
.subj-row__qs    { font-size: .8rem;  color: var(--color-muted-fg); text-align: right; }
.subj-row__acc   { font-size: .88rem; font-weight: 700; text-align: right; }
.subj-row__trend { font-size: .8rem;  font-weight: 600; text-align: right; }
.subj-trend--up      { color: #16a34a; }
.subj-trend--down    { color: #dc2626; }
.subj-trend--neutral { color: var(--color-muted-fg); }

/* Legend */
.subj-breakdown__legend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .7rem;
  color: var(--color-muted-fg);
  font-style: italic;
  padding-top: 10px;
}
.subj-avg-line {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: #3b82f6;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Dark mode */
body.theme-dark .subj-row__track { background: #334155; }
body.theme-dark .subj-row__avg-marker { background: #60a5fa; }
body.theme-dark .subj-avg-line { background: #60a5fa; }

/* Narrow screens: shrink subject column */
@media (max-width: 520px) {
  .subj-breakdown__cols,
  .subj-row { grid-template-columns: 90px 1fr 36px 60px 44px; }
  .subj-row__name { font-size: .8rem; }
  .subj-col--trend, .subj-row__trend { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   JUNIOR DASHBOARD  (grades 6-9)  — .jdash-* classes
   Claymorphism, bright, bouncy — single-column scroll layout
   ══════════════════════════════════════════════════════════════════ */

/* ── wrapper ── */
.jdash-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 12px);
  padding: var(--sp-2, 12px);
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ── hero card ── */
.jdash-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 12px);
  padding: 14px 18px;
}
.jdash-av {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  flex-shrink: 0;
  border: 3px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
}
.jdash-hero-info { flex: 1; min-width: 0; }
.jdash-hero-name {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--color-fg, #0F172A);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jdash-grade-pill {
  display: inline-block;
  background: var(--color-primary, #2563EB);
  color: #fff;
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 99px;
  border: 2px solid rgba(0,0,0,.12);
  margin-bottom: 3px;
}
.jdash-level-name {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.78rem;
  color: var(--color-muted, #94a3b8);
  margin-top: 1px;
}
.jdash-xp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.jdash-xp-track {
  flex: 1;
  height: 10px;
  background: var(--color-muted, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.08);
}
.jdash-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary, #2563EB), var(--color-accent, #EC4899));
  border-radius: 99px;
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}
.jdash-xp-lbl {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--color-primary, #2563EB);
  white-space: nowrap;
}

/* goal ring sits to the right of hero-info */
.jdash-ring {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.jdash-ring svg { display: block; }
.jdash-ring-lbl {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.65rem;
  color: var(--color-muted, #94a3b8);
  font-weight: 700;
}

/* ── Persistent dashboard header (always visible across all panels) ── */
.jdash-dash-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 20px 13px 22px;
  background: var(--color-card, #fff);
  border-bottom: 2px solid var(--color-border, #e2e8f0);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.jdash-dash-hdr__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jdash-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #fff8f0;
  border: 2px solid #f59e0b;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 800;
  color: #b45309;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Keep old class for backward compat — not used anymore */
.jdash-home-header { display: none; }
.jdash-home-header--with-switch { display: none; }

.jdash-home-header__name {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-fg, #0F172A);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.jdash-home-header__sub {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted-fg, #64748b);
  letter-spacing: .01em;
}

/* ── jdash-wrap top spacing ── */
.pro-main .jdash-wrap {
  padding-top: 20px;
}


/* ── stats row shared ── */
.jdash-stats {
  /* no global right offset — each tier handles its own clearance */
}

/* badge is fixed at top-right inside the header area — no padding offset needed */
.jdash-stats--junior { padding-right: 0; }
.jdash-stats--senior { padding-right: 0; }

/* ── Grade 6-7: original vertical cards, taller ── */
.jdash-stats--junior {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.jdash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 8px;
  text-align: center;
  gap: 4px;
}
.jdash-stat-icon { font-size: 1.8rem; line-height: 1; }
.jdash-stat-val {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--color-primary, #2563EB);
  line-height: 1;
}
.jdash-stat-lbl {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.72rem;
  color: var(--color-muted, #94a3b8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* grade avg sub-label on junior stat cards */
.jdash-stat-sub {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.58rem;
  color: var(--color-muted, #94a3b8);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}
/* Force readable contrast on junior stat cards regardless of gender palette
   (gender themes set --color-muted to near-white which disappears on white cards) */
.jdash-stats--junior .jdash-stat-val {
  color: var(--color-fg, #0F172A);
}
.jdash-stats--junior .jdash-stat-lbl,
.jdash-stats--junior .jdash-stat-sub {
  color: var(--color-fg, #0F172A);
  opacity: 0.52;
}

/* ── Compact single-row cards (grade 6-7 Total Progress + This Week) ── */
.jdash-card--compact { padding: 10px 14px; }
/* Pull This Week card tight against the Practice/Review buttons above */
.jdash-card--week { margin-top: -6px; }
.jdash-card-title--compact {
  font-size: 0.78rem;
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}
.jdash-compact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.jdash-compact-row--week { gap: 8px; }

/* small progress bar inside junior Total Questions stat card */
.jdash-stat-junior-bar {
  width: 68%;
  height: 5px;
  background: rgba(0,0,0,.10);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 3px;
}
.jdash-stat-junior-bar-fill {
  height: 100%;
  background: var(--color-fg, #0F172A);
  opacity: 0.45;
  border-radius: 99px;
  transition: width .5s ease;
}

/* mini progress bars for inline Total Progress */
.jdash-ch-bars-inline {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.jdash-ch-bar-mini {
  height: 7px;
  background: var(--color-muted, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
}
.jdash-ch-bar-mini-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}

/* inline week dots */
.jdash-week-dots--inline {
  display: flex;
  gap: 3px;
  flex: 1;
  justify-content: center;
}
.jdash-week-dots--inline .jdash-dot {
  width: 26px;
  height: 26px;
}
.jdash-week-dots--inline .jdash-dot-letter { font-size: 0.5rem; }

/* ── Grade 8-9: reference-style horizontal cards, single row ── */
.jdash-stats--senior {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.jdash-stat-pro {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.jdash-stat-pro-header {
  background: #312e81;
  color: rgba(255,255,255,.88);
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 5px 14px;
  border-radius: 0;
  flex-shrink: 0;
}
.jdash-stat-pro-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 14px;
  flex: 1;
}
.jdash-stat-pro-icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.jdash-stat-pro-lbl {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted-fg, #64748b);
  line-height: 1;
}
.jdash-stat-pro-avg {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--color-muted-fg, #94a3b8);
}
.jdash-stat-pro-val {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-fg, #0F172A);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}
.jdash-stat-pro-sub {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.68rem;
  color: var(--color-primary, #2563EB);
  font-weight: 700;
  margin-top: 2px;
}

/* ── inline progress bar inside pro stat card ── */
.jdash-stat-pro-bar-wrap {
  margin-top: 6px;
  height: 5px;
  background: var(--color-border, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
  width: calc(100% - 56px); /* same right clearance as val */
}
.jdash-stat-pro-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--color-primary, #2563EB);
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
}

/* ── Grade 8-9: Chapter Performance pro card ── */
.jdash-progress-pro {
  padding: 0;
  overflow: hidden;
}
.jdash-progress-pro__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--color-border);
}
.jdash-progress-pro__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-fg);
  letter-spacing: -.01em;
}
.jdash-progress-pro__count {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  background: var(--color-muted, #f1f5f9);
  padding: 3px 9px;
  border-radius: 99px;
}
.jdash-progress-pro__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--color-border);
  transition: background .12s;
}
.jdash-progress-pro__row:last-child { border-bottom: none; }
.jdash-progress-pro__row:hover { background: var(--color-muted, #f8fafc); }
.jdash-progress-pro__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 160px;
  flex-shrink: 0;
}
.jdash-progress-pro__name {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jdash-progress-pro__tier {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.jdash-progress-pro__bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-muted, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
}
.jdash-progress-pro__bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
.jdash-progress-pro__pct {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  width: 38px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Activity heatmap ── */
.jdash-activity {
  padding: 10px 14px 10px;
}
.jdash-activity__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.jdash-activity__title {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--color-fg, #0F172A);
}
.jdash-activity__legend {
  display: flex;
  align-items: center;
  gap: 3px;
}
.jdash-activity__leg-lbl {
  font-size: 0.58rem;
  color: var(--color-muted-fg, #64748b);
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-weight: 700;
}
/* body = day-labels column + main grid */
.jdash-activity__body {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.activity-day-labels {
  display: grid;
  grid-template-rows: repeat(7, 10px);
  gap: 2px;
  margin-top: 15px;   /* aligns with grid rows (below month label row) */
  flex-shrink: 0;
}
.activity-day-lbl {
  font-size: 0.54rem;
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-weight: 700;
  color: var(--color-muted-fg, #64748b);
  height: 10px;
  line-height: 10px;
  text-align: right;
  padding-right: 2px;
  white-space: nowrap;
}
.activity-main {
  flex: 1;
  min-width: 0;
}
.activity-month-lbl {
  font-size: 0.56rem;
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-weight: 700;
  color: var(--color-muted-fg, #64748b);
  white-space: nowrap;
  overflow: hidden;
  line-height: 13px;
}
.activity-cell {
  border-radius: 2px;
  cursor: default;
}

/* ── action buttons ── */
@keyframes jdash-btn-float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 6px 0 rgba(0,0,0,.18); }
  50%       { transform: translateY(-5px); box-shadow: 0 11px 22px rgba(0,0,0,.14); }
}
.jdash-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.jdash-action-btn {
  height: 164px;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-heading, 'Baloo 2', cursive);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 22px;
  border: 3px solid rgba(0,0,0,.12);
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
  touch-action: manipulation;
  padding: 0 12px;
  width: 100%;
  text-align: center;
  animation: jdash-btn-float 3.2s ease-in-out infinite;
}
.jdash-actions .jdash-action-btn:last-child {
  animation-delay: 1.6s;
}
.jdash-action-btn:active {
  transform: scale(0.95) translateY(4px) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.12) !important;
  animation-play-state: paused;
}
.jdash-action-btn--primary {
  background: var(--color-primary, #2563EB);
  color: #fff;
}
.jdash-action-btn--secondary {
  background: var(--color-secondary, #F59E0B);
  color: #fff;
}

/* ── Grade 8-9: flat button-style action cards ── */
.jdash-actions--senior {
  gap: 14px;
}
.jdash-actions--senior .jdash-action-btn {
  border-radius: 14px;
  border: none;
  animation: none;
  height: 176px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 1rem;
  letter-spacing: .01em;
}
.jdash-actions--senior #btn-practice {
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 60%, #1e40af 100%);
}
.jdash-actions--senior #btn-practice:hover {
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 60%, #1d4ed8 100%);
  box-shadow: 0 6px 20px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.jdash-actions--senior #btn-review {
  background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
}
.jdash-actions--senior #btn-review:hover {
  background: linear-gradient(145deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
  box-shadow: 0 6px 20px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.jdash-actions--senior .jdash-action-btn:active {
  transform: scale(0.97) translateY(2px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  animation-play-state: paused;
}

/* ── card shared ── */
.jdash-card {
  padding: 14px 16px;
}
.jdash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.jdash-card-title {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-fg, #0F172A);
}

/* ── weekly goal dots ── */
.jdash-week-goal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.jdash-week-goal-lbl {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.78rem;
  color: var(--color-muted, #94a3b8);
  font-weight: 700;
}
.jdash-week-dots {
  display: flex;
  gap: 7px;
}
.jdash-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-muted, #e2e8f0);
  border: 2px solid rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
}
.jdash-dot--on {
  background: var(--color-primary, #2563EB);
  border-color: rgba(0,0,0,.15);
}
.jdash-dot--on .jdash-dot-letter { color: #fff; }
.jdash-dot--today {
  box-shadow: 0 0 0 2px var(--color-secondary, #F59E0B);
}
.jdash-dot-letter {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 0.62rem;
  color: var(--color-muted, #94a3b8);
  line-height: 1;
}
.jdash-dot-tick {
  font-size: 0.6rem;
  line-height: 1;
  color: #fff;
}

/* ── exam countdown card ── */
.jdash-exam-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jdash-exam-card--empty {
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 6px;
  padding: 10px 0;
}
.jdash-exam-icon { font-size: 2rem; line-height: 1; }
.jdash-exam-info { flex: 1; }
.jdash-exam-days {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--color-primary, #2563EB);
  line-height: 1;
}
.jdash-exam-days span {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-muted, #94a3b8);
  margin-left: 4px;
}
.jdash-exam-date {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.78rem;
  color: var(--color-muted, #94a3b8);
  margin-top: 2px;
}

/* ── pill button ── */
.jdash-pill-btn {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 99px;
  border: 2px solid rgba(0,0,0,.12);
  background: var(--color-bg, #EFF6FF);
  color: var(--color-primary, #2563EB);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .1s ease;
}
.jdash-pill-btn:active { transform: scale(.95); }

/* ── resume card ── */
.jdash-resume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.jdash-resume-body { flex: 1; min-width: 0; }
.jdash-resume-when {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.62rem;
  color: var(--color-muted, #94a3b8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jdash-resume-chapter {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-fg, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jdash-resume-score {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.63rem;
  color: var(--color-muted, #94a3b8);
}
.jdash-resume-btn {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.12);
  background: var(--color-primary, #2563EB);
  color: #fff;
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
  transition: transform .1s ease, box-shadow .1s ease;
}
.jdash-resume-btn:active { transform: scale(.95) translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }

/* ── chapter progress list ── */
.jdash-ch-list { display: flex; flex-direction: column; gap: 9px; }
.jdash-ch-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* rank badge replaces old emoji + name */
.jdash-ch-rank {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 0.7rem;
  width: 30px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .01em;
}
/* kept for any legacy uses */
.jdash-ch-emoji { font-size: 1.1rem; flex-shrink: 0; }
.jdash-ch-name {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-fg, #0F172A);
  width: 80px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jdash-ch-track {
  flex: 1;
  height: 14px;
  background: var(--color-muted, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.06);
}
.jdash-ch-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}
.jdash-ch-pct {
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--color-primary, #2563EB);
  width: 34px;
  text-align: right;
  flex-shrink: 0;
}

/* ── empty state ── */
.jdash-empty {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.82rem;
  color: var(--color-muted, #94a3b8);
  text-align: center;
  padding: 8px 0;
}

/* ── weak spots ── */
.jdash-weak-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(0,0,0,.07);
}
.jdash-weak-row:last-child { border-bottom: none; }
.jdash-weak-q {
  flex: 1;
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-size: 0.8rem;
  color: var(--color-fg, #0F172A);
  line-height: 1.35;
}
.jdash-weak-badge {
  flex-shrink: 0;
  font-family: var(--font-heading, 'Baloo 2', cursive);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 99px;
  background: #FEF2F2;
  color: #EF4444;
  border: 1px solid #FECACA;
  white-space: nowrap;
}

/* ── achievements strip ── */
.jdash-ach-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.jdash-ach-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--color-bg, #EFF6FF);
  border: 2px solid rgba(0,0,0,.1);
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.jdash-ach-icon { font-size: 1rem; line-height: 1; }
.jdash-ach-lbl {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--color-fg, #0F172A);
}

/* ── settings footer row ── */
.jdash-settings { padding: 10px 16px; }
.jdash-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.jdash-settings-lbl {
  font-family: var(--font-body, 'Comic Neue', cursive);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-muted, #94a3b8);
}

/* ── jdash-wrap inside pro-main: remove centering, use full width ── */
.pro-main .jdash-wrap {
  max-width: none;
  margin: 0;
  padding: 20px 20px 20px;
}

/* ── responsive: phones ── */
@media (max-width: 480px) {
  .jdash-stats { grid-template-columns: repeat(2, 1fr); }
  .jdash-stat-val { font-size: 1.15rem; }
  .jdash-action-btn { height: 130px; font-size: 1rem; }
  .jdash-week-dots { gap: 5px; }
  .jdash-dot { width: 28px; height: 28px; }
  .jdash-dot-letter { font-size: 0.55rem; }
  .jdash-ch-name { width: 64px; font-size: 0.72rem; }
  .jdash-av { width: 52px; height: 52px; font-size: 1.2rem; }
  .jdash-hero-name { font-size: 1.05rem; }
}

/* ══════════════════════════════════════════════════════════════════
   JUNIOR SIDEBAR  (grades 6-9)  — always dark navy regardless of theme
   ══════════════════════════════════════════════════════════════════ */
.junior-sidebar {
  background: #161942;
}

/* XP progress bar inside sidebar user section */
.pro-sidebar-xp-row {
  width: 100%;
  margin-top: 7px;
}
.pro-sidebar-xp-track {
  height: 5px;
  background: rgba(255,255,255,.14);
  border-radius: 99px;
  overflow: hidden;
}
.pro-sidebar-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #a78bfa, #60a5fa);
  border-radius: 99px;
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}
.pro-sidebar-xp-lbl {
  font-family: var(--font-heading);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.38);
  text-align: center;
  margin-top: 3px;
}

/* 2×2 mini stats grid inside sidebar */
.jdash-sb-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 6px 10px 2px;
  flex-shrink: 0;
}
/* 2-stat row (Today + Streak only) */
.jdash-sb-stats--duo {
  grid-template-columns: 1fr 1fr;
}
.jdash-sb-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  padding: 5px 6px;
  text-align: center;
}
.jdash-sb-stat--btn {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  border: 1px solid rgba(255,255,255,.18);
}
.jdash-sb-stat--btn:hover { background: rgba(255,255,255,.15); transform: scale(1.04); }
.jdash-sb-stat--btn:active { transform: scale(0.97); }
.jdash-sb-stat-val {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jdash-sb-due-val { color: #fcd34d; }
.jdash-sb-stat-lbl {
  font-family: var(--font-heading);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
}

/* Mobile: junior sidebar elements to hide in horizontal strip mode */
@media (max-width: 767px) {
  .jdash-sb-stats { display: none; }
  .pro-sidebar-xp-row { display: none; }
  .pro-main .jdash-wrap { padding: 12px 14px 32px; }
}

/* ══════════════════════════════════════════════════════════════
   FLASHCARD MODE — complete styles
   ══════════════════════════════════════════════════════════════ */

/* ── Study Note Toggle ─────────────────────────────────────── */
.fc-note-toggle {
  position: fixed;
  top: 7px;
  right: 100px;
  z-index: 160;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.fc-note-toggle:hover {
  border-color: var(--ch-color, #d97706);
  color: var(--ch-color, #d97706);
}
.fc-note-toggle.is-on {
  border-color: #d97706;
  color: #d97706;
  background: #fef3c722;
}

/* ── Picker Overlay ────────────────────────────────────────── */
.fc-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fc-picker-card {
  background: var(--color-card);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 360px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
  text-align: center;
  animation: fcPickerIn .32s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes fcPickerIn {
  from { opacity: 0; transform: scale(.82) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.fc-picker-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 10px;
}
.fc-picker-chname {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--color-heading);
  margin-bottom: 4px;
  line-height: 1.3;
}
.fc-picker-subtitle {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--color-muted-fg);
  margin-bottom: 18px;
  font-weight: 600;
}
.fc-picker-counts {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.fc-count-btn {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.fc-count-btn:hover {
  border-color: var(--ch-color, #2563EB);
  color: var(--ch-color, #2563EB);
}
.fc-count-btn.active {
  border-color: var(--ch-color, #2563EB);
  color: var(--ch-color, #2563EB);
  background: rgba(37,99,235,.07);
}
.fc-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  border: none;
  background: var(--ch-color, #2563EB);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .18s, transform .18s;
  margin-bottom: 10px;
}
.fc-start-btn:hover   { opacity: .9; transform: translateY(-1px); }
.fc-start-btn:active  { transform: translateY(0); }
.fc-resume-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-fg);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color .18s, background .18s;
}
.fc-resume-btn:hover { border-color: var(--ch-color, #2563EB); background: rgba(37,99,235,.04); }
.fc-cancel-btn {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s;
}
.fc-cancel-btn:hover { color: var(--color-fg); }

/* ── Flashcard View Layout ──────────────────────────────────── */
#view-flashcard {
  min-height: 100vh;
  flex-direction: column;
}
.fc-layout {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0 var(--sp-4) 0;
  transition: gap .3s;
  min-height: 0;
  overflow: hidden;
}
.fc-layout.notes-open {
  gap: 20px;
}

/* ── FC Main (card area) ───────────────────────────────────── */
.fc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-4);
}

/* ── Counter & Dots ────────────────────────────────────────── */
.fc-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  margin-top: 0;
  margin-bottom: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.fc-counter #fc-cur {
  color: var(--ch-color, var(--color-primary));
  font-size: 1.05rem;
}
.fc-counter-sep {
  color: var(--color-muted-fg);
}
.fc-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
}
.fc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-border);
  transition: width .25s, background .25s, border-radius .25s, border-color .25s;
  flex-shrink: 0;
}
.fc-dot--current {
  width: 20px;
  border-radius: 4px;
  background: var(--ch-color, var(--color-primary));
}
.fc-dot--correct { background: #16a34a; }
.fc-dot--wrong   { background: #dc2626; }
.fc-dot--skip    { background: var(--color-muted-fg); opacity: .5; }

/* ── 3D Scene & Card ───────────────────────────────────────── */
.fc-scene {
  perspective: 1200px;
  width: 100%;
  max-width: 960px;
}
.fc-card {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.25,.1,.25,1.08);
  width: 100%;
  cursor: default;
}
.fc-card.is-flipped {
  transform: rotateY(180deg);
}
.fc-face {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--ch-color, var(--color-primary));
  background: var(--color-card);
  box-shadow: 0 6px 28px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.09);
  overflow: hidden;
}
.fc-back {
  transform: rotateY(180deg);
  background: #f7f9ff;  /* subtle blue-white tint to visually distinguish back face */
  display: flex;
  flex-direction: column;
}

/* ── Study Notes Button (on card face) ─────────────────────── */
/* Study Notes pulse — draws attention on first card */
@keyframes fcNotesPulse {
  0%,100% { background: transparent; border-color: rgba(0,0,0,0.18); box-shadow: 0 2px 8px rgba(0,0,0,.10); color: inherit; }
  50%      { background: #D97706; border-color: #B45309; box-shadow: 0 0 0 4px rgba(217,119,6,.25), 0 2px 8px rgba(0,0,0,.10); color: #fff; }
}
.fc-notes-btn.fc-notes-pulse {
  animation: fcNotesPulse 1.2s ease-in-out 5;
}

/* Flashcard Mode toast */
.fc-mode-toast {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #D97706;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 99px;
  box-shadow: 0 4px 16px rgba(217,119,6,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 999;
}
.fc-mode-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Action button sub-label */
.action-btn-label { display: block; font-size: 1rem; }
.action-btn-sub   { display: block; font-size: 0.7rem; opacity: 0.75; margin-top: 3px; font-weight: 500; }

.fc-notes-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 9px;
  border-radius: 20px;
  border: 1.5px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.9);
  color: #374151;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.fc-notes-btn svg { flex-shrink: 0; stroke: currentColor; }
.fc-notes-btn:hover {
  border-color: #D97706;
  color: #D97706;
}
.fc-notes-btn.is-on {
  border-color: #D97706;
  color: #D97706;
  background: #FEF3C7;
}

/* ── Golden chapter borders in flashcard mode ───────────────── */
body.flashcard-mode .chapter-card {
  border-color: #D97706;
  border-left: 3px solid #D97706;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  box-shadow: 0 2px 12px rgba(217,119,6,0.15);
}

/* ── Flashcard page-header: no bottom margin (fc-layout follows immediately) */
#view-flashcard .page-header {
  margin-bottom: 0;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
#view-flashcard.view-active {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#view-flashcard.view-active .view-inner {
  padding-top: 46px;
  padding-bottom: 0;
  max-width: 90vw;
  flex-shrink: 0;
}

/* ── Flashcard View Header ─────────────────────────────────── */
.fc-flash-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card);
  flex-shrink: 0;
}
.fc-flash-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-flash-header__logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fc-flash-header__wordmark {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.fc-flash-header__wordmark strong {
  color: var(--color-heading);
}
.fc-flash-header__divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  flex-shrink: 0;
}
.fc-flash-header__chapter {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-heading);
}

/* ── Results Popup (blur overlay) ───────────────────────────── */
#view-flashcard { position: relative; }
.fc-results {
  position: absolute;
  inset: 0;
  background: rgba(240,244,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  overflow: hidden;
}
.fc-results-celebrate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
.fc-confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation: fcConfettiFall var(--fc-dur, 1.8s) var(--fc-delay, 0s) ease-in forwards;
}
@keyframes fcConfettiFall {
  0%   { transform: translateY(0) rotate(0deg) scaleX(1);   opacity: 1; }
  25%  { transform: translateY(25vh) rotate(120deg) scaleX(-1); opacity: 1; }
  60%  { transform: translateY(55vh) rotate(240deg) scaleX(1);  opacity: 1; }
  100% { transform: translateY(100vh) rotate(400deg) scaleX(-1); opacity: 0; }
}
.fc-results-card {
  text-align: center;
  padding: 36px 32px 28px;
  max-width: 360px;
  width: 90%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
  position: relative;
  z-index: 1;
}
.fc-results-score {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-heading);
  margin-bottom: 4px;
}
.fc-results-sep {
  font-size: 2.2rem;
  opacity: .3;
  margin: 0 4px;
}
.fc-results-label {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.fc-results-xp {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: #D97706;
  margin-bottom: 24px;
}
.fc-results-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-results-btn {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity .15s;
  width: 100%;
}
.fc-results-btn:hover { opacity: .85; }
.fc-results-btn--secondary {
  background: var(--color-card);
  color: var(--color-heading);
  border: 1.5px solid var(--color-border);
}
.fc-results-btn--secondary:hover { background: var(--color-muted); opacity: 1; }

/* ── Front Face Tags ────────────────────────────────────────── */
.fc-q-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
  min-height: 0;
}
.fc-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.fc-tag--easy       { background: #dcfce7; color: #166534; }
.fc-tag--medium     { background: #fef9c3; color: #854d0e; }
.fc-tag--hard       { background: #fee2e2; color: #991b1b; }
.fc-tag--bloom      { background: #ede9fe; color: #5b21b6; }
.fc-tag--relevance  { background: #e0f2fe; color: #0c4a6e; }

/* ── Cloze Question Image (front face) ──────────────────────── */
.fc-cloze-img-wrap {
  width: 100%;
  margin: 12px 0 8px;
}
.fc-has-image .fc-cloze-img-wrap {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}
.fc-cloze-img {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 90px;
  object-fit: contain;
}

/* ── Cloze Answer Image (back face) ─────────────────────────── */
.fc-ans-img-wrap {
  width: 100%;
  margin: 12px 18px 0;
  width: calc(100% - 36px);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #f8fafc;
}
.fc-ans-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

/* ── Skip Button ─────────────────────────────────────────────── */
.fc-flip-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  background: var(--color-bg);
  color: var(--color-muted-fg);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fc-flip-back-btn:hover { background: var(--color-card); color: var(--color-heading); }

.fc-skip-btn {
  display: none;
  align-self: center;
  margin-top: auto;
  padding: 4px 12px;
  border: none;
  border-radius: 99px;
  background: none;
  color: #d1d5db;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s;
}
.fc-skip-btn:hover {
  color: #6b7280;
}
.fc-front-inner.fc-has-image .fc-skip-btn {
  margin-top: 0;
  margin-bottom: 3px;
}

/* ── Rating Button Subtitles ────────────────────────────────── */
.fc-btn-wrong,
.fc-btn-correct {
  flex-direction: column;
  gap: 1px;
}
.fc-btn-label { font-weight: 700; font-size: 0.88rem; }
.fc-btn-sub   { font-size: 0.65rem; opacity: .72; font-weight: 500; }

/* ── Scroll Fade (back face) — removed, caused visual artifact ── */

/* ── Front Face ─────────────────────────────────────────────── */
.fc-front-inner {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 22px;
  min-height: 360px;
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  box-sizing: border-box;
}
/* ── Question area wrapper ──────────────────────────────────── */
.fc-q-area {
  display: flex;
  flex-direction: column;
}
.fc-has-image .fc-q-area {
  flex: 0 0 auto;
}
/* ── Marks + image inline row (MCQ with image only) ────────── */
.fc-marks-img-row {
  display: flex;
  flex-direction: column;
}
.fc-has-image .fc-marks-img-row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.fc-has-image .fc-marks-img-row .question-marks-row {
  margin: 0;
  flex-shrink: 0;
}
.fc-cloze-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ch-color, var(--color-primary));
  margin-bottom: 10px;
}
.fc-q-text {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.55;
  margin: 0 0 10px;
}
.fc-blank {
  display: inline-block;
  min-width: 60px;
  border-bottom: 2.5px solid var(--ch-color, var(--color-primary));
  color: transparent;
  margin: 0 2px;
  vertical-align: middle;
}
.fc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.fc-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: var(--color-fg);
  font-weight: 600;
  transition: border-color .15s, background .15s;
  width: 100%;
}
.fc-opt:hover:not(:disabled) {
  border-color: var(--ch-color, var(--color-primary));
  background: rgba(37,99,235,.04);
}
.fc-opt:disabled { cursor: default; }
/* Compact padding for image MCQ cards */
.fc-front-inner.fc-has-image .fc-opt {
  padding: 7px 12px;
}
/* Image card spacing overrides */
.fc-front-inner.fc-has-image {
  padding-bottom: 0;
}
.fc-has-image .fc-options {
  margin-top: 5px;
  margin-bottom: 5px;
}
.fc-opt-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--color-muted);
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.fc-opt-text {
  flex: 1;
  line-height: 1.4;
}
/* Correct option */
.fc-opt.is-correct {
  border-color: #16a34a;
  background: #dcfce755;
}
.fc-opt.is-correct .fc-opt-key {
  background: #16a34a;
  color: #fff;
}
/* Wrong option */
.fc-opt.is-wrong {
  border-color: #dc2626;
  background: #fee2e255;
}
.fc-opt.is-wrong .fc-opt-key {
  background: #dc2626;
  color: #fff;
}
/* Show Answer button */
.fc-show-answer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px dashed var(--ch-color, var(--color-primary));
  background: transparent;
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
  margin-top: auto;
}
.fc-show-answer-btn:hover {
  color: var(--ch-color, var(--color-primary));
  background: rgba(37,99,235,.04);
}

/* ── Back Face ──────────────────────────────────────────────── */
.fc-back-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.fc-answer-banner {
  padding: 24px 28px 18px;
  flex-shrink: 0;
}
.fc-answer-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ch-color, var(--color-primary));
  margin-bottom: 6px;
}
.fc-answer-text {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.5;
}
.fc-answer-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--ch-color, var(--color-primary));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.fc-filled-blank {
  color: var(--ch-color, var(--color-primary));
  border-bottom: 2px solid var(--ch-color, var(--color-primary));
  font-weight: 700;
  padding: 0 2px;
}
.fc-back-scroll {
  overflow-y: auto;
  padding: 18px 28px 16px;
}
.fc-expl-p { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.55; color: var(--color-fg); }
.fc-expl-list { margin: 4px 0 8px; padding-left: 22px; font-size: 0.9rem; line-height: 1.6; color: var(--color-fg); }
.fc-expl-list li { margin-bottom: 3px; }
/* Compact option text when card has a question image */
.fc-options--compact .fc-opt-text { font-size: 0.7rem; }

.fc-back-actions {
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-top: auto;
  flex-wrap: wrap;
}
.fc-btn-wrong {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1.5px solid #dc2626;
  background: transparent;
  color: #dc2626;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fc-btn-wrong:hover { background: #fee2e2; }
.fc-btn-correct {
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: #16a34a;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.fc-btn-correct:hover { opacity: .9; transform: translateY(-1px); }
.fc-btn-next-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: var(--ch-color, var(--color-primary));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.fc-btn-next-card:hover { opacity: .9; transform: translateY(-1px); }
.fc-difficulty-note {
  margin-right: auto;
  align-self: center;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted-fg);
}

/* ── Notes Panel ────────────────────────────────────────────── */
.fc-notes-panel {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width .3s cubic-bezier(.4,0,.2,1), opacity .3s, padding-left .3s;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-left: 0;
  min-height: 0;
}
.fc-layout.notes-open .fc-notes-panel {
  width: 320px;
  opacity: 1;
  border-left: 1px solid var(--color-border);
  padding-left: 20px;
  overflow-y: auto;
}
.fc-notes-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ch-color, var(--color-primary));
  border-bottom: 1px solid var(--color-border);
  padding-top: 4px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.fc-notes-body {
  flex: 1;
  overflow-y: auto;
}
.fc-notes-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--color-muted-fg);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
}
.fc-notes-ph-icon {
  font-size: 2rem;
  line-height: 1;
}
.fc-subtopic-acc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,0,0,.04);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ch-color, var(--color-primary));
  margin-bottom: 12px;
}

/* ── Study note markdown rendering ─────────────────────────── */
/* Section card — wraps one H2/H3 heading and the blocks below it */
.sn-section-card {
  background: var(--color-bg-alt, #f8fafc);
  border-radius: 10px;
  padding: 10px 14px 12px;
  margin: 12px 0;
  border: 1px solid rgba(0,0,0,.06);
  /* Study notes use a clean system font — not the app's handwriting body font */
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
/* Also cover bare blocks rendered outside a section card (orphan blocks) */
#fc-notes-content, .explain-tab-panel[data-panel="theory"],
#sn-modal-body {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sn-section-card:first-child { margin-top: 0; }
body.theme-dark .sn-section-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.sn-h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ch-color, var(--color-primary));
  margin: 0 0 6px;
  letter-spacing: -.01em;
  line-height: 1.3;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sn-h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 4px;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sn-p {
  font-size: 0.88rem;
  color: var(--color-fg);
  line-height: 1.55;
  margin: 3px 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sn-ul, .sn-ol {
  margin: 4px 0 6px 0;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--color-fg);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sn-ul { list-style: disc; }
.sn-ol { list-style: decimal; }
.sn-ul li::marker { color: var(--ch-color, var(--color-primary)); font-weight: 700; }
.sn-ol li::marker { color: var(--ch-color, var(--color-primary)); font-weight: 700; }

/* Content indentation under section headings — 2-tier system:
   - paragraphs/callouts/images: 16px — first level under heading
   - lists: 28px margin + 20px padding = bullet text at 48px — clearly deeper than paragraphs
   3-class selectors used to win any fullscreen-body 2-class overrides. */
.sn-section-card .sn-p,
.sn-section-card .sn-callout,
.sn-section-card .sn-img,
.sn-section-card .sn-spacer,
.sn-section-card .sn-hr,
.sn-section-card .sn-box,
.sn-section-card .sn-table-wrap { margin-left: 16px; }

.sn-section-card .sn-ul,
.sn-section-card .sn-ol { margin-left: 28px; padding-left: 20px; }

/* Fullscreen modal overrides (3-class specificity) */
.sn-fullscreen-body .sn-section-card .sn-p,
.sn-fullscreen-body .sn-section-card .sn-callout,
.sn-fullscreen-body .sn-section-card .sn-img,
.sn-fullscreen-body .sn-section-card .sn-spacer,
.sn-fullscreen-body .sn-section-card .sn-hr,
.sn-fullscreen-body .sn-section-card .sn-table-wrap { margin-left: 16px; }

.sn-fullscreen-body .sn-section-card .sn-ul,
.sn-fullscreen-body .sn-section-card .sn-ol { margin-left: 28px; padding-left: 20px; }
.sn-callout {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 0.82rem;
  color: #78350f;
  line-height: 1.5;
}
.sn-callout-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #b45309;
  margin-bottom: 3px;
}
.sn-img {
  max-height: 250px;
  width: auto;
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  display: block;
}

.sn-code {
  font-family: var(--font-mono, monospace);
  font-size: 0.8em;
  background: rgba(0,0,0,.06);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ==mark== syntax → <mark class="sn-mark"> (yellow highlight, matches admin hiliteColor yellow) */
.sn-mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
body.theme-dark .sn-mark { background: rgba(254,240,138,.35); color: inherit; }

/* <font size="N"> from admin execCommand fontSize — normalize to relative sizes */
#fc-notes-content font[size="1"], .sn-section-card font[size="1"],
#sn-modal-body font[size="1"]     { font-size: 0.72rem; }
#fc-notes-content font[size="2"], .sn-section-card font[size="2"],
#sn-modal-body font[size="2"]     { font-size: 0.78rem; }
/* size="3" = normal — no override needed, inherits from .sn-p */
#fc-notes-content font[size="4"], .sn-section-card font[size="4"],
#sn-modal-body font[size="4"]     { font-size: 1rem; }
#fc-notes-content font[size="5"], .sn-section-card font[size="5"],
#sn-modal-body font[size="5"]     { font-size: 1.1rem; }
#fc-notes-content font[size="6"], .sn-section-card font[size="6"],
#sn-modal-body font[size="6"]     { font-size: 1.25rem; }
#fc-notes-content font[size="7"], .sn-section-card font[size="7"],
#sn-modal-body font[size="7"]     { font-size: 1.5rem; }
.sn-table-wrap {
  overflow-x: auto;
  margin: 6px 0;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.sn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  min-width: 280px;
}
.sn-th {
  background: var(--ch-color, var(--color-primary));
  color: #fff;
  font-weight: 700;
  padding: 7px 10px;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: .01em;
}
.sn-th:first-child { border-radius: 7px 0 0 0; }
.sn-th:last-child  { border-radius: 0 7px 0 0; }
.sn-td {
  padding: 6px 10px;
  color: var(--color-fg);
  border-top: 1px solid var(--color-border);
  line-height: 1.5;
  vertical-align: top;
}
.sn-table tbody tr:nth-child(even) .sn-td {
  background: rgba(0,0,0,.025);
}
body.theme-dark .sn-table tbody tr:nth-child(even) .sn-td {
  background: rgba(255,255,255,.04);
}
/* Callout type variants */
/* Default (no modifier) = amber/note */
.sn-callout-def {
  background: #eff6ff;
  border-left-color: #3b82f6;
  color: #1e3a5f;
}
.sn-callout-def .sn-callout-lbl { color: #2563eb; }
.sn-callout-tip {
  background: #f0fdf4;
  border-left-color: #22c55e;
  color: #14532d;
}
.sn-callout-tip .sn-callout-lbl { color: #16a34a; }
.sn-callout-warning, .sn-callout-caution {
  background: #fff1f2;
  border-left-color: #ef4444;
  color: #7f1d1d;
}
.sn-callout-warning .sn-callout-lbl,
.sn-callout-caution .sn-callout-lbl { color: #dc2626; }
.sn-callout-important {
  background: #fdf4ff;
  border-left-color: #a855f7;
  color: #4a044e;
}
.sn-callout-important .sn-callout-lbl { color: #9333ea; }

/* Horizontal rule between sections */
.sn-hr {
  border: none;
  border-top: 1px solid var(--color-border, rgba(0,0,0,.1));
  margin: 12px 0;
}
.sn-rule {
  border: none;
  border-top: 1.5px solid #93c5fd;
  margin: 6px 0;
  opacity: 0.75;
}

/* Tags */
.sn-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.sn-tags-wrap.sn-tags-col { flex-direction: column; align-items: flex-start; }
.sn-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; border: 1px solid; white-space: nowrap; line-height: 1.5; }
.sn-tag-icon { flex-shrink: 0; display: block; }

/* Visual spacer (from <!-- --> comments in editor) — matches admin's ~1.4em spacer block */
.sn-spacer { height: 18px; }

/* Dark mode callout variants */
body.theme-dark .sn-callout { background: rgba(245,158,11,.12); color: #fde68a; }
body.theme-dark .sn-callout-lbl { color: #fbbf24; }
body.theme-dark .sn-callout-def { background: rgba(59,130,246,.12); color: #bfdbfe; }
body.theme-dark .sn-callout-def .sn-callout-lbl { color: #60a5fa; }
body.theme-dark .sn-callout-tip { background: rgba(34,197,94,.1); color: #bbf7d0; }
body.theme-dark .sn-callout-tip .sn-callout-lbl { color: #4ade80; }
body.theme-dark .sn-callout-warning { background: rgba(239,68,68,.1); color: #fecaca; }
body.theme-dark .sn-callout-warning .sn-callout-lbl { color: #f87171; }
body.theme-dark .sn-callout-important { background: rgba(168,85,247,.1); color: #e9d5ff; }
body.theme-dark .sn-callout-important .sn-callout-lbl { color: #c084fc; }
body.theme-dark .sn-code { background: rgba(255,255,255,.1); }
body.theme-dark .sn-hr { border-color: rgba(255,255,255,.12); }

/* ── Study Note Boxes (sn-box) ──────────────────────────────── */
/* Colors come from inline styles on the element (generated from preset data).
   Only structural / layout rules live here. */
.sn-box {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  border-radius: 12px;
  margin: 6px 0;
}
.sn-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sn-box-icon { flex-shrink: 0; display: block; }
.sn-box-title { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.sn-box-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.sn-box-body { font-size: 0.84rem; line-height: 1.55; color: #374151; margin-top: 10px; }
.sn-box-items {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sn-box-item {
  display: flex; align-items: flex-start;
  gap: 8px; font-size: 0.84rem; line-height: 1.5; color: #374151;
}
.sn-box-bullet {
  flex-shrink: 0; width: 3px; height: 1.1em;
  border-radius: 2px; margin-top: 0.2em;
}
.sn-box-subbox { border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.sn-box-subbox-title { font-weight: 700; font-size: 0.82rem; margin-bottom: 5px; }
.sn-box-subbox-body { font-size: 0.82rem; line-height: 1.5; color: #374151; }
.sn-box-footer {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid;
}
.sn-box-ficon { flex-shrink: 0; display: block; }
.sn-box-insight-main {
  font-weight: 700; font-size: 0.9rem; line-height: 1.4;
  margin-top: 4px;
}
.sn-box-body mark, .sn-box-item mark, .sn-box-subbox-body mark {
  background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px;
}
/* Fullscreen modal sizing overrides */
.sn-fullscreen-body .sn-box-title { font-size: 1rem; }
.sn-fullscreen-body .sn-box-body  { font-size: 0.92rem; }
.sn-fullscreen-body .sn-box-item  { font-size: 0.92rem; }
.sn-fullscreen-body .sn-box-insight-main { font-size: 1rem; }

/* ── Stats chip in FC toolbar ───────────────────────────────── */
#fc-stats-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  line-height: 1.2;
}
#fc-stats-chip strong { color: var(--color-fg); }

/* ── Mobile Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .fc-front-inner  { padding: 22px 20px 18px; min-height: 320px; }
  .fc-back-inner   { min-height: 420px; }
  .fc-q-text       { font-size: 0.98rem; }
  .fc-answer-text  { font-size: 0.95rem; }
  .fc-layout       { padding: var(--sp-3) var(--sp-3) 0; }
  .fc-scene        { max-width: 100%; }
  .fc-layout.notes-open .fc-notes-panel { display: none; }
  .fc-answer-banner { padding: 22px 22px 16px; }
  .fc-back-scroll  { padding: 16px 22px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   HOME BROWSER — Grade 6-9 Study Mode (jhome-*)
   ══════════════════════════════════════════════════════════════ */

/* jdash-home-header__left — contained in the main header block above */
.jdash-home-header__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Mode Switch */
.jhome-mode-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface, #f1f5f9);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 4px;
  flex-shrink: 0;
}
.jms-btn {
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 5px 11px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--color-muted-fg);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.jms-btn:hover { background: rgba(0,0,0,.06); color: var(--color-fg); }
.jms-btn--mcq.active {
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.jms-btn--written.active {
  background: #78716c;
  color: #fff;
  box-shadow: 0 2px 8px rgba(120,113,108,.25);
}
.jms-btn--flash {
  font-size: 0.75rem;
  padding: 5px 13px;
}
.jms-btn--flash.active {
  background: #D97706;
  color: #fff;
  box-shadow: 0 2px 10px rgba(217,119,6,.35);
  transform: scale(1.05);
}

/* Browser Container */
.jhome-browser {
  margin-top: var(--sp-2);
  border-radius: 16px;
  padding: 16px;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--color-border);
  min-height: 160px;
}
.jbrowser--mcq  { background: rgba(255,255,255,0.55); border-color: #e2e8f0; }
.jbrowser--written {
  background: linear-gradient(135deg, rgba(254,252,232,0.8), rgba(255,251,235,0.6));
  border-color: #d6c9a0;
}
.jbrowser--flash {
  background: linear-gradient(135deg, rgba(255,251,235,0.9), rgba(254,243,199,0.6));
  border-color: #D97706;
  box-shadow: 0 0 0 1px rgba(217,119,6,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Subject Grid */
.jhome-subj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.jhome-subj-card {
  position: relative;
  border: none;
  border-radius: 16px;
  background: var(--subj-bg, #2563EB);
  padding: 18px 14px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
  min-height: 140px;
  overflow: hidden;
}
.jhome-subj-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 0.15s;
}
.jhome-subj-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.jhome-subj-card:hover::before { opacity: 1; }
.jhome-subj-card:active { transform: scale(0.97); }

.jhsc-icon { width: 38px; height: 38px; opacity: 0.9; filter: brightness(0) invert(1); }
.jhsc-icon svg { width: 38px; height: 38px; }
.jhsc-resume-btn {
  position: absolute;
  top: 9px; right: 9px;
  background: rgba(255,255,255,0.92);
  color: #1e40af;
  font-size: 0.6rem;
  font-weight: 800;
  font-family: var(--font-heading);
  padding: 3px 8px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
  z-index: 2;
}
.jhsc-resume-btn:hover { background: #fff; transform: scale(1.06); }
.jhsc-resume-btn:active { transform: scale(0.97); }
.jhsc-due {
  position: absolute;
  top: 32px; right: 9px;
  background: rgba(220,38,38,.85);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  font-family: var(--font-heading);
  backdrop-filter: blur(4px);
}
/* If no resume btn, due badge goes at top */
.jhome-subj-card:not(:has(.jhsc-resume-btn)) .jhsc-due {
  top: 9px;
}
.jhsc-bottom { margin-top: auto; }
.jhsc-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.jhsc-stats {
  display: block;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  font-family: var(--font-heading);
}

.jbrowser--flash .jhome-subj-card {
  border: 2px solid rgba(217,119,6,.4);
  box-shadow: 0 2px 10px rgba(217,119,6,.15);
}

/* Breadcrumb */
.jhome-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.jhome-bc-back {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: rgba(0,0,0,.05);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-fg);
  cursor: pointer;
  transition: background 0.15s;
}
.jhome-bc-back:hover { background: rgba(0,0,0,.1); }
.jhome-bc-sess-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.jhome-bc-sess {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted-fg);
  font-family: var(--font-heading);
}
.jhome-bc-change {
  border: none;
  background: none;
  font-size: 0.7rem;
  color: #D97706;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* Chapter Grid */
.jhome-ch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.jhome-ch-card {
  position: relative;
  border: none;
  border-radius: 16px;
  background: #fff;
  padding: 16px 14px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-align: left;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 3px 12px rgba(0,0,0,.13);
  border: 1.5px solid rgba(0,0,0,.1);
  min-height: 155px;
  overflow: hidden;
}
/* MCQ mode: stronger border using chapter color for clear contrast */
.jbrowser--mcq .jhome-ch-card {
  border-top: 3px solid var(--ch-color, #2563EB);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.jhome-ch-card:hover { transform: translateY(-3px); box-shadow: 0 5px 16px rgba(0,0,0,.13); }
.jhome-ch-card:active { transform: scale(0.97); }

.jhcc-badges {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
/* Due pill — color-coded by severity */
.jhcc-due {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  font-family: var(--font-heading);
}
.jhcc-due--green { background: rgba(22,163,74,.13);  color: #15803d; }
.jhcc-due--amber { background: rgba(217,119,6,.13);  color: #b45309; }
.jhcc-due--red   { background: rgba(220,38,38,.13);  color: #dc2626; }
.jhcc-flag {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(234,179,8,.15);
  color: #92400e;
  font-family: var(--font-heading);
  transition: background 0.15s, transform 0.1s;
}
.jhcc-flag:hover {
  background: rgba(234,179,8,.35);
  transform: scale(1.1);
}
.jhcc-flag:active { transform: scale(0.95); }
.jhcc-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.jhcc-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-fg);
  font-family: var(--font-heading);
  line-height: 1.25;
  padding-right: 48px; /* clear due badge */
}
.jhcc-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
}
.jhcc-subtitle {
  font-size: 0.68rem;
  color: var(--color-muted-fg);
  font-family: var(--font-body);
  font-weight: 600;
}
.jhcc-track {
  width: 100%;
  height: 8px;
  background: rgba(0,0,0,.08);
  border-radius: 99px;
  overflow: hidden;
}
.jhcc-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* Written mode: subtle cream tint on chapter cards */
.jbrowser--written .jhome-ch-card {
  background: linear-gradient(180deg, #fffbeb 0%, #fff 60%);
  border-color: #d6c9a0;
}

/* Flash mode: gold left border + shimmer */
.jbrowser--flash .jhome-ch-card {
  border-left: 3px solid var(--ch-color, #D97706);
}
@keyframes jhomeShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.jbrowser--flash .jhome-ch-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(217,119,6,.08) 50%,
    transparent 60%
  );
  background-size: 200% auto;
  animation: jhomeShimmer 3s linear infinite;
  pointer-events: none;
}

/* Session Size Modal */
.sess-size-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.sess-size-modal {
  background: #fff;
  border-radius: 18px;
  padding: 24px 20px 20px;
  width: min(280px, 90vw);
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
.sess-size-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-fg);
  margin-bottom: 16px;
}
.sess-size-opts {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.sess-size-btn {
  border: 1.5px solid var(--color-border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  color: var(--color-fg);
}
.sess-size-btn.active,
.sess-size-btn:hover { background: #D97706; border-color: #D97706; color: #fff; }
.sess-size-close {
  border: none; background: none;
  font-size: 0.82rem;
  color: var(--color-muted-fg);
  cursor: pointer;
  font-family: var(--font-heading);
  padding: 4px 8px;
}

/* Term/semester heading inside home browser chapter grid */
.jhome-term-heading {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 10px 4px 4px;
  border-bottom: 1.5px solid #e5e7eb;
  margin-bottom: 2px;
}
.jhome-term-heading:first-child { padding-top: 2px; }

/* Empty state */
.jhome-empty {
  text-align: center;
  color: var(--color-muted-fg);
  font-size: 0.82rem;
  padding: 20px 0;
  font-style: italic;
}

/* Responsive grid breakpoints */
@media (max-width: 700px) {
  .jhome-subj-grid, .jhome-ch-grid { grid-template-columns: repeat(2, 1fr); }
  .jhome-subj-card, .jhome-ch-card { min-height: 120px; }
}

/* ── KPI Strip (Grade 6-9 home panel) ─────────────────────────── */
.jdash-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.jdash-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px 14px;
  text-align: center;
  gap: 2px;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-clay-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.jdash-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-clay-md);
}

/* Subtle top-border accent per card */
.jdash-kpi-card--readiness::before { background: var(--kpi-accent, #dc2626); }
.jdash-kpi-card:nth-child(2)::before { background: #3b82f6; }
.jdash-kpi-card--score::before        { background: var(--kpi-accent, #16a34a); }
.jdash-kpi-card--centile::before      { background: #f59e0b; }
.jdash-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
}

/* Exam Readiness card — SVG ring layout */
.jdash-kpi-card--readiness {
  padding-top: 12px;
  padding-bottom: 12px;
}
.jdash-kpi-ring {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.10));
}
.jdash-kpi-readiness-label {
  font-size: 0.62rem !important;
  letter-spacing: 0.03em;
}

.jdash-kpi-icon {
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 2px;
}
.jdash-kpi-val {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--color-fg);
  line-height: 1;
  letter-spacing: -0.02em;
}
.jdash-kpi-lbl {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg);
  opacity: 0.55;
  margin-top: 3px;
}
.jdash-kpi-sub {
  font-family: var(--font-body);
  font-size: 0.58rem;
  color: var(--color-muted-fg);
  line-height: 1.25;
  margin-top: 2px;
}

/* Centile card — gold accent */
.jdash-kpi-card--centile {
  background: linear-gradient(145deg, #fffbeb, #fef3c7 80%);
  border: 1.5px solid #fcd34d;
}
.jdash-kpi-card--centile .jdash-kpi-val { color: #92400e; }
.jdash-kpi-card--centile .jdash-kpi-lbl { color: #92400e; opacity: 0.7; }

/* Responsive */
@media (max-width: 600px) {
  .jdash-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .jdash-kpi-val { font-size: 1.3rem; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .jhome-browser { background: rgba(30,30,40,.5); border-color: rgba(255,255,255,.1); }
  .jbrowser--mcq { background: rgba(30,30,40,.55); }
  .jbrowser--written { background: linear-gradient(135deg, rgba(60,50,20,.5), rgba(50,42,18,.4)); border-color: rgba(180,150,80,.3); }
  .jbrowser--flash { background: linear-gradient(135deg, rgba(60,45,10,.6), rgba(50,38,8,.4)); border-color: rgba(217,119,6,.4); }
  .jhome-ch-card { background: rgba(30,30,40,.8); border-color: rgba(255,255,255,.08); }
  .jhome-mode-switch { background: rgba(255,255,255,.07); }
  .jhome-bc-back { background: rgba(255,255,255,.08); }
  .sess-size-modal { background: #1e1e2e; }
  .sess-size-btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); color: #e2e8f0; }
  .jdash-kpi-card { background: rgba(30,30,40,.8); }
  .jdash-kpi-card--centile { background: rgba(60,45,10,.6); border-color: rgba(217,119,6,.4); }
  .jdash-kpi-card--centile .jdash-kpi-val,
  .jdash-kpi-card--centile .jdash-kpi-lbl { color: #fcd34d; }
}

/* ══════════════════════════════════════════════════════════════
   ACCURACY RING CARD
   ══════════════════════════════════════════════════════════════ */
.acc-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
}
.acc-ring-side { flex-shrink: 0; }
.acc-ring-svg  { width: 110px; height: 110px; display: block; }
.acc-stats-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acc-stats-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}
.acc-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.acc-stat-lbl {
  font-size: 0.76rem;
  color: #6b7280;
}
.acc-stat-pill {
  font-size: 0.75rem;
  font-weight: 800;
  font-family: var(--font-heading);
  background: #f3f4f6;
  color: #374151;
  padding: 2px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Percentile Bell Curve Card ── */
.perf-bell-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.perf-bell-svg-wrap {
  width: 100%;
  overflow: hidden;
}
.perf-bell-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.perf-bell-info { display: flex; flex-direction: column; gap: 6px; }
.perf-bell-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  border-bottom: 1.5px solid #e5e7eb;
  padding-bottom: 6px;
}
.perf-bell-legend { display: flex; flex-direction: column; gap: 6px; }
.perf-bell-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.perf-bell-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.perf-bell-lbl {
  flex: 1;
  font-size: 0.73rem;
  color: #374151;
}
.perf-bell-pill {
  font-size: 0.73rem;
  font-weight: 800;
  font-family: var(--font-heading);
  background: #f3f4f6;
  color: #374151;
  padding: 2px 10px;
  border-radius: 20px;
}

/* ── Weekly Goal 7-dot strip ── */
.perf-week-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perf-week-dots-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.perf-week-dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 4px 6px;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.perf-week-dot--done {
  background: rgba(37,99,235,.08);
  border-color: #2563EB;
}
.perf-week-dot--today {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,.18);
}
.perf-week-dot--done.perf-week-dot--today {
  background: rgba(37,99,235,.13);
}
.perf-week-dot-num {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 900;
  color: #2563EB;
  line-height: 1;
  min-height: 14px;
}
.perf-week-dot-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.04em;
}
.perf-week-dot--done .perf-week-dot-lbl { color: #2563EB; }

.perf-week-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}
.perf-week-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.perf-week-status {
  font-size: 0.73rem;
  font-weight: 700;
  text-align: center;
}

/* ── Chapter Performance Accordion ── */
.perf-acc-accordion {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.perf-subj-group {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.perf-subj-group[open] { border-color: #2563EB33; }
.perf-subj-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
  background: #fff;
  user-select: none;
  transition: background 0.12s;
}
.perf-subj-summary::-webkit-details-marker { display: none; }
.perf-subj-summary:hover { background: #f8fafc; }
.perf-subj-group[open] .perf-subj-summary { background: rgba(37,99,235,.04); }

.perf-subj-name {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-subj-ch-count {
  font-size: 0.66rem;
  color: #9ca3af;
}
.perf-subj-avg {
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-heading);
  padding: 2px 9px;
  border-radius: 20px;
}
.perf-subj-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
  color: #9ca3af;
}
.perf-subj-group[open] .perf-subj-chevron { transform: rotate(90deg); }

.perf-subj-chapters {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #fafafa;
  border-top: 1px solid #e5e7eb;
}

.perf-ch-acc-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
}
.perf-ch-acc-name {
  font-size: 0.74rem;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perf-ch-acc-bar-wrap {
  width: 70px;
  height: 5px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}
.perf-ch-acc-bar-fill {
  height: 100%;
  border-radius: 99px;
}
.perf-ch-acc-tier {
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.perf-ch-acc-pct {
  font-size: 0.74rem;
  font-weight: 800;
  font-family: var(--font-heading);
  text-align: right;
  min-width: 34px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .acc-stats-title { color: #f9fafb; }
  .acc-stat-lbl    { color: #9ca3af; }
  .acc-stat-pill   { background: rgba(255,255,255,.08); color: #e5e7eb; }
  .perf-bell-lbl   { color: #9ca3af; }
  .perf-bell-pill  { background: rgba(255,255,255,.08); color: #e5e7eb; }
  .perf-bell-title { color: #9ca3af; border-color: rgba(255,255,255,.1); }
  .perf-week-dot          { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
  .perf-week-dot--done    { background: rgba(37,99,235,.18); border-color: #3b82f6; }
  .perf-week-dot-lbl      { color: #9ca3af; }
  .perf-week-progress-bar { background: rgba(255,255,255,.1); }
  .perf-subj-group        { border-color: rgba(255,255,255,.1); }
  .perf-subj-summary      { background: rgba(30,30,40,.8); }
  .perf-subj-summary:hover { background: rgba(40,40,55,.9); }
  .perf-subj-name         { color: #f3f4f6; }
  .perf-subj-chapters     { background: rgba(20,20,30,.6); border-color: rgba(255,255,255,.08); }
  .perf-ch-acc-name       { color: #d1d5db; }
  .perf-ch-acc-bar-wrap   { background: rgba(255,255,255,.1); }
}

/* ══════════════════════════════════════════════════════════════
   GRADE 6-7 CARD FLOAT ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes jhCardFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
@keyframes jhChCardFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* Subject cards — gentle drift, staggered per nth-child */
body.grade-6 .jhome-subj-card,
body.grade-7 .jhome-subj-card {
  animation: jhCardFloat 3.2s ease-in-out infinite;
}
body.grade-6 .jhome-subj-card:nth-child(2), body.grade-7 .jhome-subj-card:nth-child(2) { animation-delay: 0.45s; }
body.grade-6 .jhome-subj-card:nth-child(3), body.grade-7 .jhome-subj-card:nth-child(3) { animation-delay: 0.9s;  }
body.grade-6 .jhome-subj-card:nth-child(4), body.grade-7 .jhome-subj-card:nth-child(4) { animation-delay: 1.35s; }
body.grade-6 .jhome-subj-card:nth-child(5), body.grade-7 .jhome-subj-card:nth-child(5) { animation-delay: 1.8s;  }
body.grade-6 .jhome-subj-card:nth-child(6), body.grade-7 .jhome-subj-card:nth-child(6) { animation-delay: 2.25s; }
body.grade-6 .jhome-subj-card:nth-child(7), body.grade-7 .jhome-subj-card:nth-child(7) { animation-delay: 2.7s;  }

/* Hover: freeze float, lift to peak, enhance shadow */
body.grade-6 .jhome-subj-card:hover,
body.grade-7 .jhome-subj-card:hover {
  animation-play-state: paused;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

/* Chapter cards */
body.grade-6 .jhome-ch-card,
body.grade-7 .jhome-ch-card {
  animation: jhChCardFloat 3.8s ease-in-out infinite;
}
body.grade-6 .jhome-ch-card:nth-child(2), body.grade-7 .jhome-ch-card:nth-child(2) { animation-delay: 0.55s; }
body.grade-6 .jhome-ch-card:nth-child(3), body.grade-7 .jhome-ch-card:nth-child(3) { animation-delay: 1.1s;  }
body.grade-6 .jhome-ch-card:nth-child(4), body.grade-7 .jhome-ch-card:nth-child(4) { animation-delay: 1.65s; }
body.grade-6 .jhome-ch-card:nth-child(5), body.grade-7 .jhome-ch-card:nth-child(5) { animation-delay: 2.2s;  }
body.grade-6 .jhome-ch-card:nth-child(6), body.grade-7 .jhome-ch-card:nth-child(6) { animation-delay: 2.75s; }
body.grade-6 .jhome-ch-card:nth-child(7), body.grade-7 .jhome-ch-card:nth-child(7) { animation-delay: 3.3s;  }

body.grade-6 .jhome-ch-card:hover,
body.grade-7 .jhome-ch-card:hover {
  animation-play-state: paused;
  transform: translateY(-4px);
  box-shadow: 0 7px 20px rgba(0,0,0,.17);
}

@media (prefers-reduced-motion: reduce) {
  body.grade-6 .jhome-subj-card, body.grade-7 .jhome-subj-card,
  body.grade-6 .jhome-ch-card,   body.grade-7 .jhome-ch-card {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE PAGE LAYOUT
   ══════════════════════════════════════════════════════════════ */
.perf-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

/* ── Summary strip: 4 metric chips ── */
.perf-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 0;
}

.perf-chip {
  background: #fff;
  border-radius: 14px;
  padding: 14px 10px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1.5px solid rgba(0,0,0,.07);
  position: relative;
  overflow: hidden;
}
.perf-chip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--chip-accent, #2563EB);
  border-radius: 3px 3px 0 0;
}
.perf-chip--green  { --chip-accent: #16a34a; }
.perf-chip--streak { --chip-accent: #f97316; }

/* Score ring chip — contains mini SVG ring */
.perf-chip--score { padding-top: 10px; padding-bottom: 8px; }
.perf-chip-ring { width: 56px; height: 56px; display: block; }

.perf-chip-val {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}
.perf-chip-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-muted-fg, #6b7280);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Two-column rows ── */
.perf-row { display: grid; gap: 12px; }
.perf-row--equal { grid-template-columns: 1fr 1fr; }

.perf-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.perf-card-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  border-bottom: 1.5px solid #e5e7eb;
  padding-bottom: 6px;
}

/* ── Mastery donut ── */
.perf-donut-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.perf-donut-svg { width: 110px; height: 110px; flex-shrink: 0; }
.perf-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-width: 80px;
}
.perf-legend-row { display: flex; align-items: center; gap: 7px; }
.perf-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.perf-legend-lbl { font-size: 0.71rem; color: #374151; flex: 1; }
.perf-legend-val { font-size: 0.75rem; font-weight: 800; font-family: var(--font-heading); color: #111827; }

/* ── Weekly goal ── */
.perf-goal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.perf-goal-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  color: #111827;
  text-align: center;
}
.perf-goal-sub { font-size: 0.68rem; color: var(--color-muted-fg); }

/* ── Chapter list ── */
.perf-ch-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 250px;
  overflow-y: auto;
}

.perf-no-data {
  font-size: 0.79rem;
  color: var(--color-muted-fg);
  font-style: italic;
  text-align: center;
  padding: 20px;
  margin: 0;
}

/* Responsive */
@media (max-width: 560px) {
  .perf-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .perf-row--equal    { grid-template-columns: 1fr; }
}

/* Dark mode — performance */
@media (prefers-color-scheme: dark) {
  .perf-chip       { background: rgba(30,30,40,.8); border-color: rgba(255,255,255,.08); }
  .perf-chip-val   { color: #f9fafb; }
  .perf-legend-lbl { color: #9ca3af; }
  .perf-legend-val { color: #f9fafb; }
  .perf-goal-label { color: #f9fafb; }
  .perf-card-title { color: #9ca3af; border-color: rgba(255,255,255,.1); }
}

/* ── Written Mode ─────────────────────────────────────────────────────────── */

.written-inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.written-part {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.written-part-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.4;
  white-space: pre-wrap;
}

.written-part-sublabel {
  font-size: .82rem;
  color: var(--text-muted);
  padding-left: 16px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.written-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 72px;
}

.written-textarea.written-locked {
  background: #f9fafb;
  color: var(--text-muted);
  cursor: not-allowed;
}

.written-submit-btn {
  margin-top: 14px;
  width: 100%;
}
/* Per-sub-question submit button */
.written-sub-submit-btn {
  margin-top: 8px;
  width: 100%;
  font-size: .82rem;
  padding: 7px 14px;
}
/* "Your Answer" block shown in right panel after submit */
.written-my-answer {
  background: #f0f9ff;
  border-left: 3px solid #38bdf8;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.written-my-label {
  color: #0369a1 !important;
}
.written-my-text {
  color: #0c4a6e;
  font-style: italic;
}

/* Study note icon in written mode */
.written-sn-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s;
}
.written-sn-btn:hover { background: #fef3c7; border-color: #d97706; color: #b45309; }
.written-sn-btn.sn-pulse { animation: snPulse 1s ease-in-out 3; }
@keyframes snPulse {
  0%,100% { background: none; border-color: var(--color-border); }
  50%      { background: #fef3c7; border-color: #d97706; }
}

/* Right panel — written mode ratings */
.written-ratings-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

/* ── Right-panel answer card — Claymorphism redesign ──────────── */
.written-rating-block {
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 0 3px rgba(0,0,0,.09), 0 6px 18px rgba(37,99,235,.10);
  overflow: hidden;
  transition: box-shadow .2s ease;
}

/* Sub-question stem — blue tinted header */
.written-rating-stem {
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-primary-dark, #1d4ed8);
  padding: 10px 14px 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 1.5px solid var(--color-border);
  white-space: pre-wrap;
  line-height: 1.45;
}

/* "Your Answer" block — warm amber tint */
.written-my-answer {
  background: #fffbeb;
  border-bottom: 1.5px solid #fde68a;
  padding: 10px 14px;
}
.written-my-label {
  color: #b45309 !important;
}
.written-my-text {
  color: #78350f;
  font-style: italic;
}

/* "Correct Answer" block — fresh green */
.written-model-answer {
  padding: 10px 14px;
  background: #f0fdf4;
  border-bottom: 1.5px solid #bbf7d0;
}
.written-model-answer.written-model-part {
  background: #f8fffe;
  border-bottom-color: #d1fae5;
  padding-left: 24px;
}

/* Section labels */
.written-model-label {
  display: block;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #15803d;
  margin-bottom: 3px;
}

.written-model-text {
  font-size: .83rem;
  color: #166534;
  line-height: 1.5;
}

/* Rating button row */
.written-rate-row {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  margin-top: 30px;
}

/* Rating buttons — compact clay, theme colours */
.written-rate-btn {
  flex: 1;
  height: auto;
  padding: 4px 16px;
  font-size: .78rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
  min-width: 0;
  border-radius: var(--radius-sm);
  border-width: 2px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Resting — ghost/outline: no fill, just border + coloured text.
   !important needed to beat global .btn-partial { background: #fef3c7 !important } */
.written-rate-btn.btn-correct {
  background: transparent !important; color: #1d4ed8 !important; border-color: #93c5fd !important; box-shadow: none !important;
}
.written-rate-btn.btn-partial {
  background: transparent !important; color: #92400e !important; border-color: #fcd34d !important; box-shadow: none !important;
}
.written-rate-btn.btn-wrong {
  background: transparent !important; color: #9d174d !important; border-color: #f9a8d4 !important; box-shadow: none !important;
}
/* Hover — fill appears */
.written-rate-btn.btn-correct:not(:disabled):hover,
.written-rate-btn.btn-correct:not(:disabled):focus-visible { background: #dbeafe !important; outline: 2px solid #3b82f6; outline-offset: 2px; }
.written-rate-btn.btn-partial:not(:disabled):hover,
.written-rate-btn.btn-partial:not(:disabled):focus-visible { background: #fef3c7 !important; outline: 2px solid #f59e0b; outline-offset: 2px; }
.written-rate-btn.btn-wrong:not(:disabled):hover,
.written-rate-btn.btn-wrong:not(:disabled):focus-visible   { background: #fce7f3 !important; outline: 2px solid #ec4899; outline-offset: 2px; }
.written-rate-btn:not(:disabled):active { transform: translateY(1px); }
.written-rate-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Selected — saturated theme colours */
.written-rate-selected.btn-correct {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary-dark, #1d4ed8);
  box-shadow: 0 3px 0 3px rgba(37,99,235,.28);
}
.written-rate-selected.btn-partial {
  background: var(--color-secondary); color: #0F172A; border-color: #d97706;
  box-shadow: 0 3px 0 3px rgba(245,158,11,.28);
}
.written-rate-selected.btn-wrong {
  background: var(--color-accent); color: #fff; border-color: #be185d;
  box-shadow: 0 3px 0 3px rgba(236,72,153,.28);
}

/* ── Card animations & flip ──────────────────────────────────── */
@keyframes writtenCardIn {
  from { opacity: 0; transform: translateX(90px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes writtenCardOut {
  from { opacity: 1; transform: translateX(0)     scale(1); }
  to   { opacity: 0; transform: translateX(-90px) scale(0.97); }
}

/* Scene = perspective wrapper + entry/exit animation */
.written-scene {
  perspective: 1200px;
  position: relative;
  width: 100%;
  animation: writtenCardIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.written-scene.scene-exit {
  animation: writtenCardOut 0.22s ease-in forwards;
}

/* Card — 3D flip container */
.written-seq-card {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1.08);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-radius: var(--radius-md, 16px);
}
.written-seq-card.is-flipped {
  transform: rotateY(180deg);
}

/* Shared face styles — no border (card has shadow instead) */
.written-card-face {
  grid-area: 1 / 1 / 2 / 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-md, 16px);
  border: none;
  background: var(--color-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Back face — plain, no colour */
.written-card-back {
  transform: rotateY(180deg);
}
.written-back-stem {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--color-heading);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  white-space: pre-wrap;
  line-height: 1.5;
}
/* Container for all part boxes + combined answer on the back face */
.written-back-parts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Combined correct answer shown below all part boxes */
.written-back-parts-answer {
  margin-top: 2px;
  border-left: 3px solid var(--color-primary);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card));
}

/* Each part (a/b/c) gets its own card on the back face */
.written-back-part-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-muted, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
}
.written-back-part-stem {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.45;
  white-space: pre-wrap;
}
/* Correct Answer — boxed */
.written-back-section {
  background: var(--color-muted, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
}
/* Your Answer — plain, no box */
.written-back-section--user {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* Correct Answer inside a part box — no extra box, just spacing */
.written-back-section--inline {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 6px;
}

/* ── Sub-question navigation bar (inside question card, bottom) ─ */
.written-nav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.written-marks-tally {
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  white-space: nowrap;
  margin-left: auto;
  opacity: 0;
  transition: opacity .3s;
}
.written-marks-tally--visible { opacity: 1; color: var(--color-primary); }
.written-nav-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: none;
  color: var(--color-heading);
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
  padding: 0;
}
.written-nav-btn:not(:disabled):hover {
  background: var(--color-muted);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.written-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.written-nav-dots {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.written-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 1.5px solid #cbd5e1;
  flex-shrink: 0;
  transition: all .2s;
  cursor: pointer;
  padding: 0;
}
.written-nav-dot--correct   { background: #22c55e; border-color: #16a34a; }
.written-nav-dot--partial   { background: #f59e0b; border-color: #d97706; }
.written-nav-dot--wrong     { background: #ef4444; border-color: #dc2626; }
.written-nav-dot--submitted { background: #94a3b8; border-color: #64748b; }
.written-nav-dot--active    { background: var(--color-primary); border-color: var(--color-primary); }
.written-nav-dot--viewing  {
  box-shadow: 0 0 0 3px rgba(37,99,235,.22);
  transform: scale(1.35);
}
.written-back-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted-fg);
  margin-bottom: 3px;
}
.written-back-text {
  font-size: .97rem;
  color: var(--color-body);
  line-height: 1.55;
}
.written-back-ans-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.written-back-ans-list li { line-height: 1.5; }

/* ── Marks popup ─────────────────────────────────────────────── */
@keyframes marksPopIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  55%  { opacity: 1; transform: translate(-50%, -80%) scale(1.12); }
  80%  { transform: translate(-50%, -75%) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -78%) scale(1); }
}
@keyframes marksFadeUp {
  from { opacity: 1; transform: translate(-50%, -78%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -110%) scale(0.85); }
}

.written-marks-popup {
  position: fixed; /* escape 3D stacking context — left/top set by JS */
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 5px 18px;
  border-radius: 99px;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 99999;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.25);
  animation: marksPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.written-marks-popup.popup-exit { animation: marksFadeUp 0.35s ease-in forwards; }
.written-marks-popup.marks-correct      { color: #15803d; }
.written-marks-popup.marks-partial      { color: #b45309; }
.written-marks-popup.marks-wrong        { color: #64748b; }
.written-marks-popup.marks-misconception{ color: #dc2626; font-size: .9rem; }

.written-expl-btn {
  margin: 10px 14px 6px;
  align-self: flex-start;
  font-size: .73rem;
  padding: 4px 11px;
}

/* Explanation popup */
.written-expl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.written-expl-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 780px;
  width: 92%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}

.written-expl-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
}

.written-expl-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
}

.written-expl-modal-body {
  padding: 20px 24px;
  font-size: .95rem;
  line-height: 1.65;
  overflow-y: auto;
  color: var(--text);
}
.written-expl-bullets {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.written-expl-bullets li { line-height: 1.55; }
.written-expl-bullets .expl-numbered-item {
  margin-left: 18px;
  list-style-type: none;
  position: relative;
}
.written-expl-answer-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

/* ══════════════════════════════════════════════════════════════════
   STUDY NOTES PILL BUTTON (question card top-right)
══════════════════════════════════════════════════════════════════ */
.btn-question-sn.sn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 10px;
  background: #d97706;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(217,119,6,.25);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn-question-sn.sn-pill:hover {
  background: #b45309;
  box-shadow: 0 3px 12px rgba(180,83,9,.35);
}
.btn-question-sn.sn-pill:active { transform: scale(.96); }
.btn-question-sn.sn-pill.sn-pulse { animation: snPillPulse 1s ease-in-out 3; }
@keyframes snPillPulse {
  0%,100% { box-shadow: 0 2px 8px rgba(217,119,6,.25); }
  50%      { box-shadow: 0 0 0 4px rgba(217,119,6,.3), 0 2px 8px rgba(217,119,6,.25); }
}

/* ══════════════════════════════════════════════════════════════════
   SEQUENTIAL WRITTEN MODE
══════════════════════════════════════════════════════════════════ */

/* written-seq-card styles live at the flip-card section above — no override here */

/* "2 / 5" progress indicator */
.written-seq-progress {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: .7;
}

/* Sub-question stem text */
.written-seq-stem {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-fg);
  line-height: 1.55;
  white-space: pre-wrap;
}
.written-seq-marks {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  background: var(--color-muted, #f1f5f9);
  border-radius: 99px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.written-seq-part-marks {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  background: var(--color-muted, #f1f5f9);
  border-radius: 99px;
  padding: 1px 6px;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Sub-part wrapper (a) / (b) inside the card */
.written-seq-part {
  background: #f8faff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* (a) / (b) sub-stem label — same size as main subquestion stem */
.written-seq-part-stem {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* "Your answer" label above textarea */
.written-seq-ans-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

/* Answer input — ruled lines, notebook style (overrides .answer-textarea box look) */
.written-seq-ta {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(1.75em - 1px),
    #dde3ea calc(1.75em - 1px),
    #dde3ea 1.75em
  );
  line-height: 1.75em;
  padding: 0 4px 0 2px;
  font-size: 1rem;
  min-height: 1.75em;     /* 1 row to start */
  max-height: calc(1.75em * 10); /* cap at 10 rows */
  overflow-y: hidden;     /* JS scrolls when capped */
  outline: none;
}
.written-seq-ta:focus,
.answer-textarea.written-seq-ta:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.written-seq-ta::placeholder {
  color: var(--text-muted, #94a3b8);
  font-style: italic;
  font-size: .8rem;
}

/* Submit button for the current card — small, right-aligned */
.written-seq-submit-btn {
  align-self: flex-end;
  height: auto;
  padding: 4px 16px;
  font-size: .78rem;
  min-width: 72px;
  margin-top: 4px;
  line-height: 1.4;
  /* Ghost style — outline only, fill on hover */
  background: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}
.written-seq-submit-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}
.written-seq-submit-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Confidence selector row (optional, above Submit) */
.written-confidence-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.written-confidence-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.written-conf-btn {
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1.6;
}
.written-conf-btn:hover { border-color: #94a3b8; color: var(--color-fg); }
.written-conf-btn.selected.conf-low    { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.written-conf-btn.selected.conf-medium { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.written-conf-btn.selected.conf-high   { border-color: #22c55e; background: #f0fdf4; color: #15803d; }

/* Rating buttons locked for 400ms after card flip */
.written-rate-row--locked {
  pointer-events: none;
  opacity: 0.35;
}

/* "Next Question" state after all sub-questions rated */
.written-next-q-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
}
.written-summary-actions .clay-btn {
  font-size: .86rem !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
}

/* Actions row below summary card — Redo left | Explanation centre | Next right */
.written-summary-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  gap: 8px;
}

/* ── Summary card ────────────────────────────────────────────────── */
.written-summary-card {
  border-radius: 14px;
  border: 1.5px solid #dde3ec;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.written-summary-card--blue {
  background: #f0f5ff;
  border-color: #bfcfef;
}
.written-summary-card--gray {
  background: #f6f7f9;
  border-color: #d1d5db;
}
.written-summary-card--white {
  background: #ffffff;
  border-color: #dde3ec;
}
.written-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--color-border);
}
.written-summary-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted-fg);
}
.written-summary-total {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(37,99,235,.1);
  padding: 2px 10px;
  border-radius: 99px;
  border: none;
}
/* Each subquestion section */
.written-summary-sq {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.written-summary-sq:last-child { border-bottom: none; }
.written-summary-sq-header {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 5px;
}
.written-summary-rating {
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
  width: 18px;
  padding-top: 1px;
}
.written-summary-rating.rating-correct { color: #16a34a; }
.written-summary-rating.rating-partial  { color: #b45309; }
.written-summary-rating.rating-wrong    { color: #dc2626; }
.written-summary-sq-stem {
  flex: 1;
  font-size: .83rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.4;
}
.written-summary-sq-marks {
  font-size: .73rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--color-muted);
  padding: 1px 7px;
  border-radius: 99px;
}
/* Answer rows */
.written-summary-ans-row {
  display: flex;
  gap: 8px;
  font-size: .78rem;
  line-height: 1.45;
  margin-top: 3px;
}
.written-summary-ans-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted-fg);
  white-space: nowrap;
  padding-top: 1px;
  min-width: 70px;
}
.written-summary-ans-label--correct { color: #16a34a; }
.written-summary-ans-text { color: var(--color-fg); }
.written-summary-ans-text--correct { color: #15803d; font-weight: 500; }
.written-summary-ans-text em { color: var(--color-muted-fg); font-style: italic; }
/* Parts block (indented) */
.written-summary-parts {
  margin-top: 7px;
  margin-left: 25px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.written-summary-part {
  background: var(--color-muted, #f8fafc);
  border-radius: 8px;
  padding: 7px 10px;
}
.written-summary-part-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.written-summary-part-stem {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-primary);
  flex: 1;
  line-height: 1.35;
}
.written-summary-part-marks {
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-muted-fg);
  white-space: nowrap;
  background: var(--color-card);
  padding: 1px 6px;
  border-radius: 99px;
}

/* All-done message (kept for fallback) */
.written-seq-done {
  text-align: center;
  font-size: .84rem;
  color: var(--text-muted);
  padding: 16px;
  border: 1.5px dashed var(--color-border);
  border-radius: 12px;
}

/* Part stem in right panel */
.written-rating-part-stem {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 8px 14px 4px;
  opacity: .85;
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════════════════════
   EXIT MODAL REDESIGN
══════════════════════════════════════════════════════════════════ */
.exit-modal-card {
  background: #fff;
  border-radius: 20px;
  width: min(400px, 92vw);
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.07),
    0 20px 60px -10px rgba(0,0,0,.22);
  overflow: hidden;
  animation: exitCardIn .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes exitCardIn {
  from { opacity:0; transform: scale(.92) translateY(12px); }
  to   { opacity:1; transform: scale(1)   translateY(0); }
}

.exit-modal-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 22px 24px 18px;
  text-align: center;
}

.exit-modal-dot-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.exit-modal-dot-row span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.exit-modal-dot-row span:nth-child(2) { background: rgba(255,255,255,.55); }
.exit-modal-dot-row span:nth-child(3) { background: rgba(255,255,255,.25); }

.exit-modal-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.exit-modal-msg {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin: 0;
}

.exit-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Shared exit button base */
.exit-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  transition: background .15s, border-color .15s, transform .1s;
  position: relative;
}
.exit-btn svg { flex-shrink: 0; }
.exit-btn:active { transform: scale(.98); }

/* Sub-label (small secondary text) */
.exit-btn-sub {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  opacity: .65;
  margin-top: 1px;
}

/* Continue — solid primary */
.exit-btn--continue {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.exit-btn--continue:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* Save & Exit — soft teal/green */
.exit-btn--save {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.exit-btn--save:hover { background: #dcfce7; border-color: #86efac; }

/* Exit (no save) — neutral */
.exit-btn--exit {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}
.exit-btn--exit:hover { background: #f1f5f9; border-color: #cbd5e1; }

/* Restart Quiz — warm orange-red warning */
.exit-btn--restart {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}
.exit-btn--restart:hover { background: #ffedd5; border-color: #fdba74; }

/* Dark mode for exit modal */
body.theme-dark .exit-modal-card { background: #1e293b; }
body.theme-dark .exit-modal-header { background: linear-gradient(135deg, #0f172a 0%, #020617 100%); }
body.theme-dark .exit-btn--save   { background: #052e16; color: #86efac; border-color: #166534; }
body.theme-dark .exit-btn--exit   { background: #1e293b; color: #94a3b8; border-color: #334155; }
body.theme-dark .exit-btn--restart{ background: #431407; color: #fdba74; border-color: #9a3412; }


/* ══════════════════════════════════════════════════════════════
   PDF STUDY READER
   ══════════════════════════════════════════════════════════════ */

.pdfr-view {
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
  background: var(--pdfr-bg, #f5f5f0);
  color: var(--pdfr-text, #1a1a2e);
}
/* .view.view-active forces display:block — override for pdf-reader which needs flex column */
.view.view-active.pdfr-view { display: flex; padding-top: 0; overflow: hidden; }

.pdfr-view[data-theme="day"]   { --pdfr-bg:#e8dfd3; --pdfr-text:#2c2416; --pdfr-page-bg:#fdf8f1; --pdfr-topbar-bg:#faf5ec; --pdfr-topbar-border:#d8cfc3; --pdfr-annot-bg:#f2ead8; --pdfr-gutter-bg:#cec4b6; }
.pdfr-view[data-theme="sepia"] { --pdfr-bg:#f4ede0; --pdfr-text:#3b2f1e; --pdfr-page-bg:#fdf6e3; --pdfr-topbar-bg:#f0e6d0; --pdfr-topbar-border:#d4bc96; --pdfr-annot-bg:#f5ead4; --pdfr-gutter-bg:#e8d8b8; }
.pdfr-view[data-theme="night"] { --pdfr-bg:#0f172a; --pdfr-text:#e2e8f0; --pdfr-page-bg:#1e293b; --pdfr-topbar-bg:#1e293b; --pdfr-topbar-border:#334155; --pdfr-annot-bg:#0f172a; --pdfr-gutter-bg:#0a0f1e; }

.pdfr-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; height: 52px; flex-shrink: 0;
  background: var(--pdfr-topbar-bg, #fff);
  border-bottom: 1px solid var(--pdfr-topbar-border, #e2e8f0);
  z-index: 10;
}
.pdfr-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  color: var(--pdfr-text); flex-shrink: 0;
  transition: background .15s;
}
.pdfr-back:hover { background: rgba(0,0,0,.07); }
.pdfr-topbar-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pdfr-title { font-size: .88rem; font-weight: 700; color: var(--pdfr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdfr-page-info { font-size: .72rem; color: var(--pdfr-text); opacity: .55; }
.pdfr-topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pdfr-tool-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  color: var(--pdfr-text); transition: background .15s;
}
.pdfr-tool-btn:hover { background: rgba(0,0,0,.07); }
.pdfr-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 14px; height: 14px; border-radius: 7px;
  background: #3b82f6; color: #fff; font-size: .6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.pdfr-body { flex: 1; display: flex; overflow: hidden; position: relative; }

.pdfr-gutter { width: 8px; flex-shrink: 0; background: var(--pdfr-gutter-bg, #ede8e0); position: relative; overflow: hidden; }
.pdfr-gutter-tick { position: absolute; left: 0; width: 100%; height: 4px; border-radius: 2px; opacity: .7; }

.pdfr-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 0 40px; scroll-behavior: smooth;
}
.pdfr-view[data-theme="day"] .pdfr-scroll,
.pdfr-view[data-theme="sepia"] .pdfr-scroll {
  background-image: radial-gradient(circle, rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 22px 22px;
}
.pdfr-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 12px; }

.pdfr-page-wrap {
  position: relative;
  background: var(--pdfr-page-bg, #fdf8f1);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 4px rgba(0,0,0,.06),
    0 8px 20px rgba(0,0,0,.10),
    0 24px 48px rgba(0,0,0,.07);
  overflow: hidden; user-select: text;
}
.pdfr-page-wrap canvas { display: block; }

.pdfr-text-layer {
  position: absolute; inset: 0;
  overflow: hidden; line-height: 1;
  user-select: text; cursor: text;
}
.pdfr-text-layer span {
  position: absolute; white-space: pre; transform-origin: 0% 0%; cursor: text;
  color: transparent; /* invisible but selectable */
}
.pdfr-text-layer span::selection { background: rgba(59,130,246,.35); color: transparent; }

/* ── Sticky note pin ────────────────────────────── */
.pdfr-note-pin {
  position: absolute; pointer-events: auto; cursor: pointer; z-index: 10;
  width: 22px; height: 22px;
  transform: translate(-4px, -20px);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
  transition: transform .14s, filter .14s;
  user-select: none;
}
.pdfr-note-pin::before { content: '📝'; font-size: 18px; line-height: 22px; }
.pdfr-note-pin:hover { transform: translate(-4px, -24px) scale(1.18); filter: drop-shadow(0 4px 6px rgba(0,0,0,.36)); }

/* ── Sticky note floating card ──────────────────── */
.pdfr-sticky {
  position: absolute; z-index: 40; width: 216px;
  background: linear-gradient(160deg, #fef9c3 70%, #fef08a);
  border-radius: 0 6px 6px 6px;
  box-shadow: 3px 5px 16px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.55);
  padding: 10px 10px 8px;
  pointer-events: auto;
}
.pdfr-sticky::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent #ca8a04 transparent transparent;
}
.pdfr-sticky-header {
  display: flex; align-items: flex-start; gap: 4px; margin-bottom: 6px; padding-left: 10px;
}
.pdfr-sticky-anchor {
  flex: 1; font-size: .68rem; color: #92400e; opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic; line-height: 1.4;
}
.pdfr-sticky-close {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.12); cursor: pointer; color: #78350f;
  font-size: .6rem; display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background .12s;
}
.pdfr-sticky-close:hover { background: rgba(0,0,0,.22); }
.pdfr-sticky-textarea {
  display: block; width: 100%; border: none; background: transparent;
  resize: none; font-size: .82rem; line-height: 1.55; color: #713f12;
  outline: none; font-family: inherit; min-height: 72px; padding: 0;
}
.pdfr-sticky-textarea::placeholder { color: #a16207; opacity: .55; }
.pdfr-sticky-actions { display: flex; gap: 4px; justify-content: flex-end; margin-top: 6px; }
.pdfr-sticky-btn {
  font-size: .69rem; padding: 3px 9px; border-radius: 4px;
  border: none; cursor: pointer; font-weight: 600; transition: background .12s;
}
.pdfr-sticky-btn-save { background: #ca8a04; color: #fff; }
.pdfr-sticky-btn-save:hover { background: #a16207; }
.pdfr-sticky-btn-del  { background: rgba(0,0,0,.08); color: #78350f; }
.pdfr-sticky-btn-del:hover { background: rgba(239,68,68,.15); color: #dc2626; }
/* Sticky note button in toolbar */
.pdfr-tb-note {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
  border: none; background: #fef9c3; cursor: pointer; color: #92400e;
  transition: background .12s;
}
.pdfr-tb-note:hover { background: #fef08a; }

.pdfr-annot-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pdfr-hl-rect {
  position: absolute; pointer-events: auto; cursor: pointer;
  border-radius: 2px; mix-blend-mode: multiply; transition: opacity .15s;
}
.pdfr-hl-rect:hover { opacity: .85 !important; }
.pdfr-hl-rect[data-color="yellow"] { background: #FFF08F; opacity: .55; }
.pdfr-hl-rect[data-color="blue"]   { background: #B2E1FF; opacity: .6; }
.pdfr-hl-rect[data-color="pink"]   { background: #FFBADD; opacity: .6; }
.pdfr-hl-rect[data-color="green"]  { background: #C8F8D7; opacity: .6; }
.pdfr-hl-rect[data-ul="red"]  { background: transparent; border-bottom: 3px solid #dc2626; opacity: .85; mix-blend-mode: normal; }
.pdfr-hl-rect[data-ul="blue"] { background: transparent; border-bottom: 3px solid #1d4ed8; opacity: .85; mix-blend-mode: normal; }
.pdfr-view[data-theme="night"] .pdfr-hl-rect { mix-blend-mode: screen; opacity: .35; }
.pdfr-view[data-theme="night"] .pdfr-hl-rect[data-ul] { mix-blend-mode: normal; opacity: 1; }

.pdfr-toolbar {
  position: fixed; z-index: 9999;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 8px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  border: 1px solid #e2e8f0;
  transform: translateY(-110%) translateX(-50%);
  transition: opacity .12s;
}
body.theme-dark .pdfr-toolbar { background: #1e293b; border-color: #334155; }
.pdfr-tb-sep { width: 1px; height: 22px; background: #e2e8f0; margin: 0 2px; }
body.theme-dark .pdfr-tb-sep { background: #334155; }
.pdfr-tb-section { display: flex; gap: 4px; }
.pdfr-hl-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.pdfr-hl-btn:hover, .pdfr-hl-btn.active { transform: scale(1.2); border-color: #1a1a2e; }
.pdfr-ul-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid #e2e8f0; background: transparent; cursor: pointer;
  font-size: .82rem; font-weight: 700; color: #1a1a2e; transition: background .12s;
}
.pdfr-ul-btn:hover { background: #f1f5f9; }
body.theme-dark .pdfr-ul-btn { color: #e2e8f0; border-color: #334155; }
body.theme-dark .pdfr-ul-btn:hover { background: #334155; }
.pdfr-tb-remove {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid #fecdd3; background: #fff1f2; cursor: pointer;
  color: #e11d48; transition: background .12s;
}
.pdfr-tb-remove:hover { background: #fecdd3; }

.pdfr-annot-panel {
  width: 260px; flex-shrink: 0;
  background: var(--pdfr-annot-bg, #f8fafc);
  border-left: 1px solid var(--pdfr-topbar-border, #e2e8f0);
  display: flex; flex-direction: column; overflow: hidden;
}
.pdfr-annot-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-size: .82rem; font-weight: 700;
  color: var(--pdfr-text);
  border-bottom: 1px solid var(--pdfr-topbar-border, #e2e8f0); flex-shrink: 0;
}
.pdfr-annot-close {
  border: none; background: transparent; cursor: pointer;
  color: var(--pdfr-text); font-size: .9rem; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
}
.pdfr-annot-close:hover { background: rgba(0,0,0,.07); }
.pdfr-annot-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pdfr-annot-empty { font-size: .78rem; color: var(--pdfr-text); opacity: .45; text-align: center; padding: 24px 8px; line-height: 1.6; }
.pdfr-annot-item {
  background: #fff; border-radius: 8px; padding: 10px 12px;
  border-left: 4px solid #FFF08F; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: box-shadow .12s;
}
.pdfr-annot-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.pdfr-annot-item[data-color="blue"]  { border-left-color: #B2E1FF; }
.pdfr-annot-item[data-color="pink"]  { border-left-color: #FFBADD; }
.pdfr-annot-item[data-color="green"] { border-left-color: #C8F8D7; }
.pdfr-annot-item[data-ul="red"]      { border-left-color: #ef4444; }
.pdfr-annot-item[data-ul="blue"]     { border-left-color: #3b82f6; }
.pdfr-annot-item[data-type="note"]   { border-left-color: #fbbf24; background: #fefce8; }
body.theme-dark .pdfr-annot-item[data-type="note"] { background: #1c1a0a; }
.pdfr-annot-text { font-size: .78rem; line-height: 1.45; color: #1a1a2e; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pdfr-annot-meta { font-size: .68rem; color: #64748b; margin-top: 4px; }
body.theme-dark .pdfr-annot-item { background: #1e293b; }
body.theme-dark .pdfr-annot-text { color: #e2e8f0; }

.pdfr-finish-nudge { display: flex; justify-content: center; padding: 24px 16px 0; }
.pdfr-finish-card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  padding: 28px 32px; text-align: center;
  max-width: 360px; width: 100%; border: 1px solid #e2e8f0;
}
.pdfr-finish-icon { font-size: 2rem; margin-bottom: 10px; }
.pdfr-finish-text { font-size: .9rem; color: #1a1a2e; margin-bottom: 18px; font-weight: 600; line-height: 1.5; }
.pdfr-finish-btn {
  display: block; width: 100%; padding: 12px; border-radius: 10px;
  border: none; background: #3b82f6; color: #fff;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .15s; margin-bottom: 10px;
}
.pdfr-finish-btn:hover { background: #2563eb; }
.pdfr-finish-close { border: none; background: transparent; cursor: pointer; font-size: .8rem; color: #64748b; text-decoration: underline; }
body.theme-dark .pdfr-finish-card { background: #1e293b; border-color: #334155; }
body.theme-dark .pdfr-finish-text { color: #e2e8f0; }

.pdfr-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 24px; color: var(--pdfr-text); opacity: .6; font-size: .88rem; }
.pdfr-spinner { width: 36px; height: 36px; border: 3px solid rgba(0,0,0,.1); border-top-color: #3b82f6; border-radius: 50%; animation: pdfr-spin .8s linear infinite; }
@keyframes pdfr-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .pdfr-annot-panel { display: none !important; }
  .pdfr-pages { padding: 0 4px; }
}