/* ─────────────────────────────────────────────────────────
   TopMark FX — interaction layer for *-new.html pages.
   - Refreshed palette, light + dark themes
   - Magnetic / tilt / reveal / sliding nav pill / animated counters
   - Settings drawer
   - NO custom cursor (uses native cursor)
   ───────────────────────────────────────────────────────── */

/* ── Light theme (default) ── */
:root,
[data-theme="light"] {
  /* Warmer paper-like base; not pure white, easier on long reading. */
  --fx-bg:        #f8f6f1;
  --fx-bg-2:      #efece4;
  --fx-card:      #ffffff;
  --fx-ink:       #18181b;
  --fx-ink-soft:  #3f3f46;
  --fx-ink-muted: #6b7280;
  --fx-line:        rgba(24, 24, 27, 0.06);
  --fx-line-strong: rgba(24, 24, 27, 0.11);

  /* Refined deep-indigo system. Slightly desaturated vs. the old neon
     500-grade. Pairs better with the warm paper bg. */
  --fx-accent:    #4f46e5; /* indigo-600 */
  --fx-accent-2:  #7c3aed; /* violet-600 */
  --fx-accent-3:  #db2777; /* rose-600 (was hot pink) */
  --fx-accent-4:  #0891b2; /* cyan-600 */

  --fx-aurora:        linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #db2777 100%);
  --fx-aurora-soft:   linear-gradient(120deg, rgba(79,70,229,.10) 0%, rgba(124,58,237,.10) 55%, rgba(219,39,119,.10) 100%);

  --fx-glass:        rgba(255, 255, 255, 0.68);
  --fx-glass-strong: rgba(255, 255, 255, 0.85);
  --fx-glass-stroke: rgba(255, 255, 255, 0.55);

  /* Softer, less candy-coloured blobs — atmospheric, not distracting. */
  --fx-blob-1: #dde2ff;
  --fx-blob-2: #fae0ec;
  --fx-blob-3: #e7e0ff;

  --fx-shadow-sm:  0 1px 2px  rgba(24, 24, 27, .04);
  --fx-shadow:     0 10px 28px -14px rgba(79, 70, 229, .22);
  --fx-shadow-lg:  0 28px 60px -22px rgba(79, 70, 229, .28);

  --fx-link-blue:  #1d4ed8;
}

/* ── Dark theme ── */
[data-theme="dark"] {
  /* Slight tilt toward zinc-900/950 for less pure-black feel. */
  --fx-bg:        #0b0b10;
  --fx-bg-2:      #13131a;
  --fx-card:      #1a1a21;
  --fx-ink:       #f4f4f5;
  --fx-ink-soft:  #d4d4d8;
  --fx-ink-muted: #9ca3af;
  --fx-line:        rgba(244, 244, 245, 0.07);
  --fx-line-strong: rgba(244, 244, 245, 0.13);

  /* In dark mode the lighter 400-grade shades read better. */
  --fx-accent:    #818cf8; /* indigo-400 */
  --fx-accent-2:  #a78bfa; /* violet-400 */
  --fx-accent-3:  #fb7185; /* rose-400 (was hot pink) */
  --fx-accent-4:  #22d3ee; /* cyan-400 */

  --fx-aurora:      linear-gradient(120deg, #818cf8 0%, #a78bfa 55%, #fb7185 100%);
  --fx-aurora-soft: linear-gradient(120deg, rgba(129,140,248,.18) 0%, rgba(167,139,250,.18) 55%, rgba(251,113,133,.18) 100%);

  --fx-glass:        rgba(26, 26, 33, 0.58);
  --fx-glass-strong: rgba(26, 26, 33, 0.80);
  --fx-glass-stroke: rgba(255, 255, 255, 0.06);

  /* Deeper, nebula-like blobs instead of the old neon 700-grade. */
  --fx-blob-1: #312e81; /* indigo-900 */
  --fx-blob-2: #831843; /* pink-900 */
  --fx-blob-3: #4c1d95; /* violet-900 */

  --fx-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --fx-shadow:     0 12px 32px -14px rgba(0,0,0,.55);
  --fx-shadow-lg:  0 28px 60px -22px rgba(0,0,0,.65);
}

:root {
  --fx-ease:   cubic-bezier(.22, 1, .36, 1);
  --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fx-radius:     18px;
  --fx-radius-sm:  12px;
  --fx-radius-lg:  28px;
}

/* Theme transition */
html, body { transition: background-color .4s var(--fx-ease), color .4s var(--fx-ease); }

/* ─────────────────────── Base ─────────────────────── */
html { scroll-behavior: smooth; background: var(--fx-bg); }  /* root bg = clean overscroll canvas (no texture on rubber-band) */
body {
  background: var(--fx-bg);
  color: var(--fx-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
*::selection { background: rgba(99, 102, 241, 0.25); color: var(--fx-ink); }
*:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 3px; border-radius: 6px; }

/* Body noise + dot grid — kept very subtle so overscroll reads as a plain colour
   (was opacity .3 / .6, which showed as a "pixelated TV" texture on rubber-band). */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -3; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { opacity: .08; }
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background-image: radial-gradient(var(--fx-line-strong) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
}

/* Drifting aurora blobs */
.fx-blob { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: -1; opacity: .55; }
[data-theme="dark"] .fx-blob { opacity: .35; }
.fx-blob.b1 { top: -10%; left: -10%; width: 480px; height: 480px; background: var(--fx-blob-1); animation: fx-drift 18s infinite alternate ease-in-out; }
.fx-blob.b2 { top: 30%; right: -10%; width: 520px; height: 520px; background: var(--fx-blob-2); animation: fx-drift 22s infinite alternate-reverse ease-in-out; }
.fx-blob.b3 { bottom: -15%; left: 30%; width: 560px; height: 560px; background: var(--fx-blob-3); opacity: .4; animation: fx-drift 26s infinite alternate ease-in-out; }
@keyframes fx-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, -40px) scale(1.1); }
  100% { transform: translate(-40px, 60px) scale(0.95); }
}

/* Scroll progress bar at top */
#fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--fx-aurora); transform-origin: 0 50%; transform: scaleX(0);
  z-index: 100; transition: transform .1s linear;
}

/* ─────────────────────── Page transition: soft cross-fade + accent glow ─────────────────────── */

/* Outbound: gentle dim + small lift. Short (~240ms) so the click feels
   instant; no scale, no heavy blur. */
body.fx-leaving .fx-main,
body.fx-leaving .fx-header,
body.fx-leaving .fx-footer {
  transition:
    transform .24s var(--fx-ease),
    opacity   .24s var(--fx-ease),
    filter    .24s var(--fx-ease);
  transform: translateY(-4px);
  opacity: .35;
  filter: blur(2px);
}

/* Inbound: header → main → footer fade up in sequence (~60ms apart). */
body.fx-entering .fx-header,
body.fx-entering .fx-main,
body.fx-entering .fx-footer {
  animation: fx-page-enter .44s cubic-bezier(.22, 1, .36, 1) backwards;
}
body.fx-entering .fx-header { animation-delay:   0ms; }
body.fx-entering .fx-main   { animation-delay:  60ms; }
body.fx-entering .fx-footer { animation-delay: 120ms; }
@keyframes fx-page-enter {
  from { transform: translateY(10px); opacity: 0; filter: blur(3px); }
  to   { transform: translateY(0);    opacity: 1; filter: blur(0); }
}

/* Entry glow — soft accent-coloured radial bloom from the click point
   on the new page. Creates a visual through-line: you clicked here,
   the new page wakes up here. ~650ms, never covers the whole screen. */
.fx-entry-glow {
  position: fixed; z-index: 9998;
  width: 140px; height: 140px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4);
  background:
    radial-gradient(circle,
      color-mix(in oklab, var(--fx-accent) 40%, transparent) 0%,
      color-mix(in oklab, var(--fx-accent-2) 20%, transparent) 35%,
      transparent 70%);
  pointer-events: none;
  filter: blur(8px);
  animation: fx-entry-glow .65s cubic-bezier(.22, 1, .36, 1) forwards;
  mix-blend-mode: screen;
}
@keyframes fx-entry-glow {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0;   }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
}

/* Click ripple — tiny accent-coloured ring that bursts from the click
   right when navigation starts. Lightweight echo of the entry glow. */
.fx-click-ripple {
  position: fixed; z-index: 9997;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--fx-accent) 65%, transparent);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: fx-ripple .55s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes fx-ripple {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 1;  }
  100% { transform: translate(-50%, -50%) scale(14); opacity: 0;  }
}

/* Hide the legacy iris overlay if any old code/markup still references it */
#fx-page-transition { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-click-ripple, .fx-entry-glow { display: none !important; }
  body.fx-leaving .fx-main, body.fx-leaving .fx-header, body.fx-leaving .fx-footer,
  body.fx-entering .fx-main, body.fx-entering .fx-header, body.fx-entering .fx-footer {
    animation: none !important; transition: none !important;
    transform: none !important; filter: none !important; opacity: 1 !important;
  }
}

/* ─────────────────────── Header ─────────────────────── */
.fx-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--fx-bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--fx-line);
  transition: background .3s var(--fx-ease), border-color .3s var(--fx-ease);
}
.fx-header.is-shrunk { background: color-mix(in srgb, var(--fx-bg) 92%, transparent); }
.fx-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fx-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--fx-ink);
  position: relative;
}
.fx-logo .mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--fx-aurora);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0;   /* hides the literal "T" text */
  box-shadow: 0 4px 14px -4px rgba(99, 102, 241, .55);
  transition: transform .4s var(--fx-spring);
}
/* Graduation-cap glyph (white) in place of the "T", via SVG mask — theme-proof,
   applies to the top-bar logo on every page without editing the markup. */
.fx-logo .mark::before {
  content: ''; width: 18px; height: 18px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.91V17h2V9L12 3zM5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.91V17h2V9L12 3zM5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fx-logo:hover .mark { transform: rotate(-8deg) scale(1.08); }
.fx-nav {
  display: flex; align-items: center; gap: 2px;
  background: var(--fx-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  padding: 4px;
  position: relative;
  overflow: visible;
}
.fx-nav a {
  position: relative; z-index: 1;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .86rem; font-weight: 500;
  color: var(--fx-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s var(--fx-ease);
  flex-shrink: 0;
}
.fx-nav a:hover { color: var(--fx-ink); }
.fx-nav a.active { color: #fff; }
.fx-nav-pill {
  position: absolute;
  top: 4px; bottom: 4px;
  background: var(--fx-aurora);
  border-radius: 999px;
  z-index: 0;
  transition: transform .45s var(--fx-spring), width .45s var(--fx-spring), opacity .25s;
  box-shadow: 0 4px 14px -4px rgba(99, 102, 241, .55);
}

.fx-header-actions { display: flex; align-items: center; gap: 8px; }
.fx-icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--fx-line-strong);
  background: var(--fx-glass);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  cursor: pointer; color: var(--fx-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s var(--fx-spring);
  font-size: 1.05rem; line-height: 1;
}
.fx-icon-btn:hover { background: var(--fx-card); border-color: var(--fx-accent); color: var(--fx-accent); transform: translateY(-2px); }

/* Mobile hamburger */
.fx-menu-btn { display: none; }
@media (max-width: 980px) {
  .fx-nav { display: none; }
  .fx-menu-btn { display: inline-flex; }
  .fx-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 70px; right: 16px; left: 16px;
    padding: 12px; gap: 4px;
    border-radius: 18px; background: var(--fx-glass-strong);
    backdrop-filter: blur(28px);
    border: 1px solid var(--fx-line-strong);
    box-shadow: var(--fx-shadow-lg);
    z-index: 95;
  }
  .fx-nav.is-open a { padding: 11px 16px; border-radius: 10px; font-size: .92rem; }
  .fx-nav.is-open .fx-nav-pill { display: none; }
  .fx-nav.is-open a.active { background: var(--fx-aurora-soft); color: var(--fx-accent); }
}

/* ─────────────────────── Main / typography ─────────────────────── */
.fx-main { max-width: 1280px; margin: 0 auto; padding: 36px 24px 96px; position: relative; }
.fx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--fx-aurora-soft);
  border: 1px solid color-mix(in srgb, var(--fx-accent) 22%, transparent);
  border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fx-accent);
}
.fx-h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--fx-ink); }
.fx-h2 { font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 700; letter-spacing: -.02em; color: var(--fx-ink); }
.fx-h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--fx-ink); }
.fx-lead { font-size: 1.05rem; color: var(--fx-ink-muted); line-height: 1.65; max-width: 60ch; }
.fx-aurora-text {
  background: var(--fx-aurora);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-aurora-shift 8s ease infinite;
}
@keyframes fx-aurora-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ─────────────────────── Reveal on scroll ─────────────────────── */
[data-fx-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--fx-ease), transform .8s var(--fx-ease); will-change: opacity, transform; }
[data-fx-reveal].is-in { opacity: 1; transform: translateY(0); }
[data-fx-reveal-delay="1"] { transition-delay: .08s; }
[data-fx-reveal-delay="2"] { transition-delay: .16s; }
[data-fx-reveal-delay="3"] { transition-delay: .24s; }
[data-fx-reveal-delay="4"] { transition-delay: .32s; }
[data-fx-reveal-delay="5"] { transition-delay: .4s; }

/* ─────────────────────── Cards & panels ─────────────────────── */
.fx-card {
  background: var(--fx-glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--fx-glass-stroke);
  box-shadow: var(--fx-shadow);
  border-radius: var(--fx-radius);
  transition: transform .4s var(--fx-spring), box-shadow .4s var(--fx-ease), border-color .25s;
  position: relative; overflow: hidden;
  color: var(--fx-ink);
}
.fx-card.is-hoverable:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-lg); border-color: color-mix(in srgb, var(--fx-accent) 30%, transparent); }
.fx-panel { background: var(--fx-glass-strong); backdrop-filter: blur(22px); border: 1px solid var(--fx-glass-stroke); border-radius: var(--fx-radius-lg); box-shadow: var(--fx-shadow); color: var(--fx-ink); }

/* Tilt cards respond to mouse */
[data-fx-tilt] { transform-style: preserve-3d; transition: transform .15s linear; will-change: transform; }
[data-fx-tilt] > * { transform: translateZ(20px); }

/* ─────────────────────── Buttons ─────────────────────── */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-family: inherit; font-size: .92rem; font-weight: 600; letter-spacing: -.01em;
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .3s var(--fx-spring), box-shadow .3s var(--fx-ease), background .3s var(--fx-ease), color .3s var(--fx-ease), border-color .3s var(--fx-ease);
  position: relative; overflow: hidden; white-space: nowrap;
  color: var(--fx-ink);
}
.fx-btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.4) 0%, transparent 50%);
  opacity: 0; transition: opacity .3s var(--fx-ease); pointer-events: none;
}
.fx-btn:hover::after { opacity: 1; }
.fx-btn-primary {
  background: var(--fx-aurora); background-size: 200% 200%; color: #fff;
  box-shadow: 0 6px 20px -6px rgba(99,102,241,.55);
  animation: fx-aurora-shift 10s ease infinite;
}
.fx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(99,102,241,.7); color: #fff; }
.fx-btn-primary:active { transform: translateY(0) scale(.98); }
.fx-btn-secondary {
  background: var(--fx-card);
  border: 1px solid var(--fx-line-strong);
}
.fx-btn-secondary:hover { border-color: var(--fx-accent); color: var(--fx-accent); transform: translateY(-2px); box-shadow: var(--fx-shadow); }
.fx-btn-ghost { background: transparent; color: var(--fx-ink-muted); padding: 9px 14px; }
.fx-btn-ghost:hover { background: var(--fx-line); color: var(--fx-ink); }
/* Destructive action — readable on light/translucent panels (was low-contrast ghost). */
.fx-btn-danger { background: transparent; color: #dc2626; border: 1px solid color-mix(in srgb, #dc2626 45%, transparent); }
.fx-btn-danger:hover { background: #dc2626; color: #fff; border-color: transparent; transform: translateY(-1px); }
[data-theme="dark"] .fx-btn-danger { color: #f87171; border-color: color-mix(in srgb, #f87171 45%, transparent); }
[data-theme="dark"] .fx-btn-danger:hover { background: #ef4444; color: #fff; }
.fx-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 12px; }
.fx-btn-sm { padding: 8px 14px; font-size: .82rem; }

/* ─────────────────────── Inputs / selects ─────────────────────── */
.fx-field { display: flex; flex-direction: column; gap: 6px; }
.fx-field label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fx-ink-muted);
}
.fx-input, .fx-select {
  width: 100%; padding: 11px 14px;
  background: var(--fx-card);
  border: 1px solid var(--fx-line-strong);
  border-radius: 12px;
  font-family: inherit; font-size: .92rem; color: var(--fx-ink);
  transition: all .25s var(--fx-ease);
}
.fx-input:focus, .fx-select:focus { outline: none; border-color: var(--fx-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-accent) 16%, transparent); }
.fx-textarea { width: 100%; padding: 12px 14px; background: var(--fx-card); border: 1px solid var(--fx-line-strong); border-radius: 14px; font-family: inherit; font-size: .94rem; min-height: 100px; resize: vertical; transition: all .25s var(--fx-ease); color: var(--fx-ink); }
.fx-textarea:focus { outline: none; border-color: var(--fx-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-accent) 16%, transparent); }

/* Chips */
.fx-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip-btn {
  padding: 7px 14px; border-radius: 999px;
  font-family: inherit; font-size: .82rem; font-weight: 500;
  background: var(--fx-card); border: 1px solid var(--fx-line-strong); color: var(--fx-ink-soft);
  cursor: pointer; transition: all .25s var(--fx-spring);
}
.fx-chip-btn:hover { border-color: var(--fx-accent); color: var(--fx-accent); transform: translateY(-1px); }
.fx-chip-btn.active { background: var(--fx-aurora); color: #fff; border-color: transparent; box-shadow: 0 4px 14px -4px rgba(99,102,241,.5); }

/* ─────────────────────── Hero ─────────────────────── */
.fx-hero { position: relative; padding: 64px 0 48px; margin-bottom: 48px; }
.fx-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .fx-hero-grid { grid-template-columns: 1fr; } }
.fx-hero-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 32px; }
.fx-hero-stat { background: var(--fx-glass); backdrop-filter: blur(14px); border: 1px solid var(--fx-glass-stroke); border-radius: 14px; padding: 16px 18px; }
.fx-hero-stat .v { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; background: var(--fx-aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fx-hero-stat .l { font-size: .72rem; color: var(--fx-ink-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

[data-fx-counter] { font-variant-numeric: tabular-nums; }

/* ─────────────────────── Feature grid ─────────────────────── */
.fx-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fx-feature {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 24px;
  background: var(--fx-glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--fx-glass-stroke);
  border-radius: 18px;
  text-decoration: none; color: var(--fx-ink);
  transition: transform .45s var(--fx-spring), box-shadow .45s var(--fx-ease), border-color .25s;
  position: relative; overflow: hidden;
}
.fx-feature::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--fx-aurora); opacity: 0; transition: opacity .3s;
}
.fx-feature:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-lg); border-color: color-mix(in srgb, var(--fx-accent) 30%, transparent); }
.fx-feature:hover::before { opacity: 1; }
.fx-feature .ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--fx-aurora-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: transform .4s var(--fx-spring);
}
.fx-feature:hover .ico { transform: scale(1.08) rotate(-6deg); }
.fx-feature h3 { font-size: 1.02rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.fx-feature p { font-size: .88rem; color: var(--fx-ink-muted); margin: 0; line-height: 1.55; }
.fx-feature .arrow { font-size: .85rem; color: var(--fx-accent); font-weight: 600; margin-top: auto; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s var(--fx-spring); }
.fx-feature:hover .arrow { opacity: 1; transform: translateX(0); }

/* ─────────────────────── Chat ─────────────────────── */
.fx-chat {
  display: flex; flex-direction: column;
  height: clamp(440px, 64vh, 720px);
  background: var(--fx-glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--fx-glass-stroke);
  border-radius: var(--fx-radius);
  overflow: hidden;
  box-shadow: var(--fx-shadow);
  position: relative;
}
.fx-chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.fx-msg { max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: .94rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; animation: fx-msg-in .4s var(--fx-spring); }
@keyframes fx-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fx-msg.bot { background: var(--fx-card); border: 1px solid var(--fx-line); color: var(--fx-ink); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--fx-shadow-sm); }
.fx-msg.user { background: var(--fx-aurora); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 6px 20px -6px rgba(99,102,241,.55); }
.fx-msg.thinking { background: transparent; border: 0; padding-left: 0; color: var(--fx-ink-muted); display: flex; align-items: center; gap: 8px; font-style: italic; }
.fx-msg.thinking::before { content: ''; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--fx-accent) 25%, transparent); border-top-color: var(--fx-accent); border-radius: 50%; animation: spin .9s linear infinite; }
.fx-msg img { max-width: 100%; max-height: 280px; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--fx-line); display: block; }

.fx-chat-input { padding: 16px; border-top: 1px solid var(--fx-line); background: color-mix(in srgb, var(--fx-card) 70%, transparent); backdrop-filter: blur(10px); }
.fx-chat-input-row { display: flex; gap: 8px; align-items: stretch; }
.fx-chat-input-row .fx-input { padding: 12px 16px; border-radius: 14px; }

.fx-img-preview { display: none; align-items: center; gap: 10px; padding: 8px 12px; background: var(--fx-aurora-soft); border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); }
.fx-img-preview.is-shown { display: flex; }
.fx-img-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.fx-img-preview span { flex: 1; font-size: .85rem; color: var(--fx-ink-soft); }
.fx-img-preview button { background: transparent; border: 0; cursor: pointer; color: var(--fx-ink-muted); width: 28px; height: 28px; border-radius: 8px; }
.fx-img-preview button:hover { background: var(--fx-line); color: var(--fx-ink); }

.fx-drop { position: absolute; inset: 12px; z-index: 20; background: color-mix(in srgb, var(--fx-bg) 92%, transparent); backdrop-filter: blur(20px); border: 2px dashed var(--fx-accent); border-radius: var(--fx-radius); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; pointer-events: none; color: var(--fx-ink); }
.fx-drop.is-shown { display: flex; }

/* ─────────────────────── Question Practice ─────────────────────── */
.fx-qp-layout { display: grid; grid-template-columns: 280px 360px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .fx-qp-layout { grid-template-columns: 260px 1fr; } .fx-qp-list { max-height: 280px; } }
@media (max-width: 800px) { .fx-qp-layout { grid-template-columns: 1fr; } }

.fx-qp-filters {
  position: sticky; top: 80px;
  padding: 22px;
  background: var(--fx-glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--fx-glass-stroke);
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow);
  display: flex; flex-direction: column; gap: 16px;
  color: var(--fx-ink);
}
.fx-qp-list-wrap {
  position: sticky; top: 80px;
  background: var(--fx-glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--fx-glass-stroke);
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow);
  overflow: hidden;
}
.fx-qp-list-header { padding: 14px 18px; border-bottom: 1px solid var(--fx-line); display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; color: var(--fx-ink-soft); background: color-mix(in srgb, var(--fx-card) 50%, transparent); }
.fx-qp-list { overflow-y: auto; max-height: calc(100vh - 200px); scroll-behavior: smooth; }
.fx-qp-list::-webkit-scrollbar { width: 6px; }
.fx-qp-list::-webkit-scrollbar-thumb { background: var(--fx-line-strong); border-radius: 999px; }
.fx-qp-list::-webkit-scrollbar-track { background: transparent; }
.fx-qp-item { padding: 14px 18px; border-bottom: 1px solid var(--fx-line); cursor: pointer; transition: all .25s var(--fx-ease); }
.fx-qp-item:last-child { border-bottom: 0; }
.fx-qp-item:hover { background: var(--fx-aurora-soft); }
.fx-qp-item.active { background: var(--fx-aurora-soft); border-left: 3px solid var(--fx-accent); padding-left: 15px; }
.fx-qp-item .qn { font-weight: 600; font-size: .92rem; color: var(--fx-ink); }
.fx-qp-item .meta { font-size: .78rem; color: var(--fx-ink-muted); margin-top: 4px; }
.fx-qp-item .meta-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.fx-tag { padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 600; text-transform: capitalize; letter-spacing: .02em; }
.fx-tag-easy { background: #d1fae5; color: #047857; }
.fx-tag-medium { background: #fef3c7; color: #92400e; }
.fx-tag-hard { background: #fee2e2; color: #b91c1c; }
.fx-tag-type { background: var(--fx-aurora-soft); color: var(--fx-accent); }
.fx-tag-bookmark { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .fx-tag-easy { background: rgba(16,185,129,.15); color: #6ee7b7; }
[data-theme="dark"] .fx-tag-medium { background: rgba(245,158,11,.15); color: #fcd34d; }
[data-theme="dark"] .fx-tag-hard { background: rgba(239,68,68,.15); color: #fca5a5; }
[data-theme="dark"] .fx-tag-bookmark { background: rgba(245,158,11,.15); color: #fcd34d; }

.fx-qp-viewer { display: flex; flex-direction: column; gap: 16px; min-height: 400px; }
.fx-qp-toolbar {
  position: sticky; top: 80px; z-index: 5;
  background: var(--fx-glass-strong);
  backdrop-filter: blur(22px);
  border: 1px solid var(--fx-glass-stroke);
  border-radius: var(--fx-radius);
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  box-shadow: var(--fx-shadow);
}
.fx-qp-toolbar .meta { display: flex; flex-direction: column; gap: 4px; }
.fx-qp-toolbar .title { font-weight: 700; font-size: 1.05rem; color: var(--fx-ink); }
.fx-qp-toolbar .sub { font-size: .78rem; color: var(--fx-ink-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.fx-qp-toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.fx-qp-body { padding: 28px; }
.fx-q-text {
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--fx-ink);
  /* pre-line collapses the stray multi-spaces PDF extraction leaves behind,
     while keeping intentional line breaks (question parts, MCQ rows). */
  white-space: pre-line;
  /* Clean, self-contained question card. */
  border: 1px solid var(--fx-glass-stroke, var(--fx-line));
  background: var(--fx-glass-strong, transparent);
  border-radius: 14px;
  padding: 20px 22px;
  letter-spacing: .003em;
}
.fx-q-image { max-width: 100%; border-radius: 14px; margin: 14px 0; border: 1px solid var(--fx-line); }

.fx-ms-reveal { max-height: 0; overflow: hidden; transition: max-height .6s var(--fx-ease), padding .6s var(--fx-ease), margin .6s var(--fx-ease); padding: 0 24px; margin: 0; background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(139,92,246,.04)); border-left: 4px solid #10b981; border-radius: 14px; color: var(--fx-ink); }
.fx-ms-reveal.is-shown { max-height: 2200px; padding: 22px 24px; margin: 20px 0 0; }
.fx-ms-reveal h4 { color: #047857; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
[data-theme="dark"] .fx-ms-reveal h4 { color: #6ee7b7; }
.fx-ms-reveal ul { list-style: none; padding: 0; }
.fx-ms-reveal li { padding: 6px 0; line-height: 1.65; border-bottom: 1px dashed rgba(16,185,129,.18); }
.fx-ms-reveal li:last-child { border-bottom: 0; }
.fx-ms-reveal .ms-code { background: #d1fae5; color: #047857; padding: 1px 6px; border-radius: 4px; font-size: .78rem; font-family: 'JetBrains Mono', monospace; margin-right: 4px; }
[data-theme="dark"] .fx-ms-reveal .ms-code { background: rgba(16,185,129,.15); color: #6ee7b7; }
.fx-ms-reveal .ms-accept { color: #047857; font-weight: 700; font-size: .78rem; }
[data-theme="dark"] .fx-ms-reveal .ms-accept { color: #6ee7b7; }
.fx-ms-reveal .ms-or { color: var(--fx-ink-muted); font-weight: 700; font-size: .75rem; padding: 0 4px; }

.fx-ai-fb { padding: 18px 22px; border-radius: 14px; line-height: 1.6; white-space: pre-wrap; animation: fx-msg-in .35s var(--fx-spring); }
.fx-ai-fb.thinking { background: var(--fx-aurora-soft); border: 1px solid color-mix(in srgb, var(--fx-accent) 25%, transparent); color: var(--fx-accent); display: flex; align-items: center; gap: 10px; }
.fx-ai-fb.correct { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.3); color: #047857; }
.fx-ai-fb.partial { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); color: #92400e; }
.fx-ai-fb.wrong { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: #b91c1c; }
[data-theme="dark"] .fx-ai-fb.correct { color: #6ee7b7; }
[data-theme="dark"] .fx-ai-fb.partial { color: #fcd34d; }
[data-theme="dark"] .fx-ai-fb.wrong { color: #fca5a5; }

.fx-self-check { display: none; padding: 16px 18px; background: color-mix(in srgb, var(--fx-card) 60%, transparent); border: 1px solid var(--fx-line); border-radius: 14px; }
.fx-self-check.is-shown { display: block; }
.fx-self-check h5 { font-size: .92rem; margin-bottom: 10px; font-weight: 600; color: var(--fx-ink); }
.fx-self-check-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-mark-btn { padding: 8px 14px; border-radius: 10px; font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .25s var(--fx-spring); }
.fx-mark-correct { background: #d1fae5; color: #047857; border: 1px solid #10b981; }
.fx-mark-correct:hover { background: #10b981; color: #fff; transform: translateY(-2px); }
.fx-mark-partial { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.fx-mark-partial:hover { background: #f59e0b; color: #fff; transform: translateY(-2px); }
.fx-mark-wrong { background: #fee2e2; color: #b91c1c; border: 1px solid #ef4444; }
.fx-mark-wrong:hover { background: #ef4444; color: #fff; transform: translateY(-2px); }

/* Bookmark — polished pill with animated star */
.bookmark-btn, .fx-btn-bookmark {
  padding: 8px 16px 8px 14px; border-radius: 999px;
  background: var(--fx-card);
  border: 1.5px solid var(--fx-line-strong);
  font-family: inherit; font-size: .82rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer;
  color: var(--fx-ink-soft);
  transition: all .3s var(--fx-spring);
  display: inline-flex; align-items: center; gap: 7px;
  line-height: 1;
  position: relative;
}
.bookmark-btn::before {
  content: '☆';
  font-size: 1.1rem;
  line-height: 1;
  display: inline-block;
  transition: transform .35s var(--fx-spring), color .25s;
  color: var(--fx-ink-muted);
}
.bookmark-btn:hover {
  border-color: #f59e0b;
  color: #92400e;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(245, 158, 11, .35);
}
.bookmark-btn:hover::before { transform: scale(1.2) rotate(12deg); color: #f59e0b; }
.bookmark-btn:active { transform: translateY(0) scale(.97); }
.bookmark-btn.on {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #f59e0b;
  color: #78350f;
  box-shadow: 0 6px 18px -6px rgba(245, 158, 11, .45);
}
.bookmark-btn.on::before { content: '★'; color: #d97706; animation: fx-bookmark-pop .55s var(--fx-spring); transform: none; }
.bookmark-btn.on:hover::before { transform: scale(1.15) rotate(-8deg); }
@keyframes fx-bookmark-pop {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  50%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
[data-theme="dark"] .bookmark-btn { background: var(--fx-card); }
[data-theme="dark"] .bookmark-btn::before { color: var(--fx-ink-muted); }
[data-theme="dark"] .bookmark-btn:hover { color: #fcd34d; }
[data-theme="dark"] .bookmark-btn:hover::before { color: #fcd34d; }
[data-theme="dark"] .bookmark-btn.on { background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.1)); color: #fde68a; border-color: rgba(245,158,11,.5); }
[data-theme="dark"] .bookmark-btn.on::before { color: #fbbf24; }

/* Mark scheme lightbox modal — for the "view full MS page" image */
.fx-modal-bd { position: fixed; inset: 0; z-index: 220; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; }
.fx-modal-bd.is-open { display: flex; animation: fx-fade-in .25s ease; }
.fx-modal { background: var(--fx-card); border: 1px solid var(--fx-glass-stroke); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow-lg); max-width: 920px; max-height: 90vh; width: 100%; display: flex; flex-direction: column; overflow: hidden; animation: fx-modal-in .35s var(--fx-spring); }
.fx-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--fx-line); }
.fx-modal-head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.fx-modal-body { overflow-y: auto; padding: 20px 22px; }
.fx-modal-body img { max-width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--fx-line); }
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-modal-in { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Page jump dropdown — styled select */
.fx-page-jump { display: inline-flex; align-items: center; gap: 0; background: var(--fx-card); border: 1px solid var(--fx-line-strong); border-radius: 999px; padding: 3px; position: relative; }
.fx-page-jump button.nav { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; color: var(--fx-ink-soft); font-size: 1rem; transition: all .25s var(--fx-spring); display: inline-flex; align-items: center; justify-content: center; }
.fx-page-jump button.nav:hover:not(:disabled) { background: var(--fx-aurora-soft); color: var(--fx-accent); }
.fx-page-jump button.nav:disabled { opacity: .35; cursor: not-allowed; }
.fx-page-jump select { border: 0; background: transparent; padding: 6px 32px 6px 14px; font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--fx-ink); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fx-ink-muted) 50%), linear-gradient(135deg, var(--fx-ink-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; min-width: 140px; text-align: center; }
.fx-page-jump select:focus { outline: none; }

/* Paper viewer specifics */
.fx-pv-toolbar { position: sticky; top: 80px; z-index: 30; background: var(--fx-glass-strong); backdrop-filter: blur(22px); border: 1px solid var(--fx-glass-stroke); border-radius: var(--fx-radius); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; box-shadow: var(--fx-shadow); margin-bottom: 24px; }
.fx-pv-title { font-weight: 700; font-size: 1.02rem; color: var(--fx-ink); }
.fx-pv-sub { font-size: .78rem; color: var(--fx-ink-muted); margin-top: 2px; }
.fx-pv-page-wrap { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.fx-pv-page-img-card { background: var(--fx-glass-strong); backdrop-filter: blur(18px); border: 1px solid var(--fx-glass-stroke); border-radius: var(--fx-radius); overflow: hidden; box-shadow: var(--fx-shadow); }
.fx-pv-page-img-card img { width: 100%; display: block; }
.fx-pv-page-img-card .cap { padding: 12px 18px; border-top: 1px solid var(--fx-line); font-size: .82rem; color: var(--fx-ink-muted); background: color-mix(in srgb, var(--fx-card) 50%, transparent); }
.fx-pv-q-card { background: var(--fx-glass-strong); backdrop-filter: blur(18px); border: 1px solid var(--fx-glass-stroke); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s; }
.fx-pv-q-card:focus-within { border-color: color-mix(in srgb, var(--fx-accent) 30%, transparent); }
.fx-pv-q-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.fx-pv-q-num { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--fx-ink); }
.fx-pv-q-marks { font-size: .78rem; color: var(--fx-ink-muted); padding: 3px 10px; background: var(--fx-aurora-soft); border-radius: 999px; font-weight: 600; }
.fx-pv-q-text { font-size: 1rem; line-height: 1.7; color: var(--fx-ink); white-space: pre-line; letter-spacing: .003em; }
.fx-pv-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px solid var(--fx-line); }
.fx-pv-actions .grow { flex: 1; }

/* Per-question MS reveal (same component reused) */
.fx-pv-ms { max-height: 0; overflow: hidden; transition: max-height .55s var(--fx-ease), padding .55s var(--fx-ease), margin .55s var(--fx-ease); padding: 0 22px; margin: 0; background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(139,92,246,.04)); border-left: 4px solid #10b981; border-radius: 14px; color: var(--fx-ink); }
.fx-pv-ms.is-shown { max-height: 1800px; padding: 18px 22px; margin: 4px 0 0; }
.fx-pv-ms h4 { color: #047857; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
[data-theme="dark"] .fx-pv-ms h4 { color: #6ee7b7; }
.fx-pv-ms ul { list-style: none; padding: 0; }
.fx-pv-ms li { padding: 5px 0; line-height: 1.6; border-bottom: 1px dashed rgba(16,185,129,.16); font-size: .9rem; }
.fx-pv-ms li:last-child { border-bottom: 0; }
.fx-pv-ms .ms-code { background: #d1fae5; color: #047857; padding: 1px 6px; border-radius: 4px; font-size: .76rem; font-family: 'JetBrains Mono', monospace; margin-right: 4px; }
[data-theme="dark"] .fx-pv-ms .ms-code { background: rgba(16,185,129,.15); color: #6ee7b7; }
.fx-pv-ms-image-btn { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(16,185,129,.16); font-size: .78rem; color: var(--fx-ink-muted); }
.fx-pv-ms-image-btn button { background: transparent; border: 0; color: var(--fx-accent); cursor: pointer; font-family: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; font-size: .82rem; padding: 0; }
.fx-pv-ms-image-btn button:hover { color: var(--fx-accent-2); }

/* Past papers list rows */
.fx-pp-grid { display: flex; flex-direction: column; gap: 10px; }
.fx-pp-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: var(--fx-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--fx-glass-stroke);
  border-radius: 16px;
  text-decoration: none; color: var(--fx-ink);
  transition: transform .35s var(--fx-spring), box-shadow .35s var(--fx-ease), border-color .25s;
  position: relative; overflow: hidden;
}
.fx-pp-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fx-aurora); opacity: 0; transition: opacity .3s, transform .4s var(--fx-spring); transform: scaleY(0); transform-origin: top; }
.fx-pp-row:hover { transform: translateY(-3px); box-shadow: var(--fx-shadow-lg); border-color: color-mix(in srgb, var(--fx-accent) 30%, transparent); }
.fx-pp-row:hover::before { opacity: 1; transform: scaleY(1); }
.fx-pp-row .title { font-weight: 600; font-size: 1rem; color: var(--fx-ink); }
.fx-pp-row .sub { font-size: .82rem; color: var(--fx-ink-muted); margin-top: 4px; }
.fx-pp-cta { background: var(--fx-aurora); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600; box-shadow: 0 4px 14px -4px rgba(99,102,241,.55); transition: transform .3s var(--fx-spring); }
.fx-pp-row:hover .fx-pp-cta { transform: translateX(2px); }

/* Subject cards */
.fx-subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fx-subj-card { padding: 22px; background: var(--fx-glass); backdrop-filter: blur(14px); border: 1px solid var(--fx-glass-stroke); border-radius: 18px; transition: all .4s var(--fx-spring); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; color: var(--fx-ink); text-decoration: none; }
.fx-subj-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fx-aurora); opacity: .8; }
.fx-subj-card:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-lg); border-color: color-mix(in srgb, var(--fx-accent) 30%, transparent); }
.fx-subj-card .ico { font-size: 1.75rem; line-height: 1; }
.fx-subj-card h3 { font-size: 1.1rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.fx-subj-card .code { font-size: .72rem; color: var(--fx-ink-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.fx-subj-card .stats { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); }
.fx-subj-card .stats .stat { flex: 1; }
.fx-subj-card .stats .v { font-family: 'Inter Tight', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--fx-ink); }
.fx-subj-card .stats .l { font-size: .7rem; color: var(--fx-ink-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: 4px; }
.fx-subj-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.fx-subj-card .actions a { flex: 1; min-width: 80px; text-align: center; padding: 8px 10px; font-size: .82rem; font-weight: 500; border-radius: 10px; background: var(--fx-card); color: var(--fx-ink); transition: all .25s var(--fx-spring); border: 1px solid var(--fx-line); text-decoration: none; }
.fx-subj-card .actions a:hover { background: var(--fx-aurora); color: #fff; border-color: transparent; }
.fx-subj-card.locked { opacity: .55; }

/* Progress page tiles */
.fx-stat-tile { padding: 22px; background: var(--fx-glass-strong); backdrop-filter: blur(20px); border: 1px solid var(--fx-glass-stroke); border-radius: 18px; box-shadow: var(--fx-shadow); position: relative; overflow: hidden; transition: transform .4s var(--fx-spring), box-shadow .4s var(--fx-ease); }
.fx-stat-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fx-aurora); }
.fx-stat-tile:hover { transform: translateY(-4px); box-shadow: var(--fx-shadow-lg); }
.fx-stat-tile .label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fx-ink-muted); }
.fx-stat-tile .value { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 2.4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 12px; background: var(--fx-aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.fx-topic-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--fx-glass); border: 1px solid var(--fx-line); border-radius: 14px; transition: all .3s var(--fx-ease); color: var(--fx-ink); }
.fx-topic-row:hover { background: var(--fx-card); border-color: color-mix(in srgb, var(--fx-accent) 25%, transparent); }
.fx-topic-row .info { flex: 1; }
.fx-topic-row .name { font-weight: 600; font-size: .94rem; color: var(--fx-ink); }
.fx-topic-row .sub { font-size: .78rem; color: var(--fx-ink-muted); margin-top: 2px; }
.fx-progress-track { width: 140px; height: 8px; background: var(--fx-line-strong); border-radius: 999px; overflow: hidden; }
.fx-progress-fill { height: 100%; background: var(--fx-aurora); border-radius: 999px; transition: width 1.2s var(--fx-ease); }

/* Spinner / skeleton / empty */
.fx-spinner { width: 22px; height: 22px; border: 2.5px solid color-mix(in srgb, var(--fx-accent) 18%, transparent); border-top-color: var(--fx-accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
.fx-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; color: var(--fx-ink-muted); font-size: .9rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.fx-empty { text-align: center; padding: 48px 24px; color: var(--fx-ink-muted); }
.fx-empty .emoji { font-size: 2.4rem; margin-bottom: 12px; }
.fx-empty p { font-size: .95rem; }

/* ─────────────────────── Settings drawer ─────────────────────── */
.fx-drawer-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s var(--fx-ease); }
.fx-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.fx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 201;
  background: var(--fx-glass-strong); backdrop-filter: blur(28px);
  border-left: 1px solid var(--fx-glass-stroke);
  box-shadow: var(--fx-shadow-lg);
  transform: translateX(100%); transition: transform .4s var(--fx-spring);
  display: flex; flex-direction: column;
  color: var(--fx-ink);
}
.fx-drawer.is-open { transform: translateX(0); }
.fx-drawer-head { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--fx-line); }
.fx-drawer-head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.fx-drawer-close { width: 36px; height: 36px; border-radius: 10px; background: var(--fx-card); border: 1px solid var(--fx-line-strong); cursor: pointer; font-size: 1rem; color: var(--fx-ink); }
.fx-drawer-close:hover { background: var(--fx-aurora); color: #fff; border-color: transparent; }
.fx-drawer-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 28px; }
.fx-drawer-section h3 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--fx-ink-muted); margin-bottom: 14px; }
.fx-drawer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--fx-card); border: 1px solid var(--fx-line); border-radius: 12px; margin-bottom: 8px; }
.fx-drawer-row .lbl { font-size: .92rem; font-weight: 500; }
.fx-drawer-row .desc { font-size: .78rem; color: var(--fx-ink-muted); margin-top: 2px; }
/* Keep the action button at its natural width so its label never clips
   (e.g. "View all plans"); let the text column give way instead. */
.fx-drawer-row > div:first-child { min-width: 0; }
.fx-drawer-row > .fx-btn,
.fx-drawer-row > a.fx-btn,
.fx-drawer-row > .fx-email-link { flex-shrink: 0; }

/* Theme toggle segmented */
.fx-theme-segment { display: inline-flex; padding: 3px; background: var(--fx-card); border: 1px solid var(--fx-line-strong); border-radius: 999px; }
.fx-theme-segment button { padding: 6px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--fx-ink-muted); font-family: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; transition: all .25s var(--fx-spring); }
.fx-theme-segment button.active { background: var(--fx-aurora); color: #fff; box-shadow: 0 4px 12px -4px rgba(99,102,241,.5); }

/* ─────────────────────── Footer ─────────────────────── */
.fx-footer {
  position: relative;
  margin-top: 96px; padding: 64px 24px 48px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--fx-bg-2) 60%, transparent));
  border-top: 1px solid var(--fx-line);
  overflow: hidden;
}
.fx-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fx-accent), transparent); }
.fx-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .fx-footer-inner { grid-template-columns: 1fr 1fr; } }
.fx-footer h4 { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fx-ink-muted); margin-bottom: 14px; }
.fx-footer a { display: block; color: var(--fx-ink-soft); text-decoration: none; padding: 4px 0; font-size: .92rem; transition: color .25s, transform .25s; }
.fx-footer a:hover { color: var(--fx-accent); transform: translateX(3px); }
.fx-footer .wordmark { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 16px; background: var(--fx-aurora); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fx-aurora-shift 12s ease infinite; }
.fx-footer .tagline { color: var(--fx-ink-muted); font-size: .92rem; max-width: 32ch; line-height: 1.55; }
.fx-footer .bottom { max-width: 1280px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--fx-line); display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--fx-ink-muted); flex-wrap: wrap; gap: 12px; }

/* Email — classic blue underlined hyperlink */
.fx-email-link { color: var(--fx-link-blue) !important; text-decoration: underline !important; text-underline-offset: 2px; font-weight: 500; transform: none !important; }
.fx-email-link:hover { color: var(--fx-link-blue) !important; opacity: .85; }
[data-theme="dark"] .fx-email-link { color: #8ab4f8 !important; }

/* Toasts */
.toast { background: var(--fx-glass-strong); backdrop-filter: blur(20px); border: 1px solid var(--fx-glass-stroke); border-left: 3px solid var(--fx-accent); border-radius: 14px; padding: 14px 18px; font-weight: 500; box-shadow: var(--fx-shadow-lg); position: fixed; bottom: 24px; right: 24px; z-index: 999; animation: fx-toast-in .4s var(--fx-spring); max-width: 340px; color: var(--fx-ink); }
.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }
@keyframes fx-toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ─────────────────────── JARVIS Voice ─────────────────────── */
/* Mic button (idle uses base .fx-btn styles; recording pulses) */
.fx-mic-btn { position: relative; overflow: visible; }
.fx-mic-btn.is-recording {
  background: var(--fx-aurora) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 0 rgba(99, 102, 241, .55), 0 0 28px -4px rgba(236, 72, 153, .4);
  animation: fx-mic-pulse 1.4s ease-out infinite;
}
.fx-mic-btn.is-recording svg, .fx-mic-btn.is-recording span { color: #fff !important; }
@keyframes fx-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, .55), 0 0 0 0 rgba(236, 72, 153, .45); }
  70%  { box-shadow: 0 0 0 18px rgba(99, 102, 241, 0), 0 0 0 26px rgba(236, 72, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 0 0 0 rgba(236, 72, 153, 0); }
}

/* JARVIS listening overlay */
.fx-jarvis-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: radial-gradient(circle at 50% 45%, rgba(15, 23, 42, .88), rgba(2, 6, 23, .96));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 28px;
  color: #fff; padding: 24px;
  animation: fx-fade-in .35s var(--fx-ease);
  cursor: pointer;
}
.fx-jarvis-overlay.is-active { display: flex; }
.fx-jarvis-overlay::before {
  /* Subtle scan-grid backdrop */
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(129, 140, 248, .06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(129, 140, 248, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  opacity: .6;
}
.fx-jarvis-rings {
  position: relative; width: 260px; height: 260px;
  display: grid; place-items: center; z-index: 1;
}
.fx-jarvis-rings > span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(129, 140, 248, .55);
  pointer-events: none;
}
.fx-jarvis-rings > span:nth-child(1) { animation: fx-jarvis-ring 2.6s ease-out infinite; }
.fx-jarvis-rings > span:nth-child(2) { animation: fx-jarvis-ring 2.6s ease-out infinite .65s; }
.fx-jarvis-rings > span:nth-child(3) { animation: fx-jarvis-ring 2.6s ease-out infinite 1.3s; }
.fx-jarvis-rings > span:nth-child(4) { animation: fx-jarvis-ring 2.6s ease-out infinite 1.95s; }
@keyframes fx-jarvis-ring {
  0%   { transform: scale(.35); opacity: 1; border-color: rgba(129, 140, 248, .9); }
  100% { transform: scale(1.4); opacity: 0; border-color: rgba(244, 114, 182, .3); }
}
.fx-jarvis-core {
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--fx-aurora);
  background-size: 200% 200%;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 0 80px 8px rgba(139, 92, 246, .5), 0 0 140px 20px rgba(236, 72, 153, .25), inset 0 0 24px rgba(255,255,255,.12);
  animation: fx-jarvis-breathe 2.4s ease-in-out infinite, fx-aurora-shift 5s ease infinite;
  position: relative; z-index: 2;
}
@keyframes fx-jarvis-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.fx-jarvis-status {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  display: inline-flex; align-items: center; gap: 10px;
  position: relative; z-index: 1;
}
.fx-jarvis-status::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #f472b6; box-shadow: 0 0 14px 2px #f472b6;
  animation: fx-jarvis-blink 1s ease-in-out infinite;
}
@keyframes fx-jarvis-blink { 50% { opacity: .25; transform: scale(.7); } }
.fx-jarvis-transcript {
  max-width: 640px; min-height: 40px;
  font-size: 1.35rem; line-height: 1.4; text-align: center;
  color: #fff;
  font-weight: 500;
  padding: 0 24px;
  position: relative; z-index: 1;
  letter-spacing: -.01em;
}
.fx-jarvis-transcript:empty::before {
  content: '…'; opacity: .35;
}
.fx-jarvis-hint {
  font-size: .78rem; color: rgba(255, 255, 255, .5);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  position: relative; z-index: 1;
}

/* Bot message audio playback */
.fx-msg { position: relative; }
.fx-msg.bot { padding-right: 44px; } /* leave room for play button */
.fx-msg-play {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--fx-line-strong);
  background: var(--fx-card);
  color: var(--fx-ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s var(--fx-spring);
  opacity: .55;
  padding: 0;
}
.fx-msg:hover .fx-msg-play { opacity: 1; }
.fx-msg-play:hover { background: var(--fx-aurora); color: #fff; border-color: transparent; transform: scale(1.1); opacity: 1; }
.fx-msg-play.is-playing {
  opacity: 1;
  background: var(--fx-aurora); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 0 rgba(99, 102, 241, .55);
  animation: fx-mic-pulse 1.5s ease-out infinite;
}
.fx-msg.is-speaking {
  border-color: color-mix(in srgb, var(--fx-accent) 35%, transparent);
  box-shadow: 0 0 28px -4px rgba(99, 102, 241, .35), 0 8px 22px -10px rgba(139, 92, 246, .3);
}

/* AI feedback (question practice, virtual lab, plan) gets a play button too */
.fx-ai-fb { position: relative; padding-right: 52px; }
.fx-ai-fb .fx-msg-play { right: 12px; top: 12px; }

/* Toggle switch (used in voice settings) */
.fx-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.fx-toggle input { opacity: 0; width: 0; height: 0; }
.fx-toggle span {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--fx-line-strong); transition: background .25s var(--fx-ease);
}
.fx-toggle span::before {
  content: ''; position: absolute;
  left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .3s var(--fx-spring);
}
.fx-toggle input:checked + span { background: var(--fx-aurora); background-size: 200% 200%; animation: fx-aurora-shift 6s ease infinite; }
.fx-toggle input:checked + span::before { transform: translateX(18px); }

/* AI ambient pulse — small dot in headers / cards to convey "system is alive" */
.fx-ai-pulse { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-ink-muted); }
.fx-ai-pulse::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px 2px rgba(16,185,129,.45); animation: fx-jarvis-blink 2.2s ease-in-out infinite; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .fx-blob, .fx-jarvis-rings > span { display: none; }
}

/* ── Formatted question text: MCQ options, stems, answer lines, sci notation ──
   container-agnostic so it works in both practice (.fx-q-text) and the
   past-paper viewer (.fx-pv-q-text). */
.q-stem{ margin-bottom:14px; }
ol.q-mcq{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
ol.q-mcq li{ display:flex; align-items:flex-start; gap:12px; padding:10px 14px; border:1px solid var(--fx-line, rgba(0,0,0,.08)); border-radius:10px; background:var(--fx-bg-2, #f5f5f8); transition:border-color .15s ease, background .15s ease; }
ol.q-mcq li:hover{ border-color:var(--fx-accent, #4f46e5); }
ol.q-mcq li .q-mcq-letter{ flex:none; width:26px; height:26px; border-radius:7px; background:var(--fx-aurora-soft, #eef2ff); color:var(--fx-accent, #4f46e5); font-weight:700; font-family:'JetBrains Mono', ui-monospace, monospace; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }
ol.q-mcq li .q-mcq-text{ flex:1; line-height:1.55; padding-top:2px; }
.q-answer-line{ display:inline-block; min-width:110px; border-bottom:1.5px dotted var(--fx-ink-muted, #9ca3af); margin:0 2px; }
.fx-q-text sub, .fx-pv-q-text sub, .quiz-question sub{ font-size:.72em; line-height:0; vertical-align:-.28em; }
.fx-q-text sup, .fx-pv-q-text sup, .quiz-question sup{ font-size:.72em; line-height:0; vertical-align:.42em; }

/* Table MCQs (rendered from " | " column-separated text). */
.q-table-wrap{ overflow-x:auto; margin:14px 0 4px; -webkit-overflow-scrolling:touch; }
table.q-table{ border-collapse:collapse; width:100%; font-size:.92rem; }
table.q-table th, table.q-table td{ border:1px solid var(--fx-line, rgba(0,0,0,.14)); padding:8px 12px; text-align:left; vertical-align:top; line-height:1.45; color:var(--fx-ink); }
table.q-table thead th{ background:var(--fx-aurora-soft, #eef2ff); font-weight:700; font-size:.85rem; }
table.q-table .q-tbl-letter{ font-weight:700; font-family:'JetBrains Mono', ui-monospace, monospace; color:var(--fx-accent, #4f46e5); text-align:center; width:34px; background:var(--fx-aurora-soft, #eef2ff); }

/* ── AI mark feedback card (formatMarkFeedback) ── */
.fx-mark { --mk: #f59e0b; display: flex; flex-direction: column; gap: 16px; }
.fx-mark-good { --mk: #10b981; }
.fx-mark-mid  { --mk: #f59e0b; }
.fx-mark-low  { --mk: #ef4444; }
.fx-mark-head { display: flex; align-items: center; gap: 14px; }
.fx-mark-score { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 10px 6px; border-radius: 14px; line-height: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.9rem;
  color: var(--mk); background: color-mix(in srgb, var(--mk) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--mk) 30%, transparent); }
.fx-mark-score span { font-size: .72rem; font-weight: 700; opacity: .7; margin-top: 4px; }
.fx-mark-verdict { font-size: .98rem; font-weight: 600; line-height: 1.45; color: var(--fx-ink); }
.fx-mark-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--mk) 14%, transparent); overflow: hidden; }
.fx-mark-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--mk); transition: width .5s var(--fx-spring, ease); }
.fx-mark-sec h5 { display: flex; align-items: baseline; gap: 6px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.fx-mark-sec h5 small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fx-ink-muted); font-size: .92em; }
.fx-mark-sec.earned h5 { color: #059669; }
.fx-mark-sec.missed h5 { color: #b45309; }
.fx-mark-sec.model  h5 { color: var(--fx-accent, #4f46e5); }
[data-theme="dark"] .fx-mark-sec.earned h5 { color: #34d399; }
[data-theme="dark"] .fx-mark-sec.missed h5 { color: #fbbf24; }
.fx-mark-sec > ul { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fx-mark-sec > ul > li { position: relative; padding-left: 22px; line-height: 1.55; }
.fx-mark-sec.earned > ul > li::before { content: '✓'; position: absolute; left: 0; color: #10b981; font-weight: 800; }
.fx-mark-sec.missed > ul > li::before { content: '○'; position: absolute; left: 0; color: var(--mk); font-weight: 800; }
.fx-mark-sec li q, .fx-mark-sec li b, .fx-mark .pt q { font-weight: 700; }
/* Annotated model answer — one row per marking point */
.fx-mark-model { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid color-mix(in srgb, var(--fx-accent, #4f46e5) 30%, transparent); padding-left: 2px; }
.fx-mark-model li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--fx-bg-2, #f5f5f8); border: 1px solid var(--fx-line, rgba(0,0,0,.06)); }
.fx-mark-model .mk { flex: none; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: #10b981; color: #fff; font-size: .8rem; font-weight: 800; margin-top: 1px; }
.fx-mark-model .pt { flex: 1; line-height: 1.55; }
.fx-mark-model .mn { flex: none; align-self: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; font-weight: 700;
  color: #059669; background: rgba(16,185,129,.12); padding: 2px 7px; border-radius: 99px; }
[data-theme="dark"] .fx-mark-model .mn { color: #34d399; }
/* highlighted IGCSE mark-scheme keywords inside feedback */
.fx-kw { font-weight: 600; color: var(--fx-accent, #4f46e5); background: color-mix(in srgb, var(--fx-accent, #4f46e5) 10%, transparent); padding: 0 4px; border-radius: 5px; white-space: nowrap; }
[data-theme="dark"] .fx-kw { color: #a5b4fc; }

/* ── Click-to-zoom images + lightbox ── */
.fx-q-image, .fx-zoomable, .fx-q-text img, .fx-pv-q-card img, .fx-pv-page-img-card img { cursor: zoom-in; }
body.fx-zoom-lock { overflow: hidden; }
.fx-zoom-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(8,8,12,.93); display: none; align-items: center; justify-content: center; overscroll-behavior: contain; }
.fx-zoom-overlay.is-open { display: flex; }
.fx-zoom-img { max-width: 94vw; max-height: 88vh; transform-origin: center center; transition: transform .12s ease; user-select: none; touch-action: none; }
.fx-zoom-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px; z-index: 2001; }
.fx-zoom-bar button { border: 0; background: rgba(255,255,255,.14); color: #fff; height: 34px; min-width: 34px; padding: 0 11px; border-radius: 999px; font-size: 1rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.fx-zoom-bar button:hover { background: rgba(255,255,255,.28); }
.fx-zoom-bar button[data-z="reset"], .fx-zoom-bar button[data-z="close"] { font-size: .82rem; font-weight: 600; }
.fx-zoom-pct { color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8rem; min-width: 46px; text-align: center; }

/* ── Independent scroll panes (practice) ──
   Filters + question list each scroll on their own and stay pinned, while the
   QUESTION VIEWER flows in the normal document so the whole page scrolls it
   (its toolbar is sticky, so the action buttons stay visible). Constraining the
   viewer to its own little overflow box made long questions impossible to read. */
@media (min-width: 801px) {
  .fx-qp-filters { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; scroll-behavior: smooth; }
  .fx-qp-list-wrap { position: sticky; top: 84px; }
}
.fx-qp-filters { scrollbar-width: thin; scrollbar-color: var(--fx-line-strong) transparent; }
.fx-qp-filters::-webkit-scrollbar { width: 7px; }
.fx-qp-filters::-webkit-scrollbar-thumb { background: var(--fx-line-strong); border-radius: 999px; }
.fx-qp-filters::-webkit-scrollbar-track { background: transparent; }

/* "Find questions" — primary filter action, full-width & prominent */
#apply-filters { width: 100%; padding: 15px 24px; font-size: 1.02rem; font-weight: 700; margin-top: 4px; }

/* ── Cookie / storage consent banner ── */
.fx-cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 14px;
  background: var(--fx-glass-strong, rgba(20,20,28,.92));
  border: 1px solid var(--fx-glass-stroke, rgba(255,255,255,.14));
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); backdrop-filter: blur(20px);
  color: var(--fx-ink, #fff); font-size: .9rem; line-height: 1.5;
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease;
}
.fx-cookie-bar.show { opacity: 1; transform: translateY(0); }
.fx-cookie-text { flex: 1 1 320px; }
.fx-cookie-bar a { color: var(--fx-accent, #818cf8); text-decoration: underline; }
.fx-cookie-ok {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 999px;
  padding: 9px 22px; font-family: inherit; font-size: .88rem; font-weight: 700; color: #fff;
  background: var(--fx-aurora, linear-gradient(135deg,#6366f1,#a855f7));
  box-shadow: 0 6px 18px -6px rgba(99,102,241,.6); transition: transform .2s ease;
}
.fx-cookie-ok:hover { transform: translateY(-1px); }
@media (max-width: 520px) { .fx-cookie-bar { flex-direction: column; align-items: stretch; text-align: left; } .fx-cookie-ok { width: 100%; } }

/* ── Subject "Coming soon" (empty subjects, pre-content) ── */
.fx-subj-card.locked { opacity: .72; }
.fx-subj-card.locked::before { opacity: .3; filter: grayscale(.6); }
.fx-subj-card.locked:hover { transform: none; box-shadow: none; border-color: var(--fx-glass-stroke); }
.fx-subj-soon {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 14px -4px rgba(217,119,6,.65);
}
.fx-subj-soon-note { font-size: .82rem; color: var(--fx-ink-muted); font-style: italic; }

/* ── Dashboard tool plan badges (which tier each tool needs) ── */
.fx-feature-plan {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; line-height: 1.5;
}
.fx-feature-plan.plan-free { background: color-mix(in srgb,#10b981 16%,transparent); color: #047857; border: 1px solid color-mix(in srgb,#10b981 38%,transparent); }
.fx-feature-plan.plan-plus { background: color-mix(in srgb,#6366f1 16%,transparent); color: #4f46e5; border: 1px solid color-mix(in srgb,#6366f1 38%,transparent); }
.fx-feature-plan.plan-pro  { background: color-mix(in srgb,#d97706 16%,transparent); color: #b45309; border: 1px solid color-mix(in srgb,#d97706 40%,transparent); }
[data-theme="dark"] .fx-feature-plan.plan-free { color: #6ee7b7; }
[data-theme="dark"] .fx-feature-plan.plan-plus { color: #a5b4fc; }
[data-theme="dark"] .fx-feature-plan.plan-pro  { color: #fcd34d; }

/* ── Phone-only polish (≤640px). Desktop/tablet untouched. ── */
@media (max-width: 640px) {
  .fx-main { padding: 18px 14px 64px; }
  .fx-hero { padding: 24px 0 20px; margin-bottom: 26px; }
  .fx-hero-grid { gap: 26px; }
  .fx-h1 { font-size: clamp(1.7rem, 8.5vw, 2.25rem); }
  .fx-lead { font-size: .96rem; }
  .fx-hero-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .fx-hero-stat { padding: 12px 14px; }
  .fx-hero-stat .v { font-size: 1.45rem; }
  /* Hero CTAs: full-width & stacked = easy thumb targets */
  .fx-hero .fx-btn { flex: 1 1 100%; justify-content: center; }
  .fx-feature-grid { gap: 12px; }
  .fx-feature { padding: 18px; }
  .fx-card { border-radius: 16px; }
  /* Plan badge sits inline-ish so it never overlaps the title on narrow cards */
  .fx-feature-plan { top: 12px; right: 12px; }
}

/* ---------- Glass readability fallback (mobile / Safari / iOS) ----------
   The frosted panels rely on `backdrop-filter: blur`. Most rules are unprefixed,
   so on iPhone/iPad Safari the blur isn't applied and the translucent panels
   show the animated background through them — questions look "see-through" and
   the text is hard to read. Make the glass surfaces SOLID (resolving to the
   theme's card colour, so light/dark both work) whenever blur isn't available,
   and on phones generally, so the mobile UI is as clean as desktop. */
@supports not (backdrop-filter: blur(8px)) {
  :root, [data-theme="dark"] {
    --fx-glass: var(--fx-card);
    --fx-glass-strong: var(--fx-card);
  }
}
@media (max-width: 768px) {
  :root, [data-theme="dark"] {
    --fx-glass: var(--fx-card);
    --fx-glass-strong: var(--fx-card);
  }
}