/* ============================================================
   GCSE Revision Hub — iCloud.com aesthetic
   Deep cobalt swirling background, dark glass cards,
   rounded corners, app-tile subject grid.
   ============================================================ */

:root {
  /* Cobalt blue palette */
  --blue-deep:    #061a3d;
  --blue-base:    #0e2c6e;
  --blue-mid:     #1947b8;
  --blue-bright:  #4a8df0;
  --blue-soft:    #8fb5ee;

  /* Surfaces */
  --card:         rgba(10, 22, 50, 0.55);
  --card-strong:  rgba(8, 18, 42, 0.78);
  --card-soft:    rgba(20, 35, 70, 0.45);
  --card-hover:   rgba(14, 30, 65, 0.70);
  --hairline:     rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --divider:      rgba(255, 255, 255, 0.07);

  /* Ink */
  --ink:          #FFFFFF;
  --ink-soft:     rgba(255, 255, 255, 0.85);
  --ink-muted:    rgba(255, 255, 255, 0.62);
  --ink-faint:    rgba(255, 255, 255, 0.42);

  /* Functional */
  --primary:      #0A84FF;
  --primary-soft: rgba(10, 132, 255, 0.18);
  --primary-strong: #1F8DFF;
  --success:      #30D158;
  --warning:      #FF9F0A;
  --danger:       #FF453A;
  --highlight:    #FFD60A;

  /* Glass shadow + glow */
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 18px 38px -16px rgba(0, 0, 0, 0.55),
    0 40px 100px -40px rgba(0, 0, 0, 0.65);
  --glass-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 24px 48px -16px rgba(0, 0, 0, 0.60),
    0 50px 120px -40px rgba(0, 0, 0, 0.75);
  --glass-blur: blur(40px) saturate(160%);
  --glass-blur-light: blur(20px) saturate(150%);

  /* Radii — Apple sizing */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Typography */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy aliases — so existing inline styles still resolve */
  --sys-text:           var(--ink);
  --sys-text-secondary: var(--ink-muted);
  --sys-blue:           var(--primary);
  --sys-green:          var(--success);
  --sys-orange:         var(--warning);
  --sys-red:            var(--danger);
  --sys-purple:         #BF5AF2;
  --sys-pink:           #FF375F;
  --sys-cyan:           #64D2FF;
  --sys-yellow:         var(--highlight);
  --sys-gray:           var(--ink-faint);
  --glass-bg:           var(--card);
  --glass-border:       var(--hairline);
  --radius-sm:          var(--r-sm);
  --radius-md:          var(--r-md);
  --radius-lg:          var(--r-lg);
  --radius-xl:          var(--r-xl);
  --radius-pill:        var(--r-pill);
}

[data-theme="dark"] {
  /* Same iCloud.com palette — already dark by default */
  --card:         rgba(8, 18, 42, 0.62);
  --card-strong:  rgba(6, 14, 36, 0.82);
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body { height: 100%; }

/* ---------- iCloud cobalt swirl background ---------- */
body {
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background-color: var(--blue-deep);
  background-image:
    /* Bright top-left curl */
    radial-gradient(ellipse 70% 55% at 18% 8%,  rgba(120, 175, 245, 0.55) 0%, transparent 55%),
    /* Mid-left swirl */
    radial-gradient(ellipse 50% 40% at 8% 50%,  rgba(80, 140, 230, 0.45) 0%, transparent 60%),
    /* Bright bottom-right curl */
    radial-gradient(ellipse 70% 60% at 82% 92%, rgba(80, 145, 235, 0.55) 0%, transparent 55%),
    /* Lower-mid darker curve */
    radial-gradient(ellipse 60% 40% at 50% 75%, rgba(6, 18, 50, 0.55)   0%, transparent 60%),
    /* Top-right shadow */
    radial-gradient(ellipse 50% 40% at 95% 18%, rgba(6, 18, 50, 0.45)   0%, transparent 60%),
    /* Base wash */
    linear-gradient(155deg, #0a2c70 0%, #0d3a96 35%, #0a2658 70%, #061a3d 100%);
  background-attachment: fixed;
}

/* Subtle band overlay — simulates the curved swirl in iCloud bg */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 140% 50% at 0% 30%,  transparent 38%, rgba(120, 175, 245, 0.10) 42%, transparent 50%),
    radial-gradient(ellipse 140% 50% at 100% 70%, transparent 38%, rgba(120, 175, 245, 0.08) 42%, transparent 50%);
  filter: blur(20px);
}

/* ---------- Utilities ---------- */
.hidden { display: none !important; }
.text-center { text-align: center; }

/* ---------- Login overlay (client-side gate) ---------- */
/* By default the overlay is hidden; the app is shown. */
.login-screen { display: none; }
/* When html.locked is set, hide ALL body children except the overlay. */
html.locked, html.locked body { overflow: hidden; height: 100%; }
html.locked body > *:not(.login-screen) { display: none !important; }
html.locked .login-screen { display: flex; }

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #ffffff;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(74,141,240,0.45), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(25,71,184,0.55), transparent 60%),
    linear-gradient(160deg, #04122d 0%, #0a225a 55%, #04122d 100%);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: rgba(10, 22, 50, 0.55);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 32px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 24px 48px -16px rgba(0, 0, 0, 0.60),
    0 50px 120px -40px rgba(0, 0, 0, 0.75);
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 22px;
  color: #ffffff;
}
.login-logo svg { color: #4a8df0; }
.login-card h1 {
  font-size: 22px;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.login-sub {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}
.login-field { margin-bottom: 14px; }
.login-field label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}
.login-field input:focus {
  outline: none;
  border-color: #0A84FF;
  background: rgba(0, 0, 0, 0.35);
}
.login-card button[type="submit"] {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  background: #0A84FF;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 6px;
  font-family: inherit;
  transition: background 0.15s, transform 0.05s;
}
.login-card button[type="submit"]:hover { background: #1F8DFF; }
.login-card button[type="submit"]:active { transform: scale(0.985); }
.login-error {
  background: rgba(255, 69, 58, 0.12);
  border: 1px solid rgba(255, 69, 58, 0.35);
  color: #ffb4af;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.02em;
}
h1 {
  font-size: clamp(1.85rem, 3.4vw, 2.35rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
h2 {
  font-size: 1.3rem;
  font-weight: 650;
  margin-bottom: 0.85rem;
  letter-spacing: -0.015em;
}
h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 0.95rem;
  font-weight: 600;
}

p { color: var(--ink-muted); font-size: 0.95rem; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; color: var(--ink-soft); }

a { color: var(--primary); text-decoration: none; transition: var(--t); }
a:hover { color: var(--primary-strong); }

::selection { background: rgba(10, 132, 255, 0.40); color: var(--ink); }

/* ---------- Header (iCloud-style — transparent, simple) ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(6, 18, 50, 0.55), rgba(6, 18, 50, 0.10));
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  gap: 1rem;
}

.logo {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t);
  -webkit-tap-highlight-color: transparent;
}
.logo:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--hairline); }
.logo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.logo:active { transform: scale(0.97); }
.logo svg { stroke: #FFFFFF; }
.logo-img {
  width: 36px;
  height: 36px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 6px;
}
.logo-text { display: inline-block; }

nav {
  display: flex;
  gap: 2px;
  align-items: center;
  flex: 1;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }

.nav-link {
  background: transparent;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: var(--t);
}
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.nav-link.active {
  color: var(--ink);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hairline);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 5rem;
  width: 100%;
}

/* ---------- Glass card ---------- */
.glass-panel {
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  color: var(--ink);
}
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 35%);
  z-index: -1;
}
.glass-panel:hover { box-shadow: var(--glass-shadow-hover); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--ink);
  cursor: pointer;
  transition: var(--t);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px -8px rgba(0, 0, 0, 0.45);
}
.btn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 22px -8px rgba(0, 0, 0, 0.55);
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(180deg, #1F8DFF 0%, #0A6CF0 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 14px -4px rgba(10, 108, 240, 0.55);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 8px 22px -4px rgba(10, 108, 240, 0.65);
}

.btn-success {
  background: linear-gradient(180deg, #34DD60 0%, #1FB849 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 14px -4px rgba(48, 209, 88, 0.55);
}
.btn-danger {
  background: linear-gradient(180deg, #FF6961 0%, #F02D22 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 14px -4px rgba(255, 69, 58, 0.55);
}
.btn-orange {
  background: linear-gradient(180deg, #FFB84D 0%, #FF8A00 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 14px -4px rgba(255, 159, 10, 0.55);
}

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--r-pill);
}

/* ---------- Dashboard ---------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
  margin-top: 1.75rem;
}

.stat-panel {
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.stat-icon-wrapper {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  margin-bottom: 0.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.bg-blue   { background: linear-gradient(180deg, #339BFF, #0A84FF); color: #FFFFFF; }
.bg-green  { background: linear-gradient(180deg, #4ADD75, #30D158); color: #FFFFFF; }
.bg-orange { background: linear-gradient(180deg, #FFB84D, #FF9F0A); color: #FFFFFF; }
.bg-purple { background: linear-gradient(180deg, #D085F5, #BF5AF2); color: #FFFFFF; }

.stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.stat-panel h3 {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0;
}
.stat-panel p { font-size: 0.8rem; color: var(--ink-faint); }

/* ---------- Forms ---------- */
.controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

select, .apple-input {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  outline: none;
  transition: var(--t);
}
select {
  appearance: none;
  padding: 8px 32px 8px 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
}
.apple-input {
  width: 100%;
  padding: 12px 16px;
  resize: vertical;
}
.apple-input:focus, select:focus {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.20);
}
.apple-input::placeholder { color: var(--ink-faint); }

/* ---------- Doomsday Hero (countdown) — Avengers Doomsday gothic stained-glass ---------- */
.doomsday-hero {
  position: relative;
  padding: 4.5rem 2rem 3rem;
  min-height: 420px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(40, 90, 55, 0.45);
  background:
    radial-gradient(ellipse 120% 90% at 50% 100%, #02100a 0%, #030806 60%, #010403 100%),
    #020604;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    var(--glass-shadow),
    inset 0 0 120px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(140, 255, 170, 0.06);
  text-align: center;
  color: #e9fdee;
}

/* Decoration layer stack */
.doomsday-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.doomsday-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 38px rgba(70, 230, 120, 0.18));
}
.doomsday-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at 50% 38%, transparent 30%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 18%, transparent 70%, rgba(0, 0, 0, 0.7) 100%);
}
.doomsday-flare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 22% at 50% 22%, rgba(180, 255, 200, 0.32) 0%, transparent 70%),
    radial-gradient(circle at 50% 22%, rgba(220, 255, 230, 0.18) 0%, transparent 35%);
  mix-blend-mode: screen;
  animation: dd-flare-pulse 6s ease-in-out infinite;
}

/* =============================================================
   AVENGERS-DOOMSDAY LIGHT SWEEP
   A diagonal shaft of green-white cathedral light that
   continuously travels right -> left across the stained-glass
   panes. Two layers stacked together:
     .doomsday-sweep--soft : wide, blurred halo (the diffuse light)
     .doomsday-sweep--core : thin, hot-white core (the actual ray)
   Both use mix-blend-mode: screen so the panes underneath
   visibly brighten as the beam passes over them.
   ============================================================= */
.doomsday-sweep {
  position: absolute;
  top: -20%;
  bottom: -20%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  /* Start far off the right edge of the container; loop will
     translate it all the way to far past the left edge. */
  transform: translateX(280%) skewX(-14deg);
  will-change: transform, opacity;
}

/* Wide diffuse halo */
.doomsday-sweep--soft {
  left: -40%;
  width: 70%;
  background:
    linear-gradient(98deg,
      transparent 0%,
      rgba(170, 245, 195, 0.04) 20%,
      rgba(200, 255, 215, 0.18) 40%,
      rgba(235, 255, 240, 0.42) 49%,
      rgba(255, 255, 255, 0.62) 50%,
      rgba(235, 255, 240, 0.42) 51%,
      rgba(200, 255, 215, 0.18) 60%,
      rgba(170, 245, 195, 0.04) 80%,
      transparent 100%);
  filter: blur(20px) saturate(1.1);
  animation: dd-sweep-loop 9.5s ease-in-out infinite;
}

/* Thin hot-white core ray — slightly delayed so it trails the halo */
.doomsday-sweep--core {
  left: -25%;
  width: 32%;
  background:
    linear-gradient(98deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.55) 47%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.55) 53%,
      rgba(255, 255, 255, 0) 70%,
      transparent 100%);
  filter: blur(7px);
  animation: dd-sweep-loop 9.5s ease-in-out 0.25s infinite;
}

@keyframes dd-sweep-loop {
  0%   { transform: translateX(280%) skewX(-14deg); opacity: 0; }
  10%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(-260%) skewX(-14deg); opacity: 0; }
}

@keyframes dd-flare-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* The big background letters get a faint pulse too so the whole
   scene breathes rather than sitting frozen between sweeps. */
.doomsday-bg-letters {
  animation: dd-letters-breathe 9.5s ease-in-out infinite;
}
@keyframes dd-letters-breathe {
  0%, 100% { filter: drop-shadow(0 0 28px rgba(90, 250, 130, 0.30))
                    drop-shadow(0 0 6px rgba(180, 255, 200, 0.20)); }
  50%      { filter: drop-shadow(0 0 42px rgba(120, 255, 160, 0.55))
                    drop-shadow(0 0 12px rgba(200, 255, 220, 0.35)); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .doomsday-sweep,
  .doomsday-flare,
  .doomsday-bg-letters {
    animation: none !important;
  }
  .doomsday-sweep { opacity: 0 !important; }
}

/* =============================================================
   ROLLING-COUNTER DIGIT ANIMATION (safe-combination-lock style)
   Each .dd-flap is a single digit cell with overflow: hidden
   acting as the viewing window. When the digit changes, the
   strip scrolls UP by one slot:
     - .dd-flap-base shows the NEW digit and animates from
       translateY(100%) -> 0 (rises into view from below)
     - a temporary .dd-flap-leaf-old shows the OLD digit and
       animates from translateY(0) -> -100% (rolls up out the top)
   Net effect: tumbler rolling upward to land on the new value.
   ============================================================= */
.dd-flap {
  position: relative;
  display: inline-block;
  width: 1ch;
  height: 1em;
  vertical-align: baseline;
  text-align: center;
  line-height: 1;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.dd-flap-base {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.dd-flap-leaf {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  line-height: 1;
  z-index: 2;
  will-change: transform;
}

/* The two halves of the roll, kept in sync via identical timing.
   Adding .is-rolling on the cell triggers BOTH animations. */
.dd-flap.is-rolling .dd-flap-base {
  animation: dd-roll-up-in 420ms cubic-bezier(0.65, 0.04, 0.35, 1) forwards;
}
.dd-flap.is-rolling .dd-flap-leaf-old {
  animation: dd-roll-up-out 420ms cubic-bezier(0.65, 0.04, 0.35, 1) forwards;
}

@keyframes dd-roll-up-in {
  0%   { transform: translateY(100%); opacity: 0.55; filter: brightness(0.85); }
  35%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1;    filter: brightness(1); }
}
@keyframes dd-roll-up-out {
  0%   { transform: translateY(0);     opacity: 1;    filter: brightness(1); }
  65%  { opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0.55; filter: brightness(0.85); }
}

/* Subtle horizontal divot through the middle — the "viewing window"
   line you see across a combination lock's tumblers. */
.dd-flap::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 3;
  opacity: 0.5;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .dd-flap-leaf { display: none !important; }
  .dd-flap.is-rolling .dd-flap-base { animation: none !important; }
}


/* 3-character abbreviation glowing through the glass */
.doomsday-bg-letters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: clamp(6rem, 22vw, 17rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(220, 255, 230, 0.85) 0%,
    rgba(110, 240, 145, 0.55) 35%,
    rgba(20, 90, 45, 0.25) 75%,
    transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(120, 255, 160, 0.35);
  filter:
    drop-shadow(0 0 28px rgba(90, 250, 130, 0.35))
    drop-shadow(0 0 6px rgba(180, 255, 200, 0.25));
  -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
  opacity: 0.9;
  mix-blend-mode: screen;
}

.doomsday-hero > *:not(.doomsday-bg-letters):not(.doomsday-decor) {
  position: relative;
  z-index: 5;
}

.doomsday-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200, 255, 215, 0.7);
  margin-bottom: 1.1rem;
  text-shadow: 0 0 14px rgba(80, 220, 120, 0.35);
}

.doomsday-title {
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.005em;
  color: #f4fff7;
  margin: 0 0 0.5rem;
  line-height: 1.12;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(120, 255, 160, 0.35),
    0 2px 24px rgba(0, 0, 0, 0.6);
}

.doomsday-meta {
  font-size: 0.82rem;
  color: rgba(210, 240, 220, 0.7);
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.doomsday-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.dd-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 3.6rem;
}

.dd-num {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 6.2vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 22px rgba(140, 255, 175, 0.35),
    0 0 4px rgba(255, 255, 255, 0.5);
}

.dd-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(200, 240, 215, 0.6);
}

.dd-sep {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 6.2vw, 4rem);
  font-weight: 300;
  color: rgba(190, 255, 210, 0.55);
  line-height: 1;
  align-self: flex-start;
  text-shadow: 0 0 12px rgba(120, 255, 160, 0.25);
}

.dd-passed {
  font-size: 1rem;
  font-weight: 600;
  color: #ff7b7b;
  padding: 1rem 0;
  text-shadow: 0 0 18px rgba(255, 80, 80, 0.4);
}

.doomsday-btn {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(8, 22, 14, 0.7);
  border: 1px solid rgba(120, 240, 150, 0.35);
  color: #e9fdee;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}
.doomsday-btn:hover {
  background: rgba(40, 110, 60, 0.35);
  border-color: rgba(160, 255, 185, 0.6);
  box-shadow: 0 0 24px rgba(80, 230, 120, 0.25);
}

/* The chip should pop against the dark backdrop */
.doomsday-eyebrow .subject-chip {
  box-shadow:
    0 0 0 1px rgba(140, 255, 170, 0.25),
    0 0 18px rgba(80, 230, 120, 0.25);
}

.doomsday-done .doomsday-clock,
.doomsday-done .doomsday-meta { opacity: 0.5; }

/* ---------- Subject chip — squircle monogram ---------- */
.subject-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 4px 12px -6px rgba(0, 0, 0, 0.45);
}

/* ---------- Subjects Grid (iCloud app-launcher style) ---------- */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.subject-card {
  position: relative;
  cursor: pointer;
  padding: 1.4rem 1.25rem 1.1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  transition: var(--t);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
  overflow: hidden;
}
.subject-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%);
  z-index: -1;
}
.subject-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--glass-shadow-hover);
  border-color: var(--hairline-strong);
}

.subject-card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.subject-card-titles { min-width: 0; flex: 1; }
.subject-card-name {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 1px;
  color: var(--ink);
}
.subject-card-board {
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin: 0;
  letter-spacing: 0.005em;
}
.subject-card-cd {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  line-height: 1.2;
}
.subject-card-cd strong { color: var(--ink); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.subject-card-cd-label {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.subject-card-cd-done {
  color: var(--success);
  font-weight: 600;
  font-size: 0.95rem;
}
.subject-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--divider);
}
.subject-card-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.subject-card-arrow {
  font-size: 1rem;
  color: var(--primary);
  font-weight: 600;
  transition: var(--t);
}
.subject-card:hover .subject-card-arrow { transform: translateX(3px); }

/* ---------- Subject Hub ---------- */
.subject-hub-view { display: flex; flex-direction: column; gap: 1.25rem; }

.btn-back {
  align-self: flex-start;
  padding: 7px 14px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: var(--t);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.btn-back:hover { color: var(--ink); background: rgba(255, 255, 255, 0.12); transform: translateX(-2px); }

.subject-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  flex-wrap: wrap;
}
.subject-hero-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.subject-hero-head h1 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}
.subject-hero-meta {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.subject-hero-countdown { text-align: right; }
.subject-hero-cd-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 4px;
}
.subject-hero-cd-value {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.subject-hero-cd-value strong { color: var(--warning); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; }

/* French built-in tools — app-tile style */
.subject-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
}
.subject-tool-btn {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: var(--t);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.subject-tool-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
}
.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.tool-label {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.tool-desc {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* Subject units list */
.subject-units-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.subject-units-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.subject-units-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}

/* Resource list & filters */
.resource-filter-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.resource-filter {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: var(--t);
}
.resource-filter:hover { color: var(--ink); background: rgba(255, 255, 255, 0.10); }
.resource-filter.active {
  color: #FFFFFF;
  background: var(--primary);
  border-color: var(--primary);
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
.resource-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  color: var(--ink);
  transition: var(--t);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.resource-card:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
  text-decoration: none;
  color: var(--ink);
}
.resource-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.resource-type-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.resource-provider {
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-weight: 500;
}
.resource-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.resource-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.45;
}
.resource-card-link {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}

/* ---------- Exam list ---------- */
.exam-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.exam-filter {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: var(--t);
}
.exam-filter:hover { color: var(--ink); background: rgba(255, 255, 255, 0.10); }
.exam-filter.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.exam-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.exam-row {
  --accent: var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.3rem;
  background: var(--card);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: var(--t);
}
.exam-row::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.exam-row:hover {
  background: var(--card-hover);
  border-color: var(--hairline-strong);
}

.exam-row-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}
.exam-info { min-width: 0; }
.exam-title {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1px;
  line-height: 1.3;
}
.exam-paper {
  color: var(--ink-muted);
  font-weight: 500;
}
.exam-meta {
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.exam-row-right {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: -0.01em;
}
.exam-row-right strong { font-weight: 700; color: var(--warning); font-size: 1.1rem; }
.cd-past { color: var(--ink-faint); font-style: italic; }

.exam-past { opacity: 0.5; }
.exam-past .exam-title { text-decoration: line-through; }

/* ---------- Exam timetable view ---------- */
.exam-timetable { display: flex; flex-direction: column; gap: 1.5rem; }
.exam-tt-week { display: flex; flex-direction: column; gap: 0.5rem; }
.exam-tt-week-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 0.25rem 0.25rem;
}
.exam-tt-days { display: flex; flex-direction: column; gap: 0.65rem; }
.exam-tt-day {
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.exam-tt-day.is-today {
  border-color: rgba(10, 132, 255, 0.45);
  box-shadow: var(--glass-shadow), 0 0 30px -8px rgba(10, 132, 255, 0.45);
}
.exam-tt-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
.exam-tt-date { font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }
.exam-tt-count { font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; }
.exam-tt-slots { display: flex; flex-direction: column; gap: 0.55rem; }
.exam-tt-slot {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--accent, var(--primary));
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.exam-tt-time {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  min-width: 56px;
  letter-spacing: -0.01em;
}
.exam-tt-body { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; }
.exam-tt-info { flex: 1; min-width: 0; }
.exam-tt-title { font-weight: 600; color: var(--ink); }
.exam-tt-paper { color: var(--ink-muted); font-weight: 500; }
.exam-tt-meta { font-size: 0.78rem; color: var(--ink-muted); margin-top: 2px; }

@media (max-width: 640px) {
  .exam-tt-time { min-width: 48px; font-size: 0.85rem; }
  .exam-tt-meta { font-size: 0.72rem; }
}

/* ---------- Flashcards ---------- */
.flashcard-container {
  perspective: 1400px;
  margin: 0 auto;
  max-width: 760px;
}
.flashcard {
  width: 100%;
  min-height: 380px;
  position: relative;
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
  margin-bottom: 1.25rem;
}
.flashcard.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.75rem 2rem;
  text-align: center;
  background: var(--card-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  overflow-y: auto;
  isolation: isolate;
}
.card-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(74, 141, 240, 0.20) 0%, transparent 60%);
  z-index: -1;
}
.card-back {
  transform: rotateY(180deg);
  border-color: rgba(10, 132, 255, 0.30);
  box-shadow:
    var(--glass-shadow),
    0 0 60px -20px rgba(10, 132, 255, 0.45);
}

.audio-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--t);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.audio-btn:hover { background: rgba(255, 255, 255, 0.16); color: var(--primary); }

.theme-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.srs-info {
  position: absolute;
  bottom: 1.1rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.fc-text, .fc-hint {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.85rem;
  line-height: 1.4;
  width: 100%;
  color: var(--ink);
}
.fc-hint {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 1.25rem;
  border-top: 1px solid var(--divider);
  padding-top: 1rem;
}

/* ---------- Animations ---------- */
.pulse-anim { animation: pulseSubtle 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pulseSubtle {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.shake-anim {
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: var(--danger) !important;
  background: rgba(255, 69, 58, 0.10) !important;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.liquid-bounce { animation: bounceTap 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes bounceTap {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.floating-point {
  position: absolute;
  font-weight: 800;
  font-size: 1.5rem;
  pointer-events: none;
  animation: floatFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  z-index: 50;
}
.float-plus  { color: var(--success); }
.float-minus { color: var(--danger); }
@keyframes floatFade {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  20%  { opacity: 1; transform: translateY(0)   scale(1.1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1); }
}

/* ---------- Quiz ---------- */
.options-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 1.5rem;
}
@media (max-width: 600px) {
  .options-stack { grid-template-columns: 1fr; }
}

.quiz-option {
  width: 100%;
  text-align: left;
  padding: 13px 18px;
  font-size: 0.95rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--t);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
}
.quiz-option:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.quiz-option.correct {
  background: rgba(48, 209, 88, 0.18);
  border-color: rgba(48, 209, 88, 0.55);
  color: #4ADD75;
  font-weight: 600;
}
.quiz-option.wrong {
  background: linear-gradient(180deg, #FF6961, #F02D22);
  border-color: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
  font-weight: 600;
}

.quiz-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
}
.quiz-option.correct .quiz-circle { background: var(--success); border-color: var(--success); }
.quiz-option.wrong   .quiz-circle { background: #FFFFFF; border-color: #FFFFFF; }

/* Test word diffing */
.diff-word {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 0.95em;
}
.diff-correct { background: rgba(48, 209, 88, 0.18); color: #4ADD75; border: 1px solid rgba(48, 209, 88, 0.5); }
.diff-wrong   { background: rgba(255, 69, 58, 0.18); color: #FF7A75; border: 1px solid rgba(255, 69, 58, 0.5); text-decoration: line-through; }
.diff-missing { background: rgba(255, 159, 10, 0.18); color: #FFB84D; border: 1px dashed rgba(255, 159, 10, 0.6); }

/* ---------- Resources tables (legacy French) ---------- */
.resource-section { margin-bottom: 1.25rem; }
.resource-section h3 {
  color: var(--ink);
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.resource-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.resource-table th, .resource-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
  color: var(--ink-soft);
}
.resource-table th {
  background: rgba(10, 132, 255, 0.10);
  font-weight: 600;
  color: var(--ink);
}
.resource-table tr:last-child td { border-bottom: none; }

/* ---------- Mock exam timer ---------- */
.exam-timer {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--warning);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Progress bar ---------- */
.progress-container {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 6px;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-strong) 100%);
  border-radius: inherit;
  transition: width 0.3s ease;
}

/* ---------- Confetti ---------- */
#confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ---------- Clicker widget ---------- */
.clicker-widget {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  overflow: hidden;
  cursor: pointer;
  z-index: 1000;
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 12px 28px -8px rgba(0, 0, 0, 0.55);
  transition: var(--t);
}
.clicker-widget:hover { transform: translateY(-2px) scale(1.05); }
.clicker-widget:active { transform: scale(0.95); }
.clicker-color { flex: 1; height: 100%; }
.clicker-blue  { background-color: #002395; }
.clicker-white { background-color: #FFFFFF; }
.clicker-red   { background-color: #ED2939; }
.clicker-count {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  header { padding: 0.65rem 1rem; }
  .logo { font-size: 1rem; }
  .nav-link { padding: 6px 11px; font-size: 0.85rem; }
  main { padding: 1.5rem 1rem 3.5rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.15rem; }
  .glass-panel { padding: 1.2rem 1.3rem; border-radius: var(--r-md); }
  .doomsday-hero { padding: 3rem 1.4rem 2rem; min-height: 360px; }
  .doomsday-clock { gap: 0.45rem; }
  .dd-segment { min-width: 2.7rem; gap: 0.4rem; }
  .dd-num, .dd-sep { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .doomsday-title { font-size: clamp(1.35rem, 5.4vw, 1.7rem); }
  .dd-label { font-size: 0.58rem; letter-spacing: 0.18em; }
  .subject-hero { padding: 1.4rem 1.5rem; }
  .subject-hero-head h1 { font-size: 1.4rem; }
  .exam-row { padding: 0.85rem 1rem 0.85rem 1.2rem; flex-wrap: wrap; }
  .exam-row-right { width: 100%; text-align: left; padding-left: 50px; }
  .exam-meta { font-size: 0.74rem; }
  .stat-value { font-size: 1.85rem; }
  .clicker-widget { width: 48px; height: 48px; bottom: 1rem; right: 1rem; }
}

@media (max-width: 480px) {
  .controls-bar { gap: 0.5rem; }
  .flashcard { min-height: 360px; }
  .fc-text, .fc-hint { font-size: 1.05rem; }
  .audio-btn { width: 34px; height: 34px; }
  .theme-badge { font-size: 0.66rem; padding: 4px 10px; }
  .subject-chip { width: 34px; height: 34px; font-size: 0.66rem; }
}

/* =================================================================
   ENGLISH LITERATURE PAPER 1 TOOLS
   ================================================================= */

/* Lit flashcard — taller because of analysis content */
.flashcard.lit-flashcard { min-height: 540px; }
.flashcard.lit-flashcard .card-face {
  padding: 2.25rem 2rem;
  text-align: left;
  justify-content: flex-start;
  gap: 0.5rem;
}
.flashcard.lit-flashcard .card-front {
  text-align: center;
  justify-content: center;
}
.lit-fc-cue {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 90%;
  margin: 1.5rem auto 0;
}
.lit-fc-themes {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
}
.lit-fc-quote {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--primary);
  padding: 0.4rem 0 0.4rem 1rem;
  margin: 0.5rem 0 0.4rem;
  letter-spacing: -0.01em;
}
.lit-fc-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 1rem;
  font-weight: 500;
}
.lit-fc-section {
  margin-top: 0.5rem;
  width: 100%;
}
.lit-fc-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.lit-fc-analysis,
.lit-fc-context {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.lit-fc-methods {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
}
.flashcard.lit-flashcard .srs-info { position: static; margin-top: auto; padding-top: 0.75rem; }

/* =================================================================
   QUOTE CARD REVAMP — quote on FRONT, AO1/AO2/AO3 on BACK
   ================================================================= */
.flashcard.lit-fc-aocard { min-height: 600px; }
.lit-fc-stage { margin-top: 0.5rem; }
.lit-fc-controls {
  align-items: center;
}
.lit-fc-counter {
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 0.95rem;
}
.lit-fc-nav-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 1.2rem 0 1rem;
}
.lit-fc-rate-row {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.lit-fc-rate-row .btn { flex: 1; max-width: 220px; }

/* FRONT face — present the quote */
.lit-fc-front {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  text-align: left !important;
  padding: 2rem 2.2rem !important;
  gap: 1rem;
}
.lit-fc-front-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.lit-fc-work-pill {
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lit-fc-flip-hint {
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.lit-fc-front-quote {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  border-left: 4px solid var(--primary);
  padding: 0.5rem 0 0.5rem 1.2rem;
  margin: auto 0;
  letter-spacing: -0.012em;
  font-style: italic;
}
.lit-fc-front-foot {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px dashed rgba(120, 120, 120, 0.18);
  padding-top: 0.8rem;
}
.lit-fc-front-foot .lit-fc-meta { margin-bottom: 0; }

/* BACK face — AO1/AO2/AO3 grid */
.lit-fc-back {
  text-align: left !important;
  padding: 1.4rem 1.5rem !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
}
.lit-fc-back-head {
  border-bottom: 1px dashed rgba(120, 120, 120, 0.18);
  padding-bottom: 0.7rem;
}
.lit-fc-back-quote {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  border-left: 3px solid var(--primary);
  padding: 0.2rem 0 0.2rem 0.8rem;
  margin: 0 0 0.3rem;
}
.lit-fc-back-head .lit-fc-meta { margin: 0; }

.lit-fc-ao-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 880px) {
  .lit-fc-ao-grid { grid-template-columns: repeat(3, 1fr); }
}
.lit-fc-ao {
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.lit-fc-ao1 {
  background: rgba(94, 92, 230, 0.10);
  border-color: rgba(94, 92, 230, 0.22);
}
.lit-fc-ao2 {
  background: rgba(48, 209, 88, 0.10);
  border-color: rgba(48, 209, 88, 0.22);
}
.lit-fc-ao3 {
  background: rgba(255, 159, 10, 0.10);
  border-color: rgba(255, 159, 10, 0.22);
}
.lit-fc-ao-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lit-fc-ao-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
}
.lit-fc-ao1 .lit-fc-ao-tag { background: var(--sys-indigo, #5E5CE6); }
.lit-fc-ao2 .lit-fc-ao-tag { background: var(--sys-green, #30D158); }
.lit-fc-ao3 .lit-fc-ao-tag { background: var(--sys-orange, #FF9F0A); }
.lit-fc-ao-name {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lit-fc-ao-methods {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  margin: 0;
}
.lit-fc-ao-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.lit-fc-srs {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

[data-theme="light"] .lit-fc-ao-methods { background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .lit-fc-ao1 { background: rgba(94, 92, 230, 0.08); }
[data-theme="light"] .lit-fc-ao2 { background: rgba(48, 209, 88, 0.10); }
[data-theme="light"] .lit-fc-ao3 { background: rgba(255, 159, 10, 0.10); }

/* Theme tracker timeline */
.lit-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.lit-timeline-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.lit-timeline-dot {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  box-shadow: 0 8px 18px -8px rgba(10, 132, 255, 0.6);
  position: relative;
}
.lit-timeline-row:not(:last-child) .lit-timeline-dot::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: calc(100% + 1rem);
  background: rgba(10, 132, 255, 0.25);
  transform: translateX(-50%);
}
.lit-timeline-card {
  flex: 1;
  padding: 1.1rem 1.25rem;
}
.lit-timeline-stage {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warning);
  margin-bottom: 0.4rem;
}
.lit-timeline-card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.lit-timeline-quote {
  font-family: var(--font-sans);
  font-style: italic;
  color: var(--ink);
  background: rgba(10, 132, 255, 0.10);
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--primary);
  margin: 0.5rem 0;
  font-size: 0.92rem;
}
.lit-timeline-card p { font-size: 0.88rem; color: var(--ink-muted); }

/* Lit quiz */
.lit-quiz-modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
}
.lit-quiz-explain {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 214, 10, 0.10);
  border-left: 3px solid var(--highlight);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Thesis builder */
.thesis-define { color: #FFD60A; background: rgba(255, 214, 10, 0.10); padding: 1px 5px; border-radius: 4px; }
.thesis-refine { color: #30D158; background: rgba(48, 209, 88, 0.10); padding: 1px 5px; border-radius: 4px; }
.thesis-outline { color: #64D2FF; background: rgba(100, 210, 255, 0.10); padding: 1px 5px; border-radius: 4px; }
.thesis-placeholder { color: var(--ink-faint); font-style: italic; }
.thesis-preview {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
}
.thesis-example-row {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink);
  margin-top: 0.75rem;
}
.thesis-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.thesis-label-define { color: #FFD60A; }
.thesis-label-refine { color: #30D158; }
.thesis-label-outline { color: #64D2FF; }

/* Keyword bank */
.lit-keyword-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lit-keyword-chip {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  transition: var(--t);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.lit-keyword-chip:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.lit-keyword-chip.copied { background: rgba(48, 209, 88, 0.30); border-color: var(--success); }
.lit-keyword-chip.type-connective { color: #64D2FF; }
.lit-keyword-chip.type-macbeth    { color: #FF8E84; }
.lit-keyword-chip.type-acc        { color: #D7A4F4; }
.lit-keyword-chip.type-ao3        { color: #FFD60A; }

/* Reference hub tabs */
.lit-ref-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.lit-ref-tab {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-muted);
  cursor: pointer;
  transition: var(--t);
}
.lit-ref-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.10); }
.lit-ref-tab.active {
  color: var(--ink);
  font-weight: 600;
  background: rgba(10, 132, 255, 0.20);
  border-color: rgba(10, 132, 255, 0.45);
}
.lit-ref-block { margin-bottom: 1.5rem; }
.lit-ref-block:last-child { margin-bottom: 0; }
.lit-ref-block h3 {
  color: var(--primary);
  font-size: 1rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.lit-ref-list, .lit-ref-numbered {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.lit-ref-list li, .lit-ref-numbered li {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.lit-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lit-chip {
  display: inline-block;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(10, 132, 255, 0.15);
  border: 1px solid rgba(10, 132, 255, 0.35);
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .flashcard.lit-flashcard { min-height: 600px; }
  .lit-fc-quote { font-size: 1rem; padding-left: 0.7rem; }
  .lit-timeline-row { gap: 0.6rem; }
  .lit-timeline-dot { flex: 0 0 28px; height: 28px; font-size: 0.78rem; }
}

/* ----- Essay Plans (litessays) ----- */
.lit-essay-intro {
  margin-bottom: 1rem;
}
.lit-essay-card {
  margin-bottom: 0.85rem;
  padding: 1rem 1.2rem;
  transition: padding 0.18s ease;
}
.lit-essay-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 1rem;
  user-select: none;
}
.lit-essay-card-header:hover .lit-essay-toggle {
  transform: translateY(1px);
  color: var(--sys-blue);
}
.lit-essay-year {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 69, 58, 0.18);
  border: 1px solid rgba(255, 69, 58, 0.4);
  color: var(--sys-red, #FF453A);
  margin-right: 0.5rem;
}
.lit-essay-focus {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
}
.lit-essay-toggle {
  font-size: 1.3rem;
  color: var(--ink-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.lit-essay-card.expanded .lit-essay-toggle {
  transform: rotate(180deg);
  color: var(--sys-blue);
}
.lit-essay-question {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.55;
}
.lit-essay-body {
  display: none;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(120, 120, 120, 0.18);
}
.lit-essay-card.expanded .lit-essay-body { display: block; }
.lit-essay-section {
  margin-bottom: 1rem;
}
.lit-essay-section h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--sys-blue);
}
.lit-essay-section p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.lit-essay-section ul, .lit-essay-section ol {
  font-size: 0.9rem;
  line-height: 1.55;
  padding-left: 1.2rem;
  margin: 0.4rem 0 0;
}
.lit-essay-section li { margin-bottom: 0.35rem; }
.lit-essay-counter {
  background: rgba(255, 159, 10, 0.10);
  border-left: 3px solid var(--sys-orange, #FF9F0A);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
}
.lit-essay-counter h4 { color: var(--sys-orange, #FF9F0A); }
.lit-essay-tips {
  background: rgba(48, 209, 88, 0.10);
  border-left: 3px solid var(--sys-green, #30D158);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
}
.lit-essay-tips h4 { color: var(--sys-green, #30D158); }
.thesis-define { color: var(--sys-purple, #BF5AF2); font-weight: 600; }
.thesis-refine { color: var(--sys-blue, #0A84FF); font-weight: 600; }
.thesis-outline { color: var(--sys-green, #30D158); font-weight: 600; }

/* New essay-plan sections — topic sentences / quote bank / wider message */
.lit-essay-topics {
  background: rgba(94, 92, 230, 0.08);
  border-left: 3px solid var(--sys-indigo, #5E5CE6);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
}
.lit-essay-topics h4 { color: var(--sys-indigo, #5E5CE6); }
.lit-topic-list {
  margin: 0.3rem 0 0;
  padding-left: 1.4rem;
}
.lit-topic-list li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 500;
}
.lit-essay-quotebank {
  background: rgba(255, 214, 10, 0.09);
  border-left: 3px solid var(--sys-yellow, #FFD60A);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
}
.lit-essay-quotebank h4 { color: #B8860B; }
.lit-quote-list {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}
.lit-quote-list li {
  margin-bottom: 0.4rem;
  list-style: '▸ ';
}
.lit-quote {
  font-style: italic;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}
.lit-essay-widermsg {
  background: rgba(191, 90, 242, 0.08);
  border-left: 3px solid var(--sys-purple, #BF5AF2);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
}
.lit-essay-widermsg h4 { color: var(--sys-purple, #BF5AF2); }
.lit-essay-widermsg p {
  font-style: italic;
  margin: 0;
}

/* ----- Essay-plan tiles (grid list) ----- */
.lit-essay-section-heading {
  margin: 1.5rem 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.2px;
}
.lit-essay-section-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink-muted);
}
.lit-essay-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.lit-essay-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  padding: 1rem 1.1rem 0.95rem;
  cursor: pointer;
  border: none;
  font: inherit;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lit-essay-tile:hover {
  transform: translateY(-2px);
}
.lit-essay-tile:focus-visible {
  outline: 2px solid var(--sys-blue);
  outline-offset: 3px;
}
.lit-essay-tile .lit-essay-year {
  margin-right: 0;
}
.lit-essay-tile .lit-essay-focus {
  font-size: 1rem;
  line-height: 1.3;
}
.lit-essay-tile-q {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lit-essay-tile-cta {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sys-blue);
  letter-spacing: 0.3px;
}

/* ----- Essay-plan dedicated webpage (litessay-doc) -----
   Solid dark-grey document surface, Roboto throughout, refined hierarchy. */
.lit-essay-doc-page,
.lit-essay-doc-page * {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.lit-essay-doc-page {
  position: relative;
  margin: 1rem auto 3rem;
  max-width: 860px;
  color: #ECECEE;
  border-radius: 18px;
  background: #1F2024;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 24px 60px -22px rgba(0, 0, 0, 0.75),
    0 8px 22px -10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.lit-essay-doc-page-header {
  padding: 1.6rem 2rem 1.2rem;
  background: linear-gradient(180deg, #25262B 0%, #1F2024 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lit-essay-doc-page-text {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #FF6961;
  margin-bottom: 0.55rem;
}
.lit-essay-doc-page-header h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.3;
  color: #FFFFFF;
  letter-spacing: -0.3px;
}
.lit-essay-doc-page-body {
  padding: 1.5rem 2rem 2.2rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  color: #D5D5DA;
  background: #1F2024;
}
.lit-essay-doc-page-body .lit-essay-section { margin-bottom: 1rem; }
.lit-essay-doc-page-body .lit-essay-section h4 {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 0.55rem;
  color: #8AB6F4;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.lit-essay-doc-page-body .lit-essay-section p {
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0 0 0.5rem;
  color: #D5D5DA;
  font-weight: 400;
}
.lit-essay-doc-page-body .lit-essay-section ol,
.lit-essay-doc-page-body .lit-essay-section ul {
  font-size: 0.93rem;
  line-height: 1.65;
  margin: 0.4rem 0 0;
  padding-left: 1.4rem;
  color: #D5D5DA;
}
.lit-essay-doc-page-body .lit-essay-section li { margin-bottom: 0.5rem; }
.lit-essay-doc-page-body .lit-essay-section strong {
  color: #FFFFFF;
  font-weight: 500;
}
.lit-essay-doc-page-body .thesis-define  { color: #D6A8FF; font-weight: 500; }
.lit-essay-doc-page-body .thesis-refine  { color: #8AB6F4; font-weight: 500; }
.lit-essay-doc-page-body .thesis-outline { color: #7DD68C; font-weight: 500; }
@media (max-width: 600px) {
  .lit-essay-doc-page { border-radius: 14px; margin: 0.5rem 0 2rem; }
  .lit-essay-doc-page-header { padding: 1.2rem 1.2rem 0.9rem; }
  .lit-essay-doc-page-header h1 { font-size: 1.25rem; }
  .lit-essay-doc-page-body { padding: 1.1rem 1.2rem 1.6rem; }
}
.lit-essay-doc-question {
  background: #2A2B30;
  border-left: 3px solid #FFD96E;
  padding: 0.95rem 1.15rem;
  border-radius: 10px;
  margin-bottom: 1.3rem;
}
.lit-essay-doc-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFD96E;
  margin-bottom: 0.45rem;
}
.lit-essay-doc-question p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #ECECEE;
  font-weight: 400;
  font-style: italic;
}

/* ----- Essay-plan accordion rows (used inside .lit-essay-doc-page) ----- */
.lit-doc-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.4rem;
}
.lit-doc-row {
  background: #25262B;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.lit-doc-row:hover {
  background: #2A2B30;
  border-color: rgba(255, 255, 255, 0.10);
}
.lit-doc-row[open] {
  background: #25262B;
  border-color: rgba(255, 255, 255, 0.10);
}
.lit-doc-row > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ECECEE;
  user-select: none;
}
.lit-doc-row > summary::-webkit-details-marker { display: none; }
.lit-doc-row-label {
  flex: 1;
  line-height: 1.35;
  letter-spacing: 0.1px;
}
.lit-doc-row-chev {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #8E8E93;
  transition: transform 0.22s ease, color 0.22s ease;
}
.lit-doc-row[open] > summary .lit-doc-row-chev {
  transform: rotate(180deg);
  color: #8AB6F4;
}
.lit-doc-row-body {
  padding: 0.85rem 1.1rem 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lit-doc-row-body > p:first-child { margin-top: 0; }
.lit-doc-row-body > *:last-child { margin-bottom: 0; }

.lit-doc-row-body p {
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 0.5rem;
  color: #D5D5DA;
  font-weight: 400;
}
.lit-doc-row-body strong { color: #FFFFFF; font-weight: 500; }
.lit-doc-row-body ol,
.lit-doc-row-body ul {
  font-size: 0.91rem;
  line-height: 1.65;
  margin: 0;
  padding-left: 1.4rem;
  color: #D5D5DA;
}
.lit-doc-row-body li { margin-bottom: 0.45rem; }
.lit-doc-row-body .lit-quote-list li { list-style: '▸ '; }
.lit-doc-row-body .lit-quote { font-style: italic; color: #ECECEE; }
.lit-doc-row-body .thesis-define  { color: #D6A8FF; font-weight: 500; }
.lit-doc-row-body .thesis-refine  { color: #8AB6F4; font-weight: 500; }
.lit-doc-row-body .thesis-outline { color: #7DD68C; font-weight: 500; }

/* Per-row accent — left bar + label tint when open. Soft, brand-coherent palette. */
.lit-doc-row--thesis[open]      { border-left: 3px solid #C58CF5; }
.lit-doc-row--thesis[open] > summary .lit-doc-row-label { color: #D6A8FF; }

.lit-doc-row--topics[open]      { border-left: 3px solid #8E8AF6; }
.lit-doc-row--topics[open] > summary .lit-doc-row-label { color: #B5B3FF; }

.lit-doc-row--quotes[open]      { border-left: 3px solid #FFD96E; }
.lit-doc-row--quotes[open] > summary .lit-doc-row-label { color: #FFD96E; }

.lit-doc-row--wider[open]       { border-left: 3px solid #C58CF5; }
.lit-doc-row--wider[open] > summary .lit-doc-row-label { color: #D6A8FF; }

.lit-doc-row--para[open]        { border-left: 3px solid #6FA8E8; }
.lit-doc-row--para[open] > summary .lit-doc-row-label { color: #8AB6F4; }

.lit-doc-row--counter[open]     { border-left: 3px solid #F5B968; }
.lit-doc-row--counter[open] > summary .lit-doc-row-label { color: #FFB95C; }

.lit-doc-row--conclusion[open]  { border-left: 3px solid #6FA8E8; }
.lit-doc-row--conclusion[open] > summary .lit-doc-row-label { color: #8AB6F4; }

.lit-doc-row--tips[open]        { border-left: 3px solid #6FCB7E; }
.lit-doc-row--tips[open] > summary .lit-doc-row-label { color: #7DD68C; }

.lit-doc-row--example[open]     { border-left: 3px solid #6FCB7E; }
.lit-doc-row--example[open] > summary .lit-doc-row-label { color: #7DD68C; }
.lit-doc-row--example .lit-doc-row-body p {
  font-size: 0.94rem;
  line-height: 1.75;
  text-align: justify;
}

/* ----- Grade 7-9 standard banner ----- */
.lit-grade-banner {
  background: linear-gradient(135deg, rgba(125, 214, 140, 0.10), rgba(110, 168, 232, 0.10));
  border: 1px solid rgba(125, 214, 140, 0.3);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.05rem;
  margin: 0.6rem 0 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.lit-grade-banner-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(125, 214, 140, 0.25);
  color: #9BE5AB;
  border: 1px solid rgba(125, 214, 140, 0.5);
  text-transform: uppercase;
}
.lit-grade-banner p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #D5D5DA;
}
.lit-grade-banner strong { color: #ECECEE; font-weight: 600; }

/* ----- Inline jargon glossary tooltips ----- */
.lit-gloss {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1.5px dotted rgba(138, 182, 244, 0.7);
  color: #A8C8F4;
  text-decoration: none;
}
.lit-gloss:focus { outline: 2px solid #6FA8E8; outline-offset: 2px; border-radius: 2px; }
.lit-gloss-tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #1F2024;
  color: #ECECEE;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 400;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 220px;
  max-width: 320px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
  white-space: normal;
  text-align: left;
}
.lit-gloss:hover .lit-gloss-tip,
.lit-gloss:focus .lit-gloss-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}
.lit-gloss[title] { /* native title tooltip as graceful fallback */ }

/* "Purpose" labels under skeleton row labels */
.lit-skel-label small {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.3px;
  text-transform: none;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 0.2rem;
  line-height: 1.35;
  opacity: 0.85;
}

/* ----- Plan Skeleton (Define / Refine / TS1-3 / Outline) ----- */
.lit-skeleton {
  background: #1F2024;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin: 1rem 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.lit-skel-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.9rem;
  align-items: start;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.lit-skel-row:last-child { border-bottom: none; padding-bottom: 0; }
.lit-skel-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.15rem;
  line-height: 1.3;
}
.lit-skel-label small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.4px;
  text-transform: none;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 0.15rem;
  font-weight: 500;
}
.lit-skel-chrono {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  margin-left: 0.4rem;
  border-radius: var(--r-pill);
  background: rgba(138, 182, 244, 0.20);
  color: #A8C8F4;
  border: 1px solid rgba(138, 182, 244, 0.4);
  vertical-align: middle;
}
.lit-skel-body { font-size: 0.92rem; line-height: 1.6; color: #ECECEE; }
.lit-skel-body p { margin: 0; }
.lit-skel-body p + p { margin-top: 0.35rem; }
.lit-skel-ts {
  font-weight: 500;
  font-style: italic;
  color: #ECECEE;
  margin-bottom: 0.45rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.08);
}
.lit-skel-line { color: #D5D5DA; font-size: 0.88rem; line-height: 1.6; }
.lit-skel-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 1px 7px;
  margin-right: 0.4rem;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  vertical-align: baseline;
}
.lit-skel-tag--quote {
  background: rgba(125, 214, 140, 0.18);
  color: #9BE5AB;
  border: 1px solid rgba(125, 214, 140, 0.4);
}
.lit-skel-tag--ao2 {
  background: rgba(110, 168, 232, 0.18);
  color: #8AB6F4;
  border: 1px solid rgba(110, 168, 232, 0.4);
}
.lit-skel-tag--ao3 {
  background: rgba(197, 140, 245, 0.18);
  color: #D6A8FF;
  border: 1px solid rgba(197, 140, 245, 0.4);
}

.lit-skel-row--define .lit-skel-label,
.lit-skel-row--refine .lit-skel-label { color: #C58CF5; }
.lit-skel-row--outline .lit-skel-label { color: #FFD08A; }
.lit-skel-row--ts .lit-skel-label { color: #8AB6F4; }

@media (max-width: 600px) {
  .lit-skel-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .lit-skel-label { padding-top: 0; }
}

/* ----- Chronological body-structure note + per-paragraph chronology badges ----- */
.lit-chrono-note {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 1rem 0 0.6rem;
  padding: 0.55rem 0.85rem;
  background: rgba(138, 182, 244, 0.08);
  border-left: 3px solid #6FA8E8;
  border-radius: 6px;
  line-height: 1.55;
}
.lit-chrono-note strong { color: #8AB6F4; font-weight: 600; }
.lit-chrono-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding: 2px 9px;
  margin-right: 0.55rem;
  border-radius: var(--r-pill);
  background: rgba(138, 182, 244, 0.20);
  color: #A8C8F4;
  border: 1px solid rgba(138, 182, 244, 0.4);
  text-transform: uppercase;
  vertical-align: middle;
}
.lit-chrono-badge--ordinal {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-muted);
  border-color: rgba(255, 255, 255, 0.15);
}
.lit-para-heading { vertical-align: middle; }

/* ----- AO Mark Scheme Targets accordion ----- */
.lit-doc-row--aos[open] { border-left: 3px solid #5DDC80; }
.lit-doc-row--aos[open] > summary .lit-doc-row-label { color: #7DD68C; }
.lit-ao-intro {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0 0 0.9rem;
  line-height: 1.6;
}
.lit-ao-intro strong { color: #FFD08A; }
.lit-ao-row {
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
.lit-ao-row:last-child { margin-bottom: 0; }
.lit-ao-row h5 {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}
.lit-ao-descriptor {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 0 0.55rem;
  line-height: 1.55;
}
.lit-ao-row ul {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #D5D5DA;
}
.lit-ao-row li { margin-bottom: 0.4rem; }
.lit-ao-row li:last-child { margin-bottom: 0; }
.lit-ao-row--ao1 { background: rgba(125, 214, 140, 0.10); border-left: 3px solid #7DD68C; }
.lit-ao-row--ao1 h5 { color: #9BE5AB; }
.lit-ao-row--ao2 { background: rgba(110, 168, 232, 0.10); border-left: 3px solid #6FA8E8; }
.lit-ao-row--ao2 h5 { color: #8AB6F4; }
.lit-ao-row--ao3 { background: rgba(197, 140, 245, 0.10); border-left: 3px solid #C58CF5; }
.lit-ao-row--ao3 h5 { color: #D6A8FF; }
.lit-ao-row--ao4 { background: rgba(255, 185, 92, 0.10); border-left: 3px solid #FFB95C; }
.lit-ao-row--ao4 h5 { color: #FFD08A; }

/* ----- Model Essay accordion (full sample answer attached to each plan) ----- */
.lit-doc-row--model[open]      { border-left: 3px solid #FFB95C; }
.lit-doc-row--model[open] > summary .lit-doc-row-label { color: #FFD08A; }
.lit-model-grade {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  margin-left: 0.4rem;
  border-radius: var(--r-pill);
  background: rgba(255, 185, 92, 0.18);
  color: #FFD08A;
  border: 1px solid rgba(255, 185, 92, 0.4);
  text-transform: uppercase;
}
.lit-model-source {
  display: inline-block;
  font-size: 0.7rem;
  font-style: italic;
  margin-left: 0.4rem;
  color: var(--ink-muted);
  font-weight: 400;
}
.lit-model-essay {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.96rem;
  line-height: 1.78;
  color: #ECECEE;
}
.lit-model-essay p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 0.95rem;
  text-align: justify;
  text-indent: 1.2rem;
}
.lit-model-essay p:first-child { text-indent: 0; }
.lit-model-essay p:last-child { margin-bottom: 0; }

/* ----- Exemplars Library tab ----- */
.lit-exemplar-badge-row {
  display: inline-flex;
  gap: 0.4rem;
  margin: 0.3rem 0;
}
.lit-exemplar-grade {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.lit-exemplar-grade--verbatim {
  background: rgba(125, 214, 140, 0.18);
  color: #9BE5AB;
  border: 1px solid rgba(125, 214, 140, 0.4);
}
.lit-exemplar-grade--composed {
  background: rgba(138, 182, 244, 0.14);
  color: #A8C8F4;
  border: 1px solid rgba(138, 182, 244, 0.3);
}

/* ----- Quote Analysis accordions (litquotes list page) ----- */
.lit-quote-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.4rem 0 1.2rem;
}
.lit-quote-accordion > summary {
  align-items: flex-start;
  padding: 0.95rem 1.1rem;
}
.lit-quote-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.lit-quote-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.lit-quote-summary-meta .lit-essay-year,
.lit-quote-summary-meta .lit-essay-focus {
  margin: 0;
}
.lit-quote-summary-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #ECECEE;
  font-style: italic;
}
.lit-quote-accordion .lit-q-tagrow { margin-bottom: 0; }
.lit-quote-accordion-body { display: flex; flex-direction: column; gap: 0.55rem; }
.lit-quote-accordion-body .lit-q-methods-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.lit-q-wider {
  background: rgba(197, 140, 245, 0.10);
  border-left: 3px solid #C58CF5;
}
.lit-q-wider h4 { color: #D6A8FF; }

/* ----- Quote Analysis page (litquotes) ----- */
.lit-quotes-controls { padding: 1rem 1.2rem; }
.lit-quotes-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  align-items: end;
}
.lit-quotes-filter { display: flex; flex-direction: column; gap: 0.3rem; }
.lit-quotes-filter label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lit-quotes-filter select,
.lit-quotes-filter input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
}
.lit-quotes-search-wrap { grid-column: span 2; }
.lit-quotes-count {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.lit-quotes-work-heading {
  margin: 1.4rem 0 0.7rem;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lit-quotes-work-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink-muted);
}
.lit-quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 0.9rem;
}
.lit-q-card { padding: 1rem 1.15rem; }
.lit-q-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.lit-q-speaker { color: #5AB6FF; }
.lit-q-quote {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--sys-yellow, #FFD60A);
  background: rgba(255, 214, 10, 0.08);
  border-radius: 6px;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
.lit-q-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}
.lit-q-theme {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(110, 108, 255, 0.18);
  color: #B5B3FF;
  border: 1px solid rgba(139, 137, 255, 0.3);
}
.lit-q-methods {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 0.8rem;
}
.lit-q-method {
  display: inline-block;
  margin: 0 0.3rem 0.2rem 0;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 0.75rem;
  font-style: italic;
}
.lit-q-section {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 0.55rem;
}
.lit-q-section h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.lit-q-section p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink);
}
.lit-q-ao2 {
  background: rgba(10, 132, 255, 0.10);
  border-left: 3px solid #0A84FF;
}
.lit-q-ao2 h4 { color: #5AB6FF; }
.lit-q-ao3 {
  background: rgba(191, 90, 242, 0.10);
  border-left: 3px solid #BF5AF2;
}
.lit-q-ao3 h4 { color: #D6A8FF; }
@media (max-width: 600px) {
  .lit-quotes-grid { grid-template-columns: 1fr; }
  .lit-quotes-search-wrap { grid-column: span 1; }
}
.lit-doc-row--example .lit-doc-row-body p {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.96rem;
  line-height: 1.75;
  color: #ececf0;
  text-align: justify;
}

.lit-doc-row--conclusion[open]  { border-left: 3px solid #5AB6FF; }
.lit-doc-row--conclusion[open] > summary .lit-doc-row-label { color: #5AB6FF; }

.lit-doc-row--tips[open]        { border-left: 3px solid #30D158; }
.lit-doc-row--tips[open] > summary .lit-doc-row-label { color: #5DDC80; }

/* Keep the body content styled like the previous sections */
.lit-doc-row-body p {
  font-size: 0.93rem;
  line-height: 1.65;
  margin: 0 0 0.5rem;
  color: #d8d8de;
}
.lit-doc-row-body strong { color: #f1f1f3; }
.lit-doc-row-body ol,
.lit-doc-row-body ul {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  padding-left: 1.4rem;
  color: #d8d8de;
}
.lit-doc-row-body li { margin-bottom: 0.4rem; }
.lit-doc-row-body .lit-quote-list li { list-style: '▸ '; }
.lit-doc-row-body .lit-quote { font-style: italic; color: #e6e6ea; }
.lit-doc-row-body .thesis-define { color: #D6A8FF; font-weight: 600; }
.lit-doc-row-body .thesis-refine { color: #5AB6FF; font-weight: 600; }
.lit-doc-row-body .thesis-outline { color: #5DDC80; font-weight: 600; }
@media (max-width: 600px) {
  .lit-essay-tile-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   LIQUID GLASS OVERHAUL — Apple iOS 26 / macOS Tahoe aesthetic
   Bright top specular highlights, iridescent edges,
   strong saturated refraction, multi-layer inner shadows.
   Last in the file so it wins the cascade.
   ================================================================= */

:root {
  /* Stronger, brighter glass — saturate + slight brightness boost
     gives the colour-pop "wet" look behind the glass. */
  --glass-blur:       blur(48px) saturate(220%) brightness(1.04);
  --glass-blur-light: blur(28px) saturate(190%) brightness(1.03);

  /* Liquid Glass shadow stack — top specular, side edges,
     bottom inner sheen, deep drop shadow */
  --lg-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 22px 44px -18px rgba(255, 255, 255, 0.32),
    inset 0 -16px 32px -18px rgba(0, 0, 0, 0.18),
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 14px 32px -10px rgba(0, 0, 0, 0.42),
    0 32px 70px -18px rgba(0, 0, 0, 0.55);
  --lg-shadow-hover:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 1px 0 0 rgba(255, 255, 255, 0.16),
    inset -1px 0 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 26px 50px -18px rgba(255, 255, 255, 0.40),
    inset 0 -16px 32px -18px rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.14),
    0 18px 40px -10px rgba(0, 0, 0, 0.48),
    0 40px 90px -18px rgba(0, 0, 0, 0.62);

  /* Pill / button glass */
  --lg-pill-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 8px 18px -10px rgba(255, 255, 255, 0.45),
    0 1px 1px rgba(0, 0, 0, 0.10),
    0 8px 18px -6px rgba(0, 0, 0, 0.30);

  /* Iridescent edge gradient (used by ::after rings) */
  --lg-edge: linear-gradient(165deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(180, 215, 255, 0.22) 22%,
    rgba(255, 255, 255, 0.04) 55%,
    rgba(255, 255, 255, 0.20) 100%);
}

/* Brighter, more saturated background — colour the glass refracts */
body {
  background-image:
    radial-gradient(ellipse 70% 55% at 18%  8%,  rgba(140, 195, 255, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at  8% 50%,  rgba( 80, 145, 245, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 82% 92%,  rgba( 95, 160, 250, 0.62) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 92% 35%,  rgba(165, 110, 240, 0.42) 0%, transparent 60%),
    radial-gradient(ellipse 45% 38% at 30% 85%,  rgba(  0, 200, 255, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 75%,  rgba(  6,  18,  50, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 95% 18%,  rgba(  6,  18,  50, 0.45) 0%, transparent 60%),
    linear-gradient(155deg, #0a2c70 0%, #0d3a96 35%, #0a2658 70%, #061a3d 100%);
}

/* ---- Glass panel — full Liquid Glass treatment ---- */
.glass-panel {
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid transparent;
  box-shadow: var(--lg-shadow);
  overflow: hidden;
}
.glass-panel::before {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.05) 22%,
      rgba(255, 255, 255, 0.00) 55%,
      rgba(255, 255, 255, 0.04) 100%),
    radial-gradient(ellipse 80% 35% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: var(--lg-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 0;
}
.glass-panel:hover { box-shadow: var(--lg-shadow-hover); }

/* Make sure panel content sits above the ::after edge ring */
.glass-panel > * { position: relative; z-index: 1; }

/* ---- Buttons — pill liquid glass ---- */
.btn {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid transparent;
  backdrop-filter: blur(32px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(1.05);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--lg-pill-shadow);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.05) 35%,
    rgba(255, 255, 255, 0.00) 60%,
    rgba(0, 0, 0, 0.06) 100%);
  z-index: -1;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 10px 22px -10px rgba(255, 255, 255, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 12px 26px -6px rgba(0, 0, 0, 0.40);
}
.btn-primary, .btn-success, .btn-danger, .btn-orange {
  border-color: transparent;
}
.btn-primary {
  background: linear-gradient(180deg, #2A98FF 0%, #0A6CF0 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.20),
    0 10px 24px -6px rgba(10, 108, 240, 0.60);
}
.btn-success {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.20),
    0 10px 24px -6px rgba(48, 209, 88, 0.60);
}
.btn-danger {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.20),
    0 10px 24px -6px rgba(255, 69, 58, 0.60);
}
.btn-orange {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.20),
    0 10px 24px -6px rgba(255, 159, 10, 0.60);
}

/* Back button — liquid glass pill */
.btn-back {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 7px 14px;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

/* ---- Header — frosted bar ---- */
header {
  background: linear-gradient(180deg, rgba(6, 18, 50, 0.50), rgba(6, 18, 50, 0.18));
  backdrop-filter: blur(36px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---- Nav pills ---- */
.nav-link.active {
  background: rgba(255, 255, 255, 0.16);
  border-color: transparent;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 4px 12px -4px rgba(0, 0, 0, 0.30);
}

/* ---- Form elements ---- */
select, .apple-input {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid transparent;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 4px 10px -6px rgba(0, 0, 0, 0.30);
}
select:focus, .apple-input:focus {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 2px var(--primary),
    0 0 26px -4px rgba(10, 132, 255, 0.55);
}

/* ---- Flashcard — extra thick liquid glass ---- */
.card-face {
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid transparent;
  backdrop-filter: blur(60px) saturate(220%) brightness(1.04);
  -webkit-backdrop-filter: blur(60px) saturate(220%) brightness(1.04);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 28px 56px -18px rgba(255, 255, 255, 0.36),
    inset 0 -28px 60px -22px rgba(0, 0, 0, 0.22),
    0 24px 56px -16px rgba(0, 0, 0, 0.48),
    0 50px 100px -30px rgba(0, 0, 0, 0.55);
}
.card-face::before {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.05) 22%,
      transparent 55%,
      rgba(255, 255, 255, 0.04) 100%),
    radial-gradient(ellipse 75% 40% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%);
  z-index: -1;
}
.card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: var(--lg-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 0;
}
.card-back {
  border-color: transparent;
  box-shadow:
    inset 0 2px 0 rgba(180, 220, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 28px 56px -18px rgba(140, 200, 255, 0.36),
    inset 0 -28px 60px -22px rgba(0, 0, 0, 0.22),
    0 24px 56px -16px rgba(0, 0, 0, 0.48),
    0 50px 100px -30px rgba(10, 132, 255, 0.30);
}

/* ---- Theme badges + audio buttons + back chips ---- */
.theme-badge, .audio-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid transparent;
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 6px 16px -6px rgba(0, 0, 0, 0.35);
}

/* ---- Subject grid cards ---- */
.subject-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  backdrop-filter: blur(40px) saturate(210%) brightness(1.04);
  -webkit-backdrop-filter: blur(40px) saturate(210%) brightness(1.04);
  box-shadow: var(--lg-shadow);
  overflow: hidden;
}
.subject-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.04) 25%, transparent 55%),
    radial-gradient(ellipse 80% 35% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.subject-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: var(--lg-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 0;
}
.subject-card:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-3px);
  box-shadow: var(--lg-shadow-hover);
}

/* ---- Subject hub built-in tool buttons ---- */
.subject-tool-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid transparent;
  backdrop-filter: blur(28px) saturate(200%) brightness(1.03);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.03);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 14px 28px -16px rgba(255, 255, 255, 0.30),
    0 8px 22px -10px rgba(0, 0, 0, 0.40);
}
.subject-tool-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    transparent 60%);
  z-index: -1;
}
.subject-tool-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-2px);
}

/* ---- Exam rows + resource cards ---- */
.exam-row, .resource-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  backdrop-filter: blur(32px) saturate(200%) brightness(1.03);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.03);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 10px 26px -10px rgba(0, 0, 0, 0.40);
}
.exam-row::before, .resource-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    transparent 60%);
  z-index: -1;
}

/* ---- Quiz options ---- */
.quiz-option {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid transparent;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}
.quiz-option:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 18px -6px rgba(0, 0, 0, 0.30);
}

/* ---- Lit reference tabs + keyword chips ---- */
.lit-ref-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.lit-ref-tab.active {
  background: rgba(10, 132, 255, 0.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 6px 18px -6px rgba(10, 132, 255, 0.50);
}
.lit-keyword-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.lit-keyword-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 4px 12px -4px rgba(0, 0, 0, 0.30);
}

/* Resource filter pills */
.resource-filter {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.resource-filter.active {
  background: rgba(10, 132, 255, 0.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 6px 18px -6px rgba(10, 132, 255, 0.50);
}

/* Exam filter pills (Upcoming / All / Past) */
.exam-filter {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.exam-filter.active {
  background: rgba(10, 132, 255, 0.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 6px 18px -6px rgba(10, 132, 255, 0.50);
}

/* ---- Mini-clicker fidget widget — floating glass droplet ---- */
.clicker-widget {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid transparent;
  backdrop-filter: blur(36px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(36px) saturate(220%) brightness(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    inset 0 8px 18px -10px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 12px 28px -8px rgba(0, 0, 0, 0.40);
}

/* ---- Stat panels: keep tinted icon, glassify the wrapper ---- */
.stat-panel {
  background: rgba(255, 255, 255, 0.07);
}

/* ---- Specular hover glide — a faint sheen sweep on hover for cards ---- */
.subject-card,
.subject-tool-btn,
.exam-row,
.resource-card,
.btn,
.glass-panel {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Liquid bounce reflection — when the JS adds .liquid-bounce */
.liquid-bounce { animation: lg-bounce 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes lg-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.96); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Mobile — slightly less aggressive blur to keep frames smooth */
@media (max-width: 600px) {
  :root {
    --glass-blur:       blur(28px) saturate(200%) brightness(1.03);
    --glass-blur-light: blur(18px) saturate(180%);
  }
  .card-face {
    backdrop-filter: blur(36px) saturate(200%) brightness(1.03);
    -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.03);
  }
  .glass-panel,
  .subject-card,
  .exam-row,
  .resource-card,
  .subject-tool-btn { backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
}

/* =================================================================
   BIOLOGY — tool-specific layout
   ================================================================= */

.bio-topic-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}
.bio-topic-card {
  display: flex;
  gap: 1rem;
  background: var(--ap-bg-card, rgba(255, 255, 255, 0.06));
  border-radius: 14px;
  padding: 1rem 1.25rem;
}
.bio-topic-stage {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  font-size: 0.95rem;
}
.bio-topic-body { flex: 1; min-width: 0; }
.bio-topic-body h4 { margin: 0 0 0.55rem; font-size: 1rem; }
.bio-topic-bullets {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bio-topic-bullets li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.bio-practical-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.bio-practical-card {
  background: var(--ap-bg-card, rgba(255, 255, 255, 0.06));
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}
.bio-practical-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.bio-practical-card h3 {
  margin: 0.25rem 0 0.55rem;
  font-size: 1.1rem;
}
.bio-practical-card p {
  margin: 0.4rem 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.bio-cycle-card {
  background: var(--ap-bg-card, rgba(255, 255, 255, 0.06));
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 0.85rem;
}
.bio-cycle-card h4 {
  margin: 0 0 0.6rem;
  color: var(--primary);
  font-size: 1.05rem;
}
.bio-cycle-steps {
  margin: 0;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bio-cycle-steps li {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

[data-theme="dark"] .bio-topic-card,
[data-theme="dark"] .bio-practical-card,
[data-theme="dark"] .bio-cycle-card { background: var(--ap-bg-soft); }

/* ===== Paper 1 Revision Guide ===== */
.biop1-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  position: sticky;
  top: 0.5rem;
  z-index: 5;
}
.biop1-guide {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.biop1-topic {
  background: var(--ap-bg-card, rgba(255, 255, 255, 0.06));
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  scroll-margin-top: 6rem;
}
.biop1-topic-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.biop1-topic-head h2 { margin: 0; font-size: 1.4rem; }
.biop1-topic-intro {
  color: var(--ink-soft);
  margin: 0.35rem 0 0.75rem;
  font-size: 0.95rem;
}
.biop1-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.75rem;
}
.biop1-sub-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.75rem;
}
.biop1-sub-card {
  background: var(--ap-bg-soft, rgba(255, 255, 255, 0.04));
  border-radius: 12px;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--primary);
}
.biop1-sub-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.biop1-sub-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.biop1-sub-code {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.biop1-sub-summary {
  margin: 0.35rem 0 0.6rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.biop1-sub-points {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.biop1-sub-points li {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.btn-small {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
}

[data-theme="dark"] .biop1-topic,
[data-theme="dark"] .biop1-sub-card { background: var(--ap-bg-soft); }
[data-theme="dark"] .biop1-sub-card { background: rgba(255, 255, 255, 0.03); }

/* Quiz modal — re-parented to <body> by initBioPaper1 so it escapes the
   transform on #main-content and renders relative to the viewport. */
.biop1-quiz-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
.biop1-quiz-modal.hidden { display: none; }
.biop1-quiz-inner {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
}
.biop1-quiz-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

/* code formatting in equations */
.dt-table code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
}
[data-theme="dark"] .dt-table code { background: rgba(255, 255, 255, 0.10); color: var(--ap-text); }

/* =================================================================
   DESIGN & TECHNOLOGY — tool-specific layout
   ================================================================= */

.dt-table { font-size: 0.9rem; }
.dt-table th { background: rgba(0, 0, 0, 0.04); }
.dt-table td, .dt-table th { padding: 0.65rem 0.85rem; vertical-align: top; }

.dt-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.dt-material-card {
  background: var(--ap-bg-card, rgba(255,255,255,0.06));
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}
.dt-material-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.dt-material-head h4 { margin: 0; font-size: 1rem; }
.dt-material-card p { font-size: 0.88rem; color: var(--ink-muted); margin: 0; }

.dt-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 980px;
  background: rgba(0, 113, 227, 0.10);
  color: var(--primary);
}
.dt-pill-smart      { background: rgba(255, 159, 10, 0.14); color: #B8860B; }
.dt-pill-modern     { background: rgba(48, 209, 88, 0.14);  color: #2D8F4E; }
.dt-pill-composite  { background: rgba(191, 90, 242, 0.14); color: #8E40C0; }
.dt-pill-technicaltextile { background: rgba(255, 59, 48, 0.14); color: #C42820; }

.dt-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.dt-board-card {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dt-board-card h4 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.dt-board-card p  { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.dt-board-made    { color: var(--ink-soft); }
.dt-procon-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.5rem;
}
.dt-pro, .dt-con {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.84rem;
}
.dt-pro { background: rgba(48, 209, 88, 0.10); border-left: 3px solid #30D158; }
.dt-con { background: rgba(255, 59, 48, 0.10); border-left: 3px solid #FF3B30; }
.dt-procon-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.dt-pro .dt-procon-label { color: #2D8F4E; }
.dt-con .dt-procon-label { color: #C42820; }
.dt-pro p, .dt-con p { color: var(--ink-soft) !important; font-size: 0.84rem; }

.dt-mech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.dt-mech-card {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dt-mech-card h4 { margin: 0; font-size: 1rem; }
.dt-mech-card p  { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-muted); }
.dt-mech-example { font-size: 0.84rem !important; color: var(--ink-soft) !important; }

.dt-designer-card {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 0.85rem;
}
.dt-designer-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.dt-designer-head h4 { margin: 0; font-size: 1.1rem; }
.dt-designer-meta { font-size: 0.82rem; color: var(--ink-muted); font-weight: 500; }
.dt-designer-card p { margin: 0.4rem 0; font-size: 0.9rem; line-height: 1.55; }

[data-theme="dark"] .dt-table th { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .dt-material-card,
[data-theme="dark"] .dt-board-card,
[data-theme="dark"] .dt-mech-card,
[data-theme="dark"] .dt-designer-card { background: var(--ap-bg-soft); }
[data-theme="dark"] .dt-pro { background: rgba(48, 209, 88, 0.18); }
[data-theme="dark"] .dt-con { background: rgba(255, 69, 58, 0.18); }
[data-theme="dark"] .dt-pill { background: rgba(10, 132, 255, 0.20); color: #64D2FF; }
[data-theme="dark"] .dt-pill-smart      { background: rgba(255, 214, 10, 0.18); color: #FFD60A; }
[data-theme="dark"] .dt-pill-modern     { background: rgba(48, 209, 88, 0.18);  color: #30D158; }
[data-theme="dark"] .dt-pill-composite  { background: rgba(191, 90, 242, 0.20); color: #D7A4F4; }
[data-theme="dark"] .dt-pill-technicaltextile { background: rgba(255, 69, 58, 0.20); color: #FF8E84; }

/* =================================================================
   APPLE.COM AESTHETIC — final override.
   Clean, light, generous whitespace, Apple blue (#0071E3) pill CTAs,
   #F5F5F7 cards, SF Pro typography, no glassmorphism.
   This block uses !important so it wins over the cobalt + liquid glass
   layers above without rewriting them.
   ================================================================= */

:root {
  /* Apple palette */
  --ap-bg:           #FFFFFF;
  --ap-bg-soft:      #FBFBFD;
  --ap-bg-card:      #F5F5F7;
  --ap-bg-hover:     #EDEDEF;
  --ap-text:         #1D1D1F;
  --ap-text-muted:   #6E6E73;
  --ap-text-faint:   #86868B;
  --ap-blue:         #0071E3;
  --ap-blue-hover:   #0077ED;
  --ap-blue-pressed: #006EDB;
  --ap-green:        #34C759;
  --ap-red:          #FF3B30;
  --ap-orange:       #FF9500;
  --ap-yellow:       #FFCC00;
  --ap-purple:       #AF52DE;
  --ap-border:       #D2D2D7;
  --ap-border-soft:  #E5E5E5;
  --ap-divider:      #E8E8ED;

  /* Re-point legacy tokens so utility uses pick up the Apple palette */
  --ink:             var(--ap-text);
  --ink-soft:        var(--ap-text);
  --ink-muted:       var(--ap-text-muted);
  --ink-faint:       var(--ap-text-faint);
  --primary:         var(--ap-blue);
  --primary-strong:  var(--ap-blue-hover);
  --primary-soft:    rgba(0, 113, 227, 0.10);
  --hairline:        var(--ap-border-soft);
  --hairline-strong: var(--ap-border);
  --card:            var(--ap-bg-card);
  --card-strong:     var(--ap-bg-card);
  --card-soft:       var(--ap-bg-soft);
  --card-hover:      var(--ap-bg-hover);
  --divider:         var(--ap-divider);

  /* Glass effects neutralised */
  --glass-blur:        none;
  --glass-blur-light:  none;
  --glass-shadow:      none;
  --glass-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.06);
  --lg-shadow:         none;
  --lg-shadow-hover:   0 6px 18px rgba(0, 0, 0, 0.06);
  --lg-pill-shadow:    none;
  --lg-edge:           none;

  --t: all 0.2s ease;
}

[data-theme="light"], [data-theme="dark"] {
  --card:        var(--ap-bg-card) !important;
  --card-strong: var(--ap-bg-card) !important;
}

/* ---------- Body, background, type ---------- */
body {
  background: var(--ap-bg) !important;
  background-image: none !important;
  color: var(--ap-text) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before { display: none !important; }

main { max-width: 1100px; padding: 2.25rem 1.5rem 5rem; }

h1, h2, h3, h4 {
  color: var(--ap-text) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.022em;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem) !important; line-height: 1.07; font-weight: 600 !important; }
h2 { font-size: 1.45rem !important; font-weight: 600 !important; }
h3 { font-size: 1.05rem !important; font-weight: 600 !important; }

p           { color: var(--ap-text-muted) !important; }
strong      { color: var(--ap-text) !important; font-weight: 600; }
em          { color: var(--ap-text) !important; }
a           { color: var(--ap-blue) !important; }
a:hover     { color: var(--ap-blue-hover) !important; text-decoration: underline; }
::selection { background: rgba(0, 113, 227, 0.20); color: var(--ap-text); }

::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb   { background: rgba(0,0,0,0.20); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }

/* ---------- Header — Apple sticky nav ---------- */
header {
  background: rgba(251, 251, 253, 0.85) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--ap-border-soft) !important;
  box-shadow: none !important;
  padding: 0.5rem 1.5rem !important;
  min-height: 48px;
}
.logo { color: var(--ap-text) !important; font-size: 0.95rem; font-weight: 500; }
.logo svg { stroke: var(--ap-text) !important; }

.nav-link {
  color: var(--ap-text) !important;
  font-weight: 400;
  font-size: 0.85rem;
  background: transparent !important;
  border-color: transparent !important;
  padding: 6px 14px;
  border-radius: 980px;
  box-shadow: none !important;
}
.nav-link:hover { background: rgba(0, 0, 0, 0.05) !important; }
.nav-link.active {
  color: #FFFFFF !important;
  background: var(--ap-blue) !important;
  font-weight: 500;
  box-shadow: none !important;
}

#theme-toggle {
  background: transparent !important;
  border: none !important;
  color: var(--ap-text) !important;
  box-shadow: none !important;
}
#theme-toggle:hover { background: rgba(0, 0, 0, 0.05) !important; }

/* ---------- Glass panel → flat Apple card ---------- */
.glass-panel {
  background: var(--ap-bg-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  color: var(--ap-text) !important;
  padding: 1.75rem 2rem !important;
  overflow: visible !important;
}
.glass-panel::before, .glass-panel::after { display: none !important; }
.glass-panel:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; }

/* ---------- Buttons — Apple pill ---------- */
.btn {
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  border-radius: 980px !important;
  padding: 11px 22px !important;
  color: var(--ap-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
  isolation: auto !important;
  overflow: visible !important;
}
.btn::before { display: none !important; }
.btn:hover { background: rgba(0, 0, 0, 0.10) !important; transform: none !important; }
.btn:active { transform: scale(0.98) !important; }

.btn-primary {
  background: var(--ap-blue) !important;
  color: #FFFFFF !important;
  font-weight: 400 !important;
}
.btn-primary:hover  { background: var(--ap-blue-hover)  !important; filter: none !important; }
.btn-primary:active { background: var(--ap-blue-pressed) !important; }

.btn-success { background: var(--ap-green) !important;  color: #FFFFFF !important; }
.btn-success:hover { background: #2EB652 !important; }
.btn-danger  { background: var(--ap-red) !important;    color: #FFFFFF !important; }
.btn-danger:hover { background: #E13327 !important; }
.btn-orange  { background: var(--ap-orange) !important; color: #FFFFFF !important; }
.btn-orange:hover { background: #E58600 !important; }

/* "Outlined" secondary — apple uses blue text + blue ring */
.btn-back {
  background: transparent !important;
  color: var(--ap-blue) !important;
  font-weight: 400 !important;
  padding: 6px 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.btn-back:hover {
  background: transparent !important;
  color: var(--ap-blue-hover) !important;
  text-decoration: underline;
  transform: none !important;
}

.btn-icon {
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  width: 36px; height: 36px;
  border-radius: 980px !important;
  color: var(--ap-text) !important;
}
.btn-icon:hover { background: rgba(0, 0, 0, 0.10) !important; }

/* ---------- Forms ---------- */
select, .apple-input {
  background: var(--ap-bg-card) !important;
  border: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  border-radius: 12px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231D1D1F' stroke-width='1.6' stroke-linecap='round'><path d='M1 1.5l5 5 5-5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 7px !important;
}
.apple-input::placeholder { color: var(--ap-text-faint) !important; }
select:focus, .apple-input:focus {
  border-color: var(--ap-blue) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.20) !important;
}

/* ---------- Doomsday hero — keep the Avengers green/black/bloom original ----------
   (intentionally NOT overridden — the original stained-glass styling lives at
    line ~459 and we let it shine through both light and dark modes.) */

/* ---------- Subject grid cards ---------- */
.subject-card {
  background: var(--ap-bg-card) !important;
  border: none !important;
  border-radius: 22px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--ap-text) !important;
}
.subject-card::before, .subject-card::after { display: none !important; }
.subject-card-name { color: var(--ap-text) !important; }
.subject-card-board { color: var(--ap-text-muted) !important; }
.subject-card-cd-label { color: var(--ap-text-muted) !important; }
.subject-card-cd { color: var(--ap-text) !important; }
.subject-card-cd strong { color: var(--ap-text) !important; }
.subject-card-cd-done { color: var(--ap-green) !important; }
.subject-card-pill {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--ap-text-muted) !important;
  border: none !important;
}
.subject-card-arrow { color: var(--ap-blue) !important; }
.subject-card:hover {
  background: var(--ap-bg-hover) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px) !important;
}

/* Subject hero (subject-hub) */
.subject-hero {
  background: var(--ap-bg-card) !important;
  border: none !important;
  box-shadow: none !important;
}
.subject-hero h1 { color: var(--ap-text) !important; }
.subject-hero-meta { color: var(--ap-text-muted) !important; }
.subject-hero-cd-label { color: var(--ap-text-muted) !important; }
.subject-hero-cd-value { color: var(--ap-text) !important; font-family: var(--font-sans) !important; }
.subject-hero-cd-value strong { color: var(--ap-blue) !important; }

/* ---------- Subject tool tiles ---------- */
.subject-tool-btn {
  background: var(--ap-bg-card) !important;
  border: none !important;
  border-radius: 18px !important;
  color: var(--ap-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.subject-tool-btn::before { display: none !important; }
.subject-tool-btn:hover {
  background: var(--ap-bg-hover) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px) !important;
}
.tool-label { color: var(--ap-text) !important; }
.tool-desc { color: var(--ap-text-muted) !important; }

/* ---------- Exam rows + resource cards ---------- */
.exam-row, .resource-card {
  background: var(--ap-bg-card) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--ap-text) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  isolation: auto !important;
  overflow: hidden !important;
}
.exam-row::before, .resource-card::before { display: none !important; }
.exam-row::after { background: var(--accent, var(--ap-blue)) !important; }
.exam-meta, .exam-paper { color: var(--ap-text-muted) !important; }
.exam-title { color: var(--ap-text) !important; }
.cd-past { color: var(--ap-text-faint) !important; }
.exam-past { opacity: 0.55; }
.exam-row:hover, .resource-card:hover {
  background: var(--ap-bg-hover) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
}
.resource-title { color: var(--ap-text) !important; }
.resource-desc, .resource-provider { color: var(--ap-text-muted) !important; }
.resource-card-link { color: var(--ap-blue) !important; }
.resource-type-tag {
  background: rgba(0, 113, 227, 0.10) !important;
  color: var(--ap-blue) !important;
}

/* ---------- Pill filters / tabs ---------- */
.exam-filter, .resource-filter, .lit-ref-tab {
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  color: var(--ap-text-muted) !important;
  border-radius: 980px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  padding: 6px 14px !important;
}
.exam-filter:hover, .resource-filter:hover, .lit-ref-tab:hover {
  background: rgba(0, 0, 0, 0.10) !important;
  color: var(--ap-text) !important;
}
.exam-filter.active, .resource-filter.active, .lit-ref-tab.active {
  background: var(--ap-blue) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

/* ---------- Lit keyword chips ---------- */
.lit-keyword-chip {
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  color: var(--ap-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.lit-keyword-chip:hover {
  background: rgba(0, 0, 0, 0.10) !important;
  box-shadow: none !important;
  transform: none !important;
}
.lit-keyword-chip.copied { background: var(--ap-green) !important; color: #FFFFFF !important; }
.lit-keyword-chip.type-connective { color: var(--ap-blue) !important; }
.lit-keyword-chip.type-macbeth    { color: var(--ap-red) !important; }
.lit-keyword-chip.type-acc        { color: var(--ap-purple) !important; }
.lit-keyword-chip.type-ao3        { color: #B8860B !important; }

/* ---------- Stat panels ---------- */
.stat-panel { background: var(--ap-bg-card) !important; }
.stat-value { color: var(--ap-text) !important; }
.stat-panel h3 { color: var(--ap-text) !important; }
.stat-panel p { color: var(--ap-text-muted) !important; }

/* Keep the coloured stat-icon-wrappers but tame their shadow */
.stat-icon-wrapper { box-shadow: none !important; }

/* ---------- Flashcards ---------- */
.card-face {
  background: #FFFFFF !important;
  border: 1px solid var(--ap-border-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  color: var(--ap-text) !important;
  border-radius: 22px !important;
}
.card-face::before, .card-face::after { display: none !important; }
.card-back {
  background: var(--ap-bg-card) !important;
  border-color: var(--ap-blue) !important;
  box-shadow: 0 2px 12px rgba(0, 113, 227, 0.10) !important;
}
.fc-text, .fc-hint { color: var(--ap-text) !important; }
.theme-badge {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--ap-text-muted) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
.audio-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--ap-text) !important;
}
.audio-btn:hover { background: rgba(0, 0, 0, 0.12) !important; color: var(--ap-blue) !important; }
.srs-info { color: var(--ap-text-faint) !important; }

/* ---------- Quiz ---------- */
.quiz-option {
  background: #FFFFFF !important;
  border: 1px solid var(--ap-border) !important;
  color: var(--ap-text) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.quiz-option:hover {
  background: var(--ap-bg-card) !important;
  border-color: var(--ap-text-faint) !important;
  transform: none !important;
  box-shadow: none !important;
}
.quiz-option.correct {
  background: rgba(52, 199, 89, 0.10) !important;
  border-color: var(--ap-green) !important;
  color: var(--ap-text) !important;
}
.quiz-option.wrong {
  background: rgba(255, 59, 48, 0.10) !important;
  border-color: var(--ap-red) !important;
  color: var(--ap-text) !important;
}
.quiz-circle { border-color: var(--ap-text-faint) !important; }
.quiz-option.correct .quiz-circle { background: var(--ap-green) !important; border-color: var(--ap-green) !important; }
.quiz-option.wrong   .quiz-circle { background: var(--ap-red) !important;   border-color: var(--ap-red) !important; }

/* Progress bar — Apple slim track */
.progress-container {
  background: rgba(0, 0, 0, 0.10) !important;
  border-radius: 980px !important;
  height: 4px !important;
}
.progress-bar { background: var(--ap-blue) !important; border-radius: 980px !important; }

/* ---------- Lit-specific ---------- */
.lit-fc-cue { color: var(--ap-text) !important; }
.lit-fc-quote {
  color: var(--ap-text) !important;
  border-left-color: var(--ap-blue) !important;
  font-family: var(--font-sans) !important;
}
.lit-fc-meta { color: var(--ap-text-muted) !important; }
.lit-fc-themes { color: var(--ap-text-muted) !important; }
.lit-fc-label { color: var(--ap-blue) !important; }
.lit-fc-analysis, .lit-fc-context { color: var(--ap-text-muted) !important; }
.lit-fc-methods { color: var(--ap-text-muted) !important; }

.lit-timeline-card { background: var(--ap-bg-card) !important; border: none !important; box-shadow: none !important; }
.lit-timeline-card h4 { color: var(--ap-text) !important; }
.lit-timeline-card p { color: var(--ap-text-muted) !important; }
.lit-timeline-quote {
  background: #FFFFFF !important;
  border: 1px solid var(--ap-border-soft) !important;
  border-left: 3px solid var(--ap-blue) !important;
  color: var(--ap-text) !important;
}
.lit-timeline-stage { color: var(--ap-blue) !important; }
.lit-timeline-dot {
  background: var(--ap-blue) !important;
  box-shadow: none !important;
}
.lit-timeline-row:not(:last-child) .lit-timeline-dot::after { background: var(--ap-border) !important; }

.lit-quiz-explain {
  background: rgba(0, 113, 227, 0.06) !important;
  border-left: 3px solid var(--ap-blue) !important;
  color: var(--ap-text) !important;
}

.thesis-define  { color: #B8860B !important; background: #FFF8DC !important; }
.thesis-refine  { color: #2D8F4E !important; background: #E8F5EE !important; }
.thesis-outline { color: var(--ap-blue) !important; background: #E8F2FE !important; }
.thesis-placeholder { color: var(--ap-text-faint) !important; }
.thesis-preview { color: var(--ap-text) !important; }
.thesis-label-define  { color: #B8860B !important; }
.thesis-label-refine  { color: #2D8F4E !important; }
.thesis-label-outline { color: var(--ap-blue) !important; }
.thesis-example-row { color: var(--ap-text) !important; }

.lit-ref-block h3 { color: var(--ap-blue) !important; }
.lit-ref-list li, .lit-ref-numbered li { color: var(--ap-text) !important; }
.lit-chip {
  background: rgba(0, 113, 227, 0.10) !important;
  color: var(--ap-blue) !important;
  border: none !important;
}

/* Tables in reference hub */
.resource-table { border-collapse: collapse; width: 100%; }
.resource-table th, .resource-table td {
  border-bottom: 1px solid var(--ap-border-soft) !important;
  color: var(--ap-text) !important;
  padding: 0.65rem 0.85rem;
}
.resource-table th { background: var(--ap-bg-card) !important; font-weight: 600 !important; text-align: left; }
.resource-table tr:last-child td { border-bottom: none !important; }
.resource-table em { color: var(--ap-text-muted) !important; }

/* ---------- Subject chip — keep brand colour but soften ---------- */
.subject-chip {
  border: none !important;
  box-shadow: none !important;
}

/* ---------- Mini fidget clicker ---------- */
.clicker-widget {
  background: #FFFFFF !important;
  border: 1px solid var(--ap-border-soft) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: none !important;
  color: var(--ap-text) !important;
}
.clicker-count { color: var(--ap-text) !important; }

/* ---------- Misc reset ---------- */
.liquid-bounce { animation: ap-tap 0.25s ease !important; }
@keyframes ap-tap {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.97); }
}

/* Tighter mobile padding */
@media (max-width: 600px) {
  .glass-panel { padding: 1.25rem 1.25rem !important; }
}

/* =================================================================
   DARK MODE — pure black-out
   Activates when html[data-theme="dark"] is set by the theme toggle.
   Re-points the Apple palette to dark values + explicitly overrides
   anywhere we baked in light hex codes or rgba(0,0,0,…) tints.
   The doomsday hero is intentionally untouched — it stays
   Avengers-green/black in both modes.
   ================================================================= */

[data-theme="dark"] {
  --ap-bg:           #000000;
  --ap-bg-soft:      #0A0A0A;
  --ap-bg-card:      #1C1C1E;
  --ap-bg-hover:     #2C2C2E;
  --ap-text:         #F5F5F7;
  --ap-text-muted:   #98989D;
  --ap-text-faint:   #6E6E73;
  --ap-blue:         #0A84FF;
  --ap-blue-hover:   #339EFF;
  --ap-blue-pressed: #006EDB;
  --ap-green:        #30D158;
  --ap-red:          #FF453A;
  --ap-orange:       #FF9F0A;
  --ap-yellow:       #FFD60A;
  --ap-purple:       #BF5AF2;
  --ap-border:       #2C2C2E;
  --ap-border-soft:  #1F1F22;
  --ap-divider:      #2C2C2E;

  /* Re-point legacy tokens too */
  --ink:             var(--ap-text);
  --ink-soft:        var(--ap-text);
  --ink-muted:       var(--ap-text-muted);
  --ink-faint:       var(--ap-text-faint);
  --primary:         var(--ap-blue);
  --primary-strong:  var(--ap-blue-hover);
  --primary-soft:    rgba(10, 132, 255, 0.18);
  --hairline:        var(--ap-border-soft);
  --hairline-strong: var(--ap-border);
  --card:            var(--ap-bg-card);
  --card-strong:     var(--ap-bg-card);
  --card-soft:       var(--ap-bg-soft);
  --card-hover:      var(--ap-bg-hover);
  --divider:         var(--ap-divider);
}

/* Body / header / nav */
[data-theme="dark"] body {
  background: #000000 !important;
  background-image: none !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] header {
  background: rgba(10, 10, 10, 0.85) !important;
  border-bottom-color: var(--ap-border) !important;
}
[data-theme="dark"] .nav-link { color: var(--ap-text) !important; }
[data-theme="dark"] .nav-link:hover { background: rgba(255, 255, 255, 0.10) !important; }
[data-theme="dark"] .nav-link.active { background: var(--ap-blue) !important; color: #FFFFFF !important; }
[data-theme="dark"] #theme-toggle { color: var(--ap-text) !important; }
[data-theme="dark"] #theme-toggle:hover { background: rgba(255, 255, 255, 0.10) !important; }
[data-theme="dark"] .logo,
[data-theme="dark"] .logo svg { color: var(--ap-text) !important; stroke: var(--ap-text) !important; }

/* Buttons */
[data-theme="dark"] .btn {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .btn:hover { background: rgba(255, 255, 255, 0.16) !important; }
[data-theme="dark"] .btn-icon { background: rgba(255, 255, 255, 0.10) !important; color: var(--ap-text) !important; }
[data-theme="dark"] .btn-icon:hover { background: rgba(255, 255, 255, 0.16) !important; }
[data-theme="dark"] .btn-primary { background: var(--ap-blue) !important; color: #FFFFFF !important; }
[data-theme="dark"] .btn-primary:hover { background: var(--ap-blue-hover) !important; }
[data-theme="dark"] .btn-back { color: var(--ap-blue) !important; background: transparent !important; }
[data-theme="dark"] .btn-back:hover { color: var(--ap-blue-hover) !important; background: transparent !important; }

/* Form controls */
[data-theme="dark"] select,
[data-theme="dark"] .apple-input {
  background: var(--ap-bg-card) !important;
  border-color: var(--ap-border) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23F5F5F7' stroke-width='1.6' stroke-linecap='round'><path d='M1 1.5l5 5 5-5'/></svg>") !important;
}
[data-theme="dark"] .apple-input::placeholder { color: var(--ap-text-faint) !important; }
[data-theme="dark"] select:focus,
[data-theme="dark"] .apple-input:focus {
  background: #000000 !important;
  border-color: var(--ap-blue) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.30) !important;
}

/* Cards */
[data-theme="dark"] .glass-panel { background: var(--ap-bg-card) !important; color: var(--ap-text) !important; }
[data-theme="dark"] .glass-panel:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important; }

[data-theme="dark"] .subject-card,
[data-theme="dark"] .subject-tool-btn,
[data-theme="dark"] .exam-row,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .subject-hero,
[data-theme="dark"] .stat-panel,
[data-theme="dark"] .lit-timeline-card {
  background: var(--ap-bg-card) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .subject-card:hover,
[data-theme="dark"] .subject-tool-btn:hover,
[data-theme="dark"] .exam-row:hover,
[data-theme="dark"] .resource-card:hover {
  background: var(--ap-bg-hover) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
}

/* Pills (filters / tabs / chips) */
[data-theme="dark"] .exam-filter,
[data-theme="dark"] .resource-filter,
[data-theme="dark"] .lit-ref-tab,
[data-theme="dark"] .lit-keyword-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ap-text-muted) !important;
}
[data-theme="dark"] .exam-filter:hover,
[data-theme="dark"] .resource-filter:hover,
[data-theme="dark"] .lit-ref-tab:hover,
[data-theme="dark"] .lit-keyword-chip:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .exam-filter.active,
[data-theme="dark"] .resource-filter.active,
[data-theme="dark"] .lit-ref-tab.active {
  background: var(--ap-blue) !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .lit-keyword-chip.type-connective { color: #64D2FF !important; }
[data-theme="dark"] .lit-keyword-chip.type-macbeth    { color: #FF8E84 !important; }
[data-theme="dark"] .lit-keyword-chip.type-acc        { color: #D7A4F4 !important; }
[data-theme="dark"] .lit-keyword-chip.type-ao3        { color: #FFD60A !important; }

/* Theme badge / audio button / subject-card pill */
[data-theme="dark"] .theme-badge,
[data-theme="dark"] .audio-btn,
[data-theme="dark"] .subject-card-pill {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--ap-text-muted) !important;
}
[data-theme="dark"] .audio-btn:hover { background: rgba(255, 255, 255, 0.18) !important; color: var(--ap-blue) !important; }

/* Flashcards */
[data-theme="dark"] .card-face {
  background: var(--ap-bg-card) !important;
  border-color: var(--ap-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .card-back {
  background: var(--ap-bg-soft) !important;
  border-color: var(--ap-blue) !important;
  box-shadow: 0 2px 12px rgba(10, 132, 255, 0.25) !important;
}
[data-theme="dark"] .fc-text,
[data-theme="dark"] .fc-hint { color: var(--ap-text) !important; }
[data-theme="dark"] .srs-info { color: var(--ap-text-faint) !important; }

/* Quiz */
[data-theme="dark"] .quiz-option {
  background: var(--ap-bg-card) !important;
  border-color: var(--ap-border) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .quiz-option:hover {
  background: var(--ap-bg-hover) !important;
  border-color: var(--ap-text-faint) !important;
}
[data-theme="dark"] .quiz-option.correct {
  background: rgba(48, 209, 88, 0.16) !important;
  border-color: var(--ap-green) !important;
}
[data-theme="dark"] .quiz-option.wrong {
  background: rgba(255, 69, 58, 0.16) !important;
  border-color: var(--ap-red) !important;
}
[data-theme="dark"] .quiz-circle { border-color: var(--ap-text-faint) !important; }

/* Progress bar */
[data-theme="dark"] .progress-container { background: rgba(255, 255, 255, 0.10) !important; }
[data-theme="dark"] .progress-bar { background: var(--ap-blue) !important; }

/* Lit-specific */
[data-theme="dark"] .lit-fc-quote { color: var(--ap-text) !important; border-left-color: var(--ap-blue) !important; }
[data-theme="dark"] .lit-fc-cue { color: var(--ap-text) !important; }
[data-theme="dark"] .lit-fc-meta,
[data-theme="dark"] .lit-fc-themes,
[data-theme="dark"] .lit-fc-analysis,
[data-theme="dark"] .lit-fc-context,
[data-theme="dark"] .lit-fc-methods { color: var(--ap-text-muted) !important; }
[data-theme="dark"] .lit-fc-label { color: var(--ap-blue) !important; }

[data-theme="dark"] .lit-timeline-quote {
  background: var(--ap-bg-soft) !important;
  border-color: var(--ap-border) !important;
  border-left: 3px solid var(--ap-blue) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .lit-timeline-stage { color: var(--ap-blue) !important; }
[data-theme="dark"] .lit-timeline-card h4 { color: var(--ap-text) !important; }
[data-theme="dark"] .lit-timeline-card p { color: var(--ap-text-muted) !important; }
[data-theme="dark"] .lit-timeline-dot { background: var(--ap-blue) !important; }
[data-theme="dark"] .lit-timeline-row:not(:last-child) .lit-timeline-dot::after { background: var(--ap-border) !important; }

[data-theme="dark"] .lit-quiz-explain {
  background: rgba(10, 132, 255, 0.14) !important;
  border-left: 3px solid var(--ap-blue) !important;
  color: var(--ap-text) !important;
}

[data-theme="dark"] .lit-ref-block h3 { color: var(--ap-blue) !important; }
[data-theme="dark"] .lit-ref-list li,
[data-theme="dark"] .lit-ref-numbered li { color: var(--ap-text) !important; }
[data-theme="dark"] .lit-chip {
  background: rgba(10, 132, 255, 0.18) !important;
  color: #64D2FF !important;
}

/* Thesis builder colours — re-tinted for dark bg */
[data-theme="dark"] .thesis-define  { color: #FFD60A !important; background: rgba(255, 214, 10, 0.16) !important; }
[data-theme="dark"] .thesis-refine  { color: #30D158 !important; background: rgba(48, 209, 88, 0.16) !important; }
[data-theme="dark"] .thesis-outline { color: #0A84FF !important; background: rgba(10, 132, 255, 0.18) !important; }
[data-theme="dark"] .thesis-label-define  { color: #FFD60A !important; }
[data-theme="dark"] .thesis-label-refine  { color: #30D158 !important; }
[data-theme="dark"] .thesis-label-outline { color: #0A84FF !important; }
[data-theme="dark"] .thesis-preview { color: var(--ap-text) !important; }
[data-theme="dark"] .thesis-placeholder { color: var(--ap-text-faint) !important; }

/* Tables */
[data-theme="dark"] .resource-table th,
[data-theme="dark"] .resource-table td {
  border-bottom-color: var(--ap-border) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .resource-table th { background: var(--ap-bg-card) !important; }
[data-theme="dark"] .resource-table em { color: var(--ap-text-muted) !important; }

/* Resource type tag */
[data-theme="dark"] .resource-type-tag {
  background: rgba(10, 132, 255, 0.18) !important;
  color: #64D2FF !important;
}

/* Mini fidget clicker */
[data-theme="dark"] .clicker-widget {
  background: var(--ap-bg-card) !important;
  border-color: var(--ap-border) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
  color: var(--ap-text) !important;
}
[data-theme="dark"] .clicker-count { color: var(--ap-text) !important; }

/* Selection + scrollbar */
[data-theme="dark"] ::selection { background: rgba(10, 132, 255, 0.45); color: var(--ap-text); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }

/* =================================================================
   DASHBOARD BRAND MARK
   ================================================================= */
.brand-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.25rem 1rem 1.75rem;
  margin-top: 2rem;
  text-align: center;
}
.brand-mark-img {
  width: clamp(120px, 16vw, 170px);
  height: clamp(143px, 19vw, 202px);
  display: block;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  border-radius: 12px;
}
.brand-mark-img:hover {
  transform: scale(1.04) rotate(-2deg);
}
.brand-mark-img:active {
  transform: scale(0.97);
}
/* Dark mode: render both ddp.png logos as solid white silhouettes */
[data-theme="dark"] .logo-img {
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .brand-mark-img {
  filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(255, 255, 255, 0.10));
}
.brand-mark-text {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark-tag {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
[data-theme="dark"] .brand-mark-text { color: var(--ap-text) !important; }
[data-theme="dark"] .brand-mark-tag { color: var(--ap-text-muted, rgba(0,0,0,0.55)) !important; }

/* =================================================================
   SITE FOOTER
   ================================================================= */
.site-footer {
  text-align: center;
  padding: 1.4rem 1rem 1.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--hairline);
  margin-top: 2rem;
}
[data-theme="dark"] .site-footer {
  color: var(--ap-text-muted, rgba(0, 0, 0, 0.55)) !important;
  border-top-color: var(--ap-border-soft, rgba(0, 0, 0, 0.10)) !important;
}

/* =================================================================
   FLUID + MOBILE-FRIENDLY OVERRIDES
   Applied last so they take precedence over earlier breakpoints.
   ================================================================= */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Tablet and below */
@media (max-width: 900px) {
  header {
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }
  .logo { font-size: 0.95rem; padding: 4px 8px 4px 4px; }
  .logo-img { width: 28px; height: 28px; }
  .nav-link { padding: 6px 10px; font-size: 0.85rem; }
  main { padding: 1.5rem 1rem 3rem; }
}

/* Phone */
@media (max-width: 640px) {
  header {
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    gap: 0.4rem;
  }
  nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 4px;
    padding-bottom: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .logo { font-size: 0.92rem; gap: 8px; }
  .logo-img { width: 26px; height: 26px; }
  .nav-link { padding: 6px 12px; font-size: 0.82rem; min-height: 36px; }
  main { padding: 1rem 0.85rem 2.5rem; }

  /* Touch targets */
  button, .btn, .nav-link, .btn-icon, .quiz-option, .audio-btn {
    min-height: 40px;
  }

  /* Layout: collapse multi-column grids to a single column */
  .stats-grid,
  .subject-grid,
  .subject-tools,
  .resource-table,
  .doomsday-clock,
  .controls-bar {
    grid-template-columns: 1fr !important;
  }
  .controls-bar { flex-direction: column; align-items: stretch; }
  .controls-bar > * { width: 100%; }

  /* Glass panels: less padding so content has room */
  .glass-panel { padding: 1rem 1.1rem; border-radius: var(--r-md); }

  /* Doomsday hero scales down */
  .doomsday-hero { padding: 2.25rem 1rem 1.6rem; min-height: 280px; }

  /* Tables become scrollable */
  .resource-section { overflow-x: auto; }
  .resource-table { display: block; overflow-x: auto; white-space: nowrap; }

  .site-footer { font-size: 0.7rem; padding: 1.1rem 0.75rem 1.4rem; }
}

/* Narrow phone */
@media (max-width: 400px) {
  header { padding: 0.45rem 0.6rem; }
  .logo-text {
    /* Hide text on very narrow screens; image + aria-label remain */
    font-size: 0.85rem;
  }
  .nav-link { padding: 5px 10px; font-size: 0.78rem; }
  main { padding: 0.85rem 0.7rem 2rem; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.05rem; }
}

/* Tall phones in landscape: keep header compact */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  header { position: static; }
}

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

/* ============================================================
   SEARCH BAR + SPOTLIGHT MODAL (cobalt iCloud aesthetic)
   ============================================================ */

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

/* Search trigger — pill that opens Spotlight */
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  min-width: 200px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: var(--t);
  outline: none;
}
.search-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hairline-strong);
  color: var(--ink-soft);
  transform: translateY(-1px);
}
.search-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.search-trigger:active { transform: translateY(0) scale(0.98); }
.search-trigger-text { flex: 1; text-align: left; }
.search-trigger svg { color: var(--ink-muted); }

.kbd-hint {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font: 600 11px / 1 var(--font-sans);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.kbd-esc { padding: 0 8px; font-size: 10px; }

/* Spotlight overlay */
.spotlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 20px 20px;
  background: rgba(6, 18, 50, 0.55);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.spotlight-overlay.is-open { opacity: 1; }

.spotlight-panel {
  width: min(680px, 100%);
  background: var(--card-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transform: translateY(-12px) scale(0.97);
  opacity: 0;
  transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.spotlight-overlay.is-open .spotlight-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.spotlight-input-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.spotlight-input-icon { color: var(--ink-muted); flex-shrink: 0; }
.spotlight-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: 500 1.1rem / 1.4 var(--font-sans);
  letter-spacing: -0.01em;
  padding: 6px 0;
}
.spotlight-input::placeholder { color: var(--ink-faint); }

.spotlight-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  transition: var(--t);
}
.spotlight-close:hover { background: rgba(255, 255, 255, 0.16); }

.spotlight-results {
  max-height: 56vh;
  overflow-y: auto;
  padding: 6px;
}

.spotlight-hint {
  padding: 22px 18px 28px;
  text-align: center;
  color: var(--ink-muted);
}
.spotlight-hint-title {
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.spotlight-hint-line {
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}
.spotlight-hint em { color: var(--primary); font-style: normal; }

.spotlight-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--ink-muted);
}

.spotlight-result {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  margin: 2px 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  color: var(--ink);
  font: inherit;
}
.spotlight-result.is-active,
.spotlight-result:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--hairline-strong);
}
.spotlight-result.is-active .spotlight-result-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.spotlight-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  font: 700 0.72rem / 1 var(--font-sans);
  letter-spacing: 0.04em;
  color: #FFFFFF;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 12px -6px rgba(0, 0, 0, 0.45);
}

.spotlight-result-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}
.spotlight-result-kind {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.spotlight-result-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spotlight-result-snippet {
  font-size: 0.82rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spotlight-result-arrow {
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
}
.spotlight-result mark {
  background: rgba(255, 214, 10, 0.24);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 4px;
}

.spotlight-foot {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid var(--hairline);
  font-size: 0.74rem;
  color: var(--ink-faint);
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 720px) {
  .search-trigger { min-width: auto; }
  .search-trigger-text { display: none; }
  .kbd-hint { display: none; }
  .spotlight-overlay { padding: 6vh 12px 12px; }
}

/* ============================================================
   ANIMATION LIBRARY — make everything feel alive and smooth
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpSmall {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes glow {
  0%, 100% { box-shadow: var(--glass-shadow), 0 0 0 0 rgba(10, 132, 255, 0); }
  50%      { box-shadow: var(--glass-shadow), 0 0 24px 2px rgba(10, 132, 255, 0.35); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes wallpaperDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-1.2%, -0.6%, 0) scale(1.03); }
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(10, 132, 255, 0); }
}

/* ---------- Animated background drift ---------- */
body::before {
  animation: wallpaperDrift 28s ease-in-out infinite;
}

/* ---------- Page-level: every view fades up on entry ---------- */
.view-section {
  animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Header settles in from the top */
header {
  animation: fadeDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* h1 / lead p gently fade up shortly after */
.view-section > h1,
.view-section > p {
  animation: fadeUpSmall 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.06s;
}

/* ---------- Glass panels: subtle hover lift + smoothed transitions ---------- */
.glass-panel {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  animation: fadeUpSmall 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.glass-panel:hover { transform: translateY(-2px); }

/* Stagger panels in sequence so the page assembles */
.view-section > .glass-panel:nth-of-type(1) { animation-delay: 0.05s; }
.view-section > .glass-panel:nth-of-type(2) { animation-delay: 0.11s; }
.view-section > .glass-panel:nth-of-type(3) { animation-delay: 0.17s; }
.view-section > .glass-panel:nth-of-type(4) { animation-delay: 0.23s; }
.view-section > .glass-panel:nth-of-type(5) { animation-delay: 0.29s; }
.view-section > .glass-panel:nth-of-type(6) { animation-delay: 0.34s; }
.view-section > .glass-panel:nth-of-type(7) { animation-delay: 0.38s; }

/* ---------- Subject grid: cascade in like an iCloud launcher ---------- */
.subject-card {
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.subjects-grid .subject-card:nth-child(1)  { animation-delay: 0.04s; }
.subjects-grid .subject-card:nth-child(2)  { animation-delay: 0.09s; }
.subjects-grid .subject-card:nth-child(3)  { animation-delay: 0.14s; }
.subjects-grid .subject-card:nth-child(4)  { animation-delay: 0.19s; }
.subjects-grid .subject-card:nth-child(5)  { animation-delay: 0.24s; }
.subjects-grid .subject-card:nth-child(6)  { animation-delay: 0.29s; }
.subjects-grid .subject-card:nth-child(7)  { animation-delay: 0.34s; }
.subjects-grid .subject-card:nth-child(8)  { animation-delay: 0.39s; }
.subjects-grid .subject-card:nth-child(9)  { animation-delay: 0.44s; }
.subjects-grid .subject-card:nth-child(10) { animation-delay: 0.49s; }
.subjects-grid .subject-card:nth-child(n+11) { animation-delay: 0.54s; }

.subject-card:hover .subject-card-arrow {
  animation: float 1.6s ease-in-out infinite;
}

/* ---------- Tool buttons: cascade + hover scale ---------- */
.subject-tool-btn {
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.subject-tools-grid .subject-tool-btn:nth-child(1) { animation-delay: 0.06s; }
.subject-tools-grid .subject-tool-btn:nth-child(2) { animation-delay: 0.11s; }
.subject-tools-grid .subject-tool-btn:nth-child(3) { animation-delay: 0.16s; }
.subject-tools-grid .subject-tool-btn:nth-child(4) { animation-delay: 0.21s; }
.subject-tools-grid .subject-tool-btn:nth-child(5) { animation-delay: 0.26s; }
.subject-tools-grid .subject-tool-btn:nth-child(6) { animation-delay: 0.31s; }

.subject-tool-btn:hover .tool-icon {
  transform: scale(1.08) rotate(-2deg);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.subject-tool-btn .tool-icon {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Stat panels: pop in with mild bounce ---------- */
.stat-panel {
  animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dashboard-grid .stat-panel:nth-child(1) { animation-delay: 0.05s; }
.dashboard-grid .stat-panel:nth-child(2) { animation-delay: 0.11s; }
.dashboard-grid .stat-panel:nth-child(3) { animation-delay: 0.17s; }
.dashboard-grid .stat-panel:nth-child(4) { animation-delay: 0.23s; }
.dashboard-grid .stat-panel:nth-child(5) { animation-delay: 0.29s; }

.stat-icon-wrapper {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-panel:hover .stat-icon-wrapper {
  transform: scale(1.10) rotate(-3deg);
}

/* ---------- Buttons: smoothed press + ripple ---------- */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.30) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.btn:active::after { opacity: 1; transition: opacity 0s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* Primary button glow on hover */
.btn-primary:hover {
  animation: glow 1.6s ease-in-out infinite;
}

/* ---------- Nav links: animated underline ---------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after { width: 30%; }
.nav-link.active::after { width: 0; }

/* ---------- Quiz options: smooth selection feedback ---------- */
.quiz-option {
  animation: fadeUpSmall 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}
.options-stack .quiz-option:nth-child(1) { animation-delay: 0.06s; }
.options-stack .quiz-option:nth-child(2) { animation-delay: 0.10s; }
.options-stack .quiz-option:nth-child(3) { animation-delay: 0.14s; }
.options-stack .quiz-option:nth-child(4) { animation-delay: 0.18s; }
.quiz-option:hover {
  transform: translateX(4px);
  border-color: var(--hairline-strong);
}
.quiz-option:active { transform: translateX(2px) scale(0.99); }
.quiz-option.correct {
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Flashcards: smoother flip + entrance ----------
   IMPORTANT: do NOT put `animation` (opacity OR transform) directly on .flashcard.
   - An animated `transform` with fill-mode: both locks the keyframe transform and breaks the flip.
   - An animated `opacity` forces a compositor layer that flattens the 3D context,
     which makes `backface-visibility: hidden` stop working — the front face then
     shows mirrored at 180deg instead of being hidden behind the back face.
   Apply entrance animations to .flashcard-container (perspective only, no 3D children). */
.flashcard-container {
  animation: fadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.flashcard {
  transition: transform 0.7s cubic-bezier(0.55, 0.05, 0.25, 1);
}

/* ---------- Subject chips / theme badges: subtle hover lift ---------- */
.subject-chip,
.theme-badge {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, filter 0.28s ease;
}
.subject-card:hover .subject-chip,
.subject-tool-btn:hover .tool-icon {
  filter: brightness(1.08);
}

/* ---------- Doomsday hero clock: gentle pulse on the seconds segment ---------- */
.dd-segment:last-of-type .dd-num {
  animation: float 2.4s ease-in-out infinite;
}

/* ---------- Spotlight results: cascade as you type ---------- */
.spotlight-result {
  animation: fadeUpSmall 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.spotlight-results .spotlight-result:nth-child(1) { animation-delay: 0.02s; }
.spotlight-results .spotlight-result:nth-child(2) { animation-delay: 0.04s; }
.spotlight-results .spotlight-result:nth-child(3) { animation-delay: 0.06s; }
.spotlight-results .spotlight-result:nth-child(4) { animation-delay: 0.08s; }
.spotlight-results .spotlight-result:nth-child(5) { animation-delay: 0.10s; }
.spotlight-results .spotlight-result:nth-child(6) { animation-delay: 0.12s; }
.spotlight-results .spotlight-result:nth-child(7) { animation-delay: 0.14s; }
.spotlight-results .spotlight-result:nth-child(8) { animation-delay: 0.16s; }
.spotlight-results .spotlight-result:nth-child(n+9) { animation-delay: 0.18s; }

/* ---------- Resource cards / exam rows: stagger + smooth hover ---------- */
.resource-card,
.exam-row {
  animation: fadeUpSmall 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}
.resource-list .resource-card:nth-child(1)   { animation-delay: 0.04s; }
.resource-list .resource-card:nth-child(2)   { animation-delay: 0.08s; }
.resource-list .resource-card:nth-child(3)   { animation-delay: 0.12s; }
.resource-list .resource-card:nth-child(4)   { animation-delay: 0.16s; }
.resource-list .resource-card:nth-child(5)   { animation-delay: 0.20s; }
.resource-list .resource-card:nth-child(6)   { animation-delay: 0.24s; }
.resource-list .resource-card:nth-child(n+7) { animation-delay: 0.28s; }
.resource-card:hover { transform: translateY(-2px) translateX(2px); }

.exam-list .exam-row:nth-child(1) { animation-delay: 0.04s; }
.exam-list .exam-row:nth-child(2) { animation-delay: 0.08s; }
.exam-list .exam-row:nth-child(3) { animation-delay: 0.12s; }
.exam-list .exam-row:nth-child(4) { animation-delay: 0.16s; }
.exam-list .exam-row:nth-child(5) { animation-delay: 0.20s; }
.exam-list .exam-row:nth-child(n+6) { animation-delay: 0.24s; }
.exam-row:hover { transform: translateX(4px); }

/* ---------- Lit timeline rows ---------- */
.lit-timeline-row {
  animation: slideInLeft 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lit-timeline .lit-timeline-row:nth-child(1) { animation-delay: 0.05s; }
.lit-timeline .lit-timeline-row:nth-child(2) { animation-delay: 0.13s; }
.lit-timeline .lit-timeline-row:nth-child(3) { animation-delay: 0.21s; }
.lit-timeline .lit-timeline-row:nth-child(4) { animation-delay: 0.29s; }
.lit-timeline .lit-timeline-row:nth-child(5) { animation-delay: 0.37s; }
.lit-timeline .lit-timeline-row:nth-child(n+6) { animation-delay: 0.45s; }

/* ---------- Tabs ---------- */
.lit-ref-tab,
[data-frwriting-tab] {
  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.lit-ref-tab:hover,
[data-frwriting-tab]:hover {
  transform: translateY(-1px);
}

/* ---------- Resource & exam filter pills ---------- */
.resource-filter,
.exam-filter {
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.resource-filter:hover,
.exam-filter:hover { transform: translateY(-1px); }

/* ---------- Smooth scrolling ---------- */
html { scroll-behavior: smooth; }

/* ---------- Focus ring with ringPulse for accessibility ---------- */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
  animation: ringPulse 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Doomsday button hover ---------- */
.doomsday-btn {
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.doomsday-btn:hover { transform: translateY(-2px); }

/* ---------- SRS info gentle fade ---------- */
.srs-info {
  animation: fadeIn 0.6s ease both;
  animation-delay: 0.2s;
}

/* ---------- Logo subtle bounce on hover ---------- */
.logo:hover .logo-img {
  transform: scale(1.06) rotate(-3deg);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo .logo-img {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Search trigger little pulse on focus ---------- */
.search-trigger:focus-visible { animation: ringPulse 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- Spotlight chip lift on active result ---------- */
.spotlight-result.is-active .spotlight-chip {
  transform: scale(1.06);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spotlight-chip {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Subject hero shimmer underline (the big subject heading) ---------- */
.subject-hero h1 {
  background: linear-gradient(110deg,
    var(--ink) 35%,
    rgba(255, 255, 255, 0.85) 50%,
    var(--ink) 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Honor reduced-motion for the always-on animations */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .dd-segment:last-of-type .dd-num,
  .btn-primary:hover,
  .subject-hero h1 { animation: none !important; }
}

/* =========================================================
   Reference / spec-coverage tables
   ========================================================= */
.lit-ref-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}
.lit-ref-table th, .lit-ref-table td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  vertical-align: top;
  line-height: 1.5;
}
.lit-ref-table thead th {
  background: rgba(255, 255, 255, 0.06);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}
.lit-ref-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.lit-ref-table code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.spec-coverage-table .spec-ref {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.spec-coverage-untested td:first-child { width: 38%; }
.spec-coverage-untested {
  border-left: 3px solid #FF9F0A;
  padding-left: 0.5rem;
}

[data-theme="dark"] .lit-ref-table th,
[data-theme="dark"] .lit-ref-table td { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="light"] .lit-ref-table th,
[data-theme="light"] .lit-ref-table td { border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .lit-ref-table thead th { background: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .lit-ref-table tbody tr:hover { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .spec-coverage-table .spec-ref { background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .lit-ref-table code { background: rgba(0, 0, 0, 0.06); }

/* =================================================================
   SPECIFICATION TAB — top-level past-paper coverage tracker
   ================================================================= */
.spec-view h1 { margin-top: 0.5rem; }
.spec-controls {
  padding: 1rem 1.1rem;
}
.spec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.spec-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 120, 120, 0.20);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.18s ease;
}
.spec-tab:hover {
  border-color: var(--tab-color, var(--sys-blue));
  background: rgba(120, 120, 255, 0.06);
}
.spec-tab.active {
  border-color: var(--tab-color, var(--sys-blue));
  background: color-mix(in srgb, var(--tab-color, #5E5CE6) 12%, transparent);
  font-weight: 600;
}
.spec-tab-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.spec-filter-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px dashed rgba(120, 120, 120, 0.15);
  padding-top: 0.7rem;
}
.spec-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.spec-filter input[type="text"] {
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(120, 120, 120, 0.20);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  min-width: 220px;
}
.spec-filter input[type="text"]:focus {
  outline: none;
  border-color: var(--sys-blue);
}

/* Summary panel */
#spec-summary {
  padding: 1.2rem 1.3rem;
}
.spec-summary-head {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 1rem;
}
.spec-summary-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  border-radius: 12px;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0 0.6rem;
}
.spec-summary-title {
  margin: 0;
  font-size: 1.4rem;
}
.spec-summary-meta {
  margin: 0.15rem 0 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
}
.spec-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.spec-stat {
  background: rgba(120, 120, 120, 0.06);
  border: 1px solid rgba(120, 120, 120, 0.10);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}
.spec-stat-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 0.2rem;
}
.spec-stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
.spec-stat-tested { color: var(--sys-green, #30D158); }
.spec-stat-untested { color: var(--sys-orange, #FF9F0A); }
.spec-summary-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(120, 120, 120, 0.15);
  line-height: 1.55;
}

/* Sections */
.spec-section { margin-top: 1.5rem; }
.spec-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  margin: 0 0 0.8rem;
  font-weight: 600;
}
.spec-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.spec-dot-tested { background: var(--sys-green, #30D158); }
.spec-dot-untested { background: var(--sys-orange, #FF9F0A); }
.spec-section-count {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-weight: 400;
  margin-left: 0.3rem;
}

/* Tested topics — paper groups */
.spec-paper-group {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.spec-paper-group-title {
  font-size: 0.95rem;
  margin: 0 0 0.7rem;
  color: var(--sys-blue);
  font-weight: 600;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(120, 120, 120, 0.10);
  vertical-align: top;
}
.spec-table th {
  font-weight: 600;
  color: var(--ink-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.spec-table tbody tr:hover { background: rgba(120, 120, 120, 0.04); }
.spec-cell-year { width: 70px; }
.spec-year-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(48, 209, 88, 0.12);
  color: var(--sys-green, #30D158);
  font-weight: 600;
  font-size: 0.82rem;
}
.spec-cell-topic {
  font-weight: 500;
  color: var(--ink);
  width: 30%;
}
.spec-cell-detail {
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Untested topics list */
.spec-untested-list {
  padding: 0.7rem 0.9rem;
}
.spec-untested-item {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px dashed rgba(120, 120, 120, 0.15);
}
.spec-untested-item:last-child { border-bottom: none; }
.spec-untested-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.spec-untested-topic {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}
.spec-untested-ref {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(255, 159, 10, 0.12);
  color: var(--sys-orange, #FF9F0A);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
}
.spec-untested-why {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ===== Exam checklist ===== */
.exam-checklist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.exam-checklist-header {
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.exam-checklist-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.exam-checklist-count {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink, #111);
}
.exam-checklist-tip {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted, #666);
}
.exam-checklist-pct {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary, #0A84FF);
  line-height: 1;
  letter-spacing: -0.02em;
}
.exam-checklist-bar {
  width: 100%;
  height: 10px;
  background: rgba(127, 127, 127, 0.18);
  border-radius: 999px;
  overflow: hidden;
}
.exam-checklist-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #30D158, #0A84FF, #BF5AF2);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.exam-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.exam-checklist-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--ap-bg-card, rgba(255, 255, 255, 0.06));
  border-radius: 14px;
  border-left: 4px solid var(--accent, #0A84FF);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  user-select: none;
}
.exam-checklist-row:hover {
  background: rgba(255, 255, 255, 0.1);
}
.exam-checklist-cb {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.exam-checklist-tick {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.18);
  border: 2px solid rgba(127, 127, 127, 0.35);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.exam-checklist-row.checked .exam-checklist-tick {
  background: linear-gradient(180deg, #34D158, #1FA744);
  border-color: #1FA744;
  color: #fff;
}
.exam-checklist-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.exam-checklist-info { flex: 1; min-width: 0; }
.exam-checklist-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink, #111);
}
.exam-checklist-title .exam-paper {
  color: var(--ink-muted, #666);
  font-weight: 500;
}
.exam-checklist-meta {
  font-size: 0.82rem;
  color: var(--ink-muted, #666);
  margin-top: 0.15rem;
}
.exam-checklist-row.checked .exam-checklist-title,
.exam-checklist-row.checked .exam-checklist-meta {
  text-decoration: line-through;
  text-decoration-color: rgba(127, 127, 127, 0.5);
  color: var(--ink-muted, #666);
}

/* Quick pop animation when a checkbox is just toggled on */
@keyframes exam-checklist-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}
.exam-checklist-row.just-checked {
  animation: exam-checklist-pop 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.exam-checklist-row.just-checked .exam-checklist-tick {
  animation: exam-tick-bounce 0.7s cubic-bezier(0.25, 1.4, 0.4, 1);
}
@keyframes exam-tick-bounce {
  0%   { transform: scale(0.5); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

[data-theme="dark"] .exam-checklist-row { background: var(--ap-bg-soft); }
[data-theme="dark"] .exam-checklist-row:hover { background: rgba(255, 255, 255, 0.08); }

/* ============================================================ */
/*   BOOM!  text that pops out when an exam is ticked off       */
/* ============================================================ */
.exam-boom-text {
  position: fixed;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  z-index: 99998;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: 0.03em;
  -webkit-text-stroke: 3px #111;
  color: #FFD60A;
  text-shadow:
    0 0 30px #FFD60A,
    0 0 60px #FF9F0A,
    0 6px 0 #000;
  animation: boom-pop 0.9s cubic-bezier(0.25, 1.6, 0.4, 1) forwards;
}
@keyframes boom-pop {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(-6deg); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.35) rotate(2deg); opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(1.0)  rotate(-1deg); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(1.2) rotate(3deg);  opacity: 0; }
}

/* ============================================================ */
/*   NUKE — full-screen finale when every exam is ticked        */
/*   (15-second cinematic — see triggerNukeAnimation in app.js) */
/* ============================================================ */
.nuke-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: auto;
  overflow: hidden;
  background: transparent;
  font-family: "Impact", "Arial Black", sans-serif;
}
/* Dedicated canvas for the particle storm */
.nuke-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* ---- Stage 1: red alert banner ---- */
.nuke-alert {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 1.4, 0.4, 1), opacity 0.4s;
  background: linear-gradient(180deg, rgba(180, 0, 0, 0.55) 0%, rgba(60, 0, 0, 0.0) 100%);
}
.nuke-overlay.stage-alert .nuke-alert { transform: translateY(0); opacity: 1; }
.nuke-alert-band {
  background: #C00000;
  color: #FFFFFF;
  font-size: clamp(20px, 3.6vw, 44px);
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.5rem;
  border: 3px solid #FFD60A;
  border-radius: 8px;
  box-shadow: 0 0 24px #FF0000, inset 0 0 10px rgba(0,0,0,0.5);
  text-shadow: 0 0 14px #FFD60A;
  animation: nuke-alert-flash 0.5s infinite alternate;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.nuke-alert-icon { color: #FFD60A; font-size: 1.4em; }
.nuke-alert-sub {
  margin-top: 0.6rem;
  color: #FFE4E0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(12px, 1.6vw, 18px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.95;
}
@keyframes nuke-alert-flash {
  0%   { box-shadow: 0 0 24px #FF0000, inset 0 0 10px rgba(0,0,0,0.5); background: #C00000; }
  100% { box-shadow: 0 0 60px #FFD60A, inset 0 0 18px rgba(0,0,0,0.7); background: #770000; }
}

/* ---- Stage 2: bomb drops from top ---- */
.nuke-bomb {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  opacity: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}
.nuke-overlay.stage-drop .nuke-bomb {
  opacity: 1;
  animation: nuke-bomb-fall 1.4s cubic-bezier(0.55, 0, 0.85, 0.4) forwards;
}
@keyframes nuke-bomb-fall {
  0%   { top: -160px;   transform: translateX(-50%) rotate(8deg); }
  60%  { top: 55vh;     transform: translateX(-52%) rotate(-3deg); }
  100% { top: 72vh;     transform: translateX(-50%) rotate(5deg); }
}

/* ---- Stage 3: white flash on impact ---- */
.nuke-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 72%,
    rgba(255,255,255,1) 0%,
    rgba(255,240,200,0.9) 12%,
    rgba(255,170,80,0.7) 28%,
    rgba(255,0,0,0.0) 60%,
    rgba(0,0,0,0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.nuke-alert { z-index: 7; }
.nuke-bomb  { z-index: 7; }
.nuke-overlay.stage-flash .nuke-flash {
  animation: nuke-flash 1.6s ease-out forwards;
}
@keyframes nuke-flash {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Stage 3b: vertical LIGHT PILLAR (refs 1-2) ---- */
.nuke-light-pillar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  width: 80px;
  height: 100vh;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 30%, rgba(180,230,255,1) 70%, rgba(140,210,255,0.9) 95%),
    linear-gradient(90deg, rgba(120,210,255,0) 0%, rgba(255,255,255,1) 50%, rgba(120,210,255,0) 100%);
  filter: blur(1.5px) drop-shadow(0 0 32px #B8E5FF) drop-shadow(0 0 64px #7FB7E5);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.nuke-overlay.stage-pillar .nuke-light-pillar {
  animation: nuke-pillar 4.5s cubic-bezier(0.16, 1.0, 0.3, 1) forwards;
}
@keyframes nuke-pillar {
  0%   { transform: translateX(-50%) scaleY(0)    scaleX(0.3); opacity: 0; }
  8%   { transform: translateX(-50%) scaleY(1)    scaleX(1.8); opacity: 1; }
  20%  { transform: translateX(-50%) scaleY(1)    scaleX(1.2); opacity: 1; }
  60%  { transform: translateX(-50%) scaleY(1)    scaleX(0.7); opacity: 0.7; }
  100% { transform: translateX(-50%) scaleY(0.6)  scaleX(0.2); opacity: 0; }
}

/* ---- Stage 4: mushroom cloud (slow rise, 9 seconds) ---- */
.nuke-mushroom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.nuke-mushroom-stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  width: 28vw;
  height: 62vh;
  background:
    radial-gradient(ellipse at center, rgba(255,180,80,0.85) 0%, rgba(255,120,40,0.45) 40%, rgba(70,40,20,0.0) 70%),
    linear-gradient(180deg, rgba(255,200,100,0.45) 0%, rgba(140,80,40,0.75) 60%, rgba(50,30,20,0.9) 100%);
  border-radius: 50% 50% 8% 8% / 18% 18% 4% 4%;
  filter: blur(3px);
  opacity: 0;
}
.nuke-mushroom-cloud {
  position: absolute;
  bottom: 42vh;
  left: 50%;
  transform: translate(-50%, 0) scale(0.2);
  width: 76vw;
  height: 55vh;
  background:
    radial-gradient(ellipse at 40% 60%, rgba(255,160,60,0.9)  0%, rgba(180,80,30,0.75) 35%, rgba(60,30,20,0) 70%),
    radial-gradient(ellipse at 70% 40%, rgba(255,210,110,0.95) 0%, rgba(220,110,50,0.75) 30%, rgba(40,20,10,0) 65%),
    radial-gradient(ellipse at 30% 30%, rgba(255,225,150,0.9)  0%, rgba(200,100,40,0.7)  35%, rgba(40,20,10,0) 70%),
    radial-gradient(ellipse at 55% 55%, rgba(120,80,60,0.55)   0%, rgba(40,20,10,0)      60%);
  border-radius: 50%;
  filter: blur(5px);
  opacity: 0;
}
.nuke-overlay.stage-mushroom .nuke-mushroom-stem {
  animation: nuke-stem-rise 5.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.nuke-overlay.stage-mushroom .nuke-mushroom-cloud {
  animation: nuke-cloud-rise 8.0s cubic-bezier(0.18, 0.8, 0.3, 1) forwards;
}
@keyframes nuke-stem-rise {
  0%   { transform: translateX(-50%) scaleY(0)    scaleX(0.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1.05) scaleX(1.0); opacity: 0.95; }
}
@keyframes nuke-cloud-rise {
  0%   { transform: translate(-50%, 35vh) scale(0.18); opacity: 0; }
  18%  { opacity: 1; }
  60%  { transform: translate(-50%, 0vh) scale(1.3);  opacity: 0.95; }
  100% { transform: translate(-50%, -18vh) scale(1.9); opacity: 0.85; }
}

/* Strong shake at impact (1.8s) */
.nuke-shake { animation: nuke-shake-anim 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3 both; }
@keyframes nuke-shake-anim {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 5px) rotate(-0.5deg); }
  20% { transform: translate(10px, -4px) rotate(0.6deg); }
  30% { transform: translate(-9px, 7px) rotate(-0.4deg); }
  40% { transform: translate(8px, -5px) rotate(0.5deg); }
  50% { transform: translate(-6px, 4px) rotate(-0.3deg); }
  60% { transform: translate(5px, -3px) rotate(0.3deg); }
  70% { transform: translate(-4px, 3px) rotate(-0.2deg); }
  80% { transform: translate(3px, -2px); }
  90% { transform: translate(-1px, 1px); }
}
/* Secondary milder tremor (3.6s) for the aftershock window */
.nuke-shake-mild { animation: nuke-shake-mild-anim 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) 4 both; }
@keyframes nuke-shake-mild-anim {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -1px); }
}

/* ---- Stage 5: final celebration text ---- */
.nuke-final {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  z-index: 9;
}
.nuke-overlay.stage-final .nuke-final {
  animation: nuke-final-in 1.2s cubic-bezier(0.25, 1.4, 0.4, 1) forwards;
}
@keyframes nuke-final-in {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
.nuke-final-title {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #FFD60A;
  -webkit-text-stroke: 3px #111;
  text-shadow: 0 0 36px #FF9F0A, 0 0 70px #FF453A, 0 8px 0 #000;
  line-height: 0.95;
}
.nuke-final-sub {
  margin-top: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(14px, 1.8vw, 22px);
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* Fade out at the end */
.nuke-overlay.stage-out { animation: nuke-fade-out 0.6s ease-out forwards; }
@keyframes nuke-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}