:root {
  color-scheme: light;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;

  /* Color System — references design-tokens.css primitives */
  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-light: rgba(37, 99, 235, 0.08);
  --primary-tonal: var(--blue-50);

  --success: var(--color-success);
  --success-hover: var(--green-700);
  --success-light: var(--green-100);
  --success-text: var(--green-800);

  --danger: var(--color-danger);
  --danger-hover: var(--red-700);
  --danger-light: var(--red-100);
  --danger-text: var(--red-800);

  --warning: var(--color-warning);
  --warning-bg: linear-gradient(135deg, var(--gold-50) 0%, var(--gold-100) 100%);
  --warning-text: var(--gold-800);

  /* --bg-main, --text-muted, --border-light, --shadow-sm, --shadow-md and
     --transition-base are defined in design-tokens.css. They were re-declared here and,
     because this file loads second, these copies silently won — which is how --shadow-sm
     ended up as Google's Material elevation (rgba(60,64,67,…)) and --transition-base as
     an overshoot bounce applied to `all`. Deleted so design-tokens.css is the single
     source. Only genuinely app-specific tokens remain below. */
  --bg-card: #ffffff;
  --bg-input: var(--gray-100);

  --text-main: var(--gray-900);

  /* Elevation — app-local aliases onto the three tokens in design-tokens.css rather than
     four more independent shadow definitions. */
  --shadow-premium: var(--shadow-lg);

  /* Radius scale. Eleven distinct radii rendered on the practice page — 4, 8, 14, 16, 22,
     30, 32, 50%, 500px, 999px — with three spellings of "pill" and pairs (14/16, 30/32)
     nobody can tell apart. Collapsed to four steps plus a pill, so a chip's softness and
     a card's are related rather than independent decisions. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Card-specific — aligned to the scale above (were 22px / 18px). */
  --r-card: var(--radius-lg);
  --r-inner: var(--radius-md);
  --ease-smooth: cubic-bezier(0.2, 0.9, 0.2, 1);
  --sh-1: var(--shadow-md);
  --sh-2: var(--shadow-lg);

  /* Was `all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)`: a 1.56 overshoot bounce applied to
     every animatable property. Two problems, both from `all`. The overshoot made twelve
     elements spring past their resting position on any colour or size change — toy-like
     next to exam-preparation content, and reached by accident rather than chosen. And
     `all` includes `outline-width`, so focus rings faded in over 300ms; a keyboard user
     saw no indicator at the moment they needed one. Naming the properties fixes both. */
  --transition-base: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.25s ease-out;
  --transition-fast: color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* ─────────────────────────────────────────────────────────────────────────
   Form control reset

   Browsers do NOT inherit the page font into form controls — the UA stylesheet
   applies the system font instead. Any rule that styles a control's padding,
   colour, weight and size but omits `font-family` therefore ships in the OS
   default (Arial on Windows Chrome). Measured before this reset: 9 of 18 visible
   controls on the practice page, including the three primary tabs — Learning
   Center / Daily Review / Entertainment Hub — plus "Help me choose a mode" and
   "Back to Dashboard". The same gap left two vocabulary-panel buttons wearing the
   UA `2px outset` 3D border.

   This generalises two choices already made in this codebase: `.crm-nav-item`
   declares `font-family: inherit`, and `.whats-this-link` strips the UA button
   chrome with an explanatory comment. Loaded by index.html and crm-admin.html, so
   one rule covers both surfaces.
   ───────────────────────────────────────────────────────────────────────── */
button,
input,
select,
textarea {
  font: inherit;
  /* `font: inherit` also pulls in the body's 1.55 leading, which would inflate every
     button's height. Controls size from their own padding, so keep them tight. */
  line-height: normal;
  color: inherit;
}

button {
  background: none;
  border: 0;
}

/* One visible focus ring for everything that takes focus. Individual components may
   still override it, but nothing falls through to "no indicator at all" — which is what
   the three primary panel tabs and the header account button did. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Premium Animations */
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pulse-soft {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(26, 115, 232, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0);
  }
}

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-main);
  /* Leading computed to `normal` (~1.2) on 11 of 20 text blocks — tight enough that
     descriptive copy visually merges. The blocks that did set leading already used 1.6,
     so the intent existed; it just was not the default. Headings and controls opt back
     out below so this does not inflate component heights. */
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

[hidden] {
  display: none !important;
}

/* ============================================
   App Preloader
   ============================================ */
.tutorial-action-text {
  font-weight: 700;
  color: #fbbf24;
  /* Amber-400 for high contrast on dark background */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ground.
   The splash used to be a pink/lilac/blue pastel wash with #1a1a1a slogan text on
   top -- a gradient that shares no colour with the app it introduces. It now opens
   on brand navy (#0B1120/#121826) lit by two slow aurora blobs in the brand
   accents, so the first frame of the product already reads as BEL. */
.app-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0b1120;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Always on top */
  transition: opacity 0.4s ease, visibility 0.4s;
  overflow: hidden;
}

.app-preloader.preloader-2d {
  flex-direction: column;
  background:
    radial-gradient(120% 88% at 50% -10%, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 58%),
    radial-gradient(90% 70% at 50% 112%, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0) 62%),
    linear-gradient(180deg, #0b1120 0%, #121826 52%, #0b1120 100%);
  /* Keeps the blurred blobs from painting over anything stacked above. */
  isolation: isolate;
}

/* Stops the app scrolling underneath the overlay. */
body.loading-active {
  overflow: hidden;
}

/* `html { scrollbar-gutter: stable }` reserves ~15px beside the page that no element
   can paint into — the canvas shows through instead, which is the light --bg-main.
   Invisible beside the old pastel wash; a white stripe beside a navy one.
   The colour has to go on <html> rather than on <body>: a background here paints the
   canvas (gutter included) while <body> keeps painting its own light background over
   the content area, so the app does not turn black for the 600ms the splash spends
   fading out. Both rules revert with the class, which preloader-2d.js applies and
   removes; scrollbar-color covers the case where a real scrollbar is drawn there. */
html:has(> body.loading-active) {
  background-color: #0b1120;
  scrollbar-color: rgba(148, 163, 184, 0.35) #0b1120;
}

.app-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Aurora.
   Blurred blobs drifting on transform only (never on width or filter), so the
   background costs one compositor layer per blob. The third is dropped below
   640px: stacking three 72px blurs on a phone GPU is the one thing here that can
   cost frames during first paint. */
.preloader-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.preloader-aurora__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}

.preloader-aurora__blob--1 {
  width: 44vmax;
  height: 44vmax;
  top: -16vmax;
  left: -10vmax;
  background: rgba(59, 130, 246, 0.42);
  animation: auroraDrift 24s ease-in-out infinite alternate;
}

.preloader-aurora__blob--2 {
  width: 38vmax;
  height: 38vmax;
  right: -12vmax;
  bottom: -14vmax;
  background: rgba(139, 92, 246, 0.38);
  animation: auroraDrift 30s ease-in-out -8s infinite alternate-reverse;
}

.preloader-aurora__blob--3 {
  width: 26vmax;
  height: 26vmax;
  right: 8vmax;
  top: -8vmax;
  background: rgba(96, 165, 250, 0.28);
  animation: auroraDrift 20s ease-in-out -14s infinite alternate;
}

@keyframes auroraDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(6vmax, 4vmax, 0) scale(1.14);
  }
}

/* Stage.
   One column on the 8pt grid -- wordmark, slogan, progress hairline, status --
   flowing on the background rather than sitting in a panel. The slogan used to be
   `position: absolute; bottom: 38%`, which floated it independently of the
   wordmark and broke their alignment at every viewport in between. */
.preloader-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}

.preloader-text-container {
  position: relative;
  font-family: 'Outfit', sans-serif;
  /* Was 800 -- the Outfit link only requests 300-700, so that weight was being
     synthesised by the browser. 700 is the heaviest cut actually loaded. */
  font-weight: 700;
  font-size: clamp(1.35rem, 6.2vw, 3.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  animation: preloaderWordmarkIn 900ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* Base stroked text (empty) */
.preloader-text-stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(248, 250, 252, 0.22);
}

/* Wrapper that dictates how much of the filled text is visible */
.preloader-text-fill-wrapper {
  position: absolute;
  /* The wipe is an overflow clip, so the box has to be bigger than the letterforms
     on three sides or it slices the drop-shadow into a visible rectangle. Padding
     buys that headroom while keeping the content box's right edge — the wipe front,
     where a hard edge is exactly the point — at the JS-driven percentage, and the
     matching offsets put the text back where the stroke copy sits. */
  box-sizing: content-box;
  top: -0.7em;
  left: -0.8em;
  padding: 0.7em 0 0.7em 0.8em;
  width: 0%;
  /* JS animates this to 100% */
  height: 100%;
  overflow: hidden;
}

/* Solid filled text */
.preloader-text-fill {
  /* Near-white with a cool tail rather than a saturated blue gradient: the
     wordmark has to stay legible against navy, so the colour comes from the glow
     underneath it instead of from the letterforms themselves. */
  background: linear-gradient(100deg, #ffffff 0%, #e8f0ff 46%, #c7d2fe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  /* Blur radius in em, not px: the padding above that keeps this glow off the clip
     edge scales with the wordmark, so the glow has to as well or it gets sliced into
     a rectangle at phone type sizes. */
  filter: drop-shadow(0 0 0.32em rgba(59, 130, 246, 0.6));
  /* The fill needs to be exact width of container to prevent wrapping issues */
  width: max-content;
}

/* The wipe edge. Was a hard 2px border plus an inset shadow, which read as a text
   cursor. It is now a soft leading light built entirely from gradients — no
   box-shadow — because anything that spills outside this wrapper gets squared off
   by the overflow clip and reappears as a glowing rectangle around the wordmark. */
.preloader-text-fill-wrapper::after {
  content: '';
  position: absolute;
  /* Inset from the wrapper's padding so the light stays roughly the height of the
     letterforms instead of the taller clip box. */
  top: 0.45em;
  bottom: 0.45em;
  right: 0;
  width: 0.55em;
  background: linear-gradient(90deg,
      rgba(147, 197, 253, 0) 0%,
      rgba(147, 197, 253, 0.28) 62%,
      rgba(219, 234, 254, 0.92) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  transition: opacity 240ms ease-out;
}

/* Once the fill reaches the end of the word there is nothing left to wipe, so the
   edge retires rather than parking at the final G. */
.app-preloader.is-complete .preloader-text-fill-wrapper::after {
  opacity: 0;
}

/* Slogan.
   "Not the best." lands muted; "But better." arrives brighter and heavier -- the
   turn is what the line is about, so the type carries it. Both reveals now finish
   inside the 2200ms minimum splash duration. The previous timing put
   "But better." at 4s, roughly two seconds after the splash had already dismissed
   itself, so nobody ever saw the second half of the message. */
.preloader-slogan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.4em;
  margin: 24px 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.01em;
}

.preloader-slogan__line {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  animation: sloganReveal 700ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.preloader-slogan__line--1 {
  font-weight: 400;
  color: rgba(148, 163, 184, 0.95);
  animation-delay: 550ms;
}

.preloader-slogan__line--2 {
  font-weight: 600;
  color: #f8fafc;
  animation-delay: 1050ms;
}

/* Progress.
   A 2px hairline rather than a spinner: the wait has a known duration, so report
   it. Width comes from the same rAF loop that drives the wordmark fill. */
.preloader-progress {
  position: relative;
  width: min(280px, 56vw);
  height: 2px;
  margin-top: 40px;
  border-radius: var(--radius-pill);
  background: rgba(248, 250, 252, 0.12);
  overflow: hidden;
}

.preloader-progress__fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.85);
  transition: width 200ms linear;
}

/* Status line, empty by default -- the 9s failsafe in index.html writes the
   retry/continue escape hatch into it. That failsafe has been dead code since the
   2D splash landed, because it looks up #preloader-text and the element no longer
   existed; this restores its target. */
.preloader-status {
  max-width: min(440px, 84vw);
  min-height: 1.4em;
  margin: 16px 0 0;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.85);
}

@keyframes preloaderWordmarkIn {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes sloganReveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Reduced motion: the composition still reads, it just arrives already arranged.
   Both the media query and the .reduced-motion class set by preloader-2d.js are
   honoured, since the class is what the browser check asserts on. */
@media (prefers-reduced-motion: reduce) {
  .preloader-aurora__blob {
    animation: none;
  }

  .preloader-text-container,
  .preloader-slogan__line {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .preloader-progress__fill {
    transition: none;
  }
}

.app-preloader.reduced-motion .preloader-aurora__blob {
  animation: none;
}

.app-preloader.reduced-motion .preloader-text-container,
.app-preloader.reduced-motion .preloader-slogan__line {
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
}

.app-preloader.reduced-motion .preloader-progress__fill {
  transition: none;
}

@media (max-width: 640px) {
  .preloader-aurora__blob--3 {
    display: none;
  }

  .preloader-slogan {
    margin-top: 20px;
  }

  .preloader-progress {
    margin-top: 32px;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ============================================
   Demo Feedback Banner
   ============================================ */


/* ============================================
   Version Indicator
   ============================================ */
.version-indicator {
  position: fixed;
  bottom: 10px;
  right: 14px;
  font-family: 'Roboto Mono', monospace;
  font-size: var(--text-2xs);
  /* Was rgba(0,0,0,0.22) — 1.69:1. Support asks users to read this back, so it has to be
     legible; kept quiet by size and placement rather than by being nearly invisible. */
  color: rgba(15, 23, 42, 0.62);
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 50;
  transition: color 0.3s ease;
}

.version-indicator:hover {
  color: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

/* Legacy banner styles removed */


/* Custom Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked+.toggle-slider {
  background-color: #2563eb;
}

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

/* Notification/Info Box (dismissible) */
.notification-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: var(--text-sm);
  position: relative;
}

.notification-box>span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-box.important-notice {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  color: #92400e;
}

.info-box-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #92400e;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.info-box-close:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .feedback-banner {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
  }

  .feedback-banner-content {
    width: 100%;
  }

  .feedback-text-en,
  .feedback-text-vi {
    font-size: var(--text-sm);
    gap: 8px;
    width: 100%;
    justify-content: center;
  }

  .feedback-link {
    padding: 6px 12px;
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .container {
    margin: 0;
    padding: 24px;
    width: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  h1 {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }

  .tabs {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    /* for scrollbar */
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    padding: 8px 16px;
    flex-shrink: 0;
  }
}

/* CLAUDE.md: "Avoid wrapping components in multiple layers of cards or nested container
   boxes. Layout elements should flow naturally on the parent .container background."
   This wrapper was itself a card — a white panel with a radius and a shadow — so the page
   nested three deep (container card -> skill card -> mode card), and four inside a
   practice mode. Dropping the card treatment here leaves the content flowing on the page
   ground and lets the cards inside it be the only cards. */
.container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 40px 40px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: var(--transition-base);
}

h1 {
  margin-top: 0;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 40px;
}

/* ============================================
   Modern Dashboard (Intent-Based)
   ============================================ */
.dashboard-modern-container {
  margin-top: 32px;
}

.dashboard-segmented-control {
  display: inline-flex;
  background: var(--bg-input);
  padding: 4px;
  border-radius: var(--radius-pill);
  position: relative;
  margin: 0 auto 32px auto;
  left: 50%;
  transform: translateX(-50%);
  /* gap: 4px; removed to support absolute backdrop */
}

.segmented-backdrop {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  background: white;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  /* Softer shadow */
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  /* Smoother slide */
  pointer-events: none;
  z-index: 0;
}

.segmented-btn {
  padding: 10px 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
  z-index: 1;
}

.segmented-btn.active {
  color: var(--primary);
  background: transparent;
  box-shadow: none;
}

.dashboard-content-wrapper {
  overflow: hidden;
  position: relative;
}

.dashboard-section-header {
  margin-bottom: 24px;
  text-align: left;
}

.dashboard-section-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-main);
}

.dashboard-section-header p {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Practice Scope: Segmented Control ── */
.practice-scope-filter {
  display: inline-flex;
  background: #eef0f4;
  border-radius: 999px;
  padding: 5px;
  margin: 16px 0 12px;
}

.practice-scope-btn {
  appearance: none;
  border: none;
  background: transparent;
  /* Hard-coded #64748b measured 4.17:1 against the segmented track it sits on. */
  color: var(--text-muted);
  border-radius: 999px;
  padding: 10px 24px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  font-family: inherit;
}

.practice-scope-btn:hover:not(.is-active) {
  background: rgba(0, 0, 0, 0.04);
}

.practice-scope-btn.is-active {
  background: #ffffff;
  color: var(--primary, #2563eb);
  box-shadow: var(--shadow-sm);
}

.practice-scope-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

/* ── Practice Skill: Card Grid ── */
.practice-skill-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 24px;
}

.practice-skill-btn {
  --accent-color: var(--primary, #2563eb);
  --accent-rgb: 37, 99, 235;

  appearance: none;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  font-family: inherit;
  color: inherit;

  position: relative;
  overflow: hidden;
}

.practice-skill-btn.card-speaking {
  --accent-color: #2563eb;
  --accent-rgb: 37, 99, 235;
}

.practice-skill-btn.card-listening {
  --accent-color: #1b8a4f;
  --accent-rgb: 27, 138, 79;
}

.practice-skill-btn.card-reading {
  --accent-color: #2563eb;
  --accent-rgb: 37, 99, 235;
}

.practice-skill-btn.card-writing {
  --accent-color: #b8860b;
  --accent-rgb: 184, 134, 11;
}



.practice-skill-btn:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--accent-color);
  transform: translateY(-4px);
}



.practice-skill-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.practice-skill-btn.is-active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25), 0 6px 16px rgba(var(--accent-rgb), 0.15);
}

.practice-skill-btn.card-speaking.is-active {
  background: #eff6ff;
  border-color: #2563eb;
  border-width: 2px;
}

.practice-skill-btn.card-listening.is-active {
  background: #f0fdf4;
  border-color: #1b8a4f;
  border-width: 2px;
}

.practice-skill-btn.card-reading.is-active {
  background: #eff6ff;
  border-color: #2563eb;
  border-width: 2px;
}

.practice-skill-btn.card-writing.is-active {
  background: #fff8e7;
  border-color: #b8860b;
  border-width: 2px;
}

.practice-skill-btn.is-active .skill-card-icon {
  color: var(--accent-color);
  transform: scale(1.15);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.practice-skill-btn.is-active .skill-card-text strong {
  color: var(--accent-color);
  font-weight: 800;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .practice-skill-btn.is-active {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 30%, transparent),
      0 6px 16px rgba(var(--accent-rgb), 0.15);
  }
}

.practice-skill-btn:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.35);
  outline-offset: 2px;
}

/* Watermark styles */
.watermark {
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 180px;
  height: 180px;
  color: var(--accent-color);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  transition: all 0.5s cubic-bezier(0.4, 1, 0.2, 1);
  transform: rotate(-10deg);
}

.practice-skill-btn:hover .watermark {
  opacity: 0.35;
  transform: scale(1.15) rotate(0deg);
  right: 0px;
  bottom: 0px;
}

.content-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Skill Card Inner Elements */
.skill-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 14px;
  color: var(--accent-color);
}

.skill-card-icon .material-symbols-outlined {
  font-size: 22px;
}

.skill-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.skill-card-text strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-main, #111827);
}

.skill-card-text>span:last-child {
  font-size: var(--text-xs);
  color: var(--text-muted, #6b7280);
  font-weight: 400;
}

.skill-card-chevron {
  /* Was #c5c9d2 — 1.66:1 on white, 1.52:1 on the selected card's blue tint. This is the
     only mark saying a skill card is navigable, so it was the quietest element on the
     page while the decorative illustration behind it was the loudest. Now 3.4:1, above
     the 3:1 floor for graphical objects. */
  color: var(--gray-500, #64748b);
  font-size: 20px;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Responsive: single column on mobile */
@media (max-width: 640px) {
  .practice-skill-filter {
    grid-template-columns: 1fr;
  }

  .practice-skill-btn {
    padding: 16px 18px;
  }
}

/* Card Grid Layouts */
.tutorial-grid,
.growth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 900px) {

  .tutorial-grid,
  .growth-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {

  .tutorial-grid,
  .growth-grid {
    grid-template-columns: 1fr;
  }
}

/* Modern Card Design - Premium (Buttery Smooth) */
.modern-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--r-card);
  cursor: pointer;
  transition:
    transform 0.25s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth),
    border-color 0.25s var(--ease-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--sh-1);
  overflow: hidden;
  /* integrated top visual */
}

.modern-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.practice-placeholder-card {
  cursor: default;
  border-style: dashed;
  border-color: #cbd5e1;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.96));
}

.practice-placeholder-card:hover {
  transform: none;
  box-shadow: var(--sh-1);
  border-color: #cbd5e1;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.96));
}

.practice-placeholder-card .card-cta:disabled {
  background: #e2e8f0;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
}

.practice-placeholder-card .card-cta.is-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-pill);
  background: #e2e8f0;
  color: #64748b;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: default;
  pointer-events: none;
  opacity: 1;
  transform: none;
}

.practice-placeholder-card .card-cta.is-disabled:hover {
  background: #e2e8f0;
  color: #64748b;
}

.practice-placeholder-card .whats-this-link {
  display: none;
}

.practice-placeholder-card .badge.coming-soon {
  background: rgba(15, 23, 42, 0.88);
  color: white;
  border-color: transparent;
}

.practice-skill-empty-state {
  grid-column: 1 / -1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 24px;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.94));
  color: #475569;
}

.practice-skill-empty-state h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.2rem;
}

.practice-skill-empty-state p {
  margin: 0;
  max-width: 34rem;
}

.practice-skill-empty-state[hidden] {
  display: none !important;
}

/* Selected Mode Indicator - Buttery (Soft Ring + Glow) */
.mode-switch-btn.is-active {
  transform: translateY(-2px);
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.14),
    0 0 0 3px color-mix(in srgb, var(--visual-fg, var(--primary)) 65%, white);
  /* smooth ring */
  border-color: transparent;
  /* allow ring to show */
}

/* Smooth Rail (matches radius) */
.mode-switch-btn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--visual-fg, var(--primary)) 90%, white),
      var(--visual-fg, var(--primary)));
  border-radius: var(--r-card) 0 0 var(--r-card);
  pointer-events: none;
  z-index: 5;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.35);
}

/* Smooth Selected Pill */
.mode-switch-btn.is-active::after {
  content: "Selected";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--visual-fg, var(--primary)) 88%, white);
  color: white;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(6px);
  z-index: 35;
}

/* Accessibility: Focus Visible State */
.mode-switch-btn:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
  border-radius: var(--r-card);
}

/* ── Skill palette for practice-mode cards ───────────────────────────────
   Each mode previously hardcoded its own hue through a .visual-<mode> class — blue,
   fuchsia, amber, emerald, rose, violet, indigo, cyan — so selecting "Writing" turned
   the skill card gold and then delivered blue mode cards underneath. The page taught a
   colour code in one row and broke it in the next.

   `data-practice-skill` is already on every card and the inline SVGs already consume
   --visual-bg / --visual-fg / --visual-accent, so re-mapping the custom properties by
   skill needs no markup change. Attribute + class beats the bare .visual-<mode> class
   on specificity, so these win. Hues come from design-tokens.css --skill-*.
   ──────────────────────────────────────────────────────────────────────── */
[data-practice-skill="speaking"] .card-visual,
[data-practice-skill="reading"] .card-visual {
  --visual-bg: var(--blue-50);
  --visual-fg: var(--blue-600);
  --visual-accent: var(--blue-400);
}

[data-practice-skill="listening"] .card-visual {
  --visual-bg: var(--green-50);
  --visual-fg: var(--green-600);
  --visual-accent: var(--green-400);
}

[data-practice-skill="writing"] .card-visual {
  --visual-bg: var(--gold-50);
  --visual-fg: var(--gold-600);
  --visual-accent: var(--gold-400);
}

.card-visual {
  /* Was 140px. The icon is decorative; at 140px it was the largest element in a card
     whose useful content is a title and two lines, and it pushed the grid to 1,658px on
     desktop / 3,588px on mobile. */
  height: 96px;
  background: var(--visual-bg, var(--blue-50));
  color: var(--visual-fg, var(--blue-600));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Clip top corners to match card */
  border-radius: var(--r-card) var(--r-card) 0 0;
}

/* What's this? Tutorial Link */
.whats-this-link {
  /* Rendered as a <button> so it is keyboard reachable — it used to be an <a>
     with no href, which is focusable by nothing. Strip the UA button chrome so
     it still reads as a text link. */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;

  display: inline-block;
  align-self: flex-start;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--primary, #2563eb);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}

.whats-this-link:hover {
  text-decoration-color: var(--primary, #2563eb);
}

/* Focusing it also un-hides it via .modern-card:focus-within below. */
.whats-this-link:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Show link on card hover/focus */
.modern-card:hover .whats-this-link,
.modern-card:focus-within .whats-this-link {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices have no hover state, so a hover-revealed control is simply absent there.
   Keep the tidy reveal on pointer devices; show it outright where hover does not exist. */
@media (hover: none) {
  .whats-this-link {
    opacity: 1;
    transform: none;
  }
}

/* Animation Containers */
.anim-container {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  position: relative;
  z-index: 10;
  contain: layout;
}

/* Ensure inner circles match curvature */
.anim-container::before {
  border-radius: var(--r-inner);
}

.anim-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--visual-bg, #eef2ff);
  opacity: 0.9;
  z-index: -1;
}

/* Interaction Control: Paused by default, Run on hover/focus */
.type-dot,
.wave-bar,
.ripple-ring,
.watch-anim-box::after,
.fill-line::after,
.fill-icon-svg,
.note-dot-line,
.wave-tick,
.caret,
.type-bar,
.flow-line,
.flow-head,
.phoneme-link,
.phoneme-node,
.stress-bar,
.radiate-ring,
.mic-body,
.transcript-line,
.check-draw,
.word-chip,
.chip-check,
.chip-check-mark,
.play-pop,
.progress-sweep,
.subtitle-bubble,
.transfer-arrow,
.note-line,
.flash-front,
.refresh-arrow,
.refresh-head,
.clock-hand,
.chart-draw,
.flag-pop,
.confetti {
  animation-play-state: paused;
  will-change: transform, opacity;
}

/* Run animations on Hover/Focus */
@media (hover: hover) and (pointer: fine) {

  .modern-card:hover :is(.type-dot, .wave-bar, .ripple-ring, .watch-anim-box::after, .fill-line::after, .fill-icon-svg, .note-dot-line,
    .srs-card, .srs-glow, .sparkle, .chart-path, .stats-bar, .stats-pulse,
    .wave-tick, .caret, .type-bar, .flow-line, .flow-head,
    .mic-body, .transcript-line, .check-draw,
    .word-chip, .chip-check, .chip-check-mark,
    .play-pop, .progress-sweep, .subtitle-bubble,
    .transfer-arrow, .note-line,
    .phoneme-link, .phoneme-node, .stress-bar, .radiate-ring,
    .flash-front, .refresh-arrow, .refresh-head, .clock-hand,
    .chart-draw, .flag-pop, .confetti) {
    animation-play-state: running;
  }
}

/* Always run on keyboard focus for accessibility */
.modern-card:focus-within :is(.type-dot, .wave-bar, .ripple-ring, .watch-anim-box::after, .fill-line::after, .fill-icon-svg, .note-dot-line,
  .srs-card, .srs-glow, .sparkle, .chart-path, .stats-bar, .stats-pulse,
  .wave-tick, .caret, .type-bar, .flow-line, .flow-head,
  .mic-body, .transcript-line, .check-draw,
  .word-chip, .chip-check, .chip-check-mark,
  .play-pop, .progress-sweep, .subtitle-bubble,
  .transfer-arrow, .note-line,
  .phoneme-link, .phoneme-node, .stress-bar, .radiate-ring,
  .flash-front, .refresh-arrow, .refresh-head, .clock-hand,
  .chart-draw, .flag-pop, .confetti) {
  animation-play-state: running;
}

/* Mode Variables */
.visual-type {
  --visual-bg: #eaf2ff;
  --visual-fg: var(--primary);
  --visual-accent: #60a5fa;
}

.visual-collo {
  --visual-bg: #fdf4ff;
  --visual-fg: #c026d3;
  --visual-accent: #f0abfc;
}

.visual-speak {
  --visual-bg: #fff7ed;
  --visual-fg: #f59e0b;
  --visual-accent: #fbbf24;
}

.visual-pronounce {
  --visual-bg: #ecfdf5;
  --visual-fg: #10b981;
  --visual-accent: #34d399;
}

.visual-watch {
  --visual-bg: #fff1f2;
  --visual-fg: #f43f5e;
  --visual-accent: #fb7185;
}

.visual-fill {
  --visual-bg: #f3e8ff;
  --visual-fg: #8b5cf6;
  --visual-accent: #a78bfa;
}

.visual-notes {
  --visual-bg: #eef2ff;
  --visual-fg: #6366f1;
  --visual-accent: #818cf8;
}

.card-visual svg {
  color: var(--visual-fg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}

/* 1. Type Mode: Typing Dots */
.type-anim-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.type-icon-svg {
  width: 24px;
  height: 24px;
}

.type-dot {
  width: 6px;
  height: 6px;
  background: var(--visual-fg);
  border-radius: 50%;
  transform: translateY(0);
  animation: typingDots 2s ease-in-out infinite;
}

.type-anim-box .type-dot:nth-of-type(1) {
  animation-delay: 0s;
}

.type-anim-box .type-dot:nth-of-type(2) {
  animation-delay: 0.2s;
}

.type-anim-box .type-dot:nth-of-type(3) {
  animation-delay: 0.4s;
}

@keyframes typingDots {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* 2. Speak Mode: Audio Wave */
.speak-anim-box {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 32px;
}

.wave-bar {
  width: 6px;
  height: 24px;
  background: var(--visual-fg);
  border-radius: 10px;
  transform-origin: bottom;
  animation: audioWave 2s ease-in-out infinite;
}

.wave-bar:nth-of-type(odd) {
  animation-delay: 0.1s;
}

.wave-bar:nth-of-type(even) {
  animation-delay: 0.3s;
}

@keyframes audioWave {

  0%,
  100% {
    transform: scaleY(0.35);
    opacity: 0.7;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 3. Pronounce Mode: Ripple Effect */
.pronounce-anim-box {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--visual-fg);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  animation: rippleOut 2s ease-in-out infinite;
}

.ripple-ring:nth-of-type(1) {
  animation-delay: 0s;
}

.ripple-ring:nth-of-type(2) {
  animation-delay: 0.6s;
}

.pronounce-icon-svg {
  width: 32px;
  height: 32px;
  color: #10b981;
  z-index: 2;
  position: relative;
}

@keyframes rippleOut {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  30% {
    opacity: 0.6;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* 4. Watch Mode: Play Pulse */
.watch-anim-box {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.watch-anim-box::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--visual-fg);
  border-radius: 50%;
  transform: scale(0.9);
  opacity: 0;
  animation: watchRing 2s ease-in-out infinite;
}

.play-icon-svg {
  width: 24px;
  height: 24px;
  color: var(--visual-fg);
  margin-left: 2px;
}

@keyframes watchRing {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  30% {
    opacity: 0.6;
  }

  /* Consistent with ripple */
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* 5. Fill Animation (Seamless Loop) */
.fill-anim-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fill-line {
  width: 32px;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.fill-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--visual-fg);
  transform: translateX(-110%);
  animation: fillSlide 2s ease-in-out infinite;
}

.fill-icon-svg {
  width: 24px;
  height: 24px;
  transform: translateY(0) rotate(0deg);
  animation: writeBob 2s ease-in-out infinite;
}

@keyframes fillSlide {
  0% {
    transform: translateX(-110%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  55% {
    transform: translateX(0);
    opacity: 1;
  }

  85% {
    transform: translateX(0);
    opacity: 1;
  }

  98% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(-110%);
    opacity: 0;
  }

  /* Reset invisibly */
}

@keyframes writeBob {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-4px) rotate(-10deg);
  }
}

/* 6. Note Animation (Seamless Loop) */
.note-anim-box {
  width: 44px;
  height: 56px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note-icon-svg {
  width: 40px;
  height: 40px;
  color: var(--visual-fg);
}

.note-line-overlay {
  position: absolute;
  top: 18px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.note-dot-line {
  height: 2px;
  background: var(--visual-fg);
  border-radius: 1px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: lineAppear 2s ease-in-out infinite;
}

@keyframes lineAppear {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  30%,
  70% {
    transform: scaleX(1);
    opacity: 0.8;
  }

  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Per-mode mesh gradients, now driven by the selected skill's hue rather than a
   hardcoded one per mode. Previously these five hardcoded amber / violet / fuchsia /
   emerald meshes, so e.g. Repeat Sentence rendered amber inside a blue Speaking grid and
   Write from Dictation rendered indigo inside a green Listening grid — the skill colour
   code was contradicted by the cards it was meant to describe. --visual-bg is set by the
   [data-practice-skill] block near .card-visual. */
.card-visual.visual-type,
.card-visual.visual-collo,
.card-visual.visual-speak,
.card-visual.visual-pronounce,
.card-visual.visual-watch {
  background: radial-gradient(circle at 100% 0%, var(--visual-bg) 0%, var(--visual-bg) 50%, #ffffff 100%);
}

.visual-srs {
  --visual-bg: #ecfeff;
  --visual-fg: #06b6d4;
  --visual-accent: #22d3ee;
  background: radial-gradient(circle at 100% 0%, #cffafe 0%, #ecfeff 50%, #ffffff 100%);
}

.visual-stats {
  --visual-bg: #fff1f2;
  --visual-fg: #f43f5e;
  --visual-accent: #fb7185;
  background: radial-gradient(circle at 100% 0%, #ffe4e6 0%, #fff1f2 50%, #ffffff 100%);
}

/* Growth Card Specifics - Scaled Up and Robust */
.srs-svg,
.stats-svg,
.type-icon-svg,
.speak-anim-box,
.pronounce-icon-svg,
.play-icon-svg,
.fill-icon-svg,
.note-icon-svg {
  width: 110px;
  height: 110px;
  transition: var(--transition-base);
}

/* Contextual Icon Base */
.ctx-icon {
  width: 72px;
  height: 72px;
  color: var(--visual-fg);
  transition: var(--transition-base);
}

/* Launcher symbols share one stroke family and remain legible without hover
   or a downloaded icon font. Text labels carry their accessible names. */
.skill-card-icon > .practice-launcher-icon {
  width: 26px;
  height: 26px;
  flex: none;
}

.card-visual .practice-launcher-icon {
  width: 56px;
  height: 56px;
  filter: none;
}

/* ===== TYPE MODE: waveform → caret → typing bars ===== */
.wave-tick {
  transform-origin: center;
  animation: waveBounce 1.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.caret {
  animation: caretBlink 1s step-end infinite;
}

.type-bar {
  transform-origin: left center;
  animation: typeIn 1.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.flow-line,
.flow-head {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawArrow 1.6s ease-in-out infinite;
}

@keyframes waveBounce {

  0%,
  100% {
    transform: scaleY(0.85);
    opacity: 0.65;
  }

  50% {
    transform: scaleY(1.15);
    opacity: 1;
  }
}

@keyframes caretBlink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.25;
  }
}

@keyframes typeIn {

  0%,
  35% {
    transform: scaleX(0);
    opacity: 0;
  }

  55% {
    transform: scaleX(1);
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes drawArrow {

  0%,
  20% {
    stroke-dashoffset: 60;
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes caretBlink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

@keyframes typeIn {

  0%,
  40% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ===== SPEAK MODE: mic → transcript → checkmark ===== */
/* Card-visual decoration animates on interaction rather than forever. Six loops ran
   permanently on the practice grid at 2s / 2s / 2s / 2.5s / 3s / 3s — periods with no
   common short multiple, so they only realigned every 30 seconds and something in the
   periphery was always starting to move. Peripheral motion is involuntary attention;
   during a timed speaking exercise that is a direct tax on the task. */
.modern-card:hover .mic-body,
.modern-card:focus-within .mic-body {
  animation: micPulse 2s ease-in-out infinite;
}

.modern-card:hover .transcript-line,
.modern-card:focus-within .transcript-line {
  animation: transcriptAppear 2s ease-out infinite;
}

.transcript-line:nth-of-type(1) {
  animation-delay: 0.6s;
}

.transcript-line:nth-of-type(2) {
  animation-delay: 0.8s;
}

.transcript-line:nth-of-type(3) {
  animation-delay: 1.0s;
}

.check-draw {
  animation: checkDraw 2s ease-out infinite;
  animation-delay: 1.4s;
}

@keyframes micPulse {

  0%,
  100% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.05);
  }
}

@keyframes transcriptAppear {

  0%,
  30% {
    opacity: 0;
    transform: translateX(-5px);
  }

  40%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes checkDraw {

  0%,
  70% {
    opacity: 0;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
  }

  80%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* ===== FILL MODE: chip snap-in + checkmark flash ===== */
.word-chip {
  animation: chipSnapIn 2s ease-out infinite;
}

.chip-check,
.chip-check-mark {
  animation: chipCheckFlash 2s ease-out infinite;
  animation-delay: 1.2s;
}

@keyframes chipSnapIn {

  0%,
  40% {
    opacity: 0;
    transform: translateY(-15px) scale(0.8);
  }

  50% {
    opacity: 1;
    transform: translateY(2px) scale(1.1);
  }

  60%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes chipCheckFlash {

  0%,
  60% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    opacity: 1;
    transform: scale(1.2);
  }

  80%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== WATCH MODE: play pop → progress sweep → subtitle ===== */
.play-pop {
  animation: playPop 2s ease-out infinite;
}

.progress-sweep {
  animation: progressSweep 2s ease-out infinite;
  animation-delay: 0.5s;
}

.subtitle-bubble {
  animation: subtitleAppear 2s ease-out infinite;
  animation-delay: 1.2s;
}

@keyframes playPop {

  0%,
  20% {
    transform: scale(0.8);
    opacity: 0.6;
  }

  30%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes progressSweep {

  0%,
  25% {
    width: 0;
  }

  100% {
    width: 20px;
  }
}

@keyframes subtitleAppear {

  0%,
  60% {
    opacity: 0;
  }

  70%,
  90% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

/* ===== NOTE MODE: video → arrow → note lines ===== */
.modern-card:hover .transfer-arrow,
.modern-card:focus-within .transfer-arrow {
  animation: arrowPulse 2s ease-in-out infinite;
}

.note-line {
  animation: noteLineAppear 2s ease-out infinite;
}

.note-line:nth-of-type(1) {
  animation-delay: 0.8s;
}

.note-line:nth-of-type(2) {
  animation-delay: 1.0s;
}

.note-line:nth-of-type(3) {
  animation-delay: 1.2s;
}

@keyframes arrowPulse {

  0%,
  100% {
    transform: translateX(0);
    opacity: 0.7;
  }

  50% {
    transform: translateX(3px);
    opacity: 1;
  }
}

@keyframes noteLineAppear {

  0%,
  40% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  50%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ===== PRONOUNCE MODE: phoneme nodes → stress bar → radiate ===== */
.phoneme-link {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: linkDraw 2s ease-in-out infinite;
}

.phoneme-node {
  transform-origin: center;
  animation: nodeSettle 2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.stress-bar {
  transform-origin: center bottom;
  animation: stressPulse 2s ease-in-out infinite;
}

.radiate-ring {
  transform-origin: center;
  animation: radiate 2s ease-in-out infinite;
}

@keyframes linkDraw {

  0%,
  20% {
    stroke-dashoffset: 80;
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  60% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes nodeSettle {

  0%,
  35% {
    transform: translateY(2px) scale(0.92);
    opacity: 0.6;
  }

  55% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 0.85;
  }
}

@keyframes stressPulse {

  0%,
  45% {
    transform: scaleY(0.85);
    opacity: 0.8;
  }

  60% {
    transform: scaleY(1.15);
    opacity: 1;
  }

  100% {
    transform: scaleY(0.9);
    opacity: 0.8;
  }
}

@keyframes radiate {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  35% {
    opacity: 0.45;
  }

  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* ===== SRS MODE: flashcard flip → refresh arrow → clock tick ===== */
.flash-front {
  animation: flashFlip 2s ease-out infinite;
}

.refresh-arrow,
.refresh-head {
  animation: refreshRotate 2s ease-out infinite;
  animation-delay: 1s;
  transform-origin: 36px 44px;
}

.clock-hand {
  animation: clockTick 2s linear infinite;
  transform-origin: 22px 56px;
}

@keyframes flashFlip {

  0%,
  40% {
    transform: rotateY(0);
  }

  50% {
    transform: rotateY(15deg);
  }

  60%,
  100% {
    transform: rotateY(0);
  }
}

@keyframes refreshRotate {

  0%,
  50% {
    transform: rotate(0);
  }

  75%,
  100% {
    transform: rotate(30deg);
  }
}

@keyframes clockTick {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ===== STATS MODE: chart draw → flag pop → confetti ===== */
.chart-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: chartDraw 2s ease-out infinite;
}

.flag-pop {
  animation: flagPop 2s ease-out infinite;
  animation-delay: 1.2s;
}

.confetti {
  animation: confettiPop 2s ease-out infinite;
  animation-delay: 1.5s;
}

@keyframes chartDraw {

  0%,
  20% {
    stroke-dashoffset: 100;
  }

  60%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flagPop {

  0%,
  60% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    opacity: 1;
    transform: scale(1.2);
  }

  80%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes confettiPop {

  0%,
  75% {
    opacity: 0;
    transform: scale(0);
  }

  85% {
    opacity: 1;
    transform: scale(1.5);
  }

  100% {
    opacity: 0;
    transform: scale(0.5) translateY(5px);
  }
}

/* Glassmorphism Classes for SVGs */
.glass-layer {
  fill: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  stroke: rgba(255, 255, 255, 0.8);
}

/* SRS Animations - 3D Fan Out */
.srs-card {
  transform-origin: center;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-back {
  opacity: 0.2;
  transform: translate(-20px, 20px) rotate(-15deg) scale(0.9);
}

.card-mid {
  opacity: 0.4;
  transform: translate(-10px, 10px) rotate(-8deg) scale(0.95);
}

.card-front {
  opacity: 0.9;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
}

.modern-card:hover .card-back {
  transform: translate(-40px, 30px) rotate(-25deg) scale(1.05);
  opacity: 0.4;
}

.modern-card:hover .card-mid {
  transform: translate(-15px, 15px) rotate(-12deg) scale(1.1);
  opacity: 0.6;
}

.modern-card:hover .card-front {
  transform: translate(20px, -20px) rotate(8deg) scale(1.15);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15));
}

.srs-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

.srs-sparkle {
  transform-origin: center;
  animation: sparkleRotate 5s linear infinite;
}

.srs-star {
  fill: #fbbf24;
  filter: drop-shadow(0 0 8px #fbbf24);
  animation: starTwinkle 2s ease-in-out infinite;
}

/* Stats Animations - Rich Trace */
.chart-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  filter: drop-shadow(0 0 8px var(--visual-fg));
}

.modern-card:hover .chart-path {
  animation: drawChartLong 2s ease-out forwards;
}

.stats-bar {
  transform-origin: bottom;
  transform: scaleY(0.4);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modern-card:hover .stats-bar {
  transform: scaleY(1);
}

.stats-pulse {
  transform-origin: center;
  animation: statsPulseRingRobust 2s ease-out infinite;
}

/* Keyframes */
@keyframes srsFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-8px);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    opacity: 0.1;
    r: 20;
  }

  50% {
    opacity: 0.4;
    r: 35;
  }
}

@keyframes sparkleRotate {
  from {
    transform: rotate(0deg) scale(0.8);
  }

  50% {
    transform: rotate(180deg) scale(1.3);
  }

  to {
    transform: rotate(360deg) scale(0.8);
  }
}

@keyframes starTwinkle {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes drawChartLong {
  from {
    stroke-dashoffset: 400;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes statsPulseRingRobust {
  0% {
    transform: scale(0.5);
    opacity: 1;
    stroke-width: 4;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
    stroke-width: 1;
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    opacity: 0.1;
    r: 15;
  }

  50% {
    opacity: 0.3;
    r: 20;
  }
}

@keyframes sparkleRotate {
  from {
    transform: rotate(0deg) scale(0.8);
  }

  50% {
    transform: rotate(180deg) scale(1.2);
  }

  to {
    transform: rotate(360deg) scale(0.8);
  }
}

@keyframes drawChart {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes statsPulseRing {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Removed legacy ::after icons */

.card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  /* Force white background for text area */
  position: relative;
  z-index: 2;
}

.card-body h3 {
  margin: 0 0 8px 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.card-body p {
  margin: 0 0 16px 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.srs-card-modern,
.stats-card-modern {
  background: white;
  border: 1px solid var(--border-light);
}

.dashboard-srs-status {
  background: #f8fafc;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-main);
}

.srs-card-modern .card-visual {
  background: #e8f0fe;
}

.stats-card-modern .card-visual {
  background: #fce8e6;
}

/* Active Mode Card Styling */
.mode-switch-btn.active {
  border-width: 2px;
  border-color: var(--primary);
  background: var(--primary-tonal) !important;
  /* Force light tint */
  box-shadow: 0 8px 24px rgba(26, 115, 232, 0.12);
}

.mode-switch-btn.active .card-cta {
  background: var(--primary);
  color: white;
}

/* Badge Styles - Repositioned for Alignment */
.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: white;
  color: var(--text-main);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.badge.new {
  background: var(--blue-50);
  color: var(--blue-600);
}

.badge.experimental {
  background: #fef3c7;
  color: #92400e;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
  animation: badgeGlow 3s infinite alternate;
}

@keyframes badgeGlow {
  from {
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.2);
  }

  to {
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
  }
}

/* Direct CTA Buttons in Cards */
.card-cta {
  padding: 12px 20px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  margin-top: auto;
  text-align: center;
  /* Was opacity: 0 / pointer-events: none, revealed only by .modern-card:hover — with no
     :focus-within and no touch fallback. It reserved ~48px of card height permanently and
     was unreachable on every phone and tablet, which is what made the cards look 40%
     empty. It is the card's primary action; it is now always present. */
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.modern-card:hover .card-cta,
.modern-card:focus-within .card-cta {
  background: var(--primary);
  color: white;
}

.practice-placeholder-card:hover .card-cta.is-disabled,
.practice-placeholder-card:focus-within .card-cta.is-disabled {
  background: #e2e8f0;
  color: #64748b;
  pointer-events: none;
  opacity: 1;
  transform: none;
}

.card-cta.primary {
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.card-cta.primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* Carousel/Panel Transitions */
.dashboard-panel {
  display: none;
}

.dashboard-panel.active {
  display: block;
  animation: slideCarousel 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideCarousel {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dashboard-content-wrapper {
  transition: height 0.3s ease;
}

.whats-this-container-modern {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

/* Compact version - closer to mode cards */
.whats-this-container-compact {
  text-align: center;
  margin-top: 16px;
  padding-top: 12px;
}

#what-is-this-btn {
  padding: 12px 24px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: white;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

#what-is-this-btn.btn-compact {
  padding: 10px 20px;
  font-size: var(--text-sm);
}

#what-is-this-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 115, 232, 0.25);
}

.unified-controls {
  margin-bottom: 1.5rem;
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.control-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.playback-group,
.status-group,
.action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badge & Hint Styles */
.badge-status {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge-replay {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.hint-badge-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hint-badge-btn:hover:not(:disabled) {
  background: #fef3c7;
  border-color: #fcd34d;
  transform: translateY(-1px);
}

.hint-cost {
  background: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--text-2xs);
}

/* Hint Drawer */
.auto-hints-type-drawer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: var(--text-sm);
}


/* Premium Mode Helper Modal */
.mode-helper-content {
  max-width: 550px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  padding: 32px 36px !important;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mode-helper-header {
  margin-bottom: 24px;
}

.mode-helper-icon {
  font-size: 3.5rem;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.mode-helper-header h2 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--brand-primary, #1557b0);
}

.mode-helper-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.helper-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-base);
  text-align: left;
}

.helper-option:hover {
  background: linear-gradient(to right, #ffffff, #f8fbff);
  border-color: var(--primary);
  box-shadow: 0 12px 24px rgba(26, 115, 232, 0.12);
  transform: translateY(-4px) scale(1.02);
}

.option-emoji {
  font-size: 1.75rem;
}

.option-text {
  display: flex;
  flex-direction: column;
}

.option-text strong {
  font-size: 1rem;
  color: var(--text-main);
}

.option-text span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Multiple Choice Goal Selection */
.helper-option-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-main);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-base);
  text-align: left;
}

.helper-option-checkbox:hover {
  background: linear-gradient(to right, #ffffff, #f8fbff);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(26, 115, 232, 0.1);
  transform: translateY(-2px);
}

.helper-option-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.helper-option-checkbox:has(input:checked) {
  background: linear-gradient(to right, #e8f0fe, #f0f6ff);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.helper-option-checkbox .option-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Mode Helper Actions */
.mode-helper-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* Suggestions Panel */
.mode-helper-suggestions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.mode-helper-suggestions h3 {
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: var(--primary);
}

.mode-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-main);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-base);
}

.suggestion-item:hover {
  border-color: var(--primary);
  background: #fafbfc;
}

.suggestion-item.selected {
  background: linear-gradient(to right, #e8f0fe, #f0f6ff);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.suggestion-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.suggestion-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.suggestion-icon {
  font-size: 1.5rem;
}

.suggestion-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.suggestion-text strong {
  font-size: 1rem;
  color: var(--primary);
}

.suggestion-text span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Shake animation for validation */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.3s ease-in-out;
}

/* Disabled state when max selections reached */
.helper-option-checkbox.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: #f5f5f5;
  border-color: #e0e0e0;
}

/* Utility class for step visibility */
.is-hidden {
  display: none !important;
}

/* Helper text for max selection limit */
.goal-limit-helper {
  display: inline-block;
  padding: 4px 12px;
  margin-top: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--success-text, #16a34a);
  background: var(--success-light, #dcfce7);
  border-radius: var(--radius-pill, 20px);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.goal-limit-helper.visible {
  opacity: 1;
  transform: translateY(0);
}

.mode-panel.active {
  display: block !important;
  opacity: 1;
  overflow-x: clip;
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Scoped Stage Transition Orchestrator (Smooth Blur & Motion)
   ========================================================================== */
.stage-fade-blur-out {
  opacity: 0 !important;
  filter: blur(3px) !important;
  transform: translateY(-6px) !important;
  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 160ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 160ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  will-change: opacity, filter, transform;
}

.stage-fade-blur-in {
  animation: stageFadeBlurIn 240ms cubic-bezier(0, 0, 0.2, 1) forwards !important;
  will-change: opacity, filter, transform;
}

@keyframes stageFadeBlurIn {
  0% {
    opacity: 0.94;
    filter: none;
    transform: none;
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

/* Tutorial Grid Filter Transition */
.tutorial-grid {
  transition: opacity 100ms ease, filter 100ms ease, transform 100ms ease;
  will-change: opacity, filter, transform;
}


.tutorial-grid.skill-grid-fading-out {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(4px);
  pointer-events: none;
}

.tutorial-grid.skill-grid-fading-in {
  animation: skillGridFadeIn 180ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes skillGridFadeIn {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-fade-blur-out {
    opacity: 0 !important;
    filter: none !important;
    transform: none !important;
    transition: opacity 80ms linear !important;
  }
  .stage-fade-blur-in {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .tutorial-grid,
  .tutorial-grid.skill-grid-fading-out,
  .tutorial-grid.skill-grid-fading-in {
    transition: none !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Tab System (Restored for Utility/Compatibility) */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-light);
}

.tab-btn {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition-base);
}

.tab-btn:hover {
  color: var(--primary);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Card Visual Animations (Show-Don't-Tell) */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-selector {
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.question-selector:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.question-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-main);
  font-size: var(--text-sm);
}

.question-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  margin-bottom: 8px;
  transition: var(--transition-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

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

.question-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
  color: #6b7280;
}

.question-info span {
  font-weight: 600;
  color: var(--text-main);
}

.question-id-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.question-id-display label {
  font-weight: 600;
  color: var(--text-main);
  font-size: var(--text-sm);
  margin: 0;
}

.current-question-id {
  font-weight: 600;
  color: var(--primary);
  font-size: 1rem;
}

.question-total {
  margin-top: 2px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  /* Was #9ca3af (gray-400) — 2.54:1 on white, at 0.78rem. This line states how many
     questions the mode holds, so it is information, not decoration. */
  color: var(--text-muted);
}

.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn {
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.3);
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--primary);
  border-color: var(--border-light);
}

.btn-secondary:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.btn-success {
  background: var(--success);
  color: white;
}

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

.btn-danger {
  background: var(--danger-light);
  color: var(--danger-text);
}

.btn-danger:hover {
  background: var(--danger);
  color: white;
}

.play-btn {
  background: var(--primary);
  color: white;
}

.play-btn:hover {
  background: var(--primary-hover);
}

.record-btn {
  background: var(--danger-light);
  color: var(--danger-text);
}

.record-btn:hover {
  background: var(--danger);
  color: white;
}

.record-btn.recording {
  background: var(--primary);
  color: white;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.check-btn {
  background: #16a34a;
  color: white;
}

.check-btn:hover {
  background: #15803d;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-main);
  font-size: var(--text-sm);
}

textarea {
  width: 100%;
  min-height: 140px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0;
  box-sizing: border-box;
  transition: var(--transition-base);
}

textarea:focus {
  outline: none;
  background: white;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.textarea {
  width: 100%;
  min-height: 120px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 12px;
  border: 2px solid #d0d7de;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 12px;
}

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

.transcription-display {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  min-height: 60px;
}

.transcription-text {
  font-size: var(--text-sm);
  color: #6b7280;
  font-style: italic;
  min-height: 20px;
}

.transcription {
  margin-top: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  min-height: 40px;
  font-size: var(--text-sm);
  color: #6b7280;
  font-style: italic;
}

.transcription.empty {
  color: #9ca3af;
}

.recording-status {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
}

.recording-status.active {
  color: #dc2626;
  font-weight: 600;
}

.score {
  margin-top: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
}

.animation-panel {
  margin-top: 24px;
  padding: 24px;
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

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

.animation-header span {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-main);
}

.animation-controls {
  display: flex;
  gap: 8px;
}

#skip-animation-btn {
  padding: 8px 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition-base);
}

#skip-animation-btn:hover {
  background: var(--bg-input);
  color: var(--text-main);
  border-color: var(--text-muted);
}

#replay-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.2);
}

#replay-btn:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.animation {
  min-height: 80px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: 1.25rem;
  line-height: 1.6;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.animation-word {
  display: inline-block;
  margin: 0 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.animation-word.current {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
  transform: scale(1.1);
}

.animation-word.correct {
  background: #dcfce7;
  color: #166534;
}

.animation-word.incorrect {
  background: #fee2e2;
  color: #991b1b;
}

.anim-word {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 4px;
  border-radius: 4px;
}

.anim-empty {
  opacity: 0.3;
}

.anim-add {
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 600;
}

.anim-remove {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 600;
}

#result {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.result-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

.word {
  display: inline-block;
  margin: 0 2px;
  padding: 2px 4px;
  border-radius: 3px;
}

.word.match {
  background: transparent;
  color: var(--text-main);
}

.word.missing {
  background: #fee2e2;
  color: #991b1b;
  text-decoration: none;
}

.word.extra {
  background: #f3e8ff;
  color: #6b21a8;
  text-decoration: line-through;
}

.word.misplaced {
  background: #dbeafe;
  color: #1e40af;
  text-decoration: none;
}

.pronunciation-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #f8fafc;
}

.pronunciation-header {
  margin-bottom: 8px;
  font-weight: 600;
  color: #0f172a;
}

.pronunciation-subheader {
  margin-bottom: 12px;
  font-size: var(--text-sm);
  color: #6b7280;
  font-style: italic;
}

.pronunciation-words {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pronunciation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.pronunciation-word {
  min-width: 120px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
}

.pronunciation-record-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid #d0d7de;
  background: var(--bg-card);
  color: #111827;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pronunciation-record-btn:hover {
  background: #f3f4f6;
}

.pronunciation-record-btn.recording {
  background: #0891b2;
  color: white;
  border-color: #0891b2;
}

.pronunciation-status {
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
}



.breakdown-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #f8fafc;
}

.breakdown-header {
  margin-bottom: 12px;
  font-weight: 600;
  color: #0f172a;
}

.breakdown-options {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.breakdown-option-btn {
  padding: 8px 16px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: var(--bg-card);
  color: #6b7280;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.breakdown-option-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.breakdown-option-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.breakdown-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breakdown-line {
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}

.breakdown-line-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.breakdown-line-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #6b7280;
}

.breakdown-line-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.breakdown-play-btn,
.breakdown-record-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid #d0d7de;
  background: var(--bg-card);
  color: #111827;
  cursor: pointer;
  transition: background 0.2s ease;
}

.breakdown-play-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.breakdown-record-btn:hover {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

.breakdown-record-btn.recording {
  background: #0891b2;
  color: white;
  border-color: #0891b2;
}

.breakdown-status {
  font-size: 0.875rem;
  color: #6b7280;
  min-width: 120px;
}

.breakdown-status.correct {
  color: #166534;
  font-weight: 600;
}

.breakdown-status.incorrect {
  color: #b91c1c;
  font-weight: 600;
}

.skip-word-btn {
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid #d0d7de;
  background: var(--bg-card);
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skip-word-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.anim-transcription {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
  text-align: center;
}



/* Same Vocabulary Panel Styles */
.same-vocab-panel {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.same-vocab-header {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-main);
}

.same-vocab-subheader {
  margin-bottom: 16px;
  font-size: var(--text-sm);
  color: #6b7280;
  font-style: italic;
}

.same-vocab-sentences {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.same-vocab-item {
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #f8fafc;
}

.same-vocab-word-label {
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

.same-vocab-word-label strong {
  color: var(--text-main);
  font-size: 1rem;
}

.same-vocab-sentence {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--text-main);
  line-height: 1.5;
}

.same-vocab-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.same-vocab-play-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.same-vocab-play-btn:hover {
  background: var(--primary-hover);
}

.same-vocab-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 2px solid #d0d7de;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
}

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

.same-vocab-record-btn {
  padding: 8px 16px;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.same-vocab-record-btn:hover {
  background: #b91c1c;
}

.same-vocab-record-btn.recording {
  background: #0891b2;
  animation: pulse 1.5s infinite;
}

.same-vocab-transcription {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  min-height: 40px;
  background: #f8fafc;
  color: #6b7280;
  font-style: italic;
  box-sizing: border-box;
  word-wrap: break-word;
}

.same-vocab-transcription.empty {
  color: #9ca3af;
}

.same-vocab-check-btn {
  padding: 8px 16px;
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.same-vocab-check-btn:hover {
  background: #15803d;
}

.same-vocab-pick-another-btn {
  padding: 8px 16px;
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.same-vocab-pick-another-btn:hover {
  background: #6d28d9;
}

.same-vocab-status {
  margin-top: 8px;
  font-size: 0.875rem;
  min-height: 20px;
}

.same-vocab-status.correct {
  color: #16a34a;
  font-weight: 600;
}

.same-vocab-status.incorrect {
  color: #dc2626;
  font-weight: 600;
}

.same-vocab-status.error {
  color: #dc2626;
  font-weight: 600;
}

.legend {
  margin-top: 16px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
}

#result .legend {
  margin-top: 16px;
  margin-bottom: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chip {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.chip.missing {
  background: #fee2e2;
}

.chip.extra {
  background: #f3e8ff;
}

.chip.misplaced {
  background: #dbeafe;
}

.errors {
  color: #dc2626;
  font-weight: 600;
}

.success {
  color: #16a34a;
  font-weight: 600;
}

.ok {
  color: #16a34a;
  font-weight: 600;
}

.correct-sentence {
  margin-top: 12px;
  padding: 12px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
  font-size: var(--text-sm);
  color: #166534;
}

/* Extended Listening Styles */
.reading-phase {
  margin-top: 20px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.reading-timer {
  margin-bottom: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}

.reading-timer span {
  color: var(--text-main);
}

.reading-tip {
  text-align: center;
  margin-bottom: 20px;
  font-size: var(--text-sm);
  color: #64748b;
  font-style: italic;
}

.skip-reading-btn {
  display: block;
  margin: 0 auto 20px;
  padding: 10px 20px;
  background: #6b7280;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.skip-reading-btn:hover {
  background: #4b5563;
}

.full-transcript {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
  max-height: 400px;
  overflow-y: auto;
}

.clickable-word {
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  padding: 2px 1px;
  border-radius: 3px;
  display: inline-block;
}

.clickable-word:hover {
  background-color: #e0f2fe;
  color: #0369a1;
}

.clickable-word.word-speaking {
  background-color: #3b82f6;
  color: white;
  font-weight: 600;
}

.listening-phase {
  margin-top: 20px;
}

.check-result-box {
  margin-top: 12px;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 6px;
  color: #0c4a6e;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}

.check-result-box.is-correct {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}

.check-result-box.is-wrong {
  background: #fff1f2;
  border-color: #fb7185;
  color: #9f1239;
}

/* Collo-dictate Mode */
.collo-dictate-header {
  margin-bottom: 10px;
}

.collo-dictate-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.collo-dictate-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Collo-dictate Search */
.collo-search-container {
  margin: 10px 0 4px;
  max-width: 700px;
}

.collo-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card, #fff);
  border: 2px solid var(--border-light, #d0d7de);
  border-radius: 10px;
  padding: 8px 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.collo-search-wrapper:focus-within {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.collo-search-icon {
  font-size: 15px;
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.collo-search-wrapper:focus-within .collo-search-icon {
  opacity: 0.75;
  transform: scale(1.1);
}

.collo-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  color: var(--text-main, #1f2937);
  padding: 4px 0;
  min-width: 0;
}

.collo-search-input::placeholder {
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
}

.collo-search-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  padding: 3px 10px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  display: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.collo-search-count.visible {
  display: inline-block;
  animation: fadeCountIn 0.2s ease-out;
}

@keyframes fadeCountIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Clear ✕ button */
.collo-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--border-light, #d0d7de);
  color: var(--text-muted, #6b7280);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.collo-search-clear:hover {
  background: #b0b8c4;
  color: #1f2937;
  transform: scale(1.1);
}

.collo-search-clear:active {
  transform: scale(0.95);
}

.collo-search-clear.visible {
  display: flex;
}

/* Search hint */
.collo-search-hint {
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  line-height: 1.3;
}

.collo-search-hint.visible {
  opacity: 0.7;
  max-height: 24px;
  margin: 6px 0 0;
}

.collo-search-no-results {
  margin: 8px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fff8f0, #fff5eb);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  color: #9a3412;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: fadeSlideIn 0.3s ease-out;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.collo-search-no-results-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.collo-dictate-settings {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collo-setting-label {
  color: var(--text-muted);
  font-size: 13px;
}

.collo-dictate-stats {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.collo-dictate-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}

.collo-dictate-meta .question-id-display {
  margin-bottom: 0;
}

.collo-dictate-meta .current-question-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--text-sm);
}

.extended-audio-controls {
  background: #f9fafb;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

/* Notification Box */
.notification-box {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.important-notice {
  background-color: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}

.important-notice::before {
  content: "⚠️";
  font-size: 1.1rem;
}

.audio-controls-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.play-pause-btn {
  padding: 8px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.play-pause-btn:hover {
  background: var(--primary-hover);
}

.play-pause-btn:active {
  background: #1e40af;
}

.time-display {
  font-size: var(--text-sm);
  color: #6b7280;
  font-family: 'Courier New', monospace;
  min-width: 100px;
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.speed-control label {
  font-size: var(--text-sm);
  color: #374151;
  font-weight: 500;
}

.speed-select {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: var(--text-sm);
  background: white;
  color: #1f2937;
  cursor: pointer;
  transition: border-color 0.2s;
}

.speed-select:hover {
  border-color: #9ca3af;
}

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

.audio-slider-container {
  width: 100%;
}

.audio-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  transition: background-color 0.2s;
}

.audio-slider::-webkit-slider-thumb:hover {
  background: var(--primary-hover);
}

.audio-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
  transition: background-color 0.2s;
}

.audio-slider::-moz-range-thumb:hover {
  background: var(--primary-hover);
}

.gapped-transcript {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
  min-height: 200px;
}

.gap-input {
  display: inline-block;
  min-width: 100px;
  padding: 4px 8px;
  margin: 0 2px;
  border: 2px solid #d0d7de;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  text-align: center;
  background: var(--bg-card);
  color: var(--text-main);
}

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

.gap-input:disabled {
  cursor: pointer;
  pointer-events: auto;
}

.gap-input.support-mode-active {
  border-color: #4caf50;
  background-color: #f0fdf4;
}

.gap-input.support-mode-active::placeholder {
  color: #059669;
  font-weight: 600;
  letter-spacing: 1px;
}

.gap-speaker-icon {
  display: inline-block;
  margin-left: 4px;
  cursor: pointer;
  font-size: 1rem;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.gap-speaker-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

.gap-speaker-icon.icon-speaking {
  opacity: 1;
  transform: scale(1.2);
  filter: brightness(1.2);
}

/* Fill Phrases Section */
.fill-phrases-section {
  margin-top: 30px;
  padding: 20px;
  background: #f9fafb;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.fill-phrases-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.fill-phrases-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #1f2937;
}

.phrase-options {
  display: flex;
  gap: 16px;
  align-items: center;
}

.phrase-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: #374151;
}

.phrase-options input[type="radio"] {
  cursor: pointer;
}

.phrases-transcript {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
  min-height: 150px;
}

.phrase-input {
  display: inline-block;
  min-width: 150px;
  width: auto;
  padding: 4px 8px;
  margin: 0 2px;
  border: 2px solid #d0d7de;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  text-align: center;
  background: var(--bg-card);
  color: var(--text-main);
}

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

.phrase-input:disabled {
  cursor: not-allowed;
}

.phrase-input.support-mode-active {
  border-color: #4caf50;
  background-color: #f0fdf4;
}

.phrase-input.support-mode-active::placeholder {
  color: #059669;
  font-weight: 600;
  letter-spacing: 1px;
}

.phrase-controls {
  margin-top: 16px;
  display: flex;
  gap: 12px;
}

/* Video Mode Styles */
.video-url-container {
  margin-bottom: 20px;
}

.url-input-group {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.url-input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #d0d7de;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-family: inherit;
}

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

.insert-url-btn {
  padding: 10px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.insert-url-btn:hover {
  background: var(--primary-hover);
}

.video-container {
  margin-top: 20px;
}

.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  margin-bottom: 20px;
}

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.transcript-container {
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

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

.transcript-header span {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-main);
}

.toggle-transcript-btn {
  padding: 6px 12px;
  background: #6b7280;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle-transcript-btn:hover {
  background: #4b5563;
}

.transcript-content {
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-main);
  max-height: 400px;
  overflow-y: auto;
}

/* ============================================
   Authentication UI Styles
   ============================================ */

/* ============================================
   Right-Side Account Panel
   ============================================ */

.account-panel-side {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
}

/* Responsive: Adjust panels on small screens */
@media (max-width: 768px) {
  .account-panel-content {
    width: 280px;
  }

  .progress-panel-content {
    width: 320px;
  }

  .progress-panel-side.expanded .progress-panel-toggle {
    left: 320px;
  }


  .entry-modal-content {
    padding: 24px;
  }

  .entry-btn {
    padding: 20px;
  }

}

@media (max-width: 480px) {
  .progress-panel-content {
    width: 100vw;
  }

  .progress-panel-side.expanded .progress-panel-toggle {
    display: none;
  }

}

/* Toggle Button (Always Visible) */
.account-panel-toggle {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-right: 0;
}

.account-panel-toggle:hover {
  background: var(--primary-hover);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
}

.account-panel-side>.account-panel-toggle {
  display: none !important;
}

.toggle-icon {
  display: block;
}

/* Panel Content (Expanded State) */
.account-panel-content {
  background: var(--bg-card);
  width: 320px;
  min-height: 200px;
  max-height: calc(100vh - 40px);
  border-radius: 8px 0 0 8px;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  margin-right: 0;
}

.account-panel-side.expanded .account-panel-content {
  display: flex;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.panel-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-main);
}

.panel-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.panel-close-btn:hover {
  background: #f3f4f6;
  color: var(--text-main);
}

.panel-section {
  padding: 20px;
  flex: 1;
}

.panel-status {
  font-size: var(--text-sm);
  color: #6b7280;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.panel-user-info {
  margin-bottom: 20px;
}

.panel-email-label {
  font-size: var(--text-xs);
  color: #6b7280;
  margin: 0 0 4px 0;
  font-weight: 600;
}

.panel-email {
  font-size: var(--text-sm);
  color: var(--text-main);
  margin: 0;
  word-break: break-word;
}

.panel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel-btn {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
}

.panel-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.panel-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Primary: Light tinted blue that becomes solid and lifts on hover */
.panel-btn.primary {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  /* Darker blue text */
}

.panel-btn.primary:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
  border-color: transparent;
}

/* Secondary: Fully transparent, subtle hover */
.panel-btn.secondary {
  color: #4b5563;
  /* Gray */
}

.panel-btn.secondary:hover {
  background: #f3f4f6;
  color: var(--text-main);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Danger: Light tinted red that turns solid on hover */
.panel-btn.danger {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.panel-btn.danger:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}

.panel-guest-info,
.panel-guest-note {
  font-size: var(--text-xs);
  color: #6b7280;
  margin: 12px 0 0 0;
  text-align: center;
  font-style: italic;
}

/* ============================================
   Entry Choice Modal (First Visit)
   ============================================*/



/* Add CSS for the Start Review Card */
.dashboard-cta-card {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  padding: 24px;
  border-radius: 16px;
  margin: 20px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.2s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dashboard-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dashboard-cta-content h3 {
  margin: 0;
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.dashboard-cta-content p {
  margin: 0;
  opacity: 0.9;
}

.dashboard-cta-icon {
  font-size: 2.5rem;
}



.entry-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  overflow-y: auto;
  padding: 24px 16px;
  box-sizing: border-box;
}

.entry-modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.entry-modal-content h2 {
  margin: 0 0 12px 0;
  font-size: 1.75rem;
  color: var(--text-main);
}

.entry-modal-content>p {
  margin: 0 0 32px 0;
  font-size: 1rem;
  color: #6b7280;
}

.entry-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entry-btn {
  width: 100%;
  padding: 24px;
  background: var(--bg-card);
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.entry-btn:hover {
  border-color: var(--primary);
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.entry-btn.guest-btn:hover {
  border-color: #6b7280;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15);
}

.entry-icon {
  font-size: 32px;
  display: block;
}

.entry-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
}

/* The level picker offered three words and no way to tell them apart — a first-run
   forced choice with nothing to base it on. */
.entry-hint {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 32ch;
}

.entry-modal-lede {
  margin: 0 0 24px;
  color: var(--text-secondary, #475569);
  max-width: 52ch;
  margin-inline: auto;
}

.entry-desc {
  font-size: var(--text-sm);
  color: #6b7280;
}

.guest-import-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  z-index: 2200;
}

.guest-import-card {
  width: min(92vw, 520px);
  padding: 28px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.guest-import-card h3 {
  margin: 0 0 12px 0;
  font-size: 1.4rem;
  color: #0f172a;
}

.guest-import-card p {
  margin: 0 0 20px 0;
  line-height: 1.5;
  color: #475569;
}

.guest-import-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.guest-import-secondary,
.guest-import-primary {
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}

.guest-import-secondary {
  background: #e2e8f0;
  color: #0f172a;
}

.guest-import-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

/* ============================================
   Guest Mode Toast Notification
   ============================================ */

.guest-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2933;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 500px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.toast-icon {
  font-size: 18px;
}

.toast-message {
  flex: 1;
  font-size: var(--text-sm);
}

.toast-close {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  padding: 0;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Final Cleanup of old animation names if any */

/* ============================================
   Mastery Status UI
   ============================================ */

.mastery-status {
  margin-top: 8px;
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mastery-indicator {
  color: #15803d;
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}

.remove-mastery-btn {
  padding: 4px 12px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.remove-mastery-btn:hover {
  background: #fecaca;
  border-color: #f87171;
}

/* ============================================
   Question Select Dropdown Enhancements
   ============================================ */

.question-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hide-mastered-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}

.hide-mastered-checkbox:hover {
  color: var(--text-main);
}

.hide-mastered-input {
  cursor: pointer;
}

/* Mastery indicator in dropdown options */
.question-select option.mastered {
  color: #15803d;
  font-weight: 600;
}

.question-select option.mastered::before {
  content: "✅ ";
}

/* ============================================
   Question Navigation Wrapper (Back/Next buttons)
   ============================================ */

/* Navigation Row: Back + Dropdown + Next */
.question-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 6px;
}

.question-select.question-select-narrow {
  flex: 1;
  min-width: 120px;
  max-width: 280px;
}

.recommendation-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 6px;
  max-width: 560px;
}

.recommended-jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  color: #6366f1;
  /* AI Indigo styling */
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #6366f1, #a855f7) border-box;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sparkle-icon {
  margin-right: 6px;
  font-size: 1rem;
}

.recommended-jump-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  background: linear-gradient(var(--bg-hover), var(--bg-hover)) padding-box,
    linear-gradient(135deg, #4f46e5, #9333ea) border-box;
}

.recommended-jump-btn:active:not(:disabled) {
  transform: translateY(0);
}

.recommended-jump-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(100%);
  border-color: var(--border-light);
  background: var(--bg-card);
  color: var(--text-muted);
}

.recommendation-summary {
  font-size: var(--text-2xs);
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-style: italic;
  display: flex;
  align-items: center;
}

.recommendation-summary::before {
  content: '↳';
  margin-right: 4px;
  color: #94a3b8;
}

.recommendation-summary.is-hidden {
  display: none;
}

/* Filters Row: Status + Length side by side */
.question-filters-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Navigation Buttons */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-btn-back {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(75, 85, 99, 0.3);
}

.nav-btn-back:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(75, 85, 99, 0.4);
}

.nav-btn-back:active {
  transform: translateY(0);
}

.nav-btn-next {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.nav-btn-next:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.4);
}

.nav-btn-next:active {
  transform: translateY(0);
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================
   Left-Side Progress Panel (Fixed Drawer)
   Uses transform for slide-in animation
   ============================================ */

/* Toggle Button - Fixed on left edge, always visible */
.progress-panel-toggle {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1001;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  transition: left 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.progress-panel-toggle:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 3px 0 12px rgba(0, 0, 0, 0.2);
}

.progress-panel-toggle .toggle-icon {
  font-size: 1.3rem;
}

/* When panel is open, move toggle button to the right of the panel */
.progress-panel-side.expanded .progress-panel-toggle {
  left: 420px;
  border-radius: 0 8px 8px 0;
}

/* Panel Drawer - Off-screen by default, slides in */
.progress-panel-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 100vh;
  background: var(--bg-card);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* When expanded, slide panel into view */
.progress-panel-side.expanded .progress-panel-content {
  transform: translateX(0);
}

/* Panel Header */
.progress-panel-content .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  flex-shrink: 0;
}

.progress-panel-content .panel-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
}

.progress-panel-content .panel-close-btn {
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 1.2rem;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.progress-panel-content .panel-close-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Container div - just for grouping, no styles needed */

/* Progress Panel Sections */
.progress-panel-content .panel-section {
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.progress-panel-content .panel-section:last-child {
  border-bottom: none;
}

/* ============================================
   Track Progress (Progress modal body)
   --------------------------------------------
   Local token set, Mind Map --mm-* style: everything below reads var(--tp-*),
   so a future dark mode only has to re-declare this one block.
   ============================================ */

.progress-modal-content {
  --tp-surface: var(--bg-card, #ffffff);
  --tp-surface-dim: var(--gray-50, #f8f9fa);
  --tp-border: var(--border-light, #e2e8f0);
  --tp-text: var(--text-main, #0f172a);
  --tp-text-muted: var(--text-muted, #64748b);
  --tp-track: var(--gray-200, #e2e8f0);
  --tp-accent: var(--primary, #2563eb);

  /* Tier palette, matched to the app-wide state colours. */
  --tp-not-started: #6b7280;
  --tp-in-progress: #7c3aed;
  --tp-completed: #f59e0b;
  --tp-consolidated: #3b82f6;
  --tp-mastered: #22c55e;
  --tp-new: #6b7280;
  --tp-learning: #7c3aed;
  --tp-reviewing: #3b82f6;
  --tp-relearning: #f59e0b;
}

.tp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Sections ───────────────────────────────────────────── */

.tp-section {
  padding: 20px 0;
  border-top: 1px solid var(--tp-border);
}

.tp-section:first-child {
  border-top: none;
  padding-top: 4px;
}

.tp-section-title {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Type / Speak toggle ────────────────────────────────── */

.tp-segmented {
  display: inline-flex;
  background: var(--tp-surface-dim);
  border-radius: var(--radius-pill, 500px);
  padding: 4px;
  margin-bottom: 4px;
}

.tp-segmented-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--tp-text-muted);
  border-radius: var(--radius-pill, 500px);
  padding: 8px 22px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.tp-segmented-btn:hover:not(.is-active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--tp-text);
}

.tp-segmented-btn.is-active {
  background: var(--tp-surface);
  color: var(--tp-text);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
}

.tp-segmented-btn:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}

/* ── Hero (Vocabulary tab) ──────────────────────────────── */

.tp-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px 0 20px;
}

.tp-ring {
  --tp-ring-p: 0;
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--tp-mastered) calc(var(--tp-ring-p) * 1%), var(--tp-track) 0);
}

.tp-ring::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--tp-surface);
}

.tp-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tp-ring-caption {
  font-size: var(--text-2xs);
  color: var(--tp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tp-ring-value {
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

.tp-ring-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tp-text);
  font-variant-numeric: tabular-nums;
}

.tp-ring-unit {
  font-size: var(--text-xs);
  font-weight: 600;
}

.tp-hero-copy {
  min-width: 0;
}

.tp-hero-due {
  margin: 0;
  font-size: 1.05rem;
  color: var(--tp-text);
}

.tp-hero-due strong {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tp-hero-next {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--tp-text-muted);
}

.tp-hero-next strong {
  color: var(--tp-text);
  font-weight: 600;
}

/* ── Stat row ───────────────────────────────────────────── */

.tp-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.tp-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--r-inner, 18px);
  background: var(--tp-surface-dim);
}

.tp-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tp-text);
  font-variant-numeric: tabular-nums;
}

.tp-stat-label {
  font-size: 0.72rem;
  color: var(--tp-text-muted);
  letter-spacing: 0.01em;
}

/* ── Stacked distribution bar + legend ──────────────────── */

.tp-bar {
  display: flex;
  height: 12px;
  border-radius: var(--radius-pill, 500px);
  overflow: hidden;
  background: var(--tp-track);
}

.tp-bar-segment {
  height: 100%;
  transition: width 0.4s var(--ease-smooth, ease);
}

.tp-bar-segment[data-tier="not-started"] { background: var(--tp-not-started); }
.tp-bar-segment[data-tier="in-progress"] { background: var(--tp-in-progress); }
.tp-bar-segment[data-tier="completed"] { background: var(--tp-completed); }
.tp-bar-segment[data-tier="consolidated"] { background: var(--tp-consolidated); }
.tp-bar-segment[data-tier="mastered"] { background: var(--tp-mastered); }
.tp-bar-segment[data-tier="new"] { background: var(--tp-new); }
.tp-bar-segment[data-tier="learning"] { background: var(--tp-learning); }
.tp-bar-segment[data-tier="reviewing"] { background: var(--tp-reviewing); }
.tp-bar-segment[data-tier="relearning"] { background: var(--tp-relearning); }

.tp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.tp-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--tp-text-muted);
}

.tp-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tp-legend-dot[data-tier="not-started"] { background: var(--tp-not-started); }
.tp-legend-dot[data-tier="in-progress"] { background: var(--tp-in-progress); }
.tp-legend-dot[data-tier="completed"] { background: var(--tp-completed); }
.tp-legend-dot[data-tier="consolidated"] { background: var(--tp-consolidated); }
.tp-legend-dot[data-tier="mastered"] { background: var(--tp-mastered); }
.tp-legend-dot[data-tier="new"] { background: var(--tp-new); }
.tp-legend-dot[data-tier="learning"] { background: var(--tp-learning); }
.tp-legend-dot[data-tier="reviewing"] { background: var(--tp-reviewing); }
.tp-legend-dot[data-tier="relearning"] { background: var(--tp-relearning); }

.tp-legend-value {
  font-weight: 600;
  color: var(--tp-text);
  font-variant-numeric: tabular-nums;
}

/* ── Mastery sparkline ──────────────────────────────────── */

.tp-spark {
  height: 92px;
  border-radius: var(--r-inner, 18px);
  background: var(--tp-surface-dim);
  padding: 12px;
}

.tp-spark-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.tp-spark-area {
  fill: var(--tp-mastered);
  opacity: 0.12;
}

.tp-spark-line {
  fill: none;
  stroke: var(--tp-mastered);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tp-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--tp-text-muted);
}

/* ── Next goal ──────────────────────────────────────────── */

.tp-goal-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--tp-text);
}

/* ── Empty states ───────────────────────────────────────── */

.tp-empty {
  padding: 40px 24px;
  text-align: center;
}

.tp-empty-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tp-text);
}

.tp-empty-hint {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--tp-text-muted);
}

/* ── Recent list ────────────────────────────────────────── */

.recent-progress-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recent-progress-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: var(--text-sm);
  color: var(--tp-text);
  border-bottom: 1px solid var(--tp-border);
}

.recent-progress-list li:last-child {
  border-bottom: none;
}

.recent-progress-list li.no-progress {
  justify-content: flex-start;
  color: var(--tp-text-muted);
  border-bottom: none;
  font-size: var(--text-sm);
}

.recent-tier-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 500px);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.recent-tier-badge.completed {
  background: var(--gold-50, #fff8e7);
  color: var(--gold-800, #92400e);
}

.recent-tier-badge.consolidated {
  background: var(--blue-50, #eff6ff);
  color: var(--blue-800, #1e40af);
}

.recent-tier-badge.mastered {
  background: var(--green-100, #dcfce7);
  color: var(--green-800, #166534);
}

/* ── Guest notice (Question Mastery tab only) ───────────── */

.progress-content-wrapper {
  position: relative;
}

.progress-guest-notice {
  display: none;
  margin: 0 0 4px;
  padding: 14px 16px;
  border-radius: var(--r-inner, 18px);
  background: var(--tp-surface-dim);
  border: 1px solid var(--tp-border);
}

.progress-guest-notice .guest-notice-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-guest-notice .guest-notice-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.progress-guest-notice p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--tp-text-muted);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {
  .tp-hero {
    gap: 16px;
  }

  .tp-ring {
    width: 84px;
    height: 84px;
  }

  .tp-ring-value {
    font-size: 1.25rem;
  }

  .tp-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tp-section {
    padding: 16px 0;
  }
}

@media (max-width: 480px) {
  .tp-hero-due strong {
    font-size: 1.35rem;
  }

  .tp-stat-value {
    font-size: 1.3rem;
  }

  .tp-legend {
    gap: 6px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-bar-segment {
    transition: none;
  }
}

/* Click-outside overlay when panel is open */
.progress-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.progress-panel-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   Progress Bar (Question Header)
   ============================================ */

/* ── Stepped Mastery Tracker ─────────────────────────────── */

.progress-bar-container {
  margin: 6px 0;
  padding: 6px 0;
  flex: 1 1 100%;
  min-width: 0;
}

.progress-steps {
  display: flex;
  align-items: flex-start;
  max-width: 360px;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 56px;
  z-index: 1;
}

.progress-step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--border-light, #e5e7eb);
  background: var(--bg-card, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  position: relative;
  font-size: 0;
}

.progress-step.reached .progress-step-dot {
  border-color: transparent;
}

.progress-step.reached[data-tier="completed"] .progress-step-dot {
  background: #f59e0b;
}

.progress-step.reached[data-tier="consolidated"] .progress-step-dot {
  background: var(--primary, #3b82f6);
}

.progress-step.reached[data-tier="mastered"] .progress-step-dot {
  background: var(--success, #22c55e);
}

.progress-step.reached .progress-step-dot::after {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.progress-step.active .progress-step-dot {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.progress-step.active .progress-step-dot::after {
  content: attr(data-sub);
  font-size: 8px;
  font-weight: 600;
  color: var(--primary, #3b82f6);
  line-height: 1;
}

.progress-step-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted, #9ca3af);
  margin-top: 4px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.progress-step.reached .progress-step-label {
  color: var(--text-secondary, #6b7280);
}

.progress-step.reached[data-tier="mastered"] .progress-step-label {
  color: var(--success, #22c55e);
  font-weight: 600;
}

.progress-step.active .progress-step-label {
  color: var(--primary, #3b82f6);
  font-weight: 600;
}

.progress-connector {
  flex: 1;
  height: 3px;
  background: var(--border-light, #e5e7eb);
  border-radius: 2px;
  margin-top: 9px;
  position: relative;
  min-width: 16px;
}

.progress-connector-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  transition: width 0.4s ease, background 0.3s ease;
}

.progress-connector-fill.tier-completed {
  background: #f59e0b;
}

.progress-connector-fill.tier-consolidated {
  background: var(--primary, #3b82f6);
}

.progress-connector-fill.tier-mastered {
  background: var(--success, #22c55e);
}

.spc-slot-advanced-setting:has(.progress-bar-container) {
  flex: 1 1 auto;
}

/* ── Tier Info Row ───────────────────────────────────────── */

.progress-tier-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.progress-tier-badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill, 500px);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
}

.progress-tier-badge.tier-none,
.progress-tier-badge.state-not-started {
  background: var(--bg-input, #f3f4f6);
  color: var(--text-muted, #6b7280);
}

.progress-tier-badge.state-in-progress {
  background: #ede9fe;
  color: #6d28d9;
}

.progress-tier-badge.tier-completed,
.progress-tier-badge.state-completed {
  background: #fef3c7;
  color: #92400e;
}

.progress-tier-badge.tier-consolidated,
.progress-tier-badge.state-consolidated {
  background: #dbeafe;
  color: #1e40af;
}

.progress-tier-badge.tier-mastered,
.progress-tier-badge.state-mastered {
  background: #dcfce7;
  color: #166534;
}

.progress-target-text {
  font-size: var(--text-2xs);
  color: var(--text-muted, #9ca3af);
  margin-left: auto;
}

.reset-progress-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-muted, #9ca3af);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-progress-btn:hover {
  border-color: var(--danger, #dc2626);
  color: var(--danger, #dc2626);
  background: var(--danger-light, #fee2e2);
}

@media (max-width: 360px) {
  .progress-step-label {
    display: none;
  }

  .progress-step {
    width: 40px;
  }
}

/* ============================================
   Tier Filter Dropdown
   ============================================ */

.tier-filter-dropdown {
  position: relative;
  margin-top: 8px;
}

.tier-filter-btn {
  width: 100%;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: #6b7280;
  transition: all 0.2s ease;
}

.tier-filter-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.filter-arrow {
  font-size: var(--text-2xs);
  transition: transform 0.2s ease;
}

.tier-filter-dropdown.open .filter-arrow {
  transform: rotate(180deg);
}

.tier-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  margin-top: 4px;
  padding: 8px;
}

/* ============================================
   Unified Filter Dropdown Styles
   ============================================ */

/* Status Filter Button (same style as Length Filter) */
.status-filter-dropdown {
  position: relative;
  margin-left: 10px;
}

.status-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.status-filter-btn:hover {
  background: #e2e8f0;
  box-shadow: none;
}

.status-filter-dropdown.open .filter-arrow {
  transform: rotate(180deg);
}

.status-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  margin-top: 6px;
  padding: 8px;
  animation: dropdownFadeIn 0.2s ease-out;
}

/* Unified Filter Option - Highlighting Style */
.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: var(--text-sm);
  color: #374151;
}

.filter-option:hover {
  background: #f3f4f6;
}

/* Selected state - bold and underlined */
.filter-option.selected {
  background: transparent;
  color: #374151;
  font-weight: 700;
}

.filter-option.selected:hover {
  background: #f3f4f6;
}

.filter-option.selected .filter-option-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filter-option.selected .filter-option-icon,
.filter-option.selected .filter-option-text {
  color: #374151;
}

.filter-option-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.filter-option-text {
  flex: 1;
}

/* Length tags */
.length-tag {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 6px;
}

.length-tag.short {
  background: rgba(255, 255, 255, 0.3);
  color: inherit;
}

.length-tag.long {
  background: rgba(255, 255, 255, 0.3);
  color: inherit;
}

.filter-option:not(.selected) .length-tag.short {
  background: #dcfce7;
  color: #166534;
}

.filter-option:not(.selected) .length-tag.long {
  background: #fef3c7;
  color: #92400e;
}

/* Legacy tier filter styles (kept for compatibility)  */
.tier-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.tier-filter-option:hover {
  background: #f8fafc;
}

.tier-filter-option input[type="checkbox"] {
  cursor: pointer;
}

.tier-checkbox-label {
  font-size: var(--text-xs);
  font-weight: 500;
}

.tier-checkbox-label.completed {
  color: #92400e;
}

.tier-checkbox-label.consolidated {
  color: #1e40af;
}

.tier-checkbox-label.mastered {
  color: #166534;
}

.tier-checkbox-label.none,
.tier-checkbox-label.not-started {
  color: #6b7280;
}

.tier-checkbox-label.in-progress {
  color: #7c3aed;
}

/* Question select with state indicators */
.question-select option.state-not-started {
  color: #6b7280;
}

.question-select option.state-in-progress {
  color: #7c3aed;
}

.question-select option.state-completed {
  color: #92400e;
}

.question-select option.state-consolidated {
  color: #1e40af;
}

.question-select option.state-mastered {
  color: #166534;
}

/* Auth overlay (modal) */
.auth-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.auth-container {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.auth-form h2 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.5rem;
  color: var(--text-main);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-main);
  font-size: var(--text-sm);
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #d0d7de;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-family: inherit;
  box-sizing: border-box;
}

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

.auth-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 16px;
}

.auth-btn:hover {
  background: var(--primary-hover);
}

.auth-btn:active {
  background: #1e40af;
}

.auth-error {
  padding: 12px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: var(--text-sm);
}

.auth-success {
  padding: 12px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: var(--text-sm);
}

.auth-switch {
  text-align: center;
  margin: 0;
  font-size: var(--text-sm);
  color: #6b7280;
}

.auth-switch a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* Account Details Modal (Full Details) */
.account-details-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.account-details-content {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
}

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

.details-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-main);
}

.account-container h2 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.5rem;
  color: var(--text-main);
}

.account-info {
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item label {
  font-weight: 600;
  color: #6b7280;
  font-size: var(--text-sm);
}

.info-item .read-only {
  color: var(--text-main);
  font-size: var(--text-sm);
  text-align: right;
}

.account-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.account-btn {
  flex: 1;
  padding: 10px 16px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.account-btn:hover {
  background: var(--primary-hover);
}

.account-btn.logout-btn {
  background: #dc2626;
}

.account-btn.logout-btn:hover {
  background: #b91c1c;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.close-btn:hover {
  background: #f3f4f6;
  color: var(--text-main);
}

/* ============================================
   Practice Points Display (Account Panel)
   ============================================ */

.panel-points {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
  text-align: center;
}

.points-label {
  font-size: var(--text-2xs);
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 8px;
}

.points-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.points-icon {
  font-size: 1.5rem;
}

#panel-points-count {
  font-size: 2rem;
  font-weight: 800;
  color: #78350f;
  line-height: 1;
}

/* ============================================
   Points Toast Notification
   ============================================ */

.points-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.points-toast {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #fbbf24;
  border-left: 5px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 250px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: auto;
  animation: slideInRight 0.3s ease-out forwards;
  backdrop-filter: blur(8px);
}

.points-toast.hiding {
  animation: fadeOutRight 0.3s ease-in forwards;
}

.toast-content {
  display: flex;
  flex-direction: column;
}

.toast-title {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-main);
}

.toast-points {
  font-size: 1.1rem;
  font-weight: 800;
  color: #d97706;
}

.toast-icon {
  font-size: 1.5rem;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ============================================
   New Points & History Section (Account Panel)
   ============================================ */

.panel-points-section {
  margin-top: 24px;
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

/* Shopping Card in Panel */
.panel-shopping-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.panel-shopping-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: #7dd3fc;
}

.panel-shopping-card:active {
  transform: translateY(0);
}

.shopping-icon {
  font-size: 1.5rem;
}

.shopping-label {
  flex: 1;
  font-weight: 600;
  color: #0369a1;
  font-size: var(--text-sm);
}

.shopping-arrow {
  color: #0ea5e9;
  font-weight: bold;
  font-size: 1.2rem;
}

.panel-points-header {
  text-align: center;
  margin-bottom: 20px;
}

.points-value-large {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 2.5rem;
  font-weight: 800;
  color: #d97706;
  /* Amber-600 */
}

.points-value-large .points-icon {
  font-size: 2rem;
}

.panel-history {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  padding: 12px;
}

.panel-history h4 {
  margin: 0 0 10px 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.5px;
}

.points-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-item:hover {
  border-color: #fbbf24;
  background: #fffbeb;
  transform: translateX(2px);
}

.history-info {
  display: flex;
  flex-direction: column;
}

.history-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #374151;
}

.history-time {
  font-size: var(--text-2xs);
  color: #9ca3af;
}

.history-points {
  font-weight: 700;
  color: #d97706;
  font-size: var(--text-sm);
}

.history-empty {
  text-align: center;
  color: #9ca3af;
  padding: 12px;
  font-size: var(--text-sm);
  font-style: italic;
}

#hint-starter .hint-value {
  font-style: italic;
  font-weight: 500;
  color: #2563EB;
}

.srs-writing-instruction {
  font-size: var(--text-sm);
  color: #6B7280;
  margin-bottom: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Gamification Styles */
.srs-level-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.level-badge {
  background: linear-gradient(135deg, #b8860b, #d4a017);
  color: white;
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.xp-progress-container {
  width: 140px;
  height: 10px;
  background: #94a3b8;
  /* Darker track for contrast */
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.xp-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Confetti / Reward Animations */
@keyframes pop-scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.level-up-anim {
  animation: pop-scale 0.4s ease-in-out;
}

.history-empty {
  text-align: center;
  font-size: var(--text-xs);
  color: #9ca3af;
  padding: 10px;
  font-style: italic;
}

/* ============================================
   Explanation Modal
   ============================================ */

.explanation-content {
  max-width: 400px;
  text-align: center;
  border-top: 6px solid #fbbf24;
}

.explanation-points {
  font-size: 3rem;
  color: #d97706;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
}

#explanation-text {
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ============================================
   Points Toast Notification
   ============================================ */

.points-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  /* Stack upwards */
  gap: 12px;
  pointer-events: none;
}

.points-toast {
  background: white;
  border-left: 5px solid #fbbf24;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  max-width: 320px;
  animation: slideInRight 0.3s ease-out;
  pointer-events: auto;
  transition: all 0.3s ease;
}

.toast-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.toast-title {
  font-weight: 700;
  color: var(--text-main);
  font-size: var(--text-sm);
}

.toast-points {
  color: #d97706;
  font-size: var(--text-xs);
  font-weight: 600;
}

.toast-icon {
  font-size: 1.5rem;
}

.points-toast.hiding {
  opacity: 0;
  transform: translateX(20px);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   Shopping Modal - Redesigned
   ============================================ */

.shopping-modal-content {
  text-align: center;
  padding: 40px 48px !important;
  max-width: 580px;
  border-top: 6px solid #8b5cf6;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
}

.shopping-header {
  margin-bottom: 32px;
}

.shopping-icon {
  font-size: 4rem;
  margin-bottom: 12px;
}

.shopping-modal-content h2 {
  margin: 0 0 20px 0;
  color: #5b21b6;
  font-size: 1.75rem;
  font-weight: 700;
}

.shopping-points-display {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #fbbf24;
  border-radius: 16px;
  padding: 16px 32px;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

.shopping-points-display .points-icon {
  font-size: 1.75rem;
}

.shopping-points-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: #92400e;
}

.shopping-points-label {
  font-size: var(--text-xs);
  color: #78350f;
  font-weight: 600;
}

/* Feedback Messages */
.shopping-feedback {
  padding: 14px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: var(--text-sm);
}

.shopping-feedback.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.shopping-feedback.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.shopping-feedback.info {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

/* Bottom Close Button for Modals */
.modal-close-bottom-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  margin-top: 24px;
  background: var(--bg-card);
  color: #374151;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close-bottom-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.modal-close-bottom-btn:active {
  background: #f3f4f6;
}

/* Rewards Table */
.shopping-table-container {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.shopping-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.shopping-table thead {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

.shopping-table th {
  padding: 18px 20px;
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shopping-table th:last-child {
  text-align: center;
}

.shopping-table tbody tr {
  background: white;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.2s ease;
}

.shopping-table tbody tr:hover {
  background: #faf5ff;
}

.shopping-table tbody tr:last-child {
  border-bottom: none;
}

.shopping-table td {
  padding: 24px 20px;
  vertical-align: middle;
}

.shopping-table td:nth-child(2) {
  text-align: center;
}

.reward-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reward-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
}

.reward-description {
  font-size: var(--text-xs);
  color: #6b7280;
  line-height: 1.4;
}

.reward-cost {
  font-weight: 700;
  color: #7c3aed;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.reward-cost .cost-icon {
  font-size: 1rem;
}

/* Unlock Button */
.shopping-unlock-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 130px;
}

.shopping-unlock-btn.available {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

.shopping-unlock-btn.available:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

.shopping-unlock-btn.processing {
  background: #e5e7eb;
  color: #6b7280;
  cursor: wait;
}

.shopping-unlock-btn.unlocked {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  cursor: default;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

.shopping-unlock-btn.insufficient {
  background: #fef3c7;
  color: #92400e;
  border: 2px solid #fbbf24;
  cursor: not-allowed;
}

.unlocked-timestamp {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 400;
  margin-top: 4px;
  opacity: 0.9;
}

/* Tutorial Button in Shopping Table */
.shopping-tutorial-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shopping-tutorial-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.shopping-tutorial-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.shopping-tutorial-btn .btn-icon {
  font-size: 1rem;
}

/* ============================================
   Modern Control Buttons
   ============================================ */

.modern-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.modern-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.modern-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.modern-btn:disabled:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.modern-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Play Button - Blue */
.modern-btn--play {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.modern-btn--play:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* Check Button - Green */
.modern-btn--check {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
}

.modern-btn--check:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* Back Button - Slate */
.modern-btn--back {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  color: white;
}

.modern-btn--back:hover {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

/* Retry Button - Orange/Amber */
.modern-btn--retry {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.modern-btn--retry:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Record Button - Red/Pink */
.modern-btn--record {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: white;
}

.modern-btn--record:hover {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
}

.modern-btn--record.recording {
  background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);
  animation: pulse 1.5s infinite;
}

/* Hint Button - Light/Outline */
.modern-btn--hint {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.modern-btn--hint:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* ============================================
   Read Aloud — Toggle Groups & Controls
   ============================================ */

.ra-listen-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ra-toggle-group {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  background: #e5e7eb;
}

.ra-toggle-btn {
  padding: 6px 14px;
  font-size: var(--text-xs);
  border: none;
  cursor: pointer;
  background: transparent;
  color: #4b5563;
  font-weight: 500;
  transition: all 0.2s;
  border-radius: 6px;
}

.ra-toggle-btn.ra-toggle-active {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ── Filter Pills ── */
.ra-filter-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-light, #e5e7eb);
  background: transparent;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.2s;
}

.ra-filter-pill.active {
  border-color: var(--brand-primary, #2563eb);
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand-primary, #2563eb);
}

.ra-filter-pill:hover:not(.active) {
  border-color: #9ca3af;
  color: #374151;
}

/* ── Voice Picker Split Button ── */
.ra-voice-picker-btn {
  padding: 7px 14px;
  font-size: var(--text-xs);
  border: 2px solid #e5e7eb;
  border-right: none;
  cursor: pointer;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1f2937);
  font-weight: 500;
  transition: all 0.2s;
  border-radius: 8px 0 0 8px;
  min-width: 160px;
  text-align: left;
}

.ra-voice-picker-btn:hover {
  border-color: #9ca3af;
}

.ra-voice-dropdown-toggle {
  padding: 7px 10px;
  font-size: var(--text-xs);
  border: 2px solid #e5e7eb;
  cursor: pointer;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1f2937);
  font-weight: 500;
  transition: all 0.2s;
  border-radius: 0 8px 8px 0;
}

.ra-voice-dropdown-toggle:hover {
  border-color: #9ca3af;
}

.ra-voice-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-primary, #fff);
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: var(--spc-z-sticky, 500);
  padding: 6px;
}

/* ============================================
   Read Aloud — Unified Card Style
   ============================================ */

/* ============================================
   Speaking practice — focus width
   ============================================
   The 1100px reading column is right for prose and wrong for a practice
   workbench: Read Aloud needs a passage and its coach side by side, and neither
   breathes inside it. Practice modes widen the container instead of breaking
   out of it with negative-margin full-bleed hacks, so `.mode-panel`'s
   overflow-x: clip and box-sizing stay intact. Toggled by the ⛶ button in the
   controller's primary row; on by default. */
body.spc-focus .container {
  max-width: min(1560px, 100vw - 32px);
  padding: 0 24px 24px;
  margin-top: 20px;
}

/* Wide layout also means less standing chrome above the fold. */
body.spc-focus .main-header {
  margin-bottom: 12px;
}

body.spc-focus .main-header h1 {
  font-size: 1.4rem;
}

@media (max-width: 900px) {
  body.spc-focus .container {
    padding: 0 14px 20px;
  }
}

.ra-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #dadce0);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
  padding: 20px;
}

.ra-card--results {
  text-align: center;
}

.ra-card--results[style*="display: none"] {
  /* Allow JS display toggle to work */
}

.ra-card--coach {
  text-align: left;
}

/* ============================================
   Read Aloud — Settings Gear Button (SPC row)
   ============================================ */

.ra-settings-gear {
  /* Inherits .spc-view-toggle-btn base from the class already applied */
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  color: var(--text-muted, #5f6368);
  transition: color 0.2s, background 0.2s;
}

.ra-settings-gear:hover {
  color: var(--primary, #1a73e8);
  background: rgba(26, 115, 232, 0.08);
}

/* ============================================
   Grammar Warning Modal
   ============================================ */

.grammar-warning-content {
  text-align: center;
  padding: 32px !important;
  max-width: 420px;
  border-top: 6px solid #f59e0b;
}

.grammar-warning-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
}

.grammar-warning-content h2 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #92400e;
}

.grammar-warning-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.grammar-warning-list li {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  color: #78350f;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

.grammar-warning-list li:last-child {
  margin-bottom: 0;
}

.grammar-warning-list .warning-bullet {
  font-size: 1.2rem;
}

/* ============================================
   Length Filter Dropdown (matches Status Filter)
   ============================================ */

.length-filter-dropdown {
  position: relative;
  margin-left: 10px;
}

.length-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.length-filter-btn:hover {
  background: #e2e8f0;
  box-shadow: none;
}

.length-filter-btn .filter-arrow {
  font-size: var(--text-2xs);
  transition: transform 0.2s ease;
}

.length-filter-dropdown.open .length-filter-btn .filter-arrow {
  transform: rotate(180deg);
}

.length-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  margin-top: 6px;
  padding: 8px;
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.length-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.length-filter-option:hover {
  background: #f3f4f6;
}

.length-filter-option input[type="radio"] {
  cursor: pointer;
  accent-color: #7c3aed;
}

.length-option-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
}

.length-tag {
  font-size: var(--text-2xs);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.length-option-label.short .length-tag {
  background: #dcfce7;
  color: #166534;
}

.length-option-label.long .length-tag {
  background: #fef3c7;
  color: #92400e;
}

/* ============================================
   Interactive Tutorial Overlay
   ============================================ */

/* ============================================
   Difficulty Filter Dropdown (matches Length Filter)
   ============================================ */

.difficulty-filter-dropdown {
  position: relative;
  margin-left: 10px;
}

#difficulty-filter-container-extended.difficulty-filter-dropdown {
  margin-left: 0;
}

.difficulty-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.difficulty-filter-btn:hover {
  background: #e2e8f0;
  box-shadow: none;
}

.difficulty-filter-btn .filter-arrow {
  font-size: var(--text-2xs);
  transition: transform 0.2s ease;
}

.difficulty-filter-dropdown.open .difficulty-filter-btn .filter-arrow {
  transform: rotate(180deg);
}

.difficulty-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  margin-top: 6px;
  padding: 8px;
  animation: dropdownFadeIn 0.2s ease-out;
}

.difficulty-tag {
  font-size: var(--text-2xs);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.difficulty-tag.easy {
  background: #dcfce7;
  color: #166534;
}

.difficulty-tag.medium {
  background: #fef3c7;
  color: #92400e;
}

.difficulty-tag.hard {
  background: #fee2e2;
  color: #991b1b;
}


.tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1s ease;
}

.tutorial-overlay.active {
  opacity: 1;
}

.tutorial-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s ease;
}

.tutorial-spotlight {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  transition: opacity 1.5s ease;
  pointer-events: none;
  z-index: 20001;
}

.tutorial-spotlight.pulse {
  animation: spotlightPulse 2s infinite;
}

@keyframes spotlightPulse {

  0%,
  100% {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(139, 92, 246, 0.4);
  }

  50% {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 0 10px rgba(139, 92, 246, 0.4);
  }
}

.tutorial-tooltip {
  position: absolute;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border-radius: 16px;
  padding: 24px;
  max-width: 360px;
  width: calc(100% - 40px);
  /* Responsive width with padding */
  box-sizing: border-box;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(148, 163, 184, 0.1);
  color: #f1f5f9;
  z-index: 20002;
  animation: tooltipEntrance 0.3s ease-out;
}

@keyframes tooltipEntrance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.tutorial-tooltip::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #1e293b;
  transform: rotate(45deg);
  z-index: -1;
}

.tutorial-tooltip.arrow-top::before {
  top: -8px;
  left: var(--arrow-left, 50%);
  margin-left: -8px;
}

.tutorial-tooltip.arrow-bottom::before {
  bottom: -8px;
  left: var(--arrow-left, 50%);
  margin-left: -8px;
}

.tutorial-tooltip.arrow-left::before {
  left: -8px;
  top: 50%;
  margin-top: -8px;
}

.tutorial-tooltip.arrow-right::before {
  right: -8px;
  top: 50%;
  margin-top: -8px;
}

.tutorial-tooltip.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tutorial-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tutorial-icon {
  font-size: 2rem;
}

.tutorial-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #ffffff;
  font-weight: 700;
}

.tutorial-text {
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 20px 0;
  font-size: var(--text-sm);
}

.tutorial-text strong {
  color: #818cf8;
  font-weight: 600;
}

.tutorial-subtle {
  margin-top: 10px;
  font-size: var(--text-sm);
  color: rgba(148, 163, 184, 0.92);
}

.tutorial-media {
  margin: 12px 0 10px;
}

.tutorial-media-img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.tutorial-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.tutorial-media-thumb {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.35);
}

.tutorial-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tutorial-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tutorial-skip-btn {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.tutorial-skip-btn:hover {
  color: #f1f5f9;
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.4);
}

.tutorial-next-btn {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  flex: 1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.tutorial-next-btn:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.tutorial-progress {
  display: flex;
  justify-content: center;
}

.tutorial-dots {
  display: flex;
  gap: 8px;
}

.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.3);
  transition: all 0.2s ease;
}

.tutorial-dot.active {
  background: #6366f1;
  width: 24px;
  border-radius: 4px;
}

.tutorial-dot.completed {
  background: #10b981;
}

/* Mobile responsiveness for general tutorial */
@media (max-width: 480px) {
  .tutorial-tooltip {
    width: calc(100vw - 32px);
    max-width: none;
    padding: 20px;
  }

  .tutorial-icon {
    font-size: 2rem;
  }

  .tutorial-header h3 {
    font-size: 1.1rem;
  }

  .tutorial-text {
    font-size: var(--text-sm);
  }

  .tutorial-actions {
    flex-direction: column;
  }

  .tutorial-btn {
    width: 100%;
  }
}

/* ============================================
   Vocabulary Book Panel
   ============================================ */

.vocab-panel-side {
  position: fixed;
  left: 0;
  /* Panel Container - spans full height */
  top: 0;
  /* Full height */
  height: 100vh;
  /* Full page height */
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  /* Align to top so we can manually push down */
  flex-direction: row-reverse;
  pointer-events: none;
}

.vocab-panel-toggle {
  /* Reset default button styles */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;

  /* Flexbox for icon centering */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Dimensions & Visuals */
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  font-size: 1.25rem;

  /* Positioning */
  position: relative;
  /* Relative to the flex container (side panel) */
  z-index: 3002;
  /* Must be clickable */
  pointer-events: auto;

  /* Push down significantly to avoid middle and overlapping progress */
  /* If Progress is centered at 50vh, let's put this at ~65vh */
  margin-top: 65vh;
}

.progress-panel-toggle,
.vocab-panel-toggle {
  display: none !important;
}

.vocab-panel-content {
  /* Animation properties */
  width: 0;
  padding: 0;
  opacity: 0;
  overflow-x: hidden;
  /* Allow vertical scrolling */
  overflow-y: auto;

  /* Dimensions to match Account/Stats panel */
  height: 100%;
  /* Fill parent (100vh) */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  background: white;
  border-radius: 0 8px 8px 0;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);

  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    visibility 0s linear 0.3s;

  /* Collapsing by width alone left the panel's buttons in the tab order: a keyboard walk
     of the practice page went brand -> header -> "Add New Word" -> "Close" -> "Reset
     Cache" inside a panel that is off-screen, before reaching any page content.
     `visibility: hidden` removes them; the delay lets the close animation finish first.
     (.account-panel-content already uses display:none and was never affected.) */
  visibility: hidden;

  white-space: nowrap;
  pointer-events: auto;
}

/* ... existing styles ... */

.vocab-word-item {
  background: white;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  /* Scaled for 420px panel width */
  padding: 18px 24px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* ... existing styles ... */

.vocab-scroll-list {
  /* Increase max height since panel is now taller */
  max-height: calc(100vh - 400px);
  overflow-y: auto;
  padding-right: 4px;
}

.vocab-panel-side.expanded .vocab-panel-content {
  width: 420px;
  padding: 20px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Ensure inner content doesn't break layout during slide */
.vocab-panel-content>* {
  min-width: 288px;
  /* 320px - 32px padding */
}

.vocab-panel-side.expanded .vocab-panel-toggle {
  border-radius: 0;
  /* Flatten left side when connected */
  box-shadow: none;
  /* Merge look */
}

/* Panel Exclusivity: Hide Vocab toggle when Progress panel is open */
.progress-panel-side.expanded~.vocab-panel-side .vocab-panel-toggle {
  opacity: 0;
  pointer-events: none;
}

/* Panel Exclusivity: Hide Progress toggle when Vocab panel is open */
.progress-panel-side:has(~ .vocab-panel-side.expanded) .progress-panel-toggle {
  opacity: 0;
  pointer-events: none;
}

.vocab-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #cbd5e1;
}

.vocab-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.vocab-section h4 {
  margin: 0 0 6px 0;
  padding: 10px 14px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e40af;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vocab-section-desc {
  margin: 0 0 14px 0;
  padding-left: 18px;
  font-size: var(--text-xs);
  color: #64748b;
}


.vocab-scroll-list::-webkit-scrollbar {
  width: 6px;
}

.vocab-scroll-list::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.vocab-show-all-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  color: #0369a1;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vocab-show-all-btn:hover {
  background: linear-gradient(135deg, #bae6fd 0%, #e0f2fe 50%, #bae6fd 100%);
  border-color: #7dd3fc;
  color: #0c4a6e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

/* Modern Vocab Items */
.vocab-word-item {
  background: white;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.vocab-word-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  border-color: #dbeafe;
}

.vocab-word-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vocab-word-text {
  font-weight: 600;
  color: #1e293b;
  font-size: 1.05rem;
}

.vocab-word-badges {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.vocab-badge {
  font-size: var(--text-2xs);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.vocab-badge-mode {
  background-color: #f1f5f9;
  color: #64748b;
}

.vocab-badge-q {
  background-color: #eff6ff;
  color: #3b82f6;
}

.vocab-badge-miss {
  background-color: #fee2e2;
  color: #ef4444;
}

.vocab-word-streak {
  display: flex;
  align-items: center;
  gap: 4px;
}

.streak-dots {
  display: flex;
  gap: 3px;
}

.streak-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #e2e8f0;
}

.streak-dot.filled {
  background-color: #22c55e;
}

.vocab-streak-mastered .streak-dot {
  background-color: #fbbf24;
}

.vocab-word-remove {
  opacity: 0;
  transition: opacity 0.2s;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.vocab-word-item:hover .vocab-word-remove {
  opacity: 1;
}

.vocab-word-remove:hover {
  color: #ef4444;
  background-color: #fee2e2;
  border-radius: 4px;
}

.vocab-add-word-item input {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.vocab-add-word-item label {
  cursor: pointer;
  flex: 1;
  font-size: 1.1em;
}

.vocab-word-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vocab-empty {
  padding: 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
  background: #f8fafc;
  border-radius: 8px;
}

.vocab-word-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: var(--text-sm);
}

.vocab-word-text {
  font-weight: 600;
  color: var(--text-main);
}

.vocab-word-meta {
  font-size: var(--text-2xs);
  color: #6b7280;
}

.vocab-word-remove {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  transition: color 0.2s ease;
}

.vocab-word-remove:hover {
  color: #dc2626;
}

.vocab-word-streak {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  color: #16a34a;
}

.vocab-word-miss-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  color: #dc2626;
}

/* ============================================
   Add to Vocabulary Modal
   ============================================ */

/* ============================================
   Add to Vocabulary Modal (Redesigned Centered)
   ============================================ */

.vocab-add-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1100;
  background: rgba(15, 23, 42, 0.4);
  /* Soft midnight backdrop */
  backdrop-filter: blur(8px);
  /* Premium blur effect */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.vocab-add-content {
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 32px;
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  /* Ensure content stays within border behavior */
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.vocab-add-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #f8fafc;
  padding-bottom: 16px;
}

.vocab-add-header h4 {
  margin: 0;
  font-size: 1.4rem;
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vocab-add-close {
  background: #f1f5f9;
  border: none;
  font-size: 1.5rem;
  color: #64748b;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vocab-add-close:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: rotate(90deg);
}

.vocab-add-desc {
  margin-bottom: 24px;
  font-size: 1rem;
  line-height: 1.5;
  color: #475569;
}

.vocab-add-notice {
  margin: -12px 0 16px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.4;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.vocab-add-notice.tone-warn {
  background: #fff7ed;
  color: #b45309;
  border-color: #fed7aa;
}

.vocab-add-notice.tone-info {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.vocab-add-words {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  overflow-y: auto;
  padding: 4px 12px 4px 4px;
  /* Space for shadows/scroll */
  flex: 1;
  min-height: 0;
}

/* Scrollbar Styling */
.vocab-add-words::-webkit-scrollbar {
  width: 6px;
}

.vocab-add-words::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.vocab-add-words::-webkit-scrollbar-track {
  background: transparent;
}

/* Word Item: Vertical Stack */
.vocab-add-word-item {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-sizing: border-box;
}

.vocab-add-word-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.vocab-add-word-item.selected {
  background: #fdf2f8;
  /* Very light pink/purple splash */
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px #7c3aed;
}

.vocab-add-word-item.is-duplicate {
  opacity: 0.78;
  cursor: default;
}

/* Top Row: Word Information */
.vocab-word-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  box-sizing: border-box;
  width: 100%;
}

.vocab-capture-duplicate {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
}

.vocab-capture-type {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vocab-add-word-item input[type="checkbox"] {
  accent-color: #7c3aed;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.vocab-word-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vocab-word-label .word {
  font-weight: 800;
  color: #0f172a;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.vocab-word-label .translation {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.vocab-expand-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vocab-expand-btn::after {
  content: '▼';
  font-size: 0.6rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vocab-expand-btn.active {
  background: #7c3aed;
  color: white;
  border-color: #7c3aed;
}

.vocab-expand-btn.active::after {
  transform: rotate(180deg);
}

.vocab-expand-btn:hover:not(.active) {
  background: #f1f5f9;
  color: #0f172a;
}

/* Details Section (Sentences) */
.vocab-word-details {
  padding: 20px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vocab-details-sentences {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vocab-detail-sentence {
  background: white;
  padding: 14px 18px 14px 40px;
  /* Increased left padding for icon */
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  position: relative;
}

.vocab-detail-sentence::before {
  content: '❝';
  /* Quote mark for example context */
  position: absolute;
  left: 14px;
  /* Inside the box */
  top: 10px;
  font-size: 1.4rem;
  color: #cbd5e1;
  line-height: 1;
  font-family: serif;
  /* Classic quote look */
}

.vocab-detail-sentence .vi {
  color: #1e293b;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 6px;
}

.vocab-detail-sentence .en {
  color: #64748b;
  font-size: var(--text-sm);
  font-style: italic;
  display: block;
}

.vocab-no-sentences {
  font-size: var(--text-sm);
  color: #94a3b8;
  font-style: italic;
  text-align: center;
  padding: 12px;
}

/* Modal Actions */
.vocab-add-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.vocab-add-btn {
  flex: 3;
  padding: 14px 24px;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
}

.vocab-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.4);
  filter: brightness(1.1);
}

.vocab-skip-btn {
  flex: 1;
  padding: 14px 24px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vocab-skip-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-2px);
}

/* Vocabulary Panel Overlay */
.vocab-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Match Stats panel dimness (20% black) */
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* NO blur - just dim */
}

.vocab-panel-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The Vocabulary Book panel is `top: 0; height: 100vh` and its first 76px hold the
   panel header — the "+" add-word button and the "x" close button. `.site-header` is
   `position: fixed` at z-index 1100 across that same band, so while this rule held the
   panel at 1001 the header painted over both buttons and swallowed their clicks:
   elementFromPoint at the centre of each resolved to `.site-header__brand-subtitle`,
   and Playwright could not click either one.

   The panel's own declaration (see `.vocab-panel-side` above) is z-index 3000, which
   clears the header. This override predates the site header and was written to beat a
   z-index 1000 overlay — 3000 satisfies that intent too, so the override is now only
   the exclusivity note it always meant to be. */
.vocab-panel-side {
  z-index: 3000;
}

/* Follows the panel up. At 1002 this modal sat below both the panel and the site
   header, so its top edge was covered by the header on every open. */
.vocab-add-modal {
  z-index: 3001 !important;
}

/* Improving Words Toggle Button */
.vocab-improving-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  color: #065f46;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vocab-improving-toggle:hover {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #6ee7b7;
}

.vocab-improving-toggle.expanded {
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.improving-icon {
  font-size: 1.1rem;
}

.improving-text {
  flex: 1;
  text-align: left;
}

.improving-count {
  background: #10b981;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--text-2xs);
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.improving-chevron {
  font-size: var(--text-2xs);
  transition: transform 0.2s ease;
}

.vocab-improving-toggle.expanded .improving-chevron {
  transform: rotate(180deg);
}

/* Improving Words List Container */
.vocab-improving-list {
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.vocab-improving-list .vocab-empty {
  background: #ecfdf5;
  color: #059669;
}

/* Improved word item styling */
.vocab-word-item.vocab-improved {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #a7f3d0;
}

.vocab-badge-improved {
  background: #10b981;
  color: white;
}







/* Progress Modal Tabs - pill tray, matching the app's segmented controls */
.progress-tabs {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  padding: 4px;
  margin: 0 20px 4px;
  background: var(--tp-surface-dim, #f8f9fa);
  border-radius: var(--radius-pill, 500px);
}

.progress-tab-btn {
  flex: 1;
  appearance: none;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill, 500px);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tp-text-muted, #64748b);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.progress-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--tp-text, #0f172a);
}

.progress-tab-btn.active {
  background: var(--tp-surface, #ffffff);
  color: var(--tp-text, #0f172a);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
}

.progress-tab-btn:focus-visible {
  outline: 2px solid var(--tp-accent, #2563eb);
  outline-offset: 2px;
}

/* Progress Tab Content */
.progress-tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 20px;
  position: relative; /* positioning context for the guest notice */
}

.progress-tab-content.active {
  display: block;
}

.progress-tab-content:focus-visible {
  outline: none;
}

@media (max-width: 480px) {
  .progress-tabs {
    margin: 0 12px 4px;
  }

  .progress-tab-btn {
    padding: 10px 8px;
    font-size: 0.82rem;
  }

  .progress-tab-content {
    padding: 8px 12px 16px;
  }
}

/* ============================================
   Progress & Attempts Modal
   --------------------------------------------
   Decoupled from .vocab-list-modal / .vocab-list-content-modal /
   .vocab-list-header so the Vocab Book redesign cannot restyle this
   modal by accident. The modal sits above the fixed site header while
   remaining below the dedicated attempt-review overlay.
   ============================================ */

.progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.progress-modal.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* padding is 0 here on purpose: the header, tab tray and panels each own
   their own inset, so the modal box does not double up on them. */
.progress-modal-content {
  background: var(--tp-surface, #ffffff);
  width: 95%;
  max-width: 1100px;
  height: auto;
  max-height: 90vh;
  border-radius: var(--r-card, 22px);
  padding: 0;
  box-shadow: var(--sh-2, 0 18px 60px rgba(15, 23, 42, 0.12));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  position: relative;
}

.progress-modal-header {
  flex-shrink: 0;
  padding: 20px 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
}

.progress-modal-header h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tp-text, #0f172a);
}

/* Custom layout adjustment for progress attempts content modal to be slightly smaller width */
.progress-attempts-content-modal {
  max-width: 750px !important;
}

/* Mobile: full-screen. MUST stay after .progress-attempts-content-modal — both
   rules set max-width with !important at equal specificity, so source order is
   the tiebreak. This reproduces the original cascade, where the mobile override
   lived later in the file than the 750px rule. */
@media (max-width: 640px) {
  .progress-modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .progress-modal-header {
    padding: 12px 16px;
    flex-shrink: 0;
  }
}

/* Hide legacy floating progress side panel elements */
.progress-panel-side,
.progress-panel-toggle,
.progress-panel-overlay {
  display: none !important;
}

/* PTE Attempt History List inside modal */
.pte-attempt-history__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pte-attempt-history__title {
  font-size: 1rem;
  margin: 0;
  color: #111827;
  font-weight: 600;
}

.pte-attempts-refresh-btn {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pte-attempts-refresh-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.pte-attempt-history__list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.pte-attempt-history__item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  text-align: left;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  color: #1f2937;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pte-attempt-history__item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pte-attempt-history__item:active {
  transform: translateY(0);
  background: #f1f5f9;
}

.pte-attempt-history__item-meta {
  color: #6b7280;
  font-size: var(--text-xs);
  font-weight: 400;
}

.pte-attempt-history__empty {
  padding: 24px;
  text-align: center;
  color: #6b7280;
  font-size: var(--text-sm);
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.pte-attempt-history__loading {
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  font-size: var(--text-sm);
}


.vocab-phonetic {
  font-family: 'Consolas', 'Monaco', monospace;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.vocab-audio-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px 8px;
  border-radius: 50%;
  transition: background 0.2s;
  color: #3b82f6;
}

.vocab-audio-btn:hover {
  background: #eff6ff;
}

/* Inline audio button (next to phonetic transcription) */
.vocab-audio-btn-inline {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
  color: #64748b;
  vertical-align: middle;
}

.vocab-audio-btn-inline:hover {
  background: #e2e8f0;
  color: #3b82f6;
  transform: scale(1.1);
}

/* Pronunciation cell layout */
.pronunciation-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-icon-remove {
  color: #ef4444;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.1rem;
  padding: 4px;
  border-radius: 4px;
}

.btn-icon-remove:hover {
  background: #fee2e2;
}

/* ============================================
   Watch Mode Styles
   ============================================ */

/* Video List View */
.watch-video-list-view {
  padding: 20px;
}

.watch-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.watch-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #1f2937;
  flex: 1;
}

.watch-search input {
  padding: 10px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: var(--text-sm);
  width: 250px;
  transition: border-color 0.2s;
}

.watch-search input:focus {
  outline: none;
  border-color: #8b5cf6;
}

.watch-filter select {
  padding: 10px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: var(--text-sm);
  background: white;
  cursor: pointer;
}

.watch-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.watch-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: #6b7280;
  font-size: 1rem;
}

/* Video Card */
.watch-video-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.watch-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.watch-video-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
}

.watch-video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-video-card-info {
  padding: 16px;
}

.watch-video-card-title {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.watch-video-card-level {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.watch-video-card-level.beginner {
  background: #d1fae5;
  color: #065f46;
}

.watch-video-card-level.intermediate {
  background: #fef3c7;
  color: #92400e;
}

.watch-video-card-level.advanced {
  background: #fee2e2;
  color: #991b1b;
}

.watch-video-card-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.watch-video-card-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.watch-video-card-progress-bar {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.watch-video-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 3px;
}

.watch-video-card-progress-text {
  font-size: var(--text-xs);
  color: #6b7280;
}

/* Video Player View */
.watch-player-view {
  padding: 20px;
}

.watch-player-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.watch-player-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #1f2937;
  flex: 1;
}

.watch-player-container {
  position: relative;
  margin-bottom: 16px;
}

/* 16:9 aspect ratio container */
.watch-player-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.watch-player-wrapper iframe,
.watch-player-wrapper>div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Progress bar with markers */
.watch-progress-bar {
  position: relative;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-top: 12px;
  cursor: pointer;
}

.watch-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
  border-radius: 4px;
  width: 0%;
  transition: width 0.25s;
}

.watch-question-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.watch-question-marker {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  background: #f59e0b;
  border: 2px solid white;
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s;
}

.watch-question-marker:hover {
  transform: translateX(-50%) scale(1.2);
}

.watch-question-marker.answered {
  background: #10b981;
}

/* Controls */
.watch-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.watch-time-display {
  font-size: var(--text-sm);
  color: #6b7280;
  font-family: 'Courier New', monospace;
}

.watch-video-info p {
  margin: 0;
  color: #6b7280;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Page Layout Wrapper - Contains white card + question panel as siblings */
.page-layout-wrapper {
  display: block;
  position: relative;
}

/* When Watch Mode player is active, use flex layout for side-by-side */
.page-layout-wrapper.watch-active {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Question Panel - sibling of white card, aligned with video player */
.watch-question-panel {
  width: 350px;
  flex-shrink: 0;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  animation: slideInPanel 0.3s ease;
  align-self: flex-start;
  margin-top: 56px;
  /* Align with content below header */
}

@keyframes slideInPanel {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.watch-question-panel-content {
  padding: 20px;
}

/* Responsive: Stack on smaller screens */
@keyframes slideUpPanel {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Responsive: Bottom Sheet Popup on smaller screens */
@media (max-width: 900px) {
  .page-layout-wrapper.watch-active {
    flex-direction: column;
    align-items: center;
  }

  .watch-question-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15), 0 0 0 1000px rgba(0, 0, 0, 0.4);
    /* Overlay effect */
    z-index: 2000;
    animation: slideUpPanel 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
  }

  .watch-question-panel-content {
    padding-bottom: 30px;
    /* Safety padding for bottom gestures */
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.watch-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.watch-question-header span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #8b5cf6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.watch-skip-btn {
  padding: 6px 12px;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  color: #6b7280;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 0.2s;
}

.watch-skip-btn:hover {
  background: #e5e7eb;
}

.watch-question-content {
  margin-bottom: 20px;
}

.watch-question-content p {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  color: #1f2937;
  line-height: 1.6;
}

.watch-audio-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: transform 0.2s;
}

.watch-audio-btn:hover {
  transform: scale(1.05);
}

/* Multiple Choice Options */
.watch-mc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.watch-mc-option {
  padding: 14px 18px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
  text-align: left;
}

.watch-mc-option:hover {
  border-color: #8b5cf6;
  background: #f5f3ff;
}

.watch-mc-option.selected {
  border-color: #8b5cf6;
  background: #ede9fe;
}

.watch-mc-option.correct {
  border-color: #10b981;
  background: #d1fae5;
}

.watch-mc-option.incorrect {
  border-color: #ef4444;
  background: #fee2e2;
}

/* Open-ended Answer */
.watch-open-answer {
  margin-bottom: 20px;
}

.watch-open-answer textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.watch-open-answer textarea:focus {
  outline: none;
  border-color: #8b5cf6;
}

.watch-question-actions {
  display: flex;
  justify-content: center;
}

/* Feedback */
.watch-feedback {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.watch-feedback p {
  margin: 0 0 16px 0;
  font-size: 1rem;
  font-weight: 500;
}

.watch-feedback.correct p {
  color: #059669;
}

.watch-feedback.incorrect p {
  color: #dc2626;
}

.watch-feedback button {
  margin: 0 6px;
}

/* Empty state */
.watch-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.watch-empty-state h3 {
  margin: 0 0 8px 0;
  color: #374151;
}

/* ============================================
   NOTES MODE (Take Notes Practice)
   Uses Type/Speak mode layout with question selector
   ============================================ */

/* Practice Area */
#notes-practice-area {
  margin-top: 20px;
}

/* Steps */
.notes-step {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.notes-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.notes-step-badge {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.notes-step-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
}

/* Step 0: Overview / Ready */
.notes-ready-body {
  margin-bottom: 20px;
}

.notes-ready-desc {
  font-size: var(--text-sm, 14px);
  color: var(--text-secondary, #64748b);
  line-height: 1.6;
  margin: 0 0 16px 0;
}

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

.notes-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--text-xs, 12px);
  font-weight: 600;
}

.notes-tag--video {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.notes-tag--audio {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.notes-ready-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

/* Step 1: Video */
.notes-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.notes-video-wrapper iframe,
.notes-video-wrapper>div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.notes-video-controls {
  text-align: center;
}

/* Step 2: Audio + Notes */
.notes-audio-status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.notes-audio-status.is-unavailable {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.22);
}

.notes-textarea-wrapper {
  margin-bottom: 16px;
}

.notes-textarea-wrapper label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-main);
}

.notes-textarea-wrapper textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}

.notes-textarea-wrapper textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.notes-submit-controls {
  text-align: center;
}

/* Step 3: Results */
.notes-results-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .notes-results-layout {
    grid-template-columns: 1fr;
  }
}

.notes-results-column h5 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  color: var(--text-main);
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.notes-transcript-display,
.notes-user-display {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 16px;
  min-height: 150px;
  font-size: var(--text-sm);
  line-height: 1.8;
}

.notes-matched {
  background: #dcfce7;
  color: #166534;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.notes-results-stats {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-main);
  margin-bottom: 20px;
}

.notes-results-stats span {
  font-weight: 700;
  color: #16a34a;
  font-size: 1.3rem;
}

.notes-results-controls {
  text-align: center;
}

/* Hide duplicate in-card buttons when original buttons remain in the card container (e.g. English scope where SPC is excluded) */
.notes-submit-controls #notes-submit-btn ~ #notes-in-card-submit-btn {
  display: none !important;
}

.notes-results-controls #notes-retry-btn ~ #notes-in-card-retry-btn {
  display: none !important;
}

/* ============================================
   MOBILE LAYOUT FIXES (< 768px only)
   Desktop layout remains unchanged
   ============================================ */

/* Mobile toolbar - hidden on desktop */
.mobile-toolbar {
  display: none;
}

@media (max-width: 767px) {

  /* Prevent horizontal overflow on mobile */
  .container {
    box-sizing: border-box;
    margin: 0;
    padding: 24px;
    width: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Keep segmented control within viewport */
  .dashboard-segmented-control {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
  }

  /* "Learning Center", "Daily Review" and "Entertainment Hub" cannot fit a three-way
     equal split at 390px, so an equal-width flex row could only truncate them — the
     control read as "Learning Ce…" / "Entertainme…", which is worse than a scroll.
     Let each tab size to its label and let the strip scroll instead. */
  .dashboard-segmented-control {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .dashboard-segmented-control::-webkit-scrollbar {
    display: none;
  }

  .segmented-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: var(--text-xs);
    white-space: nowrap;
    scroll-snap-align: center;
  }

  /* ============================================
     FIX 1: Hide floating panel toggles on mobile
     Replace with mobile toolbar at bottom
     ============================================ */

  /* Hide floating toggle buttons */
  .progress-panel-toggle,
  .account-panel-toggle,
  .vocab-panel-toggle {
    display: none !important;
  }

  /* Hide the entire side panel containers when not expanded */
  .progress-panel-side:not(.expanded),
  .account-panel-side:not(.expanded),
  .vocab-panel-side:not(.expanded) {
    display: none !important;
  }

  /* When panels ARE expanded, show them as full-screen overlays */
  .progress-panel-side.expanded,
  .account-panel-side.expanded,
  .vocab-panel-side.expanded {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex !important;
    transform: none;
  }

  .progress-panel-side.expanded .progress-panel-content,
  .account-panel-side.expanded .account-panel-content,
  .vocab-panel-side.expanded .vocab-panel-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    border-radius: 0;
    transform: none;
  }

  /* Show mobile toolbar */
  .mobile-toolbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-card);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 998;
    justify-content: space-around;
    align-items: center;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobile-toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px 16px;
    min-width: 64px;
    min-height: 44px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
  }

  .mobile-toolbar-btn:hover,
  .mobile-toolbar-btn:active {
    background: #f3f4f6;
  }

  .mobile-toolbar-icon {
    font-size: 1.5rem;
    line-height: 1;
  }

  .mobile-toolbar-label {
    font-size: var(--text-2xs);
    color: #6b7280;
    margin-top: 2px;
    font-weight: 500;
  }

  /* Add bottom padding to main content to prevent overlap with toolbar */
  body {
    padding-bottom: 70px;
  }

  .container {
    margin-bottom: 20px;
  }

  /* ============================================
     FIX 2: Convert shop table to vertical cards
     ============================================ */

  .shopping-modal-content {
    padding: 20px 16px !important;
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

  .shopping-modal-content h2 {
    font-size: 1.4rem;
  }

  .shopping-points-display {
    padding: 12px 20px;
    gap: 8px;
  }

  .shopping-points-value {
    font-size: 1.75rem;
  }

  /* Hide table header on mobile */
  .shopping-table thead {
    display: none;
  }

  /* Convert table to card layout */
  .shopping-table,
  .shopping-table tbody {
    display: block;
    width: 100%;
  }

  .shopping-table tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .shopping-table tbody tr:hover {
    background: #faf5ff;
  }

  .shopping-table td {
    display: block;
    padding: 8px 0;
    text-align: left !important;
    border: none;
  }

  /* Reward info card header */
  .shopping-table td:first-child {
    order: 1;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
  }

  .reward-title {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .reward-description {
    font-size: var(--text-xs);
  }

  /* Cost display */
  .shopping-table td:nth-child(2) {
    order: 2;
    padding: 12px 0;
  }

  .reward-cost {
    justify-content: flex-start;
    font-size: 1.1rem;
  }

  .reward-cost::before {
    content: "Cost: ";
    font-weight: 400;
    color: #6b7280;
    font-size: var(--text-sm);
  }

  /* Action button */
  .shopping-table td:last-child {
    order: 3;
    padding-top: 12px;
  }

  .shopping-table td:last-child .reward-btn,
  .shopping-table td:last-child .reward-btn-unlocked {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
  }

  /* Guest toast positioning for mobile toolbar */
  .guest-toast {
    bottom: 80px !important;
  }
}


/* SRS Badge Styles */
.vocab-badge-srs {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--text-2xs);
  font-weight: 600;
  border: 1px solid transparent;
  background: #f1f5f9;
  color: #64748b;
}

.vocab-badge-srs.due {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.vocab-badge-srs.mastered {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  border-color: #86efac;
}

.vocab-badge-srs.learning {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

/* Part of Speech (Form) Badge Styles */
.vocab-badge-pos {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: capitalize;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.vocab-badge-pos-noun {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.vocab-badge-pos-verb {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.vocab-badge-pos-adjective {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.vocab-badge-pos-adverb {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}

.vocab-badge-pos-preposition {
  background: #fce7f3;
  color: #9d174d;
  border-color: #f9a8d4;
}

.vocab-badge-pos-conjunction {
  background: #ccfbf1;
  color: #115e59;
  border-color: #5eead4;
}


/* Custom Alert Modal */
/* Custom Alert Modal */
.vocab-alert-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.vocab-alert-content {
  background: var(--bg-card);
  padding: 32px 24px;
  border-radius: 24px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  /* Subtle border */
  transform: scale(0.95);
  animation: modalContentPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalContentPop {
  from {
    transform: scale(0.95) translateY(10px);
  }

  to {
    transform: scale(1) translateY(0);
  }
}

#vocab-alert-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 12px 0;
}

#vocab-alert-message {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}

.vocab-alert-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

#vocab-alert-ok {
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 9999px;
  /* Pill shape */
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

#vocab-alert-ok:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 8px -1px rgba(37, 99, 235, 0.4);
}

#vocab-alert-ok:active {
  transform: translateY(0);
}

/* ============================================
   Writing Challenge Styles
   ============================================ */

/* Toast notification for Writing Challenge */
.srs-writing-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4);
  z-index: 11001;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.srs-writing-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.srs-writing-toast .toast-icon {
  font-size: 1.3rem;
  animation: bounceIcon 0.6s ease 0.2s;
}

@keyframes bounceIcon {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }
}

.srs-writing-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
  /* Remove backdrop as requested */
  backdrop-filter: none !important;
  /* Remove blur as requested */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  /* Prevent blocking interaction when invisible */
  transition: opacity 0.4s ease;
}

.srs-writing-modal.visible {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
}

.srs-writing-content {
  background: white;
  width: 1100px;
  /* Increased for two-column */
  max-width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 40px;
  /* Increased padding */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  /* Enhanced shadow since backdrop is gone */
  text-align: left;
  /* Changed from center */
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  border: 1px solid #eef2f6;
}

.srs-writing-modal.visible .srs-writing-content {
  transform: translateY(0);
  opacity: 1;
}

.srs-writing-header {
  margin-bottom: 32px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 20px;
}

.srs-writing-header h3 {
  margin: 0 0 8px 0;
  font-size: 1.8rem;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.srs-writing-subtitle {
  color: #64748b;
  font-size: 1rem;
  margin: 0;
}

/* Two-Column Body Layout */
.srs-writing-body {
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.srs-writing-left {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.srs-writing-right {
  flex: 1.2;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #f1f5f9;
}

/* Hints Box Redesign */
.srs-writing-hints {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  margin: 0;
  text-align: left;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.hint-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: var(--text-sm);
  line-height: 1.6;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.hint-item:last-child {
  margin-bottom: 0;
}

.hint-label {
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  min-width: 100px;
}

.hint-value {
  color: #334155;
  flex: 1;
}

/* Collocation pills */
#hint-collocations .hint-value {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collocation-pill {
  background: #eef2ff;
  color: #4f46e5;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid #c7d2fe;
}

.help-action-wrapper {
  margin-top: 10px;
  text-align: center;
}

/* Input Side Styles */
.srs-writing-prompt {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 16px 0;
  padding: 16px 20px;
  background: #ecfdf5;
  border-radius: 16px;
  border-left: 5px solid #10b981;
  color: #065f46;
  font-weight: 600;
}

#hint-starter {
  justify-content: flex-start;
  margin-bottom: 16px;
  background: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
}

#hint-starter .hint-value {
  color: #0369a1;
  font-style: italic;
  font-weight: 500;
}

.srs-writing-input {
  width: 100%;
  min-height: 150px;
  flex: 1;
  padding: 20px;
  font-size: var(--text-lg);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  resize: none;
  font-family: inherit;
  transition: all 0.2s ease;
  background: white;
  margin-bottom: 16px;
}

.srs-writing-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.srs-writing-actions {
  display: flex;
  gap: 16px;
  margin-top: auto;
}

.srs-writing-btn-submit {
  flex: 2;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.srs-writing-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.srs-writing-btn-skip {
  flex: 1;
  background: white;
  color: #64748b;
  border: 1px solid #e2e8f0;
  padding: 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.srs-writing-btn-skip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

.srs-writing-feedback {
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  font-size: var(--text-sm);
  display: none;
  text-align: left;
  animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scaffolding-panel {
  background: #fffbeb;
  border-radius: 16px;
  margin: 0;
  border: 1px solid #fcd34d;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scaffolding-panel.visible {
  max-height: 500px;
  /* Adjusted */
  opacity: 1;
  padding: 20px;
  margin-top: 10px;
}

/* POS Tag Styling */
.writing-pos-tag {
  font-size: 0.55em;
  background: #e0f2fe;
  color: #0284c7;
  padding: 3px 10px;
  border-radius: 20px;
  vertical-align: middle;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile Responsiveness for Writing Challenge */
@media (max-width: 900px) {
  .srs-writing-body {
    flex-direction: column;
    gap: 20px;
  }

  .srs-writing-content {
    width: 95%;
    padding: 0;
    /* Remove padding to handle overflow correctly */
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Manage scroll internally */
  }

  .srs-writing-header {
    padding: 24px 24px 16px 24px;
    margin: 0;
  }

  .srs-writing-body {
    overflow-y: auto;
    padding: 0 24px 24px 24px;
    gap: 16px;
  }

  .srs-writing-right {
    padding: 16px;
    background: transparent;
    /* Cleaner on mobile */
    border: none;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    /* Ensure enough space */
  }

  /* Sticky Action Bar */
  .srs-writing-actions {
    position: sticky;
    bottom: -24px;
    /* Counteract body padding */
    margin: 16px -16px -16px -16px;
    padding: 16px;
    background: white;
    border-top: 1px solid #e2e8f0;
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  }

  .srs-writing-input {
    min-height: 200px;
    /* Ensure visible area */
  }
}

/* ============================================
   More Help! Button & Scaffolding Panel
   ============================================ */

.more-help-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.more-help-btn:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.more-help-btn:active {
  transform: translateY(0);
}

.more-help-btn.active {
  background: linear-gradient(135deg, #b45309, #92400e);
}

/* Pulse Ring Animation */
.more-help-btn {
  position: relative;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  border: 2px solid #f59e0b;
  border-radius: 20px;
  animation: srs-pulse-ring 2s infinite;
  pointer-events: none;
  opacity: 0;
}

@keyframes srs-pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

/* Scaffolding Panel as an Accordion */
.scaffolding-panel {
  display: block;
  /* Always block, use max-height for collapse */
  background: linear-gradient(135deg, #fffbeb, #fefce8);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #fcd34d;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.scaffolding-panel.visible {
  max-height: 800px;
  opacity: 1;
  padding: 20px;
  margin-top: 10px;
  border-width: 2px;
}

.scaffolding-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #fde68a;
}

.scaffolding-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.scaffolding-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #78350f;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}

/* Example Sentences List - Premium Card Design */
.example-sentences-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.example-sentence-item {
  background: linear-gradient(145deg, #ffffff, #fefce8);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: #1f2937;
  border: 1px solid #fef3c7;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.08);
  position: relative;
  padding-left: 24px;
  transition: all 0.2s ease;
}

.example-sentence-item::before {
  content: '"';
  position: absolute;
  left: 10px;
  top: 18px;
  /* Adjusted to align with text baseline */
  font-size: 1.8rem;
  color: #f59e0b;
  font-family: Georgia, serif;
  line-height: 0.5;
}

.example-sentence-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  border-color: #fcd34d;
}

.example-sentence-item.loading {
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  background: #f8fafc;
  border-color: #e5e7eb;
  padding-left: 16px;
}

.example-sentence-item.loading::before {
  display: none;
}

.example-sentence-item.no-examples {
  color: #6b7280;
  font-style: italic;
  text-align: center;
  background: #f9fafb;
  border-color: #e5e7eb;
  padding-left: 16px;
}

.example-sentence-item.no-examples::before {
  display: none;
}

.highlight-word {
  background: linear-gradient(135deg, #fef08a, #fde047);
  color: #854d0e;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* YouGlish Container */
.youglish-container {
  background: white;
  border-radius: 8px;
  padding: 12px 14px;
  border-left: 3px solid #8b5cf6;
}

.youglish-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7c3aed;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: color 0.2s ease;
}

.youglish-link:hover {
  color: #5b21b6;
  text-decoration: underline;
}

.youglish-icon {
  font-size: 1.2rem;
}

.youglish-loading {
  color: #9ca3af;
  font-style: italic;
  font-size: var(--text-sm);
}


/* ============================================
   Pronunciation/Timeline Visualization
   ============================================ */
.pa-timeline-container {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pa-timeline-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pa-timeline-label {
  width: 60px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: #374151;
  text-align: right;
  flex-shrink: 0;
}

.pa-timeline-track {
  flex-grow: 1;
  height: 28px;
  background: #f3f4f6;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.pa-timeline-block {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  color: #ffffff;
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.pa-timeline-block.native {
  background: rgba(34, 197, 94, 0.7);
}

.pa-timeline-block.user {
  background: rgba(59, 130, 246, 0.7);
}

/* ============================================
   Vocabulary Tutorial Overlay
   ============================================ */

.vocab-tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vocab-tutorial-overlay.active {
  opacity: 1;
}

.vocab-tutorial-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.vocab-tutorial-spotlight {
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  border-radius: 8px;
  z-index: 10001;
  pointer-events: none;
  transition: all 0.3s ease;
}

.vocab-tutorial-spotlight.pulse {
  animation: spotlight-pulse 2s ease-in-out infinite;
}

@keyframes spotlight-pulse {

  0%,
  100% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.65),
      0 0 0 4px rgba(99, 102, 241, 0.5),
      0 0 20px 4px rgba(99, 102, 241, 0.3);
  }

  50% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.65),
      0 0 0 6px rgba(99, 102, 241, 0.7),
      0 0 30px 8px rgba(99, 102, 241, 0.5);
  }
}

.vocab-tutorial-tooltip {
  position: fixed;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border-radius: 16px;
  padding: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  z-index: 10002;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(148, 163, 184, 0.1);
  color: #f1f5f9;
  animation: tooltip-entrance 0.3s ease-out;
}

@keyframes tooltip-entrance {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vocab-tutorial-tooltip.center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Tooltip arrow indicators */
.vocab-tutorial-tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

.vocab-tutorial-tooltip.arrow-top::before {
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #1e293b;
}

.vocab-tutorial-tooltip.arrow-bottom::before {
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #1e293b;
}

.vocab-tutorial-tooltip.arrow-left::before {
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: #1e293b;
}

.vocab-tutorial-tooltip.arrow-right::before {
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #1e293b;
}

.vocab-tutorial-tooltip .tutorial-icon {
  display: block;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 12px;
}

.vocab-tutorial-tooltip h3 {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}

.vocab-tutorial-tooltip p {
  margin: 0 0 20px 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #cbd5e1;
  text-align: center;
}

.vocab-tutorial-tooltip p strong {
  color: #a78bfa;
  font-weight: 600;
}

.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #475569;
  transition: all 0.2s ease;
}

.tutorial-dot.active {
  background: #6366f1;
  transform: scale(1.2);
}

.tutorial-dot.completed {
  background: #22c55e;
}

.tutorial-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tutorial-skip {
  padding: 12px 20px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: #94a3b8;
  border-radius: 8px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.tutorial-skip:hover {
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}

.tutorial-next {
  flex: 1;
  padding: 12px 24px;
  border: none;
  background: linear-gradient(145deg, #6366f1, #4f46e5);
  color: white;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tutorial-next:hover {
  background: linear-gradient(145deg, #818cf8, #6366f1);
  transform: translateY(-1px);
}

/* ============================================
   Tutorial Replay Settings Section
   ============================================ */

.tutorial-replay-section {
  margin-top: 24px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-align: left;
}

.tutorial-replay-header {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.tutorial-replay-desc {
  margin: 0 0 16px 0;
  font-size: var(--text-sm);
  color: #64748b;
}

.tutorial-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tutorial-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s;
}

.tutorial-toggle-item:hover {
  border-color: #cbd5e1;
  background: #fafbfc;
}

.tutorial-toggle-item .toggle-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #334155;
}

/* Toggle Switch Component */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 26px;
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
  background-color: #6366f1;
}

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

.toggle-switch input:focus+.toggle-slider {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Mobile responsiveness for tutorial */
@media (max-width: 480px) {
  .vocab-tutorial-tooltip {
    width: calc(100vw - 32px);
    padding: 20px;
    left: 16px !important;
    right: 16px !important;
  }

  .vocab-tutorial-tooltip .tutorial-icon {
    font-size: 2rem;
  }

  .vocab-tutorial-tooltip h3 {
    font-size: 1.1rem;
  }

  .vocab-tutorial-tooltip p {
    font-size: var(--text-sm);
  }

  .tutorial-actions {
    flex-direction: column;
  }

  .tutorial-skip,
  .tutorial-next {
    width: 100%;
  }

  .tutorial-toggle-item {
    padding: 10px 12px;
  }

  .tutorial-toggle-item .toggle-label {
    font-size: var(--text-sm);
  }
}

/* FIX: Tutorial Layering (Must be above SRS Panel z-index 10001) */
.vocab-tutorial-overlay {
  z-index: 20000 !important;
}

.vocab-tutorial-spotlight {
  z-index: 20001 !important;
}

.vocab-tutorial-tooltip {
  z-index: 20002 !important;
}

/* ============================================
   Locked Tabs & Shop UI
   ============================================ */

/* Locked Tab Styling */
.tab-btn.locked {
  position: relative;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

.tab-btn.locked:hover {
  color: #6b7280;
}

.tab-btn.locked::after {
  content: '🔒';
  font-size: 0.8em;
  margin-left: 6px;
  vertical-align: middle;
}

/* Shop Modal */
.shop-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.shop-modal.active {
  opacity: 1;
  visibility: visible;
}

#shop-modal .shop-modal-content {
  background: white;
  width: 98vw !important;
  max-width: 98vw !important;
  height: 95vh !important;
  max-height: 95vh !important;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

/* Shop Modal Tabs */
.shop-tabs {
  display: flex;
  gap: 10px;
  padding: 0 24px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
  z-index: 100;
}

.shop-tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  font-size: var(--text-sm);
}

.shop-tab-btn:hover {
  background: rgba(148, 163, 184, 0.1);
  color: #1e293b;
}

.shop-tab-btn.active {
  background: #2563eb;
  color: white;
}

.shop-tab-content {
  display: none;
  flex-grow: 1;
  overflow-y: auto;
}

#skill-tree-container.shop-tab-content {
  overflow: hidden !important;
}

.shop-tab-content.active {
  display: flex;
  flex-direction: column;
}

/* RPG Skill Tree Enhancement - Branching Layout */
.level-system-container {
  padding: 40px 20px;
  background: radial-gradient(circle at center, #f8fafc 0%, #f1f5f9 100%);
  min-height: 600px;
}

.skill-tree-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  padding-bottom: 50px;
}

.tree-header {
  position: relative;
}

.origin-node {
  width: 100px;
  height: 100px;
  background: white;
  border: 4px solid #3b82f6;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
  z-index: 10;
  position: relative;
}

.origin-node::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 30px;
  background: #cbd5e1;
  transform: translateX(-50%);
}

.skill-tree-branches {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 1000px;
  gap: 20px;
  position: relative;
}

/* Horizontal connector for roots */
.skill-tree-branches::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: #cbd5e1;
}

.skill-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  position: relative;
  flex: 1;
}

.skill-node-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skill-line {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 2px;
  height: 60px;
  background: #cbd5e1;
  transform: translateX(-50%);
  transition: background 0.5s;
}

.skill-line.active {
  background: #fbbf24;
}

.skill-line.root-connector {
  top: -30px;
  height: 30px;
}

.skill-node {
  width: 80px;
  height: 80px;
  background: white;
  border: 3px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.skill-node:hover {
  transform: scale(1.15);
  z-index: 20;
}

.skill-node.unlocked {
  border-color: #fbbf24;
  background: #fffbeb;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

.skill-node.available {
  border-color: #3b82f6;
  animation: node-pulse 2s infinite;
}

.skill-node.locked {
  filter: grayscale(1);
  opacity: 0.5;
  cursor: not-allowed;
}

.node-inner {
  font-size: 2.2rem;
}

.node-label {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--text-xs);
  color: #1e293b;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

@keyframes node-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.skill-node:hover .skill-popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}

.skill-popup {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(8px);
  color: white;
  padding: 16px;
  border-radius: 12px;
  width: 240px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  pointer-events: none;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.skill-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border: 10px solid transparent;
  border-top-color: rgba(30, 41, 59, 0.95);
  transform: translateX(-50%);
}

.skill-popup h5 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #fbbf24;
}

.skill-popup p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.9;
}

.popup-footer {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.status-tag {
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}

.status-tag.mastered {
  background: #059669;
  color: white;
}

.status-tag.cost {
  background: #d97706;
  color: white;
}

.status-tag.req {
  background: #ef4444;
  color: white;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.skill-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
  line-height: 1.2;
}

.skill-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.skill-level-req {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: #ef4444;
  background: #fef2f2;
  padding: 2px 6px;
  border: 1px solid #fee2e2;
  border-radius: 4px;
  white-space: nowrap;
}

.skill-action {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.status-badge.unlocked {
  color: #059669;
  background: #ecfdf5;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #d1fae5;
}

.skill-buy-btn {
  padding: 8px 16px;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 6px;
}

.skill-buy-btn:hover:not(:disabled) {
  background: #1d4ed8;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.skill-buy-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.7;
}

.cost-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Level Summary Enhancement */
.level-header-summary {
  background: white;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 30px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.level-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
  border: 4px solid #fff;
}

.shop-header {
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.shop-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-balance {
  background: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  color: #d97706;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.shop-body {
  padding: 24px;
  overflow-y: auto;
  background: #f1f5f9;
}

.shop-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px;
}

.shop-close-btn:hover {
  color: #1e293b;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.shop-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.shop-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shop-item.purchased {
  border-color: #22c55e;
  background: #f0fdf4;
}

.shop-item-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  text-align: center;
}

.shop-item-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1e293b;
}

.shop-item-desc {
  color: #64748b;
  font-size: var(--text-sm);
  margin-bottom: 20px;
  flex-grow: 1;
  line-height: 1.5;
}

.shop-item-price {
  font-weight: 700;
  color: #d97706;
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-item-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--text-sm);
}

.shop-item-btn.buy {
  background: var(--primary);
  color: white;
}

.shop-item-btn.buy:hover:not(:disabled) {
  background: var(--primary-hover);
}

.shop-item-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  color: #94a3b8;
}

.shop-item-btn.owned {
  background: #22c55e;
  color: white;
  cursor: default;
}

.shop-item-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #d97706;
  color: white;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
}

.shop-notification {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
}

/* Shop UI Optimizations */
.panel-shopping-card {
  margin-top: 20px;
  background: linear-gradient(to right, #ffffff, #fcfaff);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.panel-shopping-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #7c3aed;
}

.panel-shopping-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.2);
  border-color: #d8b4fe;
}

.shopping-icon {
  font-size: 1.5rem;
  background: #f3e8ff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.shopping-label {
  font-weight: 700;
  color: #4b5563;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  flex: 1;
}

.shop-item-desc {
  font-size: 0.875rem;
  color: #444;
  /* Darkened for better contrast */
  margin-bottom: 16px;
  line-height: 1.5;
}

.shop-item {
  padding: 24px;
}



/* ============================================
   Scaffolding Extras - Premium Card Layout
   ============================================ */

.scaffolding-extras-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.scaffold-section {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.scaffold-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

/* Make patterns span full width */
.scaffold-section.full-width {
  grid-column: 1 / -1;
}

.scaffold-section h4 {
  font-size: var(--text-xs);
  color: #475569;
  margin: 0 0 10px 0;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.scaffold-section h4::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  border-radius: 2px;
}

/* Word Breakdown Visual */
.breakdown-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Inter', 'Roboto Mono', monospace;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.syllable-chip {
  font-size: var(--text-lg);
  font-weight: 600;
  color: #1e293b;
  letter-spacing: 0.02em;
}

.syllable-divider {
  color: #94a3b8;
  font-size: var(--text-sm);
  margin: 0 4px;
}

/* Context & POS - Premium Styling */
.context-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pos-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #1d4ed8;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: capitalize;
  width: fit-content;
  border: 1px solid #bfdbfe;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
}

.pos-tag::before {
  content: '•';
  color: #3b82f6;
  font-size: 1rem;
}

.synonyms-list {
  font-size: var(--text-sm);
  color: #334155;
  line-height: 1.5;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #22c55e;
}

.synonyms-list strong {
  color: #15803d;
  font-weight: 600;
}

/* Example Phrases - Premium Card List */
.pattern-list-compact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pattern-list-compact li {
  padding: 10px 14px;
  background: linear-gradient(135deg, #faf5ff, #fdf4ff);
  border-radius: 10px;
  font-size: var(--text-sm);
  color: #1e293b;
  border: 1px solid #e9d5ff;
  position: relative;
  padding-left: 20px;
  transition: all 0.2s ease;
}

.pattern-list-compact li::before {
  content: '→';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #a855f7;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
}

.pattern-list-compact li:hover {
  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
  transform: translateX(4px);
  border-color: #d8b4fe;
}

.pattern-list-compact li strong {
  color: #7c3aed;
  font-weight: 700;
}

/* Shop UI Improvements */
.shop-owned-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.shop-play-btn,
.shop-tutorial-btn {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all 0.2s;
}

.shop-play-btn {
  background: var(--primary);
  color: white;
}

.shop-play-btn:hover {
  background: var(--primary-hover);
}

.shop-tutorial-btn {
  background: #f1f5f9;
  color: #475569;
}

.shop-tutorial-btn:hover {
  background: #e2e8f0;
}

.unlocked-date {
  font-size: var(--text-xs);
  color: #64748b;
  font-weight: normal;
  display: block;
  margin-top: 4px;
}

.shop-item.purchased {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.shop-item.purchased .shop-item-icon {
  filter: grayscale(0.2);
}

/* Dashboard Slider */
.dashboard-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dashboard-slider-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  width: 100%;
}

.dashboard-card {
  flex: 0 0 100%;
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s;
  box-sizing: border-box;
}

.dashboard-card:hover {
  transform: translateY(-2px);
}

.dashboard-card.tutorial-card {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  cursor: default;
}

.dashboard-card.tutorial-card:hover {
  transform: none;
}

.tutorial-card-content {
  width: 100%;
}

.tutorial-card-content h3 {
  margin: 0 0 4px 0;
  color: white;
  font-size: 1.25rem;
}

.tutorial-card-content p {
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
}

.dashboard-slider-wrapper .tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}

.tutorial-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
}

.tutorial-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.15);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  opacity: 0;
  pointer-events: none;
}

.dashboard-slider-wrapper:hover .slider-arrow {
  opacity: 1;
  pointer-events: auto;
}

.slider-prev {
  left: 10px;
}

.slider-next {
  right: 10px;
}

.slider-arrow:hover {
  background: rgba(0, 0, 0, 0.4);
}

.slider-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s;
}

.slider-dot.active {
  background: white;
  width: 12px;
  border-radius: 4px;
}

/* Dashboard Menu Redesign */
.dashboard-menu-container {
  margin-bottom: 24px;
}

.dashboard-menu-container h2 {
  font-size: 1.25rem;
  margin: 0 0 12px 0;
  color: var(--text-main);
  font-weight: 700;
}

.dashboard-menu-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.dashboard-menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  color: #334155;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.dashboard-menu-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateX(2px);
}

.dashboard-menu-btn.active {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: #86efac;
  color: #166534;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dashboard-menu-btn .d-icon {
  font-size: 1.2rem;
}


/* Tutorial Grid Adjustments for Panel */
.tutorial-card-content {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Modern Card Tweaks
   Was an indigo gradient (#6366f1 → #4f46e5) with a matching indigo-tinted lift. Indigo
   appears in no token file: the practice grid — the largest, most repeated, most clicked
   element in the app — was carrying a third accent that belonged to neither the green
   brand mark nor the blue interactive colour. The card now takes the selected skill's
   hue through --visual-accent (see the skill palette block above .card-visual). */
.modern-card {
  background: var(--bg-surface, #ffffff);
  box-shadow: var(--sh-1);
  border: 1px solid var(--border-default, #e2e8f0);
}

.tutorial-card-content.modern-card-content {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.tutorial-card-content.modern-card-content .tutorial-grid {
  gap: 10px;
}

.tutorial-card-content.modern-card-content .tutorial-btn {
  background: white;
  color: #334155;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tutorial-card-content.modern-card-content .tutorial-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Hint System Styles
   ============================================ */

.hint-controls {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde047;
  border-radius: 12px;
}

.hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.hint-btn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.hint-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hint-icon {
  font-size: 1.1rem;
}

.hint-label {
  font-weight: 600;
}

.hint-cost-badge {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
}

.hint-cost-badge.free {
  background: #dcfce7;
  color: #166534;
}

.hint-cost-badge.paid {
  background: #fef3c7;
  color: #92400e;
}

.hint-cost-badge.max-reached {
  background: #fee2e2;
  color: #991b1b;
}

/* Hint Display Area */
.hint-display {
  margin-top: 16px;
  padding: 16px 20px;
  background: white;
  border: 1px solid #fde047;
  border-radius: 10px;
  animation: hintFadeIn 0.3s ease-out;
}

@keyframes hintFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hint-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.hint-level-badge {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hint-type-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #6b7280;
}

.hint-content {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #1f2937;
}

.hint-content strong {
  color: #7c3aed;
  font-weight: 700;
}

/* Monospace text for letter hints */
.hint-text-mono {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  background: #f8fafc;
  padding: 12px 16px;
  border-radius: 8px;
  display: block;
  font-size: 1rem;
  line-height: 1.8;
  word-break: break-word;
  border: 1px solid #e2e8f0;
}

.hint-keyword {
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
  padding: 2px 6px;
  border-radius: 4px;
  color: #5b21b6;
}

/* Hint progress indicator */
.hint-progress {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  justify-content: center;
}

.hint-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: all 0.2s ease;
}

.hint-progress-dot.used {
  background: #8b5cf6;
}

.hint-progress-dot.current {
  background: #fbbf24;
  transform: scale(1.2);
}

/* Insufficient coins modal */
.hint-insufficient-modal {
  text-align: center;
  padding: 32px !important;
  max-width: 380px;
  border-top: 6px solid #f59e0b;
}

.hint-insufficient-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
}

.hint-insufficient-modal h2 {
  margin: 0 0 16px 0;
  color: #92400e;
  font-size: 1.5rem;
}

.hint-insufficient-modal p {
  color: #6b7280;
  margin-bottom: 20px;
}

.hint-insufficient-modal .coin-display {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.hint-insufficient-modal .coin-needed,
.hint-insufficient-modal .coin-have {
  text-align: center;
}

.hint-insufficient-modal .coin-value {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hint-insufficient-modal .coin-needed .coin-value {
  color: #dc2626;
}

.hint-insufficient-modal .coin-have .coin-value {
  color: #65a30d;
}

.hint-insufficient-modal .coin-label {
  font-size: var(--text-xs);
  color: #6b7280;
  margin-top: 4px;
}

/* SRS and Tutorial cards within panels */
.dashboard-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
}

/* Removed legacy conflicting .modern-card styles */

/* Removed legacy conflicting .modern-card text styles */

.dashboard-cta-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.dashboard-srs-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: var(--text-sm);
}

.srs-writing-summary-controls {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.srs-writing-summary-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

/* Tutorial grid in Learning Center */
.tutorial-card-content {
  padding: 16px 0;
}

/* Removed legacy conflicting .tutorial-grid styles */

.tutorial-grid .tutorial-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--text-sm);
  font-weight: 500;
  color: #334155;
}

.tutorial-grid .tutorial-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tutorial-grid .tutorial-btn .t-icon {
  font-size: 1.5rem;
}

/* Legacy Mode Switch Buttons - Refactored for Neutrality
.mode-switch-btn {
   This is now handled by the .modern-card class in the dashboard
}

.mode-switch-btn.active {
   Removed solid green gradient to prevent legibility issues
} */

/* What's this? Container */
.whats-this-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}

/* Orange variant for What's this? button */
.what-is-this-btn.orange {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.what-is-this-btn.orange:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.what-is-this-btn.orange .icon {
  font-size: 1.2rem;
}



/* ============================================
   What\'s this? Button & Tabs Header
   ============================================ */
.tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #e5e7eb;
}

.tabs-header .tabs {
  margin-bottom: 0;
  border-bottom: none;
}

.what-is-this-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.what-is-this-btn:hover {
  background: #f8fafc;
  color: #334155;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.what-is-this-btn .icon {
  font-size: 1.1rem;
}

/* ============================================
   SRS Schedule Table
   ============================================ */
.srs-schedule-container {
  margin-top: 32px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.schedule-header {
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-header h4 {
  margin: 0;
  font-size: 1rem;
  color: #1e293b;
  font-weight: 600;
}

.schedule-stats {
  font-size: var(--text-xs);
  color: #64748b;
  font-weight: 500;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 20px;
}

.schedule-table-wrapper {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.schedule-table th {
  padding: 12px 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.schedule-table td {
  padding: 14px 20px;
  font-size: var(--text-sm);
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}

.schedule-table tr:last-child td {
  border-bottom: none;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

.schedule-table tr:hover td {
  background: #fcfdfe;
}

.loading-schedule,
.empty-schedule {
  text-align: center;
  padding: 40px !important;
  color: #94a3b8;
  font-style: italic;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
}

.status-learning {
  background: #dcfce7;
  color: #166534;
}

.status-review {
  background: #fef9c3;
  color: #854d0e;
}

.status-mastered {
  background: #dbeafe;
  color: #1e40af;
}

.next-review-time {
  font-size: var(--text-sm);
  color: #64748b;
}

.next-review-time.due {
  color: #ef4444;
  font-weight: 600;
}

/* ============================================
   Difficulty Badge
   ============================================ */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.main-header h1 {
  margin-bottom: 0;
}

.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: help;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.difficulty-badge:hover {
  background: #e0f2fe;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* These three were emoji (🎯 / ⚙ / 💡) and are now Material Symbols, so they inherit
   `color` and align optically with the rest of the icon set instead of rendering as
   full-colour OS glyphs that change shape per platform. */
.difficulty-badge .diff-icon {
  font-size: 16px;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.difficulty-badge,
#what-is-this-btn.btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#what-is-this-btn.btn-compact .icon {
  font-size: 18px;
  line-height: 1;
}

.difficulty-badge.level-1 {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.difficulty-badge.level-2 {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.difficulty-badge.level-3 {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}


/* Difficulty Integration: SRS */
.srs-flashcard.diff-hide-def .srs-flashcard-back .definition,
.srs-flashcard.diff-hide-def .srs-flashcard-back .example,
.srs-flashcard.diff-hide-def .srs-flashcard-back .pos-tag {
  filter: blur(4px);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.srs-flashcard.diff-hide-def .srs-flashcard-back:hover .definition,
.srs-flashcard.diff-hide-def .srs-flashcard-back:hover .example,
.srs-flashcard.diff-hide-def .srs-flashcard-back:hover .pos-tag {
  filter: none;
  opacity: 1;
}

/* ============================================
   UI Fixes & Cleanup
   ============================================ */

/* Hide Legacy Hint System */
#hint-display-type,
#hint-controls-type {
  display: none !important;
}

/* Vocabulary Practice Styling */
.vocabulary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  background: #f8fafc;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.vocabulary-item .vocabulary-word {
  font-weight: 600;
  color: #334155;
}

.vocabulary-play-btn,
.vocabulary-check-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  color: white;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.vocabulary-play-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.vocabulary-play-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.vocabulary-check-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.vocabulary-check-btn:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.vocabulary-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: var(--text-sm);
  min-width: 120px;
}

.vocabulary-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================
   Vocabulary Practice (Main Flow Section)
   ============================================ */
.vocabulary-practice {
  margin-top: 32px;
  padding: 28px;
  background: white;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vocabulary-header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vocabulary-header span {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.025em;
}

.vocabulary-header::before {
  content: '';
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.vocabulary-subheader {
  margin-bottom: 28px;
  padding-left: 36px;
}

.vocabulary-subheader span {
  font-size: 1.05rem;
  color: #64748b;
  font-weight: 500;
  display: inline-block;
  position: relative;
}

.vocabulary-subheader span::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 48px;
  height: 3px;
  background: #3b82f6;
  border-radius: 3px;
  opacity: 0.6;
}

/* Modernizing the items within the section */
.vocabulary-item {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vocabulary-item:hover {
  background: white;
  border-color: #dbeafe;
  box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.1);
  transform: translateX(6px);
}

.vocabulary-word {
  font-weight: 700;
  color: #0f172a;
  font-size: var(--text-lg);
  min-width: 150px;
  letter-spacing: -0.01em;
}

.vocabulary-input {
  flex: 1;
  padding: 12px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
  background-color: white;
  font-weight: 500;
}

.vocabulary-input:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  transform: scale(1.01);
}

.vocabulary-play-btn,
.vocabulary-check-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}

.vocabulary-play-btn {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.vocabulary-play-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: translateY(-2px);
}

.vocabulary-check-btn {
  background: #10b981;
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.vocabulary-check-btn:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.vocabulary-status {
  min-width: 140px;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: right;
}

.vocabulary-status.correct {
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.vocabulary-status.correct::before {
  content: '';
}

.vocabulary-status.incorrect {
  color: #ef4444;
}



/* Table Expansion Styles */
.vocab-row-main {
  border-bottom: none !important;
}

/* ============================================
   Writing Challenge Selection UI
   ============================================ */
.writing-option-container {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: center;
  width: 100%;
}

.writing-option-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  width: 45%;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.writing-option-card:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1);
}

.writing-option-card .option-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.writing-option-card .option-icon {
  font-size: 1.2rem;
}

.writing-option-card .option-source {
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

.writing-option-card .badge-pte {
  background: #e0e7ff;
  color: #4338ca;
}

.writing-option-card .badge-common {
  background: #f1f5f9;
  color: #475569;
}

.writing-option-card .option-text {
  font-size: 1.05rem;
  color: #1e293b;
  font-weight: 600;
}

/* AI Feedback Styles */
.ai-feedback-container {
  text-align: left;
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px;
  border-left: 4px solid #3b82f6;
}

.ai-score-badge {
  font-size: 1.2em;
  font-weight: bold;
  color: #1d4ed8;
  margin-bottom: 8px;
  display: inline-block;
}

.feedback-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feedback-list li {
  margin-bottom: 6px;
  line-height: 1.4;
}

.ai-feedback-container details {
  margin-top: 8px;
  color: #64748b;
  font-size: 0.9em;
  cursor: pointer;
}


/* ============================================
   Adaptive Difficulty: Premium UI Components
   ============================================ */

/* HEXAGON BADGE (Stats Panel) */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  color: white;
  cursor: pointer;
  /* The level badge is a persistent status chip, not an alert — a permanent pulse gave
     it the visual weight of something needing attention. */
}

.difficulty-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.difficulty-badge:active {
  transform: scale(0.97);
}

/* Gear icon that hints at settings */
.diff-settings-hint {
  font-size: 15px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.3s, transform 0.3s;
}

.difficulty-badge:hover .diff-settings-hint {
  opacity: 1;
  transform: rotate(90deg);
}

/* Pulsing glow to attract attention */
@keyframes diffBadgePulse {

  0%,
  100% {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  50% {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), 0 0 12px rgba(255, 255, 255, 0.15);
  }
}

.difficulty-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.5s;
}

.difficulty-badge:hover::before {
  left: 100%;
}

/* CEFR Level Colors (Neon/Glass Style) */
.difficulty-badge.level-1 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: var(--shadow-md);
}

/* Green */
.difficulty-badge.level-2 {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

/* Blue */
.difficulty-badge.level-3 {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

/* Purple */
.difficulty-badge.level-4 {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
}

/* Pink */
.difficulty-badge.level-5 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.5);
}

/* Gold/Amber */
.difficulty-badge.level-6 {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fbbf24;
  /* Gold text */
}

/* Obsidian/Black - Elite */

/* ASCENSION MODAL (Level Up) */
#ascension-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 20000;
  display: none;
  /* Flex when active */
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ascension-content {
  text-align: center;
  transform: scale(0.8);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ascension-icon {
  font-size: 6rem;
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

#ascension-modal h2 {
  font-size: 4rem;
  margin: 0;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.ascension-level {
  font-size: 2.5rem;
  margin: 10px 0;
  color: white;
  font-weight: 800;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.ascension-sub {
  color: #94a3b8;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

/* SETTINGS MODAL OVERRIDES (Glassmorphism) */
.shop-modal {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
}

.shop-modal-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Shop alert dialog — was built with inline hex values in shop-module.js. */
.shop-alert {
  max-width: 400px;
  padding: 30px;
  text-align: center;
}

.shop-alert-icon {
  margin-bottom: 16px;
  font-size: 3rem;
  line-height: 1;
}

.shop-alert-message {
  margin: 0 0 24px;
  color: var(--text-secondary, #475569);
  font-size: 1.1rem;
  line-height: 1.5;
}

.shop-alert-ok {
  padding: 10px 30px;
  border-radius: var(--radius-sm);
  background: var(--color-success, #1b8a4f);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.shop-alert-ok.is-error {
  background: var(--color-danger, #dc2626);
}


/* TOAST NOTIFICATIONS (Adaptive Difficulty) */
#difficulty-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 25000;
  /* Above modals */
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  font-weight: 500;
  pointer-events: auto;
  min-width: 280px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 6px solid var(--primary);
}

.toast.success {
  border-left-color: var(--success);
  color: var(--success-text);
}

.toast.info {
  border-left-color: var(--warning);
  color: var(--warning-text);
}

.toast.error {
  border-left-color: var(--danger);
  color: var(--danger-text);
}

/* Difficulty Settings Modal Specifics */
#difficulty-settings-modal .toggle-switch {
  margin-left: auto;
}


/* Settings Modal (Adaptive Difficulty) */
.setting-group {
  margin-bottom: 24px;
  background: var(--bg-main);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  transition: var(--transition-base);
}

.setting-group:hover {
  background: white;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.setting-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #1e293b;
}

.setting-desc {
  color: #64748b;
  font-size: var(--text-sm);
  margin: 0;
  line-height: 1.5;
}

/* Smooth expand/collapse for settings toggle panels */
.setting-toggle-panel {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    margin-bottom 0.35s ease,
    padding 0.35s ease;
}

.setting-toggle-panel.setting-visible {
  max-height: 500px;
  opacity: 1;
  margin-bottom: 24px;
  padding: 20px;
}

.setting-toggle-panel.setting-hidden {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding: 0 20px;
  border-color: transparent;
}

.setting-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  font-size: 1rem;
  color: var(--text-main);
  background-color: white;
  transition: var(--transition-base);
}

.setting-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

/* Sensitivity Card Selection UI */
.sensitivity-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sensitivity-card {
  padding: 14px 16px;
  border: 2px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
}

.sensitivity-card:hover {
  border-color: var(--primary, #3b82f6);
  background: #f8fafc;
}

.sensitivity-card.selected {
  border-color: var(--primary, #3b82f6);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.sensitivity-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sensitivity-icon {
  font-size: 1.1rem;
}

.sensitivity-card-header strong {
  font-size: var(--text-sm);
  color: #1e293b;
}

.sensitivity-desc {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}


/* Responsive Adjustments for Ascension */
@media (max-width: 768px) {
  #ascension-modal h2 {
    font-size: 2.5rem;
  }

  .ascension-level {
    font-size: 1.8rem;
  }

  .ascension-icon {
    font-size: 4rem;
  }
}

/* ============================================
   Adaptive Engine Profile Modal
   ============================================ */
.adaptive-engine-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ae-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ae-content {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl, 24px);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 420px;
  overflow: hidden;
  animation: aeSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aeSlideIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ae-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.ae-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ae-status-dot {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: aePulse 2s ease-in-out infinite;
}

@keyframes aePulse {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1);
  }
}

.ae-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.ae-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.ae-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

.ae-body {
  padding: 20px;
}

.ae-main-stat {
  text-align: center;
  margin-bottom: 20px;
}

.ae-main-stat .ae-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.ae-level-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.ae-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.ae-mode-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ae-mode-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ae-mode-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.ae-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ae-stat-item {
  background: var(--bg-main);
  padding: 14px;
  border-radius: var(--radius-md);
  text-align: center;
}

.ae-stat-item .ae-label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ae-stat-item .ae-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
}

.ae-progress-mini {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.ae-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.ae-progress-fill.brand {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.ae-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 16px 0;
}

.ae-adjustments h4 {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
}

.ae-adj-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.ae-adj-item:last-child {
  border-bottom: none;
}

.ae-adj-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.ae-adj-val {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-main);
}

.ae-footer {
  text-align: center;
  margin-top: 20px;
}

.ae-badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ae-badge.promoting {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.ae-badge.stable {
  background: var(--bg-input);
  color: var(--text-muted);
}

.ae-badge.optimizing {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .ae-content {
    width: 95%;
    max-width: none;
    margin: 16px;
    border-radius: var(--radius-lg);
  }

  .ae-stats-grid {
    grid-template-columns: 1fr;
  }

  .ae-mode-tabs {
    flex-wrap: wrap;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;

  /* =========================================
   LEVEL SYSTEM & SKILL TREE STYLES
   ========================================= */
}

.back-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--primary-light, #eef2ff);
  color: var(--primary-color, #4361ee);
  border: 1px solid var(--primary-color, #4361ee);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.back-nav-btn:hover {
  background-color: var(--primary-color, #4361ee);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.back-nav-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Closing .header-left */

.level-system-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px;
}

/* Level Header Summary */
.level-header-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.level-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  flex-shrink: 0;
}

.lvl-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  opacity: 0.9;
  text-transform: uppercase;
}

.lvl-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

.level-progress-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xp-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.current-xp {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.next-xp {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.xp-bar-bg {
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 6px;
  transition: width 0.5s ease-out;
}

.next-level-distsance {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: right;
}

/* Skill Tree List */
.skill-tree-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.skill-item {
  position: relative;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
  overflow: hidden;
}

.skill-item.locked {
  background: #f8fafc;
  opacity: 0.8;
  filter: grayscale(0.8);
}

/* Available to buy (Level met, but not purchased) */
.skill-item.available {
  background: white;
  border-color: var(--primary);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.skill-item.unlocked {
  border-color: var(--primary-light);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
  background: linear-gradient(to right, #fff, #fefeff);
}

.skill-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 12px;
  flex-shrink: 0;
}

.skill-item.unlocked .skill-icon {
  background: #e0e7ff;
}

.skill-item.available .skill-icon {
  background: #fff7ed;
  /* Light orange tint for available */
}

.skill-info {
  flex: 1;
  min-width: 0;
}

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

.skill-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
}

.skill-level-req {
  font-size: var(--text-2xs);
  background: #cbd5e1;
  color: #475569;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

/* Buy Button */
.skill-buy-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.skill-buy-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.skill-buy-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
}

.cost-badge {
  font-size: var(--text-2xs);
  opacity: 0.9;
}

.skill-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.skill-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  /* Ensure space for button */
}

.status-badge {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.status-badge.unlocked {
  color: var(--primary);
  background: #e0e7ff;
}

/* Mini Ring for Locked Progress */
.progress-ring-mini {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), #e2e8f0 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progress-ring-mini::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: white;
  border-radius: 50%;
}

.progress-ring-mini span {
  position: relative;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-secondary);
  z-index: 1;
}

.skill-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: not-allowed;
  z-index: 10;
}

/* Mobile Responsiveness for Level System */
@media (max-width: 480px) {
  .level-header-summary {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .xp-text {
    justify-content: center;
    gap: 12px;
  }

  .next-level-distsance {
    text-align: center;
  }

  .skill-tree-list {
    grid-template-columns: 1fr;
  }
}

/* Mode Pill Indicator (Header-Integrated) */
.mode-pill-indicator {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 20px;
  padding: 4px 4px 4px 12px;
  border: 1px solid #e2e8f0;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slideInLeft 0.5s ease-out;
}

.mode-pill-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mode-pill-tutorial {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-pill-tutorial:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: scale(1.1);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== SURVIVAL GAME STYLES ===== */
.survival-game-overlay {
  --surv-bg: radial-gradient(circle at 50% 50%, #f1ede4 0%, #e1ddd4 65%, #d2cdbf 100%);
  --surv-accent: #b24c4c;
  --surv-text: #2f2f2f;

  position: fixed;
  inset: 0;
  background: var(--surv-bg);
  z-index: 99999;
  display: flex;
  color: var(--surv-text);
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow: hidden;
  isolation: isolate;
}

body.survival-active .modal,
body.survival-active .entry-modal,
body.survival-active .progress-panel-side,
body.survival-active .vocab-panel-side,
body.survival-active .srs-panel,
body.survival-active .srs-overlay,
body.survival-active .auth-overlay,
body.survival-active .progress-panel-overlay,
body.survival-active .vocab-panel-overlay,
body.survival-active .guest-toast,
body.survival-active .version-indicator,
body.survival-active .vocab-alert-modal,
body.survival-active .vocab-add-modal,
body.survival-active #shop-modal,
body.survival-active #level-system-container {
  display: none !important;
  visibility: hidden !important;
}

#survival-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  z-index: 1;
}

.survival-hud {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 10;
}

.hud-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(47, 47, 47, 0.75);
}

.hud-score span,
.hud-wave span {
  color: var(--surv-accent);
}

.hud-time {
  font-size: 20px;
  letter-spacing: 0.22em;
  color: rgba(47, 47, 47, 0.8);
}

.hud-weapon {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(47, 47, 47, 0.6);
}

.hud-wordrush {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(47, 47, 47, 0.55);
}

.hud-wordrush.is-active {
  color: rgba(0, 208, 132, 0.85);
}

.survival-track-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.survival-track-btn {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: rgba(247, 246, 242, 0.84);
  color: rgba(47, 47, 47, 0.8);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}

.survival-track-btn:hover {
  background: #faf7f0;
}

.survival-track-label {
  min-width: 120px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(47, 47, 47, 0.66);
}

.survival-audio-controls {
  position: relative;
  pointer-events: auto;
}

.survival-audio-toggle {
  min-width: 68px;
}

.survival-audio-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(247, 246, 242, 0.95);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(2px);
  z-index: 22;
}

.survival-audio-panel[hidden] {
  display: none !important;
}

.survival-audio-row {
  display: grid;
  grid-template-columns: 34px 1fr 42px;
  align-items: center;
  gap: 8px;
}

.survival-audio-name,
.survival-audio-value {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 47, 47, 0.74);
}

.survival-audio-value {
  text-align: right;
}

.survival-audio-row input[type="range"] {
  width: 100%;
  accent-color: #b24c4c;
}

.survival-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.survival-setting-btn {
  min-width: 92px;
}

.hud-hp-container {
  display: none;
}

.hud-hp-bar {
  height: 100%;
}

.hud-hp-bar .hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--surv-red), #fa5252 55%, var(--surv-amber));
  transition: width 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 18px rgba(255, 107, 107, 0.34);
  position: relative;
  overflow: hidden;
}

.hud-hp-bar .hp-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  transform: translateX(-60%);
  animation: survival-sheen 2.6s linear infinite;
}

.survival-game-overlay .survival-xp {
  position: absolute;
  top: 74px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 85%);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.survival-game-overlay .xp-bar {
  flex: 1;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.survival-game-overlay .xp-bar-fill {
  height: 100%;
  width: 0%;
  background: #b24c4c;
  box-shadow: none;
  transition: width 140ms linear;
}

.survival-game-overlay .xp-level {
  flex: 0 0 auto;
  display: none;
}

/* Dashboard Card Visuals: Survival */
.visual-survival {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fb7185;
}

.visual-survival .ctx-icon {
  filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.4));
}

.enemy-glitch {
  animation: glitch-jump 3s infinite;
}

.enemy-glitch:nth-child(2) {
  animation-delay: 0.5s;
}

.enemy-glitch:nth-child(3) {
  animation-delay: 1.2s;
}

.laser-beam {
  animation: laser-pulse 1.5s infinite;
}

.player-ring {
  animation: ring-pulse 2s infinite;
  transform-origin: 55px 36px;
}

@keyframes glitch-jump {

  0%,
  100% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-2px, 3px);
  }

  20% {
    transform: translate(3px, -2px);
  }

  30% {
    transform: translate(-1px, 2px);
  }

  40% {
    transform: translate(2px, -1px);
  }
}

@keyframes laser-pulse {

  0%,
  100% {
    opacity: 0.2;
    stroke-dashoffset: 0;
  }

  50% {
    opacity: 1;
    stroke-dashoffset: 10;
  }
}

@keyframes ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.4);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.survival-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f7f6f2;
  color: #2f2f2f;
  padding: 34px 30px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  z-index: 20;
  animation: survival-modal-in 240ms cubic-bezier(0.2, 1, 0.2, 1) both;
}

.survival-modal h2,
.survival-modal h1 {
  margin-top: 0;
  color: var(--surv-accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.survival-enemy-tutorial-modal {
  width: min(760px, calc(100vw - 46px));
  max-width: min(760px, calc(100vw - 46px));
  padding: 28px 28px;
  text-align: left;
}

.survival-enemy-tutorial-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}

.survival-enemy-tutorial-image {
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.survival-enemy-tutorial-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(47, 47, 47, 0.78);
}

.survival-enemy-tutorial-bullets {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  font-size: 0.92rem;
  color: rgba(47, 47, 47, 0.72);
}

.survival-enemy-tutorial-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.survival-enemy-tutorial-prompt {
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(178, 76, 76, 0.12);
  border: 1px solid rgba(178, 76, 76, 0.26);
  color: rgba(47, 47, 47, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .survival-enemy-tutorial-modal {
    padding: 22px 18px;
    text-align: center;
  }

  .survival-enemy-tutorial-body {
    grid-template-columns: 1fr;
  }

  .survival-enemy-tutorial-image {
    max-width: 100%;
    margin: 0 auto;
  }

  .survival-enemy-tutorial-actions {
    justify-content: center;
  }
}

.gameover-title {
  font-size: 3rem;
  color: #ff6b6b !important;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.final-stats {
  font-size: 1.5rem;
  margin: 20px 0;
}

.gameover-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.survival-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.65);
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  z-index: 30;
  display: grid;
  place-items: center;
}

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.upgrade-card {
  background: #f4f1ea;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: default;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.2s;
}

.upgrade-card:hover {
  transform: translateY(-4px);
  background: #faf7f0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.upgrade-icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.48);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.upgrade-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.upgrade-target {
  margin: 8px 0 0;
  font-size: 11px;
  color: rgba(47, 47, 47, 0.65);
}

.upgrade-command {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 47, 47, 0.72);
}

@keyframes survival-sheen {
  0% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(60%);
  }
}

@keyframes survival-hud-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes survival-xp-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes survival-modal-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 720px) {
  .survival-hud {
    left: 50%;
    transform: translateX(-50%);
    gap: 6px;
    flex-direction: column;
    align-items: center;
  }

  .hud-top {
    font-size: 11px;
  }

  .survival-track-label {
    max-width: 180px;
  }

  .survival-audio-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(280px, 90vw);
  }

  .upgrade-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LingoRPG Skill Tree Final Theme (Dragon Nest / 3D Metallic Refined)
   ========================================================================== */

:root {
  --active: #3b82f6;
  --activeGlow: rgba(59, 130, 246, 0.4);
  --passive: #f59e0b;
  --passiveGlow: rgba(245, 158, 11, 0.3);
  --rpg-panel-bg: #f8fafc;
  --rpg-metal-border: #94a3b8;
  --rpg-text: #334155;
  --rpg-text-muted: #64748b;
}

.rpg-main-layout {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 420px;
  height: 90vh;
  max-height: 1200px;
  background: var(--rpg-panel-bg);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rpg-metal-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  color: var(--rpg-text);
}

.rpg-sidebar {
  background: #f1f5f9;
  border-right: 1px solid #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.rpg-sidebar-header {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  text-align: center;
}

.rpg-category-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rpg-cat-btn {
  width: 100%;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.rpg-cat-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1e293b;
}

.rpg-cat-btn.active {
  background: white;
  color: #3b82f6;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.rpg-sidebar-footer {
  margin-top: auto;
  padding: 12px;
  background: #e2e8f0;
  border-radius: 12px;
  text-align: center;
}

.rpg-coins-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  color: #b45309;
}

.rpg-tree-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 5%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  overflow: hidden;
  box-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.3);
  margin: 14px;
  min-height: 0;
}

.rpg-tree-toolbar {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0;
}

.rpg-tree-gesture-hint {
  margin-right: auto;
  color: #94a3b8;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0.95;
}

.rpg-zoom-btn,
.rpg-zoom-reset {
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  font-weight: 800;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.rpg-zoom-reset {
  padding: 0 10px;
  min-width: 56px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rpg-zoom-btn:hover,
.rpg-zoom-reset:hover {
  background: rgba(30, 41, 59, 0.92);
  border-color: #64748b;
}

.rpg-zoom-value {
  min-width: 52px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 700;
}

.rpg-tree-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 10px 12px 12px;
  border-radius: 16px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  border: 1px solid rgba(100, 116, 139, 0.25);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(2, 6, 23, 0.45));
}

.rpg-tree-viewport.is-grabbing {
  cursor: grabbing;
}

.rpg-tree-viewport.is-gliding {
  cursor: grabbing;
}

.rpg-tree-viewport.is-pinching {
  cursor: zoom-in;
}

.rpg-tree-scene {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.rpg-tree-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(100, 116, 139, 0.15) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
}

.rpg-tree-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.rpg-tree-svg-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.rpg-links-svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Node Styling (Dark RPG) --- */
.rpg-node {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 18px;
  background: linear-gradient(145deg, #334155, #1e293b);
  border: 2px solid #475569;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rpg-node:hover {
  transform: translate(-50%, -50%) scale(1.12);
  z-index: 100;
  border-color: #94a3b8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.rpg-node.node-selected {
  border-color: #60a5fa;
  box-shadow: 0 0 24px var(--activeGlow), inset 0 0 0 1px rgba(96, 165, 250, 0.3);
}

/* Acquired (unlocked) node — bright, golden border */
.rpg-node.acquired {
  background: linear-gradient(145deg, #374151, #1f2937);
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.rpg-node.acquired .rpg-orb {
  border-color: #fbbf24;
}

/* Available node — pulsing glow */
.rpg-node.available {
  border-color: #34d399;
  animation: rpg-node-pulse 2s ease-in-out infinite;
}

@keyframes rpg-node-pulse {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

/* Locked node */
.rpg-node.locked {
  filter: brightness(0.5) saturate(0.3);
  opacity: 0.55;
}

.rpg-node.locked:hover {
  filter: brightness(0.7) saturate(0.5);
  opacity: 0.7;
}

/* Root node — larger, special glow */
.rpg-node.root {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: linear-gradient(145deg, #1e3a5f, #0c1f3d);
  border: 2px solid #60a5fa;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.25), 0 6px 24px rgba(0, 0, 0, 0.4);
}

.rpg-orb {
  width: 78px;
  height: 78px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 30%, #4b5563, #1f2937 100%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 2px solid #374151;
}

.root .rpg-orb {
  width: 84px;
  height: 84px;
  border-radius: 18px;
}

.active .rpg-orb {
  background: #ffffff;
  border-color: #60a5fa;
  box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.5), 0 0 10px var(--activeGlow);
}

.passive .rpg-orb {
  background: #ffffff;
  border-color: #fcd34d;
  box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.5), 0 0 10px var(--passiveGlow);
}

.rpg-icon {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  z-index: 2;
}

.root .rpg-icon {
  width: 68px !important;
  height: 68px !important;
}

.rpg-rank {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0f172a;
  color: #fbbf24;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid #475569;
  z-index: 20;
  letter-spacing: 0.02em;
}

.rpg-node.acquired .rpg-rank {
  background: #422006;
  border-color: #fbbf24;
}

/* Plus indicator for available nodes */
.rpg-plus {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #059669;
  color: white;
  font-size: 11px;
  font-weight: 900;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border: 1px solid #0f172a;
}

/* Available dot */
.rpg-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  z-index: 20;
  box-shadow: 0 0 6px #34d399;
}

/* --- Connection Lines --- */
.rpg-link {
  stroke: #475569;
  stroke-width: 2;
  opacity: 0.5;
  stroke-linecap: round;
  fill: none;
}

.rpg-link.active {
  stroke: #60a5fa;
  stroke-dasharray: 8 4;
  stroke-width: 2.5;
  opacity: 0.8;
}

.rpg-link.passive {
  stroke: #fbbf24;
  stroke-width: 2.5;
  opacity: 0.7;
}

.rpg-link.root {
  stroke: #60a5fa;
  stroke-width: 3;
  opacity: 0.8;
  filter: drop-shadow(0 0 2px #60a5fa);
}

/* ==========================================================================
   Mobile Responsive Adjustments for Skill Tree
   ========================================================================== */
@media (max-width: 900px) {
  .rpg-main-layout {
    display: flex;
    flex-direction: column;
    height: 85vh;
    height: 85dvh;
    min-height: 560px;
    border-radius: 12px;
  }

  /* Sidebar becomes a top horizontal scroller */
  .rpg-sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 8px;
    border-right: none;
    border-bottom: 1px solid #334155;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    background: #0f172a;
    /* Match dark theme */
  }

  .rpg-sidebar::-webkit-scrollbar {
    display: none;
  }

  .rpg-sidebar-header,
  .rpg-sidebar-footer {
    display: none;
  }

  .rpg-category-list {
    flex-direction: row;
    width: max-content;
    gap: 10px;
    padding-right: 4px;
  }

  .rpg-cat-btn {
    width: auto;
    padding: 7px 14px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 20px;
    font-size: 11px;
    scroll-snap-align: start;
    touch-action: manipulation;
  }

  .rpg-cat-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
  }

  /* Tree Container */
  .rpg-tree-container {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-radius: 0;
    border: none;
  }

  .rpg-tree-wrap {
    margin: 0;
    min-height: 0;
    border-radius: 0;
    border: none;
  }

  .rpg-tree-toolbar {
    padding: 10px 10px 0;
    gap: 6px;
    flex-wrap: wrap;
  }

  .rpg-tree-gesture-hint {
    width: 100%;
    margin-right: 0;
    font-size: 0.66rem;
    color: #a5b4fc;
    letter-spacing: 0.02em;
  }

  .rpg-tree-viewport {
    margin: 8px 8px 10px;
    border-radius: 12px;
    min-height: 360px;
  }

  .rpg-zoom-btn,
  .rpg-zoom-reset {
    height: 34px;
    min-width: 34px;
  }

  .rpg-zoom-reset {
    min-width: 56px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .rpg-zoom-value {
    min-width: 50px;
    font-size: 0.72rem;
  }

  /* Keep nodes tappable on mobile */
  .rpg-node {
    transform: translate(-50%, -50%);
  }

  .rpg-node:hover {
    transform: translate(-50%, -50%) scale(1.03);
  }

  /* Detail Panel - Slide up Bottom Sheet */
  #rpg-detail-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background: white;
    z-index: 2000;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  #rpg-detail-panel.active {
    transform: translateY(0);
  }

  /* Close button for mobile panel */
  .rpg-close-detail {
    display: block !important;
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    z-index: 10;
  }
}

/* Hide close button on desktop */
.rpg-close-detail {
  display: none;
}

.rpg-detail-panel {
  background: white;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  border-left: 1px solid #cbd5e1;
}

.rpg-detail-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 2px;
}

.rpg-detail-sub {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rpg-req-group {
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
  border: 1px solid #e2e8f0;
}

.rpg-req-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

.rpg-req-item:last-child {
  border-bottom: none;
}

.rpg-req-item .label {
  color: #64748b;
  font-size: 13px;
}

.rpg-req-item .val {
  font-weight: 700;
  color: #ef4444;
}

.rpg-req-item.unlocked .val {
  color: #10b981;
}

.rpg-detail-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  margin-bottom: 16px;
}

.rpg-detail-stat {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

.calib-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 50%;
  font-size: 10px;
  margin-left: 6px;
  cursor: help;
  font-weight: 800;
}

.rpg-action-btn {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  margin-top: auto;
}

.rpg-action-btn.btn-active {
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Color Utilities preserved */
.bg-listening {
  background-color: #3b82f6;
}

.text-listening {
  color: #3b82f6;
}

.border-listening {
  border-color: #3b82f6;
}

.bg-writing {
  background-color: #8b5cf6;
}

.text-writing {
  color: #8b5cf6;
}

.border-writing {
  border-color: #8b5cf6;
}

.bg-reading {
  background-color: #10b981;
}

.text-reading {
  color: #10b981;
}

.border-reading {
  border-color: #10b981;
}

.bg-speaking {
  background-color: #f59e0b;
}

.text-speaking {
  color: #f59e0b;
}

.border-speaking {
  border-color: #f59e0b;
}

.rpg-icon-large {
  width: 220px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.rpg-detail-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  width: 250px;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
}

#level-system-container .rpg-main-layout {
  height: 90vh;
  max-height: 1200px;
}

.rpg-rune.large {
  width: 100px;
  height: 100px;
  font-size: 2.5rem;
  line-height: 100px;
  border-width: 3px;
}

/* Override for larger skill icons */
.rpg-icon-large {
  width: 440px !important;
  height: 440px !important;
}

.rpg-detail-icon-wrapper {
  width: 480px !important;
  height: 480px !important;
}

/* Skill Detail Enhanced Styles */
.rpg-detail-modes {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: var(--text-xs);
}

.rpg-detail-modes .label {
  color: #64748b;
  margin-right: 6px;
}

.rpg-detail-modes .val {
  font-weight: 700;
  color: #3b82f6;
  letter-spacing: 0.05em;
}

.rpg-calib-box {
  margin-top: 16px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px;
}

.rpg-calib-header {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  color: #334155;
}

.rpg-calib-explain {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: #64748b;
  margin: 0;
}

/* Coming Soon Badge */
.rpg-coming-soon-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 2px 8px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ==========================================================================
   Reading Journey — Modern UI Redesign (Calm UI + Glassmorphism)
   ========================================================================== */

.rj-theme-modern {
  /* Colors - Light Mode (Calm UI) */
  --rj-bg-base: #f0f4f8;
  --rj-bg-glass: rgba(255, 255, 255, 0.65);
  --rj-bg-glass-heavy: rgba(255, 255, 255, 0.88);
  --rj-border-glass: rgba(203, 213, 225, 0.45);
  --rj-border-soft: rgba(226, 232, 240, 0.8);

  --rj-text-primary: #0f172a;
  --rj-text-muted: #64748b;
  --rj-text-subtle: #94a3b8;

  /* Brand/Accent */
  --rj-accent: #3b82f6;
  --rj-accent-hover: #2563eb;
  --rj-accent-glow: rgba(59, 130, 246, 0.25);
  --rj-accent-gradient: linear-gradient(135deg, #3b82f6, #2563eb);

  /* Danger */
  --rj-danger: #ef4444;
  --rj-danger-hover: #dc2626;

  /* Typography */
  --rj-font-story: 'Lora', Georgia, serif;
  --rj-font-ui: 'Outfit', system-ui, -apple-system, sans-serif;

  /* Shadows for depth */
  --rj-shadow-soft: 0 4px 24px rgba(15, 23, 42, 0.06);
  --rj-shadow-hover: 0 12px 40px rgba(15, 23, 42, 0.12);
  --rj-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);

  /* Radii */
  --rj-radius-sm: 10px;
  --rj-radius-md: 16px;
  --rj-radius-lg: 24px;
  --rj-radius-pill: 999px;

  /* Transitions */
  --rj-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rj-duration: 0.3s;
}

/* Reading Journey (hidden route-only page) */
.readingjourney-root {
  position: fixed;
  inset: 0;
  overflow: auto;
  z-index: 9999;
  min-height: 100vh;
  padding: 24px 16px;
  background: radial-gradient(circle at 100% 0%, #e0e7ff 0%, #eff6ff 45%, #ffffff 100%);
  transition: background 0.4s ease;
}

.readingjourney-root.rj-theme-modern {
  background: linear-gradient(160deg, #e8eef6 0%, #f0f4f8 35%, #eef2f7 65%, #e6ecf4 100%);
  font-family: var(--rj-font-ui);
  color: var(--rj-text-primary);
}

body.readingjourney-active {
  overflow: hidden;
}

body.readingjourney-active #page-layout-wrapper {
  display: none !important;
}

body.readingjourney-active #readingjourney-root {
  display: block !important;
}

.rj-shell {
  max-width: 920px;
  margin: 0 auto;
}

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

.rj-title__name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.rj-title__sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.rj-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  margin-bottom: 12px;
}

.rj-card__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.rj-muted {
  color: var(--text-muted);
  font-size: 13px;
  margin: 10px 0 0;
}

.rj-field {
  display: block;
  margin: 12px 0;
}

.rj-field__label {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 13px;
  color: #334155;
}

.rj-field--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.rj-field--inline .rj-field__label {
  margin: 0;
  white-space: nowrap;
}

.rj-input,
.rj-select,
.rj-textarea {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: #ffffff;
  color: #0f172a;
}

.rj-textarea {
  resize: vertical;
  min-height: 72px;
}

.rj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rj-alert {
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #065f46;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

.rj-alert--error {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #9f1239;
}

.rj-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
}

.rj-spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(29, 78, 216, 0.2);
  border-top-color: #1d4ed8;
  animation: rj-spin 0.9s linear infinite;
}

@keyframes rj-spin {
  to {
    transform: rotate(360deg);
  }
}

.rj-story__title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  color: #0f172a;
}

.rj-transcript {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 10px 12px;
}

.rj-transcript__label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #475569;
}

.rj-transcript__body {
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
  padding-right: 6px;
}

.rj-transcript__item {
  padding: 8px 0;
  border-top: 1px solid #e2e8f0;
}

.rj-transcript__item:first-child {
  border-top: none;
  padding-top: 0;
}

.rj-transcript__beat {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
}

.rj-transcript__segment {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: #0f172a;
}

.rj-segment {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
}

.rj-segment__text {
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: #0f172a;
}

.rj-segment__recap {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.rj-choice__question {
  margin-top: 12px;
  font-weight: 900;
  color: #0f172a;
}

.rj-choice__options {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rj-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.rj-option:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.rj-option input {
  margin-top: 3px;
}

/* ==========================================================================
   Reading Journey — Redesigned & Enhanced Styles (Phase 1-4)
   ========================================================================== */

/* ── Google Font: Lora for story body (loaded via <head> in index.html) */


/* ── Story header controls ────────────────────────────────────────────────── */
.rj-story__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.rj-story__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Icon buttons ─────────────────────────────────────────────────────────── */
.rj-icon-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  line-height: 1;
}

.rj-icon-btn:hover {
  background: #e2e8f0;
  transform: scale(1.05);
}

.rj-icon-btn--off {
  opacity: 0.45;
}

/* ── Mode buttons ─────────────────────────────────────────────────────────── */
.rj-mode-group {
  display: flex;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.rj-mode-btn {
  padding: 6px 12px;
  border: none;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.rj-mode-btn+.rj-mode-btn {
  border-left: 1px solid #e2e8f0;
}

.rj-mode-btn--active {
  background: #3b82f6;
  color: #fff;
}

/* ── Speed row ───────────────────────────────────────────────────────────── */
.rj-speed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
}

.rj-speed-label {
  font-size: 12px;
  font-weight: 700;
  color: #0369a1;
  white-space: nowrap;
}

.rj-speed-btns {
  display: flex;
  gap: 6px;
}

.rj-speed-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #bae6fd;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.rj-speed-btn--active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.rj-progress-wrap {
  position: relative;
  height: 6px;
  background: #e2e8f0;
  border-radius: 99px;
  margin-bottom: 14px;
  overflow: visible;
}

.rj-progress-bar {
  height: 100%;
  border-radius: 99px;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, #3b82f6, #10b981);
}

.rj-progress-dots {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.rj-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
  transition: background 0.4s, box-shadow 0.4s;
}

.rj-progress-dot--done {
  background: var(--dot-color, #10b981);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.rj-progress-dot--active {
  background: var(--dot-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  animation: rj-pulse-dot 1.2s ease-in-out infinite;
}

@keyframes rj-pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15);
  }
}

/* ── Sentence reveal animation ────────────────────────────────────────────── */
.rj-sentence {
  display: inline;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.rj-sentence--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Story body uses a serif font for readability */
.rj-segment__text {
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  line-height: 1.85;
  white-space: normal;
  color: #0f172a;
  letter-spacing: 0.01em;
}

/* Level-colored left accent on the beat card */
.rj-segment {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 16px 16px 20px;
  margin-top: 10px;
  border-left: 4px solid var(--rj-accent, #3b82f6);
  transition: border-color 0.3s;
}

/* ── Highlight system ─────────────────────────────────────────────────────── */
.rj-highlight {
  background: transparent;
  font-weight: inherit;
  border-radius: 4px;
  padding: 0 2px;
  transition: background-color 0.5s ease, font-weight 0.4s ease, color 0.4s ease;
}

.rj-highlight--on {
  background-color: rgba(250, 204, 21, 0.38);
  font-weight: 700;
  color: #78350f;
}

/* ── Choice cards ─────────────────────────────────────────────────────────── */
.rj-choice__options {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rj-choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.rj-choice-card:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  transform: translateX(4px);
}

.rj-choice-card--selected {
  border-color: #3b82f6;
  background: #eff6ff;
}

.rj-choice-card--busy {
  opacity: 0.5;
  pointer-events: none;
}

.rj-choice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e2e8f0;
  font-size: 12px;
  font-weight: 900;
  color: #475569;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.rj-choice-card--selected .rj-choice-badge {
  background: #3b82f6;
  color: #fff;
}

.rj-choice-text {
  font-size: 14px;
  line-height: 1.5;
  color: #0f172a;
}

/* ── Hint bar ─────────────────────────────────────────────────────────────── */
.rj-hint {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  padding: 6px 12px;
  margin-bottom: 6px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-style: italic;
}

/* ── Fade-in for question areas appearing ─────────────────────────────────── */
.rj-fadein {
  animation: rj-fadein-up 0.35s ease-out both;
}

@keyframes rj-fadein-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Setup card enhancements ─────────────────────────────────────────────── */
.rj-setup-card {
  background: linear-gradient(135deg, #fff 75%, rgba(99, 102, 241, 0.04) 100%);
}

.rj-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
  min-height: 0;
}

.rj-tag-chip {
  padding: 5px 14px;
  border-radius: 99px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.rj-tag-chip:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.rj-tag-chip--selected {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
}

/* ── Complete screen ─────────────────────────────────────────────────────── */
.rj-complete__hero {
  text-align: center;
  padding: 16px 0 8px;
}

.rj-complete__badge {
  font-size: 40px;
  margin-bottom: 4px;
  animation: rj-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes rj-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.rj-complete__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

/* Report card */
.rj-report {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.rj-report__row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.rj-report__row:last-child {
  border-bottom: none;
}

.rj-report__label {
  color: #64748b;
  font-weight: 600;
}

.rj-report__val {
  color: #0f172a;
  font-weight: 800;
}

/* Path diagram */
.rj-path-diagram {
  margin: 8px 0 16px;
}

.rj-path-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 10px;
}

.rj-path-track {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rj-path-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 64px;
}

.rj-path-icon {
  font-size: 18px;
}

.rj-path-beat {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

@media (max-width: 640px) {
  .main-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .header-left {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mode-pill-indicator {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
  }

  .mode-pill-name,
  .difficulty-badge .diff-level-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .difficulty-badge {
    align-self: flex-start;
    max-width: 100%;
  }
}

.rj-path-arrow {
  font-size: 16px;
  color: #94a3b8;
  font-weight: 900;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
.readingjourney-root.rj-dark {
  background: radial-gradient(circle at 100% 0%, #1e1b4b 0%, #0f172a 60%, #0a0f1e 100%);
}

.rj-dark .rj-card {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

.rj-dark .rj-card__title {
  color: #f1f5f9;
}

.rj-dark .rj-title__name {
  color: #f1f5f9;
}

.rj-dark .rj-muted {
  color: #94a3b8;
}

.rj-dark .rj-segment {
  background: #0f172a;
  border-color: #334155;
}

.rj-dark .rj-segment__text {
  color: #e2e8f0;
}

.rj-dark .rj-transcript {
  background: #0f172a;
  border-color: #334155;
}

.rj-dark .rj-transcript__segment {
  color: #cbd5e1;
}

.rj-dark .rj-transcript__beat {
  color: #93c5fd;
}

.rj-dark .rj-input,
.rj-dark .rj-select,
.rj-dark .rj-textarea {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

.rj-dark .rj-choice-card {
  background: #1e293b;
  border-color: #334155;
}

.rj-dark .rj-choice-card:hover {
  background: #0f172a;
  border-color: #475569;
}

.rj-dark .rj-choice-card--selected {
  background: #1e3a5f;
  border-color: #3b82f6;
}

.rj-dark .rj-choice-badge {
  background: #334155;
  color: #94a3b8;
}

.rj-dark .rj-choice-card--selected .rj-choice-badge {
  background: #3b82f6;
  color: #fff;
}

.rj-dark .rj-choice-text {
  color: #e2e8f0;
}

.rj-dark .rj-icon-btn {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

.rj-dark .rj-icon-btn:hover {
  background: #475569;
}

.rj-dark .rj-mode-btn {
  background: #1e293b;
  color: #94a3b8;
}

.rj-dark .rj-mode-btn--active {
  background: #3b82f6;
  color: #fff;
}

.rj-dark .rj-progress-wrap {
  background: #334155;
}

.rj-dark .rj-progress-dot {
  background: #334155;
  border-color: #1e293b;
}

.rj-dark .rj-hint {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

.rj-dark .rj-tag-chip {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

.rj-dark .rj-tag-chip--selected {
  background: #1e3a5f;
  border-color: #3b82f6;
  color: #93c5fd;
}

.rj-dark .rj-report {
  background: #0f172a;
  border-color: #334155;
}

.rj-dark .rj-report__row {
  border-color: #334155;
}

.rj-dark .rj-report__label {
  color: #94a3b8;
}

.rj-dark .rj-report__val {
  color: #f1f5f9;
}

.rj-dark .rj-path-node {
  background: #1e293b;
  border-color: #334155;
}

.rj-dark .rj-path-arrow {
  color: #475569;
}

.rj-dark .rj-speed-row {
  background: #0c1a2e;
  border-color: #334155;
}

.rj-dark .rj-speed-label {
  color: #93c5fd;
}

.rj-dark .rj-speed-btn {
  background: #1e293b;
  border-color: #334155;
  color: #93c5fd;
}

.rj-dark .rj-speed-btn--active {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}

.rj-dark .rj-highlight--on {
  background-color: rgba(253, 224, 71, 0.2);
  color: #fde68a;
}

/* ── Focus / Immersive mode ───────────────────────────────────────────────── */

.readingjourney-root.rj-focus .rj-transcript {
  display: none !important;
}

.readingjourney-root.rj-focus .rj-card {
  max-width: 700px;
  margin: 0 auto;
}

.readingjourney-root.rj-focus .rj-segment {
  background: #faf7f0;
  border-color: #e8dfc8;
  padding: 24px 28px;
}

.readingjourney-root.rj-focus .rj-segment__text {
  font-size: 18px;
  line-height: 2;
}

.rj-dark.readingjourney-root.rj-focus .rj-segment {
  background: #0a0f1e;
  border-color: #1e293b;
}

/* ── Choice group ─────────────────────────────────────────────────────────── */

.rj-choice {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e2e8f0;
}

.rj-dark .rj-choice {
  border-top-color: #334155;
}


/* ── Header actions ───────────────────────────────────────────────────────── */
.rj-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Complete card override (was monospace, now styled) ───────────────────── */
.rj-complete__card {
  border-radius: 14px;
  overflow: hidden;
}

/* ── Skeleton shimmer for loading ─────────────────────────────────────────── */
@keyframes rj-shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.rj-skeleton-active::after {
  content: '';
  display: block;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f0f4f8 50%, #e2e8f0 75%);
  background-size: 800px 100%;
  animation: rj-shimmer 1.4s ease-in-out infinite;
  margin: 8px 0;
}

/* ── Story Library ────────────────────────────────────────────────────────── */
.rj-library {
  margin-top: 20px;
}

.rj-library__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
  margin-bottom: 16px;
}

.rj-library__heading {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.rj-library__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.rj-library__empty {
  text-align: center;
  padding: 24px 12px;
  color: #94a3b8;
  font-size: 13px;
  font-style: italic;
}

.rj-library-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.rj-library-card:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.rj-library-card:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.rj-library-card__level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.rj-library-card__body {
  flex: 1;
  min-width: 0;
}

.rj-library-card__title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rj-library-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rj-library-card__tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 600;
  text-transform: capitalize;
}

.rj-library-card__arrow {
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 700;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}

.rj-library-card:hover .rj-library-card__arrow {
  color: #3b82f6;
  transform: translateX(2px);
}

/* Story Library dark mode */
.rj-dark .rj-library__divider {
  background: linear-gradient(90deg, transparent, #334155 20%, #334155 80%, transparent);
}

.rj-dark .rj-library__heading {
  color: #f1f5f9;
}

.rj-dark .rj-library-card {
  background: #1e293b;
  border-color: #334155;
}

.rj-dark .rj-library-card:hover {
  background: #0f172a;
  border-color: #475569;
}

.rj-dark .rj-library-card__title {
  color: #f1f5f9;
}

.rj-dark .rj-library-card__tag {
  background: #334155;
  color: #94a3b8;
}

.rj-dark .rj-library-card__arrow {
  color: #475569;
}

.rj-dark .rj-library-card:hover .rj-library-card__arrow {
  color: #60a5fa;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .rj-story__controls {
    gap: 6px;
  }

  .rj-mode-btn {
    padding: 5px 9px;
    font-size: 11px;
  }

  .rj-choice-card {
    padding: 10px 12px;
  }

  .rj-segment__text {
    font-size: 15px;
  }

  .readingjourney-root.rj-focus .rj-segment__text {
    font-size: 16px;
  }
}

/* ==========================================================================
   Reading Journey — Modern UI Redesign Phase 1 Overrides
   ========================================================================== */

/* ── Typography & Readability (Calm UI) ── */
.rj-theme-modern .rj-segment__text,
.rj-theme-modern .rj-transcript__segment {
  /* Variable font implementation for story body */
  font-family: var(--rj-font-story);
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  /* Adaptive sizing */
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--rj-text-primary);
  /* Optimal line length (60-80 chars approx) */
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Base UI typography applies to cards, inputs */
.rj-theme-modern .rj-card,
.rj-theme-modern .rj-library-card,
.rj-theme-modern .rj-choice-card,
.rj-theme-modern .rj-header {
  font-family: var(--rj-font-ui);
}

.rj-theme-modern .rj-title__name,
.rj-theme-modern .rj-card__title,
.rj-theme-modern .rj-story__title {
  letter-spacing: -0.02em;
  /* Tighter tracking for modern headers */
}

/* ── True Dark Mode (`#0a0f1e`) implementation ── */
.readingjourney-root.rj-theme-modern.rj-dark {
  /* Deep Navy/True Black for OLED optimization */
  --rj-bg-base: #0a0f1e;
  --rj-bg-glass: rgba(15, 23, 42, 0.75);
  --rj-bg-glass-heavy: rgba(15, 23, 42, 0.95);
  --rj-border-glass: rgba(51, 65, 85, 0.4);
  --rj-border-soft: rgba(51, 65, 85, 0.8);

  --rj-text-primary: #f1f5f9;
  --rj-text-muted: #94a3b8;
}

/* Apply the dark mode base overrides */
.rj-theme-modern.rj-dark .rj-card,
.rj-theme-modern.rj-dark .rj-library-card {
  background: var(--rj-bg-glass);
  border-color: var(--rj-border-glass);
}

.rj-theme-modern.rj-dark .rj-segment,
.rj-theme-modern.rj-dark .rj-transcript {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--rj-border-glass);
}

/* ── Phase 2: Layout & Subtle Immersion (Glassmorphism 2.0) ── */

.rj-theme-modern .rj-glass {
  background: var(--rj-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rj-border-glass);
  box-shadow: var(--rj-shadow-soft);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rj-theme-modern .rj-card,
.rj-theme-modern .rj-library-card,
.rj-theme-modern .rj-choice-card {
  background: var(--rj-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rj-border-glass);
  border-radius: 24px;
  /* Softer corners */
  padding: 2rem;
  box-shadow: var(--rj-shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.rj-theme-modern .rj-card:hover,
.rj-theme-modern .rj-library-card:hover,
.rj-theme-modern .rj-choice-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rj-shadow-hover);
  border-color: var(--rj-border-soft);
}

/* ── Reading Canvas (Boundless immersion) ── */

.rj-theme-modern .rj-story-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
  background: transparent;
  /* Boundless canvas */
}

/* Story segments should float in the canvas */
.rj-theme-modern .rj-segment {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 3rem;
  animation: rj-canvas-fadein 0.8s ease-out forwards;
}

@keyframes rj-canvas-fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out edges for immersion */
.rj-theme-modern .rj-shell {
  background: var(--rj-bg-base);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.rj-theme-modern .rj-shell::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, var(--rj-bg-base), transparent);
  pointer-events: none;
  z-index: 10;
}

.rj-theme-modern .rj-shell::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, var(--rj-bg-base), transparent);
  pointer-events: none;
  z-index: 10;
}

/* ==========================================================================
   Phase 3: Comprehensive UI Component Styles (Calm Immersion)
   ========================================================================== */

/* ── 1. Header Bar ── */
.rj-theme-modern .rj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rj-bg-glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rj-border-glass);
  border-radius: 0 0 var(--rj-radius-lg) var(--rj-radius-lg);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
  margin-bottom: 32px;
}

.rj-theme-modern .rj-header__logo {
  font-family: var(--rj-font-story);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--rj-accent, #3b82f6);
}

.rj-theme-modern .rj-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── 2. Buttons ── */

/* Base button reset */
.rj-theme-modern .rj-btn {
  font-family: var(--rj-font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  border-radius: var(--rj-radius-sm);
  padding: 10px 22px;
  transition: all var(--rj-duration) var(--rj-ease);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}

/* Primary button (Start, Continue) */
.rj-theme-modern .rj-btn--primary {
  background: var(--rj-accent-gradient);
  color: #fff;
  box-shadow: 0 4px 14px var(--rj-accent-glow);
}

.rj-theme-modern .rj-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--rj-accent-glow), var(--rj-shadow-glow);
}

.rj-theme-modern .rj-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--rj-accent-glow);
}

/* Outline button (Suggest) */
.rj-theme-modern .rj-btn--outline {
  background: transparent;
  color: var(--rj-accent);
  border: 1.5px solid var(--rj-border-glass);
  backdrop-filter: blur(8px);
}

.rj-theme-modern .rj-btn--outline:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--rj-accent);
  transform: translateY(-1px);
}

/* Exit button */
.rj-theme-modern .rj-btn--exit {
  background: transparent;
  color: var(--rj-text-muted);
  padding: 8px 16px;
  font-size: var(--text-xs);
  border-radius: var(--rj-radius-pill);
}

.rj-theme-modern .rj-btn--exit:hover {
  color: var(--rj-danger);
  background: rgba(239, 68, 68, 0.08);
}

/* Large CTA button */
.rj-theme-modern .rj-btn--lg {
  width: 100%;
  padding: 16px 32px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--rj-radius-md);
  background: var(--rj-accent-gradient);
  color: #fff;
  box-shadow: 0 6px 20px var(--rj-accent-glow);
}

.rj-theme-modern .rj-btn--lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 35px var(--rj-accent-glow), var(--rj-shadow-glow);
}

/* ── 3. Input Field ── */
.rj-theme-modern .rj-input {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--rj-font-ui);
  font-size: var(--text-sm);
  background: var(--rj-bg-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--rj-border-glass);
  border-radius: var(--rj-radius-sm);
  color: var(--rj-text-primary);
  transition: all var(--rj-duration) var(--rj-ease);
  box-sizing: border-box;
  outline: none;
}

.rj-theme-modern .rj-input::placeholder {
  color: var(--rj-text-subtle);
}

.rj-theme-modern .rj-input:focus {
  border-color: var(--rj-accent);
  box-shadow: 0 0 0 3px var(--rj-accent-glow);
  background: var(--rj-bg-glass-heavy);
}

/* ── 4. Select Dropdown ── */
.rj-theme-modern .rj-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-family: var(--rj-font-ui);
  font-size: var(--text-sm);
  background: var(--rj-bg-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--rj-border-glass);
  border-radius: var(--rj-radius-sm);
  color: var(--rj-text-primary);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: all var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-select:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

.rj-theme-modern .rj-select:focus {
  border-color: var(--rj-accent);
  box-shadow: 0 0 0 3px var(--rj-accent-glow);
}

/* ── 5. Labels & Text ── */
.rj-theme-modern .rj-label {
  display: block;
  font-family: var(--rj-font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--rj-text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.rj-theme-modern .rj-muted {
  font-family: var(--rj-font-ui);
  font-size: var(--text-xs);
  color: var(--rj-text-muted);
}

.rj-theme-modern .rj-card__title {
  font-family: var(--rj-font-ui);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rj-text-primary);
  margin-bottom: 24px;
}

/* ── 6. Form layout ── */
.rj-theme-modern .rj-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rj-theme-modern .rj-form-group {
  display: flex;
  flex-direction: column;
}

.rj-theme-modern .rj-form-actions {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.rj-theme-modern .rj-level-select {
  flex: 1;
  min-width: 180px;
}

.rj-theme-modern .rj-mt-sm {
  margin-top: 16px;
}

/* ── 7. Library Section ── */
.rj-theme-modern .rj-library__divider {
  height: 1px;
  margin: 32px 0 24px;
  background: linear-gradient(90deg, transparent, var(--rj-border-soft), transparent);
}

.rj-theme-modern .rj-library__heading {
  font-family: var(--rj-font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 6px;
}

.rj-theme-modern .rj-library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.rj-theme-modern .rj-library__empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--rj-text-subtle);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ── 8. Library Cards ── */
.rj-theme-modern .rj-library-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--rj-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rj-border-glass);
  border-radius: var(--rj-radius-md);
  cursor: pointer;
  transition: all var(--rj-duration) var(--rj-ease);
  box-shadow: var(--rj-shadow-soft);
  position: relative;
  overflow: hidden;
}

.rj-theme-modern .rj-library-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rj-accent-gradient);
  opacity: 0;
  transition: opacity var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-library-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rj-shadow-hover);
  border-color: var(--rj-border-soft);
}

.rj-theme-modern .rj-library-card:hover::before {
  opacity: 1;
}

.rj-theme-modern .rj-library-card__level {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rj-radius-sm);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
}

.rj-theme-modern .rj-library-card__body {
  flex: 1;
  min-width: 0;
}

.rj-theme-modern .rj-library-card__title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rj-theme-modern .rj-library-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rj-theme-modern .rj-library-card__tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--rj-accent);
  border-radius: var(--rj-radius-pill);
  font-weight: 500;
}

.rj-theme-modern .rj-library-card__arrow {
  color: var(--rj-text-subtle);
  font-size: 1.2rem;
  transition: transform var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-library-card:hover .rj-library-card__arrow {
  transform: translateX(4px);
  color: var(--rj-accent);
}

/* ── 9. Icon Buttons ── */
.rj-theme-modern .rj-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--rj-bg-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--rj-radius-sm);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all var(--rj-duration) var(--rj-ease);
  border: 1px solid var(--rj-border-glass);
}

.rj-theme-modern .rj-icon-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  transform: scale(1.05);
}

.rj-theme-modern .rj-icon-btn--active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--rj-accent);
}

/* ── 10. Mode Toggle ── */
.rj-theme-modern .rj-mode-toggle {
  display: flex;
  background: var(--rj-bg-glass);
  border-radius: var(--rj-radius-pill);
  padding: 3px;
  border: 1px solid var(--rj-border-glass);
  gap: 0;
}

.rj-theme-modern .rj-mode-btn {
  font-family: var(--rj-font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 6px 16px;
  border: none;
  background: transparent;
  border-radius: var(--rj-radius-pill);
  cursor: pointer;
  color: var(--rj-text-muted);
  transition: all var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-mode-btn--active {
  background: var(--rj-accent-gradient);
  color: #fff;
  box-shadow: 0 2px 8px var(--rj-accent-glow);
}

/* ── 11. Speed Buttons ── */
.rj-theme-modern .rj-speed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.rj-theme-modern .rj-speed-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--rj-text-muted);
}

.rj-theme-modern .rj-speed-btns {
  display: flex;
  gap: 6px;
}

.rj-theme-modern .rj-speed-btn {
  font-family: var(--rj-font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--rj-border-glass);
  background: transparent;
  border-radius: var(--rj-radius-pill);
  cursor: pointer;
  color: var(--rj-text-muted);
  transition: all var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-speed-btn:hover {
  border-color: var(--rj-accent);
  color: var(--rj-accent);
}

.rj-theme-modern .rj-speed-btn--active {
  background: var(--rj-accent-gradient);
  color: #fff;
  border-color: transparent;
}

/* ── 12. Progress Bar ── */
.rj-theme-modern .rj-progress-wrap {
  background: rgba(203, 213, 225, 0.3);
  backdrop-filter: blur(6px);
  border-radius: var(--rj-radius-pill);
  height: 6px;
  overflow: hidden;
  margin: 16px 0 8px;
  position: relative;
}

.rj-theme-modern .rj-progress-bar {
  height: 100%;
  background: var(--rj-accent-gradient);
  border-radius: var(--rj-radius-pill);
  transition: width 0.6s var(--rj-ease);
  position: relative;
}

.rj-theme-modern .rj-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: rj-shimmer 2.5s infinite;
}

@keyframes rj-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.rj-theme-modern .rj-progress-dots {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  margin-top: 6px;
}

.rj-theme-modern .rj-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(203, 213, 225, 0.5);
  transition: all var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-progress-dot--active {
  background: var(--rj-accent);
  box-shadow: 0 0 8px var(--rj-accent-glow);
}

.rj-theme-modern .rj-progress-dot--done {
  background: var(--rj-accent);
}

/* ── 14. Text Area ── */
.rj-theme-modern .rj-textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px 18px;
  font-family: var(--rj-font-ui);
  font-size: var(--text-sm);
  background: var(--rj-bg-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--rj-border-glass);
  border-radius: var(--rj-radius-sm);
  color: var(--rj-text-primary);
  resize: vertical;
  outline: none;
  transition: all var(--rj-duration) var(--rj-ease);
  box-sizing: border-box;
}

.rj-theme-modern .rj-textarea:focus {
  border-color: var(--rj-accent);
  box-shadow: 0 0 0 3px var(--rj-accent-glow);
  background: var(--rj-bg-glass-heavy);
}

/* ── 15. Choice Cards ── */
.rj-theme-modern .rj-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: var(--rj-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--rj-border-glass);
  border-radius: var(--rj-radius-md);
  cursor: pointer;
  transition: all var(--rj-duration) var(--rj-ease);
  box-shadow: var(--rj-shadow-soft);
}

.rj-theme-modern .rj-choice-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rj-shadow-hover);
  border-color: rgba(59, 130, 246, 0.3);
}

.rj-theme-modern .rj-choice-card--selected {
  border-color: var(--rj-accent);
  background: rgba(59, 130, 246, 0.06);
  box-shadow: 0 0 0 2px var(--rj-accent-glow), var(--rj-shadow-soft);
}

.rj-theme-modern .rj-choice-badge {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rj-accent-gradient);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.rj-theme-modern .rj-choice-text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--rj-text-primary);
}

.rj-theme-modern .rj-choice__question {
  font-family: var(--rj-font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rj-text-primary);
  margin-bottom: 16px;
}

.rj-theme-modern .rj-choice__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 16. Tag Chips ── */
.rj-theme-modern .rj-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--rj-font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--rj-bg-glass);
  border: 1px solid var(--rj-border-glass);
  border-radius: var(--rj-radius-pill);
  cursor: pointer;
  color: var(--rj-text-muted);
  transition: all var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-tag-chip:hover {
  border-color: var(--rj-accent);
  color: var(--rj-accent);
  background: rgba(59, 130, 246, 0.06);
}

.rj-theme-modern .rj-tag-chip--selected {
  background: var(--rj-accent-gradient);
  color: #fff;
  border-color: transparent;
}

.rj-theme-modern .rj-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Story Footer ── */
.rj-theme-modern .rj-story__footer {
  text-align: center;
  padding: 24px 0 12px;
}

.rj-theme-modern .rj-hint {
  font-size: var(--text-xs);
  color: var(--rj-text-subtle);
  margin-bottom: 16px;
}

/* ── Story Header Card ── */
.rj-theme-modern .rj-story-header-card {
  margin-bottom: 32px;
}

.rj-theme-modern .rj-story__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rj-theme-modern .rj-story__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rj-theme-modern .rj-title__name {
  font-family: var(--rj-font-story);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* ── Story Complete ── */
.rj-theme-modern .rj-complete__hero {
  text-align: center;
  padding: 32px 0 24px;
}

.rj-theme-modern .rj-complete__badge {
  font-size: 3rem;
  margin-bottom: 12px;
}

.rj-theme-modern .rj-complete__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* ── Skeleton Loading ── */
.rj-theme-modern .rj-skeleton-active {
  position: relative;
}

.rj-theme-modern .rj-skeleton-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: rj-shimmer 1.5s infinite;
  border-radius: inherit;
}

/* ── Fade In Animation ── */
.rj-theme-modern .rj-fadein {
  animation: rj-fadein-up 0.5s var(--rj-ease) forwards;
}

@keyframes rj-fadein-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Alert ── */
.rj-theme-modern .rj-alert {
  padding: 14px 20px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--rj-radius-sm);
  color: var(--rj-danger);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 16px;
}

/* ── Filter Bar ── */
.rj-theme-modern .rj-filter-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.rj-theme-modern .rj-filter-bar__label {
  font-family: var(--rj-font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--rj-text-muted);
  padding-top: 6px;
  white-space: nowrap;
}

.rj-theme-modern .rj-filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rj-theme-modern .rj-filter-chip {
  font-family: var(--rj-font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--rj-border-glass);
  background: transparent;
  border-radius: var(--rj-radius-pill);
  cursor: pointer;
  color: var(--rj-text-muted);
  transition: all var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-filter-chip:hover {
  border-color: var(--rj-accent);
  color: var(--rj-accent);
  background: rgba(59, 130, 246, 0.06);
}

.rj-theme-modern .rj-filter-chip--active {
  background: var(--rj-accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px var(--rj-accent-glow);
}

/* ── Pagination ── */
.rj-theme-modern .rj-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
}

.rj-theme-modern .rj-pagination__btn {
  font-family: var(--rj-font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 8px 18px;
  border: 1.5px solid var(--rj-border-glass);
  background: var(--rj-bg-glass);
  backdrop-filter: blur(8px);
  border-radius: var(--rj-radius-sm);
  cursor: pointer;
  color: var(--rj-accent);
  transition: all var(--rj-duration) var(--rj-ease);
}

.rj-theme-modern .rj-pagination__btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--rj-accent);
  transform: translateY(-1px);
}

.rj-theme-modern .rj-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rj-theme-modern .rj-pagination__info {
  font-family: var(--rj-font-ui);
  font-size: 0.82rem;
  color: var(--rj-text-muted);
}

/* ── Dark Mode Overrides for Phase 3 ── */
.rj-theme-modern.rj-dark .rj-header {
  background: rgba(10, 15, 30, 0.85);
  border-color: rgba(51, 65, 85, 0.4);
}

.rj-theme-modern.rj-dark .rj-btn--outline {
  color: #93c5fd;
  border-color: rgba(51, 65, 85, 0.6);
}

.rj-theme-modern.rj-dark .rj-btn--outline:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: #60a5fa;
}

.rj-theme-modern.rj-dark .rj-input,
.rj-theme-modern.rj-dark .rj-select,
.rj-theme-modern.rj-dark .rj-textarea {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(51, 65, 85, 0.5);
  color: #f1f5f9;
}

.rj-theme-modern.rj-dark .rj-input::placeholder,
.rj-theme-modern.rj-dark .rj-textarea::placeholder {
  color: #475569;
}

.rj-theme-modern.rj-dark .rj-icon-btn {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.4);
}

.rj-theme-modern.rj-dark .rj-mode-toggle {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.4);
}

.rj-theme-modern.rj-dark .rj-mode-btn {
  color: #94a3b8;
}

.rj-theme-modern.rj-dark .rj-speed-btn {
  border-color: rgba(51, 65, 85, 0.5);
  color: #94a3b8;
}

.rj-theme-modern.rj-dark .rj-tag-chip {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.4);
  color: #94a3b8;
}

.rj-theme-modern.rj-dark .rj-choice-card {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.4);
}

.rj-theme-modern.rj-dark .rj-library-card {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.4);
}

/* ============================================
   Adaptive Difficulty Toggle
   ============================================ */
.adaptive-toggle-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 6px;
  gap: 10px;
  flex-wrap: wrap;
}

.segmented-control.mode-picker-toggle {
  display: flex;
  background-color: var(--bg-hover);
  border-radius: 20px;
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.segmented-control.mode-picker-toggle input[type="radio"] {
  display: none;
}

.segmented-control.mode-picker-toggle label {
  padding: 8px 16px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: all 0.3s ease;
  user-select: none;
}

.segmented-control.mode-picker-toggle input[type="radio"]:checked+label {
  background-color: var(--bg-card);
  color: var(--primary-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.calibration-indicator {
  font-size: var(--text-xs);
  /* Amber-600 on amber-100 measured 2.86:1. --gold-800 keeps the amber reading
     while clearing AA on the same tint. */
  color: var(--gold-800);
  font-weight: 600;
  background: #fef3c7;
  padding: 6px 12px;
  border-radius: 12px;
  animation: pulse 2s infinite;
}

/* Read Aloud mode — overflow containment */
#mode-read-aloud {
  overflow-x: clip;
  max-width: 100%;
  box-sizing: border-box;
}

#mode-read-aloud .read-aloud-container {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

/* ============================================
   Read Aloud — practice workbench
   ============================================
   The passage and its Speech Coach share one row so a marked word and the card
   explaining it stay in one line of sight. Everything measures from the same
   .spc-shell-grid the controller uses, which is what fixes the three competing
   column widths the page used to stack. */

.ra-workbench {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px auto 0;
  min-width: 0;
}

.ra-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── Guide bar ─────────────────────────────────────────────────────────── */

.ra-guidebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.ra-guide-chips,
.ra-guide-chip-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ra-guide-chips {
  padding: 4px;
  border-radius: 20px;
  background: var(--ra-guide-track, rgba(37, 99, 235, 0.08));
}

/* The active colour used to be painted imperatively from JS on every render.
   Each guide owns a hue so the chip, the annotation in the passage and the
   coach card that explains it read as one family. */
.ra-guide-chip {
  min-height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ra-guide-chip-fg, #1f2937);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.ra-guide-chip:hover:not([aria-pressed="true"]):not(:disabled) {
  background: rgba(15, 23, 42, 0.05);
}

.ra-guide-chip[aria-pressed="true"],
.ra-guide-chip[aria-checked="true"] {
  color: #fff;
  background: var(--ra-guide-accent, var(--coach-linking-strong));
  box-shadow: 0 1px 3px var(--ra-guide-shadow, rgba(37, 99, 235, 0.25));
}

.ra-guide-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ra-guide-chip--chunking,
.ra-guide-chip--linking {
  --ra-guide-accent: var(--coach-linking-strong);
  --ra-guide-shadow: rgba(37, 99, 235, 0.25);
}

.ra-guide-chip--reduced {
  --ra-guide-accent: var(--coach-reduced-strong);
  --ra-guide-shadow: rgba(217, 119, 6, 0.25);
}

.ra-guide-chip--sound {
  --ra-guide-accent: var(--coach-sound-strong);
  --ra-guide-shadow: rgba(180, 83, 9, 0.25);
}

.ra-guidebar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Accuracy used to be a 2.5rem centred number in a card of its own. As a stat
   beside the guides it stays legible without owning a band of the page. */
.ra-accuracy-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ra-accuracy-readout[hidden] {
  display: none;
}

.ra-accuracy-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.ra-accuracy-score {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success, #059669);
  line-height: 1;
}

.ra-guide-instruction {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 0;
}

/* Key for the marks drawn on the passage. Each entry shows only while its guide
   is active, so it never explains a mark that is not on screen. */
.ra-guide-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ra-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.ra-legend-item[hidden] {
  display: none;
}

.ra-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
}

.ra-legend-swatch--linking {
  border-bottom: 2px solid var(--coach-linking-strong);
  border-radius: 0 0 9px 9px;
}

.ra-legend-swatch--reduced {
  height: 14px;
  border-radius: 3px;
  background: var(--coach-reduced-tint);
  border-bottom: 2px solid var(--coach-reduced-strong);
}

.ra-legend-swatch--sound {
  height: 14px;
  border-radius: 3px;
  background: var(--coach-sound-tint);
  border: 1px solid var(--coach-sound-strong);
}

/* ── Split: passage stage + coach rail ─────────────────────────────────── */

.ra-split {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}

.ra-stage {
  flex: 1.35 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Short prompts used to leave a wide empty band under the text while the rail
   overflowed beside it; capping the measure also keeps the line length readable. */
.ra-stage .ra-prompt-stage {
  max-width: 62ch;
}

.ra-prompt-stage {
  position: relative;
  min-height: 120px;
  padding-top: 8px;
  padding-bottom: 24px;
  font-size: 1.15rem;
  line-height: 1.7;
  text-align: left;
}

.ra-prompt-stage #ra-text-prompt {
  margin: 0;
  position: relative;
  z-index: 1;
}

.ra-linking-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ra-connected-speech-badges {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ra-linking-fallback-list {
  display: none !important;
}

.ra-results-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ra-results-block .ra-feedback-text {
  font-size: 1.05rem;
  line-height: 1.6;
  position: relative;
}

.ra-show-advanced-container {
  text-align: center;
}

.ra-show-advanced-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--brand-primary, #2563eb);
  background: #fff;
  color: var(--brand-primary, #2563eb);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.ra-show-advanced-btn:hover {
  background: var(--brand-primary, #2563eb);
  color: #fff;
}

.ra-status-msg {
  font-weight: 500;
  color: var(--text-muted);
  min-height: 24px;
}

/* ── Speech Coach rail ─────────────────────────────────────────────────── */

.ra-rail {
  flex: 1 1 340px;
  max-width: 460px;
  min-width: 0;
  position: sticky;
  /* Clears the fixed site header plus the sticky controller beneath it. The old
     96px was a guess that ignored both and let cards slide underneath. */
  top: calc(var(--site-header-height-actual, var(--site-header-height, 76px)) + 76px);
  /* Without a height bound the rail simply ran off the bottom of the viewport and
     the fourth card was invisible with nothing to say so. */
  max-height: calc(100vh - var(--site-header-height-actual, var(--site-header-height, 76px)) - var(--spc-footer-height, 72px) - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--border-light, #e2e8f0);
  box-sizing: border-box;
}

/* A bounded scroller with a hard bottom edge looks like a clipped list, not a
   scrollable one. The fade says "there is more" without adding chrome. */
.ra-rail::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  display: block;
  height: 28px;
  margin-top: -28px;
  flex: 0 0 auto;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-main, #f8fafc));
}

/* The header stays put while the findings scroll under it. */
.ra-rail-header,
.ra-rail-summary {
  position: sticky;
  left: 0;
  background: var(--bg-main, #f8fafc);
  z-index: 1;
}

.ra-rail-header {
  top: 0;
  padding-top: 2px;
}

.ra-rail-summary {
  top: 26px;
  padding-bottom: 6px;
}

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

.ra-rail-titles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ra-rail-title,
.ra-rail-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.ra-rail-meta {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--coach-linking-tint);
  color: var(--coach-linking-text);
}

.ra-rail-toggle {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-light, #d1d5db);
  background: #fff;
  color: var(--text-secondary, #4b5563);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ra-rail-summary {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary, #374151);
}

/* Kept in the DOM for the a11y summary the coach writes into it. The annotated
   passage itself is no longer duplicated here — results annotate the one
   passage the learner is already reading, up in .ra-prompt-stage. */
.ra-rail-paragraph:empty {
  display: none;
}

.ra-rail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Below the split breakpoint the rail stops being a rail: it stacks under the
   stage, loses its divider, and the coach renders its compact single-card
   variant (see isCompactConnectedSpeechGuideLayout). */
@media (max-width: 940px) {
  .ra-split {
    flex-direction: column;
    gap: 18px;
  }

  .ra-stage,
  .ra-rail {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .ra-rail {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--border-light, #e2e8f0);
  }

  .ra-rail-header,
  .ra-rail-summary {
    position: static;
  }

  /* Nothing is clipped in the stacked layout, so nothing to fade. */
  .ra-rail::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .ra-guidebar {
    align-items: stretch;
  }

  .ra-guide-chips,
  .ra-guide-chip-group {
    width: 100%;
    justify-content: flex-start;
  }

  .ra-guidebar-meta {
    margin-left: 0;
  }

  .ra-prompt-stage {
    font-size: 1.05rem;
  }
}

/* ── Action controls source ────────────────────────────────────────────── */
/* Declared in the panel, adopted into the SPC sticky footer at runtime. When
   adoption has not run (or has been restored) this block stays out of the way
   rather than rendering a loose pile of buttons mid-page. */
.ra-zone-actions-source {
  display: contents;
}

.ra-timer-box {
  text-align: center;
  line-height: 1.15;
}

.ra-timer-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ra-timer-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-primary, #2563eb);
}

.ra-timer-box--record .ra-timer-value {
  color: var(--danger, #ef4444);
}

/* Only the live phase gets a countdown at full size. */
.ra-timer-box[data-timer-state="idle"] {
  opacity: 0.55;
}

.ra-timer-box[data-timer-state="idle"] .ra-timer-value {
  font-size: 0.95rem;
  font-weight: 600;
}

.ra-timer-box[data-timer-state="active"] .ra-timer-value {
  font-size: 1.6rem;
}

#mode-read-aloud #ra-read-aloud-controls {
  width: auto;
  display: flex;
  justify-content: flex-end;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 0;
}

#mode-read-aloud #ra-practice-target-drawer[hidden] {
  display: none !important;
}

/* ============================================
   Speech Coach Results — sc-* component system
   P1 Fix: CSS classes instead of inline styles
   ============================================ */

/* ── Annotated Paragraph ── */
.sc-annotated-paragraph {
  position: relative;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #374151;
  transition: border-color 0.2s ease;
}

.sc-annotated-paragraph:hover {
  border-color: #d1d5db;
}

/* Token-based highlight classes */
.sc-token-highlight {
  padding: 0 2px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sc-token--success {
  border-bottom: 3px solid #34d399;
  background: #ecfdf5;
  color: #065f46;
}

.sc-token--success:hover {
  background: #d1fae5;
  box-shadow: 0 1px 4px rgba(52, 211, 153, 0.25);
}

.sc-token--error {
  border-bottom: 3px solid #f87171;
  background: #fef2f2;
  color: #991b1b;
}

.sc-token--error:hover {
  background: #fee2e2;
  box-shadow: 0 1px 4px rgba(248, 113, 113, 0.25);
}

.sc-token--uncertain {
  border-bottom: 3px solid #fbbf24;
  background: #fffbeb;
  color: #92400e;
}

.sc-token--uncertain:hover {
  background: #fef3c7;
  box-shadow: 0 1px 4px rgba(251, 191, 36, 0.25);
}

/* ── Legend ── */
.sc-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 0.78rem;
  color: #9ca3af;
}

.sc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sc-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sc-legend-dot--success {
  background: #34d399;
}

.sc-legend-dot--error {
  background: #f87171;
}

.sc-legend-dot--uncertain {
  background: #fbbf24;
}

/* ── Sections ── */
.sc-section {
  margin-bottom: 20px;
}

.sc-section-header {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-info-tip {
  font-size: 0.82rem;
  color: #9ca3af;
  cursor: help;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  transition: color 0.15s ease;
}

.sc-info-tip:hover {
  color: #6366f1;
}

/* ── Accordion Stack ── */
.sc-accordion-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Accordion Card ── */
.sc-accordion-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sc-accordion-card:hover {
  box-shadow: var(--shadow-sm);
}

/* Left-border status indicators */
.sc-border--success {
  border-left: 4px solid #10b981;
}

.sc-border--error {
  border-left: 4px solid #ef4444;
}

.sc-border--mixed {
  border-left: 4px solid #f59e0b;
}

/* ── Accordion Toggle Button ── */
.sc-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
}

.sc-accordion-toggle:hover {
  background: #f9fafb;
}

.sc-accordion-toggle:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
}

.sc-accordion-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sc-word-title {
  font-size: 1.1rem;
  color: #111827;
  font-weight: 600;
}

.sc-count-badge {
  font-size: 0.82rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.sc-accordion-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Status Dots ── */
.sc-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sc-status-dot--success {
  background: #10b981;
  box-shadow: var(--shadow-sm);
}

.sc-status-dot--error {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}

.sc-status-dot--uncertain {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
}

/* ── Chevron ── */
.sc-chevron {
  color: #9ca3af;
  margin-left: 4px;
  transition: transform 0.2s ease;
  display: inline-flex;
}

.sc-chevron--open {
  transform: rotate(180deg);
}

/* ── Accordion Content ── */
.sc-accordion-content {
  padding: 0 14px 14px 14px;
  border-top: 1px solid #f3f4f6;
  background: #fdfdfd;
}

/* ── Instance rows ── */
.sc-instance {
  padding-top: 12px;
}

.sc-instance--bordered {
  border-top: 1px dashed #e5e7eb;
  margin-top: 12px;
}

.sc-instance-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sc-instance-label {
  font-size: 0.82rem;
  color: #6b7280;
}

.sc-instance-feedback {
  font-size: 0.90rem;
  color: #374151;
  line-height: 1.5;
}

/* ── Result detail rows ────────────────────────────────────────────────────
   The IPA row, the reason line and the "how to fix" note were built from
   inline style attributes with a full success palette and a full error palette
   written out twice. The card already declares which it is via
   .sc-border--success / --error / --mixed, so the variant scopes from there
   and the values come from --coach-status-* tokens. */
.sc-instance--detail {
  padding-top: 10px;
}

.sc-detail-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 4px;
}

.sc-border--success .sc-detail-label {
  color: var(--coach-status-success);
}

.sc-instance-feedback--error {
  color: #991b1b;
  font-weight: 500;
}

.sc-ipa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.sc-border--success .sc-ipa-row {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.sc-ipa-chip {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--coach-status-error);
  background: var(--coach-status-error-tint);
}

.sc-border--success .sc-ipa-chip {
  color: #15803d;
  background: #dcfce7;
}

.sc-ipa-part {
  color: var(--text-secondary, #4b5563);
}

/* Reduced-word IPA pairs shown inline on a card's accordion label. */
.sc-inline-ipa {
  font-size: 0.75rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 500;
  color: var(--coach-status-success);
}

.sc-ipa-strong {
  font-size: 0.68rem;
  color: var(--text-muted, #9ca3af);
  text-decoration: line-through;
}

.sc-ipa-weak {
  font-weight: 600;
  color: var(--coach-status-success);
}

.sc-section-time {
  font-size: 0.72rem;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
}

.sc-ipa-arrow,
.sc-ipa-result {
  color: var(--coach-status-error);
}

.sc-ipa-arrow {
  margin: 0 4px;
}

.sc-ipa-result {
  font-size: 0.88rem;
}

.sc-border--success .sc-ipa-arrow,
.sc-border--success .sc-ipa-result {
  color: var(--coach-status-success);
}

.sc-fix-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 0;
  border-left: 2px solid var(--danger, #ef4444);
  background: #fff5f5;
  font-size: 0.84rem;
  color: var(--text-primary, #374151);
}

.sc-border--success .sc-fix-note {
  border-left-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
}

/* Header parts. The word title and IPA badge each had a success and an error
   inline copy; one rule plus a variant replaces both. */
.sc-accordion-label {
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  cursor: pointer;
}

.sc-border--success .sc-word-title {
  color: #065f46;
}

.sc-ipa-badge {
  font-size: 0.78rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  color: var(--coach-status-error);
  background: var(--coach-status-error-tint);
}

.sc-border--success .sc-ipa-badge {
  color: var(--coach-status-success);
  background: var(--coach-status-success-tint);
}

/* ── Status Badges ── */
.sc-status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease;
}

.sc-status-badge:hover {
  transform: scale(1.05);
}

.sc-badge--success {
  background: #d1fae5;
  color: #065f46;
}

.sc-badge--error {
  background: #fee2e2;
  color: #991b1b;
}

.sc-badge--uncertain {
  background: #fef3c7;
  color: #92400e;
}

/* ── Single-occurrence reduced word grid ── */
.sc-singles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
  margin-top: 8px;
}

.sc-single-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: default;
}

.sc-single-card:hover {
  box-shadow: var(--shadow-sm);
}

.sc-single-card .sc-word-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

.sc-single-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: 6px;
  padding: 2px 0;
  flex-wrap: wrap;
}

.sc-single-card-copy {
  display: flex;
  flex: 1 1 120px;
  min-width: 0;
  flex-direction: column;
}

.sc-single-card-title-row,
.sc-single-card-actions {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  flex-wrap: wrap;
}

.sc-single-card-actions {
  flex: 1 1 180px;
  max-width: 100%;
}

/* ── Word-level hover highlights & playback button styles ── */
.sc-token--hovered {
  box-shadow: 0 0 0 2.5px #3b82f6, 0 1px 3px rgba(0,0,0,0.1);
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
  border-radius: 4px;
}

.sc-card--hovered {
  background-color: #f3f8ff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12) !important;
}

.sc-card--selected {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

/* Single recognized transcript: accuracy, miscue, Speech Coach, and playback. */
.ra-merged-transcript-shell {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #1e293b;
  text-align: left;
}

.ra-merged-transcript-heading {
  margin-bottom: 8px;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ra-merged-recognized-transcript {
  display: block;
  position: relative;
  font-size: 1.06rem;
  line-height: 1.8;
  padding-bottom: 8px;
}

.ra-recognized-linking-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.ra-merged-recognized-transcript--empty {
  color: #6b7280;
  font-style: italic;
}

.ra-word-token {
  display: inline;
  position: relative;
  z-index: 1;
  margin: 0 2px 3px 0;
  padding: 1px 3px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ra-word-token--reduced {
  border-radius: 4px;
}

.ra-word-token--success { color: #047857; }
.ra-word-token--uncertain { color: #b45309; }
.ra-word-token--error { color: #dc2626; font-weight: 600; }
.ra-word-token--insertion { color: #b45309; font-style: italic; }
.ra-word-token--omission { color: #6b7280; text-decoration: line-through; }
.ra-word-token--unavailable { cursor: not-allowed; opacity: 0.68; }
.ra-word-token--coach-success { border-bottom-color: transparent; }
.ra-word-token--coach-uncertain { border-bottom-color: transparent; }
.ra-word-token--coach-error { border-bottom-color: transparent; }
.ra-word-token:hover:not(.ra-word-token--unavailable) { background: #e0f2fe; }
.ra-word-token:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ra-word-token.is-playing { background: #dbeafe; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }

.ra-transcript-instruction {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
}

.ra-transcript-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
  color: #64748b;
  font-size: var(--text-2xs);
}

.ra-transcript-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.ra-transcript-legend__swatch { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.ra-transcript-legend__swatch--success { background: #10b981; }
.ra-transcript-legend__swatch--uncertain { background: #f59e0b; }
.ra-transcript-legend__swatch--error { background: #ef4444; }
.ra-transcript-legend__swatch--coach { background: #2563eb; }
.ra-transcript-metrics { margin: 10px 0 0; color: #4b5563; font-size: var(--text-sm); text-align: center; }

.sc-play-word-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px;
  padding: 0;
  vertical-align: middle;
}

.sc-play-word-btn:hover {
  background: #e5e7eb;
  color: #111827;
  transform: scale(1.1);
}

.sc-play-word-btn svg {
  width: 12px;
  height: 12px;
  display: block;
}

.sc-play-word-btn--single {
  margin-left: 0;
  margin-right: 4px;
}

.sc-audio-controls { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.sc-audio-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 1 auto; width: auto; max-width: 100%; min-height: 26px; padding: 3px 8px; border-radius: 999px; font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.sc-audio-btn span { min-width: 0; overflow-wrap: anywhere; }
.sc-audio-btn--yours { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; }
.sc-audio-btn--model { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.sc-audio-btn:hover:not(:disabled), .sc-audio-btn:focus-visible:not(:disabled) { transform: translateY(-1px); }
.sc-audio-btn--yours:hover:not(:disabled), .sc-audio-btn--yours:focus-visible:not(:disabled) { background: #e5e7eb; }
.sc-audio-btn--model:hover:not(:disabled), .sc-audio-btn--model:focus-visible:not(:disabled) { background: #dbeafe; }
.sc-audio-btn--unavailable, .sc-audio-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.sc-audio-btn.is-playing { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22); }
.sc-accordion-header > .sc-accordion-label { min-width: 0; flex-wrap: wrap; }
.sc-accordion-label .sc-ipa-badge { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* ── Stacked header for Needs Attention / Successful Links cards ── */
.sc-accordion-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  user-select: none;
}

.sc-accordion-header--error {
  background: #fff5f5;
  border-bottom-color: #fee2e2;
}

.sc-accordion-header--success {
  background: #ecfdf5;
  border-bottom-color: #d1fae5;
}

.sc-accordion-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.sc-chevron-btn {
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #9ca3af;
  margin-left: auto;
}

.sc-accordion-header--success .sc-chevron-btn {
  color: #065f46;
}

.sc-timestamp {
  font-size: 0.72rem;
  color: #9ca3af;
  white-space: nowrap;
}

.sc-sound-change-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; flex-wrap: wrap; }
.sc-sound-change-row > div:first-child { flex: 1 1 160px; min-width: 0; }
.sc-sound-change-family { display: block; margin-top: 2px; color: #6b7280; font-size: 0.76rem; }
.sc-sound-change-actions { display: flex; align-items: center; gap: 6px; flex: 1 1 210px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .sc-single-card { align-items: flex-start; flex-direction: column; gap: 8px; }
  .sc-single-card > div { box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%; }
  .sc-single-card > div:last-child { justify-content: flex-start; }
  .sc-single-card > div:first-child > div:last-child { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
  .sc-single-card-row { align-items: flex-start; flex-direction: column; }
  .sc-single-card-copy,
  .sc-single-card-actions { flex: 0 1 auto; width: 100%; }
  .sc-accordion-header { flex-wrap: wrap !important; gap: 8px; }
  .sc-accordion-header > .sc-accordion-label { flex: 1 1 100% !important; }
  .sc-accordion-header > div:last-child { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .sc-accordion-label .sc-word-title { white-space: normal !important; overflow-wrap: anywhere; }
  .sc-accordion-label .sc-ipa-badge { white-space: normal; overflow-wrap: anywhere; }
  .sc-sound-change-row { align-items: flex-start; flex-direction: column; }
  .sc-sound-change-actions { flex: 0 1 auto; width: 100%; justify-content: flex-start; }
  .sc-accordion-controls { width: 100%; justify-content: flex-start; }
}

/* ── Issue Cards ── */
.sc-issue-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  transition: box-shadow 0.2s ease;
}

.sc-issue-card:hover {
  box-shadow: var(--shadow-sm);
}

.sc-issue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sc-issue-phrase {
  font-size: 0.98rem;
  color: #111827;
}

.sc-issue-category {
  font-size: var(--text-xs);
  color: #6b7280;
}

.sc-issue-feedback {
  font-size: 0.92rem;
  color: #374151;
  line-height: 1.5;
}

/* ── Success Pills ── */
.sc-pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.sc-success-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: #065f46;
  cursor: default;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sc-success-pill:hover {
  background: #d1fae5;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);
}

.sc-check-icon {
  color: #10b981;
  flex-shrink: 0;
}

/* ── Results groups ──
   Was a two-column auto-fit grid, which put a finding and the word it refers to
   on opposite sides of the page. Inside the rail the findings are one ordered
   column beside the passage instead. */
.sc-grid-left,
.sc-grid-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

#ra-connected-speech-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.ra-feedback-mode-hint {
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.ra-feedback-mode-hint[hidden] { display: none !important; }

.ra-feedback-mode-hint__trigger {
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: #1d4ed8;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}

.ra-feedback-mode-hint__trigger:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 2px;
}

.ra-feedback-mode-hint__tooltip {
  position: absolute;
  z-index: 20;
  left: 0;
  bottom: calc(100% + 8px);
  box-sizing: border-box;
  width: min(32rem, 100%);
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.14);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ra-feedback-mode-hint__tooltip[hidden] { display: none !important; }

/* ── Speech Coach cards ──────────────────────────────────────────────────
   These used to be built entirely from inline style attributes inside JS
   template strings, with six hardcoded hexes for the family palette. The card
   is one component now: a hairline surface with a family-coloured left edge,
   keyed to the same --coach-* tokens the guide chips and passage use. */
.sc-card {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-left: 3px solid var(--sc-card-accent, var(--coach-linking-strong));
  border-radius: 0 8px 8px 0;
  background: #fff;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.sc-card--linking {
  --sc-card-accent: var(--coach-linking-strong);
  --sc-card-tint: var(--coach-linking-tint);
  --sc-card-text: var(--coach-linking-text);
  --sc-card-surface: var(--coach-linking-surface);
}

.sc-card--reduced {
  --sc-card-accent: var(--coach-reduced-strong);
  --sc-card-tint: var(--coach-reduced-tint);
  --sc-card-text: var(--coach-reduced-text);
  --sc-card-surface: var(--coach-reduced-surface);
}

.sc-card--sound {
  --sc-card-accent: var(--coach-sound-strong);
  --sc-card-tint: var(--coach-sound-tint);
  --sc-card-text: var(--coach-sound-text);
  --sc-card-surface: var(--coach-sound-surface);
}

.sc-card:hover {
  border-color: var(--sc-card-accent, var(--coach-linking-strong));
  background: var(--sc-card-surface, #fff);
}

.sc-card[data-selected="true"] {
  background: var(--sc-card-surface, #fff);
  border-color: var(--sc-card-accent, var(--coach-linking-strong));
  box-shadow: 0 0 0 2px var(--sc-card-tint, rgba(37, 99, 235, 0.12));
}

.sc-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.sc-card-word {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
}

.sc-card-ipa {
  font-size: 0.84rem;
  color: var(--sc-card-text, var(--coach-reduced-text));
}

.sc-card-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--sc-card-tint, var(--coach-linking-tint));
  color: var(--sc-card-text, var(--coach-linking-text));
}

.sc-card-tip {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-secondary, #4b5563);
}

/* Plain language leads the card. IPA used to be the first thing a learner read,
   on a page that badges them A1; it is now a quiet trailing line, and the simple
   tier drops it altogether. */
.sc-card-say {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--text-primary, #111827);
}

.sc-card-say-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.sc-card-say strong {
  font-weight: 700;
  color: var(--sc-card-text, var(--coach-reduced-text));
}

.sc-card-ipa {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ra-rail[data-coach-tier="simple"] .sc-card-ipa {
  display: none;
}

/* Browser-voice fallback reads as available but secondary to a recorded model. */
.sc-audio-btn--synth {
  border-style: dashed;
}

/* ── Focus states ──────────────────────────────────────────────────────────
   None of the workbench's interactive elements had a focus ring, so a keyboard
   learner could not tell which guide or card they were on. Uses the app-wide
   focus tokens rather than inventing a treatment. */
.ra-guide-chip:focus-visible,
.sc-card-body:focus-visible,
.ra-rail-toggle:focus-visible,
.sc-compact-toggle:focus-visible,
.ra-show-advanced-btn:focus-visible,
.sc-audio-btn:focus-visible {
  outline: var(--focus-ring, 2px solid #2563eb);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius, 8px);
}

/* The card body fills its card, so its ring reads better inset than outset. */
.sc-card-body:focus-visible {
  outline-offset: -2px;
}

/* Keyboard focus should light the passage word the same way hovering does. */
.sc-card-body:focus-visible ~ .sc-card-audio,
.sc-guide-item:focus-within {
  border-color: var(--sc-card-accent, var(--coach-linking-strong));
}

.sc-card-audio {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}

.sc-empty-note {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--coach-sound-tint);
  background: var(--coach-sound-surface);
  color: var(--coach-sound-text);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ── Compact rail (below the split breakpoint) ─────────────────────────── */

.sc-compact,
.sc-compact-expanded {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-compact-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sc-compact-toggle {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-light, #d1d5db);
  background: #fff;
  color: var(--text-primary, #1f2937);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}

.sc-compact-toggle:hover {
  background: var(--bg-main, #f8fafc);
}


/* ── Prompt guide layers (composable) ──────────────────────────────
   Reduced words and sound changes can be active at the same time, and a
   single word can belong to both. Each layer therefore owns a distinct
   channel: reduced words carry the amber fill, sound changes carry the
   dashed underline, and a word in both shows the two together. These were
   inline styles until the layers became combinable — whichever renderer ran
   last simply overwrote the other. */
.ra-connected-speech-token--weak {
  background: rgba(217, 119, 6, 0.12);
  border-bottom: 2px solid #d97706;
  border-radius: 4px;
  padding: 0 2px;
  cursor: pointer;
}

.ra-sound-change-word {
  background: rgba(180, 83, 9, 0.08);
  border-bottom: 2px dashed #b45309;
  border-radius: 3px;
  padding: 0 2px;
  cursor: pointer;
}

.ra-connected-speech-token--weak.ra-sound-change-word {
  /* Fill from the reduced-words layer, dashed rule from the sound-changes
     layer, so both memberships stay readable on the same word. */
  background: rgba(217, 119, 6, 0.12);
  border-bottom: 2px dashed #b45309;
  border-radius: 4px;
}

.ra-sound-change-hint {
  display: none;
}

.ra-sound-change-tooltip {
  position: absolute;
  z-index: 20;
  box-sizing: border-box;
  width: max-content;
  background: #fffbeb;
  border: 1.5px solid rgba(180, 83, 9, 0.3);
  border-radius: 12px;
  padding: 14px 18px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(180, 83, 9, 0.08);
  max-width: min(340px, calc(100% - 16px));
  pointer-events: auto;
  animation: ra-tooltip-entrance 0.18s ease-out;
}

.ra-sound-change-tooltip__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fffbeb;
  border-left: 1.5px solid rgba(180, 83, 9, 0.3);
  border-top: 1.5px solid rgba(180, 83, 9, 0.3);
  transform: rotate(45deg);
  top: -7px;
  left: 50%;
  margin-left: -6px;
}

.ra-sound-change-tooltip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ra-sound-change-tooltip__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #92400e;
  background: rgba(180, 83, 9, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
}

.ra-sound-change-tooltip__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #b45309;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
}
.ra-sound-change-tooltip__close:hover { opacity: 1; }

.ra-sound-change-tooltip__words {
  font-size: 1rem;
  font-weight: 600;
  color: #78350f;
  margin-bottom: 8px;
}

.ra-sound-change-tooltip__transform {
  font-size: 1.1rem;
  font-weight: 700;
  color: #92400e;
  background: rgba(180, 83, 9, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.15);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}

.ra-sound-change-tooltip__explanation {
  font-size: 0.84rem;
  color: #78350f;
  line-height: 1.5;
}

@keyframes ra-tooltip-entrance {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ra-sound-change-tooltip--above .ra-sound-change-tooltip__arrow {
  top: auto;
  bottom: -7px;
  transform: rotate(225deg);
}

/* ── SVG Linking Overlay ── */
.sc-linking-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

/* ── Reduced Word Background Highlights ── */
.ra-word-token.sc-token-bg--success,
.ra-word-token.sc-token-bg--error,
.ra-word-token.sc-token-bg--uncertain,
.sc-token-bg--success,
.sc-token-bg--error,
.sc-token-bg--uncertain {
  border-radius: 4px;
  padding: 0 1px;
  transition: background 0.2s ease, border-bottom 0.2s ease;
}

.ra-word-token.sc-token-bg--success,
.sc-token-bg--success {
  background: rgba(16, 185, 129, 0.15);
  border-bottom: 2px solid #10b981;
}

.ra-word-token.sc-token-bg--error,
.sc-token-bg--error {
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 2px solid #ef4444;
}

.ra-word-token.sc-token-bg--uncertain,
.sc-token-bg--uncertain {
  background: rgba(245, 158, 11, 0.15);
  border-bottom: 2px solid #f59e0b;
}

/* ═══════════════════════════════════════════════════════════════
   SGD Mode (Summarize Group Discussion)
   ═══════════════════════════════════════════════════════════════ */

/* ── Step Progress Breadcrumb ── */
.sgd-step-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 20px 20px;
}

.sgd-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
}

.sgd-progress-dot {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 3px solid #e5e7eb;
  transition: all 0.35s ease;
  position: relative;
}

.sgd-progress-step.active .sgd-progress-dot {
  background: var(--brand-primary, #2563eb);
  border-color: var(--brand-primary, #2563eb);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.sgd-progress-step.completed .sgd-progress-dot {
  background: #10b981;
  border-color: #10b981;
}

.sgd-progress-step.completed .sgd-progress-dot::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
}

.sgd-progress-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s;
  white-space: nowrap;
}

.sgd-progress-step.active .sgd-progress-label {
  color: var(--brand-primary, #2563eb);
}

.sgd-progress-step.completed .sgd-progress-label {
  color: #10b981;
}

.sgd-progress-connector {
  flex: 1;
  height: 3px;
  background: #e5e7eb;
  min-width: 40px;
  max-width: 100px;
  margin: 0 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  transition: background 0.35s ease;
}

/* Connector between completed steps turns green */
.sgd-progress-step.completed+.sgd-progress-connector {
  background: #10b981;
}

/* ── Recording Active Indicator ── */
.sgd-recording-active {
  color: var(--danger, #ef4444) !important;
  animation: sgd-record-pulse 1.2s ease-in-out infinite;
}

.sgd-recording-active::before {
  content: '●';
  display: inline-block;
  margin-right: 8px;
  font-size: 0.8em;
  color: #ef4444;
  animation: sgd-record-dot-blink 1s infinite;
}

@keyframes sgd-record-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes sgd-record-dot-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

/* ── Audio Loading State ── */
.sgd-audio-loading {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}

.sgd-audio-loading::after {
  content: 'Loading audio…';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-primary, #2563eb);
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 12px;
  border-radius: 6px;
  animation: sgd-loading-fade 1.5s ease-in-out infinite;
}

@keyframes sgd-loading-fade {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.sgd-audio-status {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.sgd-audio-status.is-loading {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.16);
}

.sgd-audio-status.is-unavailable {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.22);
}

/* ── Topic Display ── */
.sgd-topic-display {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(99, 102, 241, 0.06));
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.sgd-topic-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary, #2563eb);
  margin-bottom: 4px;
}

.sgd-topic-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main, #111827);
  line-height: 1.5;
}

/* ── Speaker Tabbed Notes ── */
.sgd-speaker-notes {
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff;
}

.sgd-speaker-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-light, #e5e7eb);
  background: linear-gradient(180deg, #f9fafb, #f3f4f6);
}

.sgd-speaker-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  transition: all 0.2s ease;
  position: relative;
}

.sgd-speaker-tab:hover {
  background: rgba(37, 99, 235, 0.06);
  color: var(--text-main, #111827);
}

.sgd-speaker-tab.active {
  color: var(--brand-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}

.sgd-speaker-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-primary, #2563eb);
  border-radius: 3px 3px 0 0;
}

.sgd-tab-icon {
  font-size: 1.1rem;
}

.sgd-tab-label {
  white-space: nowrap;
}

.sgd-tab-shortcut {
  font-size: 0.65rem;
  font-weight: 500;
  color: #9ca3af;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.sgd-note-panels {
  padding: 0;
}

.sgd-note-panel {
  display: none;
  padding: 16px;
}

.sgd-note-panel.active {
  display: block;
}

.sgd-note-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  margin-bottom: 8px;
}

.sgd-note-input {
  width: 100%;
  min-height: 160px;
  padding: 14px;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 10px;
  resize: vertical;
  background: #fafbfc;
  color: var(--text-main, #111827);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.sgd-note-input:focus {
  outline: none;
  border-color: var(--brand-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: #fff;
}

/* ── Recording Section ── */
.sgd-record-section {
  text-align: center;
  padding: 20px 0;
}

.sgd-record-instructions {
  font-size: var(--text-sm);
  color: var(--text-muted, #6b7280);
  margin-bottom: 20px;
  line-height: 1.5;
}

.sgd-timer {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-main, #111827);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
  transition: color 0.3s;
}

.sgd-timer-warning {
  color: var(--danger, #ef4444) !important;
  animation: sgd-timer-pulse 1s infinite;
}

@keyframes sgd-timer-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.sgd-record-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}

/* ── Results ── */
.sgd-results-container {
  margin-bottom: 16px;
}

.sgd-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sgd-speaker-result {
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sgd-speaker-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

.sgd-speaker-result-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main, #111827);
}

.sgd-speaker-result-score {
  font-size: 1.2rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
}

.sgd-score-good {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.sgd-score-ok {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.sgd-score-low {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.sgd-speaker-result-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 6px;
}

.sgd-speaker-transcript {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-main, #111827);
  margin-bottom: 10px;
}

.sgd-speaker-result-stats {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
}

.sgd-matched {
  background: rgba(16, 185, 129, 0.2);
  color: #047857;
  border-radius: 3px;
  padding: 1px 2px;
}

/* ── Misattribution Box ── */
.sgd-misattribution-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(239, 68, 68, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 16px;
}

.sgd-misattribution-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #d97706;
  margin-bottom: 8px;
}

.sgd-misattribution-box ul {
  margin: 0;
  padding-left: 18px;
}

.sgd-misattribution-box li {
  font-size: var(--text-xs);
  color: var(--text-main, #111827);
  line-height: 1.6;
  margin-bottom: 4px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .sgd-speaker-tab {
    padding: 10px 8px;
    font-size: 0.82rem;
    gap: 4px;
  }

  .sgd-tab-shortcut {
    display: none;
  }

  .sgd-note-input {
    min-height: 120px;
    font-size: var(--text-sm);
  }

  .sgd-timer {
    font-size: 2.2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Write Essay Mode (PTE Writing)
   ═══════════════════════════════════════════════════════════════ */

/* ── Prompt Display ── */
.essay-prompt-display {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

#mode-swt .notification-box {
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
  align-items: flex-start;
}

#mode-swt .notification-box span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

#mode-swt .info-box-close {
  flex: 0 0 auto;
}

#mode-swt .ra-v7-nav,
#mode-swt .ra-v7-question-pill,
#mode-swt .swt-source-card,
#mode-swt .swt-compose-card,
#mode-swt .essay-prompt-display {
  max-width: 100%;
  box-sizing: border-box;
}

#mode-swt .essay-prompt-display p {
  overflow-wrap: anywhere;
}

.essay-prompt-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b5cf6;
  margin-bottom: 8px;
}

.essay-prompt-text {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-main, #111827);
  line-height: 1.7;
}

/* ── Timer ── */
.essay-timer {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-main, #111827);
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.03);
  padding: 6px 16px;
  border-radius: 10px;
  min-width: 90px;
  text-align: center;
  transition: color 0.3s, background 0.3s;
}

.essay-timer-warning {
  color: var(--danger, #ef4444) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  animation: essay-timer-pulse 1s infinite;
}

@keyframes essay-timer-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* ── Textarea ── */
.essay-input-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.essay-textarea {
  width: 100%;
  min-height: 320px;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 12px;
  resize: vertical;
  background: #fafbfc;
  color: var(--text-main, #111827);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.essay-textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  background: #fff;
}

.essay-textarea::placeholder {
  color: #9ca3af;
}

/* ── Input Footer (word count + submit) ── */
.essay-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Word Count ── */
.essay-word-count {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  transition: all 0.2s;
}

.essay-wc-good {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.essay-wc-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.essay-wc-bad {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* ── Results Summary ── */
.essay-results-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(99, 102, 241, 0.04));
  border-radius: 16px;
}

.essay-results-score-circle {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text-main, #111827);
  font-variant-numeric: tabular-nums;
}

.essay-score-number {
  color: #8b5cf6;
}

.essay-score-divider {
  color: #d1d5db;
  margin: 0 2px;
}

.essay-score-total {
  color: #9ca3af;
  font-size: 1.8rem;
}

.essay-results-percentage {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #6b7280;
}

/* ── Score Breakdown ── */
.essay-results-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.essay-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 12px;
  transition: box-shadow 0.2s;
}

.essay-score-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.essay-score-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-main, #111827);
  min-width: 110px;
  flex-shrink: 0;
}

.essay-score-badge {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  min-width: 42px;
  text-align: center;
  flex-shrink: 0;
}

.essay-score-full {
  background: #d1fae5;
  color: #065f46;
}

.essay-score-partial {
  background: #fef3c7;
  color: #92400e;
}

.essay-score-zero {
  background: #fee2e2;
  color: #991b1b;
}

.essay-score-na {
  background: #f3f4f6;
  color: #6b7280;
}

.essay-score-detail {
  font-size: var(--text-xs);
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

/* ── Write Essay: Feedback-only UI ── */
.essay-results-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.essay-ai-score-hint {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted, #6b7280);
  font-size: var(--text-sm);
}

.essay-ai-score-hint-text {
  font-weight: 600;
}

.essay-feedback-loading {
  padding: 16px 14px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}

.essay-submitted {
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.essay-submitted-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.essay-submitted-header h4 {
  margin: 0;
  font-size: 1rem;
}

.essay-submitted-meta {
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
  white-space: nowrap;
}

.essay-submitted-prompt {
  margin: 10px 0 12px 0;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.16);
}

.essay-submitted-prompt-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted, #6b7280);
  margin-bottom: 6px;
}

.essay-submitted-prompt-text {
  color: var(--text-main, #111827);
  line-height: 1.6;
}

.essay-submitted-body p {
  margin: 0 0 12px 0;
  line-height: 1.7;
  color: var(--text-main, #111827);
}

.essay-submitted-body p:last-child {
  margin-bottom: 0;
}

.essay-feedback-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.essay-feedback-card {
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
}

.essay-feedback-card-title {
  font-weight: 900;
  color: var(--text-main, #111827);
  margin-bottom: 4px;
}

.essay-feedback-card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted, #6b7280);
  margin-bottom: 10px;
}

.essay-feedback-note {
  font-size: var(--text-sm);
  color: #92400e;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 12px;
  padding: 10px 12px;
}

.essay-feedback-bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--text-main, #111827);
  line-height: 1.7;
}

.essay-feedback-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 10px 0;
}

.essay-feedback-pattern {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.essay-feedback-fixes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.essay-feedback-fix {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
}

.essay-feedback-fix-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
}

.essay-feedback-original {
  color: #b91c1c;
}

.essay-feedback-arrow {
  color: #9ca3af;
}

.essay-feedback-replacement {
  color: #065f46;
}

.essay-feedback-reason {
  margin-top: 6px;
  font-size: var(--text-sm);
  color: var(--text-muted, #6b7280);
}

.essay-feedback-context {
  margin-top: 6px;
  font-size: var(--text-sm);
  color: var(--text-main, #111827);
  line-height: 1.6;
}

.essay-feedback-mark {
  background: rgba(239, 68, 68, 0.16);
  color: inherit;
  padding: 0 2px;
  border-radius: 4px;
}

.essay-feedback-empty {
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}

.essay-feedback-more {
  margin-top: 10px;
  color: var(--text-muted, #6b7280);
  font-size: var(--text-xs);
  font-weight: 700;
}

.essay-feedback-rewrites {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.10);
}

.essay-feedback-rewrites-title {
  font-weight: 900;
  color: var(--text-main, #111827);
  margin-bottom: 8px;
}

.essay-feedback-rewrite {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.essay-feedback-rewrite-before {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text-main, #111827);
  line-height: 1.6;
}

.essay-feedback-rewrite-after {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text-main, #111827);
  line-height: 1.6;
}

.essay-basic-feedback {
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
}

.essay-basic-feedback summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 800;
  color: var(--text-main, #111827);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06));
}

.essay-basic-feedback summary::-webkit-details-marker {
  display: none;
}

.essay-basic-feedback-body {
  padding: 16px;
}

/* ── Sample Essays ── */
.essay-samples {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
}

.essay-samples summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--text-main, #111827);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.06));
}

.essay-samples summary::-webkit-details-marker {
  display: none;
}

.essay-samples-title {
  font-size: var(--text-sm);
}

.essay-samples-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 3px 10px;
  border-radius: 999px;
}

.essay-samples-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.essay-sample-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.essay-sample-controls label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted, #6b7280);
}

.essay-sample-select {
  flex: 1;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-light, #e5e7eb);
  background: #fff;
}

.essay-sample-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.essay-sample-meta-pill {
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.essay-sample-meta-muted {
  background: rgba(107, 114, 128, 0.12);
  color: #374151;
}

.essay-sample-essay {
  padding: 10px 0 10px 20px;
  border-left: 4px solid var(--border-light, #e5e7eb);
  margin-top: 16px;
  margin-bottom: 24px;
}

.essay-sample-essay p {
  margin: 0 0 16px 0;
  line-height: 1.8;
  color: var(--text-main, #111827);
  font-size: 1.05rem;
  text-indent: 2rem;
}

.essay-sample-essay p:first-child {
  text-indent: 0;
}

.essay-sample-essay p:last-child {
  margin-bottom: 0;
}

.essay-sample-analysis h4 {
  margin: 0 0 8px 0;
  font-size: 0.92rem;
  color: var(--text-main, #111827);
}

.essay-sample-analysis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 0;
  color: var(--text-main, #111827);
  line-height: 1.6;
}

.essay-sample-ideaflow h4 {
  margin: 0 0 8px 0;
  font-size: 0.92rem;
  color: var(--text-main, #111827);
}

.essay-sample-ideaflow-block {
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.015);
  overflow: hidden;
}

.essay-sample-ideaflow-block summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 800;
  font-size: var(--text-xs);
  color: var(--text-main, #111827);
}

.essay-sample-ideaflow-block summary::-webkit-details-marker {
  display: none;
}

.essay-sample-pre {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-main, #111827);
  border-top: 1px dashed rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.75);
}

.essay-sample-vocab-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 8px;
}

.essay-sample-vocab {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.essay-sample-vocab th,
.essay-sample-vocab td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-xs);
}

.essay-sample-vocab th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  background: rgba(0, 0, 0, 0.02);
}

/* ── Corrections List ── */
.essay-corrections {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
}

.essay-corrections h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-main, #111827);
  margin: 0 0 12px 0;
}

.essay-corrections-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.essay-correction-item {
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: 8px;
  border-left: 3px solid #f87171;
}

.correction-original {
  text-decoration: line-through;
  color: #dc2626;
  font-weight: 500;
}

.correction-replacement {
  color: #059669;
  font-weight: 600;
}

.correction-reason {
  display: block;
  font-size: 0.82rem;
  color: #6b7280;
  margin-top: 2px;
  font-style: italic;
}

/* ── AI Feedback ── */
.essay-ai-feedback {
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(99, 102, 241, 0.04));
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 14px;
  margin-bottom: 16px;
}

.essay-ai-feedback h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-main, #111827);
  margin: 0 0 8px 0;
}

.essay-ai-feedback p {
  font-size: 0.92rem;
  color: var(--text-main, #111827);
  line-height: 1.6;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   RTS (Respond To Situation) Mode
   ══════════════════════════════════════════════════════════════════ */

/* ── Step Progress Breadcrumb ── */
.rts-step-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.03));
  border-radius: 14px;
  border: 1px solid rgba(99, 102, 241, 0.08);
}

.rts-step-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #9ca3af);
  padding: 6px 14px;
  border-radius: 999px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.rts-step-dot.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.rts-step-dot.completed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.rts-step-icon {
  font-size: var(--text-sm);
  line-height: 1;
}

.rts-step-connector {
  width: 24px;
  height: 2px;
  background: rgba(99, 102, 241, 0.15);
  flex-shrink: 0;
}

/* ── Step Card (shared wrapper) ── */
.rts-step-card {
  animation: rts-fadeIn 0.35s ease;
}

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

/* ── Prompt Card ── */
.rts-prompt-card {
  font-size: 1.05rem;
  line-height: 1.75;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(99, 102, 241, 0.03));
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 14px;
  margin-bottom: 16px;
  color: var(--text-main, #1f2937);
}

.rts-prompt-card--faded {
  opacity: 0.65;
  font-size: var(--text-sm);
}

/* ── Audio Countdown Card ── */
.rts-countdown-card {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.2);
}

.rts-countdown-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.rts-countdown-label {
  font-size: 1.05rem;
  margin-bottom: 16px;
  opacity: 0.95;
}

.rts-countdown-bar-track {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
}

.rts-countdown-bar-fill {
  background: #fff;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  transition: width 0.1s linear;
}

/* ── Timer Card ── */
.rts-timer-card {
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 16px;
}

.rts-timer-card--prep {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.rts-timer-card--record {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.03));
  border: 1px solid rgba(239, 68, 68, 0.12);
}

.rts-timer-emoji {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.rts-timer-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rts-timer-display {
  font-size: 2.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-main, #111827);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

/* ── Progress Bar ── */
.rts-progress-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
}

.rts-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.15s linear;
}

.rts-progress-fill--prep {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.rts-progress-fill--record {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* ── Recording Indicator ── */
.rts-record-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--text-sm);
  color: #dc2626;
  margin-bottom: 8px;
}

.rts-record-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  animation: rts-pulse 1.2s ease-in-out infinite;
}

@keyframes rts-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ── Results: Playback Card ── */
.rts-playback-card {
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

.rts-playback-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.rts-playback-icon {
  font-size: 1.1rem;
}

.rts-playback-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-main, #111827);
}

.rts-audio-controls {
  width: 100%;
  border-radius: 8px;
  height: 40px;
}

/* ── Results: Transcript Display ── */
.rts-transcript-card {
  background: #fff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

.rts-transcript-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.rts-transcript-icon {
  font-size: 1.1rem;
}

.rts-transcript-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-main, #111827);
}

.rts-transcript-display {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(249, 250, 251, 0.8), rgba(243, 244, 246, 0.5));
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-main, #374151);
  min-height: 56px;
  white-space: pre-wrap;
  word-break: break-word;
}

.rts-transcript-display:empty::before,
.rts-transcript-display.rts-no-transcript::before {
  content: 'No transcript detected.';
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}

/* ── Results: Action Buttons ── */
.rts-results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .rts-step-progress {
    gap: 0;
    padding: 10px 12px;
  }

  .rts-step-dot {
    font-size: var(--text-2xs);
    padding: 5px 8px;
  }

  .rts-step-connector {
    width: 12px;
  }

  .rts-timer-display {
    font-size: 2rem;
  }

  .rts-countdown-card {
    padding: 24px 20px;
  }

  .rts-prompt-card {
    padding: 16px 18px;
    font-size: var(--text-sm);
  }
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .essay-prompt-display {
    padding: 14px 16px;
  }

  #mode-swt .notification-box {
    padding: 10px 12px;
  }

  #mode-swt .ra-v7-picker-inner {
    padding-inline: 0;
  }

  #mode-swt .ra-v7-nav {
    width: 100%;
  }

  #mode-swt .ra-v7-question-pill {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .essay-textarea {
    min-height: 200px;
    font-size: 0.92rem;
  }

  .essay-timer {
    font-size: 1.4rem;
  }

  .essay-input-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .essay-word-count {
    text-align: center;
  }

  .essay-score-row {
    flex-wrap: wrap;
  }

  .essay-score-label {
    min-width: 90px;
  }

  .essay-results-score-circle {
    font-size: 2.2rem;
  }
}

/* ── Design Token Overrides (Typography & Hover Polish) ── */

h1, h2, h3, .panel-title, .dashboard-title {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.tutorial-grid .tutorial-btn {
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: var(--bg-surface) !important;
}

.tutorial-grid .tutorial-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

.practice-skill-btn {
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.practice-skill-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ==========================================================================
   PRONUNCIATION & SYLLABLE COACHING TOOLTIP (Read Aloud, Repeat Sentence, Entrance Test)
   ========================================================================== */

#crm-word-tooltip,
.crm-word-tooltip {
  position: fixed;
  z-index: 10000;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.5), 0 10px 15px -5px rgba(0, 0, 0, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  pointer-events: auto;
  min-width: 280px;
  max-width: 440px;
  white-space: normal;
  transition: opacity 0.15s ease;
}

.crm-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crm-tooltip-word {
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.crm-tooltip-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.crm-tooltip-badge.syl-green {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.crm-tooltip-badge.syl-amber {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.crm-tooltip-badge.syl-red {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
}

.crm-tooltip-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin-top: -4px;
  line-height: 1.35;
}

.crm-tooltip-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.crm-tooltip-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.crm-tooltip-syllables {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-syl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: #1e293b;
  border: 1px solid #334155;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.crm-syl-chip:hover {
  transform: translateY(-1px);
  border-color: #94a3b8;
}

.crm-syl-chip:active {
  transform: translateY(0);
}

.crm-syl-chip .crm-syl-play {
  font-size: 11px;
  opacity: 0.8;
}

.crm-syl-chip.syl-green {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.crm-syl-chip.syl-green:hover {
  background: rgba(16, 185, 129, 0.25);
}

.crm-syl-chip.syl-amber {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

.crm-syl-chip.syl-amber:hover {
  background: rgba(245, 158, 11, 0.25);
}

.crm-syl-chip.syl-red {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.crm-syl-chip.syl-red:hover {
  background: rgba(239, 68, 68, 0.25);
}

.crm-syl-chip .crm-syl-score {
  font-size: 12px;
  opacity: 0.9;
}

.crm-syl-chip.is-playing,
.speak-word-token.is-playing,
.ra-word-token.is-playing {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

.crm-tooltip-insight {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-left: 3px solid #818cf8;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

.crm-insight-title {
  font-weight: 700;
  color: #c7d2fe;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-insight-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
}

.crm-insight-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.crm-insight-obs {
  color: #f1f5f9;
  line-height: 1.45;
  font-size: 12px;
}

.crm-insight-syl {
  color: #38bdf8;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
}

.crm-insight-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #fef3c7;
}

.crm-tip-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.2);
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.3;
}

.crm-tip-text {
  color: #fde68a;
  font-weight: 450;
}

.crm-tooltip-hint {
  font-size: 11.5px;
  color: #94a3b8;
  border-top: 1px solid #1e293b;
  padding-top: 6px;
  font-style: italic;
}

/* Interactive Speak Word Tokens (Repeat Sentence Mode) */
.speak-word-token {
  display: inline-block;
  margin: 2px 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1.05em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  user-select: none;
}

.speak-word-token:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.speak-word-token:active {
  transform: translateY(0);
}

.speak-word-token--good {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.speak-word-token--good:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.speak-word-token--uncertain {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.speak-word-token--uncertain:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}

.speak-word-token--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ef4444;
  text-underline-offset: 3px;
}

.speak-word-token--error:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.speak-word-token--omission {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px dashed #d1d5db;
  text-decoration: line-through;
  opacity: 0.75;
}

.speak-word-token--insertion {
  background: #f5f3ff;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
}

/* Keep Describe Image actions scrollable above the fixed phone toolbar and assistant. */
@media (max-width: 640px) {
  #mode-describe-image {
    padding-bottom: 220px;
  }
}