:root {
  /* ---- surfaces ---------------------------------------------------- */
  --page: #FDF9F3;          /* warm cream, the whole-site canvas */
  --cream: #F7F0E4;         /* alternating band */
  --white: #fff;
  --line: #E8DFCE;

  /* ---- type -------------------------------------------------------- */
  --ink: #1A1A2E;           /* near-black, high contrast on cream */
  --grey: #5A5A72;
  --purple: #4C2E72;        /* display headings */
  --purple-bright: #6B3FA0;

  --navy: #4C2E72;          /* legacy aliases, kept so older rules still */
  --navy-deep: #2E1B4A;     /* resolve to the new palette */
  --gold: #E8913A;

  --radius: 18px;
  --radius-lg: 26px;

  /* ---- pastel card system ----------------------------------------- */
  /* Each pair is a soft fill plus a bold, AA-contrast ink for its text. */
  --lav: #E4DEF9;      --lav-ink: #4A2E8F;    --lav-line: #C9BDF0;
  --pink: #FBDCE8;     --pink-ink: #B0326E;   --pink-line: #F3BDD3;
  --green: #D4F0E0;    --green-ink: #16704A;  --green-line: #A9E0C3;
  --orange: #FBE2CC;   --orange-ink: #B0541C; --orange-line: #F2C69E;
  --yellow: #FBF2D2;   --yellow-ink: #866312; --yellow-line: #F0E0A8;
  --blue: #D9EBFB;     --blue-ink: #14568C;   --blue-line: #AFD5F2;
  --teal: #D2EFEC;     --teal-ink: #12706A;   --teal-line: #A5DFD9;

  /* subject accents, re-pointed at the pastel system */
  --maths: #4A2E8F;
  --physics: #16704A;
  --cs: #B0326E;
  --maths-light: var(--lav);
  --physics-light: var(--green);
  --cs-light: var(--pink);
  --maths-glow: rgba(74,46,143,.22);
  --physics-glow: rgba(22,112,74,.22);
  --cs-glow: rgba(176,50,110,.22);
}

html { scroll-behavior: smooth; }

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

/* The UA rule for [hidden] is display:none, but any author `display` value
   beats it — .lib-empty (flex) and .lib-panes (grid) both stayed on screen
   when toggled with el.hidden. Force it. */
[hidden] { display: none !important; }

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: var(--page);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}

/* Display serif for the big statements, grotesk for everything functional -
   the contrast is what gives the page its editorial feel. */
h1, h2, .section-title, .display { font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -.01em; }
h3, .brand span { font-family: "Archivo", sans-serif; }

.container { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

/* ============ header ============ */
.site-header { background: var(--page); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(12px); background: rgba(245,241,234,.94); }
/* The header carries more items than the body column is wide enough for
   (8 links, a CTA, and an account menu once signed in), so it gets its own
   wider measure instead of inheriting the 1060px reading width. */
.header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0; padding: 0 28px; max-width: 1320px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none;
  flex: none; }
.brand img { height: 52px; width: 52px; object-fit: contain; border-radius: 14px;
  transition: transform .3s ease; }
.brand img:hover { transform: scale(1.08) rotate(-3deg); }
.brand span { font-weight: 800; font-size: 1.35rem; color: var(--navy);
  white-space: nowrap; }
.header-nav { display: flex; align-items: center; justify-content: center; gap: 26px; }
.nav-link { text-decoration: none; color: var(--ink); font-weight: 600;
  font-size: .92rem; padding-bottom: 2px; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: color .2s, border-color .3s; }
.nav-link:hover { color: var(--navy); border-bottom-color: var(--gold); }
.nav-link.active { color: var(--navy); border-bottom-color: var(--gold); }

/* ============ buttons ============ */
.btn { display: inline-block; border: 0; cursor: pointer; border-radius: 999px;
  padding: 11px 24px; font: 600 0.95rem "Hanken Grotesk", sans-serif;
  text-decoration: none; transition: transform .15s ease, opacity .15s, box-shadow .3s; }
.btn:active { transform: scale(.97); }
.btn-gold { background: linear-gradient(135deg, var(--gold) 0%, #f0c040 100%);
  color: var(--navy-deep); box-shadow: 0 4px 18px rgba(244,166,50,.3); }
.btn-gold:hover { box-shadow: 0 6px 28px rgba(244,166,50,.45); transform: translateY(-1px); }
.btn-dark { background: var(--ink);
  color: #F5F1EA; padding: 13px 32px; box-shadow: 0 4px 18px rgba(26,26,26,.22); }
.btn-dark:hover { box-shadow: 0 8px 28px rgba(26,26,26,.34); transform: translateY(-3px); }
.btn-white { background: #fff; color: var(--navy-deep); }
.btn-white:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--navy-deep);
  border: 1.5px solid var(--navy-deep); }
.btn-outline:hover { background: var(--navy-deep); color: #fff; }
.btn[disabled] { opacity: .5; cursor: wait; }

/* ============ CTA shimmer ============ */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* ============ hero ============ */
.hero { background: linear-gradient(160deg, var(--cream) 0%, #E5DDD0 60%, #DDD4C2 100%);
  padding: 64px 0 48px; border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,166,50,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-slim { padding: 56px 0 44px; }
.eyebrow { font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  font-size: .78rem; color: var(--gold); margin-bottom: 14px; }
.hero h1, .section-title { font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 900; line-height: 1.08; color: var(--navy); }
.hero h1 em, .section-title em { font-style: normal; color: var(--gold); }
.hero .sub { max-width: 560px; margin-top: 18px; color: #3a3a3a; }
.hero-ctas { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 36px;
  margin-top: 34px; width: fit-content; }
.hero-stats b { display: block; font-family: "Archivo", sans-serif;
  font-size: 1.6rem; color: var(--navy); }
.hero-stats span { font-size: .85rem; color: var(--grey); max-width: 170px;
  display: block; }

.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px;
  align-items: center; }
.hero-3d { position: relative; min-height: 460px; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; }

/* ============ sections ============ */
.section { padding: 72px 0; position: relative; }
.section-cream { background: linear-gradient(160deg, var(--cream) 0%, #E0D9CC 100%);
  border-block: 1px solid var(--line); }
.section-navy { background: linear-gradient(160deg, var(--navy-deep) 0%, #1a2650 50%, #22304a 100%); }
.section-title { margin-bottom: 34px; }
.section-title.light { color: #fff; }
.centered { text-align: center; }

/* section gradient dividers */
.section + .section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  opacity: .3;
}

/* ============ reveal animations ============ */
.reveal { opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }

.reveal-left { opacity: 0; transform: translateX(-50px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms); }
.reveal-left.in { opacity: 1; transform: none; }

.reveal-right { opacity: 0; transform: translateX(50px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms); }
.reveal-right.in { opacity: 1; transform: none; }

.reveal-scale { opacity: 0; transform: scale(.88);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms); }
.reveal-scale.in { opacity: 1; transform: none; }

/* ============ why cards ============ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  border-top: 4px solid var(--gold);
  transition: transform .25s ease, box-shadow .25s ease; }
.why-card:hover { transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(26,26,26,.12); }
/* Tinted variants: the border-top accent picks up each card's own ink so the
   three boxes read as a set rather than three unrelated colours. */
.why-card[class*="tint-"] { border-width: 1.5px; border-top-width: 5px; }
.why-card.tint-lav    { border-top-color: var(--lav-ink); }
.why-card.tint-pink   { border-top-color: var(--pink-ink); }
.why-card.tint-green  { border-top-color: var(--green-ink); }
.why-card.tint-blue   { border-top-color: var(--blue-ink); }
.why-card.tint-orange { border-top-color: var(--orange-ink); }
.why-card.tint-yellow { border-top-color: var(--yellow-ink); }
.why-num { font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: .95rem; color: var(--gold); }
.why-card.tint-lav    .why-num { color: var(--lav-ink); }
.why-card.tint-pink   .why-num { color: var(--pink-ink); }
.why-card.tint-green  .why-num { color: var(--green-ink); }
.why-card h3 { margin: 10px 0 8px; color: var(--navy); font-size: 1.1rem; }
.why-card p { font-size: .92rem; color: var(--ink); opacity: .88; }

/* photo placeholders */
.photo-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px;
  align-items: stretch; }
.photo-ph { border: 2px dashed #d8cfae; border-radius: var(--radius);
  background: #fffdf4; min-height: 220px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; color: var(--grey); }
.photo-ph.tall { min-height: 300px; }
.photo-ph span { font-size: 2rem; }
.photo-ph figcaption { font-size: .85rem; }

.hint { font-size: .84rem; color: var(--grey); margin-top: 14px; }

/* ============ testimonials ============ */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.quote { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 28px; color: #dfe4f0;
  backdrop-filter: blur(8px);
  transition: transform .3s ease, box-shadow .3s ease, background .3s; }
.quote:hover { transform: translateY(-4px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.quote .stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px;
  margin-bottom: 14px; display: block; }
.quote p { font-size: .95rem; font-style: italic; line-height: 1.6; }
.quote footer { display: flex; align-items: center; gap: 10px; margin-top: 18px;
  font-size: .85rem; color: #aab3c9; }
.quote footer strong { color: #fff; font-weight: 700; }
.avatar { width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #f0c040 100%);
  color: var(--navy-deep); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; font-family: "Archivo", sans-serif;
  font-size: .9rem; }
.section-navy .eyebrow { color: var(--gold); }

/* board preview cards */
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.board-card { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; text-decoration: none;
  color: var(--ink); transition: transform .2s ease, box-shadow .2s ease,
  border-color .2s ease; }
.board-card:hover { transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(26,26,46,.13); }
.board-card h3 { margin-bottom: 8px; }
.board-card p { font-size: .88rem; color: var(--ink); opacity: .8; }
.board-card.tint-blue   h3, .board-card.tint-blue   .go { color: var(--blue-ink); }
.board-card.tint-orange h3, .board-card.tint-orange .go { color: var(--orange-ink); }
.board-card.tint-yellow h3, .board-card.tint-yellow .go { color: var(--yellow-ink); }
.go { display: inline-block; margin-top: 14px; font-weight: 700;
  color: var(--gold); font-size: .9rem; transition: transform .2s; }
.board-card:hover .go { transform: translateX(4px); }
.go.muted { color: var(--grey); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--navy-deep) 0%, #1a2650 50%, #293860 100%);
  color: #fff; padding: 52px 0; margin-top: 40px; position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; top: -60px; left: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,166,50,.1) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band::after {
  content: ''; position: absolute; bottom: -80px; right: -80px;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-row { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-band h2 { font-size: 1.8rem; }
.cta-band p { color: #b9c1d6; margin-top: 6px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ subjects page ============ */
.board-section { padding: 56px 0 8px; }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; gap: 20px; }
.board-head h2 { color: var(--navy); font-size: 1.7rem; }
.board-head p { color: var(--grey); margin: 6px 0 0; }
.board-head-left { display: flex; flex-direction: column; }
.subject-grid {
  display: flex !important;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 18px;
  padding: 10px 4px 24px 4px;
  margin-inline: -4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #f1f1ee;
}

/* Custom scrollbars */
.subject-grid::-webkit-scrollbar {
  height: 8px;
}
.subject-grid::-webkit-scrollbar-track {
  background: #f1f1ee;
  border-radius: 999px;
}
.subject-grid::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 999px;
  transition: background 0.2s;
}
.subject-grid::-webkit-scrollbar-thumb:hover {
  background: #d8812c;
}

/* Scroll navigation controls */
.scroll-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.scroll-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--grey);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  transition: all 0.2s ease;
  user-select: none;
}
.scroll-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--cream);
  transform: scale(1.05);
}
.scroll-btn:active:not(:disabled) {
  transform: scale(0.95);
}
.scroll-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* colorful subject cards */
.subject-card { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  border-left: 5px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease,
  border-color .25s ease, color .25s ease;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
.subject-grid .res-card {
  flex: 0 0 320px;
}
.subject-card:hover { transform: scale(1.03) translateY(-3px); }
.subject-card:hover h3, .subject-card:hover p, .subject-card:hover .code { color: #fff !important; }
.subject-card:hover .chip.live { background: #fff; color: var(--navy); border-color: #fff; }
.subject-card:hover .chip.soon { background: rgba(255,255,255,.2); color: #fff; }

/* Mathematics cards */
.subject-card.math { border-left-color: var(--maths); }
.subject-card.math:hover { background: var(--maths);
  box-shadow: 0 14px 36px var(--maths-glow); border-color: var(--maths); }
.subject-card.math .code { color: var(--maths); }

/* Physics cards */
.subject-card.physics { border-left-color: var(--physics); }
.subject-card.physics:hover { background: var(--physics);
  box-shadow: 0 14px 36px var(--physics-glow); border-color: var(--physics); }
.subject-card.physics .code { color: var(--physics); }

/* Computer Science cards */
.subject-card.cs { border-left-color: var(--cs); }
.subject-card.cs:hover { background: var(--cs);
  box-shadow: 0 14px 36px var(--cs-glow); border-color: var(--cs); }
.subject-card.cs .code { color: var(--cs); }

.subject-card .code { font-family: "Archivo", sans-serif; font-weight: 800;
  color: var(--gold); letter-spacing: .04em; font-size: 1.1rem;
  transition: color .25s; }
.subject-card h3 { color: var(--navy); margin: 6px 0 8px; font-size: 1.08rem; transition: color .25s; }
.subject-card p { font-size: .88rem; color: var(--grey); transition: color .25s; }
.subject-links { margin-top: 16px; }
.chip { display: inline-block; border-radius: 999px; padding: 6px 14px;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: transform .2s, box-shadow .2s; }
.chip:hover { transform: translateY(-1px); }
.chip.live { background: var(--cream); color: var(--navy);
  border: 1px solid var(--gold); }
.chip.live:hover { box-shadow: 0 4px 14px rgba(244,166,50,.3); }
.chip.soon { background: #f1f1ee; color: var(--grey); }

/* ============ resources page ============ */
.resource-section { padding: 44px 0 6px; }
.resource-section h2 { color: var(--navy); font-size: 1.6rem;
  margin-bottom: 20px; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.resource-card { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; text-decoration: none;
  color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
a.resource-card:hover { transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(41,53,84,.10); }
.resource-card.featured { grid-column: 1 / -1; background: linear-gradient(135deg, var(--navy-deep) 0%, #2a3f6e 100%);
  color: #e6eaf4; border-color: var(--navy-deep); }
.resource-card.featured h3 { color: #fff; font-size: 1.3rem; }
.resource-card.featured .tag { background: var(--gold); color: var(--navy-deep); }
.resource-card.soon { opacity: .8; }
.resource-card .tag { display: inline-block; background: var(--cream);
  color: var(--navy); font-size: .75rem; font-weight: 700; border-radius: 999px;
  padding: 4px 12px; margin-bottom: 12px; }
.resource-card h3 { color: var(--navy); margin-bottom: 8px; }
.resource-card p { font-size: .9rem; opacity: .85; }

/* ============ generator (papers page) ============ */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; margin: -26px 0 48px; box-shadow: 0 14px 40px rgba(26,26,26,.10); }
.card h2 { color: var(--navy); font-size: 1.5rem; margin-bottom: 22px; }

.field { margin-bottom: 24px; }
.field-label { display: block; font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
  margin-bottom: 10px; }
.field-label-row { display: flex; justify-content: space-between;
  align-items: baseline; }
.mini { border: 0; background: none; color: var(--gold); font-weight: 600;
  cursor: pointer; font-size: .82rem; }

/* subject-group styles are overridden at bottom of file by the board-grouped picker styles */
.subject-groups { display: grid; gap: 18px; }

.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 9px 18px; cursor: pointer; font: 600 .9rem "Hanken Grotesk", sans-serif;
  color: var(--ink); transition: all .15s; }
.pill:hover { border-color: var(--gold); transform: translateY(-2px); }
.pill.active { background: var(--navy-deep); border-color: var(--navy-deep);
  color: #fff; box-shadow: 0 4px 14px rgba(46,27,74,.25); }
.pill small { color: inherit; opacity: .65; font-weight: 500; }

/* component filter pills — gold accent when active */
.pill.component.active { background: var(--gold); border-color: var(--gold);
  color: var(--navy-deep); }
.pill.component small { margin-left: 4px; }

/* "15 topics examined in P3 · Pure 3" beside the Topics step label */
.topic-note { margin-left: 10px; font-weight: 500; font-size: .78rem;
  letter-spacing: 0; text-transform: none; color: var(--grey); }

/* subject-card component chips */
.comp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip-comp { display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  background: var(--page); color: var(--navy); border: 1.5px solid var(--line); }
.subject-card:hover .chip-comp { background: rgba(255,255,255,.18); color: #fff;
  border-color: rgba(255,255,255,.35); }

.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 8px; }
.topic { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line);
  border-radius: 12px; padding: 8px 12px; cursor: pointer; font-size: .9rem;
  background: #fff; transition: all .15s; }
.topic:hover { border-color: var(--green-line); background: var(--green); }
.topic.on { background: var(--green); border-color: var(--green-ink); color: var(--green-ink); font-weight: 600; }
.topic.on .n { color: var(--green-ink); opacity: .7; }
.topic input { accent-color: var(--green-ink); }
.topic .n { margin-left: auto; color: var(--grey); font-size: .78rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.inline { display: flex; align-items: center; gap: 10px; }
.dash { color: var(--grey); }
select, input[type="number"] { border: 1.5px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font: 500 .95rem "Hanken Grotesk", sans-serif; background: #fff;
  color: var(--ink); width: 100%; max-width: 140px; }
.check { display: flex; gap: 9px; align-items: center; font-size: .95rem; }
.check input { accent-color: var(--gold); width: 16px; height: 16px; }
.hidden { display: none !important; }

.actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.status { font-size: .92rem; color: var(--grey); }
.status.err { color: #b4231f; }
.status.ok { color: #0e7a4c; }

/* ── test-mode question preview panel ──────────────────────────────────────── */
.preview-card { margin-top: 0; margin-bottom: 48px; }
.preview-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.preview-sub { color: var(--grey); font-size: .9rem; margin-top: 4px; }
.preview-head-btns { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.preview-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.preview-row { display: grid; grid-template-columns: 20px 1fr auto;
  gap: 14px; align-items: start; padding: 13px 18px;
  border-bottom: 1px solid var(--line); transition: background .12s; }
.preview-row:last-child { border-bottom: none; }
.preview-row:hover { background: var(--page); }
.preview-row.unchecked { opacity: .38; }
.prev-cb { width: 17px; height: 17px; accent-color: var(--gold); margin-top: 3px;
  cursor: pointer; }
.preview-row-ref { font-weight: 700; font-size: .88rem; color: var(--ink); }
.preview-row-badges { display: flex; gap: 7px; flex-wrap: wrap; margin: 5px 0 4px; }
.prev-badge { display: inline-block; border-radius: 6px; padding: 2px 8px;
  font-size: .74rem; font-weight: 600; background: var(--lav); color: var(--lav-ink); }
.prev-badge.subtopic { background: var(--cream); color: var(--grey); font-weight: 500; }
.preview-row-snippet { font-size: .82rem; color: var(--grey);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 55ch; }
.preview-row-marks { font-weight: 800; font-size: .95rem; color: var(--navy);
  white-space: nowrap; text-align: right; padding-top: 2px; }
.preview-row-marks small { display: block; font-size: .7rem; font-weight: 500;
  color: var(--grey); }

.preview-foot { display: flex; justify-content: space-between; align-items: center;
  margin-top: 22px; flex-wrap: wrap; gap: 12px; }
.preview-sel-info { font-size: .92rem; color: var(--grey); }
.preview-sel-info b { color: var(--ink); }
.preview-foot-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* click-to-preview hint on rows */
.preview-row { cursor: pointer; }
.preview-row .prev-cb { cursor: pointer; }

@media (max-width: 600px) {
  .preview-row { grid-template-columns: 20px 1fr; }
  .preview-row-marks { display: none; }
  .preview-head { flex-direction: column; }
}

/* ── question crop lightbox ──────────────────────────────────────────────────── */
.q-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.q-lightbox[hidden] { display: none; }
.q-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.70);
  cursor: pointer; }
.q-lightbox-box { position: relative; background: #fff; border-radius: 16px;
  max-width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  overflow-y: auto; box-shadow: 0 32px 80px rgba(0,0,0,.50); }
.q-lightbox-close { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0;
  z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.10); border: none; cursor: pointer;
  font-size: 1rem; font-weight: 800; line-height: 36px; text-align: center;
  color: var(--ink); transition: background .12s; }
.q-lightbox-close:hover { background: rgba(0,0,0,.20); }
.q-lightbox-img-wrap { padding: 16px 24px 28px; }
.q-lightbox-img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.q-lightbox-spinner { padding: 48px 0; text-align: center; color: var(--grey);
  font-size: .9rem; }

/* papers page how-steps */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-bottom: 64px; }
.step { background: var(--cream); border-radius: var(--radius); padding: 24px;
  transition: transform .25s ease; }
.step:hover { transform: translateY(-3px); }
.step:nth-child(2) { background: var(--navy-deep); color: #edf0f7; }
.step:nth-child(2) h3 { color: #fff; }
.step:nth-child(3) { background: #fff; border: 1px solid var(--line); }
.step b { font-family: "Archivo", sans-serif; color: var(--gold);
  font-size: .95rem; }
.step h3 { margin: 8px 0 6px; color: var(--navy); font-size: 1.05rem; }
.step p { font-size: .9rem; opacity: .85; }

/* ============ announce bar ============ */
@keyframes announce-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.announce { background: linear-gradient(90deg, var(--navy-deep), #1a2650, #293860, var(--navy-deep));
  background-size: 300% 100%; animation: announce-gradient 8s ease infinite;
  color: #cfd6e6; font-size: .86rem; text-align: center; padding: 10px 0; }
.announce b { color: #fff; }
.announce a { color: var(--gold); font-weight: 700; text-decoration: none;
  transition: color .2s; }
.announce a:hover { color: #f7c44a; }

/* ============ numbers band ============ */
.numbers-band { background: linear-gradient(135deg, var(--navy-deep) 0%, #1a2650 50%, #22304a 100%);
  padding: 48px 0; position: relative; overflow: hidden; }
.numbers-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}
.numbers-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.numbers-row b { display: block; font-family: "Archivo", sans-serif;
  font-weight: 900; font-size: 2.3rem; color: var(--gold); }
.numbers-row span { color: #b9c1d6; font-size: .86rem; display: block;
  max-width: 200px; }

/* ============ includes checklist ============ */
.includes { list-style: none; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 12px 26px; }
.includes li { background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 16px 13px 44px; position: relative;
  font-size: .95rem; transition: transform .2s ease, box-shadow .2s ease; }
.includes li:hover { transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(41,53,84,.06); }
.includes li:nth-child(odd) { background: #fffef8; }
.includes li::before { content: "✓"; position: absolute; left: 16px;
  color: var(--gold); font-weight: 800; font-family: "Archivo", sans-serif; }

/* ============ tutor section ============ */
.tutor-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px;
  align-items: start; }
.tutor-photo { min-height: 380px; position: sticky; top: 90px; }
.tutor-copy p { margin-bottom: 14px; color: #4a5266; }
.tutor-points { list-style: none; margin-top: 20px; }
.tutor-points li { padding: 10px 0 10px 26px; position: relative;
  font-size: .95rem; border-bottom: 1px dashed var(--line);
  transition: transform .2s, background .2s; }
.tutor-points li:hover { transform: translateX(6px); }
.tutor-points li::before { content: "→"; position: absolute; left: 0;
  color: var(--gold); font-weight: 800; }
.tutor-points b { color: var(--navy); }

/* ============ FAQ accordion ============ */
.faq-wrap { max-width: 760px; margin-inline: auto; }
.faq { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 10px; overflow: hidden;
  transition: border-color .3s, box-shadow .3s; }
.faq[open] { border-left: 4px solid var(--gold);
  box-shadow: 0 4px 18px rgba(244,166,50,.08); }
.faq summary { cursor: pointer; padding: 17px 20px; font-weight: 700;
  color: var(--navy); list-style: none; position: relative; user-select: none;
  transition: color .2s; }
.faq summary:hover { color: var(--gold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 14px;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.2rem;
  color: var(--gold); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq[open] summary { border-bottom: 1px solid var(--line); }
.faq p { padding: 15px 20px; font-size: .93rem; color: #4a5266; }


/* ============ footer ============ */
.site-footer { background: linear-gradient(160deg, #1a2340 0%, #0e1526 100%);
  color: #c8cede; font-size: .88rem; padding-top: 0;
  border-top: 2px solid #c9a227; }

/* WhatsApp strip */
.footer-wa-strip { background: rgba(0,0,0,.28); border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-wa-inner { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; gap: 20px; flex-wrap: wrap; }
.footer-wa-head { font-weight: 700; color: #fff; font-size: .92rem; margin-bottom: 3px; }
.footer-wa-sub { color: #6e7d9b; font-size: .81rem; }
.footer-wa-btn { display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 8px; font-weight: 700;
  font-size: .86rem; white-space: nowrap; flex-shrink: 0;
  transition: background .15s, transform .15s; }
.footer-wa-btn:hover { background: #1ebe5c; transform: translateY(-1px); }

.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px 36px; padding: 48px 22px 36px; }
.footer-5col { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; }
.footer-brand { display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; text-decoration: none; }
.footer-brand img { height: 40px; width: 40px; object-fit: contain;
  border-radius: 9px; }
.footer-brand span { font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 1.15rem; color: #fff; }
.footer-tagline { color: #6e7d9b; font-size: .84rem; line-height: 1.68; max-width: 30ch; }
.footer-socials { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.footer-social-link { display: flex; align-items: center; gap: 8px; color: #6e7d9b;
  text-decoration: none; font-size: .82rem; transition: color .18s; }
.footer-social-link:hover { color: #c9a227; }
.footer-contact-icon { font-size: .9rem; line-height: 1; flex-shrink: 0; }

.footer-col h4 { font-family: "Archivo", sans-serif; color: rgba(255,255,255,.42);
  font-size: .7rem; margin-bottom: 14px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; }
.footer-col a { display: block; color: #8899b5; text-decoration: none;
  padding: 3.5px 0; font-size: .85rem; transition: color .18s, transform .18s; }
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-link-accent { color: #c9a227 !important; font-weight: 600; }
.footer-link-accent:hover { color: #f0c040 !important; }

/* newsletter column (index.html only) */
.footer-nl-desc { font-size: .82rem; color: #6e7d9b; line-height: 1.55; margin-bottom: .8rem; }
.footer-nl-form { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-nl-input { flex: 1; min-width: 130px; padding: 9px 12px; font-size: .82rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 7px;
  background: rgba(255,255,255,.07); color: #fff; font-family: inherit; outline: none; }
.footer-nl-input::placeholder { color: rgba(255,255,255,.3); }
.footer-nl-input:focus { border-color: rgba(201,162,39,.5); }
.footer-nl-submit { padding: 9px 14px; font-size: .82rem; font-weight: 700;
  border: none; border-radius: 7px; background: #c9a227; color: #1a2340;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s; }
.footer-nl-submit:hover { background: #e0b82e; }
.footer-nl-msg { font-size: .75rem; min-height: 16px; margin-top: 5px; color: #34d399; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.07);
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 22px; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: #5a6880; }
.footer-bottom a { color: inherit; text-decoration: none; transition: color .15s; }
.footer-bottom a:hover { color: #8899b5; }
.footer-bottom-links { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }

/* ============ Booking Choice Modal ============ */
.bk-choice {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.bk-choice.open { opacity: 1; pointer-events: all; }
.bkc-backdrop {
  position: absolute; inset: 0;
  background: rgba(41,53,84,.58); backdrop-filter: blur(5px); }
.bkc-inner {
  position: relative; z-index: 1;
  background: var(--page); border-radius: 22px;
  padding: 38px 34px 32px; max-width: 570px; width: 100%;
  box-shadow: 0 28px 80px rgba(41,53,84,.22);
  transform: translateY(10px); transition: transform .2s; }
.bk-choice.open .bkc-inner { transform: translateY(0); }
.bkc-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; color: var(--grey); line-height: 1; padding: 2px 7px;
  border-radius: 7px; transition: background .12s, color .12s; }
.bkc-close:hover { background: var(--cream); color: var(--navy); }
.bkc-head { text-align: center; margin-bottom: 26px; }
.bkc-head h3 {
  font-family: "Archivo", sans-serif; font-size: 1.4rem; font-weight: 800;
  color: var(--navy); margin: 0 0 7px; }
.bkc-head p { color: var(--grey); font-size: .91rem; line-height: 1.55; margin: 0; }
.bkc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.bkc-opt {
  background: var(--page); border: 2px solid var(--line); border-radius: 14px;
  padding: 22px 18px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .14s, background .14s, transform .14s, box-shadow .14s; }
.bkc-opt:hover {
  border-color: var(--gold); background: var(--cream);
  transform: translateY(-3px); box-shadow: 0 10px 28px rgba(244,166,50,.15); }
.bkc-opt.primary { border-color: var(--gold); background: var(--cream); }
.bkc-opt.primary:hover { box-shadow: 0 12px 32px rgba(244,166,50,.22); }
.bkc-icon { font-size: 1.8rem; display: block; margin-bottom: 5px; }
.bkc-opt b { font-size: .97rem; font-weight: 800; color: var(--navy); }
.bkc-opt p { font-size: .82rem; color: var(--grey); line-height: 1.5; margin: 0; flex: 1; }
.bkc-opt .bkc-badge {
  font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--gold); color: #1d2740; border-radius: 5px;
  padding: 2px 8px; width: fit-content; margin-bottom: 2px; }
.bkc-opt .bkc-note {
  font-size: .76rem; color: var(--grey); font-style: italic; margin-top: 4px; }
.bkc-cta { font-size: .82rem; font-weight: 700; color: var(--gold); margin-top: 8px; display: block; }
@media (max-width: 500px) {
  .bkc-options { grid-template-columns: 1fr; }
  .bkc-inner { padding: 28px 18px 22px; }
  .bkc-head h3 { font-size: 1.18rem; } }

/* ============ Demo Booking Side Panel ============ */
.bk-panel {
  position: fixed; right: -420px; top: 50%; transform: translateY(-50%);
  width: 400px; max-height: 92vh; overflow-y: auto;
  background: var(--page); border: 1.5px solid var(--line); border-radius: 20px 0 0 20px;
  box-shadow: -6px 0 32px rgba(29,39,64,.18);
  padding: 28px 24px 28px 28px;
  z-index: 950;
  transition: right .32s cubic-bezier(.4,0,.2,1);
}
.bk-panel.open { right: 0; }
.bk-panel .fb-panel-head { margin-bottom: 20px; }
.bk-panel .fb-panel-head h3 { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin: 0; }
.bk-panel .fb-panel-head p { font-size: .8rem; color: var(--grey); margin: 4px 0 0; }

.bk-field { margin-bottom: 14px; }
.bk-field label { display: block; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); margin-bottom: 5px; }
.req { color: #c62828; font-weight: 900; }
.bk-opt { text-transform: none; font-weight: 400; font-size: .78rem; color: var(--grey); }
.bk-field input, .bk-field select, .bk-field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px;
  font: 500 .9rem "Hanken Grotesk", sans-serif; background: var(--page); color: var(--ink);
  transition: border-color .2s, box-shadow .2s; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(244,166,50,.12); }
.bk-input-err { border-color: #c62828 !important; box-shadow: 0 0 0 3px rgba(198,40,40,.12) !important; }

.bk-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.bk-check { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.bk-check input { accent-color: var(--gold); width: 15px; height: 15px; }

.bk-err { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.bk-err span { display: block; color: #c62828; font-size: .82rem; font-weight: 600; line-height: 1.5; }

.bk-submit { width: 100%; padding: 12px; background: var(--gold); color: #1d2740; font: 700 .95rem "Archivo", sans-serif;
  border: none; border-radius: 10px; cursor: pointer; transition: opacity .2s, transform .15s; margin-top: 6px; }
.bk-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.bk-submit:disabled { opacity: .55; cursor: not-allowed; }

.bk-thanks { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px; min-height: 280px; }
.bk-thanks-icon { font-size: 3rem; margin-bottom: 16px; }
.bk-thanks h4 { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.bk-thanks p { font-size: .9rem; color: var(--grey); line-height: 1.5; margin: 0; }

.input-err { border-color: #c62828 !important; box-shadow: 0 0 0 3px rgba(198,40,40,.12) !important; }
.field-error { display: block; color: #c62828; font-size: .78rem; margin-top: 4px; font-weight: 600; }

/* Inline booking card (homepage backup) */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.booking-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 40px;
  box-shadow: 0 16px 48px rgba(0,0,0,.15); border: 1px solid var(--line); }
.booking-card h3 { color: var(--navy); font-size: 1.6rem; margin-bottom: 12px; }

.photo-img { width: 100%; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.04); transition: transform .3s ease; }
.photo-img:hover { transform: scale(1.02); }
.photo-img.tall { height: 100%; min-height: 300px; }

/* ============ Meet Tee section ============ */
.meet-tee-wrap { display: flex; align-items: center; gap: 72px; flex-wrap: wrap; }
.meet-tee-photo { position: relative; flex-shrink: 0; width: 360px; }
.meet-tee-copy { flex: 1; min-width: 300px; }
.tee-bio { color: var(--ink); opacity: .82; line-height: 1.75; max-width: 54ch; }
.tee-bio + .tee-bio { margin-top: 14px; }

/* ---- Meet Tee: layered 3D photo card ---- */
.tee-stage {
  position: relative;
  width: 340px; height: 440px;
  margin: 20px auto;
  perspective: 1400px;
}
/* soft brand glow that grounds the card and gives depth */
.tee-glow {
  position: absolute; inset: -14% -10% -6% -10%;
  background:
    radial-gradient(60% 55% at 32% 28%, rgba(124,92,252,.32), transparent 70%),
    radial-gradient(55% 50% at 78% 72%, rgba(232,145,58,.30), transparent 72%);
  filter: blur(30px); z-index: 0;
  border-radius: 40px;
}
.tee-card {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  border-radius: 26px; overflow: hidden;
  background: #0e1320;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow:
    0 2px 0 rgba(255,255,255,.4) inset,
    0 30px 60px -18px rgba(23,15,50,.55),
    0 12px 24px -12px rgba(23,15,50,.4);
  transform: rotateY(-7deg) rotateX(3deg) rotateZ(-1.2deg);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
}
.tee-card img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 46%; transform: scale(1.42); transform-origin: center 46%;
  display: block;
}
.tee-card-scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 22px 18px;
  display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(to top, rgba(9,7,24,.92) 8%, rgba(9,7,24,.55) 55%, transparent);
  z-index: 3;
}
.tee-name {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: 1.45rem; color: #fff; line-height: 1.1; letter-spacing: -.01em;
}
.tee-role {
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.meet-tee-photo:hover .tee-card {
  transform: rotateY(-3deg) rotateX(1.5deg) rotateZ(-.4deg) translateY(-6px);
  box-shadow:
    0 2px 0 rgba(255,255,255,.4) inset,
    0 40px 74px -18px rgba(23,15,50,.6),
    0 16px 30px -12px rgba(23,15,50,.45);
}

/* floating chips — sit above the card at different depths */
.tee-chip {
  position: absolute; z-index: 4;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 14px; padding: 10px 14px;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: .82rem;
  color: #1A1A2E; white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgba(23,15,50,.35);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.tee-chip-bubble {
  top: 8px; right: -30px;
  border-radius: 16px 16px 16px 4px; color: #6B3FA0;
}
.tee-chip-stat {
  bottom: 64px; left: -42px; font-weight: 600; color: #5A5A72;
}
.tee-chip-stat b { color: #1A1A2E; font-family: "Playfair Display", serif;
  font-size: 1.05rem; margin-right: 4px; }
.tee-chip-badge {
  top: 128px; left: -34px; color: #B0541C;
}
.meet-tee-photo:hover .tee-chip-bubble { transform: translateY(-4px) translateX(3px); }
.meet-tee-photo:hover .tee-chip-stat   { transform: translateY(3px) translateX(-4px); }
.meet-tee-photo:hover .tee-chip-badge  { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .tee-card, .tee-chip { transition: none; }
}

/* ============================================================
   PASTEL SYSTEM  —  soft fill + bold ink, used by the comparison
   tiles, testimonial cards and the "Still confused?" band.
   ============================================================ */
.tint-lav    { background: var(--lav);    border-color: var(--lav-line); }
.tint-pink   { background: var(--pink);   border-color: var(--pink-line); }
.tint-green  { background: var(--green);  border-color: var(--green-line); }
.tint-orange { background: var(--orange); border-color: var(--orange-line); }
.tint-yellow { background: var(--yellow); border-color: var(--yellow-line); }
.tint-blue   { background: var(--blue);   border-color: var(--blue-line); }
.tint-teal   { background: var(--teal);   border-color: var(--teal-line); }
.tint-lav    h3, .tint-lav    .tint-ink { color: var(--lav-ink); }
.tint-pink   h3, .tint-pink   .tint-ink { color: var(--pink-ink); }
.tint-green  h3, .tint-green  .tint-ink { color: var(--green-ink); }
.tint-orange h3, .tint-orange .tint-ink { color: var(--orange-ink); }
.tint-yellow h3, .tint-yellow .tint-ink { color: var(--yellow-ink); }
.tint-blue   h3, .tint-blue   .tint-ink { color: var(--blue-ink); }
.tint-teal   h3, .tint-teal   .tint-ink { color: var(--teal-ink); }

/* ============ "Still confused?" band (every page, above footer) ==== */
.confused-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 60px auto 54px; }
.confused-pair .confused { margin: 0; }
.confused { border: 1.5px solid; border-radius: var(--radius-lg);
  padding: 30px 34px; margin: 60px auto 54px; display: flex;
  align-items: center; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; }
/* When the callout is the last thing in its tab, its 54px bottom margin lands
   on top of the container's own 72px padding and the next strip's 40px top
   margin — three spacings compounding into a 166px void. The container's
   padding already separates the sections, so drop the redundant margin. */
main > .container:last-child > .confused:last-child { margin-bottom: 0; }
.confused h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin-bottom: 6px;
  font-family: "Archivo", sans-serif; font-weight: 800; letter-spacing: -.01em; }
.confused p { font-size: .98rem; color: var(--ink); opacity: .82; max-width: 46ch; }
.confused .btn { white-space: nowrap; }
.confused .btn-tint { color: #fff; padding: 12px 26px; font-weight: 700; }
.tint-pink   .btn-tint { background: var(--pink-ink); }
.tint-lav    .btn-tint { background: var(--lav-ink); }
.tint-green  .btn-tint { background: var(--green-ink); }
.tint-orange .btn-tint { background: var(--orange-ink); }
.tint-blue   .btn-tint { background: var(--blue-ink); }
.tint-teal   .btn-tint { background: var(--teal-ink); }
.tint-yellow .btn-tint { background: var(--yellow-ink); }
.btn-tint:hover { transform: translateY(-3px); filter: brightness(1.08); }

/* ============ Homepage single callout card ============ */
.callout-single {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 36px 40px;
  margin: 60px auto 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.callout-single::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 22px 22px 0 0;
  background: #16704A;
}
.callout-single:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.10); }
.callout-single-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.callout-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.callout-icon-wa { background: #d4f0e2; color: #16704A; }
.callout-single h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 6px;
}
.callout-single p {
  font-size: .96rem;
  color: var(--grey);
  line-height: 1.6;
  margin: 0;
}
.callout-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .2s, box-shadow .2s, filter .2s;
  border: none;
  cursor: pointer;
}
.callout-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.callout-btn-wa { background: #16704A; color: #fff; }
@media (max-width: 640px) {
  .callout-single { padding: 28px 24px; gap: 20px; }
  .callout-single-left { flex-direction: column; align-items: flex-start; gap: 14px; }
  .callout-btn { width: 100%; justify-content: center; }
}
html[data-theme="dark"] .callout-single {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
html[data-theme="dark"] .callout-single::before { background: #5dde96; }
html[data-theme="dark"] .callout-icon-wa { background: #0c2418; color: #5dde96; }
html[data-theme="dark"] .callout-btn-wa  { background: #5dde96; color: #0c2418; }

/* ============ testimonial cards ============ */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard { border: 1.5px solid; border-radius: var(--radius-lg); padding: 26px;
  display: flex; flex-direction: column; min-height: 250px;
  transition: transform .25s ease, box-shadow .25s ease; }
.tcard:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(26,26,46,.10); }
.tcard .mark { font-family: Georgia, serif; font-size: 2.4rem; line-height: 1;
  height: 34px; opacity: .85; }
/* Large, near-black, generously spaced: these have to be readable first
   and decorative second. */
.tcard blockquote { font-size: 1.12rem; line-height: 1.5; font-weight: 600;
  color: var(--ink); margin: 12px 0 auto; }
.tcard .who { display: flex; align-items: center; gap: 10px; margin-top: 22px;
  font-size: .9rem; font-weight: 700; }
.tcard .who .dot { width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; background: rgba(255,255,255,.75); }
.placeholder-note { display: inline-block; margin-bottom: 14px; font-size: .78rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 5px 13px; }

/* ============ pricing ============ */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch; }

/* 3D Flip Cards */
.flip-card-container {
  perspective: 1200px;
  height: 460px;
  position: relative;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.flip-card-container:hover {
  transform: translateY(-5px);
}
.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.flip-card-front {
  z-index: 2;
  transform: rotateY(0deg);
}
.flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  z-index: 1;
  overflow-y: auto;
}

.plan-card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-flip-trigger {
  background: transparent;
  border: none;
  color: var(--grey);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
  padding: 6px 0;
  transition: color 0.2s, transform 0.2s;
}
.btn-flip-trigger:hover { color: var(--navy); transform: translateY(-1px); }

.back-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.back-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  padding: 4px 12px;
  border-radius: 999px;
}
.btn-flip-back {
  background: rgba(0,0,0,0.08);
  border: none;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: inherit;
  transition: background 0.2s;
}
.btn-flip-back:hover { background: rgba(0,0,0,0.15); }
.back-title {
  font-size: 1.25rem;
  margin-bottom: 2px;
  font-family: "Archivo", sans-serif;
  color: inherit;
}
.instructor {
  font-size: 0.84rem;
  color: inherit;
  opacity: 0.85;
  margin-bottom: 12px;
}
.back-points {
  list-style: none;
  margin: 0 0 14px;
  display: grid;
  gap: 8px;
  color: inherit;
}
.back-points li {
  font-size: 0.86rem;
  line-height: 1.4;
  padding-left: 0 !important;
  color: inherit;
}
.back-points li::before {
  display: none !important;
}

.plan { background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px; display: flex;
  flex-direction: column; position: relative; height: 100%; box-sizing: border-box;
  transition: transform .25s ease, box-shadow .25s ease; }
.plan:hover { box-shadow: 0 18px 40px rgba(26,26,46,.10); }

/* Explicit overrides to apply the pastel theme on backfaces */
.plan.tint-lav {
  background: var(--lav);
  border-color: var(--lav-line);
  color: var(--lav-ink);
}
.plan.tint-pink {
  background: var(--pink);
  border-color: var(--pink-line);
  color: var(--pink-ink);
}
.plan.tint-green {
  background: var(--green);
  border-color: var(--green-line);
  color: var(--green-ink);
}

.plan.featured { border-width: 2.5px; border-color: var(--lav-ink);
  background: var(--lav); }
.plan .tag { display: inline-block; margin-bottom: 8px; background: var(--lav-ink);
  color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; border-radius: 999px; padding: 5px 14px; }
.plan h3 { font-size: 1.2rem; color: var(--purple); margin-bottom: 2px; }
.plan .who-for { font-size: .85rem; color: var(--grey); min-height: 36px; line-height: 1.4; }
.plan .price { font-family: "Playfair Display", Georgia, serif; font-size: 2.2rem;
  font-weight: 800; color: var(--ink); margin: 10px 0 2px; line-height: 1; }
.plan .price small { font-family: "Hanken Grotesk", sans-serif; font-size: .85rem;
  font-weight: 600; color: var(--grey); }
.plan .per { font-size: .8rem; color: var(--grey); margin-bottom: 14px; }
.plan ul { list-style: none; margin: 0 0 16px; display: grid; gap: 8px; }
.plan li { position: relative; padding-left: 24px; font-size: .88rem; line-height: 1.4; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 1px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--lav-ink);
  color: #fff; font-size: .68rem; font-weight: 900; display: flex;
  align-items: center; justify-content: center; }
.plan .btn { width: 100%; text-align: center; }

/* value comparison — "one line beats three" */
.vs-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px;
  align-items: center; margin-top: 12px; }
.vs-badge { width: 74px; height: 74px; border-radius: 50%; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.15rem; }
.vs-col { display: grid; gap: 16px; }
.vs-tile { border: 1.5px solid; border-radius: var(--radius-lg); padding: 24px 26px;
  position: relative; }
.vs-tile h3 { font-size: 1.4rem; font-family: "Archivo", sans-serif;
  font-weight: 800; margin-bottom: 2px; }
.vs-tile .amount { font-size: .98rem; font-weight: 600; opacity: .9; }
.vs-tile ul { list-style: none; margin-top: 14px; display: grid; gap: 9px; }
.vs-tile li { position: relative; padding-left: 26px; font-size: .93rem;
  color: var(--ink); }
.vs-tile li::before { content: "✓"; position: absolute; left: 0;
  font-weight: 900; }
.vs-op { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 50%; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800; z-index: 2; }
.vs-total { text-align: center; font-family: "Archivo", sans-serif;
  font-weight: 900; font-size: 1.5rem; margin-top: 30px; }

/* "what's included" checklist with highlighted lead-ins */
.incl { list-style: none; display: grid; gap: 16px; max-width: 780px; margin-inline: auto; }
.incl li { position: relative; padding-left: 40px; font-size: 1.03rem;
  line-height: 1.5; }
.incl li::before { content: "✓"; position: absolute; left: 0; top: 0;
  width: 25px; height: 25px; border-radius: 50%; background: var(--lav-ink);
  color: #fff; font-size: .82rem; font-weight: 900; display: flex;
  align-items: center; justify-content: center; }
.incl mark { background: var(--green); color: var(--ink); font-weight: 700;
  padding: 2px 6px; border-radius: 5px; }

/* ============ two-column comparison ================================
   Left column stays deliberately uniform and grey; every tile on the right
   gets its own bright pastel. The colour itself carries the argument —
   one is samey, the other is alive — before a single word is read. */
/* One grid, filled column-first: the markup stays grouped per column but each
   pair shares a grid row, so "Mark schemes" on the left sits exactly level
   with "Mark schemes" on the right. Two independent columns drifted up to
   67px apart once the text lengths differed. */
.cmp { display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, auto); grid-auto-flow: column;
  gap: 12px 22px; align-items: stretch; }
.cmp-head { border-radius: var(--radius-lg); padding: 22px 24px;
  text-align: center; border: 2px solid; }
.cmp-head h3 { font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; line-height: 1.15; }
.cmp-head p { font-size: .86rem; font-weight: 600; margin-top: 4px; opacity: .8; }
.cmp-head.them { background: #EBE8E1; border-color: #D6D2C8; color: #55524B; }
.cmp-head.us { background: var(--lav-ink); border-color: var(--lav-ink);
  color: #fff; position: relative; }
.cmp-head.us p { opacity: .85; }
.cmp-head .crown { position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%); background: var(--gold); color: #3A2A05;
  font: 800 .68rem "Hanken Grotesk", sans-serif; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 999px; padding: 5px 14px;
  white-space: nowrap; }

.cmp-item { border-radius: 16px; padding: 16px 18px; border: 1.5px solid;
  display: flex; gap: 12px; align-items: flex-start;
  transition: transform .22s ease, box-shadow .22s ease; }
.cmp-item .mk { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 900; margin-top: 1px; }
.cmp-item .txt { font-size: .97rem; line-height: 1.45; }
.cmp-item .txt b { display: block; font-family: "Archivo", sans-serif;
  font-size: .76rem; letter-spacing: .07em; text-transform: uppercase;
  opacity: .62; margin-bottom: 3px; font-weight: 700; }

/* the flat, interchangeable side */
.cmp-item.them { background: #F2F0EB; border-color: #E2DED5; color: #6B6862; }
.cmp-item.them .mk { background: #D8D4CB; color: #6B6862; }

/* the side that earns its colour */
.cmp-item.us { font-weight: 600; }
.cmp-item.us:hover { transform: translateX(4px);
  box-shadow: 0 10px 26px rgba(26,26,46,.10); }
.cmp-item.us .mk { background: rgba(255,255,255,.75); }

.cmp-foot { border-radius: 16px; padding: 18px 20px; text-align: center;
  border: 1.5px solid; margin-top: 4px; }
.cmp-foot .amt { font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 800; line-height: 1.1; }
.cmp-foot .sub { font-size: .84rem; margin-top: 5px; opacity: .82; }
.cmp-foot.them { background: #EBE8E1; border-color: #D6D2C8; color: #55524B; }
.cmp-foot.us { background: var(--green); border-color: var(--green-line);
  color: var(--green-ink); }

/* ============ "a system" feature boxes ============================= */
.sys-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sys-box { border-radius: 18px; border: 1.5px solid; padding: 20px 18px;
  transition: transform .25s ease, box-shadow .25s ease; }
.sys-box:hover { transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(26,26,46,.11); }
.sys-box .ico { font-size: 1.6rem; display: block; margin-bottom: 9px;
  line-height: 1; }
.sys-box h3 { font-family: "Archivo", sans-serif; font-size: .97rem;
  margin-bottom: 5px; line-height: 1.25; }
.sys-box p { font-size: .85rem; color: var(--ink); opacity: .78; line-height: 1.45; }

/* ============ paper library ============ */
/* The reading panes want every pixel, so the library breaks out of the
   1060px text column that suits the marketing pages. */
.container-wide { max-width: 1580px; margin: 0 auto; padding: 0 22px; }
.lib { display: grid; grid-template-columns: 286px 1fr; gap: 18px;
  align-items: start; }
.lib-panel { background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 14px 10px 14px 14px;
  position: sticky; top: 88px; max-height: calc(100vh - 110px);
  overflow-y: auto; }
.lib-panel h3 { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--purple); margin: 2px 0 10px 4px; }

/* ── Archive search ──────────────────────────────────────────────────────── */
.lib-search { position: relative; display: flex; align-items: center;
  margin: 0 4px 6px 0; }
.lib-search-ico { position: absolute; left: 11px; font-size: .8rem;
  opacity: .5; pointer-events: none; }
.lib-search-input { width: 100%; padding: 8px 30px 8px 32px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--page); color: var(--ink);
  font: 500 .85rem "Hanken Grotesk", sans-serif; }
.lib-search-input:focus { outline: none; border-color: var(--purple);
  background: var(--white); }
.lib-search-input::-webkit-search-cancel-button { display: none; }
.lib-search-clear { position: absolute; right: 6px; border: 0; background: none;
  cursor: pointer; color: var(--grey); font-size: 1.1rem; line-height: 1;
  padding: 2px 6px; }
.lib-search-clear:hover { color: var(--ink); }
.lib-search-hint { font-size: .72rem; color: var(--grey); margin: 0 4px 12px 2px;
  line-height: 1.4; }

.lib-results { display: flex; flex-direction: column; gap: 3px; margin-right: 4px; }
.lib-results-head { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grey); margin: 2px 0 6px 2px; }
.lib-no-results { font-size: .82rem; color: var(--grey); line-height: 1.5;
  margin: 2px; }
.lib-result { display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1.5px solid transparent; border-radius: 9px; background: none;
  cursor: pointer; text-align: left; padding: 7px 9px;
  transition: background .12s, border-color .12s; }
.lib-result:hover { background: var(--cream); }
.lib-result.on { background: var(--lav); border-color: var(--purple); }
.lib-result-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lib-result-main b { font-size: .82rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-result-main em { font-style: normal; font-size: .74rem; color: var(--grey); }
.lib-result-tags { display: flex; gap: 4px; }
.lib-tag { font-style: normal; font-size: .6rem; font-weight: 800;
  letter-spacing: .04em; border-radius: 5px; padding: 2px 5px; }
.lib-tag.qp { background: var(--green); color: var(--green-ink); }
.lib-tag.ms { background: var(--blue); color: var(--blue-ink); }

/* File tree: folders collapse, files select. Indentation is driven by a
   --depth custom property so the markup stays flat and easy to build. */
.tree { display: block; font-size: .88rem; }
.tree-row { display: flex; align-items: center; gap: 6px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 .87rem "Hanken Grotesk", sans-serif; color: var(--ink);
  padding: 5px 8px 5px calc(6px + var(--depth, 0) * 15px);
  border-radius: 8px; transition: background .13s, color .13s; }
.tree-row:hover { background: var(--cream); }
.tree-row .chev { width: 12px; flex: 0 0 12px; font-size: .62rem;
  color: var(--grey); transition: transform .18s; display: inline-block;
  text-align: center; }
.tree-row.open > .chev { transform: rotate(90deg); }
.tree-row .ico { width: 16px; flex: 0 0 16px; font-size: .88rem; }
.tree-row .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.tree-file .lbl { white-space: normal; overflow: visible; text-overflow: unset;
  word-break: break-all; }
.tree-row .n { font-size: .74rem; color: var(--grey); font-weight: 600; }
.tree-file { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .8rem; font-weight: 500; }
.tree-file.on { background: var(--lav); color: var(--lav-ink); font-weight: 700; }
.tree-file.on:hover { background: var(--lav); }
.tree-file .tag { font-size: .64rem; font-weight: 800; letter-spacing: .04em;
  border-radius: 4px; padding: 1px 5px; }
.tree-file .tag.qp { background: var(--blue); color: var(--blue-ink); }
.tree-file .tag.ms { background: var(--green); color: var(--green-ink); }
.tree-kids { display: block; }
.tree-kids[hidden] { display: none; }

.lib-viewer { background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex;
  flex-direction: column; min-height: 78vh; transition: all 0.3s ease; }
.lib-viewer.lib-fullscreen-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.lib-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1.5px solid var(--line);
  flex-wrap: wrap; background: var(--cream); }
.lib-bar b { font-size: .95rem; color: var(--purple); }
.lib-bar .sub { font-size: .8rem; color: var(--grey); }
.lib-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Two documents at once: stacked (paper above, scheme below with a clear
   break between) or side by side. */
.lib-panes { flex: 1; display: grid; gap: 18px; padding: 14px;
  background: var(--cream); }
.lib-panes.stacked { grid-template-columns: 1fr; }
.lib-panes.split { grid-template-columns: 1fr 1fr; }
.pane { display: flex; flex-direction: column; background: var(--white);
  border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.pane-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 14px; border-bottom: 1.5px solid var(--line); }
.pane-head b { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.pane-head .file { font-family: ui-monospace, Consolas, monospace;
  font-size: .74rem; color: var(--grey); }
.pane.qp .pane-head { background: var(--blue); }
.pane.qp .pane-head b { color: var(--blue-ink); }
.pane.ms .pane-head { background: var(--green); }
.pane.ms .pane-head b { color: var(--green-ink); }
.lib-toggle-btn { display: none; align-items: center; gap: 8px;
  margin-bottom: 10px; }
.lib-frame { width: 100%; border: 0; background: #f3f3f3; display: block; }
.lib-panes.stacked .lib-frame { height: 82vh; }
.lib-panes.split .lib-frame { height: 76vh; }
.lib-viewer.lib-dark-active iframe.lib-frame { filter: invert(1) hue-rotate(180deg); }
.pane-missing { padding: 40px 20px; text-align: center; color: var(--grey);
  font-size: .9rem; }
.lib-auth-wall { position: relative; grid-column: 1 / -1; display: flex;
  align-items: center; justify-content: center; min-height: 68vh;
  background: var(--cream); border: 1.5px solid var(--line);
  border-radius: 14px; overflow: hidden; }
.lib-auth-blur { position: absolute; inset: 0; display: flex; flex-direction: column;
  gap: 18px; padding: 32px 48px; filter: blur(6px); pointer-events: none; }
.lib-auth-line { height: 10px; background: var(--ink); border-radius: 4px;
  opacity: .13; }
.lib-auth-card { position: relative; z-index: 1; background: var(--white);
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 44px 40px 40px; text-align: center; max-width: 380px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12); }
.lib-auth-icon { font-size: 2.4rem; margin-bottom: 14px; }
.lib-auth-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
.lib-auth-card p { color: var(--grey); font-size: .92rem; line-height: 1.55;
  margin-bottom: 26px; }
.lib-auth-card .btn { display: block; margin-bottom: 10px; }
.lib-auth-signup { border: 1.5px solid var(--line) !important;
  background: var(--white) !important; color: var(--ink) !important; }
.lib-empty { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 80px 24px; text-align: center;
  color: var(--grey); flex: 1; }
.lib-empty span { font-size: 2.6rem; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px;
  overflow: hidden; background: var(--white); }
.seg button { border: 0; background: none; padding: 7px 16px; cursor: pointer;
  font: 700 .84rem "Hanken Grotesk", sans-serif; color: var(--grey); }
.seg button.on { background: var(--lav-ink); color: #fff; }

.seg-large {
  display: inline-flex;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  background: #fff;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  /* Three board names sit ~622px wide. Without a wrap they force every
     ancestor open, which is what pushed the MCQ setup card to 687px on a
     phone. max-width stops it stretching a grid column it lives in. */
  flex-wrap: wrap;
  max-width: 100%;
}
.seg-large button {
  border: 0;
  background: none;
  padding: 10px 24px;
  cursor: pointer;
  font: 700 0.95rem "Hanken Grotesk", sans-serif;
  color: var(--navy-deep);
  border-radius: 999px;
  transition: all 0.25s ease;
}
.seg-large button.active {
  background: var(--physics);
  color: #fff;
}
/* Tighter on phones so the three boards usually still make one row. */
@media (max-width: 560px) {
  .seg-large { width: 100%; justify-content: center; }
  .seg-large button { padding: 9px 14px; font-size: .86rem; flex: 1 1 auto; }
}

/* ============ AI doubt solver ============ */
.ask-grid { display: grid; grid-template-columns: 380px 1fr; gap: 22px;
  align-items: start; }
/* display:block matters — a <label> is inline by default, so the drop zone's
   box bled over the field below it. */
.drop { display: block; border: 2.5px dashed var(--lav-line);
  border-radius: var(--radius-lg); background: var(--white);
  padding: 34px 22px; text-align: center; cursor: pointer; transition: all .2s; }
.drop:hover, .drop.over { border-color: var(--lav-ink); background: var(--lav); }
.drop .big { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.drop b { display: block; color: var(--purple); margin-bottom: 4px; }
.drop small { color: var(--grey); }
.drop img { max-width: 100%; max-height: 260px; border-radius: 12px;
  border: 1px solid var(--line); }
.text-input { width: 100%; max-width: 100%; border: 1.5px solid var(--line);
  border-radius: 11px; padding: 11px 13px; background: var(--white);
  color: var(--ink); font: 500 .95rem "Hanken Grotesk", sans-serif; }
.text-input:focus { outline: none; border-color: var(--lav-ink);
  box-shadow: 0 0 0 3px rgba(74,46,143,.12); }
.text-input:disabled { background: var(--page); color: var(--grey); cursor: default; }

/* A <select> waiting on /api/meta. The spinner rides in the padding so it
   never overlaps the option text, and the native arrow is left alone. */
select.text-input.is-loading {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%236B3FA0' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6' opacity='.25'/%3E%3Cpath d='M8 2a6 6 0 0 1 6 6' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 30px center;
  padding-right: 54px;
}
@media (prefers-reduced-motion: reduce) {
  select.text-input.is-loading { background-image: none; padding-right: 13px; }
}
.ask-side { display: grid; gap: 16px; }
.ask-side .status:empty { display: none; }
.ask-out { background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; min-height: 320px;
  line-height: 1.65; }
.ask-out h3 { color: var(--purple); margin: 18px 0 8px; font-size: 1.05rem; }
.ask-out h3:first-child { margin-top: 0; }
.ask-out p { margin-bottom: 11px; }
.ask-out ol, .ask-out ul { margin: 0 0 12px 20px; display: grid; gap: 7px; }
.ask-out code { background: var(--cream); border-radius: 5px; padding: 1px 5px;
  font-size: .93em; }
.ask-out .step { border-left: 3px solid var(--lav-ink); padding-left: 14px;
  margin-bottom: 14px; }
.ask-placeholder { color: var(--grey); text-align: center; padding: 60px 20px; }
.ask-placeholder span { font-size: 2.6rem; display: block; margin-bottom: 10px; }
.spinner { width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  vertical-align: -3px; margin-right: 8px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ responsive ============ */
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-3d { min-height: 320px; }
  .why-grid, .quotes, .board-grid, .subject-grid, .resource-grid,
  .photo-grid { grid-template-columns: 1fr; }
  /* header collapse is handled at 1200px - see the nav drawer block */
  .footer-top, .footer-5col { grid-template-columns: 1fr 1fr; }
  .tutor-grid { grid-template-columns: 1fr; }
  .numbers-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .includes { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .tcards { grid-template-columns: repeat(2, 1fr); }
  .sys-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .lib { grid-template-columns: 1fr; }
  /* On tablets, collapse panel into a toggle-able drawer */
  .lib-panel { position: static; max-height: 0; overflow: hidden; padding: 0;
    border: none; transition: max-height .3s ease, padding .2s; }
  .lib-panel.open { max-height: 52vh; overflow-y: auto; padding: 14px 10px 14px 14px;
    border: 1.5px solid var(--line); }
  .lib-toggle-btn { display: flex !important; }
  /* Side-by-side cannot work on a narrow screen — always stack. */
  .lib-panes.split { grid-template-columns: 1fr; }
  .ask-grid { grid-template-columns: 1fr; }
  /* The VS layout stacks: three separate columns can't survive a phone. */
  .vs-wrap { grid-template-columns: 1fr; gap: 30px; }
  .vs-badge { margin: 0 auto; }
}

@media (max-width: 720px) {
  .split, .how { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .footer-top, .footer-5col { grid-template-columns: 1fr; }
  .tcards, .sys-grid { grid-template-columns: 1fr; }
  /* Two text columns at 375px leaves ~137px of readable width, which is
     unusable. Stack them — each keeps its own header, so the comparison
     still reads top to bottom. */
  .cmp { grid-template-columns: 1fr; grid-template-rows: none;
    grid-auto-flow: row; gap: 12px; }
  .cmp-head { padding: 18px 20px; }
  .cmp-head:not(:first-child) { margin-top: 22px; }
  .confused-pair { grid-template-columns: 1fr; margin: 44px auto 40px; gap: 16px; }
  .confused { flex-direction: column; align-items: flex-start; padding: 26px 22px;
    margin: 44px auto 40px; }
  .confused .btn { width: 100%; text-align: center; }
  .container { padding: 0 16px; }
  .hero { padding: 40px 0 34px; }
  .section { padding: 48px 0; }
  .lib-frame { min-height: 62vh; }
  .lib-bar { gap: 8px; }
  /* hero-stats: 2×2 grid on mobile */
  .hero-stats { grid-template-columns: repeat(2, auto); gap: 16px 28px; }
  .hero-stats b { font-size: 1.35rem; }
  /* meet-tee stacks on mobile */
  .meet-tee-wrap { gap: 32px; justify-content: center; text-align: center; }
  .meet-tee-photo { margin-inline: auto; width: 300px; max-width: 100%; }
  .meet-tee-copy { min-width: unset; }
  .tee-stage { width: 280px; height: 372px; }
  .tee-card { transform: none; }
  .meet-tee-photo:hover .tee-card { transform: translateY(-6px); }
  .tee-chip-bubble { right: -8px; }
  .tee-chip-stat { left: -10px; }
  .tee-chip-badge { left: -6px; }
  /* resources viewer stacks on mobile */
  .res-viewer.file-open { grid-template-columns: 1fr; }
  .res-viewer.file-open .res-pane { min-height: 70vh; position: static; }
  /* footer-wa: prevent text/button overlap on narrow screens */
  .footer-wa-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 22px; }
  .footer-wa-btn { align-self: flex-start; }
  .topics { grid-template-columns: 1fr; }
  /* Filter pills scroll sideways instead of wrapping into a tall stack. */
  .pill-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pill-row::-webkit-scrollbar { display: none; }
  .pill { white-space: nowrap; }
  .actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .actions .btn { width: 100%; }
  select, input[type="number"] { max-width: 100%; }
  .field.split { gap: 16px; }
  .vs-tile, .tcard, .plan { padding: 22px 20px; }
  .plan .price { font-size: 2.1rem; }
  .plan-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .flip-card-container { height: auto; min-height: 460px; }
}

/* Tap targets and text scale on true phones. */
@media (max-width: 480px) {
  .hero h1, .section-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .tcard blockquote { font-size: 1.02rem; }
  .btn { padding: 12px 20px; }
  .brand img { height: 42px; width: 42px; }
  .brand span { font-size: 1.15rem; }
  .subject-card, .subject-grid .res-card { flex: 0 0 280px; }
}

/* ============================================================= AI Tutor === */
.tutor-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px;
  align-items: start; }
.tutor-side { position: sticky; top: 90px; display: flex; flex-direction: column;
  gap: 18px; }
.tutor-picker, .tutor-chips { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; }
.tutor-picker select { width: 100%; }
.muted { color: var(--grey); font-weight: 500; }
.tutor-chips { display: flex; flex-direction: column; gap: 8px; }
.tutor-chips .field-label { margin: 0 0 2px; }
.tutor-chips .chip { display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--lav-line); background: var(--lav); color: var(--lav-ink);
  padding: 10px 14px; border-radius: 12px; font-size: .9rem; }
.tutor-chips .chip:nth-child(3) { background: var(--green); color: var(--green-ink);
  border-color: var(--green-line); }
.tutor-chips .chip:nth-child(4) { background: var(--blue); color: var(--blue-ink);
  border-color: var(--blue-line); }
.tutor-chips .chip:nth-child(5) { background: var(--orange); color: var(--orange-ink);
  border-color: var(--orange-line); }
.tutor-chips .chip:hover { transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0,0,0,.08); }

.tutor-main { display: flex; flex-direction: column; min-height: 62vh; }
.chat { flex: 1; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
  padding: 22px; overflow-y: auto; max-height: 66vh; }
.chat-empty { text-align: center; color: var(--grey); padding: 46px 20px; }
.chat-empty span { font-size: 2.6rem; display: block; margin-bottom: 10px; }
.chat-empty b { color: var(--ink); font-size: 1.15rem; display: block; }
.chat-empty p { max-width: 44ch; margin: 8px auto 0; }

.msg { display: flex; margin-bottom: 16px; }
.msg.me { justify-content: flex-end; }
.msg-body { max-width: 80%; padding: 13px 17px; border-radius: 16px;
  line-height: 1.55; }
.msg.me .msg-body { background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.msg.bot .msg-body { background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 5px; max-width: 92%; }
.msg-body h3 { font-family: 'Hanken Grotesk', sans-serif; font-size: 1rem;
  color: var(--purple); margin: 14px 0 6px; }
.msg-body h3:first-child { margin-top: 0; }
.msg-body p { margin: 0 0 8px; }
.msg-body ol { margin: 6px 0 8px; padding-left: 22px; }
.msg-body li { margin-bottom: 10px; }
.msg-body .step { background: var(--white); border-left: 3px solid var(--gold);
  padding: 7px 12px; border-radius: 8px; margin: 6px 0; }
.msg-body .err { color: #9b2c2c; }

.dots span { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--grey); margin-right: 4px; animation: dotpulse 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotpulse { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.chat-bar { display: flex; flex-wrap: wrap; gap: 8px; background: var(--white);
  border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  padding: 12px; }
.chat-bar-row { display: flex; gap: 8px; width: 100%; align-items: flex-end; }
.chat-input { flex: 1; resize: none; border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; font: inherit; font-size: .96rem;
  background: var(--page); color: var(--ink); max-height: 160px; }
.chat-input:focus { outline: none; border-color: var(--purple-bright); }
.chat-bar .btn { align-self: flex-end; }
.chat-icon-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--page); color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; transition: background .15s, border-color .15s; }
.chat-icon-btn:hover { background: var(--purple-bright); border-color: var(--purple-bright); color: #fff; }
.chat-icon-btn.recording { background: #e53e3e; border-color: #e53e3e; color: #fff; animation: pulse-red .8s infinite; }
@keyframes pulse-red { 0%,100% { opacity:1; } 50% { opacity:.6; } }
.chat-attachment-preview { width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 4px 0; }
.chat-attachment-preview img { max-height: 64px; max-width: 120px; border-radius: 8px;
  object-fit: cover; border: 1px solid var(--line); }
.chat-attachment-preview button { background: none; border: none; cursor: pointer;
  color: var(--grey); font-size: 1rem; padding: 2px 4px; }
.chat-attachment-preview button:hover { color: var(--ink); }
.msg.me img { max-width: 220px; border-radius: 10px; display: block; margin-bottom: 6px; }

/* Session list in tutor-side */
.tutor-sessions-section {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  max-height: 250px;
}
.tutor-sessions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tutor-session-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}
.tutor-session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 0.15s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.tutor-session-item:hover {
  background: var(--lav);
  border-color: var(--lav-line);
}
.tutor-session-item.active {
  background: var(--purple-bright);
  color: #fff;
  border-color: var(--purple-bright);
}
.tutor-session-item.pinned::before {
  content: "📌";
  font-size: 0.75rem;
  margin-right: 4px;
}
.tutor-session-item .session-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.tutor-session-item .session-meta {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-left: 6px;
}
.tutor-session-item .session-actions {
  display: none;
  gap: 4px;
  margin-left: 6px;
}
.tutor-session-item:hover .session-actions {
  display: flex;
}
.tutor-session-item.active .session-actions {
  color: #fff;
}
.tutor-session-item .action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  font-size: 0.8rem;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.tutor-session-item .action-btn:hover {
  opacity: 1;
}

/* Auth promo banner */
.tutor-banner {
  background: var(--orange-tint);
  border: 1px solid var(--orange-line);
  color: var(--orange-ink);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 500;
}
.tutor-banner .btn {
  margin-left: 12px;
  padding: 6px 14px;
}

/* Drag and drop overlay */
.chat-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(107, 70, 193, 0.95);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 100;
}
.overlay-content {
  text-align: center;
}
.overlay-content .big-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 10px;
}
.overlay-content b {
  font-size: 1.3rem;
  display: block;
}

/* Multi-image thumbnail preview strip */
.chat-attachment-preview-strip {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.attach-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attach-thumb .remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.attach-thumb .remove-btn:hover {
  background: rgba(229, 62, 62, 0.9);
}

/* Message feedback actions */
.msg-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  opacity: 0.3;
  transition: opacity 0.15s;
}
.msg:hover .msg-actions {
  opacity: 1;
}
.msg-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--grey);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.msg-action-btn:hover {
  background: var(--page);
  color: var(--ink);
}
.msg-action-btn.active {
  color: var(--purple-bright);
  font-weight: bold;
}

/* Math rendering tweaks */
.katex-display {
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 820px) {
  .tutor-grid { grid-template-columns: 1fr; }
  .tutor-side { position: static; }
}

/* ========================================================= Resources ====== */
.section-lead { color: var(--grey); max-width: 60ch; margin: -6px 0 22px; }
.res-loading, .res-empty { grid-column: 1/-1; text-align: center; color: var(--grey);
  padding: 40px 20px; }
.res-empty span { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.res-empty b { color: var(--ink); display: block; font-size: 1.1rem; }

/* category cards reuse .resource-card; the tint classes colour them */
a.res-cat { cursor: pointer; }
a.res-cat .tag { background: rgba(255,255,255,.55); }

/* detail view */
.res-detail { margin-top: 8px; }
/* The detail view breaks out of the page container to use the full viewport
   width, so the PDF gets as much room as possible. */
.res-detail { width: 100vw; margin-left: calc(50% - 50vw);
  padding: 0 26px; box-sizing: border-box; }
.res-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.res-back { background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer;
  color: var(--ink); flex: none; }
.res-back:hover { background: var(--cream); }
.res-detail-head h3 { font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem; color: var(--purple); margin: 0; }
.res-fullscreen { margin-left: auto; font-weight: 700; font-size: .9rem;
  color: var(--purple-bright); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  background: var(--white); }
.res-fullscreen:hover { background: var(--cream); }

/* ---- Resources: two-mode viewer (browse = grid, file-open = split) ------- */

/* BROWSE MODE (default): pane hidden, items fill full width */
.res-viewer { display: block; }
.res-pane { display: none; }

/* FILE-OPEN MODE: split layout — narrow list left, viewer right */
.res-viewer.file-open { display: grid; grid-template-columns: 300px 1fr;
  gap: 16px; align-items: start; }
.res-viewer.file-open .res-pane { display: block; }
.res-viewer.file-open .res-files { max-height: 82vh; overflow-y: auto; }

/* Shared file list */
.res-files { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }

/* File items — same in both modes */
.res-file { display: grid; grid-template-columns: 26px 1fr auto; gap: 3px 8px;
  align-items: center; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 13px; cursor: pointer; transition: .15s; }
.res-file:hover { border-color: var(--purple-bright); transform: translateY(-1px); }
.res-file.active { border-color: var(--purple-bright);
  box-shadow: 0 0 0 2px rgba(107,63,160,.18); background: var(--cream); }
.res-file .fi { font-size: 1.1rem; grid-row: span 2; }
.res-file .fn { font-weight: 700; color: var(--ink); font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-file .fm { grid-column: 2; color: var(--grey); font-size: .76rem; }
.res-newtab { grid-column: 3; grid-row: 1 / 3; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; color: var(--grey);
  font-size: .85rem; text-decoration: none; flex-shrink: 0;
  transition: background .15s, color .15s; }
.res-newtab:hover { background: var(--line); color: var(--purple-bright); }
/* In file-open mode: tighter */
.res-viewer.file-open .res-file { padding: 8px 11px; }

/* BROWSE MODE: folder items as wide cards in a responsive grid */
.res-viewer:not(.file-open) .res-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.res-folder { display: flex; align-items: flex-start; gap: 10px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: .15s;
  color: var(--ink); flex-direction: column; }
.res-folder:hover { border-color: var(--purple-bright); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.07); background: var(--cream); }
.res-folder .fi { font-size: 1.8rem; line-height: 1; }
.res-folder .fn { font-weight: 700; font-size: .95rem; line-height: 1.35;
  color: var(--ink); }
.res-folder .fc { font-size: .78rem; color: var(--grey); }

/* FILE-OPEN MODE: folder items compact rows */
.res-viewer.file-open .res-folder { flex-direction: row; align-items: center;
  padding: 9px 12px; gap: 8px; }
.res-viewer.file-open .res-folder .fi { font-size: 1.1rem; }
.res-viewer.file-open .res-folder .fn { font-size: .88rem; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-viewer.file-open .res-folder .fc { display: none; }

/* Viewer pane */
.res-pane { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; min-height: 82vh;
  position: sticky; top: 74px; }
.res-frame { width: 100%; height: 82vh; border: 0; display: block; }
#res-pane.res-dark-active iframe.res-frame { filter: invert(1) hue-rotate(180deg); }
.res-img-wrap { padding: 16px; text-align: center; }
.res-img-wrap img { max-width: 100%; border-radius: 10px; }
.res-pane-empty { text-align: center; color: var(--grey); padding: 70px 24px; }
.res-pane-empty span { font-size: 2.6rem; display: block; margin-bottom: 10px; }
.res-pane-empty b { color: var(--ink); display: block; font-size: 1.1rem;
  margin-bottom: 6px; }
.res-pane-empty .btn { margin-top: 14px; }

/* Breadcrumb bar */
.res-breadcrumb { display: flex; align-items: center; gap: 0;
  margin-bottom: 14px; background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 10px; overflow-x: auto; white-space: nowrap;
  font-size: .84rem; }
.res-breadcrumb:empty { display: none; }
.bc-back { background: var(--purple-bright); color: var(--white);
  border: none; border-radius: 7px; padding: 4px 12px 4px 9px;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  flex: none; margin-right: 8px; white-space: nowrap; }
.bc-back:hover { opacity: .85; }
.bc-seg { cursor: pointer; color: var(--purple-bright); font-weight: 600;
  padding: 2px 5px; border-radius: 6px; flex: none; }
.bc-seg:hover { background: rgba(107,63,160,.1); }
.bc-seg.bc-cur { color: var(--grey-dark, #555); cursor: default;
  font-weight: 500; }
.bc-seg.bc-cur:hover { background: none; }
.bc-sep { color: var(--grey); padding: 0 2px; user-select: none; }

@media (max-width: 820px) {
  .res-viewer.file-open { grid-template-columns: 1fr; }
  .res-viewer.file-open .res-pane { position: static; min-height: 60vh; }
  .res-frame { height: 60vh; }
  .res-viewer:not(.file-open) .res-files {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ---- Resources: filter tabs + richer cards (2026-07-24 redesign) -------- */
.res-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 24px; }
.res-tab { border: 1px solid var(--line); background: var(--white); color: var(--ink);
  border-radius: 999px; padding: 9px 20px; font-weight: 700; font-size: .9rem;
  cursor: pointer; transition: .15s; }
.res-tab:hover { border-color: var(--purple-bright); transform: translateY(-1px); }
.res-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.res-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px; }
.res-card { display: flex; flex-direction: column; padding: 22px 22px 20px;
  border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none;
  color: var(--ink); background: var(--white); min-height: 214px;
  transition: transform .18s, box-shadow .18s; }
.res-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.11); }
.res-card-top { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; }
.res-icon { font-size: 2rem; line-height: 1; }
.res-count { font-size: .76rem; font-weight: 800; background: rgba(0,0,0,.07);
  padding: 4px 11px; border-radius: 999px; }
.res-card h3 { font-family: 'Hanken Grotesk', sans-serif; font-size: 1.18rem;
  margin: 0 0 7px; color: inherit; }
.res-card p { margin: 0; font-size: .9rem; color: inherit; opacity: .82; flex: 1;
  line-height: 1.5; }
.res-card-foot { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 16px; }
.res-badge { font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.6); }
.res-open { font-weight: 800; font-size: .92rem; white-space: nowrap; }
.res-card.tint-blue   { background: var(--blue);   border-color: var(--blue-line);   color: var(--blue-ink); }
.res-card.tint-green  { background: var(--green);  border-color: var(--green-line);  color: var(--green-ink); }
.res-card.tint-orange { background: var(--orange); border-color: var(--orange-line); color: var(--orange-ink); }
.res-card.tint-lav    { background: var(--lav);    border-color: var(--lav-line);    color: var(--lav-ink); }
.res-card.tint-pink   { background: var(--pink);   border-color: var(--pink-line);   color: var(--pink-ink); }
.res-card.tint-teal   { background: var(--teal);   border-color: var(--teal-line);   color: var(--teal-ink); }
.res-card.tint-yellow { background: var(--yellow); border-color: var(--yellow-line); color: var(--yellow-ink); }

/* ---- Coming Soon frosted overlay (AI Tutor & Photo Solver) --------------- */
.coming-soon-wrapper {
  position: relative !important;
  min-height: 520px;
  height: 520px;
  overflow: hidden;
}
.coming-soon-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(253, 249, 243, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--radius-lg);
}
.cs-card {
  max-width: 480px;
  text-align: center;
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 56px rgba(26,26,46,.14);
  border: 2px solid;
  transition: transform .25s ease;
}
.cs-card:hover { transform: translateY(-3px); }
.cs-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--lav-ink);
  color: #fff;
  margin-bottom: 16px;
}
.cs-card h2 {
  font-size: 1.85rem;
  margin-bottom: 12px;
  font-family: "Archivo", sans-serif;
}
.cs-card p {
  font-size: 0.96rem;
  line-height: 1.6;
  margin-bottom: 24px;
  opacity: .9;
}

/* ---- Topical generator: search + live summary (2026-07-24) -------------- */
.topic-search { width: 100%; margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--page);
  color: var(--ink); font: inherit; font-size: .95rem; }
.topic-search:focus { outline: none; border-color: var(--purple-bright); }

.gen-summary { background: var(--cream); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 16px; margin: 4px 0 14px; font-size: .95rem;
  color: var(--ink); line-height: 1.5; }
.gen-summary .muted { color: var(--grey); }
.actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Topical generator: board-grouped subject picker — column layout ------- */
/* Board label sits on its own line, pills flow in a row below it */
.subject-groups { display: flex; flex-direction: column; gap: 20px; }
.subject-group { display: flex; flex-direction: column; gap: 10px; }
.subject-group + .subject-group { padding-top: 16px; border-top: 1px solid var(--line); }
.subject-group-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  align-self: flex-start;
  /* O Level default — overridden per board below */
  background: var(--lav); color: var(--lav-ink);
}
.subject-group-label::before { content: ''; display: none; }
.subject-group[data-board*="igcse"] .subject-group-label {
  background: var(--green); color: var(--green-ink); }
.subject-group[data-board*="a-level"] .subject-group-label {
  background: var(--blue); color: var(--blue-ink); }
/* pills wrap naturally, so no special mobile override needed */

/* ---- Download progress bar -------------------------------------------- */
.progress-wrap { height: 6px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin: 14px 0 2px; }
.progress-bar { height: 100%; width: 0%; border-radius: 999px;
  background: var(--ink); transition: width .25s linear; }
.progress-bar.indeterminate { width: 35% !important;
  animation: prog-slide 1.3s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes prog-slide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ---- Chemistry subject cards ------------------------------------------- */
.subject-card.chem { border-left-color: var(--teal-ink); }
.subject-card.chem:hover { background: var(--teal-ink);
  box-shadow: 0 14px 36px rgba(18,112,106,.28); border-color: var(--teal-ink); }
.subject-card.chem .code { color: var(--teal-ink); }

/* ---- Islamiyat cards (gold/orange) ------------------------------------- */
.subject-card.islam { border-left-color: var(--orange-ink); }
.subject-card.islam:hover { background: var(--orange-ink) !important;
  box-shadow: 0 14px 36px rgba(176,84,28,.28) !important; border-color: var(--orange-ink) !important; }
.subject-card.islam .code { color: var(--orange-ink); }

/* ---- Pakistan Studies cards (green) ------------------------------------ */
.subject-card.pak { border-left-color: #16704A; }
.subject-card.pak:hover { background: #16704A !important;
  box-shadow: 0 14px 36px rgba(22,112,74,.28) !important; border-color: #16704A !important; }
.subject-card.pak .code { color: #16704A; }

/* ---- Resources chip on subject cards ------------------------------------ */
.chip.res { background: var(--teal); color: var(--teal-ink);
  border: 1px solid var(--teal-line); }
.chip.res:hover { box-shadow: 0 4px 14px rgba(18,112,106,.22); }
.subject-card:hover .chip.res { background: rgba(255,255,255,.22);
  color: #fff; border-color: rgba(255,255,255,.35); }
.subject-links { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; }
.subject-links .comp-chips { flex-basis: 100%; margin-top: 2px; }

/* ---- Session / variant filter + keyword search (2026-07-26) -------------- */
.filter-grid { display: flex; flex-wrap: wrap; gap: 18px 32px; }
/* Flex items default to min-width:auto, so each column refused to shrink below
   its widest pill row and pushed the whole page 10px wider than a 375px phone.
   Letting them shrink is what lets the pills inside wrap instead. */
.filter-grid > div { min-width: 0; max-width: 100%; }
.filter-sub-label { font-size: .78rem; font-weight: 700; color: var(--grey);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.filter-pill { padding: 7px 16px; font-size: .88rem; }
.filter-pill.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.filter-pill.active:hover { background: var(--purple-bright); border-color: var(--purple-bright); }
.field-opt { font-weight: 400; color: var(--grey); font-size: .8rem; }

/* ---- Subtopic expansion panel -------------------------------------------- */
.topic-wrapper { display: contents; }
.subtopic-toggle { margin-left: 6px; background: none; border: none; cursor: pointer;
  color: var(--grey); font-size: .88rem; line-height: 1; padding: 2px 4px;
  border-radius: 4px; transition: color .15s, background .15s; flex-shrink: 0; }
.subtopic-toggle:hover { color: var(--purple); background: var(--lav); }
.subtopic-toggle.open { color: var(--purple-bright); }
.topic.on .subtopic-toggle { color: var(--green-ink); }
.topic.on .subtopic-toggle:hover { color: var(--lav-ink); background: rgba(255,255,255,.35); }

.subtopic-panel { background: var(--cream); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 14px 14px; padding: 12px 14px 14px;
  margin-bottom: 8px; animation: panel-in .18s ease; grid-column: 1 / -1; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.subtopic-note { font-size: .79rem; color: var(--grey); margin-bottom: 10px; }

.subtopic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.subtopic-item { display: flex; align-items: flex-start; gap: 7px; padding: 6px 10px;
  border-radius: 9px; cursor: pointer; transition: background .15s; font-size: .875rem;
  line-height: 1.4; border: 1px solid transparent; }
.subtopic-item:hover { background: var(--lav); border-color: var(--lav-line); }
.subtopic-item input[type="checkbox"] { accent-color: var(--purple-bright); margin-top: 2px;
  flex-shrink: 0; width: 14px; height: 14px; }
.subtopic-item:has(input:checked) { background: var(--lav); border-color: var(--lav-line);
  color: var(--lav-ink); font-weight: 600; }
.subtopic-item .n { margin-left: auto; color: var(--grey); font-size: .75rem;
  flex-shrink: 0; padding-left: 6px; }

/* Summary filter badges */
.filter-badge { display: inline-block; background: var(--lav); color: var(--lav-ink);
  border-radius: 999px; padding: 1px 9px; font-size: .82rem; font-weight: 600;
  margin: 0 1px; white-space: nowrap; }

/* Topics grid */
#topics { display: block; }
#topics .topic-wrapper { display: flex; flex-direction: column; margin-bottom: 6px; }
#topics .topic {
  width: 100%; border-radius: 12px; min-height: 46px;
  align-items: center; /* already in .topic but ensure it's set */
}
#topics .topic > span:first-of-type { flex: 1; min-width: 0; }
#topics .topic-wrapper:has(.subtopic-panel:not([hidden])) .topic {
  border-radius: 14px 14px 0 0; border-bottom-color: var(--cream); }

@media (min-width: 580px) {
  #topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    align-items: start;
  }
  #topics .topic-wrapper { margin-bottom: 0; }
  #topics .topic-wrapper:has(.subtopic-panel:not([hidden])) { grid-column: 1 / -1; }
}

/* ---- Feedback widget ---------------------------------------------------- */
.fb-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 900; display: flex; align-items: center;
}
.fb-tab-btn {
  writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg);
  background: var(--navy); color: #fff; border: none;
  padding: 14px 10px; font: 600 .78rem/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .06em; cursor: pointer; border-radius: 10px 0 0 10px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: -2px 0 14px rgba(0,0,0,.14);
  transition: background .2s, box-shadow .2s;
}
.fb-tab-btn:hover { background: var(--purple-bright); }
.fb-tab-btn svg { transform: rotate(180deg); }

.fb-panel {
  position: fixed; right: -400px; top: 50%; transform: translateY(-50%);
  width: 360px; max-height: 90vh; overflow-y: auto;
  background: var(--page); border: 1.5px solid var(--line);
  border-radius: 18px 0 0 18px; box-shadow: -6px 0 40px rgba(0,0,0,.13);
  padding: 26px 24px; z-index: 901;
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.fb-panel.open { right: 0; }
.fb-panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.fb-panel-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.fb-panel-head p  { font-size: .8rem; color: var(--grey); margin: 4px 0 0; }
.fb-close { background: none; border: none; cursor: pointer; color: var(--grey);
  font-size: 1.4rem; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.fb-close:hover { background: var(--line); color: var(--ink); }

.fb-stars { display: flex; gap: 6px; margin-bottom: 16px; }
.fb-star { font-size: 1.5rem; cursor: pointer; line-height: 1; color: var(--line);
  transition: color .15s, transform .15s; }
.fb-star.lit { color: var(--gold); }
.fb-star:hover { transform: scale(1.15); }

.fb-field { margin-bottom: 14px; }
.fb-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--grey);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.fb-field textarea, .fb-field input[type="text"] {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 10px 13px; font: .9rem "Hanken Grotesk", sans-serif;
  color: var(--ink); background: #fff; resize: none; transition: border-color .15s;
  box-sizing: border-box;
}
.fb-field textarea:focus, .fb-field input[type="text"]:focus {
  outline: none; border-color: var(--purple-bright); }
.fb-submit { width: 100%; padding: 11px; background: var(--navy); color: #fff;
  border: none; border-radius: 10px; font: 600 .9rem "Hanken Grotesk", sans-serif;
  cursor: pointer; transition: background .2s; }
.fb-submit:hover { background: var(--purple-bright); }
.fb-thanks { text-align: center; padding: 20px 0; }
.fb-thanks .fb-thanks-icon { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.fb-thanks h4 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.fb-thanks p  { font-size: .85rem; color: var(--grey); margin: 0; }
.fb-type-tabs { display: flex; border-bottom: 1.5px solid var(--line); margin-bottom: 18px; }
.fb-type-tab {
  flex: 1; padding: 9px 0; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1.5px; font: 600 .82rem "Hanken Grotesk", sans-serif; color: var(--grey);
  cursor: pointer; letter-spacing: .02em; text-transform: uppercase; transition: color .15s, border-color .15s;
}
.fb-type-tab:hover { color: var(--ink); }
.fb-type-tab.active { color: var(--navy); border-bottom-color: var(--navy); }

/* ---- Resources search ---------------------------------------------------- */
.res-loading {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 80px 24px; font-size: 1rem; color: var(--grey); font-weight: 500;
}
.res-spin {
  display: inline-block; font-size: 1.6rem;
  animation: hourSpin 1.4s linear infinite;
  transform-origin: center;
}
@keyframes hourSpin { to { transform: rotate(360deg); } }

.res-search-wrap {
  max-width: 640px; margin: 0 auto 40px; text-align: center;
}
.res-search-inner {
  position: relative; display: flex; align-items: center;
}
.res-search-icon {
  position: absolute; left: 18px; color: var(--grey); pointer-events: none;
  flex-shrink: 0;
}
.res-search {
  width: 100%; padding: 16px 20px 16px 52px;
  border: 2px solid var(--line); border-radius: 16px;
  font: 1rem "Hanken Grotesk", sans-serif; color: var(--ink);
  background: var(--white); box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
}
.res-search::placeholder { color: #aaa; }
.res-search:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(76,46,114,.10), 0 2px 16px rgba(0,0,0,.08);
}
.res-search-hints {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin-top: 12px;
}
.res-hint-label {
  font-size: .8rem; color: var(--grey); font-weight: 600; letter-spacing: .03em;
}
.res-hint-chip {
  font-size: .8rem; font-weight: 600; color: var(--purple-bright);
  background: rgba(107,63,160,.08); border: 1.5px solid rgba(107,63,160,.18);
  padding: 4px 12px; border-radius: 20px; cursor: pointer;
  transition: background .14s, border-color .14s;
  font-family: "Hanken Grotesk", sans-serif;
}
.res-hint-chip:hover {
  background: rgba(107,63,160,.15); border-color: rgba(107,63,160,.35);
}
/* ---- Search results ------------------------------------------------------- */
.res-search-result {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
  margin-bottom: 16px; overflow: hidden;
}
.res-search-cat-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: var(--cream); text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line); transition: background .15s;
}
.res-search-cat-head:hover { background: var(--line); }
.res-search-cat-name { font-weight: 700; font-size: .95rem; }
.res-search-files { list-style: none; margin: 0; padding: 0; }
.res-search-files .res-file { padding: 9px 18px; cursor: pointer; transition: background .12s;
  text-decoration: none; color: inherit; border: none; border-radius: 0; background: none;
  transform: none; box-shadow: none; }
.res-search-files .res-file:hover { background: var(--cream); transform: none; }
.res-search-files .res-file .res-newtab { display: none; }
.res-search-path { color: var(--grey); font-size: .78rem; }
.res-search-more { padding: 8px 18px; font-size: .8rem; color: var(--grey); font-style: italic; }

/* ---- Subject request section ------------------------------------------- */
.subject-request {
  background: var(--cream); border: 1.5px solid var(--line); border-radius: 20px;
  padding: 40px 44px; margin: 48px auto; max-width: 740px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px;
}
.subject-request h2 { font-size: 1.45rem; margin: 0 0 6px; color: var(--ink); }
.subject-request p  { color: var(--grey); font-size: .93rem; margin: 0 0 22px; max-width: 480px; }
.subject-request-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.subject-request-form input[type="text"] {
  flex: 1; min-width: 200px; padding: 11px 16px; border: 1.5px solid var(--line);
  border-radius: 10px; font: .95rem "Hanken Grotesk", sans-serif; color: var(--ink);
  background: #fff; box-sizing: border-box;
}
.subject-request-form input:focus { outline: none; border-color: var(--purple-bright); }
.subject-request-status { font-size: .85rem; color: var(--grey); min-height: 1.2em; }
.subject-request-status.ok  { color: var(--green-ink); font-weight: 600; }
.subject-request-status.err { color: #c33; }
@media (max-width: 600px) {
  .subject-request { padding: 28px 20px; }
  .subject-request-form { flex-direction: column; }
  .subject-request-form input[type="text"] { min-width: 0; }
  .fb-panel { width: calc(100vw - 16px); right: -100vw; border-radius: 16px 0 0 16px; }
  .fb-panel.open { right: 0; }
  .bk-panel { width: calc(100vw - 16px); right: calc(-100vw + 16px); border-radius: 16px 0 0 16px; }
  .bk-panel.open { right: 0; }
}


/* ==========================================================================
   STUDENT PORTAL
   Auth pages, account menu, revision tracker, dashboard, teachers.
   Shares the site's warm-cream identity - no dark theme, deliberately.
   ========================================================================== */

/* ============ account menu (navbar, signed in) ============ */
.account-menu { position: relative; }
.account-trigger {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 5px 14px 5px 5px; color: var(--ink);
  font: 600 .9rem "Hanken Grotesk", sans-serif;
  transition: border-color .2s, box-shadow .25s;
}
.account-trigger:hover { border-color: var(--purple-bright);
  box-shadow: 0 4px 16px rgba(76,46,114,.12); }
.account-trigger svg { color: var(--grey); transition: transform .2s; }
.account-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.account-avatar { width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; display: grid; place-items: center; flex: none; }
.account-initials { background: var(--lav); color: var(--lav-ink);
  font: 700 .8rem "Archivo", sans-serif; letter-spacing: .02em; }
.account-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

.account-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 208px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 8px; display: flex; flex-direction: column;
  box-shadow: 0 14px 40px rgba(26,26,46,.14); z-index: 60;
}
.account-dropdown a,
.account-dropdown button {
  text-align: left; text-decoration: none; background: none; border: 0;
  cursor: pointer; color: var(--ink); border-radius: 10px; padding: 9px 12px;
  font: 600 .9rem "Hanken Grotesk", sans-serif; transition: background .15s;
}
.account-dropdown a:hover,
.account-dropdown button:hover { background: var(--cream); }
.account-logout { color: #b3261e !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 0 10px 10px !important; margin-top: 4px; padding-top: 12px !important; }

/* ============ notification bell ============ */
.notif-wrap { position: relative; display: flex; align-items: center; }
.notif-btn { position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  transition: border-color .2s, box-shadow .25s, color .2s; }
.notif-btn:hover { border-color: var(--purple-bright);
  color: var(--purple-bright); box-shadow: 0 4px 16px rgba(76,46,114,.12); }
.notif-wrap.has-unread .notif-btn { border-color: var(--gold); }
/* A quiet pulse the first time only — enough to catch the eye, not enough to
   nag a student who has already seen it. */
.notif-wrap.has-unread .notif-btn svg { animation: notif-ring .9s ease 1; }
@keyframes notif-ring {
  0%,100% { transform: rotate(0); } 20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); }
}
.notif-dot { position: absolute; top: -3px; right: -3px; min-width: 17px;
  height: 17px; padding: 0 4px; border-radius: 99px; background: var(--pink-ink);
  color: #fff; font: 800 .62rem "Archivo", sans-serif;
  display: grid; place-items: center; border: 2px solid var(--page); }

.notif-panel { position: absolute; top: calc(100% + 10px); right: 0;
  width: min(360px, calc(100vw - 32px)); background: #fff;
  border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(26,26,46,.16); z-index: 61; }
.notif-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--cream); }
.notif-head b { font-family: "Archivo", sans-serif; font-size: .86rem; }
.notif-head a { font-size: .76rem; color: var(--purple-bright); text-decoration: none; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-empty { font-size: .84rem; color: var(--grey); padding: 22px 16px;
  text-align: center; margin: 0; }

.notif-item { display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2, #F2ECE2);
  text-decoration: none; color: var(--ink); transition: background .14s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--cream); }
.notif-item.is-new { background: #FDF7E8; }
.notif-item.is-new:hover { background: #FBF1D8; }
.notif-item.is-done { opacity: .55; }
.notif-ic { font-size: 1rem; line-height: 1.3; flex: none; }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-body b { font-size: .83rem; font-weight: 700; line-height: 1.35; }
.notif-body em { font-style: normal; font-size: .75rem; color: var(--grey);
  margin-top: 1px; }
.notif-time { flex: none; font-size: .68rem; color: var(--faint, #B4AEC0);
  white-space: nowrap; padding-top: 2px; }

/* ============ auth pages ============ */
.auth-page {
  max-width: 1060px; margin: 0 auto; padding: 52px 22px 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 48px; align-items: start;
}
.auth-page-single { grid-template-columns: minmax(0, 620px); justify-content: center; }

.auth-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px 36px; box-shadow: 0 18px 50px rgba(26,26,46,.06);
}
.auth-card-wide { padding: 40px 42px; }
.auth-head { margin-bottom: 24px; }
.auth-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); color: var(--purple);
  margin-bottom: 8px; text-wrap: balance; }
.auth-head .eyebrow { margin-bottom: 10px; }
.auth-sub { color: var(--grey); font-size: .95rem; max-width: 46ch; }

.auth-alert {
  background: #FDECEA; border: 1.5px solid #F3C0BA; color: #A32217;
  border-radius: 12px; padding: 11px 15px; font-size: .9rem; font-weight: 600;
  margin-bottom: 18px;
}
.auth-alert.ok { background: var(--green); border-color: var(--green-line);
  color: var(--green-ink); }

/* Google button follows Google's own brand guidance: white, neutral border. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; background: #fff; border: 1.5px solid #DADCE0; border-radius: 999px;
  padding: 12px 20px; text-decoration: none; color: #3C4043;
  font: 600 .95rem "Hanken Grotesk", sans-serif;
  transition: background .18s, box-shadow .25s, border-color .18s;
}
.btn-google:hover { background: #F8F9FA; border-color: #C6C9CE;
  box-shadow: 0 3px 14px rgba(60,64,67,.14); }
.btn-google svg { flex: none; }

.auth-divider { display: flex; align-items: center; gap: 14px;
  margin: 22px 0; color: var(--grey); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; }
.auth-field > span,
.auth-field > legend {
  font: 600 .85rem "Hanken Grotesk", sans-serif; color: var(--ink);
  letter-spacing: .01em; padding: 0;
}
.auth-field em { font-style: normal; font-weight: 500; color: var(--grey); }
/* Radios and checkboxes inside a fieldset.auth-field are visually hidden and
   styled through their sibling span, so they must not pick up the text-input
   sizing - at width:100% they stretched to the form width and, being
   absolutely positioned, pushed the page into horizontal scroll. */
.auth-field input:not([type="radio"]):not([type="checkbox"]),
.auth-field select {
  width: 100%; padding: 11px 15px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--page); color: var(--ink);
  font: .95rem "Hanken Grotesk", sans-serif;
  transition: border-color .18s, box-shadow .25s, background .18s;
}
.auth-field input:not([type="radio"]):not([type="checkbox"]):focus,
.auth-field select:focus {
  outline: none; background: #fff; border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px rgba(107,63,160,.14);
}
.auth-field input::placeholder { color: #A7A2B4; }
.field-hint { color: var(--grey); font-size: .8rem; line-height: 1.45; }

.auth-choice { gap: 10px; }
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.choice { flex: 1; min-width: 108px; cursor: pointer; position: relative; }
.choice input { position: absolute; width: 1px; height: 1px; margin: 0;
  padding: 0; opacity: 0; pointer-events: none; }
.choice span {
  display: block; text-align: center; padding: 11px 12px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--page);
  font: 600 .9rem "Hanken Grotesk", sans-serif; color: var(--ink);
  transition: border-color .18s, background .18s, color .18s;
}
.choice:hover span { border-color: var(--purple-bright); }
.choice input:checked + span { background: var(--lav); border-color: var(--lav-line);
  color: var(--lav-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--purple-bright);
  outline-offset: 2px; }

.auth-submit { width: 100%; margin-top: 4px; padding: 13px 24px; }
.auth-switch { margin-top: 20px; text-align: center; font-size: .9rem;
  color: var(--grey); }

/* ── Role picker (register flow) ─────────────────────────────── */
.auth-role-wrap { display: flex; flex-direction: column; gap: 10px; }
.auth-role-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey);
  font-family: "Archivo", sans-serif;
}
.auth-role-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-role-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 14px 10px 12px;
  background: var(--cream); border: 2px solid var(--line);
  border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: "Hanken Grotesk", sans-serif; text-align: center;
}
.auth-role-btn:hover { border-color: var(--purple); }
.auth-role-btn.active {
  border-color: var(--purple); background: rgba(106,57,198,.07);
  box-shadow: 0 0 0 3px rgba(106,57,198,.12);
}
.auth-role-ico { font-size: 1.5rem; line-height: 1; }
.auth-role-name {
  font-size: .9rem; font-weight: 700; color: var(--navy);
  margin-top: 4px;
}
.auth-role-sub { font-size: .76rem; color: var(--grey); }
.auth-teacher-note {
  font-size: .8rem; color: var(--grey); text-align: center; margin: 0;
}
.auth-teacher-note a { color: var(--purple-bright); font-weight: 600; }
.linklike { background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--purple-bright); font: 600 .9rem "Hanken Grotesk", sans-serif;
  text-decoration: underline; text-underline-offset: 3px; }
.linklike:hover { color: var(--purple); }

/* the marketing column beside the sign-in card */
.auth-aside { padding-top: 14px; }
.auth-aside h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--purple);
  margin-bottom: 24px; text-wrap: balance; }
.auth-aside h2 em { font-style: italic; color: var(--gold); }
.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.auth-perks li { padding-left: 18px; border-left: 2.5px solid var(--gold);
  color: var(--grey); font-size: .92rem; line-height: 1.6; }
.auth-perks strong { display: block; color: var(--ink); font-weight: 700;
  font-size: .97rem; margin-bottom: 3px; }
.auth-aside-foot { margin-top: 26px; font-size: .85rem; color: var(--grey);
  padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .auth-page { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 34px; }
  .auth-aside { order: -1; padding-top: 0; }
  .auth-perks { display: none; }
  .auth-aside-foot { display: none; }
  .auth-card { padding: 30px 22px; }
  .auth-card-wide { padding: 30px 22px; }
  .auth-row { grid-template-columns: 1fr; }
  .account-name { display: none; }
}

/* ============ teachers ============ */
.teacher-grid { display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.teacher-loading { color: var(--grey); font-size: .93rem; grid-column: 1 / -1;
  text-align: center; padding: 30px 0; }

.teacher-card { border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; background: #fff; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .3s ease; }
.teacher-card:hover { transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(26,26,46,.1); }
.teacher-card h3 { font-size: 1.12rem; color: var(--ink); margin-bottom: 3px; }
.teacher-portrait { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 16px;
  overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.65);
  border: 2px solid rgba(255,255,255,.9); }
.teacher-portrait img { width: 100%; height: 100%; object-fit: cover; }
.teacher-initials { font: 800 1.5rem "Archivo", sans-serif; color: var(--ink); opacity: .5; }
.teacher-role { font-size: .8rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.teacher-bio { font-size: .9rem; color: var(--grey); line-height: 1.6; margin-bottom: 16px; }
.teacher-subjects { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.teacher-pill { font-size: .74rem; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; background: rgba(255,255,255,.7); color: var(--ink); }
.teacher-pill-more { opacity: .65; }
.teacher-quals { font-size: .8rem; color: var(--grey); margin-top: auto;
  padding-top: 13px; border-top: 1px solid rgba(0,0,0,.07); }

/* tints reused from the pastel card system */
.teacher-card.tint-lav    { background: var(--lav);    border-color: var(--lav-line); }
.teacher-card.tint-green  { background: var(--green);  border-color: var(--green-line); }
.teacher-card.tint-blue   { background: var(--blue);   border-color: var(--blue-line); }
.teacher-card.tint-pink   { background: var(--pink);   border-color: var(--pink-line); }
.teacher-card.tint-orange { background: var(--orange); border-color: var(--orange-line); }
.teacher-card.tint-teal   { background: var(--teal);   border-color: var(--teal-line); }

/* ---- apply to teach ---- */
.apply-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 44px; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: 40px; align-items: start; }
.apply-intro p { color: var(--grey); font-size: .93rem; line-height: 1.65; }
.apply-intro .section-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.apply-points { list-style: none; margin: 20px 0; display: flex;
  flex-direction: column; gap: 10px; }
.apply-points li { position: relative; padding-left: 26px; font-size: .9rem;
  color: var(--ink); }
.apply-points li::before { content: "\2713"; position: absolute; left: 0; top: -1px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--green);
  color: var(--green-ink); font-size: .68rem; font-weight: 800;
  display: grid; place-items: center; }
.apply-note { font-size: .84rem !important; padding-top: 16px;
  border-top: 1px solid var(--line); }

.apply-form { display: flex; flex-direction: column; gap: 16px; }
.apply-form textarea { width: 100%; padding: 11px 15px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--page); color: var(--ink); resize: vertical;
  font: .95rem "Hanken Grotesk", sans-serif; line-height: 1.55;
  transition: border-color .18s, box-shadow .25s, background .18s; }
.apply-form textarea:focus { outline: none; background: #fff;
  border-color: var(--purple-bright); box-shadow: 0 0 0 3px rgba(107,63,160,.14); }

.subject-checks { display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.subject-check { cursor: pointer; position: relative; }
.subject-check input { position: absolute; width: 1px; height: 1px; margin: 0;
  padding: 0; opacity: 0; pointer-events: none; }
.subject-check span { display: block; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--page); font-size: .84rem;
  font-weight: 600; transition: background .16s, border-color .16s, color .16s; }
.subject-check:hover span { border-color: var(--purple-bright); }
.subject-check input:checked + span { background: var(--lav);
  border-color: var(--lav-line); color: var(--lav-ink); }
.subject-check input:focus-visible + span { outline: 2px solid var(--purple-bright);
  outline-offset: 2px; }

.apply-done { text-align: center; padding: 30px 10px; }
.apply-done-mark { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--green); color: var(--green-ink); display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; }
.apply-done h3 { font-size: 1.2rem; margin-bottom: 8px; }
.apply-done p { color: var(--grey); font-size: .92rem; }
.apply-done-sub { margin-top: 8px; font-size: .84rem !important; }

@media (max-width: 860px) {
  .apply-panel { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 26px 22px; }
}

/* ============ revision mode ============ */
.revise-page { padding: 36px 22px 80px; }
.revise-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.revise-head .section-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 8px; }
.revise-sub { color: var(--grey); font-size: .94rem; max-width: 56ch; }
.revise-loading { color: var(--grey); font-size: .93rem; text-align: center; padding: 34px 0; }

.revise-subjects { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.revise-board-note { font-size: .8rem; color: var(--grey); margin-bottom: 22px; }
.revise-board-note strong { color: var(--ink); font-weight: 700; }
.revise-board-note a { color: var(--purple-bright); font-weight: 700;
  text-decoration: none; margin-left: 6px; }
.revise-board-note a:hover { text-decoration: underline; }
.revise-pill { position: relative; cursor: pointer; background: #fff;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 9px 16px;
  font: 700 .88rem "Hanken Grotesk", sans-serif; color: var(--ink);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  transition: border-color .18s, background .18s, box-shadow .25s; }
.revise-pill em { font-style: normal; font-weight: 500; font-size: .74rem; color: var(--grey); }
.revise-pill:hover { border-color: var(--purple-bright); }
.revise-pill.active { background: var(--lav); border-color: var(--lav-line);
  color: var(--lav-ink); box-shadow: 0 5px 18px rgba(76,46,114,.13); }
.revise-pill.active em { color: var(--lav-ink); opacity: .75; }
.revise-pill-dot { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold); }

.revise-summary { margin-bottom: 22px; }
.revise-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--line); margin-bottom: 9px; }
.revise-bar-fill { display: block; height: 100%; transition: width .35s ease; }
.revise-bar-confident { background: var(--green-ink); }
.revise-bar-learning  { background: var(--gold); }
.revise-summary-stats { display: flex; gap: 18px; flex-wrap: wrap;
  font-size: .84rem; color: var(--grey); }
.revise-summary-stats strong { color: var(--ink); font-size: .95rem; }
.dot-confident, .dot-learning, .dot-none { display: inline-flex; align-items: center; gap: 6px; }
.dot-confident::before, .dot-learning::before, .dot-none::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-confident::before { background: var(--green-ink); }
.dot-learning::before  { background: var(--gold); }
.dot-none::before      { background: var(--line); }

/* ---- topic rows ---- */
.topic-list { display: flex; flex-direction: column; gap: 9px; }
.topic-row { background: #fff; border: 1.5px solid var(--line);
  border-radius: 16px; overflow: hidden; transition: border-color .2s; }
.topic-row.status-is-confident { border-left: 4px solid var(--green-ink); }
.topic-row.status-is-learning  { border-left: 4px solid var(--gold); }

.topic-main { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 13px 18px; flex-wrap: wrap; }
.topic-toggle { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer; text-align: left; padding: 0;
  font: 600 .97rem "Hanken Grotesk", sans-serif; color: var(--ink); }
.topic-toggle:disabled { cursor: default; }
.topic-index { font: 800 .74rem "Archivo", sans-serif; color: var(--grey);
  opacity: .6; flex: none; font-variant-numeric: tabular-nums; }
.topic-name { flex: 1; }
.topic-count { font-size: .78rem; color: var(--grey); font-weight: 500; flex: none;
  font-variant-numeric: tabular-nums; }
.topic-chev { color: var(--grey); flex: none; transition: transform .22s ease; }
.topic-toggle.open .topic-chev { transform: rotate(180deg); }

.topic-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.status-seg { display: inline-flex; background: var(--page); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px; }
.status-btn { border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 5px 12px; font: 600 .78rem "Hanken Grotesk", sans-serif; color: var(--grey);
  white-space: nowrap; transition: background .16s, color .16s; }
.status-btn:hover { color: var(--ink); }
.status-btn.on.status-not_started { background: #fff; color: var(--ink); }
.status-btn.on.status-learning    { background: var(--yellow); color: var(--yellow-ink); }
.status-btn.on.status-confident   { background: var(--green);  color: var(--green-ink); }

.btn-quiz { border: 1.5px solid var(--purple-bright); background: transparent;
  color: var(--purple-bright); border-radius: 999px; cursor: pointer;
  padding: 7px 16px; font: 700 .8rem "Hanken Grotesk", sans-serif;
  white-space: nowrap; transition: background .18s, color .18s; }
.btn-quiz:hover { background: var(--purple-bright); color: #fff; }
.btn-quiz-sm { padding: 5px 12px; font-size: .74rem; }

.subtopic-list { border-top: 1px solid var(--line); background: var(--page); }
.subtopic-row { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 44px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.subtopic-row:last-child { border-bottom: 0; }
.subtopic-name { flex: 1; min-width: 160px; font-size: .89rem; color: var(--ink); }
.subtopic-count { font-size: .76rem; color: var(--grey); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .topic-main { align-items: flex-start; }
  .topic-actions { width: 100%; justify-content: space-between; }
  .status-btn { padding: 5px 9px; font-size: .74rem; }
  .subtopic-row { padding-left: 18px; }
}

/* ---- quiz panel ---- */
.quiz-overlay { position: fixed; inset: 0; z-index: 200; }
.quiz-backdrop { position: absolute; inset: 0; background: rgba(26,26,46,.5);
  backdrop-filter: blur(3px); }
.quiz-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--page); border-left: 1.5px solid var(--line);
  display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.2);
  animation: quiz-in .28s cubic-bezier(.22,.9,.3,1); }
@keyframes quiz-in { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .quiz-panel { animation: none; } }

.quiz-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line);
  background: #fff; }
.quiz-head h2 { font-size: 1.18rem; color: var(--purple); text-wrap: balance; }
.quiz-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.quiz-close { background: none; border: 0; cursor: pointer; font-size: 1.05rem;
  color: var(--grey); padding: 4px 8px; border-radius: 8px; flex: none; }
.quiz-close:hover { background: var(--cream); color: var(--ink); }

.quiz-body { flex: 1; overflow-y: auto; padding: 24px 26px 34px;
  display: flex; flex-direction: column; gap: 18px; }
/* Flex children shrink by default, so a long question was squashed and clipped
   instead of making the panel scroll. Nothing in here may shrink. */
.quiz-body > * { flex: none; }

.quiz-loading, .quiz-error { text-align: center; padding: 50px 20px; color: var(--grey); }
.quiz-error p { margin-bottom: 16px; }
.quiz-spinner { display: inline-block; width: 26px; height: 26px; margin-bottom: 14px;
  border: 2.5px solid var(--line); border-top-color: var(--purple-bright);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .quiz-spinner { animation-duration: 2.4s; } }

.quiz-question { background: #fff; border: 1.5px solid var(--line);
  border-radius: 16px; padding: 22px; position: relative; }
.quiz-question p { font-size: .98rem; line-height: 1.7; }
.quiz-marks { display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--lav-ink);
  background: var(--lav); padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; }

.quiz-answer-field textarea { width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--ink); resize: vertical; line-height: 1.6;
  font: .95rem "Hanken Grotesk", sans-serif;
  transition: border-color .18s, box-shadow .25s; }
.quiz-answer-field textarea:focus { outline: none; border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px rgba(107,63,160,.14); }

.quiz-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.quiz-actions .btn { flex: 1; min-width: 150px; text-align: center; }

.quiz-score { display: flex; align-items: baseline; justify-content: center; gap: 14px;
  border-radius: 18px; padding: 22px; }
.quiz-score-value { font: 800 2.6rem "Archivo", sans-serif; line-height: 1;
  font-variant-numeric: tabular-nums; }
.quiz-score-value em { font-style: normal; font-size: 1.3rem; opacity: .55; }
.quiz-score-label { font-size: .85rem; font-weight: 700; opacity: .75; }
.quiz-score-good { background: var(--green); color: var(--green-ink); }
.quiz-score-mid  { background: var(--yellow); color: var(--yellow-ink); }
.quiz-score-low  { background: var(--orange); color: var(--orange-ink); }

.quiz-block { background: #fff; border: 1.5px solid var(--line);
  border-radius: 16px; padding: 18px 20px; }
.quiz-block-muted { background: transparent; border-style: dashed; }
.quiz-block h3 { font-size: .76rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 9px; }
.quiz-block p { font-size: .93rem; line-height: 1.65; }

.quiz-ideal { background: var(--lav); border: 1.5px solid var(--lav-line);
  border-radius: 16px; padding: 16px 20px; }
.quiz-ideal summary { cursor: pointer; font-weight: 700; font-size: .9rem;
  color: var(--lav-ink); }
.quiz-ideal p { margin-top: 11px; font-size: .92rem; line-height: 1.65;
  color: var(--ink); }

@media (max-width: 620px) {
  .quiz-head { padding: 18px 18px 15px; }
  .quiz-body { padding: 18px 18px 28px; }
}

/* ============ dashboard ============ */
.dash-page { padding: 36px 22px 80px; }
.dash-greeting { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.dash-greeting .section-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 6px; }
.dash-sub { color: var(--grey); font-size: .94rem; }
.dash-loading { color: var(--grey); font-size: .9rem; padding: 18px 0; }

.dash-board-pill { display: inline-block; margin-top: 10px; padding: 5px 14px;
  border-radius: 999px; background: var(--lav); border: 1.5px solid var(--lav-line);
  color: var(--lav-ink); font-size: .76rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; }

.dash-streak { display: flex; flex-direction: column; align-items: center;
  background: var(--orange); border: 1.5px solid var(--orange-line);
  border-radius: 18px; padding: 12px 22px; color: var(--orange-ink); flex: none; }
.dash-streak-num { font: 800 1.7rem "Archivo", sans-serif; line-height: 1;
  font-variant-numeric: tabular-nums; }
.dash-streak-label { font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; margin-top: 3px; }

.dash-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-card { background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; }
.dash-card-wide { grid-column: 1 / -1; }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-card-head h2 { font-family: "Archivo", sans-serif; font-size: 1.02rem; }
.dash-card-note { font-size: .78rem; color: var(--grey); }

.dash-empty { background: var(--page); border: 1.5px dashed var(--line);
  border-radius: 16px; padding: 26px; text-align: center; color: var(--grey);
  font-size: .92rem; line-height: 1.6; }
.dash-empty strong { color: var(--ink); }
.dash-empty .btn { margin-top: 14px; }
.dash-empty-sm { padding: 20px; font-size: .88rem; }

/* ---- progress rings ---- */
.ring-row { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); }
.ring-card { display: flex; align-items: center; gap: 18px; text-decoration: none;
  color: inherit; border: 1.5px solid var(--line); border-radius: 18px; padding: 18px;
  background: var(--page); transition: transform .22s ease, box-shadow .28s, border-color .2s; }
.ring-card:hover { transform: translateY(-3px); border-color: var(--purple-bright);
  box-shadow: 0 12px 30px rgba(26,26,46,.09); }
.ring-wrap { position: relative; width: 80px; height: 80px; flex: none;
  display: grid; place-items: center; }
.progress-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--line); stroke-width: 8; }
.ring-fill { fill: none; stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.3,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .ring-fill { transition: none; } }
.ring-lav { stroke: #4A2E8F; } .ring-green { stroke: #16704A; }
.ring-blue { stroke: #14568C; } .ring-pink { stroke: #B0326E; }
.ring-orange { stroke: #B0541C; } .ring-teal { stroke: #12706A; }
.ring-pct { position: relative; font: 800 1.15rem "Archivo", sans-serif;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.ring-pct em { font-style: normal; font-size: .7rem; opacity: .55; }
.ring-meta { min-width: 0; }
.ring-meta h3 { font-size: .98rem; margin-bottom: 2px; }
.ring-board { font-size: .76rem; color: var(--grey); margin-bottom: 8px; }
.ring-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: .76rem;
  color: var(--grey); margin-bottom: 4px; }
.ring-total { font-size: .74rem; color: var(--grey); opacity: .8; }

/* ---- recent practice ---- */
.quiz-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.quiz-item { display: flex; align-items: center; gap: 13px; padding: 10px 13px;
  border: 1.5px solid var(--line); border-radius: 13px; background: var(--page); }
.quiz-item-score { width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font: 800 .95rem "Archivo", sans-serif;
  font-variant-numeric: tabular-nums; }
.quiz-item-good { background: var(--green); color: var(--green-ink); }
.quiz-item-mid  { background: var(--yellow); color: var(--yellow-ink); }
.quiz-item-low  { background: var(--orange); color: var(--orange-ink); }
.quiz-item-none { background: var(--line); color: var(--grey); }
.quiz-item-meta { min-width: 0; display: flex; flex-direction: column; }
.quiz-item-meta strong { font-size: .89rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.quiz-item-meta em { font-style: normal; font-size: .76rem; color: var(--grey); }

/* ---- quick actions ---- */
.dash-actions { display: flex; flex-direction: column; gap: 9px; }
.dash-action { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  border-radius: 14px; padding: 13px 16px; color: var(--ink);
  border: 1.5px solid transparent; transition: transform .18s ease, box-shadow .25s; }
.dash-action:hover { transform: translateX(3px); box-shadow: 0 8px 22px rgba(26,26,46,.08); }
.dash-action-title { font-weight: 700; font-size: .92rem; }
.dash-action-sub { font-size: .78rem; opacity: .75; }
.dash-action.tint-lav    { background: var(--lav);    border-color: var(--lav-line);
  color: var(--lav-ink); }
.dash-action.tint-green  { background: var(--green);  border-color: var(--green-line);
  color: var(--green-ink); }
.dash-action.tint-blue   { background: var(--blue);   border-color: var(--blue-line);
  color: var(--blue-ink); }
.dash-action.tint-orange { background: var(--orange); border-color: var(--orange-line);
  color: var(--orange-ink); }

/* ---- enrolment ---- */
.enrol-grid { display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.enrol-card { border: 1.5px solid var(--line); border-radius: 16px; padding: 18px;
  background: var(--page); display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s, background .2s; }
.enrol-card.on { background: var(--green); border-color: var(--green-line); }
.enrol-card-body { flex: 1; }
.enrol-card h3 { font-size: .96rem; margin-bottom: 3px; }
.enrol-board { font-size: .76rem; color: var(--grey); margin-bottom: 7px; }
.enrol-card.on .enrol-board, .enrol-card.on .enrol-count { color: var(--green-ink);
  opacity: .8; }
.enrol-count { font-size: .78rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.enrol-btn { width: 100%; text-align: center; padding: 9px 16px; font-size: .86rem; }
/* A subject kept from a previous board still needs to be removable, so it stays
   in the grid but is visibly not part of the current qualification. */
.enrol-card.off-board { border-style: dashed; }
.enrol-flag { margin-top: 7px; font-size: .72rem; line-height: 1.45;
  color: var(--orange-ink); }

/* ---- board switcher ---- */
.board-switch { margin-top: 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--yellow); border: 1.5px solid var(--yellow-line);
  border-radius: 18px; padding: 18px 20px; }
.board-switch-text { min-width: 0; }
.board-switch-title { font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: .95rem; color: var(--yellow-ink); margin-bottom: 3px; }
.board-switch-sub { font-size: .84rem; color: var(--yellow-ink); opacity: .9;
  line-height: 1.5; }
.board-switch-sub strong { font-weight: 800; }
.board-switch-btn { flex: none; padding: 9px 20px; font-size: .86rem;
  border-color: var(--yellow-ink); color: var(--yellow-ink); }
.board-switch-btn:hover { background: var(--yellow-ink); color: #fff; }

@media (max-width: 820px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-card { padding: 22px 18px; }
  .board-switch-btn { width: 100%; text-align: center; }
}


/* ============ homework: banner, dashboard card, homework page ============ */

/* Reminder banner. Shared by the dashboard and the homework page, so a student
   sees the same warning wherever they land. */
.hw-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-radius: 18px; padding: 16px 20px; margin-bottom: 22px;
  border: 1.5px solid transparent; }
.hw-banner-icon { font-size: 1.5rem; line-height: 1; flex: none; }
.hw-banner div { flex: 1; min-width: 180px; }
.hw-banner strong { display: block; font-size: .96rem; font-weight: 800; }
.hw-banner p { font-size: .84rem; opacity: .85; margin-top: 2px; }
.hw-banner .btn { flex: none; }
.hw-banner-late { background: var(--pink); border-color: var(--pink-line);
  color: var(--pink-ink); }
.hw-banner-late .btn { border-color: var(--pink-ink); color: var(--pink-ink); }
.hw-banner-late .btn:hover { background: var(--pink-ink); color: #fff; }
.hw-banner-soon { background: var(--yellow); border-color: var(--yellow-line);
  color: var(--yellow-ink); }
.hw-banner-soon .btn { border-color: var(--yellow-ink); color: var(--yellow-ink); }
.hw-banner-soon .btn:hover { background: var(--yellow-ink); color: #fff; }

/* ── Scheduled test announcement ─────────────────────────────────────────── */
.test-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-radius: 18px; padding: 16px 20px; margin-bottom: 14px;
  background: linear-gradient(135deg, #2E1B4A, #4A2E8F); color: #fff;
  border: 1.5px solid transparent; }
.test-banner.is-soon { background: linear-gradient(135deg, #7A2540, #B0326E); }
.test-banner-ico { font-size: 1.6rem; line-height: 1; flex: none; }
.test-banner-body { flex: 1; min-width: 180px; }
.test-banner-eyebrow { font-family: "Archivo", sans-serif; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 3px; }
.test-banner-body strong { display: block; font-size: 1.02rem; font-weight: 800; }
.test-banner-note { font-size: .82rem; opacity: .8; margin-top: 3px; }
.test-banner-when { flex: none; text-align: right; padding-right: 4px; }
.test-banner-when b { display: block; font-family: "Archivo", sans-serif;
  font-size: 1rem; font-weight: 800; }
.test-banner-when span { font-size: .74rem; opacity: .7;
  font-variant-numeric: tabular-nums; }
.test-banner-cta { flex: none; background: var(--gold); color: var(--navy);
  border-color: var(--gold); }
.test-banner-cta:hover { background: #fff; border-color: #fff; color: var(--navy); }

@media (max-width: 600px) {
  .test-banner { gap: 12px; padding: 14px 16px; }
  .test-banner-when { text-align: left; width: 100%; }
  .test-banner-cta { width: 100%; text-align: center; }
}

/* Dashboard mini-list */
.hw-mini { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hw-mini-item a { display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit; padding: 10px 13px; border-radius: 13px;
  border: 1.5px solid var(--line); background: var(--page);
  transition: transform .18s ease, border-color .2s; }
.hw-mini-item a:hover { transform: translateX(3px); border-color: var(--purple-bright); }
.hw-mini-item strong { font-size: .89rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.hw-mini-item em { font-style: normal; font-size: .76rem; color: var(--grey); }
.hw-mini-item.late a { background: var(--pink); border-color: var(--pink-line); }
.hw-mini-item.late em { color: var(--pink-ink); }
.hw-mini-item.soon a { background: var(--yellow); border-color: var(--yellow-line); }
.hw-mini-item.soon em { color: var(--yellow-ink); }
.dash-hw-all { display: block; text-align: center; margin-top: 12px;
  padding: 9px 16px; font-size: .85rem; }

/* Homework page */
.hw-count { display: flex; flex-direction: column; align-items: center;
  background: var(--pink); border: 1.5px solid var(--pink-line);
  border-radius: 18px; padding: 12px 22px; color: var(--pink-ink); flex: none; }
.hw-count-num { font: 800 1.7rem "Archivo", sans-serif; line-height: 1;
  font-variant-numeric: tabular-nums; }
.hw-count-label { font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; margin-top: 3px; }

.dash-page > .dash-card { margin-bottom: 20px; }
.hw-list { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hw-item { border: 1.5px solid var(--line); border-radius: 18px; padding: 20px;
  background: var(--page); display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, box-shadow .25s; }
.hw-item:hover { border-color: var(--purple-bright);
  box-shadow: 0 10px 26px rgba(26,26,46,.07); }
.hw-item.late { background: #FFF7FA; border-color: var(--pink-line); }
.hw-item.done { opacity: .74; }
.hw-item-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hw-kind { font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: var(--lav); color: var(--lav-ink);
  padding: 4px 10px; border-radius: 999px; }
.hw-subj { font-size: .74rem; color: var(--grey); }
.hw-when { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--grey); }
.hw-when.late { color: var(--pink-ink); }
.hw-when.soon { color: var(--yellow-ink); }
.hw-item h3 { font-size: 1.02rem; line-height: 1.3; }
.hw-what { font-size: .88rem; color: var(--grey); line-height: 1.6;
  white-space: pre-wrap; }
.hw-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.hw-chip { font-size: .72rem; font-weight: 700; background: var(--green);
  color: var(--green-ink); padding: 3px 10px; border-radius: 999px; }

.hw-files { display: flex; flex-direction: column; gap: 7px; }
.hw-file { display: flex; align-items: center; gap: 11px; text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 13px; padding: 10px 13px;
  background: #fff; color: inherit; text-align: left; width: 100%;
  font: inherit; cursor: pointer;
  transition: border-color .2s, transform .18s ease; }
.hw-file:hover { border-color: var(--purple-bright); transform: translateX(2px); }
.hw-file:disabled { opacity: .6; cursor: default; transform: none; }
.hw-file-ic { font-size: 1.1rem; flex: none; }
.hw-file span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hw-file span:last-child { font-size: .87rem; font-weight: 700; }
.hw-file em { font-style: normal; font-size: .74rem; font-weight: 500;
  color: var(--grey); }

/* Submission upload zone */
/* Two clearly separate halves of a homework card: what the tutor gave you,
   and what you sent back. Unlabelled, the two file lists were indistinguishable. */
.hw-block { margin-top: 12px; }
.hw-block-lbl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: "Archivo", sans-serif; font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 6px; }
.hw-block-lbl i { font-style: normal; letter-spacing: 0; text-transform: none;
  font-size: .72rem; font-weight: 500; color: var(--grey); }
.hw-block-from { color: var(--lav-ink, #4A2E8F); }
.hw-block-mine { color: var(--green-ink); }

.hw-submit { margin-top: 12px; display: flex; flex-direction: column; gap: 6px;
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--page); }
.hw-submit.has-subs { border-style: solid; border-color: #b2e3b9;
  background: #f7fdf8; }
.hw-nosub { font-size: .78rem; color: var(--grey); margin: 0; }
.hw-submitted-files { display: flex; flex-direction: column; gap: 6px; }
.hw-file-sub { background: #f3fbf4; border-color: #b2e3b9; }
.hw-file-sub:hover { border-color: #5cb87e; }
.hw-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hw-upload-label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  font-size: .84rem; font-weight: 700; color: var(--purple);
  border: 1.5px dashed var(--lav-line); background: var(--lav);
  transition: border-color .15s, background .15s;
}
.hw-upload-label:hover { border-color: var(--purple); background: #ece6ff; }
.hw-upload-icon { font-size: 1rem; }
.hw-file-input { display: none; }
.hw-upload-msg { font-size: .78rem; font-weight: 600; }
.hw-upload-msg.ok   { color: var(--green-ink); }
.hw-upload-msg.err  { color: #d93025; }

.hw-item-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 4px; }
.hw-item-foot .btn { padding: 8px 18px; font-size: .84rem; }
.hw-done-at { font-size: .76rem; color: var(--grey); }

/* Class log on the homework page */
.cls-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cls-item { display: flex; align-items: center; gap: 13px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 13px; background: var(--page); }
.cls-date { font-size: .78rem; color: var(--grey); flex: none;
  font-variant-numeric: tabular-nums; min-width: 118px; }
.cls-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cls-body strong { font-size: .89rem; }
.cls-body em { font-style: normal; font-size: .76rem; color: var(--grey); }
.cls-status { font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; flex: none; }
.cls-held .cls-status        { background: var(--green);  color: var(--green-ink); }
.cls-cancelled .cls-status   { background: var(--line);   color: var(--grey); }
.cls-missed .cls-status      { background: var(--pink);   color: var(--pink-ink); }
.cls-rescheduled .cls-status { background: var(--orange); color: var(--orange-ink); }

/* ============ revision mode: past-paper tracker ============ */

.revise-modes { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.revise-mode { cursor: pointer; background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 17px; font: 700 .85rem "Hanken Grotesk", sans-serif;
  color: var(--grey); transition: all .2s; }
.revise-mode:hover { border-color: var(--purple-bright); color: var(--ink); }
.revise-mode.on { background: var(--lav); border-color: var(--lav-ink);
  color: var(--lav-ink); }

.pap-summary { font-size: .88rem; color: var(--grey); margin-bottom: 14px; }
.pap-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Component filter — "have I done Paper 2?" is its own question. */
.pap-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pap-fbtn { display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 20px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.pap-fbtn span { font-size: .74rem; font-weight: 500; color: var(--grey);
  font-variant-numeric: tabular-nums; }
.pap-fbtn:hover { border-color: var(--purple-bright,#7c3aed); background: var(--cream); }
.pap-fbtn.on { background: var(--navy,#0B3D91); color: #fff;
  border-color: var(--navy,#0B3D91); }
.pap-fbtn.on span { color: rgba(255,255,255,.75); }

.pap-group[hidden] { display: none; }
.pap-group + .pap-group { margin-top: 6px; }
.pap-group-head { display: flex; align-items: center; gap: 8px;
  margin: 10px 0 4px; font-family: "Archivo", sans-serif; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.pap-group-head span { font-size: .68rem; letter-spacing: 0; color: var(--grey);
  background: var(--cream); border-radius: 20px; padding: 1px 8px; }
.pap-year[hidden] { display: none; }
.pap-year { border: 1.5px solid var(--line); border-radius: 16px; background: #fff;
  margin-bottom: 9px; overflow: hidden; }
.pap-year > summary { cursor: pointer; padding: 13px 17px; display: flex; gap: 12px;
  align-items: center; font-size: .9rem; list-style: none; }
.pap-year > summary::-webkit-details-marker { display: none; }
.pap-year > summary::after { content: "▾"; margin-left: auto; color: var(--grey);
  transition: transform .2s; }
.pap-year[open] > summary::after { transform: rotate(180deg); }
.pap-year > summary b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.pap-year > summary span { font-size: .78rem; color: var(--grey); }
.pap-rows { border-top: 1.5px solid var(--line); padding: 10px 17px 14px;
  display: flex; flex-direction: column; gap: 7px; }
.pap-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 4px 0; }
.pap-name { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.pap-name strong { font-size: .88rem; }
.pap-name em { font-style: normal; font-size: .76rem; color: var(--grey); }
.pap-seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 11px;
  overflow: hidden; flex: none; }
.pap-btn { cursor: pointer; background: #fff; border: none; padding: 7px 14px;
  font: 700 .77rem "Hanken Grotesk", sans-serif; color: var(--grey);
  border-right: 1px solid var(--line); transition: all .16s; white-space: nowrap; }
.pap-btn:last-child { border-right: none; }
.pap-btn:hover { background: var(--page); color: var(--ink); }
.pap-btn.on.pap-not_started { background: var(--line);   color: var(--grey); }
.pap-btn.on.pap-learning    { background: var(--orange); color: var(--orange-ink); }
.pap-btn.on.pap-confident   { background: var(--green);  color: var(--green-ink); }

.ring-papers { font-size: .74rem; color: var(--grey); margin-top: 5px; }

@media (max-width: 560px) {
  .hw-list { grid-template-columns: minmax(0, 1fr); }
  .cls-item { flex-wrap: wrap; }
  .cls-date { min-width: 0; }
  .pap-row { align-items: flex-start; }
}


/* ============ per-topic past-paper practice (revision mode) ============ */
/* Two independent axes per chapter: how well it's understood (.status-seg)
   and whether its past-paper questions have been drilled (.pp-seg-topic).
   Deliberately styled differently so they never read as one control. */

.pp-seg-topic { display: inline-flex; align-items: center; gap: 0;
  border: 1.5px dashed var(--line); border-radius: 11px; overflow: hidden;
  background: #fff; flex: none; }
.pp-seg-label { font-size: .66rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grey); padding: 0 10px;
  border-right: 1.5px dashed var(--line); align-self: stretch;
  display: flex; align-items: center; white-space: nowrap; }
.pp-topic-btn { cursor: pointer; background: none; border: none;
  padding: 7px 12px; font: 700 .76rem "Hanken Grotesk", sans-serif;
  color: var(--grey); border-right: 1px solid var(--line);
  transition: all .16s; white-space: nowrap; }
.pp-topic-btn:last-child { border-right: none; }
.pp-topic-btn:hover { background: var(--page); color: var(--ink); }
.pp-topic-btn.on.pp-topic-not_started { background: var(--line);   color: var(--grey); }
.pp-topic-btn.on.pp-topic-learning    { background: var(--blue);   color: var(--blue-ink); }
.pp-topic-btn.on.pp-topic-confident   { background: var(--teal);   color: var(--teal-ink); }

/* Exam-ready = understood AND drilled. */
.ready-badge { display: inline-block; margin-left: 8px; font-size: .66rem;
  font-weight: 800; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px;
  background: var(--yellow); color: var(--yellow-ink); vertical-align: middle; }
.topic-row.is-ready { border-color: var(--yellow-line); }
.topic-row.is-ready .topic-name { font-weight: 700; }
.subtopic-row.is-ready .subtopic-name::after { content: " ★"; color: var(--yellow-ink); }

.dot-papers::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--teal-ink); margin-right: 6px; }
.dot-ready { color: var(--yellow-ink); font-weight: 700; }

/* The two segments plus Quiz me no longer fit one line on a laptop. */
.topic-actions { flex-wrap: wrap; }
@media (max-width: 900px) {
  .pp-seg-topic { width: 100%; }
  .pp-seg-label { flex: none; }
  .pp-topic-btn { flex: 1; }
  .subtopic-row { flex-wrap: wrap; }
}


/* ============ per-paper chapter groups (revision mode) ============ */
/* A Level maths/physics/CS and O Level Islamiyat/Pak Studies examine different
   content in each component, so chapters are grouped under the paper that
   actually tests them. Subjects with one shared syllabus render flat. */
.paper-group { margin-bottom: 30px; }
.paper-group:last-child { margin-bottom: 0; }
.paper-group-head { position: sticky; top: 64px; z-index: 5;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px; padding: 11px 16px;
  background: var(--lav); border: 1.5px solid var(--lav-line);
  border-radius: 14px; }
.paper-group-head h2 { font-family: "Archivo", sans-serif; font-size: 1rem;
  color: var(--lav-ink); letter-spacing: -.01em; }
.paper-group-meta { font-size: .8rem; color: var(--lav-ink); opacity: .85; }
.paper-group-meta strong { font-weight: 800; }
.paper-group .topic-row { margin-left: 0; }
@media (max-width: 620px) {
  .paper-group-head { position: static; }
}


/* ============ homework reminders ============ */

/* Nav badge — the reminder a student sees on every page, not just the
   dashboard, so outstanding work can't be missed by landing elsewhere. */
.nav-homework { position: relative; }
.nav-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 5px; margin-left: 6px; border-radius: 999px; vertical-align: middle;
  background: var(--gold); color: #fff; font: 800 .68rem "Archivo", sans-serif;
  font-variant-numeric: tabular-nums; }
.nav-badge-late { background: var(--pink-ink);
  animation: nav-badge-pulse 2.4s ease-in-out infinite; }
@keyframes nav-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,50,110,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(176,50,110,0); }
}
@media (prefers-reduced-motion: reduce) { .nav-badge-late { animation: none; } }

/* Third banner tier: outstanding but not yet urgent. */
.hw-banner-open { background: var(--lav); border-color: var(--lav-line);
  color: var(--lav-ink); }
.hw-banner-open .btn { border-color: var(--lav-ink); color: var(--lav-ink); }
.hw-banner-open .btn:hover { background: var(--lav-ink); color: #fff; }

/* Calendar subscription card */
.cal-sub-lead { font-size: .93rem; color: var(--grey); line-height: 1.65;
  max-width: 620px; }
.cal-sub-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 12px; }
.cal-sub-actions .btn { padding: 10px 22px; font-size: .88rem; }
.cal-sub-hint { font-size: .8rem; color: var(--grey); line-height: 1.6; }
.cal-sub-hint strong { color: var(--ink); }


/* ============ Tee loader ============
   Replaces the bare "Loading…" text. /api/meta aggregates every syllabus, so
   a first load can take a couple of seconds — long enough that a static line
   of grey text reads as "broken" rather than "working". The owl bobs, the
   perch-line sweeps, and the captions rotate on a CSS-only cycle so nothing
   here costs a JS timer. */

.tee-load { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 16px 0; text-align: center;
  width: 100%; }

/* Skeleton rows behind the loader so the page keeps its shape and does not
   jump when the real content lands. */
.tee-skeleton { display: flex; flex-direction: column; gap: 10px; width: 100%;
  max-width: 620px; margin-top: 10px; }
.tee-skeleton i { display: block; height: 46px; border-radius: 14px;
  background: linear-gradient(90deg, var(--cream) 25%, #fff 37%, var(--cream) 63%);
  background-size: 400% 100%; animation: tee-shimmer 1.4s ease infinite; }
.tee-skeleton i:nth-child(2) { animation-delay: .12s; opacity: .85; }
.tee-skeleton i:nth-child(3) { animation-delay: .24s; opacity: .7; }
.tee-skeleton i:nth-child(4) { animation-delay: .36s; opacity: .55; }
@keyframes tee-shimmer { 0% { background-position: 100% 0; }
                         100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .tee-skeleton i { animation: none; }
}

.ring-drilled { font-size: .74rem; color: var(--teal-ink); margin-top: 3px; }
/* ==========================================================================
   NAV DRAWER
   The header outgrew a single row once Teachers, Revise and the account menu
   were added, so below 1200px the links move into a slide-down drawer rather
   than wrapping mid-word.
   ========================================================================== */

.nav-toggle { display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  color: var(--ink); transition: border-color .2s, background .2s; }
.nav-toggle:hover { border-color: var(--purple-bright); }
.nav-toggle-bars { display: block; width: 17px; height: 12px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after,
.nav-toggle-bars span {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .24s ease,
  opacity .18s ease; }
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span    { top: 5px; }
.nav-toggle-bars::after  { top: 10px; }
/* burger -> cross */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars::before, .nav-toggle-bars::after, .nav-toggle-bars span {
    transition: none; }
}

/* ============ header right rail (bell + account + burger) ============ */
.header-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

/* ============ nav groups — dropdown menus ============ */
.nav-group { position: relative; display: flex; align-items: center; }

/* The header is the unified hover/underline target for the whole item */
.nav-group-header {
  display: inline-flex; align-items: center; gap: 3px;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  cursor: default; transition: border-color .3s;
}
.nav-group:hover .nav-group-header,
.nav-group-header:has(.nav-group-btn[aria-expanded="true"]) {
  border-bottom-color: var(--gold);
}
/* Suppress the individual underline; keep font identical to other .nav-link items */
.nav-group-link {
  border-bottom: none !important; padding-bottom: 0 !important;
  font-size: .92rem; font-weight: 600; font-family: inherit;
  white-space: nowrap; color: var(--ink); line-height: 1;
}
.nav-group:hover .nav-group-link,
.nav-group-header:has(.nav-group-btn[aria-expanded="true"]) .nav-group-link { color: var(--navy); }

/* Chevron-only toggle button — must visually merge with the label */
.nav-group-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center;
  padding: 0; color: var(--ink);
  font: inherit; line-height: 1;
  transition: color .2s;
}
.nav-group:hover .nav-group-btn { color: var(--navy); }
.drop-arrow { flex: none; transition: transform .2s ease; }
.nav-group-btn[aria-expanded="true"] .drop-arrow { transform: rotate(180deg); }

/* The panel sits immediately below the nav-group div (top:100%) so the mouse
   never crosses a gap and loses the :hover — the classic "hover disappears" trap. */
.nav-group-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 256px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 6px; box-shadow: 0 16px 48px rgba(26,26,46,.14);
  z-index: 60; margin-top: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s, transform .18s ease;
}
.nav-group-panel.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Hover only on real pointer devices — on touch, :hover is "sticky" after tap
   and would fight the .open toggle. Scoped to hover:hover so iOS never sees it. */
@media (hover: hover) {
  .nav-group:hover .nav-group-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}
/* Invisible hover bridge: extends .nav-group's hover zone over the 8px margin-top gap */
.nav-group::before {
  content: ''; position: absolute; left: -10px; right: -10px;
  top: 100%; height: 12px; /* covers margin-top gap */
}
/* Caret above the panel */
.nav-group-panel::before {
  content: ''; position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #fff; border-top: 1.5px solid var(--line); border-left: 1.5px solid var(--line);
}

.nav-drop-item {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink);
  border-radius: 11px; padding: 9px 10px;
  transition: background .15s;
}
.nav-drop-item + .nav-drop-item { border-top: 1px solid var(--line); }
.nav-drop-item:hover { background: var(--cream); }

/* Nav drop icon chip */
.ndi {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; flex: none; font-size: 1rem;
}
.ndi-green  { background: var(--green); }
.ndi-blue   { background: var(--blue); }
.ndi-orange { background: var(--orange); }
.ndi-lav    { background: var(--lav); }
.ndi-pink   { background: var(--pink); }
.ndi-yellow { background: var(--yellow); }
.ndi-teal   { background: var(--teal); }
.ndi-text { display: flex; flex-direction: column; gap: 1px; }
.ndi-text b { font-size: .88rem; font-weight: 700; line-height: 1.2; }
.ndi-text span { font-size: .76rem; color: var(--grey); }

/* Tools dropdown — 2-column grid, wider panel */
.nav-group-panel:has(a[href="tools.html"]) {
  display: grid; grid-template-columns: 1fr 1fr; min-width: 480px;
}
.nav-group-panel:has(a[href="tools.html"]) .nav-drop-item + .nav-drop-item {
  border-top: none;
}
.nav-group-panel:has(a[href="tools.html"]) .nav-drop-item {
  border-top: 1px solid var(--line);
}
.nav-group-panel:has(a[href="tools.html"]) .nav-drop-item:nth-child(-n+2) {
  border-top: none;
}
/* "All study tools →" footer link */
.nav-drop-all {
  grid-column: 1 / -1; display: block; text-align: center;
  padding: 8px 12px; font-weight: 600; font-size: .82rem;
  color: var(--navy); text-decoration: none;
  border-top: 1px solid var(--line); border-radius: 0 0 12px 12px;
  transition: background .15s;
}
.nav-drop-all:hover { background: var(--cream); }

/* Reminders widget ============================================== */
.reminder-list { display: flex; flex-direction: column; gap: 8px; }
.reminder-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--page); border: 1.5px solid var(--line); transition: border-color .2s;
}
.reminder-item.overdue { border-color: #e57373; background: #fff5f5; }
.reminder-item.done { opacity: .45; }
.reminder-check { width: 17px; height: 17px; accent-color: var(--gold); margin-top: 2px; flex: none; cursor: pointer; }
.reminder-body { flex: 1; min-width: 0; }
.reminder-title { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.reminder-due { font-size: .76rem; color: var(--grey); margin-top: 2px; }
.reminder-item.overdue .reminder-due { color: #c62828; font-weight: 700; }
.reminder-del { background: none; border: none; cursor: pointer; color: var(--grey);
  padding: 2px 5px; border-radius: 6px; font-size: .9rem; flex: none; align-self: center;
  transition: color .15s, background .15s; }
.reminder-del:hover { color: #c62828; background: #fde8e8; }
.reminder-add-row { margin-top: 12px; }
.reminder-add-btn { background: none; border: 1.5px dashed var(--line); border-radius: 10px;
  width: 100%; padding: 9px; cursor: pointer; color: var(--grey); font-size: .88rem;
  font-family: "Hanken Grotesk", sans-serif; transition: border-color .2s, color .2s; }
.reminder-add-btn:hover { border-color: var(--gold); color: var(--gold); }
.reminder-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.reminder-form input { border: 1.5px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font: .88rem "Hanken Grotesk", sans-serif;
  background: var(--page); color: var(--ink); width: 100%; transition: border-color .2s; }
.reminder-form input:focus { outline: none; border-color: var(--gold); }
.reminder-form-btns { display: flex; gap: 8px; }
.reminder-save { background: var(--gold); color: var(--navy-deep); border: none;
  border-radius: 8px; padding: 7px 16px; font: 600 .85rem "Hanken Grotesk", sans-serif;
  cursor: pointer; transition: opacity .15s; }
.reminder-save:hover { opacity: .88; }
.reminder-cancel { background: none; color: var(--grey); border: 1.5px solid var(--line);
  border-radius: 8px; padding: 7px 14px; font: 600 .85rem "Hanken Grotesk", sans-serif;
  cursor: pointer; transition: border-color .15s; }
.reminder-cancel:hover { border-color: var(--grey); }
.reminder-empty { color: var(--grey); font-size: .85rem; text-align: center;
  padding: 20px 0; }

/* Sticky notes widget ========================================== */
.sticky-board { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 0; min-height: 80px; }
.sticky-add-btn { background: none; border: 2px dashed var(--line); border-radius: 10px;
  width: 100%; padding: 10px; cursor: pointer; color: var(--grey); font-size: .88rem;
  font-family: "Hanken Grotesk", sans-serif; transition: border-color .2s, color .2s;
  margin-top: 12px; }
.sticky-add-btn:hover { border-color: var(--gold); color: var(--gold); }
.sticky-note {
  position: relative; width: 136px; min-height: 120px;
  padding: 28px 12px 12px; border-radius: 3px;
  box-shadow: 2px 3px 10px rgba(0,0,0,.13), 0 1px 3px rgba(0,0,0,.07);
  font-size: .83rem; line-height: 1.5; word-break: break-word;
  flex: 0 0 auto; cursor: default;
}
.sticky-note:nth-child(odd)  { transform: rotate(-1.6deg); }
.sticky-note:nth-child(even) { transform: rotate(1.2deg); }
.sticky-note:nth-child(3n)   { transform: rotate(-2.2deg); }
.sticky-note:nth-child(4n)   { transform: rotate(1.8deg); }
/* Fold-corner effect */
.sticky-note::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 0; height: 0;
  border-left: 18px solid transparent; border-bottom: 18px solid rgba(0,0,0,.08);
}
.sticky-del {
  position: absolute; top: 5px; right: 6px;
  background: none; border: none; cursor: pointer;
  color: rgba(0,0,0,.3); font-size: .9rem; line-height: 1;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  transition: color .15s, background .15s;
}
.sticky-del:hover { color: rgba(0,0,0,.65); background: rgba(0,0,0,.08); }
.sticky-input {
  background: none; border: none; resize: none; width: 100%; height: 100%;
  font: .83rem/1.5 "Hanken Grotesk", sans-serif; color: inherit;
  min-height: 80px; padding: 0; cursor: text;
}
.sticky-input:focus { outline: none; }
.sticky-note-new { border: 2px dashed rgba(0,0,0,.15) !important;
  box-shadow: none !important; transform: none !important; cursor: text; }

/* Tighten nav gap between the mobile collapse point and the comfortable
   desktop width, so the profile pill + bell never squeeze the link row. */
@media (max-width: 1380px) {
  .header-nav { gap: 18px; }
}
@media (max-width: 1260px) {
  .header-nav { gap: 12px; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: flex; }

  .header-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--page); border-bottom: 1px solid var(--line);
    padding: 10px 22px 18px;
    box-shadow: 0 18px 40px rgba(26,26,46,.12);
    /* collapsed by default; .open is set by the toggle */
    display: none;
  }
  .header-nav.open { display: flex; }

  .site-header { position: sticky; }
  .header-row { position: relative; height: auto; padding: 12px 18px; }

  .nav-link { font-size: .96rem; padding: 11px 4px; border-bottom: 1px solid var(--line);
    border-radius: 0; }
  .nav-link:hover, .nav-link.active { border-bottom-color: var(--gold); }

  .header-nav .btn-gold { margin-top: 12px; text-align: center; }

  /* account + bell live in .header-right, always visible — not in the drawer */
  .account-name { display: inline; max-width: none; }
  .notif-list { max-height: 260px; }

  /* nav-groups become accordions in the drawer */
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-group-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--line); padding: 0;
  }
  .nav-group-link { flex: 1; padding: 11px 4px; font-size: .96rem; border-bottom: none; }
  .nav-group-btn {
    padding: 11px 8px; border-bottom: none; border-radius: 0; border-left: 1px solid var(--line);
  }
  .nav-group-btn[aria-expanded="true"] { color: var(--navy); }
  .nav-group-panel {
    position: static !important; transform: none !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    min-width: 0; box-shadow: none !important; border-radius: 12px;
    border: 1.5px solid var(--line); margin: 4px 8px 8px;
    padding: 4px; max-height: 0; overflow: hidden;
    transition: opacity .2s, max-height .25s ease, visibility .2s;
  }
  .nav-group-panel::before { display: none; }
  /* Desktop hover is scoped to @media (hover:hover) above, so it never fires
     on touch — no reset rule needed. .open wins cleanly on all devices. */
  .nav-group-panel.open {
    opacity: 1; visibility: visible; pointer-events: auto; max-height: 500px;
  }
  .sticky-board { gap: 10px; }
  .sticky-note { width: 120px; }
}

/* Narrow phones: the wordmark is the first thing worth dropping. */
@media (max-width: 420px) {
  .brand span { display: none; }
}

/* ============ exam-paper question layout ============
   Mirrors how the real booklet sets a question: number top-left, parts running
   down the page, mark allocation hard right, dotted answer rules under each
   part. Past-paper questions render as their original vector crop instead. */

.paper-sheet { background: #fff; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 0 0 6px; overflow: hidden; }

.paper-head { display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--cream);
  border-bottom: 1px solid var(--line); }
.paper-qno { width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center; background: var(--ink); color: #fff;
  font: 800 .82rem "Archivo", sans-serif; font-variant-numeric: tabular-nums; }
.paper-source { flex: 1; font-size: .76rem; font-weight: 600; color: var(--grey);
  letter-spacing: .02em; }
.paper-total { font-size: .74rem; font-weight: 800; color: var(--lav-ink);
  background: var(--lav); padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; }

.paper-stem { padding: 18px 20px 4px; font-size: .97rem; line-height: 1.75;
  color: var(--ink); }

/* label | text | marks —‚¬” the marks column stays put however long the text is */
.paper-part { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 8px; padding: 12px 20px 4px; align-items: start; }
.paper-label { font-weight: 700; font-size: .95rem; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.paper-text p { font-size: .96rem; line-height: 1.7; }
.paper-marks { text-align: right; font-weight: 700; font-size: .9rem;
  color: var(--grey); font-variant-numeric: tabular-nums; }

/* the dotted rules a student writes on */
.paper-rules { display: flex; flex-direction: column; gap: 13px;
  margin: 12px 0 6px; }
.paper-rule { display: block; height: 0; border-bottom: 1.5px dotted #C9C4D4; }

.paper-figure { margin: 0; padding: 14px 16px; }
.paper-figure img { display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.paper-figure figcaption { margin-top: 9px; font-size: .76rem; color: var(--grey);
  text-align: center; }
.paper-figure-ms { padding: 0; }
.paper-figure-ms img { border-color: var(--green-line); }

/* Swapping between a real past paper and a generated one is a headline choice,
   not a footnote, so it reads as a card rather than a small underlined link. */
.quiz-mode-switch { margin-top: 4px; }
.quiz-mode-btn { display: flex; align-items: center; gap: 12px; width: 100%;
  cursor: pointer; text-align: left; padding: 13px 16px; border-radius: 14px;
  background: var(--blue); border: 1.5px solid var(--blue-line);
  color: var(--blue-ink); font: 600 .9rem "Hanken Grotesk", sans-serif;
  transition: transform .18s ease, box-shadow .25s; }
.quiz-mode-btn:hover { transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20,86,140,.18); }
.quiz-mode-btn .qm-icon { font-size: 1.15rem; flex: none; line-height: 1; }
.quiz-mode-btn .qm-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.quiz-mode-btn strong { font-weight: 800; font-size: .92rem; }
.quiz-mode-btn em { font-style: normal; font-size: .78rem; opacity: .8; }
.quiz-mode-btn .qm-arrow { flex: none; font-weight: 800; }

@media (max-width: 620px) {
  .paper-part { grid-template-columns: 28px minmax(0, 1fr) 28px; padding: 12px 14px 4px; }
  .paper-stem { padding: 16px 14px 4px; }
  .paper-head { padding: 10px 14px; }
}

/* ============ FACULTY SECTION ============ */
.faculty-row { display: grid; grid-template-columns: 1fr 1fr; gap: 52px;
  align-items: center; }
.faculty-copy p:not(.eyebrow) { line-height: 1.7; color: var(--ink);
  opacity: .82; max-width: 46ch; }
.faculty-copy p + p { margin-top: 10px; }
.faculty-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faculty-photo { width: 100%; height: 200px; object-fit: cover;
  border-radius: var(--radius); display: block; }
.faculty-photo.fp-tall { height: 100%; min-height: 420px; grid-row: span 2; }
.faculty-badge { display: inline-flex; align-items: center; gap: 8px;
  background: var(--lav); color: var(--lav-ink); border: 1.5px solid var(--lav-line);
  border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 700;
  margin-top: 28px; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.faculty-badge:hover { transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(74,46,143,.18); }

@media (max-width: 860px) {
  .faculty-row { grid-template-columns: 1fr; gap: 32px; }
  .faculty-photos { grid-template-columns: 1fr 1fr; }
  .faculty-photo.fp-tall { min-height: 220px; }
}
@media (max-width: 540px) {
  .faculty-photos { grid-template-columns: 1fr; }
  .faculty-photo.fp-tall { min-height: 200px; }
}

/* ============ PLATFORM PREVIEW ============ */
.platform-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px;
  align-items: center; }
.platform-img { width: 100%; border-radius: var(--radius-lg);
  box-shadow: 0 28px 72px rgba(26,26,46,.18); border: 1.5px solid var(--line);
  display: block; }
.platform-feats { display: flex; flex-direction: column; gap: 14px; }
.platform-feat { padding: 20px 22px; border-radius: var(--radius);
  border: 1.5px solid transparent; transition: transform .18s; }
.platform-feat.tint-lav   { background: var(--lav);    border-color: var(--lav-line); }
.platform-feat.tint-green  { background: var(--green);  border-color: var(--green-line); }
.platform-feat.tint-orange { background: var(--orange); border-color: var(--orange-line); }
.platform-feat:hover { transform: translateX(4px); }
.platform-feat h3 { font-family: "Archivo", sans-serif; font-size: 1rem;
  margin-bottom: 4px; }
.platform-feat p { font-size: .9rem; line-height: 1.55; opacity: .88; margin: 0; }

@media (max-width: 860px) {
  .platform-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MCQ LIVE SOLVER — styles (revamped)
   mcq-solver.html  ·  papers.html MCQ tab
========================================================= */

/* ── Setup panel ─────────────────────────────────────────── */
.mcq-setup-panel { padding: 48px 0 80px; }
.mcq-setup-hero  { text-align: center; margin-bottom: 40px; }
.mcq-setup-hero h1 { font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 900;
  color: var(--navy); margin-bottom: 12px; }
.mcq-setup-hero .hero-sub { color: var(--grey); max-width: 560px; margin: 0 auto; font-size: 1.05rem; }

.mcq-setup-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px;
  align-items: start; }

.mcq-setup-card { padding: 32px; }
.mcq-setup-card h2 { font-family: "Archivo", sans-serif; font-size: 1.25rem;
  font-weight: 800; margin-bottom: 24px; }

.mcq-setup-summary { background: var(--cream); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; font-size: .9rem;
  margin-bottom: 20px; min-height: 46px; }

/* ── Info stack (right column) ──────────────────────────── */
.mcq-info-stack { display: flex; flex-direction: column; gap: 14px; }
.mcq-info-card { display: flex; align-items: flex-start; gap: 14px;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 16px 18px;
  transition: transform .2s, box-shadow .2s; }
.mcq-info-card:hover { transform: translateX(3px);
  box-shadow: 0 4px 18px rgba(26,26,26,.08); }
.mcq-info-card[class*="tint-lav"]    { background: var(--lav);    border-color: var(--lav-line); }
.mcq-info-card[class*="tint-green"]  { background: var(--green);  border-color: var(--green-line); }
.mcq-info-card[class*="tint-orange"] { background: var(--orange); border-color: var(--orange-line); }
.mcq-info-card[class*="tint-blue"]   { background: var(--blue);   border-color: var(--blue-line); }
.mcq-info-icon { font-size: 1.6rem; flex: none; line-height: 1; }
.mcq-info-card b { font-family: "Archivo", sans-serif; font-size: .95rem; display: block; margin-bottom: 3px; }
.mcq-info-card p { margin: 0; font-size: .85rem; color: var(--grey); }
.mcq-info-card kbd {
  display: inline-block; padding: 1px 6px; font-size: .8rem;
  background: rgba(0,0,0,.1); border-radius: 4px; font-family: monospace; }

.mcq-subjects-badge { background: var(--navy-deep); color: #fff;
  border-radius: 16px; padding: 18px 20px; }
.mcq-badge-title { font-family: "Archivo", sans-serif; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px; }
.mcq-badge-grid { display: flex; flex-direction: column; gap: 6px;
  font-size: .85rem; opacity: .88; }

.mcq-subject-disabled { opacity: .4; cursor: not-allowed !important; }

/* ── papers.html MCQ tab card ────────────────────────────── */
.mcq-tab-card { background: linear-gradient(135deg, var(--navy-deep) 0%, #1a2650 60%, #2a1c4a 100%);
  border-radius: var(--radius-lg); padding: 52px 48px; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
  box-shadow: 0 12px 40px rgba(46,27,74,.18); }
.mcq-tab-card h2 { font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.4rem); font-weight: 900; color: #fff; margin: 0 0 4px; }
.mcq-tab-card p { color: rgba(255,255,255,.85); margin: 0; max-width: 600px; font-size: 1.05rem; line-height: 1.6; }
.mcq-tab-card .mcq-tab-feats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.mcq-tab-feat { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: 6px 16px; font-size: .85rem; color: rgba(255,255,255,.95);
  display: flex; align-items: center; gap: 6px; }
.mcq-tab-feat.gold { background: rgba(244,166,50,.15); border-color: rgba(244,166,50,.35); color: var(--gold); }
.mcq-tab-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.btn-mcq { background: linear-gradient(135deg, var(--gold), #f0c040);
  color: var(--navy-deep); font-weight: 700; padding: 14px 32px;
  border-radius: 999px; text-decoration: none; font-size: 1rem;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(232,145,58,.35); }
.btn-mcq:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232,145,58,.5); }

.mcq-tab-subjects { display: flex; flex-direction: column; gap: 12px; margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; width: 100%; }
.mcq-tab-subjects-title { font-family: "Archivo", sans-serif; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold); opacity: .95; }
.mcq-tab-subjects-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.mcq-subject-tag { background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.8); font-size: .82rem; border-radius: 8px;
  padding: 6px 12px; display: flex; align-items: center; gap: 8px; }
.mcq-subject-tag i { font-style: normal; opacity: .7; }

/* ═══════════════════════════════════════════════════════════
   RESULTS PANEL
   ═══════════════════════════════════════════════════════════ */
.mcq-results-panel { padding: 56px 0 80px; }
.mcq-results-hero { text-align: center; margin-bottom: 32px; }
.mcq-results-hero h1 { font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 900; color: var(--navy);
  margin-bottom: 28px; }

.mcq-results-score-row { display: flex; align-items: flex-start;
  justify-content: center; gap: 36px; flex-wrap: wrap; margin-bottom: 24px; }

.mcq-results-ring-wrap { position: relative; width: 160px; height: 160px; flex: none; }
.mcq-results-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
/* Shared with the session ring, which now lives in mcq-session.css. The
   results score ring (mcq-solver.html) still uses this class, and the
   fill:none is load-bearing - without it the SVG circle paints a black disc. */
.mcq-ring-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 8; }
.mcq-results-fill { fill: none; stroke: var(--green-ink,#16704A); stroke-width: 10;
  stroke-linecap: round; stroke-dasharray: 427.3; stroke-dashoffset: 427.3; }
.mcq-results-score-num { position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center; }
.mcq-results-score-num span { font-family: "Archivo", sans-serif;
  font-size: 2.6rem; font-weight: 900; color: var(--navy); line-height: 1; }
.mcq-results-score-num small { font-size: .95rem; color: var(--grey); }

.mcq-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
  min-width: 280px; }
.mcq-stat-card { background: var(--white); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 18px; text-align: center;
  transition: transform .2s, box-shadow .2s; }
.mcq-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.mcq-stat-card[class*="tint-green"]  { background: var(--green);  border-color: var(--green-line); }
.mcq-stat-card[class*="tint-pink"]   { background: var(--pink);   border-color: var(--pink-line); }
.mcq-stat-card[class*="tint-lav"]    { background: var(--lav);    border-color: var(--lav-line); }
.mcq-stat-card[class*="tint-blue"]   { background: var(--blue);   border-color: var(--blue-line); }
.mcq-stat-card[class*="tint-orange"] { background: var(--orange); border-color: var(--orange-line); }
.mcq-stat-card[class*="tint-teal"]   { background: var(--teal);   border-color: var(--teal-line); }
.mcq-stat-card b { display: block; font-family: "Archivo", sans-serif;
  font-size: 1.6rem; font-weight: 900; color: var(--navy); line-height: 1.1; }
.mcq-stat-card span { font-size: .78rem; color: var(--grey); }

.mcq-results-message { font-size: 1.05rem; color: var(--grey); max-width: 480px;
  margin: 0 auto; }

.mcq-results-actions { display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 36px; }

/* ── Results table ───────────────────────────────────────── */
.mcq-results-table-wrap { padding: 28px 32px 32px; }
.mcq-results-table-head { display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; }
.mcq-results-table-head h2 { margin: 0; }
.mcq-results-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mcq-results-table-scroll { overflow-x: auto; }
.mcq-results-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mcq-results-table th { background: var(--cream); border-bottom: 2px solid var(--line);
  padding: 10px 14px; text-align: left; font-family: "Archivo", sans-serif;
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grey); white-space: nowrap; }
.mcq-results-table td { padding: 10px 14px; border-bottom: 1px solid var(--line);
  vertical-align: middle; }
.mcq-results-table tr[data-result="correct"] td:first-child { border-left: 3px solid var(--green-ink); }
.mcq-results-table tr[data-result="wrong"]   td:first-child { border-left: 3px solid var(--pink-ink); }
.mcq-results-table tr[data-result="skipped"] td:first-child { border-left: 3px solid var(--line); }
.mcq-results-table tr:hover td { background: var(--cream); }
.mcq-td-ref   { font-size: .8rem; color: var(--grey); white-space: nowrap; }
.mcq-td-topic { font-size: .82rem; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcq-td-ans   { text-align: center; }
.mcq-td-empty { text-align: center; color: var(--grey); padding: 24px 14px; }

.mcq-letter-correct { color: var(--green-ink); font-size: 1.1rem; }
.mcq-letter-wrong   { color: var(--pink-ink);  font-size: 1.1rem; }

.mcq-badge-correct  { background: var(--green);  color: var(--green-ink);
  border-radius: 6px; padding: 2px 10px; font-size: .8rem; font-weight: 600; }
.mcq-badge-wrong    { background: var(--pink);   color: var(--pink-ink);
  border-radius: 6px; padding: 2px 10px; font-size: .8rem; font-weight: 600; }
.mcq-badge-skipped  { background: var(--cream);  color: var(--grey);
  border-radius: 6px; padding: 2px 10px; font-size: .8rem; }
.mcq-badge-nokey    { background: var(--lav);    color: var(--lav-ink);
  border-radius: 6px; padding: 2px 10px; font-size: .8rem; }

/* ═══════════════════════════════════════════════════════════
   QUESTION NAVIGATOR
   ═══════════════════════════════════════════════════════════ */
/* Navigator dot — pill-shaped */
.mcq-nd {
  width: 32px; height: 32px; border-radius: 9px;
  font-size: .75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid transparent;
  transition: transform .12s, box-shadow .12s; }
button.mcq-nd:hover { transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.mcq-nd-now    { background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff; border-color: #7c3aed;
  box-shadow: 0 2px 10px rgba(124,58,237,.3); }
.mcq-nd-blank  { background: #f3f4f6; color: #9CA3AF; }
.mcq-nd-correct{ background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
.mcq-nd-wrong  { background: #FFE4E6; color: #9B1C1C; border-color: #FCA5A5; }
.mcq-nd-skipped{ background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.mcq-nd-nokey  { background: #E0E7FF; color: #3730A3; border-color: #A5B4FC; }

/* Large dots in the results grid */
.mcq-results-q-grid { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 4px;
  justify-content: center; }
.mcq-nd-lg { width: 38px; height: 38px; border-radius: 10px; font-size: .82rem; }
.mcq-nd-lg:hover { transform: scale(1.12); cursor: pointer; }
/* Flagged-for-review marker. outline (not border/pseudo-element) so it cannot
   shift the results grid by a pixel. */
.mcq-results-q-grid .mcq-nd-flag { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── Full past-paper mode — tabbed picker ───────────────────────────────── */
.fp-year-tabs, .fp-sess-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fp-tab {
  padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line);
  background: var(--page); color: var(--ink); font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: border-color .14s, background .14s; }
.fp-tab:hover { border-color: var(--purple-bright,#7c3aed); background: var(--cream); }
.fp-tab.active {
  background: var(--navy,#0B3D91); color: #fff;
  border-color: var(--navy,#0B3D91); box-shadow: 0 2px 8px rgba(11,61,145,.22); }
.fp-sess-btn {
  padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line);
  background: var(--page); color: var(--ink); font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: border-color .14s, background .14s; }
.fp-sess-btn:hover { border-color: var(--purple-bright,#7c3aed); background: var(--cream); }
.fp-sess-btn.active {
  background: var(--purple-bright,#7c3aed); color: #fff;
  border-color: var(--purple-bright,#7c3aed); }
/* Each step is a labelled row, so "Variant 2" is never left floating with no
   indication of which paper it belongs to. */
.fp-step { margin-bottom: 12px; }
.fp-step[hidden] { display: none; }
.fp-step-label { display: block; font-family: "Archivo", sans-serif;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 5px; }

.fp-comp-row, .fp-var-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-comp-btn, .fp-var-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--page); color: var(--ink); cursor: pointer;
  font-size: .84rem; font-weight: 600; line-height: 1.25;
  transition: border-color .14s, background .14s, box-shadow .14s; }
.fp-comp-btn small, .fp-var-btn small {
  font-size: .7rem; font-weight: 500; color: var(--grey); }
.fp-comp-btn:hover, .fp-var-btn:hover {
  border-color: var(--purple-bright,#7c3aed); background: var(--cream); }
.fp-comp-btn.active {
  background: var(--purple-bright,#7c3aed); color: #fff;
  border-color: var(--purple-bright,#7c3aed); }
.fp-var-btn.active {
  background: var(--navy,#0B3D91); color: #fff;
  border-color: var(--navy,#0B3D91); box-shadow: 0 2px 10px rgba(11,61,145,.22); }
.fp-comp-btn.active small, .fp-var-btn.active small { color: rgba(255,255,255,.8); }

.mcq-fp-info { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fp-info-chip { font-size: .78rem; color: var(--grey);
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 11px; white-space: nowrap; }

/* ── Review PDF download modal ─────────────────────────────────────────────── */
.mcq-dl-modal { position: fixed; inset: 0; z-index: 120;
  background: rgba(15, 20, 34, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.mcq-dl-modal[hidden] { display: none; }
.mcq-dl-box { position: relative; background: var(--page); color: var(--ink);
  border-radius: 20px; padding: 30px 32px 26px; width: min(460px, 100%);
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; }
.mcq-dl-close { position: absolute; top: 12px; right: 14px; border: 0;
  background: none; font-size: 1.5rem; line-height: 1; color: var(--grey);
  cursor: pointer; padding: 4px 8px; }
.mcq-dl-close:hover { color: var(--ink); }
.mcq-dl-ico { font-size: 2rem; margin-bottom: 4px; }
.mcq-dl-box h2 { margin: 0 0 4px; font-family: "Archivo", sans-serif;
  font-size: 1.2rem; }
.mcq-dl-sub { color: var(--grey); font-size: .85rem; margin: 0 0 20px; }
.mcq-dl-box .field-label { display: block; text-align: left; margin-bottom: 8px; }

.mcq-dl-opts { display: flex; flex-direction: column; gap: 8px;
  text-align: left; margin-bottom: 14px; }
.mcq-dl-opt { display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: border-color .14s, background .14s; }
.mcq-dl-opt:hover { border-color: var(--purple-bright,#7c3aed); background: var(--cream); }
.mcq-dl-opt:has(input:checked) { border-color: var(--purple-bright,#7c3aed);
  background: var(--lav, #f3efff); }
.mcq-dl-opt input { margin-top: 3px; accent-color: var(--purple-bright,#7c3aed); }
.mcq-dl-opt b { display: block; font-size: .9rem; font-weight: 700; }
.mcq-dl-opt small { display: block; font-size: .76rem; color: var(--grey); }

.mcq-dl-note { font-size: .76rem; color: var(--grey); margin: 0 0 18px;
  text-align: left; line-height: 1.5; }
.mcq-dl-actions { display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; }

.mcq-dl-phase { font-weight: 700; margin: 8px 0 12px; }
.mcq-dl-bar { height: 8px; border-radius: 99px; background: var(--line);
  overflow: hidden; margin-bottom: 8px; }
.mcq-dl-bar i { display: block; height: 100%; width: 4%; border-radius: 99px;
  background: linear-gradient(90deg, var(--purple-bright,#7c3aed), var(--gold,#F4A632));
  transition: width .4s ease; }
.mcq-dl-count { font-size: .82rem; color: var(--grey); margin: 0 0 16px; }
.mcq-dl-ok { color: var(--green-ink); font-weight: 700; margin: 10px 0 18px; }
.mcq-dl-err { color: var(--pink-ink); font-size: .84rem; margin: 14px 0 0;
  text-align: left; }

/* ── Custom question count ──────────────────────────────────────────────── */
.mcq-count-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mcq-custom-wrap { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.mcq-custom-input {
  width: 110px; padding: 6px 10px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--page);
  color: var(--ink); font-size: .9rem; }
.mcq-custom-hint { font-size: .8rem; color: var(--grey); }

/* ═══════════════════════════════════════════════════════════
   JOURNEY LADDER
   ═══════════════════════════════════════════════════════════ */
.journey-section { padding-bottom: 80px; }

/* Six-step horizontal track (desktop) */
.journey-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
  margin-top: 52px;
}

/* Spine — real element so JS can animate it (replaces ::before approach) */
.journey-spine {
  position: absolute;
  top: 44px;            /* centre of node circles */
  left: calc(100%/12);
  right: calc(100%/12);
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0, var(--gold) 12px,
    transparent 12px, transparent 22px
  );
  opacity: 0;           /* JS reveals this */
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 0;
  transition: none;
  pointer-events: none;
}
.journey-spine.js-drawn {
  opacity: .45;
  transform: scaleX(1);
  transition: transform 1.4s cubic-bezier(0.4,0,0.2,1) 0.1s,
              opacity 0.3s ease 0.1s;
}

/* Travelling progress dot */
.journey-dot {
  position: absolute;
  top: 50%; left: 0%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(232,145,58,.18), 0 0 16px rgba(232,145,58,.5);
  z-index: 2;
  opacity: 0;
  transition: left 0.5s cubic-bezier(0.4,0,0.2,1),
              opacity 0.25s ease;
  pointer-events: none;
}
.journey-dot.jd-visible { opacity: 1; }

/* Dot position stops — set via JS, declared here for clarity */
/* left: 0% = step 0, 20% = step 1 ... 100% = step 5 */

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  position: relative;
  z-index: 1;
  /* Progressive-enhancement entrance — JS adds .journey-initialized to parent
     to hide steps; without JS they remain visible */
}

/* JS-controlled entrance animation */
.journey-initialized .journey-step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.journey-initialized .journey-step.js-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Alternate steps drop lower — keyed by data-step, not nth-child,
   because the spine element shifts nth-child counting */
.journey-step[data-step="1"],
.journey-step[data-step="3"],
.journey-step[data-step="5"] { margin-top: 56px; }

.js-node {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--page);
  border: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(201,164,78,.25);
  margin-bottom: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.journey-step:hover .js-node {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 12px 32px rgba(201,164,78,.35);
}

.js-num {
  font-family: "Archivo", sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 2px;
}
.js-icon { font-size: 1.7rem; line-height: 1; }

.js-title {
  font-family: "Archivo", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 6px;
}
.js-desc {
  font-size: .81rem;
  color: var(--grey);
  line-height: 1.5;
  max-width: 130px;
  margin: 0 auto;
}

/* Final step — gold node to mark the destination */
.journey-step.js-goal .js-node {
  background: linear-gradient(135deg, #C9A44E, #f0c040);
  border-color: #C9A44E;
  box-shadow: 0 6px 28px rgba(201,164,78,.45);
}
.journey-step.js-goal .js-icon { font-size: 2rem; }
.journey-step.js-goal .js-title { color: #7a5200; }

.journey-cta { text-align: center; margin-top: 56px; }

/* ---- Icon micro-animation keyframes ---- */
@keyframes jsa-target {
  0%,100% { transform: scale(1); }
  40%      { transform: scale(1.28); }
}
@keyframes jsa-float {
  0%,100% { transform: translateY(0); }
  45%     { transform: translateY(-6px); }
}
@keyframes jsa-lift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  35%     { transform: translateY(-5px) rotate(-6deg); }
}
@keyframes jsa-tick {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-15deg); }
  65%     { transform: rotate(10deg); }
}
@keyframes jsa-bars {
  0%   { transform: scaleY(0.55); }
  60%  { transform: scaleY(1.08); }
  100% { transform: scaleY(1); }
}
@keyframes jsa-bounce {
  0%,100% { transform: translateY(0); }
  28%     { transform: translateY(-9px); }
  55%     { transform: translateY(-4px); }
  75%     { transform: translateY(-7px); }
}

/* Node pulse when dot arrives */
@keyframes jsa-node-pulse {
  0%   { box-shadow: 0 4px 20px rgba(201,164,78,.25); }
  45%  { box-shadow: 0 4px 20px rgba(201,164,78,.55), 0 0 0 10px rgba(201,164,78,.10); }
  100% { box-shadow: 0 4px 20px rgba(201,164,78,.25); }
}
.journey-step.js-node-active .js-node {
  animation: jsa-node-pulse 0.65s ease;
}
.journey-step[data-step="0"].js-icon-active .js-icon { animation: jsa-target 0.5s ease; }
.journey-step[data-step="1"].js-icon-active .js-icon { animation: jsa-float  0.6s ease; }
.journey-step[data-step="2"].js-icon-active .js-icon { animation: jsa-lift   0.55s ease; }
.journey-step[data-step="3"].js-icon-active .js-icon { animation: jsa-tick   0.55s ease; }
.journey-step[data-step="4"].js-icon-active .js-icon {
  animation: jsa-bars 0.6s ease;
  transform-origin: bottom;
  display: inline-block;
}
.journey-step[data-step="5"].js-icon-active .js-icon { animation: jsa-bounce 0.75s ease; }

/* A* finale glow */
@keyframes jsa-goal-glow {
  0%   { box-shadow: 0 6px 28px rgba(201,164,78,.45); }
  40%  { box-shadow: 0 6px 28px rgba(201,164,78,.45),
                     0 0 0 16px rgba(201,164,78,.12),
                     0 0 44px rgba(232,193,78,.28); }
  100% { box-shadow: 0 6px 28px rgba(201,164,78,.45); }
}
.journey-step.js-goal.js-node-active .js-node {
  animation: jsa-goal-glow 1.1s ease !important;
}

/* Sparkle particles for the A* finale */
@keyframes jsa-sparkle {
  0%   { opacity: 0; transform: translate(0,0) scale(0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); }
}
.jsa-sparkle-dot {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  animation: jsa-sparkle 0.75s ease forwards;
  z-index: 4;
}

/* Respect reduced-motion — suppress all journey keyframe animations */
@media (prefers-reduced-motion: reduce) {
  .journey-spine, .journey-dot { display: none !important; }
  .journey-initialized .journey-step { transition: opacity 0.3s ease; }
  .journey-step.js-node-active .js-node,
  .journey-step.js-icon-active .js-icon,
  .journey-step.js-goal.js-node-active .js-node,
  .jsa-sparkle-dot { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   TABBED PLATFORM WALKTHROUGH
   ═══════════════════════════════════════════════════════════ */
.walkthrough-section { padding: 80px 0; }

.wt-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}

.wt-tab {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  color: var(--ink);
  font: 600 .88rem "Hanken Grotesk", sans-serif;
  padding: 9px 20px;
  cursor: pointer;
  transition: all .18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wt-tab:hover { border-color: var(--purple); color: var(--purple); }
.wt-tab.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 4px 16px rgba(76,46,114,.25);
}
.wt-tab .wt-tab-icon { font-size: 1rem; }
.wt-tab .wt-tab-num {
  font-size: .72rem;
  font-weight: 800;
  opacity: .55;
  letter-spacing: .04em;
  margin-right: 1px;
}

.wt-panels { position: relative; }

.wt-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.wt-panel.active { display: grid; }

.wt-screen {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(26,10,46,.18);
  border: 1.5px solid var(--line);
  background: var(--cream);
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wt-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* Styled placeholder when no screenshot yet */
.wt-screen-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--grey);
  font-size: .85rem;
  padding: 24px;
  text-align: center;
  background: linear-gradient(135deg, var(--cream) 0%, #e8dfce 100%);
}
.wt-screen-placeholder .ph-icon { font-size: 2.8rem; opacity: .5; }
.wt-screen-placeholder .ph-label { font-weight: 600; color: var(--purple); opacity: .6; font-size: .9rem; }

/* Mock UI elements for placeholders */
.wt-mock {
  width: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wt-mock-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--line);
}
.wt-mock-bar.w80 { width: 80%; }
.wt-mock-bar.w60 { width: 60%; }
.wt-mock-bar.w45 { width: 45%; }
.wt-mock-card {
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.wt-mock-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wt-copy { display: flex; flex-direction: column; gap: 16px; }
.wt-copy h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--purple);
  line-height: 1.15;
}
.wt-copy .wt-sub {
  color: var(--grey);
  line-height: 1.65;
  font-size: .93rem;
}
.wt-points {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wt-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.5;
}
.wt-points li::before {
  content: '✓';
  font-weight: 800;
  color: var(--green-ink);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════
   FLOATING HELP BUTTON
   ═══════════════════════════════════════════════════════════ */
#pwt-help-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 800;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-bright));
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(76,46,114,.4);
  transition: transform .2s ease, box-shadow .2s ease;
  color: #fff;
  font-size: 1.2rem;
}
#pwt-help-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 12px 36px rgba(76,46,114,.5);
}
#pwt-help-btn .help-label {
  position: absolute;
  right: 62px;
  white-space: nowrap;
  background: var(--purple);
  color: #fff;
  font: 600 .78rem "Hanken Grotesk", sans-serif;
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
#pwt-help-btn:hover .help-label { opacity: 1; }

/* Help modal */
#pwt-help-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,10,46,.55);
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn .18s ease;
}
#pwt-help-modal {
  background: #F8F4EE;
  border-radius: 22px;
  padding: 36px 36px 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(26,10,46,.3);
  position: relative;
  font-family: "Hanken Grotesk", sans-serif;
}
#pwt-help-modal h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.4rem;
  color: var(--purple);
  margin: 0 0 4px;
}
#pwt-help-modal .hm-sub {
  color: var(--grey);
  font-size: .88rem;
  margin: 0 0 24px;
}
.hm-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.hm-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.hm-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.hm-step-text h4 {
  font-family: "Archivo", sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 2px;
}
.hm-step-text p {
  font-size: .84rem;
  color: var(--grey);
  line-height: 1.5;
  margin: 0;
}
.hm-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  font-size: 1.4rem;
  color: #857E93;
  cursor: pointer;
  line-height: 1;
}
.hm-modal-close:hover { color: var(--purple); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — JOURNEY + WALKTHROUGH
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .journey-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 0;
  }
  .journey-spine, .journey-dot { display: none; }  /* no horizontal path on small */
  /* reset vertical offsets */
  .journey-step[data-step="1"],
  .journey-step[data-step="3"],
  .journey-step[data-step="5"] { margin-top: 0; }

  .wt-panel { grid-template-columns: 1fr; }
  .wt-screen { order: -1; }
}
@media (max-width: 560px) {
  .journey-track { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .js-node { width: 72px; height: 72px; }
  .js-icon { font-size: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mcq-setup-grid { grid-template-columns: 1fr; }
  /* A grid item defaults to min-width:auto, so `1fr` still could not shrink
     below its content: the board switcher is a nowrap flex row ~622px wide,
     which stretched the single column to 687px on a 375px phone. */
  .mcq-setup-grid > * { min-width: 0; }
  .mcq-info-stack { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .mcq-info-stack { grid-template-columns: 1fr; }
  .mcq-stat-grid { grid-template-columns: 1fr 1fr; }
  .mcq-results-score-row { flex-direction: column; align-items: center; }
  .mcq-nd { width: 28px; height: 28px; font-size: .7rem; }
  .mcq-setup-card { padding: 22px 16px; }
}

/* ═══════════════════════════════════════════════════════════
   TOUR — spotlight overlay + tooltip
   Matches Cambridge Assistant reference design.
   Prefix: .tour-   No global side-effects.
   ═══════════════════════════════════════════════════════════ */

/* ---- Dim overlay ----------------------------------------------- */
.tour-ov {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.tour-ov.tour-ov-on { opacity: 1; pointer-events: auto; }

/* Four mask panels that surround the spotlight hole */
.tour-m {
  position: absolute;
  background: rgba(20,18,36,.58);
  backdrop-filter: blur(1px);
  transition: top .2s ease, left .2s ease, right .2s ease,
              bottom .2s ease, width .2s ease, height .2s ease;
}
.tour-m-row {
  position: absolute;
  display: flex;
  left: 0; right: 0;
}
.tour-m-hole { flex: 1; }

/* ---- Highlighted element amber ring ---------------------------- */
.tour-hi {
  outline: 2.5px solid #C9A44E !important;
  outline-offset: 5px;
  border-radius: 6px;
  z-index: 9001;
  position: relative;
}

/* ---- Tooltip card ---------------------------------------------- */
.tour-tip {
  position: fixed; z-index: 9200;
  width: 320px;
  background: var(--white);
  border: 1px solid rgba(201,164,78,.35);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(76,46,114,.18), 0 3px 10px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(6px) scale(.97);
  transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.2,.64,1);
  pointer-events: none;
}
.tour-tip.tour-tip-on {
  opacity: 1; transform: none; pointer-events: auto;
}

/* ---- Tooltip top row: pill label + close ----------------------- */
.tour-tip-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 0;
}
.tour-tip-label {
  display: inline-block;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  color: #8B6914;
  background: #FBF2D2;
  border: 1px solid #F0E0A8;
  border-radius: 999px; padding: 3px 9px;
  line-height: 1.4;
}
.tour-tip-close {
  background: none; border: none; cursor: pointer;
  font-size: .9rem; color: var(--grey);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.tour-tip-close:hover { background: var(--cream); color: var(--ink); }

/* ---- Tooltip title + body ------------------------------------- */
.tour-tip-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  padding: 8px 16px 4px; line-height: 1.3;
  margin: 0;
}
.tour-tip-body {
  font-size: .84rem; color: var(--grey);
  line-height: 1.6; padding: 2px 16px 14px;
  margin: 0;
}
.tour-tip-body b { color: var(--ink); }

/* ---- Footer: dots + buttons ----------------------------------- */
.tour-tip-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--line);
  gap: 8px;
}
.tour-tip-dots {
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.tour-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid #C9A44E;
  background: transparent;
  cursor: pointer; padding: 0;
  transition: background .15s, width .15s;
}
.tour-dot.tour-dot-on {
  background: #C9A44E; width: 20px; border-radius: 4px;
}
.tour-tip-btns {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.tour-tip-skip {
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
  font-size: .78rem; font-weight: 600; color: var(--grey);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.tour-tip-skip:hover { border-color: var(--grey); color: var(--ink); }

.tour-tip-next {
  background: var(--ink); color: #fff;
  border: none; border-radius: 999px;
  padding: 6px 16px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: background .12s;
}
.tour-tip-next:hover { background: var(--purple); }
.tour-next-arrow { font-size: .9rem; }

/* ---- Arrow caret (points from tooltip toward element) ---------- */
.tour-tip-caret {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--white);
  border: 1px solid rgba(201,164,78,.35);
  pointer-events: none;
}
.tour-tip-caret-bottom { /* tooltip is BELOW element — caret at top */
  transform: rotate(-45deg) translateX(-50%);
  border-right: none; border-bottom: none;
  top: -8px;
}
.tour-tip-caret-top {    /* tooltip is ABOVE element — caret at bottom */
  transform: rotate(135deg) translateX(50%);
  border-right: none; border-bottom: none;
  bottom: -8px;
}
.tour-tip-caret-right {  /* tooltip is RIGHT of element — caret at left */
  transform: rotate(-135deg) translateY(-50%);
  border-right: none; border-bottom: none;
  left: -8px;
}
.tour-tip-caret-left {   /* tooltip is LEFT of element — caret at right */
  transform: rotate(45deg) translateY(50%);
  border-right: none; border-bottom: none;
  right: -8px;
}

/* ---- Mobile ---------------------------------------------------- */
@media (max-width: 480px) {
  .tour-tip { width: calc(100vw - 24px); }
  .tour-tip[style*="left"] { left: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════
   ONBOARDING — "Get Started" checklist panel
   Prefix: .ob-   No global side-effects.
   ═══════════════════════════════════════════════════════════ */

/* ---- ? help button (nav) ---------------------------------------- */
.ob-help-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--lav); color: var(--lav-ink);
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.ob-help-btn:hover  { background: var(--lav-line); transform: scale(1.08); }
.ob-help-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ---- Panel container -------------------------------------------- */
.ob-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 360px;
  max-height: min(540px, calc(100dvh - 80px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(76,46,114,.18), 0 4px 16px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  z-index: 900;
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.2,.64,1);
  pointer-events: none;
}
.ob-panel.ob-panel-visible {
  opacity: 1; transform: none; pointer-events: auto;
}

/* ---- Panel header ----------------------------------------------- */
.ob-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ob-panel-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--purple);
}
.ob-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--grey);
  padding: 2px 6px; border-radius: 6px;
  transition: color .12s, background .12s;
}
.ob-close:hover { color: var(--ink); background: var(--cream); }

/* ---- Progress bar ----------------------------------------------- */
.ob-panel-progress { padding: 14px 20px 10px; flex-shrink: 0; }
.ob-progress-label {
  font-size: .82rem; color: var(--grey);
  margin-bottom: 8px; line-height: 1.4;
}
.ob-progress-label b { color: var(--ink); }
.ob-progress-track {
  height: 6px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.ob-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #C9A44E);
  transition: width .55s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}

/* ---- Item list -------------------------------------------------- */
.ob-list {
  list-style: none;
  overflow-y: auto; flex: 1;
  padding: 6px 12px;
  /* thin custom scrollbar so it doesn't look clunky */
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.ob-list::-webkit-scrollbar { width: 4px; }
.ob-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.ob-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 10px;
  transition: background .12s;
}
.ob-item:hover { background: var(--cream); }

.ob-item-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.ob-item-body { flex: 1; min-width: 0; }
.ob-item-title {
  display: block; font-size: .88rem; font-weight: 700; color: var(--ink);
}
.ob-item-desc {
  display: block; font-size: .78rem; color: var(--grey);
  line-height: 1.4; margin-top: 1px;
}
.ob-item-done .ob-item-title { color: var(--grey); text-decoration: line-through; }
.ob-item-done .ob-item-desc  { opacity: .6; }

.ob-check {
  flex-shrink: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green); color: var(--green-ink);
  font-size: .85rem; font-weight: 900;
}

.ob-explore-btn {
  flex-shrink: 0;
  font-size: .75rem; font-weight: 700;
  color: var(--purple); background: var(--lav);
  border: none; border-radius: 999px;
  padding: 4px 10px; cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.ob-explore-btn:hover { background: var(--lav-line); }
.ob-explore-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ---- Footer ------------------------------------------------------ */
.ob-panel-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.ob-btn-ghost {
  background: none; border: none; cursor: pointer;
  font-size: .8rem; color: var(--grey);
  padding: 4px 0; text-decoration: underline;
  text-underline-offset: 2px;
}
.ob-btn-ghost:hover { color: var(--ink); }
.ob-btn-outline {
  font-size: .82rem; font-weight: 700;
  color: var(--purple);
  border: 1.5px solid var(--purple);
  border-radius: 999px; padding: 5px 14px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.ob-btn-outline:hover { background: var(--purple); color: #fff; }

/* ---- Mobile ----------------------------------------------------- */
@media (max-width: 480px) {
  .ob-panel {
    width: calc(100vw - 24px);
    right: 12px; bottom: 12px;
  }
}

/* ============ product tour ============ */

/* Floating relaunch button — bottom-left so it doesn't clash with chatbot */
#tour-fab {
  position: fixed; bottom: 28px; left: 28px; z-index: 9000;
  padding: 0 16px; height: 38px; border-radius: 999px;
  background: #1a2340; color: #fff;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 700;
  border: none; cursor: pointer; letter-spacing: .01em;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: background .15s, transform .15s;
}
#tour-fab:hover { background: #c9a227; color: #1a2340; transform: translateY(-2px); }

/* ── Popover card ── */
.pwtee-tour.driver-popover {
  background: #1e2a45 !important;           /* deep navy */
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3) !important;
  padding: 20px !important;
  min-width: 290px !important;
  max-width: 330px !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}

/* Title */
.pwtee-tour .driver-popover-title {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

/* Body text */
.pwtee-tour .driver-popover-description {
  font-size: 14px !important;
  color: rgba(255,255,255,.88) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Skip tour button (close) */
.pwtee-tour .driver-popover-close-btn {
  background: none !important; border: none !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 11px !important; font-weight: 600 !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  cursor: pointer !important; padding: 0 !important;
  line-height: 1 !important; letter-spacing: .03em !important;
  text-decoration: underline !important; text-underline-offset: 2px !important;
  transition: color .12s !important;
}
.pwtee-tour .driver-popover-close-btn:hover { color: rgba(255,255,255,.85) !important; }

/* Footer */
.pwtee-tour .driver-popover-footer {
  display: flex !important;
  align-items: center !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  gap: 8px !important;
}

/* "1 of 6" counter */
.pwtee-tour .driver-popover-progress-text {
  flex: 1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #c9a227 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Back button */
.pwtee-tour .driver-popover-prev-btn {
  background: rgba(255,255,255,.14) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  border-radius: 7px !important;
  color: #fff !important;
  font-size: 13px !important; font-weight: 700 !important;
  padding: 7px 14px !important; cursor: pointer !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  transition: background .12s !important;
}
.pwtee-tour .driver-popover-prev-btn:hover {
  background: rgba(255,255,255,.25) !important;
}
.pwtee-tour .driver-popover-prev-btn:disabled { opacity: .3 !important; }

/* Next / Done button */
.pwtee-tour .driver-popover-next-btn,
.pwtee-tour .driver-popover-done-btn {
  background: #c9a227 !important;
  border: none !important;
  border-radius: 7px !important;
  color: #1a1f30 !important;
  font-size: 13px !important; font-weight: 800 !important;
  padding: 7px 18px !important; cursor: pointer !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  letter-spacing: .01em !important;
  transition: background .12s !important;
}
.pwtee-tour .driver-popover-next-btn:hover,
.pwtee-tour .driver-popover-done-btn:hover { background: #e0b52a !important; }

/* ── Grade Pills & Score Modal Styles ────────────────────────────── */
.pap-grade-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 0.76rem;
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1.2;
  font-family: "Archivo", sans-serif;
  letter-spacing: 0.02em;
  transition: background .2s, color .2s, border-color .2s;
}
.grade-Astar, .grade-A { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
.grade-B     { background: #dbeafe !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.grade-C     { background: #fef9c3 !important; color: #a16207 !important; border: 1px solid #fef08a !important; }
.grade-D     { background: #ffedd5 !important; color: #c2410c !important; border: 1px solid #fed7aa !important; }
.grade-E     { background: #fce7f3 !important; color: #be185d !important; border: 1px solid #fbcfe8 !important; }
.grade-U     { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; }
.grade-none  { background: #f3f4f6 !important; color: #4b5563 !important; border: 1px solid #e5e7eb !important; }

/* ── Paper Marks Modal — Centred Dialog ──────────────────────── */
.paper-marks-panel {
  /* Override .quiz-panel right-side-panel positioning */
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: calc(100% - 40px) !important;
  max-width: 820px !important;
  max-height: 88vh !important;
  transform: translate(-50%, -50%);
  border-radius: 20px !important;
  border-left: none !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.28) !important;
  animation: pm-slide-in .26s cubic-bezier(.22,.9,.3,1) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--page) !important;
}
@keyframes pm-slide-in {
  from { transform: translate(-50%, calc(-50% + 18px)); opacity: 0; }
}
.paper-marks-panel .quiz-head {
  padding: 24px 24px 20px;
  border-bottom: 1.5px solid var(--line);
  flex-shrink: 0;
}
.pm-eyebrow {
  margin: 0 0 4px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.pm-title {
  margin: 0;
  font-size: 1.75rem;
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.15;
}

/* ── Note Banner ─────────────────────────────────────────────── */
.pm-note-banner {
  background: color-mix(in srgb, var(--gold) 8%, var(--page));
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  padding: 12px 24px;
  font-size: 0.82rem;
  color: var(--ink);
  flex-shrink: 0;
}
html[data-theme="dark"] .pm-note-banner {
  background: color-mix(in srgb, var(--gold) 10%, #1a1a2e);
}

/* ── Body ────────────────────────────────────────────────────── */
.pm-body { flex: 1; overflow-y: auto; }
.pm-table-wrap { overflow-x: auto; }

/* ── Table ───────────────────────────────────────────────────── */
.pm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.pm-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey);
  border-bottom: 1.5px solid var(--line);
  background: var(--page);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.pm-table tbody tr { transition: background .12s; }
.pm-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
.pm-table tbody tr:hover { background: color-mix(in srgb, var(--purple) 3%, var(--page)); }
.pm-table td { padding: 16px; vertical-align: middle; }

/* ── Variant cell ────────────────────────────────────────────── */
.pm-variant-code {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.pm-view-paper-link {
  font-size: 0.72rem;
  color: var(--purple-bright, #7c4dff) !important;
  text-decoration: none;
  display: block;
  margin-top: 4px;
  font-weight: 600;
  transition: opacity .15s;
}
.pm-view-paper-link:hover { opacity: .75; text-decoration: underline; }

/* ── Marks Input ─────────────────────────────────────────────── */
.pm-marks-input {
  display: block;
  width: 90px;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: center;
  background: var(--cream);
  transition: border-color .2s, box-shadow .2s;
  font-family: "Hanken Grotesk", sans-serif;
}
.pm-marks-input:focus {
  border-color: var(--purple);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 15%, transparent);
}
.pm-marks-input::placeholder { color: var(--grey); }

/* ── Type Badge ──────────────────────────────────────────────── */
.pm-type-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pm-type-mcq    { background: #eff6ff; color: #2563eb; }
.pm-type-theory { background: #ecfdf5; color: #059669; }

/* ── Grade Threshold Chips ───────────────────────────────────── */
.pm-tch-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-tch {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: .01em;
  /* colour provided by .grade-A / .grade-B / etc. */
}
.pm-no-thresh { font-size: 0.78rem; color: var(--grey); }

/* ── Grade Cell ──────────────────────────────────────────────── */
.pm-grade-cell { min-width: 44px; }

/* ── Footer ──────────────────────────────────────────────────── */
.pm-footer {
  border-top: 1.5px solid var(--line);
  padding: 16px 24px;
  flex-shrink: 0;
}
.pm-footer-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.pm-footer-actions .btn { min-width: 140px; font-weight: 700; }
.pm-footer-actions .btn-outline {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: transparent !important;
}
.pm-footer-actions .btn-outline:hover { background: var(--line) !important; }
.pm-footer-actions .btn-gold { color: #1a2340 !important; }

/* ── Responsive (≤ 600px) ────────────────────────────────────── */
@media (max-width: 600px) {
  .paper-marks-panel {
    top: 0 !important; left: 0 !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
    transform: none !important;
    animation: none !important;
  }
  .pm-table thead { display: none; }
  .pm-table, .pm-table tbody, .pm-table tr, .pm-table td {
    display: block; width: 100%;
  }
  .pm-table tr {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 14px; margin: 0 16px 12px; width: calc(100% - 32px);
  }
  .pm-table td {
    border: none; padding: 4px 0;
    display: flex; justify-content: space-between;
    align-items: center; gap: 8px;
  }
  .pm-table td::before {
    content: attr(data-label);
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--grey); flex-shrink: 0;
  }
  .pm-marks-input { width: 70px; }
  .pm-tch-row { gap: 3px; }
}

/* ── Progress Rings Component ────────────────────────────────── */
.progress-rings-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 0 16px;
}
.progress-ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  position: relative;
}
.progress-ring-card .ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
}
.progress-ring-card .progress-ring {
  width: 88px;
  height: 88px;
}
.progress-ring-card .ring-track {
  fill: none;
  stroke: var(--line, #e5e7eb);
  stroke-width: 6;
}
.progress-ring-card .ring-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: ring-fill-in 0.8s ease-out forwards;
}
.progress-ring-card .ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Archivo", sans-serif;
}
.progress-ring-card .ring-center-pct {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.progress-ring-card .ring-center-pct em {
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
}
.progress-ring-card .ring-center-text {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--grey);
  line-height: 1.2;
  text-align: center;
  max-width: 60px;
}
.progress-ring-card .ring-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
}
@keyframes ring-fill-in {
  from { stroke-dashoffset: var(--ring-circumference, 240); }
}

/* Ring color variants */
.ring-color-green  { stroke: #22c55e; }
.ring-color-blue   { stroke: #6366f1; }
.ring-color-gold   { stroke: #eab308; }
.ring-color-lav    { stroke: #8b5cf6; }
.ring-color-orange { stroke: #f97316; }
.ring-color-teal   { stroke: #14b8a6; }
.ring-color-pink   { stroke: #ec4899; }

/* Hover/tap tooltip for rings */
.progress-ring-card .ring-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.progress-ring-card:hover .ring-tooltip,
.progress-ring-card:focus-within .ring-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Cross-link pills between pages */
.progress-cross-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.progress-cross-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--page);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.progress-cross-link:hover {
  background: color-mix(in srgb, var(--purple) 8%, var(--page));
  border-color: var(--purple);
}
.progress-cross-link.is-current {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

@media (max-width: 640px) {
  .progress-rings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .progress-ring-card { min-width: 0; }
  .progress-ring-card .ring-wrap { width: 76px; height: 76px; }
  .progress-ring-card .progress-ring { width: 76px; height: 76px; }
  .progress-ring-card .ring-center-pct { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE
   Toggled by html[data-theme="dark"]. Restored instantly via an
   inline <script> in each page's <head> before CSS paints.
   Preference saved in localStorage key "theme".
════════════════════════════════════════════════════════════════ */

/* ── Token overrides ─────────────────────────────────────────── */
html[data-theme="dark"] {
  --page:         #0e0e1c;
  --cream:        #15152a;
  --white:        #1c1c34;
  --line:         #2a2a48;
  --ink:          #e4e0f8;
  --grey:         #8a87b0;
  --purple:       #c0b0f8;
  --purple-bright:#d4c4ff;
  --navy:         #a898e8;
  --navy-deep:    #8878c8;
  --gold:         #f59e0b;
  --lav:    #1e1a38; --lav-ink:    #c4b4fc; --lav-line:    #3a3268;
  --pink:   #301428; --pink-ink:   #f090c0; --pink-line:   #582040;
  --green:  #0c2418; --green-ink:  #5dde96; --green-line:  #1a4830;
  --orange: #281608; --orange-ink: #f0a860; --orange-line: #4a2c10;
  --yellow: #261a04; --yellow-ink: #f2d464; --yellow-line: #4a3408;
  --blue:   #0c1a30; --blue-ink:   #64b4fc; --blue-line:   #163060;
  --teal:   #081e22; --teal-ink:   #44dcd0; --teal-line:   #104040;
}

/* ── Global surfaces ────────────────────────────────────────── */
html[data-theme="dark"] body { background: var(--page); color: var(--ink); }

/* Custom button overrides in dark mode */
html[data-theme="dark"] .btn-dark {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-bright) 100%) !important;
  color: #100a26 !important;
  box-shadow: 0 4px 18px rgba(124, 92, 252, 0.25) !important;
}
html[data-theme="dark"] .btn-dark:hover {
  box-shadow: 0 6px 24px rgba(124, 92, 252, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Header — hardcoded rgba overridden */
html[data-theme="dark"] .site-header {
  background: rgba(8, 8, 20, 0.97) !important;
  border-bottom-color: var(--line);
}

/* Nav dropdown panels */
html[data-theme="dark"] .nav-group-panel {
  background: #18182e;
  border-color: var(--line);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
html[data-theme="dark"] .nav-drop-item { color: var(--ink); }
html[data-theme="dark"] .nav-drop-item:hover { background: #22203c; }
html[data-theme="dark"] .nav-mega-overview { background: #22203c; }
html[data-theme="dark"] .nav-mega-head { color: var(--grey); }

/* ── White-background cards → cream surface ─────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .board-card,
html[data-theme="dark"] .subject-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .hub-card,
html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .apply-panel,
html[data-theme="dark"] .q-lightbox-box,
html[data-theme="dark"] .includes li,
html[data-theme="dark"] .step:nth-child(3) {
  background: var(--cream) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}

/* Dashboard hub cards */
html[data-theme="dark"] .hub-card { background: var(--cream); border-color: var(--line); }
html[data-theme="dark"] .hub-hero { background: var(--cream); border-color: var(--line); }

/* ── Inputs / selects / textareas ───────────────────────────── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1a1830 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--grey) !important; }

/* ── Pill / tag buttons with white bg ───────────────────────── */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .btn-white { background: #1a1830; color: var(--ink); border-color: var(--line); }

/* ── Section alternates ──────────────────────────────────────── */
html[data-theme="dark"] .section-alt { background: var(--cream); }
html[data-theme="dark"] .hero-section { background: var(--page); }

/* ── Account / notification dropdowns ───────────────────────── */
html[data-theme="dark"] .account-dropdown,
html[data-theme="dark"] .notif-panel {
  background: #18182e;
  border-color: var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
}
html[data-theme="dark"] .account-dropdown a,
html[data-theme="dark"] .account-dropdown button { color: var(--ink); }
html[data-theme="dark"] .account-dropdown a:hover,
html[data-theme="dark"] .account-dropdown button:hover { background: #252448; }
html[data-theme="dark"] .notif-item:hover { background: #22203c; }
html[data-theme="dark"] .notif-item-time { color: var(--grey); }

/* ── Dashboard hub specific ─────────────────────────────────── */
html[data-theme="dark"] .hub-xp-bar-track { background: var(--line); }
html[data-theme="dark"] .hub-stat-pill { background: var(--cream); border-color: var(--line); }
html[data-theme="dark"] .hub-card-tag { background: var(--lav); color: var(--lav-ink); }
html[data-theme="dark"] .page-back-bar { background: var(--cream); border-color: var(--line); }

/* ── Navbar: account pill + bell (hardcoded #fff) ───────────────── */
html[data-theme="dark"] .account-trigger {
  background: var(--cream); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .account-trigger:hover {
  border-color: var(--purple); box-shadow: 0 4px 16px rgba(168,140,232,.18);
}
html[data-theme="dark"] .account-trigger svg { color: var(--grey); }
html[data-theme="dark"] .notif-btn {
  background: var(--cream); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .notif-btn:hover {
  border-color: var(--purple); color: var(--purple);
  box-shadow: 0 4px 16px rgba(168,140,232,.18);
}

/* ── Topic pills (generator / papers page) ───────────────────────── */
html[data-theme="dark"] .topic { background: var(--cream); color: var(--ink); }
html[data-theme="dark"] .topic:hover { background: var(--green); border-color: var(--green-ink); color: var(--green-ink); }
html[data-theme="dark"] .topic.on { background: var(--green); border-color: var(--green-ink); color: var(--green-ink); font-weight: 600; }
html[data-theme="dark"] .topic.on .n { color: var(--green-ink); opacity: .7; }

/* ── Topic rows (revise / progress tracker) ──────────────────────── */
html[data-theme="dark"] .topic-row { background: var(--cream); }
html[data-theme="dark"] .topic-name,
html[data-theme="dark"] .topic-toggle { color: var(--ink); }

/* ── Paper generator card, pill, btn-white ───────────────────────── */
html[data-theme="dark"] .pill { background: var(--cream); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .pill.active { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; box-shadow: 0 4px 14px rgba(136,120,200,.35); }
html[data-theme="dark"] .filter-pill.active { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
html[data-theme="dark"] .btn-white { background: var(--cream); color: var(--ink); border-color: var(--line); }

/* ── Hardcoded warm-cream gradients (not CSS-var, must be overridden) ── */
html[data-theme="dark"] .hero {
  background: linear-gradient(160deg, #0e0e1c 0%, #15152a 60%, #1a1a32 100%);
}
html[data-theme="dark"] .hero::before {
  background: radial-gradient(circle, rgba(168,140,232,.08) 0%, transparent 70%);
}
html[data-theme="dark"] .hero .sub { color: var(--ink); }
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero-stats b { color: var(--navy); }

html[data-theme="dark"] .section-cream {
  background: linear-gradient(160deg, #12122a 0%, #181830 100%);
}

/* All .step cards, not just :nth-child(3) */
html[data-theme="dark"] .step { background: var(--cream); }

/* .includes alternating row — #fffef8 warm-white override */
html[data-theme="dark"] .includes li,
html[data-theme="dark"] .includes li:nth-child(odd) {
  background: var(--cream) !important;
}

/* Chip/tag with cream bg */
html[data-theme="dark"] .chip.live { background: var(--cream); color: var(--navy); }
html[data-theme="dark"] .chip-comp { background: var(--cream); color: var(--ink); }

/* Resource card .tag */
html[data-theme="dark"] .resource-card .tag { background: var(--cream); color: var(--navy); }

/* Preview badge subtopic */
html[data-theme="dark"] .prev-badge.subtopic { background: var(--cream); color: var(--grey); }

/* Booking card option hover */
html[data-theme="dark"] .bkc-opt:hover,
html[data-theme="dark"] .bkc-opt.primary { background: var(--cream); }

/* ── Revise page: pills and status buttons ───────────────────── */
html[data-theme="dark"] .revise-pill { background: var(--cream); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .status-btn.on.status-not_started { background: var(--cream); color: var(--ink); }

/* ── Auth cards ──────────────────────────────────────────────── */
html[data-theme="dark"] .auth-card { background: var(--cream); border-color: var(--line); }
html[data-theme="dark"] .auth-google-btn { background: var(--cream); border-color: var(--line); color: var(--ink); }

/* ── Teacher page cards ──────────────────────────────────────── */
html[data-theme="dark"] .teacher-card { background: var(--cream); border-color: var(--line); }

/* ── Photo placeholder ───────────────────────────────────────── */
html[data-theme="dark"] .photo-ph { background: var(--cream); border-color: var(--line); }

/* ── Flashcards page: continue strip + type pills ────────────── */
html[data-theme="dark"] .cc { background: var(--cream); border-color: var(--line); }
html[data-theme="dark"] .sl-pill { background: var(--cream); color: var(--grey); border-color: var(--line); }
html[data-theme="dark"] .sl-pill.active { background: var(--navy); color: #fff; }
html[data-theme="dark"] .sl-sel { background: #1a1830; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .sl-search { background: #1a1830; color: var(--ink); border-color: var(--line); }

/* ── Dark mode toggle button (mounted by auth.js) ───────────── */
.dm-toggle {
  background: none; border: 1.5px solid var(--line); border-radius: 10px;
  width: 34px; height: 34px; cursor: pointer; font-size: .95rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); transition: border-color .15s, background .15s; flex-shrink: 0;
  padding: 0; margin-right: 4px;
}
.dm-toggle:hover { border-color: var(--gold); background: var(--cream); }

/* ── Dark Mode Modal Polishes ────────────────────────────────── */
html[data-theme="dark"] .grade-none {
  background: rgba(255,255,255,0.06) !important;
  color: var(--grey) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
html[data-theme="dark"] .pm-table th {
  background: #111124 !important;
}
html[data-theme="dark"] .pm-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}
html[data-theme="dark"] .pm-marks-input {
  background: #0f101d !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
html[data-theme="dark"] .pm-marks-input:focus {
  border-color: var(--purple-bright) !important;
}

/* ── Yearly progress: paper list ─────────────────────────────── */
html[data-theme="dark"] .pap-year {
  background: var(--cream);
}
html[data-theme="dark"] .pap-fbtn {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .pap-fbtn:hover {
  background: var(--white);
  border-color: var(--purple-bright);
}
html[data-theme="dark"] .pap-btn {
  background: var(--cream);
  color: var(--grey);
  border-right-color: var(--line);
}
html[data-theme="dark"] .pap-btn:hover {
  background: var(--white);
  color: var(--ink);
}
html[data-theme="dark"] .pap-btn.on.pap-not_started {
  background: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .pp-seg-topic {
  background: var(--cream);
}

/* ── Grade pills: dark mode (override hardcoded light colours) ── */
html[data-theme="dark"] .grade-Astar,
html[data-theme="dark"] .grade-A {
  background: #052e16 !important;
  color: #86efac !important;
  border-color: #166534 !important;
}
html[data-theme="dark"] .grade-B {
  background: #1e3a5f !important;
  color: #93c5fd !important;
  border-color: #1d4ed8 !important;
}
html[data-theme="dark"] .grade-C {
  background: #451a03 !important;
  color: #fcd34d !important;
  border-color: #78350f !important;
}
html[data-theme="dark"] .grade-D {
  background: #431407 !important;
  color: #fdba74 !important;
  border-color: #7c2d12 !important;
}
html[data-theme="dark"] .grade-E {
  background: #4a044e !important;
  color: #f0abfc !important;
  border-color: #86198f !important;
}
html[data-theme="dark"] .grade-U {
  background: #450a0a !important;
  color: #fca5a5 !important;
  border-color: #7f1d1d !important;
}

/* ── Marks modal: MCQ/Theory type badges ─────────────────────── */
html[data-theme="dark"] .pm-type-mcq {
  background: #1e3a5f;
  color: #93c5fd;
}
html[data-theme="dark"] .pm-type-theory {
  background: #052e16;
  color: #86efac;
}

/* ══════════════════════════════════════════════════════════════════
   GRADE CALCULATOR + GRADE TRENDS
   ══════════════════════════════════════════════════════════════════ */

/* ── Selectors bar ───────────────────────────────────────────── */
.gc-selectors {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}
.gc-sel-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
  flex: 1;
  max-width: 260px;
}
.gc-sel-group label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.gc-select {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s;
}
.gc-select:focus {
  outline: none;
  border-color: var(--purple-bright, #7c5cfc);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.12);
}
.gc-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Empty state ─────────────────────────────────────────────── */
.gc-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.gc-empty-icon {
  font-size: 3.2rem;
  margin-bottom: 12px;
  opacity: 0.55;
}
.gc-empty p {
  font-size: 1.05rem;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Component table ─────────────────────────────────────────── */
.gc-table-wrap { overflow-x: auto; }
.gc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}
.gc-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
}
.gc-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.gc-table tbody tr {
  transition: background 0.15s;
}
.gc-table tbody tr:hover {
  background: rgba(124,92,252,0.03);
}
.gc-comp-code {
  display: inline-block;
  background: linear-gradient(135deg, var(--purple-bright, #7c5cfc), #a78bfa);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  margin-right: 8px;
  font-family: 'Archivo', sans-serif;
}
.gc-comp-label {
  font-size: 0.85rem;
  color: var(--muted);
}
.gc-marks-input {
  width: 80px;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gc-marks-input:focus {
  outline: none;
  border-color: var(--purple-bright, #7c5cfc);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.15);
}
.gc-marks-input::placeholder { color: var(--muted); opacity: 0.5; }
.gc-bar-col { min-width: 110px; }

/* ── Overall grade summary ───────────────────────────────────── */
.gc-summary {
  margin: 32px 0;
}
.gc-summary-title {
  font-family: 'Archivo', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 20px;
}
.gc-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.gc-option-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.gc-option-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.gc-option-complete {
  border-color: rgba(124,92,252,0.3);
}
.gc-option-incomplete {
  opacity: 0.7;
}
.gc-option-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gc-option-code {
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.gc-as-badge {
  display: inline-block;
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.04em;
}
.gc-option-comps {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gc-comp-chip {
  display: inline-block;
  background: rgba(124,92,252,0.08);
  color: var(--purple-bright, #7c5cfc);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  font-family: 'Archivo', monospace;
}
.gc-option-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.gc-option-marks {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.gc-option-pct {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 600;
}
.gc-option-grade {
  margin-top: 4px;
}
.gc-big-grade {
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}
.gc-big-grade.grade-Astar { color: #16a34a; }
.gc-big-grade.grade-A     { color: #22c55e; }
.gc-big-grade.grade-B     { color: #3b82f6; }
.gc-big-grade.grade-C     { color: #a855f7; }
.gc-big-grade.grade-D     { color: #f59e0b; }
.gc-big-grade.grade-E     { color: #ef4444; }
.gc-big-grade.grade-F     { color: #dc2626; }
.gc-big-grade.grade-G     { color: #991b1b; }
.gc-big-grade.grade-U     { color: var(--muted); }
.gc-big-grade.grade-none  { color: var(--muted); opacity: 0.4; }
.gc-option-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 8px;
  font-style: italic;
}

/* ── Predicted grade card (new layout) ───────────────────────── */
.gc-option-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gc-card-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.gc-card-hero {
  display: flex;
  align-items: flex-end;
  gap: 0;
  background: var(--surface2, var(--surface));
  border-radius: 10px;
  padding: 14px 16px;
  gap: 16px;
}
.gc-card-hero-left { flex: 1; }
.gc-card-hero-right {
  flex: 1;
  text-align: right;
}
.gc-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 4px;
}
.gc-card-score {
  font-family: 'Archivo', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.gc-card-score-max {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.gc-astar-note {
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(124,92,252,0.07);
  border: 1px solid rgba(124,92,252,0.15);
  border-radius: 8px;
  padding: 7px 10px;
}
.gc-astar-note.is-hit {
  color: #16a34a;
  background: rgba(22,163,74,0.07);
  border-color: rgba(22,163,74,0.2);
}
.gc-dist-section {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.gc-dist-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 7px;
}
.gc-dist-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.gc-dist-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  background: currentColor;
}
.gc-dist-pill em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.85);
}
.gc-dist-pill { color: var(--muted); background: var(--surface2,var(--surface)); border:1px solid var(--line); }
.gc-dist-pill.grade-Astar { color:#fff; background:#16a34a; border-color:#16a34a; }
.gc-dist-pill.grade-A     { color:#fff; background:#22c55e; border-color:#22c55e; }
.gc-dist-pill.grade-B     { color:#fff; background:#3b82f6; border-color:#3b82f6; }
.gc-dist-pill.grade-C     { color:#fff; background:#a855f7; border-color:#a855f7; }
.gc-dist-pill.grade-D     { color:#fff; background:#f59e0b; border-color:#f59e0b; }
.gc-dist-pill.grade-E     { color:#fff; background:#ef4444; border-color:#ef4444; }
.gc-dist-pill.grade-U     { color:var(--muted); }
.gc-history-btn {
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}
.gc-history-btn:hover { border-color: var(--purple-bright); color: var(--purple-bright); }
.gc-breakdown-panel {
  overflow-x: auto;
  width: 100%;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.gc-breakdown-table {
  width: 100%;
  font-size: 0.72rem;
  text-align: left;
  border-collapse: collapse;
}
.gc-breakdown-table th {
  padding: 4px 6px 4px 0;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.gc-breakdown-table td {
  padding: 6px 6px 6px 0;
  border-bottom: 1px solid rgba(128,128,128,0.07);
  vertical-align: middle;
}
.gc-bnd-cell { color: var(--muted); font-size: 0.65rem; }

/* ── Option thresholds reference table ────────────────────────── */
.gc-thresh-ref {
  margin-top: 32px;
}
.gc-thresh-ref h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gc-thresh-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  overflow-x: auto;
  display: block;
}
.gc-thresh-table th {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
}
.gc-thresh-table td {
  text-align: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.gc-thresh-table td:first-child,
.gc-thresh-table th:first-child { text-align: left; }

/* ── Grade Trends ────────────────────────────────────────────── */
.gt-tabs {
  display: flex;
  gap: 4px;
  margin: 20px 0 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.gt-tab {
  padding: 8px 20px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s;
}
.gt-tab:hover { color: var(--text); }
.gt-tab.active {
  background: linear-gradient(135deg, var(--purple-bright, #7c5cfc), #a78bfa);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,92,252,0.25);
}
.gt-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.gt-chart-wrap {
  position: relative;
  min-height: 360px;
  max-height: 500px;
  margin-bottom: 28px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
}
.gt-table-wrap {
  overflow-x: auto;
  margin-bottom: 32px;
}
.gt-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}
.gt-data-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.gt-data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.gt-data-table tbody tr:hover {
  background: rgba(124,92,252,0.03);
}
.gt-sortable {
  cursor: pointer !important;
  user-select: none;
}
.gt-sortable:hover {
  color: var(--purple-bright, #7c5cfc);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .gc-selectors { flex-direction: column; }
  .gc-sel-group { max-width: 100%; }
  .gc-options-grid { grid-template-columns: 1fr; }
  .gt-filters { flex-direction: column; }
  .gt-tabs { flex-wrap: wrap; }
  .gc-table th:nth-child(6),
  .gc-table td:nth-child(6) { display: none; } /* hide bar on mobile */
  .gc-table,
  .gt-data-table { font-size: 0.82rem; }
}

/* ── Dark mode ───────────────────────────────────────────────── */
html[data-theme="dark"] .gc-select {
  background: #0f101d;
  border-color: rgba(255,255,255,0.12);
  color: #eee;
}
html[data-theme="dark"] .gc-select:focus {
  border-color: var(--purple-bright);
}
html[data-theme="dark"] .gc-marks-input {
  background: #0f101d;
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
html[data-theme="dark"] .gc-marks-input:focus {
  border-color: var(--purple-bright);
}
html[data-theme="dark"] .gc-option-card {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .gc-option-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border-color: rgba(124,92,252,0.25);
}
html[data-theme="dark"] .gc-comp-chip {
  background: rgba(124,92,252,0.15);
}
html[data-theme="dark"] .gt-tabs {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .gt-chart-wrap {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .gc-table tbody tr:hover,
html[data-theme="dark"] .gt-data-table tbody tr:hover {
  background: rgba(255,255,255,0.02);
}

/* ==========================================================================
   AI TUTOR — Full-Page Chat Experience (.tc-* scoped)
   Everything prefixed .tc- so it cannot leak into shared component styles.
   ========================================================================== */

/* ── Root layout ── */
#tutor-app {
  display: grid;
  grid-template-columns: 272px 1fr;
  grid-template-rows: 1fr;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px); /* dvh = dynamic viewport, avoids iOS Safari chrome-overlap */
  overflow: hidden;
  background: var(--page);
}
#tutor-app.right-open { grid-template-columns: 272px 1fr 300px; }

/* ── Left sidebar ── */
#tutor-left {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-right: 1.5px solid var(--line);
  overflow: hidden;
}
.tc-left-top {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.tc-new-chat {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 10px 14px;
  background: var(--purple); color: #fff;
  border: none; border-radius: 12px; cursor: pointer;
  font: 600 .9rem 'Hanken Grotesk', sans-serif;
  transition: background .15s, transform .1s;
  text-align: center;
}
.tc-new-chat:hover { background: var(--purple-bright); transform: translateY(-1px); }
.tc-new-chat svg { flex-shrink: 0; }

.tc-context-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey); margin: 14px 0 6px;
}
.tc-subject-select {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--line);
  border-radius: 9px; background: var(--page); color: var(--ink);
  font: 500 .87rem 'Hanken Grotesk', sans-serif; cursor: pointer;
  transition: border-color .15s;
}
.tc-subject-select:focus { outline: none; border-color: var(--purple-bright); }

/* Mode toggles */
.tc-mode-row { display: flex; gap: 6px; margin-top: 10px; }
.tc-mode-btn {
  flex: 1; padding: 7px 10px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--page); color: var(--grey);
  font: 600 .78rem 'Hanken Grotesk', sans-serif; cursor: pointer;
  transition: all .15s; text-align: center; line-height: 1.3;
}
.tc-mode-btn:hover { border-color: var(--purple-bright); color: var(--purple); }
.tc-mode-btn.active {
  background: var(--lav); border-color: var(--lav-line);
  color: var(--purple); box-shadow: 0 0 0 2px rgba(107,63,160,.15);
}
.tc-mode-btn.active.socratic { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.tc-mode-btn.active.exam     { background: #ecfdf5; border-color: #10b981; color: #065f46; }

/* Session list */
.tc-sessions-scroll {
  flex: 1; overflow-y: auto; padding: 8px 10px 16px;
}
.tc-date-group { margin-bottom: 4px; }
.tc-date-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey);
  padding: 10px 6px 4px; display: block;
}
.tc-session-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px;
  cursor: pointer; font-size: .87rem; color: var(--ink);
  transition: background .12s, color .12s;
  position: relative;
}
.tc-session-item:hover { background: var(--lav); }
.tc-session-item.active { background: var(--lav); color: var(--purple); font-weight: 600; }
.tc-session-icon { font-size: 1rem; flex-shrink: 0; }
.tc-session-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; }
.tc-session-sub { font-size: .72rem; color: var(--grey); display: block; margin-top: 1px; }
.tc-session-acts { display: none; gap: 2px; flex-shrink: 0; }
.tc-session-item:hover .tc-session-acts { display: flex; }
.tc-session-act {
  background: none; border: none; cursor: pointer;
  font-size: .82rem; padding: 3px 4px; border-radius: 5px;
  color: var(--grey); transition: color .12s, background .12s;
}
.tc-session-act:hover { background: rgba(0,0,0,.07); color: var(--ink); }
.tc-no-sessions { text-align: center; color: var(--grey); padding: 28px 16px; font-size: .88rem; }

/* ── Center panel ── */
#tutor-center {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--page);
}

/* Chat header bar */
.tc-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--white);
  border-bottom: 1.5px solid var(--line); flex-shrink: 0;
  gap: 12px;
}
.tc-chat-title { font: 600 1rem 'Hanken Grotesk', sans-serif; color: var(--ink); min-width: 0; flex: 1; }
.tc-chat-title span { display: block; font-size: .72rem; font-weight: 500; color: var(--grey); }
.tc-header-btns { display: flex; gap: 6px; flex-shrink: 0; }
.tc-icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--page);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--grey); font-size: .9rem; transition: all .15s;
}
.tc-icon-btn:hover { background: var(--lav); border-color: var(--lav-line); color: var(--purple); }
.tc-mode-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font: 600 .72rem 'Hanken Grotesk', sans-serif;
  background: #fef3c7; color: #92400e; flex-shrink: 0;
}
.tc-mode-badge.exam { background: #ecfdf5; color: #065f46; }
.tc-mode-badge.hidden { display: none; }

/* Messages area */
#tutor-messages {
  flex: 1; overflow-y: auto; padding: 28px 10%;
  scroll-behavior: smooth;
}
@media (max-width: 1100px) { #tutor-messages { padding: 24px 6%; } }
@media (max-width: 800px)  { #tutor-messages { padding: 20px 16px; } }

/* Empty / welcome state */
.tc-welcome {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 60vh; text-align: center; padding: 32px 16px;
}
@media (max-width: 600px) {
  .tc-welcome { min-height: 0; padding: 24px 16px; }
  .tc-welcome-owl { width: 60px; height: 60px; font-size: 2.1rem; margin-bottom: 12px; }
  .tc-welcome h2 { font-size: 1.2rem; }
  .tc-starter-chip { font-size: .82rem; padding: 8px 12px; }
}
.tc-welcome-owl {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #f59e0b 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(232,145,58,.30);
  animation: tc-owl-float 4s ease-in-out infinite;
}
@keyframes tc-owl-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.03); }
}
.tc-welcome h2 { font: 800 1.5rem 'Archivo', sans-serif; color: var(--ink); margin: 0 0 8px; }
.tc-welcome p  { color: var(--grey); max-width: 42ch; margin: 0 auto 28px; line-height: 1.6; }
.tc-starter-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 580px;
}
.tc-starter-chip {
  padding: 9px 16px; border-radius: 24px;
  border: 1.5px solid var(--line); background: var(--white);
  color: var(--ink); font: 500 .88rem 'Hanken Grotesk', sans-serif;
  cursor: pointer; transition: all .15s; line-height: 1.3; text-align: left;
}
.tc-starter-chip:hover {
  border-color: var(--purple-bright); background: var(--lav); color: var(--purple);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(107,63,160,.12);
}

/* Message rows */
.tc-msg {
  display: flex; gap: 10px; margin-bottom: 22px; align-items: flex-start;
  animation: tc-msg-in .22s ease both;
}
@keyframes tc-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tc-msg.user { flex-direction: row-reverse; }

/* Avatar */
.tc-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  margin-top: 2px;
}
.tc-avatar.owl {
  background: linear-gradient(135deg, #f6d860 0%, var(--gold) 100%);
  box-shadow: 0 2px 8px rgba(232,145,58,.25);
}
.tc-avatar.user {
  background: var(--purple); color: #fff;
  font: 700 .82rem 'Archivo', sans-serif;
}

/* Bubble */
.tc-bubble {
  max-width: min(640px, 72%); padding: 14px 18px;
  border-radius: 18px; line-height: 1.6; position: relative;
}
.tc-msg.user .tc-bubble {
  background: var(--purple); color: #fff;
  border-radius: 18px 18px 4px 18px;
}
.tc-msg.bot .tc-bubble {
  background: var(--white); border: 1.5px solid var(--line);
  color: var(--ink); border-radius: 18px 18px 18px 4px;
  box-shadow: 0 2px 8px rgba(26,26,46,.05);
}
.tc-bubble h3 { font: 700 1rem 'Hanken Grotesk', sans-serif; color: var(--purple); margin: 16px 0 6px; }
.tc-bubble h3:first-child { margin-top: 0; }
.tc-bubble p { margin: 0 0 10px; }
.tc-bubble p:last-child { margin-bottom: 0; }
.tc-bubble ol, .tc-bubble ul { margin: 8px 0; padding-left: 22px; }
.tc-bubble li { margin-bottom: 8px; }
.tc-bubble strong { font-weight: 700; }
.tc-bubble .step {
  background: var(--cream); border-left: 3px solid var(--gold);
  padding: 8px 14px; border-radius: 0 8px 8px 0; margin: 8px 0;
  font-size: .93rem;
}
.tc-bubble .err { color: #9b2c2c; font-weight: 500; }

/* Inline images in user bubble */
.tc-bubble img { max-width: 220px; max-height: 200px; border-radius: 10px; display: block; margin: 6px 0; }

/* Collapsible details/summary accordions inside tutor bubbles */
.tc-bubble details {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 12px 0;
  padding: 12px 16px;
  transition: all 0.2s ease;
}
.tc-bubble details[open] {
  border-color: var(--gold);
  background: rgba(224, 107, 0, 0.03);
}
.tc-bubble summary {
  font-weight: 600;
  font-family: 'Hanken Grotesk', sans-serif;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  user-select: none;
  list-style: none;
}
.tc-bubble summary::-webkit-details-marker {
  display: none;
}
.tc-bubble summary::before {
  content: "▶";
  color: var(--gold);
  display: inline-block;
  margin-right: 10px;
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}
.tc-bubble details[open] > summary::before {
  transform: rotate(90deg);
}
.tc-bubble details p {
  margin: 10px 0 0 0 !important;
  color: var(--ink);
}
.tc-bubble details ol, .tc-bubble details ul {
  margin: 10px 0 0 0 !important;
}

/* Typing dots inside bot bubble */
.tc-typing { display: flex; gap: 5px; align-items: center; padding: 4px 0; }
.tc-typing span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--grey);
  animation: tc-dot 1.2s infinite;
}
.tc-typing span:nth-child(2) { animation-delay: .2s; }
.tc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes tc-dot { 0%,60%,100% { opacity:.2; transform: scale(.8); } 30% { opacity:1; transform: scale(1); } }

/* Message action bar */
.tc-msg-acts {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; opacity: 0; transition: opacity .15s;
}
.tc-msg:hover .tc-msg-acts { opacity: 1; }
.tc-act-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--page); color: var(--grey);
  font: 500 .75rem 'Hanken Grotesk', sans-serif; cursor: pointer;
  transition: all .12s;
}
.tc-act-btn:hover { border-color: var(--purple-bright); color: var(--purple); background: var(--lav); }
.tc-act-btn.active { background: var(--lav); color: var(--purple); border-color: var(--lav-line); }

/* Suggestion chips after AI response */
.tc-suggestions {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.tc-sug-chip {
  padding: 6px 12px; border-radius: 20px;
  border: 1.5px solid var(--line); background: var(--page);
  color: var(--grey); font: 500 .78rem 'Hanken Grotesk', sans-serif;
  cursor: pointer; transition: all .12s;
}
.tc-sug-chip:hover { border-color: var(--purple-bright); background: var(--lav); color: var(--purple); }

/* Code blocks inside bubbles */
.tc-bubble pre {
  background: #1e1e2e; color: #cdd6f4;
  border-radius: 10px; padding: 14px 16px;
  overflow-x: auto; font: .85rem/1.5 'Courier New', monospace;
  margin: 10px 0;
}
.tc-bubble code { font: .88rem/1.4 'Courier New', monospace; }
.tc-bubble :not(pre) > code {
  background: rgba(107,63,160,.1); color: var(--purple);
  padding: 2px 6px; border-radius: 4px;
}

/* ── Sticky input bar ── */
#tutor-input-bar {
  flex-shrink: 0; padding: 14px 10%;
  /* env() covers iPhone home-indicator safe area; falls back to 0 on non-notch devices */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--white); border-top: 1.5px solid var(--line);
}
@media (max-width: 1100px) { #tutor-input-bar { padding: 12px 6%; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 800px)  { #tutor-input-bar { padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }

.tc-input-wrap {
  display: flex; flex-direction: column; gap: 0;
  border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--page); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.tc-input-wrap:focus-within {
  border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px rgba(107,63,160,.1);
}
.tc-attach-strip {
  display: none; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px 0;
}
.tc-attach-strip.has-files { display: flex; }
.tc-thumb {
  position: relative; width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
}
.tc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-thumb-rm {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,.65); color: #fff; border: none;
  border-radius: 50%; width: 16px; height: 16px; font-size: .6rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tc-input-row {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px;
}
.tc-textarea {
  flex: 1; resize: none; border: none; background: transparent;
  color: var(--ink); font: inherit; font-size: .96rem;
  max-height: 160px; outline: none; line-height: 1.5;
}
.tc-textarea::placeholder { color: var(--grey); }
.tc-input-actions { display: flex; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.tc-input-icon {
  width: 36px; height: 36px; border-radius: 9px; border: 1.5px solid var(--line);
  background: var(--page); color: var(--grey); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; transition: all .15s; flex-shrink: 0;
}
.tc-input-icon:hover { background: var(--lav); border-color: var(--lav-line); color: var(--purple); }
.tc-input-icon.recording { background: #e53e3e; border-color: #e53e3e; color: #fff; animation: tc-pulse-red .8s infinite; }
@keyframes tc-pulse-red { 0%,100%{opacity:1}50%{opacity:.6} }
.tc-send {
  height: 36px; padding: 0 18px; border-radius: 10px;
  background: var(--purple); color: #fff; border: none;
  font: 700 .88rem 'Hanken Grotesk', sans-serif; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: background .15s, transform .1s; flex-shrink: 0;
}
.tc-send:hover:not(:disabled) { background: var(--purple-bright); transform: translateY(-1px); }
.tc-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Drop overlay */
.tc-drop-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(107,63,160,.92); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  border-radius: 16px; color: #fff; text-align: center;
}
.tc-drop-overlay.visible { display: flex; }
.tc-drop-overlay b { font: 800 1.3rem 'Archivo', sans-serif; display: block; margin-top: 10px; }

/* ── Right panel ── */
#tutor-right {
  display: none; flex-direction: column;
  background: var(--white); border-left: 1.5px solid var(--line); overflow: hidden;
}
#tutor-app.right-open #tutor-right { display: flex; }
.tc-right-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.tc-right-title { font: 700 .9rem 'Hanken Grotesk', sans-serif; color: var(--ink); }
.tc-right-close {
  background: none; border: none; cursor: pointer; color: var(--grey);
  font-size: 1.1rem; padding: 2px;
}
.tc-right-body { flex: 1; overflow-y: auto; padding: 16px; }
.tc-linked-card {
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 14px; background: var(--page);
}
.tc-linked-label { font: 700 .7rem 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.tc-linked-body { font-size: .88rem; line-height: 1.5; color: var(--ink); }

/* ── Mobile sidebar drawer ── */
.tc-sidebar-toggle {
  display: none; align-items: center; gap: 6px;
  padding: 8px 12px; background: none; border: none; cursor: pointer;
  color: var(--ink); font: 600 .88rem 'Hanken Grotesk', sans-serif;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  #tutor-app { grid-template-columns: 0 1fr !important; position: relative; }
  #tutor-app.sidebar-open { grid-template-columns: 260px 1fr; }
  #tutor-left { position: absolute; top: 0; left: 0; bottom: 0; width: 260px; z-index: 40;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.1); }
  #tutor-app.sidebar-open #tutor-left { transform: translateX(0); }
  .tc-sidebar-toggle { display: flex; }
}
@media (max-width: 600px) {
  #tutor-messages { padding: 16px 12px; }
  #tutor-input-bar { padding: 10px 12px; }
  .tc-bubble { max-width: 90%; }
  #tutor-app.right-open { grid-template-columns: 1fr; }
  #tutor-app.right-open #tutor-right { display: none; }
}

/* ── Dark mode overrides ── */
html[data-theme="dark"] #tutor-left,
html[data-theme="dark"] #tutor-right,
html[data-theme="dark"] .tc-chat-header,
html[data-theme="dark"] #tutor-input-bar { background: #1a1a2e; }
html[data-theme="dark"] .tc-msg.bot .tc-bubble { background: #1e1e32; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .tc-input-wrap { background: #1e1e32; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .tc-starter-chip,
html[data-theme="dark"] .tc-sug-chip { background: #1e1e32; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
html[data-theme="dark"] .tc-session-item:hover,
html[data-theme="dark"] .tc-session-item.active { background: rgba(107,63,160,.25); }
html[data-theme="dark"] .tc-rename-input { background: rgba(107,63,160,.2); color: #c4b5fd; }
html[data-theme="dark"] .tc-pinned-label { color: #fbbf24; }
html[data-theme="dark"] .tc-sessions-header { border-color: rgba(255,255,255,.06); }

/* Sessions list header */
.tc-sessions-header {
  display: flex; align-items: center;
  padding: 10px 14px 4px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  margin-top: 2px;
}
.tc-sessions-title {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey);
}

/* Pinned group */
.tc-pinned-group { margin-bottom: 4px; }
.tc-pinned-label { color: var(--gold) !important; }

/* Session item — improved action buttons */
.tc-session-label { display: flex; flex-direction: column; gap: 1px; white-space: normal; overflow: hidden; }
.tc-session-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.tc-session-acts { gap: 0; }
.tc-session-act {
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--grey);
}
.tc-session-act:hover { background: rgba(107,63,160,.12); color: var(--purple); }
.tc-session-item.active .tc-session-acts { display: flex; }
.tc-session-item.pinned .tc-session-title::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; background: var(--gold);
  border-radius: 50%; margin-right: 6px; flex-shrink: 0;
  vertical-align: middle;
}

/* Inline rename input */
.tc-rename-input {
  width: 100%; border: none; background: var(--lav);
  color: var(--purple); font: 600 .87rem 'Hanken Grotesk', sans-serif;
  outline: none; border-radius: 4px; padding: 0 4px;
  min-width: 0;
}

/* Share/export toast */
.tc-toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--navy, #1a1a2e); color: #fff;
  padding: 9px 20px; border-radius: 10px;
  font: 600 .85rem 'Hanken Grotesk', sans-serif;
  z-index: 9999; pointer-events: none; white-space: nowrap;
  animation: tc-toast-in .2s ease both;
}
@keyframes tc-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* Paper + Topic selects — suppress native arrow, add custom one via background */
#tc-paper, #tc-topic {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
#tc-topic optgroup { font-weight: 700; font-size: .78rem; color: var(--grey); }

/* Better message spacing */
.tc-msg { margin-bottom: 24px; }
.tc-msg.user + .tc-msg.bot { margin-top: 0; }

/* Better bot bubble typography */
.tc-msg.bot .tc-bubble {
  font-size: .95rem; line-height: 1.65;
}

/* User bubble text styling */
.tc-msg.user .tc-bubble {
  font-size: .95rem; line-height: 1.55;
}
.tc-msg.user .tc-bubble p { color: rgba(255,255,255,.92); }

/* Welcome screen improvement */
.tc-welcome h2 { font-size: 1.75rem; }
.tc-welcome-owl { width: 88px; height: 88px; font-size: 3rem; }

/* Mobile: stack selectors cleanly */
@media (max-width: 480px) {
  .tc-mode-row { flex-wrap: wrap; }
  .tc-mode-btn { flex: none; width: calc(50% - 3px); }
}

/* ============ first-visit welcome modal ============ */

.pwt-welcome-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(15,20,40,.65);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: pwt-fade-in .25s ease both;
}
.pwt-welcome-overlay[hidden] { display: none !important; }

@keyframes pwt-fade-in {
  from { opacity: 0; }
}

.pwt-welcome-box {
  background: var(--white, #fff);
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(26,26,46,.28);
  width: 100%; max-width: 680px; max-height: 92vh;
  overflow-y: auto; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  animation: pwt-slide-up .3s ease both;
}

@keyframes pwt-slide-up {
  from { transform: translateY(20px); opacity: 0; }
}

.pwt-welcome-header {
  display: flex; align-items: flex-start; gap: 16px;
}
.pwt-welcome-header img { flex: none; border-radius: 12px; }
.pwt-welcome-header > div { flex: 1; min-width: 0; }
.pwt-welcome-header h2 {
  font: 800 1.4rem 'Archivo', sans-serif;
  color: var(--purple, #4b2a8a); margin: 0 0 6px;
}
.pwt-welcome-header p {
  color: var(--grey, #6b7280); font-size: .92rem; line-height: 1.5; margin: 0;
}
.pwt-welcome-close {
  flex: none; background: none; border: 1.5px solid var(--line, #e5e7eb);
  cursor: pointer; font-size: 1.15rem; color: var(--grey, #6b7280);
  line-height: 1; padding: 6px 9px; border-radius: 10px;
  transition: color .18s, border-color .18s, background .18s;
}
.pwt-welcome-close:hover { color: var(--ink, #1a1a2e); border-color: var(--ink, #1a1a2e); background: var(--cream, #faf9f6); }

.pwt-welcome-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 560px) {
  .pwt-welcome-features { grid-template-columns: repeat(2, 1fr); }
  .pwt-welcome-box { padding: 24px 20px; }
}

.pwt-feat {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 13px; border-radius: 16px;
  border: 1.5px solid var(--line, #e5e7eb);
  text-decoration: none; color: var(--ink, #1a1a2e);
  transition: transform .2s ease, border-color .2s, box-shadow .25s;
  background: var(--white, #fff);
}
.pwt-feat:hover {
  transform: translateY(-3px);
  border-color: var(--purple-bright, #7c3aed);
  box-shadow: 0 10px 28px rgba(26,26,46,.1);
}
.pwt-feat-ico { font-size: 1.5rem; line-height: 1; margin-bottom: 3px; }
.pwt-feat strong {
  font: 700 .88rem 'Archivo', sans-serif;
  color: var(--purple, #4b2a8a); display: block;
}
.pwt-feat p { font-size: .77rem; color: var(--grey, #6b7280); line-height: 1.5; margin: 0; }

.pwt-welcome-footer { display: flex; flex-direction: column; gap: 12px; }
.pwt-welcome-hint {
  text-align: center; font-size: .82rem; color: var(--grey, #6b7280);
  background: var(--cream, #faf9f6); border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 12px; padding: 10px 16px; margin: 0; line-height: 1.55;
}
.pwt-welcome-hint strong { color: var(--ink, #1a1a2e); }
.pwt-welcome-btns {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* ── AI Tutor Formatting & Sidebar Collapsing ───────────────────────────── */

.tc-bubble step, .step-block {
  display: block;
  background: var(--card-bg, #ffffff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-left: 4px solid var(--gold, #E8913A);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  font-size: 0.92rem;
  line-height: 1.6;
}
html[data-theme="dark"] .tc-bubble step,
html[data-theme="dark"] .step-block {
  background: #18172c;
  border-color: #2e2a4a;
  border-left-color: var(--gold, #E8913A);
}

.tc-bubble .katex-display {
  margin: 1em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
}
.tc-bubble .katex {
  font-size: 1.08em;
}

/* ═══════════════════════════════════════════════════════════
   IPAD / MAC WALKTHROUGH SHOWCASE (MATCHING IMAGE 4 & 5)
   ═══════════════════════════════════════════════════════════ */
.pwt-showcase-container {
  max-width: 1140px;
  margin: 0 auto;
}

.pwt-showcase-tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.pwt-sc-tab {
  background: var(--cream, #faf9f6);
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: 12px;
  padding: 10px 22px;
  font: 700 0.9rem "Archivo", sans-serif;
  color: var(--ink, #1a1a2e);
  cursor: pointer;
  transition: all 0.22s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwt-sc-tab:hover {
  border-color: var(--gold, #E8913A);
  color: var(--gold, #E8913A);
}
.pwt-sc-tab.active {
  background: var(--purple, #2E1B4A);
  border-color: var(--purple, #2E1B4A);
  color: #fff;
  box-shadow: 0 6px 20px rgba(46, 27, 74, 0.25);
}
.pwt-sc-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
}
.pwt-sc-tab:not(.active) .pwt-sc-num {
  background: var(--line, #e2e8f0);
  color: var(--grey, #64748b);
}

.pwt-showcase-card {
  background: var(--cream, #F5EFE6);
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: 24px;
  padding: 36px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  align-items: center;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.06);
  transition: background 0.3s ease, border-color 0.3s ease;
}

html[data-theme="dark"] .pwt-showcase-card {
  background: #1e1815;
  border-color: #382c26;
}

.pwt-showcase-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.pwt-sc-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(232, 145, 58, 0.15);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: var(--gold, #E8913A);
}

.pwt-sc-step-label {
  font: 800 0.76rem "Archivo", sans-serif;
  letter-spacing: 0.1em;
  color: var(--gold, #E8913A);
  text-transform: uppercase;
}

.pwt-sc-title {
  font: 800 1.9rem "Archivo", sans-serif;
  color: var(--purple, #2E1B4A);
  margin: 0;
  line-height: 1.25;
}
html[data-theme="dark"] .pwt-sc-title {
  color: #fff;
}

.pwt-sc-desc {
  font-size: 0.94rem;
  color: var(--grey, #64748b);
  line-height: 1.55;
  margin: 0;
}
html[data-theme="dark"] .pwt-sc-desc {
  color: #c4b9b0;
}

.pwt-sc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.pwt-sc-pill {
  background: rgba(46, 27, 74, 0.08);
  border: 1px solid rgba(46, 27, 74, 0.12);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--purple, #2E1B4A);
}
html[data-theme="dark"] .pwt-sc-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2d7ce;
}

.pwt-sc-cta {
  align-self: flex-start;
  margin-top: 8px;
  background: #8c5828;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font: 700 0.9rem "Hanken Grotesk", sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pwt-sc-cta:hover {
  background: #a46730;
  transform: translateY(-2px);
  color: #fff;
}

/* Right Showcase Panel — Mac/iPad Window Mockup */
.pwt-showcase-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pwt-mac-window {
  border-radius: 16px;
  background: #181412;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.pwt-mac-head {
  background: #251e1a;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pwt-mac-dots {
  display: flex;
  gap: 6px;
}
.pwt-mac-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.pwt-mac-dot.red { background: #ff5f56; }
.pwt-mac-dot.yellow { background: #ffbd2e; }
.pwt-mac-dot.green { background: #27c93f; }

.pwt-mac-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  font-family: monospace;
}

.pwt-mac-body {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: #0d0b09;
  overflow: hidden;
}
.pwt-sc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.35s ease;
}
.pwt-sc-img.active {
  opacity: 1;
  position: relative;
}

/* Bottom Carousel Navigation Controls */
.pwt-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.pwt-car-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, transform 0.2s;
}
html:not([data-theme="dark"]) .pwt-car-btn {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--ink);
}
.pwt-car-btn:hover {
  background: var(--gold, #E8913A);
  color: #fff;
  transform: scale(1.08);
}

.pwt-car-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pwt-car-dot {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.25s ease;
}
html:not([data-theme="dark"]) .pwt-car-dot {
  background: rgba(0, 0, 0, 0.2);
}
.pwt-car-dot.active {
  width: 24px;
  border-radius: 10px;
  background: var(--purple, #2E1B4A);
}
html[data-theme="dark"] .pwt-car-dot.active {
  background: var(--gold, #E8913A);
}

@media (max-width: 900px) {
  .pwt-showcase-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM QUOTA EXCEEDED CARD COMPONENT
   ═══════════════════════════════════════════════════════════ */
.pwt-quota-card-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 16px;
  grid-column: 1 / -1;
}

.pwt-quota-card {
  background: var(--cream, #FAF7F2);
  border: 2px solid var(--gold, #E8913A);
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 40px rgba(232, 145, 58, 0.12);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

html[data-theme="dark"] .pwt-quota-card {
  background: #1d1714;
  border-color: #e8913a;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.pwt-qc-badge {
  background: rgba(232, 145, 58, 0.15);
  color: var(--gold, #E8913A);
  border: 1px solid rgba(232, 145, 58, 0.3);
  border-radius: 20px;
  padding: 6px 16px;
  font: 800 0.78rem "Archivo", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pwt-qc-title {
  font: 800 1.55rem "Archivo", sans-serif;
  color: var(--purple, #2E1B4A);
  margin: 16px 0 8px 0;
  line-height: 1.3;
}
html[data-theme="dark"] .pwt-qc-title {
  color: #ffffff;
}

.pwt-qc-sub {
  font-size: 0.94rem;
  color: var(--grey, #64748b);
  line-height: 1.55;
  margin: 0 0 22px 0;
  max-width: 480px;
}
html[data-theme="dark"] .pwt-qc-sub {
  color: #c4b9b0;
}

.pwt-qc-price-box {
  background: linear-gradient(135deg, rgba(46, 27, 74, 0.05), rgba(232, 145, 58, 0.12));
  border: 1.5px solid rgba(232, 145, 58, 0.25);
  border-radius: 16px;
  padding: 18px 24px;
  width: 100%;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pwt-qc-price-tagline {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold, #E8913A);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pwt-qc-price-val {
  font: 900 1.8rem "Archivo", sans-serif;
  color: var(--purple, #2E1B4A);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
html[data-theme="dark"] .pwt-qc-price-val {
  color: #ffffff;
}

.pwt-qc-price-subtext {
  font-size: 0.78rem;
  color: var(--grey, #64748b);
}

.pwt-qc-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-bottom: 24px;
  text-align: left;
}
@media (max-width: 520px) {
  .pwt-qc-features {
    grid-template-columns: 1fr;
  }
}

.pwt-qc-feat {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink, #1a1a2e);
  display: flex;
  align-items: center;
  gap: 6px;
}
html[data-theme="dark"] .pwt-qc-feat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2d7ce;
}

.pwt-qc-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.pwt-qc-btn-primary {
  background: linear-gradient(135deg, #E8913A 0%, #C87525 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  font: 800 0.95rem "Hanken Grotesk", sans-serif;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(232, 145, 58, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pwt-qc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232, 145, 58, 0.5);
  color: #ffffff !important;
}

.pwt-qc-btn-secondary {
  background: transparent;
  color: var(--purple, #2E1B4A);
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: 12px;
  padding: 10px 20px;
  font: 700 0.85rem "Hanken Grotesk", sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
html[data-theme="dark"] .pwt-qc-btn-secondary {
  color: #e2d7ce;
  border-color: rgba(255, 255, 255, 0.2);
}
.pwt-qc-btn-secondary:hover {
  border-color: var(--gold, #E8913A);
  color: var(--gold, #E8913A);
}

/* ═══════════════════════════════════════════════════════════
   AI TUTOR SIDEBAR COLLAPSE TOGGLE
   ═══════════════════════════════════════════════════════════ */
#tutor-app {
  display: grid;
  grid-template-columns: 272px 1fr;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  overflow: hidden;
  background: var(--page);
  transition: grid-template-columns 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#tutor-left {
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: margin-left, opacity;
}

#tutor-app.sidebar-collapsed {
  grid-template-columns: 0px 1fr !important;
}

#tutor-app.sidebar-collapsed.right-open {
  grid-template-columns: 0px 1fr 300px !important;
}

#tutor-app.sidebar-collapsed #tutor-left {
  margin-left: -272px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border-right: none !important;
}

.tc-sidebar-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--line, #e2e8f0);
  background: var(--white, #ffffff);
  color: var(--purple, #2E1B4A);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.tc-sidebar-toggle:hover {
  background: var(--cream, #faf9f6);
  border-color: var(--gold, #E8913A);
  color: var(--gold, #E8913A);
}

html[data-theme="dark"] .tc-sidebar-toggle {
  background: #1e1e32;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2d7ce;
}

html[data-theme="dark"] .tc-sidebar-toggle:hover {
  background: #282846;
  border-color: var(--gold, #E8913A);
  color: var(--gold, #E8913A);
}

/* ═══════════════════════════════════════════════════════════════
   CURRICULUM NOTES SYSTEM — shared block classes
   Used in note content fragments loaded by note.html
   ═══════════════════════════════════════════════════════════════ */

/* Definition box — navy left border */
.note-def {
  border-left: 4px solid var(--navy);
  background: var(--lav);
  padding: .85rem 1rem .85rem 1.1rem;
  border-radius: 0 10px 10px 0;
  margin: 1.1rem 0;
  line-height: 1.6;
}
html[data-theme="dark"] .note-def { background: rgba(90,70,160,.2); border-color: #8B75D0; color: #CBD5E1; }
.note-term { font-weight: 700; color: var(--navy); font-style: italic; }
html[data-theme="dark"] .note-term { color: #b9a8f0; }

/* Key point box — gold left border */
.note-key {
  border-left: 4px solid var(--gold);
  background: #FFF8EC;
  padding: .85rem 1rem .85rem 1.1rem;
  border-radius: 0 10px 10px 0;
  margin: 1.1rem 0;
  line-height: 1.6;
}
html[data-theme="dark"] .note-key { background: rgba(232,145,58,.12); border-color: var(--gold); color: #CBD5E1; }

/* Exam tip box */
.note-tip {
  background: #FFFBF0;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin: 1.1rem 0;
  line-height: 1.6;
}
.note-tip::before {
  content: "⚡ Exam tip";
  display: block;
  font-weight: 700;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gold);
  margin-bottom: .4rem;
}
html[data-theme="dark"] .note-tip { background: rgba(232,145,58,.09); border-color: var(--gold); color: #CBD5E1; }

/* Common mistake box */
.note-warn {
  background: #FDF0F0;
  border: 1.5px solid #C97070;
  border-radius: 12px;
  padding: .9rem 1rem;
  margin: 1.1rem 0;
  line-height: 1.6;
}
.note-warn::before {
  content: "✗ Common mistake";
  display: block;
  font-weight: 700;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #8B1B2B;
  margin-bottom: .4rem;
}
html[data-theme="dark"] .note-warn { background: rgba(200,60,60,.13); border-color: #C97070; color: #CBD5E1; }
html[data-theme="dark"] .note-warn::before { color: #F08090; }

/* Worked example — collapsible */
.note-example {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin: 1.1rem 0;
  overflow: hidden;
}
html[data-theme="dark"] .note-example { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
.note-example > summary {
  padding: .75rem 1rem;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  color: var(--navy);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  user-select: none;
}
.note-example > summary::-webkit-details-marker { display: none; }
.note-example > summary::before { content: "▶"; font-size: .6rem; transition: transform .18s; flex-shrink: 0; }
.note-example[open] > summary::before { transform: rotate(90deg); }
.note-example > summary:hover { color: var(--gold); }
html[data-theme="dark"] .note-example > summary { color: #b9a8f0; border-bottom-color: rgba(255,255,255,.08); }
.note-example-body {
  padding: .75rem 1rem 1.1rem;
  border-top: 1px solid var(--line);
  line-height: 1.7;
}
.note-example-body ol { padding-left: 1.3rem; }
.note-example-body li { margin-bottom: .4rem; }

/* Figure with placeholder */
.note-fig {
  margin: 1.4rem 0;
  text-align: center;
}
.note-fig img { max-width: 100%; border-radius: 10px; border: 1.5px solid var(--line); }
.note-fig figcaption {
  font-size: .79rem;
  color: var(--grey);
  margin-top: .45rem;
  font-style: italic;
  line-height: 1.5;
}
.note-fig-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 120px;
  background: var(--cream);
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 1.2rem;
  color: var(--grey);
  font-size: .83rem;
  line-height: 1.5;
}
html[data-theme="dark"] .note-fig-ph { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
.note-fig-ph-ico { font-size: 2rem; opacity: .5; }

/* Responsive table */
.note-table-wrap { overflow-x: auto; margin: 1.1rem 0; }
.note-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 340px;
}
.note-table th {
  background: var(--navy);
  color: #fff;
  padding: .55rem .85rem;
  text-align: left;
  font-weight: 700;
  font-size: .82rem;
}
.note-table td {
  padding: .48rem .85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.note-table tr:nth-child(even) td { background: var(--cream); }
html[data-theme="dark"] .note-table tr:nth-child(even) td { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .note-table th { background: #2a1f4a; }

/* Content headings */
.note-content-area h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.16rem; font-weight: 800;
  color: var(--navy); margin: 2rem 0 .7rem;
  display: flex; align-items: center; gap: .6rem;
}
.note-content-area h2::before {
  content: ''; display: inline-block; flex-shrink: 0;
  width: 3px; height: 1em; background: var(--gold); border-radius: 2px;
}
html[data-theme="dark"] .note-content-area h2 { color: #C4D0F0; }
.note-content-area h3 {
  font-size: .97rem; font-weight: 700;
  color: var(--navy); margin: 1.4rem 0 .45rem;
}
html[data-theme="dark"] .note-content-area h3 { color: #b9a8f0; }
.note-content-area p { line-height: 1.78; margin-bottom: .75rem; }
.note-content-area ul, .note-content-area ol {
  padding-left: 1.4rem; line-height: 1.72; margin-bottom: .75rem;
}
.note-content-area li { margin-bottom: .35rem; }
.note-content-area strong { color: var(--navy); font-weight: 700; }
html[data-theme="dark"] .note-content-area strong { color: #b9a8f0; }
.note-content-area code {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 5px; padding: .1rem .4rem;
  font-size: .86em; font-family: "Courier New", monospace;
}
html[data-theme="dark"] .note-content-area code { background: #1e1e32; border-color: #3a3a5c; color: #c4d0f0; }

/* Tier badges */
.note-tier-core       { background: #E6F4EA; color: #1A6B4A; border: 1.5px solid #9DD4B4; }
.note-tier-supplement { background: #EBF0FF; color: #1d4ed8; border: 1.5px solid #93C5FD; }
.note-tier-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; padding: .22rem .65rem;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .07em;
}
html[data-theme="dark"] .note-tier-core       { background: rgba(26,107,74,.2);  color: #6BD4A0; border-color: #1A6B4A; }
html[data-theme="dark"] .note-tier-supplement { background: rgba(29,78,216,.2);  color: #93C5FD; border-color: #1d4ed8; }

/* ══ Note page layout ══ */
.note-page-wrap {
  display: flex; min-height: calc(100vh - 70px); align-items: flex-start;
}

/* ── Reading progress bar ── */
.note-rdg-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 3px; pointer-events: none;
}
.note-rdg-bar-fill {
  height: 100%; width: 0%; background: var(--gold);
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(232,145,58,.5);
}

/* ══ Sidebar ══ */
.note-sidebar {
  width: 268px; flex-shrink: 0;
  border-right: 1px solid var(--line);
  position: sticky; top: 70px;
  height: calc(100vh - 70px);
  overflow-y: auto; scrollbar-width: thin;
  background: #fff;
  transition: left .25s cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"] .note-sidebar { background: #13132a; border-color: rgba(255,255,255,.08); }
.note-sidebar::-webkit-scrollbar { width: 4px; }
.note-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.note-sb-inner { padding: 1.1rem .85rem 2.5rem; }

/* Subject back link */
.note-sb-subject-back {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .55rem; border-radius: 9px; margin-bottom: 1rem;
  font-size: .78rem; font-weight: 600; color: var(--grey);
  text-decoration: none; transition: all .14s;
  border: 1.5px solid transparent;
}
.note-sb-subject-back:hover { background: var(--cream); color: var(--navy); border-color: var(--line); }
html[data-theme="dark"] .note-sb-subject-back:hover { background: rgba(255,255,255,.06); color: #b9a8f0; border-color: rgba(255,255,255,.1); }
.note-sb-back-arr { font-size: .85rem; }
.note-sb-subj-emoji { font-size: .95rem; line-height: 1; }

/* Chapter hero card */
.note-sb-chap-hero {
  background: var(--navy); border-radius: 14px;
  padding: 1rem 1.05rem 1.05rem; margin-bottom: 1.2rem;
}
html[data-theme="dark"] .note-sb-chap-hero { background: #1e1e3a; }
.note-sb-chap-ref {
  font-size: .63rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .2rem;
}
.note-sb-chap-name {
  font-size: .9rem; font-weight: 700; line-height: 1.3; margin-bottom: .75rem;
  color: #fff;
}
html[data-theme="dark"] .note-sb-chap-name { color: #E2E8F0; }
.note-sb-progress-row { display: flex; align-items: center; gap: .5rem; }
.note-sb-progress-track {
  flex: 1; height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden;
}
html[data-theme="dark"] .note-sb-progress-track { background: rgba(255,255,255,.12); }
.note-sb-progress-fill {
  height: 100%; background: var(--gold); border-radius: 2px;
  transition: width .4s ease;
}
.note-sb-progress-text { font-size: .67rem; color: rgba(255,255,255,.65); white-space: nowrap; font-weight: 600; }

/* Section labels */
.note-sb-section { margin-bottom: 1.1rem; }
.note-sb-head {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--grey); margin-bottom: .45rem; padding: 0 .2rem;
}

/* Subtopic list */
.note-sb-list { list-style: none; margin: 0; padding: 0; }
.note-sb-item { margin-bottom: 2px; }
.note-sb-item > a {
  display: flex; align-items: center; gap: .5rem;
  padding: .36rem .5rem; border-radius: 10px;
  text-decoration: none; transition: all .13s;
  border: 1.5px solid transparent;
}
.note-sb-item > a:hover { background: var(--cream); border-color: var(--line); }
html[data-theme="dark"] .note-sb-item > a:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.note-sb-item.active > a {
  background: var(--lav); border-color: rgba(76,46,114,.18);
}
html[data-theme="dark"] .note-sb-item.active > a { background: rgba(80,60,140,.25); border-color: rgba(80,60,140,.35); }

/* Number badge */
.note-sb-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .67rem; font-weight: 700;
  background: var(--line); color: var(--grey); transition: all .13s;
}
.note-sb-item.active .note-sb-num { background: var(--navy); color: #fff; }
html[data-theme="dark"] .note-sb-item.active .note-sb-num { background: #7B9FE0; color: #0f0f1e; }
.note-sb-item-body { flex: 1; min-width: 0; }
.note-sb-item-name {
  font-size: .79rem; line-height: 1.35; color: var(--ink);
  display: block; font-weight: 500; transition: color .13s;
}
.note-sb-item.active .note-sb-item-name { color: var(--navy); font-weight: 700; }
html[data-theme="dark"] .note-sb-item-name { color: #CBD5E1; }
html[data-theme="dark"] .note-sb-item.active .note-sb-item-name { color: #b9a8f0; }

/* Tier chip (inline, inside subtopic row) */
.note-sb-tier-chip {
  font-size: .55rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: .06rem .32rem; border-radius: 4px;
  display: inline-block; margin-top: .1rem;
}
.note-sb-tier-chip.core { background: #E6F4EA; color: #1A6B4A; }
.note-sb-tier-chip.supp { background: #EBF0FF; color: #1d4ed8; }
html[data-theme="dark"] .note-sb-tier-chip.core { background: rgba(26,107,74,.25); color: #6BD4A0; }
html[data-theme="dark"] .note-sb-tier-chip.supp { background: rgba(29,78,216,.25); color: #93C5FD; }

/* Visited check */
.note-sb-check {
  font-size: .68rem; color: #1A6B4A; font-weight: 700;
  flex-shrink: 0; opacity: 0; transition: opacity .15s;
}
.note-sb-item.visited .note-sb-check { opacity: 1; }
html[data-theme="dark"] .note-sb-check { color: #4ADE80; }

/* ToC links */
.note-sb-toc-ul { padding-left: .1rem; }
.note-sb-toc-link {
  display: block; padding: .24rem .5rem .24rem .85rem;
  font-size: .76rem; color: var(--grey); text-decoration: none;
  border-left: 2px solid transparent; transition: all .13s; line-height: 1.4;
}
.note-sb-toc-link:hover { color: var(--navy); border-left-color: rgba(232,145,58,.5); }
.note-sb-toc-link.active { color: var(--navy); border-left-color: var(--gold); font-weight: 600; }
html[data-theme="dark"] .note-sb-toc-link { color: #94A3B8; }
html[data-theme="dark"] .note-sb-toc-link:hover { color: #b9a8f0; }
html[data-theme="dark"] .note-sb-toc-link.active { color: #b9a8f0; border-left-color: var(--gold); }

/* Divider + all-chapters toggle */
.note-sb-divider { height: 1px; background: var(--line); margin: .7rem 0; opacity: .55; }
.note-sb-chapters-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .36rem .5rem; border-radius: 9px; margin-bottom: 2px;
  font-size: .78rem; font-weight: 600; color: var(--grey);
  background: none; border: none; cursor: pointer; transition: all .13s;
}
.note-sb-chapters-toggle:hover { background: var(--cream); color: var(--navy); }
html[data-theme="dark"] .note-sb-chapters-toggle:hover { background: rgba(255,255,255,.05); color: #b9a8f0; }
.note-sb-toggle-arrow { transition: transform .18s; display: inline-block; font-size: .75rem; }
.note-sb-chapters-toggle.open .note-sb-toggle-arrow { transform: rotate(180deg); }
.note-sb-chapters-list { list-style: none; margin: 0; padding: 0; }
.note-sb-chap-link {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .5rem .3rem 1.3rem; border-radius: 8px;
  text-decoration: none; transition: all .13s;
}
.note-sb-chap-link:hover { background: var(--cream); }
html[data-theme="dark"] .note-sb-chap-link:hover { background: rgba(255,255,255,.05); }
.note-sb-chap-link.current { background: var(--lav); }
html[data-theme="dark"] .note-sb-chap-link.current { background: rgba(80,60,140,.2); }
.note-sb-chap-link-ref { font-size: .67rem; color: var(--grey); flex-shrink: 0; font-weight: 600; }
.note-sb-chap-link-name { flex: 1; min-width: 0; font-size: .77rem; color: var(--ink); }
html[data-theme="dark"] .note-sb-chap-link-name { color: #CBD5E1; }
.note-sb-chap-link.current .note-sb-chap-link-name { color: var(--navy); font-weight: 700; }
html[data-theme="dark"] .note-sb-chap-link.current .note-sb-chap-link-name { color: #b9a8f0; }
.note-sb-chap-done { font-size: .67rem; color: #1A6B4A; font-weight: 700; }
html[data-theme="dark"] .note-sb-chap-done { color: #4ADE80; }

/* ══ Article ══ */
.note-article {
  flex: 1; min-width: 0;
  padding: 0 2.2rem 5rem;
  max-width: 800px;
}
@media (min-width: 1140px) { .note-article { max-width: 820px; } }

/* Mobile top bar */
.note-mob-header {
  display: none; align-items: center; justify-content: space-between;
  padding: .75rem 0 .6rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 768px) { .note-mob-header { display: flex; } }
.note-mob-back-link {
  font-size: .79rem; font-weight: 600; color: var(--grey); text-decoration: none;
  transition: color .13s;
}
.note-mob-back-link:hover { color: var(--navy); }
.note-mob-topics-btn {
  display: flex; align-items: center; gap: .3rem;
  padding: .3rem .72rem; border-radius: 8px; font-size: .76rem; font-weight: 700;
  border: 1.5px solid var(--line); background: none; cursor: pointer;
  color: var(--navy); transition: all .13s;
}
.note-mob-topics-btn:hover { background: var(--lav); border-color: var(--navy); }
html[data-theme="dark"] .note-mob-topics-btn { color: #b9a8f0; border-color: rgba(255,255,255,.15); }
html[data-theme="dark"] .note-mob-topics-btn:hover { background: rgba(80,60,140,.2); }

/* Mobile drawer overlay */
.note-mob-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
}
.note-mob-overlay.open { display: block; }

/* Sidebar becomes a left drawer on mobile */
@media (max-width: 768px) {
  .note-sidebar {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100vh;
    z-index: 500; box-shadow: 4px 0 28px rgba(0,0,0,.18);
  }
  .note-sidebar.open { left: 0; }
  .note-article { padding: 0 1rem 5rem; }
}

/* Breadcrumb */
.note-breadcrumb {
  font-size: .74rem; color: var(--grey); margin-bottom: .85rem;
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  padding-top: 1.5rem;
}
.note-breadcrumb a { color: var(--grey); text-decoration: none; transition: color .13s; }
.note-breadcrumb a:hover { color: var(--navy); }
.note-bc-sep { color: var(--line); font-size: .8rem; }
html[data-theme="dark"] .note-breadcrumb a { color: #94A3B8; }
html[data-theme="dark"] .note-breadcrumb a:hover { color: #b9a8f0; }

/* Article header */
.note-art-head { margin-bottom: 1.7rem; }
.note-art-chap-ctx {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; color: var(--grey);
  margin-bottom: .45rem; letter-spacing: .02em;
}
html[data-theme="dark"] .note-art-chap-ctx { color: #94A3B8; }
.note-ctx-dot { color: var(--line); }
.note-h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.65rem, 3.2vw, 2.15rem);
  line-height: 1.12; color: var(--navy); margin: 0 0 .85rem;
  letter-spacing: -.01em;
}
html[data-theme="dark"] .note-h1 { color: #C4D0F0; }
.note-art-meta-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.note-syllabus-pill {
  font-size: .69rem; color: var(--grey); font-weight: 600;
  padding: .16rem .52rem; border: 1.5px solid var(--line); border-radius: 6px;
}
html[data-theme="dark"] .note-syllabus-pill { border-color: rgba(255,255,255,.15); color: #94A3B8; }
.note-read-time { font-size: .69rem; color: var(--grey); }
html[data-theme="dark"] .note-read-time { color: #94A3B8; }

/* Content area top spacing */
.note-content-area { padding-top: .5rem; }

/* ── Action strip ── */
.note-action-strip {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding: 1.1rem 0; margin: 2.2rem 0 2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.note-action-btn {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .4rem .88rem; border-radius: 10px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  text-decoration: none; transition: all .15s;
}
.note-action-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--lav); }
html[data-theme="dark"] .note-action-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #CBD5E1; }
html[data-theme="dark"] .note-action-btn:hover { border-color: #7B9FE0; color: #7B9FE0; background: rgba(80,60,140,.2); }

/* ── Prev / Next navigation cards ── */
.note-prevnext {
  display: flex; align-items: stretch; gap: .85rem; margin-top: 2rem;
}
.note-prevnext-gap { flex: 1; pointer-events: none; }
.note-prev-card, .note-next-card {
  display: flex; flex-direction: column; min-width: 180px; max-width: 260px;
  padding: .95rem 1.1rem; border-radius: 14px; text-decoration: none;
  border: 1.5px solid var(--line); background: #fff; transition: all .18s;
  flex: 1;
}
.note-prev-card:hover, .note-next-card:hover {
  border-color: var(--navy); background: var(--lav);
  box-shadow: 0 4px 18px rgba(76,46,114,.1); transform: translateY(-2px);
}
html[data-theme="dark"] .note-prev-card, html[data-theme="dark"] .note-next-card {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}
html[data-theme="dark"] .note-prev-card:hover, html[data-theme="dark"] .note-next-card:hover {
  border-color: #7B9FE0; background: rgba(80,60,140,.18);
  box-shadow: 0 4px 18px rgba(80,60,140,.2);
}
.note-next-card { align-items: flex-end; text-align: right; }
.note-nav-dir {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--grey); margin-bottom: .32rem; display: block;
}
html[data-theme="dark"] .note-nav-dir { color: #94A3B8; }
.note-nav-name {
  font-size: .86rem; font-weight: 700; color: var(--navy); line-height: 1.3;
}
html[data-theme="dark"] .note-nav-name { color: #b9a8f0; }
@media (max-width: 480px) {
  .note-prevnext { flex-wrap: wrap; }
  .note-next-card { align-items: flex-start; text-align: left; }
  .note-prevnext-gap { display: none; }
  .note-prev-card, .note-next-card { max-width: 100%; min-width: 0; }
}

/* ── Subject landing ── */
/* ═══════════════════════════════════════════════════════════
   Subject landing page  (subject.html?code=...)
═══════════════════════════════════════════════════════════ */

/* Hero band */
.subj-hero-band {
  background: var(--cream); border-bottom: 1px solid var(--line);
  padding: 1.6rem 0 2rem;
}
html[data-theme="dark"] .subj-hero-band { background: var(--dark, #12122a); }
.subj-back-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; color: var(--grey); text-decoration: none;
  margin-bottom: 1.4rem; transition: color .15s;
}
.subj-back-link:hover { color: var(--navy); }
.subj-hero-inner {
  display: flex; gap: 1.5rem; align-items: flex-start;
}
.subj-hero-emoji-wrap {
  width: 68px; height: 68px; border-radius: 20px;
  background: var(--navy); display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; flex-shrink: 0; margin-top: .1rem;
  box-shadow: 0 4px 16px rgba(76,46,114,.25);
}
.subj-hero-text { flex: 1; min-width: 0; }
.subj-eyebrow {
  font-size: .67rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .2rem;
}
.subj-h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.65rem, 4vw, 2.4rem);
  line-height: 1.1; color: var(--navy); margin-bottom: .3rem;
}
html[data-theme="dark"] .subj-h1 { color: #C4D0F0; }
.subj-hero-desc {
  color: var(--grey); font-size: .87rem; line-height: 1.65;
  max-width: 560px; margin-bottom: .8rem;
}
.subj-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.subj-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .24rem .7rem; border-radius: 20px; font-size: .73rem; font-weight: 600;
  border: 1.5px solid var(--line); background: #fff; color: var(--grey);
}
html[data-theme="dark"] .subj-badge { background: rgba(255,255,255,.05); }
@media (max-width: 600px) {
  .subj-hero-inner { flex-direction: column; gap: .9rem; }
  .subj-hero-emoji-wrap { width: 56px; height: 56px; font-size: 1.7rem; }
}

/* Section label */
.subj-sec-title {
  font-size: .67rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 1rem;
}

/* ── Paper cards ── */
.subj-papers-wrap { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.subj-papers-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 620px) { .subj-papers-cards { grid-template-columns: 1fr; } }

.subj-paper-card {
  border-radius: 16px; border: 1.5px solid var(--line);
  padding: 1.3rem 1.4rem 1.15rem; background: #fff;
  position: relative; overflow: hidden;
  transition: box-shadow .18s;
}
.subj-paper-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
html[data-theme="dark"] .subj-paper-card { background: var(--dark, #12122a); }
.subj-paper-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--navy);
}
.subj-paper-card--p2::before { background: var(--gold); }

.subj-paper-code-badge {
  display: inline-block; font-size: .67rem; font-weight: 800; letter-spacing: .1em;
  padding: .16rem .55rem; border-radius: 8px; background: var(--navy); color: #fff;
  text-transform: uppercase; margin-bottom: .55rem;
}
.subj-paper-card--p2 .subj-paper-code-badge { background: var(--gold); }

.subj-paper-label {
  font-size: .75rem; font-weight: 700; color: var(--grey);
  margin-bottom: .25rem;
}
.subj-paper-name-large {
  font-weight: 700; font-size: .95rem; color: var(--navy); line-height: 1.4;
  margin-bottom: .75rem;
}
html[data-theme="dark"] .subj-paper-name-large { color: #C4D0F0; }
.subj-paper-stats { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .6rem; }
.subj-paper-stat {
  font-size: .74rem; font-weight: 600; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line);
  padding: .2rem .6rem; border-radius: 20px;
}
html[data-theme="dark"] .subj-paper-stat { background: rgba(255,255,255,.06); color: var(--grey); }
.subj-paper-desc {
  font-size: .78rem; color: var(--grey); line-height: 1.55;
  border-top: 1px solid var(--line); padding-top: .65rem;
}

/* ── Study guide ── */
.subj-guide-wrap { padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.subj-guide-list { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.subj-guide-item {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .75rem 1rem; border-radius: 12px;
  background: var(--cream); border: 1.5px solid var(--line);
  font-size: .87rem; line-height: 1.6;
}
html[data-theme="dark"] .subj-guide-item { background: rgba(255,255,255,.04); }
.subj-guide-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; flex-shrink: 0; margin-top: .07rem;
}

/* ── Chapter section ── */
.subj-chapters-wrap { padding: 2rem 0 4rem; }
.subj-chapters-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}
.subj-chapters-title { font-size: 1rem; font-weight: 700; color: var(--navy); }
html[data-theme="dark"] .subj-chapters-title { color: #C4D0F0; }
.subj-chapters-progress-chip {
  font-size: .76rem; font-weight: 700; color: var(--grey);
  background: var(--cream); border: 1.5px solid var(--line);
  padding: .28rem .8rem; border-radius: 20px;
}
html[data-theme="dark"] .subj-chapters-progress-chip { background: rgba(255,255,255,.05); }

.subj-section-group { margin-bottom: 2.2rem; }
.subj-section-head {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--line);
}
.subj-section-name {
  font-weight: 700; font-size: .88rem; color: var(--navy); flex: 1;
}
html[data-theme="dark"] .subj-section-name { color: #C4D0F0; }
.subj-section-count {
  font-size: .71rem; font-weight: 600; color: var(--grey);
  background: var(--cream); border: 1px solid var(--line);
  padding: .14rem .52rem; border-radius: 10px; white-space: nowrap;
}
html[data-theme="dark"] .subj-section-count { background: rgba(255,255,255,.05); }

/* Chapter grid */
.subj-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .9rem;
}

.subj-chapter-card {
  border: 1.5px solid var(--line); border-radius: 16px;
  padding: 1.1rem 1.2rem 1rem;
  background: #fff; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: .45rem;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  position: relative;
}
html[data-theme="dark"] .subj-chapter-card { background: var(--dark, #12122a); }

.subj-card-ready:hover {
  border-color: var(--navy);
  box-shadow: 0 6px 24px rgba(76,46,114,.12);
  transform: translateY(-3px);
}

.subj-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .1rem;
}
.subj-card-ref {
  font-size: .67rem; font-weight: 800; letter-spacing: .05em;
  color: var(--navy); background: rgba(76,46,114,.08);
  padding: .14rem .48rem; border-radius: 7px;
}
html[data-theme="dark"] .subj-card-ref { background: rgba(196,208,240,.12); color: #a8b8e8; }
.subj-card-subtopic-count {
  font-size: .69rem; font-weight: 600; color: var(--grey);
}
.subj-card-name {
  font-weight: 700; font-size: .93rem; color: var(--navy); line-height: 1.35;
}
html[data-theme="dark"] .subj-card-name { color: #C4D0F0; }
.subj-card-meta {
  font-size: .75rem; color: var(--grey);
  display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-top: .05rem;
}
.subj-card-tier {
  font-size: .67rem; font-weight: 600;
  padding: .1rem .4rem; border-radius: 6px;
  background: rgba(76,46,114,.07); color: var(--navy);
}
html[data-theme="dark"] .subj-card-tier { background: rgba(196,208,240,.1); color: #a0b0e0; }
.subj-card-progress {
  height: 5px; border-radius: 3px;
  background: var(--line); overflow: hidden; margin-top: .25rem;
}
.subj-card-progress-bar {
  height: 100%; background: var(--navy); border-radius: 3px; transition: width .35s;
}
.subj-card-cta {
  font-size: .76rem; font-weight: 700; color: var(--navy);
  margin-top: .2rem; opacity: 0; transition: opacity .18s;
}
.subj-card-ready:hover .subj-card-cta { opacity: 1; }

/* Subtopics inline list inside chapter card */
.subj-card-name-link { display: flex; align-items: center; justify-content: space-between; gap:.3rem; text-decoration: none; }
.subj-card-name-link .subj-card-name { flex: 1; }
.subj-card-name-link .subj-card-link-arr { font-size: .9rem; color: var(--navy); opacity: .5; flex-shrink: 0; }
.subj-card-name-link:hover .subj-card-link-arr { opacity: 1; }
html[data-theme="dark"] .subj-card-name-link .subj-card-link-arr { color: #C4D0F0; }

.subj-card-subtopics-inline { margin-top: .55rem; display: flex; flex-direction: column; gap: .2rem; }
.subj-card-st-link {
  display: flex; align-items: center; gap: .4rem; text-decoration: none;
  font-size: .77rem; color: var(--ink); padding: .22rem .3rem;
  border-radius: 6px; transition: background .15s, color .15s;
}
.subj-card-st-link:hover { background: rgba(76,46,114,.07); color: var(--navy); }
html[data-theme="dark"] .subj-card-st-link { color: #B0BAD0; }
html[data-theme="dark"] .subj-card-st-link:hover { background: rgba(255,255,255,.06); color: #E2E8F0; }
.subj-card-st-num {
  font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px;
  background: var(--line); border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: var(--grey);
}
html[data-theme="dark"] .subj-card-st-num { background: rgba(255,255,255,.1); color: #94A3B8; }
.subj-card-st-visited .subj-card-st-num { background: #D1FAE5; color: #065F46; }
html[data-theme="dark"] .subj-card-st-visited .subj-card-st-num { background: rgba(16,185,129,.2); color: #6EE7B7; }

/* Papers combined two-column layout */
.subj-papers-combined {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 640px) { .subj-papers-combined { grid-template-columns: 1fr; } }
.subj-papers-col {
  border: 1.5px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem;
  background: #fff; position: relative; overflow: hidden;
}
html[data-theme="dark"] .subj-papers-col { background: var(--dark, #12122a); }
.subj-papers-col::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--navy);
}
.subj-papers-col--core::before { background: var(--gold); }
.subj-papers-col-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--grey); margin-bottom: .7rem; margin-top: .1rem;
}
.subj-papers-col-list { display: flex; flex-direction: column; gap: .55rem; }
.subj-papers-col-item {
  border-radius: 10px; border: 1px solid var(--line); padding: .6rem .75rem;
  background: var(--cream);
}
html[data-theme="dark"] .subj-papers-col-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.subj-papers-col-item-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.subj-papers-col-badge { font-size: .65rem; font-weight: 800; background: var(--navy); color: #fff; border-radius: 5px; padding: .1rem .38rem; }
.subj-papers-col--core .subj-papers-col-badge { background: var(--gold); }
.subj-papers-col-name { font-size: .82rem; font-weight: 700; color: var(--navy); }
html[data-theme="dark"] .subj-papers-col-name { color: #C4D0F0; }
.subj-papers-col-stats { display: flex; flex-wrap: wrap; gap: .3rem; }
.subj-papers-col-stat {
  font-size: .7rem; font-weight: 600; color: var(--grey);
  background: rgba(0,0,0,.04); border-radius: 4px; padding: .1rem .35rem;
}
html[data-theme="dark"] .subj-papers-col-stat { background: rgba(255,255,255,.06); }

.subj-card-coming {
  border-style: dashed; opacity: .55;
  pointer-events: none; cursor: default;
  background: var(--cream) !important;
}
html[data-theme="dark"] .subj-card-coming { background: rgba(255,255,255,.02) !important; }
.subj-card-coming-tag {
  font-size: .61rem; font-weight: 700; padding: .1rem .4rem;
  border-radius: 6px; background: var(--line); color: var(--grey);
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}

/* ── Chapter index page ── */
.chap-hero { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.chap-breadcrumb {
  font-size: .78rem; color: var(--grey); margin-bottom: .8rem;
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
}
.chap-breadcrumb a { color: var(--grey); text-decoration: none; }
.chap-breadcrumb a:hover { color: var(--navy); }
.chap-h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.55rem, 3.5vw, 2.1rem);
  line-height: 1.15; color: var(--navy); margin-bottom: .3rem;
}
html[data-theme="dark"] .chap-h1 { color: #C4D0F0; }
.chap-meta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.chap-meta-item { font-size: .8rem; color: var(--grey); }
.chap-meta-item strong { color: var(--ink); }
.chap-body { padding: 1.5rem 0 4rem; display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
@media (max-width: 860px) { .chap-body { grid-template-columns: 1fr; } }

/* Subtopic list */
.chap-subtopics-list { display: flex; flex-direction: column; gap: .55rem; }
.chap-subtopic-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.chap-subtopic-item:hover { border-color: var(--navy); box-shadow: 0 2px 10px rgba(76,46,114,.09); }
html[data-theme="dark"] .chap-subtopic-item { background: var(--dark, #12122a); }
.chap-st-num {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--grey); flex-shrink: 0;
  transition: all .15s;
}
.chap-subtopic-item:hover .chap-st-num { border-color: var(--navy); color: var(--navy); }
.chap-st-visited .chap-st-num { background: var(--navy); border-color: var(--navy); color: #fff; }
.chap-st-text { flex: 1; min-width: 0; }
.chap-st-name { font-weight: 700; font-size: .9rem; line-height: 1.35; }
.chap-st-tier { font-size: .72rem; color: var(--grey); margin-top: .15rem; }
.chap-st-arrow { color: var(--grey); font-size: .8rem; flex-shrink: 0; }

/* Sidebar panels on chapter page */
.chap-sidebar-panel {
  border: 1.5px solid var(--line); border-radius: 14px; padding: 1.1rem;
  background: #fff; margin-bottom: 1rem;
}
html[data-theme="dark"] .chap-sidebar-panel { background: var(--dark, #12122a); }
.chap-panel-title { font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: .75rem; }
html[data-theme="dark"] .chap-panel-title { color: #C4D0F0; }

/* Syllabus checklist */
.chap-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.chap-check-item { display: flex; align-items: flex-start; gap: .6rem; }
.chap-check-item label { font-size: .83rem; line-height: 1.55; cursor: pointer; }
.chap-check-item input[type="checkbox"] { margin-top: .2rem; accent-color: var(--navy); flex-shrink: 0; }
.chap-check-item label { color: var(--ink); }
html[data-theme="dark"] .chap-check-item label { color: #CBD5E1; }
.chap-check-item.checked label { color: var(--grey); text-decoration: line-through; }
html[data-theme="dark"] .chap-check-item.checked label { color: #64748B; }

/* Exam insight panel */
.chap-insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.chap-insight-item { font-size: .83rem; line-height: 1.5; display: flex; gap: .5rem; }
.chap-insight-item::before { content: "•"; color: var(--gold); flex-shrink: 0; }

/* note-example direct-div body (no class needed in content fragments) */
.note-example > div {
  padding: .75rem 1rem 1.1rem;
  border-top: 1px solid var(--line);
  line-height: 1.7;
}
html[data-theme="dark"] .note-example > div { border-color: rgba(255,255,255,.08); color: #CBD5E1; }
.note-example > div p { margin-bottom: .55rem; }
.note-example > div ol, .note-example > div ul { padding-left: 1.3rem; margin-bottom: .5rem; }

/* note-fig-ph data-label caption */
.note-fig-ph::after {
  content: attr(data-label);
  display: block;
  font-size: .76rem;
  color: var(--grey);
  font-style: italic;
  text-align: center;
  margin-top: .3rem;
}

/* Loading skeleton */
.note-loading { padding: 2rem 0; }
.note-skel { height: 14px; background: var(--line); border-radius: 6px; margin-bottom: 10px; animation: sk-pulse 1.6s ease infinite; }
.note-skel.w60 { width: 60%; }
.note-skel.w70 { width: 70%; }
.note-skel.w80 { width: 80%; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }