/* === EQP UI Quick Wins (JNpatch21) === */

/* Batch3A: Next mode toggle */
.eqp-next-mode-toggle{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  margin-left:0.75rem;
  font-size:0.75rem;
  white-space:nowrap;
  position:relative;
  z-index:3;
  pointer-events:auto;
}

.eqp-next-mode-label{
  opacity:0.8;
}
.eqp-next-mode-pill{
  border:none;
  outline:none;
  margin:0;
  padding:0.15rem 0.6rem;
  border-radius:999px;
  font-size:0.7rem;
  cursor:pointer;
  background:transparent;
  color:inherit;
  opacity:0.65;
  transition:opacity .15s ease, background-color .15s ease, border-color .15s ease;
}
.eqp-next-mode-pill.is-active{
  opacity:1;
  background: color-mix(in srgb,var(--eqp-accent,#7c5cff), transparent 84%);
  border:1px solid color-mix(in srgb,var(--eqp-accent,#7c5cff), transparent 70%);
}

.eqp-profile-next-mode{
  display:flex;
  align-items:center;
  gap:0.4rem;
  margin-top:0.75rem;
  font-size:0.8rem;
  flex-wrap:wrap;
}
.eqp-profile-next-mode .eqp-next-mode-label{
  opacity:0.8;
}
.eqp-profile-next-mode .eqp-next-mode-pill{
  margin-top:0.1rem;
}

@media (max-width:768px){
  /* Hide header-level toggle on small screens; profile popup will host the control */
  .eqp-next-mode-toggle{
    display:none;
  }
  /* Keep pills compact in profile popup on mobile */
  .eqp-profile-next-mode{
    margin-top:0.5rem;
    font-size:0.8rem;
  }
  .eqp-profile-next-mode .eqp-next-mode-pill{
    padding:0.15rem 0.6rem;
  }
}

/* Inputs: use accent color */
.eqp-card input[type="radio"], .eqp-card input[type="checkbox"]{accent-color:var(--eqp-accent,#7c5cff)}

/* 2) Progress bar under header */
/* JNpatch22 topbar removed */
.eqp-topbar{display:none !important;height:0!important;height:4px;background:linear-gradient(90deg,var(--eqp-accent,#7c5cff),var(--eqp-accent-2,#22d3ee));border-radius:999px;transition:width .35s ease;width:0}

/* 3) Micro-feedback animations */
@keyframes eqp-pop{0%{transform:scale(.98)}100%{transform:scale(1)}}
@keyframes eqp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.eqp-card.eqp-anim-correct{animation:eqp-pop .15s ease-out}
.eqp-card.eqp-anim-wrong{animation:eqp-shake .18s ease-in-out}

/* 4) Treat cards (optional class) */
.eqp-treat{border-left:4px solid var(--tone,var(--eqp-ok,#10b981));padding:1rem;border-radius:.75rem;background:color-mix(in srgb,var(--eqp-ok,#10b981),#fff 92%)}
.eqp-treat.neutral{--tone:var(--eqp-accent,#7c5cff);background:color-mix(in srgb,var(--eqp-accent,#7c5cff),#fff 94%)}
.eqp-treat.negative{--tone:var(--eqp-bad,#ef4444);background:color-mix(in srgb,var(--eqp-bad,#ef4444),#fff 94%)}

.eqp-reaction-line{
  margin-top:0.4rem;
  font-size:0.85rem;
  font-weight:500;
  opacity:0.95;
}
.eqp-reaction-line.eqp-reaction-complete{
  font-weight:600;
}
.eqp-game-mode.eqp-skin-kids_space .eqp-reaction-line,
.eqp-game-mode.eqp-skin-kids_jungle .eqp-reaction-line{
  font-size:0.9rem;
}


/* Better focus visibility */
.eqp-btn:focus-visible,.eqp-card button:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--eqp-accent,#7c5cff),#fff 50%) inset}

/* Keep prior theme inheritance for buttons */

/* Batch X2: stabilize layout metrics to prevent 1px overflow that can flash scrollbars */
.eqp-quiz-root, .eqp-quiz-root *{ box-sizing: border-box; }
.eqp-card{ scrollbar-gutter: stable both-edges; }

.eqp-quiz-root .eqp-btn,
.eqp-quiz-root button.eqp-btn,
.eqp-hub-root .eqp-btn,
.eqp-hub-root button,
.eqp-header .eqp-btn,
.eqp-header .eqp-btn-pause,
.eqp-header .eqp-btn-resume,
.eqp-header .eqp-snd-toggle,
.eqp-header .eqp-quests-btn {
  background: var(--eqp-btn_bg, var(--eqp-btn-bg, #334155)) !important;
  color: var(--eqp-btn_text, var(--eqp-btn-text, #e5e7eb)) !important;
  border-color: var(--eqp-btn_border, transparent) !important;
}
.eqp-header .eqp-btn:hover,
.eqp-header .eqp-btn-pause:hover,
.eqp-header .eqp-btn-resume:hover,
.eqp-header .eqp-snd-toggle:hover,
.eqp-header .eqp-quests-btn:hover,
.eqp-hub-root .eqp-btn:hover,
.eqp-quiz-root .eqp-btn:hover { filter: brightness(0.92); }

/* Preserve prior hard-hide for pause=off */
.eqp-quiz-root[data-pause="0"] .eqp-pr,
.eqp-quiz-root[data-pause="false"] .eqp-pr,
.eqp-quiz-root[data-pause="off"] .eqp-pr,
.eqp-quiz-root[data-pause="no"] .eqp-pr { display:none !important; }

/* === end EQP UI Quick Wins (JNpatch21) === */




.eqp-quiz-root, .eqp-hub-root { --eqp-bg:#0b1020; --eqp-card:rgba(255,255,255,0.08); --eqp-border:rgba(255,255,255,0.14); --eqp-accent:#7c5cff; --eqp-accent-2:#22d3ee; --eqp-text:#e5e7eb; --eqp-muted:#94a3b8; --eqp-ok:#10b981; --eqp-warn:#f59e0b; --eqp-bad:#ef4444; --eqp-contrast:0; }
@media (prefers-color-scheme: light) {
  .eqp-quiz-root, .eqp-hub-root{ --eqp-bg:#f5f7fb; --eqp-card:#ffffff; --eqp-border:#e5e7eb; --eqp-text:#0f172a; --eqp-muted:#475569; --eqp-accent:#6366f1; --eqp-accent-2:#06b6d4; }
}
.eqp-quiz-root, .eqp-hub-root { display:block; padding:12px; color: var(--eqp-text); }

/* ======================================================
   Batch A — Shared design tokens + shell foundations
   Purpose: establish safe shared UI primitives without
   changing runtime behavior or risky layout contracts.
   ====================================================== */
:where(.eqp-quiz-root, .eqp-hub-root, .eqp-cats-root, .eqp-cat-one, .eqp-cats-mount, .eqp-cat-mount, .eqp-cat-quizzes, .eqp-page-topbar-shell, .eqp-account-modal, .eqp-profile-panel, .eqp-reset){
  --eqp-surface-0: var(--eqp-bg, #0b1020);
  --eqp-surface-1: var(--eqp-card, rgba(255,255,255,0.08));
  --eqp-surface-2: var(--eqp-header, var(--eqp-card, rgba(255,255,255,0.08)));
  --eqp-surface-3: color-mix(in srgb, var(--eqp-surface-1), var(--eqp-surface-0) 24%);
  --eqp-text-strong: var(--eqp-text, #e5e7eb);
  --eqp-text-soft: var(--eqp-muted, #94a3b8);
  --eqp-shell-border-color: var(--eqp-border, rgba(148,163,184,.28));
  --eqp-shell-accent: var(--eqp-accent, #7c5cff);
  --eqp-shell-accent-2: var(--eqp-accent-2, #22d3ee);
  --eqp-shell-radius-xs: 10px;
  --eqp-shell-radius-sm: 12px;
  --eqp-shell-radius-md: 16px;
  --eqp-shell-radius-lg: 18px;
  --eqp-shell-radius-xl: 22px;
  --eqp-shell-radius-pill: 999px;
  --eqp-shell-space-1: .35rem;
  --eqp-shell-space-2: .5rem;
  --eqp-shell-space-3: .75rem;
  --eqp-shell-space-4: 1rem;
  --eqp-shell-space-5: 1.25rem;
  --eqp-shell-space-6: 1.5rem;
  --eqp-shell-pad-card: 20px;
  --eqp-shell-pad-panel: 18px;
  --eqp-shell-shadow-soft: 0 12px 30px rgba(2,6,23,.16);
  --eqp-shell-shadow-panel: 0 18px 42px rgba(2,6,23,.22);
  --eqp-shell-shadow-glow: 0 0 0 1px color-mix(in srgb, var(--eqp-shell-accent), transparent 82%), 0 18px 42px rgba(2,6,23,.18);
  --eqp-shell-max-content: var(--eqp-content-max, 980px);
  --eqp-shell-max-card: var(--eqp-card-max, 1200px);
  --eqp-shell-max-header: var(--eqp-header-max, var(--eqp-content-max, 980px));
  --eqp-shell-transition-fast: .14s ease;
  --eqp-shell-transition-base: .2s ease;
}

:where(.eqp-ui-root, .eqp-shell-pagebar, .eqp-shell-pagebar-inner, .eqp-shell-start, .eqp-shell-quiz, .eqp-shell-header, .eqp-shell-profile, .eqp-shell-auth, .eqp-shell-finish, .eqp-shell-summary){
  min-width: 0;
  box-sizing: border-box;
}

:where(.eqp-shell-pagebar, .eqp-shell-start, .eqp-shell-quiz, .eqp-shell-header, .eqp-shell-profile, .eqp-shell-auth, .eqp-shell-finish, .eqp-shell-summary){
  --eqp-shell-surface: var(--eqp-surface-1);
  --eqp-shell-border: var(--eqp-shell-border-color);
  --eqp-shell-radius: var(--eqp-shell-radius-lg);
  --eqp-shell-shadow: var(--eqp-shell-shadow-soft);
}

:where(.eqp-shell-pagebar, .eqp-shell-pagebar-inner){
  --eqp-shell-radius: var(--eqp-shell-radius-xl);
  --eqp-shell-surface: var(--eqp-surface-2);
}

:where(.eqp-shell-header){
  --eqp-shell-surface: var(--eqp-surface-2);
  --eqp-shell-radius: var(--eqp-shell-radius-md);
}

:where(.eqp-shell-auth, .eqp-shell-profile){
  --eqp-shell-shadow: var(--eqp-shell-shadow-panel);
}

:where(.eqp-shell-summary){
  --eqp-shell-radius: var(--eqp-shell-radius-md);
}

:where(.eqp-shell-pagebar-inner, .eqp-shell-start, .eqp-shell-quiz, .eqp-shell-auth, .eqp-shell-profile, .eqp-shell-finish, .eqp-shell-summary){
  isolation: isolate;
}

.eqp-card{ background: var(--eqp-card); backdrop-filter: blur(10px); border: 1px solid var(--eqp-border); border-radius: 18px; padding: 20px; box-shadow: 0 12px 30px rgba(2,6,23,.16); max-width: 1200px; margin: 14px auto; color: var(--eqp-text);  overflow-x:hidden; overflow-y:auto; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }



/* Batch 8B — Fit quiz card to viewport + internal scrolling (no page scroll) */
.eqp-quiz-root.eqp-fit{
  /* keep the entire quiz UI within the viewport */
  height: var(--eqp-vv-h, 100dvh);
  max-height: var(--eqp-vv-h, 100dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}


/* Batch X69 — Fit mode: let the card fill the remaining viewport (more room for options) */
.eqp-quiz-root.eqp-fit > .eqp-card,
.eqp-hub-root.eqp-fit > .eqp-card{
  flex: 1 1 auto;
  min-height: 0; /* allow internal scroll containers to size properly */
  max-height: none !important; /* override legacy 82vh cap */
}

/* Mobile: remove outer margins so the card reaches the viewport bottom */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-fit > .eqp-card,
  .eqp-hub-root.eqp-fit > .eqp-card{
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* Batch F: Safe-area padding when in fit mode (helps notches) */
.eqp-quiz-root.eqp-fit,
.eqp-hub-root.eqp-fit{
  padding-top: max(6px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* Batch X37/X38/X50/X52 — Mobile: maximize vertical room + remove bottom gap
   - Fit mode: remove extra top/bottom padding so the quiz card can lap the viewport bottom
   - Keep header-to-card gap at 0
   - Mobile UI v4: remove extra bottom padding inside the card so it touches the quiz background
*/
@media (max-width: 820px){
  .eqp-quiz-root.eqp-fit,
  .eqp-hub-root.eqp-fit{
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    padding-bottom: 0px !important; /* no gap under the card */
  }

  .eqp-quiz-root.eqp-fit .eqp-header,
  .eqp-hub-root.eqp-fit .eqp-header{
    margin-bottom: 0px !important;
  }

  /* Put safe-area protection INSIDE the card instead of below it */
  .eqp-quiz-root.eqp-fit > .eqp-card,
  .eqp-hub-root.eqp-fit > .eqp-card{
    /* Batch C: also account for bottom browser UI overlays (Android gesture/nav bars)
       so submit/finish actions aren't clipped when entering native fullscreen. */
    padding-bottom: calc(18px + env(safe-area-inset-bottom) + var(--eqp-vv-inset-b, 0px)) !important;
  }

  /* Batch C: ensure there's always real room under the action row on non-v4 mobile too */
  .eqp-quiz-root.eqp-fit .eqp-actions{
    margin-bottom: calc(10px + var(--eqp-vv-inset-b, 0px)) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls{
    margin: 0 0 0px !important;
    padding: 2px 2px 2px !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card{
    padding-bottom: calc(28px + env(safe-area-inset-bottom) + var(--eqp-vv-inset-b, 0px)) !important; /* keep bottom actions above browser UI */
  }

	  /* X71B: ensure there is ALWAYS a little extra space BELOW the submit/action row.
	     Padding on the card alone doesn't help if the action row is the last element.
	     This adds real breathing room under the buttons (mobile only). */
	  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-form .eqp-actions{
	    margin-bottom: calc(10px + var(--eqp-vv-inset-b, 0px)) !important;
	  }

  /* Also remove any remaining bottom padding/margin on mobile UI v4 roots */
  .eqp-quiz-root.eqp-mobile-ui-v4{
    padding-bottom: 0px !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card{
    margin-bottom: 0px !important;
  }
}

@supports not (height: 100dvh){
  .eqp-quiz-root.eqp-fit,
  .eqp-hub-root.eqp-fit{
    height: calc(var(--eqp-vv-h, calc(var(--eqp-vh, 1vh) * 100)));
    max-height: calc(var(--eqp-vv-h, calc(var(--eqp-vh, 1vh) * 100)));
  }
}

@supports (height: 100svh){
  .eqp-fit{ height: var(--eqp-vv-h, 100svh); max-height: var(--eqp-vv-h, 100svh); }
}
.eqp-quiz-root.eqp-fit .eqp-header{
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.eqp-quiz-root.eqp-fit .eqp-card{
  /* card becomes a flex column and consumes remaining space */
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
display: flex;
  flex-direction: column;
  /* avoid extra vertical space that would force page scroll */
  margin: 0 auto;
}
/* Batch X: Desktop card should never exceed viewport; allow internal scroll when content is long */
.eqp-quiz-root:not(.eqp-fit) .eqp-card{
  max-height: 82vh;
}

.eqp-quiz-root.eqp-fit .eqp-card > .eqp-meta{
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}
.eqp-quiz-root.eqp-fit .eqp-card > .eqp-form{
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
.eqp-quiz-root.eqp-fit .eqp-card > .eqp-feedback{
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  padding-right: 0;
  /* Reserve space so feedback appearing/disappearing doesn't trigger transient overflow */
  min-height: var(--eqp-feedback-min, 44px);
}

/* keep submit/next actions visible while scrolling inside the card */
.eqp-quiz-root.eqp-fit .eqp-actions{
  position: static;
  padding-top: 12px;
  padding-bottom: 6px;
}

/* Fit mode + split grid: ensure the right column can scroll with mouse wheel */
.eqp-quiz-root.eqp-fit .eqp-card > .eqp-qgrid{
  flex: 1 1 auto;
  min-height: 0;
}
.eqp-quiz-root.eqp-fit .eqp-card > .eqp-qgrid .eqp-main-col{
  min-height: 0;
}
.eqp-quiz-root.eqp-fit .eqp-card > .eqp-qgrid .eqp-form{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}
/* True fullscreen overlay (toggle in header) */
html.eqp-fs-lock,
body.eqp-fs-lock{
  overflow: hidden !important;
}

.eqp-quiz-root.eqp-fullscreen,
.eqp-hub-root.eqp-fullscreen{
  position: fixed !important;
  inset: auto !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--eqp-vv-top, 0px) !important;
  height: var(--eqp-vv-h, 100dvh) !important;
  bottom: auto !important;
  z-index: 999999 !important;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.eqp-quiz-root.eqp-fullscreen > .eqp-header,
.eqp-quiz-root.eqp-fullscreen > .eqp-card,
.eqp-quiz-root.eqp-fullscreen > .eqp-finish,
.eqp-hub-root.eqp-fullscreen > .eqp-header,
.eqp-hub-root.eqp-fullscreen > .eqp-card,
.eqp-hub-root.eqp-fullscreen > .eqp-finish{
  width: min(980px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.eqp-quiz-root.eqp-fullscreen > .eqp-card,
.eqp-quiz-root.eqp-fullscreen > .eqp-finish{
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 820px){
  .eqp-quiz-root.eqp-fullscreen > .eqp-card,
  .eqp-hub-root.eqp-fullscreen > .eqp-card,
  .eqp-quiz-root.eqp-fullscreen > .eqp-finish,
  .eqp-hub-root.eqp-fullscreen > .eqp-finish{
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  }

  .eqp-quiz-root.eqp-fullscreen .eqp-actions,
  .eqp-hub-root.eqp-fullscreen .eqp-actions,
  .eqp-quiz-root.eqp-fullscreen .eqp-finish-actions,
  .eqp-hub-root.eqp-fullscreen .eqp-finish-actions{
    margin-bottom: calc(10px + var(--eqp-vv-inset-b, 0px)) !important;
  }
}

/* Make the fullscreen toggle button match other header buttons */
.eqp-header .eqp-fs-toggle{
  font-weight: 800;
  line-height: 1;
}

/* finish screen: allow internal scroll if treat html is tall */
.eqp-quiz-root.eqp-fit .eqp-card.eqp-finish{
  overflow-y: auto;
  padding-right: 0;
scrollbar-gutter: stable;
}
.eqp-header{ /* JNpatch24 header inset glow */
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:600}

/* Batch X80 (Desktop header stability): center progress bar using a 3-column grid so it never jumps */
.eqp-header--compact.eqp-header--grid{
  display:grid !important;
  width:100%;
  box-sizing:border-box;
  min-width:0;
  /* Override .eqp-header--compact flex contract properties that can affect grid */
  justify-content: stretch !important;
  align-content: stretch;
  justify-items: stretch;
  /*
    Use minmax(0,1fr) so left/right content growth (e.g. streak label)
    never forces unequal column minimums that would shift the centered progress.
  */
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap: 12px;
}
.eqp-header--compact.eqp-header--grid .eqp-hdr-left{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  min-width: 0;
  overflow:hidden;
}
.eqp-header--compact.eqp-header--grid .eqp-hdr-center{
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
}
.eqp-header--compact.eqp-header--grid .eqp-hdr-right{
  justify-self:end;
  min-width: 0;
  overflow:hidden;
}
.eqp-header--compact.eqp-header--grid .eqp-progress--inline{
  /* +10px vs prior desktop length, with a clamp for narrower windows */
  width: clamp(200px, 34vw, 270px);
  max-width: 100%;
}
.eqp-header--compact.eqp-header--grid .eqp-streak--slot{
  display:inline-flex;
  align-items:center;
  gap:6px;
  /* Reserve enough width for "Streak 999" so activation never reflows */
  min-width: 92px;
  max-width: 140px;
  white-space: nowrap;
  visibility:hidden; /* reserve space, show only when active */
}
.eqp-header--compact.eqp-header--grid .eqp-streak.eqp-streak-active,
.eqp-header--compact.eqp-header--grid .eqp-streak.eqp-streak-broken{
  visibility:visible;
}

.eqp-time{ padding:8px 12px;border:1px solid var(--eqp-border); border-radius:999px;background: linear-gradient(90deg, var(--eqp-accent), var(--eqp-accent-2)); color:#fff; font-weight:700; }
.eqp-progress{height:10px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden;width:250px}
.eqp-progress>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--eqp-accent),var(--eqp-accent-2));transition:width .3s ease}
.eqp-stem{font-size:1.1rem;margin-bottom:12px;color:var(--eqp-text);line-height:1.5}
.eqp-opt{ display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--eqp-border); border-radius:12px;margin:10px 0;background: var(--eqp-card-solid, var(--eqp-card, #111827)); background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 92%, transparent); cursor:pointer; transition: transform .08s ease, background .2s ease; }
.eqp-opt:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 88%, transparent); }

/* Option folding (many options) */
.eqp-opt-hidden{ display:none !important; }

.eqp-moreopts-btn{
  width: 100%;
  margin: 6px 0 2px;
  padding: .55rem .75rem;
  border-radius: 12px;
  border: 1px dashed var(--eqp-border, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 82%, transparent);
  color: var(--eqp-text, #e5e7eb);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.1;
}
.eqp-moreopts-btn:hover{ filter: brightness(1.05); }

/* Batch 3: Option colouring & blink feedback */
.eqp-opt.is-correct{ border-color: rgba(34,197,94,.80) !important; background: rgba(34,197,94,.16) !important; }
.eqp-opt.is-wrong{ border-color: rgba(239,68,68,.85) !important; background: rgba(239,68,68,.14) !important; animation: eqp-wrong-blink .22s ease-in-out 0s 2; }
@keyframes eqp-wrong-blink{ 0%,100%{ filter: none; } 50%{ filter: brightness(1.35); } }

.eqp-btn{ display:inline-block;margin-top:14px;padding:12px 18px;border:0;border-radius:12px; background: linear-gradient(90deg, var(--eqp-accent), var(--eqp-accent-2)); color:#fff;cursor:pointer;font-weight:700; box-shadow: 0 8px 20px rgba(99,102,241,.35); }
.eqp-feedback{margin-top:12px;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--eqp-border)}
.eqp-feedback.ok{background:var(--eqp-ok-bg, rgba(16,185,129,.12));border-color:var(--eqp-ok-bd, rgba(16,185,129,.6))}
.eqp-feedback.info{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.6)}
.eqp-error{padding:12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.6);border-radius:12px;color:var(--eqp-text)}
.eqp-actions{margin-top:12px}
.eqp-actions .eqp-btn{margin-right:8px}
.eqp-subjects{display:flex;flex-wrap:wrap;gap:10px}
.eqp-title{font-weight:800;font-size:1.05rem;color:var(--eqp-text)}
.eqp-count{font-size:.95rem;color:var(--eqp-muted);margin-top:6px}
.eqp-quiz-root[style*="--eqp-contrast:1"], .eqp-hub-root[style*="--eqp-contrast:1"]{ --eqp-card: #ffffff !important; --eqp-border: #cbd5e1 !important; --eqp-text: #0b1020 !important; --eqp-muted: #1f2937 !important; }


/* Engagement UI */
.eqp-header{ /* JNpatch24 header inset glow */
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.eqp-controls{ display:flex; gap:8px; align-items:center; position:relative; }
.eqp-music-volume-pop{
  position:absolute;
  top:100%;
  right:0;
  margin-top:0.25rem;
  padding:0.35rem 0.5rem;
  background:rgba(0,0,0,0.9);
  border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
  z-index:25;
}
.eqp-music-volume-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
  outline:none;
}
.eqp-music-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--eqp-accent, #7c5cff);
  cursor:pointer;
}
.eqp-music-volume-slider::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--eqp-accent, #7c5cff);
  cursor:pointer;
}

.eqp-snd-toggle, .eqp-quests-btn{ border:none; cursor:pointer; padding:6px 10px; border-radius:10px; background: rgba(0,0,0,.08); color: inherit; }
.eqp-pressure{ position:relative; height:6px; background:rgba(0,0,0,.12); border-radius:999px; overflow:hidden; margin-top:8px; width:100%; }
.eqp-pressure>span{ display:block; height:100%; width:100%; transition: width .25s linear; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); }
.eqp-feedback.animate{ animation: eqpFadeSlide .35s ease both; }
.eqp-feedback.wrong{ background: var(--eqp-bad-bg, rgba(239,68,68,.12)); border-color: var(--eqp-bad-bd, rgba(239,68,68,.6)); }
@keyframes eqpFadeSlide{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
.eqp-quests-panel{ position:fixed; right:16px; bottom:16px; width:320px; max-width:calc(100vw - 32px); background: rgba(0,0,0,.3); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.15); border-radius:16px; box-shadow: 0 12px 30px rgba(0,0,0,.25); transform: translateY(10px) scale(.98); opacity:0; pointer-events:none; transition: all .2s ease; z-index:9999; color:#e5e7eb; }
.eqp-quests-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.eqp-quests-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-weight:800; }
.eqp-quests-head .eqp-quests-close{ background:none; border:none; cursor:pointer; font-size:14px; }
.eqp-quests-list{ list-style:none; margin:0; padding:8px 14px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.eqp-quests-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: rgba(255,255,255,.05); padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); }
.eqp-quests-list li.done{ background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.6); }
.eqp-finish .eqp-share{ margin-top:12px; display:flex; gap:10px; align-items:center; }
.eqp-finish .eqp-share h4{ margin:0 10px 0 0; font-size:1rem; font-weight:800; }


/* Inline picker (in-body panel) */
.eqp-inline-panel{ background: var(--eqp-card, rgba(255,255,255,.08)); color: var(--eqp-text,#e5e7eb); border:1px solid var(--eqp-border, rgba(255,255,255,.14)); border-radius: 14px; padding: 14px; }
.eqp-inline-head{ font-weight: 800; margin-bottom: 10px; }
.eqp-inline-cats, .eqp-inline-list{ display:flex; flex-wrap: wrap; gap:8px; margin-bottom: 12px; }
.eqp-finish-actions{ display:flex; gap:10px; margin-top:12px; }
.eqp-finish-actions .eqp-btn{ }
.eqp-header .eqp-time{ color: var(--eqp-timer, #fff); }
.eqp-btn{ background: var(--eqp-btn-bg, #334155); color: var(--eqp-btn-text, #e5e7eb); border:1px solid var(--eqp-border, rgba(255,255,255,.14)); border-radius:10px; padding:8px 12px; cursor:pointer; }
.eqp-btn:hover{ filter: brightness(1.06); }



/* === EQP v1.9.9.34 theme enforcement overrides === */
/* Buttons */
.eqp-quiz-root button,
.eqp-quiz-root .eqp-btn,
.eqp-quiz-root .eqp-action {
  background: var(--eqp-btn-bg) !important;
  color: var(--eqp-btn-text) !important;
  border-color: var(--eqp-btn-bg) !important;
}
.eqp-quiz-root button:disabled,
.eqp-quiz-root .eqp-btn:disabled { opacity: .6; }

/* Timer: text + SVG ring */
.eqp-quiz-root .eqp-timer,
.eqp-quiz-root .eqp-timer * {
  color: var(--eqp-timer) !important;
  stroke: var(--eqp-timer) !important;
}

/* Feedback / alerts */
.eqp-quiz-root .eqp-feedback.ok,
.eqp-quiz-root .eqp-feedback.correct {
  background: var(--eqp-ok-bg, rgba(16,185,129,.12));
  border-color: var(--eqp-ok-bd, rgba(16,185,129,.6));
}
.eqp-quiz-root .eqp-feedback.warn,
.eqp-quiz-root .eqp-feedback.warning {
  background: var(--eqp-warn-bg, rgba(245,158,11,.12));
  border-color: var(--eqp-warn-bd, rgba(245,158,11,.6));
}
.eqp-quiz-root .eqp-feedback.wrong,
.eqp-quiz-root .eqp-feedback.error,
.eqp-quiz-root .eqp-error {
  background: var(--eqp-bad-bg, rgba(239,68,68,.12));
  border-color: var(--eqp-bad-bd, rgba(239,68,68,.6));
}

/* High contrast: ensure indices/titles are readable */
.eqp-quiz-root[style*="--eqp-contrast: 1"] .eqp-idx,
.eqp-quiz-root[style*="--eqp-contrast: 1"] .eqp-number,
.eqp-quiz-root[style*="--eqp-contrast: 1"] .eqp-title {
  color: var(--eqp-text) !important;
  opacity: 1 !important;
}

/* Ensure count readable in high contrast */
.eqp-quiz-root[style*="--eqp-contrast: 1"] .eqp-count{ color: var(--eqp-text) !important; opacity:1 !important; }


/* === EQP v1.9.9.35.3: Make the countdown strip under the progress bar follow the Timer color === */
.eqp-quiz-root .eqp-pressure>span{
  background: var(--eqp-timer) !important;
  background-image: none !important; /* override the multicolor gradient */
  border-color: var(--eqp-timer) !important;
}


/* === EQP v1.9.9.35.4: Countdown strip inherits Accent 1 → Accent 2 like progress/timer === */
.eqp-quiz-root .eqp-pressure>span{
  background: var(--eqp-accent) !important;
  background-image: linear-gradient(90deg, var(--eqp-accent), var(--eqp-accent-2)) !important;
  border-color: var(--eqp-accent) !important;
}


/* === EQP v1.9.9.35.5: Numbering inherits quiz text color === */
.eqp-quiz-root .eqp-count,
.eqp-quiz-root .eqp-number,
.eqp-quiz-root .eqp-idx{
  color: inherit !important;
  opacity: 1 !important;
}


/* === EQP v1.9.9.35.6: Apply timer strip + numbering fixes to hub-launched quizzes === */
/* Countdown strip under progress in HUB should use Accent 1 → Accent 2 */
.eqp-hub-root .eqp-pressure>span{
  background: var(--eqp-accent) !important;
  background-image: linear-gradient(90deg, var(--eqp-accent), var(--eqp-accent-2)) !important;
  border-color: var(--eqp-accent) !important;
}

/* Numbering in HUB inherits surrounding text color */
.eqp-hub-root .eqp-count,
.eqp-hub-root .eqp-number,
.eqp-hub-root .eqp-idx{
  color: inherit !important;
  opacity: 1 !important;
}


/* Paused state overlay */
.eqp-card{ position:relative; }
.eqp-paused-overlay{ position:absolute; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; border-radius:12px; pointer-events:none; }
.eqp-paused-note{ padding:.5rem .75rem; background:rgba(0,0,0,.35); color:#fff; border-radius:8px; font-weight:700; }


/* === EQP header single-line layout === */
.eqp-header{ /* JNpatch24 header inset glow */
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; overflow:hidden;
}
.eqp-header .eqp-timer{flex:0 0 auto; white-space:nowrap;}
.eqp-header .eqp-progress{flex:1 1 auto; min-width:80px;}
.eqp-header .eqp-sound{flex:0 0 auto;}
.eqp-header .eqp-pr{flex:0 0 auto;}
.eqp-header .eqp-actions{flex:0 0 auto; display:flex; gap:.5rem;}
/* JN Batch5A: profile button container */
.eqp-header .eqp-profile{flex:0 0 auto; display:inline-flex; align-items:center;}
.eqp-header .eqp-profile-btn{font-weight:600; text-transform:uppercase; position:relative; z-index:5; pointer-events:auto;}
/* Compact circular icon buttons for Pause/Resume to save space */
.eqp-btn-icon{width:34px; height:34px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1;}
.eqp-btn-icon .lbl{display:none;}
@media (min-width: 640px){
  .eqp-btn-icon{width:36px; height:36px;}
}


/* === Header straight-line alignment + timer strip wrap === */
.eqp-header{ /* JNpatch24 header inset glow */
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.eqp-header > *{ align-self:center; }
.eqp-header .eqp-timer{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.eqp-header .eqp-progress{ flex:1 1 auto; min-width:120px; }
.eqp-header .eqp-pr, .eqp-header .eqp-sound, .eqp-header .eqp-actions{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem; }
.eqp-header button{ vertical-align:middle; }

/* Force the timer strip (pressure/time strip) to the next line */
.eqp-header .eqp-pressure, .eqp-header .pressure, .eqp-header .strip{ flex:0 0 100%; order:2; }
.eqp-header > *:not(.eqp-pressure):not(.pressure):not(.strip){ order:1; }

/* Rectangular Pause/Resume with responsive labels */
.eqp-btn-rect{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:8px 14px; border-radius:10px; line-height:1; font-size:18px; min-height:36px; }
.eqp-btn-rect .lbl{ display:none; }
@media (min-width: 768px){
  .eqp-btn-rect{ font-size:20px; min-height:38px; }
  .eqp-btn-rect .lbl{ display:inline; }
}

/* Feedback icons on same line as wording */
.eqp-quiz-root .eqp-feedback > p{ display:flex; align-items:center; gap:.35rem; margin:0; }
.eqp-quiz-root .eqp-feedback.ok > p::before{ content:'✅'; }
.eqp-quiz-root .eqp-feedback.wrong > p::before{ content:'❌'; }
.eqp-quiz-root .eqp-feedback.error > p::before{ content:'❌'; }
.eqp-quiz-root .eqp-feedback.warn > p::before{ content:'⚠️'; }
.eqp-quiz-root .eqp-feedback.warning > p::before{ content:'⚠️'; }
.eqp-quiz-root .eqp-feedback.info > p::before{ content:'⚠️'; }


/* Keep first-row controls on one line, segmented bar */
.eqp-header{ /* JNpatch24 header inset glow */
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.eqp-header .eqp-progress{ flex:1 1 auto; min-width:120px; min-width:0; }
.eqp-controls{ display:inline-flex; align-items:center; white-space:nowrap; border:1px solid var(--eqp-btn-bd, rgba(0,0,0,.15)); border-radius:12px; overflow:hidden; }
.eqp-controls > *{ flex:0 0 auto; border:0; background:transparent; padding:8px 12px; height:36px; display:inline-flex; align-items:center; gap:.4rem; }
.eqp-controls > * + *{ border-left:1px solid var(--eqp-btn-bd, rgba(0,0,0,.15)); }
@media (min-width:768px){ .eqp-controls > *{ height:38px; } }
/* Pause/Resume rectangular with labels matching New Quiz */
.eqp-btn-rect{ padding:8px 12px; border-radius:0; font-size:inherit; font-weight:inherit; }
.eqp-btn-rect .lbl{ display:none; }
@media (min-width:768px){ .eqp-btn-rect .lbl{ display:inline; } }
/* Make labels inherit same typography as New Quiz button */
.eqp-controls .lbl{ font-size:inherit; font-weight:inherit; }
/* Timer & strip */
.eqp-header .eqp-time{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.eqp-header .eqp-pressure, .eqp-header .pressure, .eqp-header .strip{ flex:0 0 100%; order:2; }
.eqp-header > *:not(.eqp-pressure):not(.pressure):not(.strip){ order:1; }
/* Feedback icons inline */
.eqp-quiz-root .eqp-feedback p{ margin:.5rem 0; line-height:1.45; }
.eqp-quiz-root .eqp-feedback.ok p::before{ content:'✅ '; }
.eqp-quiz-root .eqp-feedback.wrong p::before,
.eqp-quiz-root .eqp-feedback.error p::before{ content:'❌ '; }
.eqp-quiz-root .eqp-feedback.warn p::before,
.eqp-quiz-root .eqp-feedback.warning p::before,
.eqp-quiz-root .eqp-feedback.info p::before{ content:'⚠️ '; }


/* === v1.9.9.73: compact & aligned utility controls (sound, take new, quests) === */
.eqp-controls{ align-items:stretch; } /* let segments share the same block height */
.eqp-controls .eqp-snd-toggle,
.eqp-controls .eqp-take-new,
.eqp-controls .eqp-quests-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; height:34px; line-height:1; box-sizing:border-box;
  font-size:.95em;
}
/* If any of those are anchor tags styled as buttons, ensure consistent sizing */
.eqp-controls a.eqp-snd-toggle,
.eqp-controls a.eqp-take-new,
.eqp-controls a.eqp-quests-btn{
  padding:6px 10px; height:34px; line-height:1; box-sizing:border-box;
}
/* Keep icons centered if present */
.eqp-controls .eqp-snd-toggle .ico,
.eqp-controls .eqp-take-new .ico,
.eqp-controls .eqp-quests-btn .ico{
  line-height:1; display:inline-block;
}


/* === v1.9.9.74: tighter & perfectly aligned utility controls === */
/* Keep the segmented bar aligned and middle-centered */
.eqp-controls{ display:inline-flex; align-items:center; white-space:nowrap; }
.eqp-controls > *{ display:inline-flex; align-items:center; vertical-align:middle; margin:0; box-sizing:border-box; line-height:1; }
/* Make the three utility buttons smaller & equal height */
.eqp-controls .eqp-snd-toggle,
.eqp-controls .eqp-take-new,
.eqp-controls .eqp-quests-btn,
.eqp-controls a.eqp-snd-toggle,
.eqp-controls a.eqp-take-new,
.eqp-controls a.eqp-quests-btn{
  height:30px; padding:4px 8px; font-size:.88em; line-height:1; box-sizing:border-box;
}
/* Ensure inner icon/text sits centered without shifting baseline */
.eqp-controls .eqp-snd-toggle .ico,
.eqp-controls .eqp-take-new .ico,
.eqp-controls .eqp-quests-btn .ico{
  display:inline-block; line-height:1;
}


/* === v1.9.9.76: remove alignment container; align utility buttons directly === */
.eqp-header{ /* JNpatch24 header inset glow */
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06); display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.eqp-header .eqp-time{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.eqp-header .eqp-progress{ flex:1 1 0%; min-width:80px; min-width:0; }

/* Utility buttons (sound, take new, quests) compact & same height */
.eqp-header .eqp-snd-toggle,
.eqp-header .eqp-take-new,
.eqp-header .eqp-quests-btn,
.eqp-header a.eqp-snd-toggle,
.eqp-header a.eqp-take-new,
.eqp-header a.eqp-quests-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:4px 8px; line-height:1; box-sizing:border-box; font-size:.88em;
}

/* Keep the timer strip on the next line */
.eqp-header .eqp-pressure, .eqp-header .pressure, .eqp-header .strip{ flex:0 0 100%; order:2; }
.eqp-header > *:not(.eqp-pressure):not(.pressure):not(.strip){ order:1; }


/* === v1.9.9.77: align pause/resume with timer; modern button style === */
/* Keep header items vertically centered; timer inline */
.eqp-header{ /* JNpatch24 header inset glow */
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06); display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.eqp-header .eqp-time{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
/* Make pause/resume same height as timer line and visually modern */
.eqp-header .eqp-btn-pause.eqp-btn-rect,
.eqp-header .eqp-btn-resume.eqp-btn-rect{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:6px 12px; line-height:1; box-sizing:border-box;
  border-radius:10px;
  border:1px solid var(--eqp-btn-bd, rgba(0,0,0,.12));
  background: var(--eqp-ctl-bg, linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)));
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px rgba(255,255,255,.6) inset;
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
}
.eqp-header .eqp-btn-pause.eqp-btn-rect:hover,
.eqp-header .eqp-btn-resume.eqp-btn-rect:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 1px rgba(255,255,255,.65) inset;
}
.eqp-header .eqp-btn-pause.eqp-btn-rect:active,
.eqp-header .eqp-btn-resume.eqp-btn-rect:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.08) inset;
}
/* Icon sizing + label weight for a crisp, modern look */
.eqp-header .eqp-btn-rect .ico{ font-size:18px; line-height:1; }
.eqp-header .eqp-btn-rect .lbl{ font-weight:600; }
/* Ensure progress can tuck closer to timer so everything stays on one line */
.eqp-header .eqp-progress{ flex:1 1 0%; min-width:80px; min-width:0; }


/* === v1.9.9.78: nudge pause/resume up; modern sound & quests, keep aligned === */
/* Gentle upward nudge so the progress bar aligns with the button center */
:root{ --eqp-pr-nudge: -7px; }
.eqp-header .eqp-btn-pause.eqp-btn-rect,
.eqp-header .eqp-btn-resume.eqp-btn-rect{
  transform: translateY(var(--eqp-pr-nudge));
}

/* Modern styling for Sound & Quests (same height & alignment) */
.eqp-header .eqp-snd-toggle,
.eqp-header .eqp-quests-btn,
.eqp-header a.eqp-snd-toggle,
.eqp-header a.eqp-quests-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:6px 12px; line-height:1; box-sizing:border-box;
  border-radius:10px;
  border:1px solid var(--eqp-btn-bd, rgba(0,0,0,.12));
  background: var(--eqp-ctl-bg, linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)));
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px rgba(255,255,255,.6) inset;
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
  vertical-align:middle;
}
.eqp-header .eqp-snd-toggle:hover,
.eqp-header .eqp-quests-btn:hover,
.eqp-header a.eqp-snd-toggle:hover,
.eqp-header a.eqp-quests-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 1px rgba(255,255,255,.65) inset;
}
.eqp-header .eqp-snd-toggle:active,
.eqp-header .eqp-quests-btn:active,
.eqp-header a.eqp-snd-toggle:active,
.eqp-header a.eqp-quests-btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.08) inset;
}
/* Keep icons crisp inside */
.eqp-header .eqp-snd-toggle .ico,
.eqp-header .eqp-quests-btn .ico{ font-size:16px; line-height:1; }


/* === v1.9.9.86: Category quiz feedback uses EQP Appearance variables (CSS-only) === */
/* Apply only when category containers carry custom vars (inline or class-scoped) */
/* We scope broadly to common category wrappers while remaining safe for non-category quizzes */
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, [data-eqp-category], [data-eqp-type="category"], [data-eqp-skin*="cat"], [class*="eqp-cat"], .eqp-quiz-root[style*="--eqp-ok-"], .eqp-quiz-root[style*="--eqp-warn-"], .eqp-quiz-root[style*="--eqp-bad-"]) .eqp-feedback.ok{
  background: var(--eqp-ok-bg) !important;
  border-color: var(--eqp-ok-bd) !important;
  color: var(--eqp-ok-fg, inherit) !important;
}
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, [data-eqp-category], [data-eqp-type="category"], [data-eqp-skin*="cat"], [class*="eqp-cat"], .eqp-quiz-root[style*="--eqp-ok-"], .eqp-quiz-root[style*="--eqp-warn-"], .eqp-quiz-root[style*="--eqp-bad-"]) .eqp-feedback.warn,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, [data-eqp-category], [data-eqp-type="category"], [data-eqp-skin*="cat"], [class*="eqp-cat"], .eqp-quiz-root[style*="--eqp-ok-"], .eqp-quiz-root[style*="--eqp-warn-"], .eqp-quiz-root[style*="--eqp-bad-"]) .eqp-feedback.warning,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, [data-eqp-category], [data-eqp-type="category"], [data-eqp-skin*="cat"], [class*="eqp-cat"], .eqp-quiz-root[style*="--eqp-ok-"], .eqp-quiz-root[style*="--eqp-warn-"], .eqp-quiz-root[style*="--eqp-bad-"]) .eqp-feedback.info{
  background: var(--eqp-warn-bg) !important;
  border-color: var(--eqp-warn-bd) !important;
  color: var(--eqp-warn-fg, inherit) !important;
}
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, [data-eqp-category], [data-eqp-type="category"], [data-eqp-skin*="cat"], [class*="eqp-cat"], .eqp-quiz-root[style*="--eqp-ok-"], .eqp-quiz-root[style*="--eqp-warn-"], .eqp-quiz-root[style*="--eqp-bad-"]) .eqp-feedback.wrong,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, [data-eqp-category], [data-eqp-type="category"], [data-eqp-skin*="cat"], [class*="eqp-cat"], .eqp-quiz-root[style*="--eqp-ok-"], .eqp-quiz-root[style*="--eqp-warn-"], .eqp-quiz-root[style*="--eqp-bad-"]) .eqp-feedback.error,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, [data-eqp-category], [data-eqp-type="category"], [data-eqp-skin*="cat"], [class*="eqp-cat"], .eqp-quiz-root[style*="--eqp-ok-"], .eqp-quiz-root[style*="--eqp-warn-"], .eqp-quiz-root[style*="--eqp-bad-"]) .eqp-feedback.bad{
  background: var(--eqp-bad-bg) !important;
  border-color: var(--eqp-bad-bd) !important;
  color: var(--eqp-bad-fg, inherit) !important;
}
/* Base feedback spacing (non-destructive) */
{border:1px solid transparent; border-radius:10px; padding:.75rem; }


/* === v1.9.9.88: Category feedback inherits EQP Appearance colors (strong mapping) === */
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"]) .eqp-quiz-root .eqp-feedback.ok{
  background: var(--eqp-ok-bg) !important;
  border-color: var(--eqp-ok-bd) !important;
  color: var(--eqp-ok-fg, inherit) !important;
}
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"]) .eqp-quiz-root .eqp-feedback.warn,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"]) .eqp-quiz-root .eqp-feedback.warning,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"]) .eqp-quiz-root .eqp-feedback.info{
  background: var(--eqp-warn-bg) !important;
  border-color: var(--eqp-warn-bd) !important;
  color: var(--eqp-warn-fg, inherit) !important;
}
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"]) .eqp-quiz-root .eqp-feedback.wrong,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"]) .eqp-quiz-root .eqp-feedback.error,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"]) .eqp-quiz-root .eqp-feedback.bad{
  background: var(--eqp-bad-bg) !important;
  border-color: var(--eqp-bad-bd) !important;
  color: var(--eqp-bad-fg, inherit) !important;
}


/* === v1.9.9.90: Category feedback inherits Appearance vars (robust mapping) === */
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"], [class*="eqp-cat"]) .eqp-quiz-root .eqp-feedback.ok{
  background: var(--eqp-cat-ok-bg, var(--eqp-ok-bg, rgba(16,185,129,.12))) !important;
  border-color: var(--eqp-cat-ok-bd, var(--eqp-ok-bd, rgba(16,185,129,.6))) !important;
  color: var(--eqp-cat-ok-fg, var(--eqp-ok-fg, inherit)) !important;
}
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"], [class*="eqp-cat"]) .eqp-quiz-root .eqp-feedback.warn,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"], [class*="eqp-cat"]) .eqp-quiz-root .eqp-feedback.warning,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"], [class*="eqp-cat"]) .eqp-quiz-root .eqp-feedback.info{
  background: var(--eqp-cat-warn-bg, var(--eqp-warn-bg, rgba(245,158,11,.12))) !important;
  border-color: var(--eqp-cat-warn-bd, var(--eqp-warn-bd, rgba(245,158,11,.6))) !important;
  color: var(--eqp-cat-warn-fg, var(--eqp-warn-fg, inherit)) !important;
}
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"], [class*="eqp-cat"]) .eqp-quiz-root .eqp-feedback.wrong,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"], [class*="eqp-cat"]) .eqp-quiz-root .eqp-feedback.error,
:where(.eqp-cat, .eqp-category, .eqp-category-quiz, .eqp-hub-root, [data-eqp-category], [data-eqp-type="category"], [class*="eqp-cat"]) .eqp-quiz-root .eqp-feedback.bad{
  background: var(--eqp-cat-bad-bg, var(--eqp-bad-bg, rgba(239,68,68,.12))) !important;
  border-color: var(--eqp-cat-bad-bd, var(--eqp-bad-bd, rgba(239,68,68,.6))) !important;
  color: var(--eqp-cat-bad-fg, var(--eqp-bad-fg, inherit)) !important;
}


/* === EQP v1.9.9.114-JNpatch: Ensure [edu_quiz_hub] and header controls inherit button appearance === */
.eqp-hub-root button,
.eqp-hub-root .eqp-btn,
.eqp-hub-root .eqp-action {
  background: var(--eqp-btn-bg) !important;
  color: var(--eqp-btn-text) !important;
  border-color: var(--eqp-btn-bg) !important;
}
/* Sound / Quests / Pause buttons follow button theme in both quiz and hub roots */
.eqp-quiz-root .eqp-snd-toggle,
.eqp-quiz-root .eqp-quests-btn,
.eqp-quiz-root .eqp-btn-pause,
.eqp-quiz-root .eqp-btn-resume,
.eqp-hub-root .eqp-snd-toggle,
.eqp-hub-root .eqp-quests-btn,
.eqp-hub-root .eqp-btn-pause,
.eqp-hub-root .eqp-btn-resume {
  background: var(--eqp-btn-bg) !important;
  color: var(--eqp-btn-text) !important;
  border: 1px solid var(--eqp-btn-bg) !important;
}
/* Text inside buttons should inherit */
.eqp-quiz-root .eqp-snd-toggle .lbl,
.eqp-quiz-root .eqp-quests-btn .lbl,
.eqp-quiz-root .eqp-btn-pause .lbl,
.eqp-quiz-root .eqp-btn-resume .lbl,
.eqp-hub-root .eqp-snd-toggle .lbl,
.eqp-hub-root .eqp-quests-btn .lbl,
.eqp-hub-root .eqp-btn-pause .lbl,
.eqp-hub-root .eqp-btn-resume .lbl {
  color: inherit !important;
}


/* JN31 dashboard */
.eqp-dash{margin-top:1rem;padding:1rem;border-radius:1rem;background:rgba(255,255,255,.6);backdrop-filter:saturate(1.2) blur(2px)}
.eqp-dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.eqp-dash-head h3{margin:0;font-size:1.05rem}
.eqp-dash-actions .eqp-btn{margin-left:.5rem}
.eqp-dash-mastery h4,.eqp-dash-time h4{margin:.5rem 0}
.eqp-bars{display:grid;grid-template-columns:1fr;gap:.4rem}
.eqp-bar-row{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center}
.eqp-bar-label{font-size:.9rem;opacity:.9}
.eqp-bar-track{height:.5rem;background:rgba(0,0,0,.08);border-radius:.5rem;overflow:hidden}
.eqp-bar-fill{display:block;height:100%;background:var(--eqp-ok,#10b981)}
.eqp-spark{display:flex;gap:2px;align-items:flex-end;height:36px;margin-top:.25rem}
.eqp-spark-bar{display:inline-block;width:6px;background:rgba(0,0,0,.18);border-radius:2px}

/* JN32 transitions */
@media (prefers-reduced-motion:no-preference){
  .eqp-card{transition: transform .18s ease, opacity .18s ease}
  .eqp-enter{opacity:0; transform: translateY(6px) scale(.98)}
  .eqp-enter.eqp-enter-active{opacity:1; transform:none}
  .eqp-exit{opacity:1; transform:none}
  .eqp-exit.eqp-exit-active{opacity:0; transform: translateY(-6px) scale(.98)}
}

/* JN33 retry-by-topic chips */
.eqp-topic-wrap{margin-top:.75rem}
.eqp-topic-wrap h4{margin:.5rem 0}
.eqp-topic-list{display:grid;gap:.5rem}
.eqp-topic-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.eqp-topic-label{min-width:120px;font-size:.92rem;opacity:.9}
.eqp-chip{appearance:none;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.04);padding:.35rem .6rem;border-radius:999px;cursor:pointer;font-size:.85rem;line-height:1}
.eqp-chip:hover{background:rgba(0,0,0,.06)}
.eqp-chip.is-disabled{opacity:.55;cursor:not-allowed}
.eqp-chip-ghost{background:transparent}

/* JN36 dashboard spinner */
.eqp-dash-loading{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;opacity:.9}
.eqp-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.15);border-top-color:var(--eqp-accent,#7c5cff);animation:eqp-spin .8s linear infinite;display:inline-block}
@keyframes eqp-spin{to{transform:rotate(360deg)}}

/* JNpatch40: hide any residual hub buttons */
.eqp-back-to-hub, #eqp-back-to-hub, .eqp-btn-back-hub, .eqp-backhub, .eqp-hub-back { display:none !important; }

/* [JNpatch CSV] Ensure any legacy 'Export CSV' anchors are hidden if present */
.eqp-dash-actions a, .eqp-dash-actions button{
  /* intentional common styles below */
}
.eqp-dash-actions a:where([aria-label*="Export CSV" i], [title*="Export CSV" i]),
.eqp-dash-actions a:where(:is(.export-csv, .eqp-export-csv)),
.eqp-dash-actions a:where(:has(> span:contains("Export CSV"))){
  display:none !important;
}

/* === EQP Modern UI Refresh (JNpatch-UI-2025-10-18) === */

/* Card: glassy, elevated, with smooth shadow + border */
.eqp-card, .eqp-question, .eqp-card--container {
  border-radius: 1.25rem;
  background: var(--eqp-card-solid, var(--eqp-card, #111827));
  border: 1px solid var(--eqp-border, rgba(255,255,255,0.12));
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: clamp(1rem, 3vw, 1.5rem);
  transition: transform .25s ease, box-shadow .25s ease;
}

.eqp-card:hover, .eqp-question:hover, .eqp-card--container:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,0.32);
}

/* Title & content spacing */
.eqp-card h1, .eqp-card h2, .eqp-card h3, .eqp-card .title {
  margin-top: 0;
  letter-spacing: .2px;
}

/* Buttons: pill, tactile, with focus styles */
.eqp-btn, .eqp-download-btn, .eqp-primary, .eqp-secondary, .eqp-action {
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.eqp-btn:active, .eqp-download-btn:active, .eqp-primary:active, .eqp-secondary:active, .eqp-action:active {
  transform: translateY(1px);
}
.eqp-btn:focus-visible, .eqp-download-btn:focus-visible, .eqp-primary:focus-visible, .eqp-secondary:focus-visible, .eqp-action:focus-visible {
  outline: 3px solid rgba(59,130,246,.5);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(59,130,246,.15);
}

/* Color variants that adapt to existing themes */
.eqp-primary, .eqp-btn.eqp-primary {
  background: linear-gradient(135deg, var(--eqp-primary, #4F46E5), var(--eqp-primary-2, #06B6D4));
  color: #fff;
}
.eqp-secondary, .eqp-btn.eqp-secondary {
  background: linear-gradient(135deg, var(--eqp-secondary, #334155), var(--eqp-secondary-2, #0F172A));
  color: #E2E8F0;
}
.eqp-danger, .eqp-btn.eqp-danger {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
}

/* Layout polish for action bars */
.eqp-finish-actions, .eqp-dash-actions, .eqp-actions, .eqp-toolbar {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Subtle dividers & chips */
.eqp-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: .9rem;
}

/* Responsive tweaks */
@media (max-width: 640px){
  .eqp-card, .eqp-question, .eqp-card--container { padding: 1rem; }
  .eqp-finish-actions, .eqp-dash-actions, .eqp-actions { gap: .5rem; }
}


/* JNpatch45-ResponsiveFit CSS */
.eqp-viewport-fixed{background:var(--eqp-bg, var(--eqp-bg-color, #0b1220));}
/* Avoid 100dvh here (mobile URL bar causes dvh to change and can create layout “breathing”). */
.eqp-no-scroll{overflow:hidden !important;height:100% !important; max-height:100% !important;}
.eqp-fit-content{max-width:unset !important;max-height:unset !important;}

/* typography that scales nicely when scaled down */
.eqp-quiz-root{font-size:clamp(14px, 1.8vw, 18px); line-height:1.4;}
.eqp-quiz-root .eqp-card{max-width:min(1200px, 96dvw);}

/* images + tables responsive internally */
.eqp-quiz-root img{max-width:100%;height:auto;border-radius:.5rem}
.eqp-quiz-root table{width:100%;border-collapse:collapse;display:block;overflow:auto;max-width:100%;}
.eqp-quiz-root th, .eqp-quiz-root td{padding:.5rem;border-bottom:1px solid var(--eqp-border, rgba(255,255,255,.06));}

/* Buttons wrap instead of overflow */
.eqp-quiz-root .eqp-actions, .eqp-quiz-root .eqp-answers{display:flex;flex-wrap:wrap;gap:.5rem}
.eqp-quiz-root .eqp-btn{min-height:40px;}

/* Header sticks inside the scaled content */
.eqp-quiz-root .eqp-header{position:sticky;top:0;z-index:5}

/* Category launcher containers participate in viewport fit as well.
   Use stable JS-seeded --eqp-vh (avoids mobile address-bar dvh "breathing"). */
.eqp-cat-quizzes{min-height:calc(var(--eqp-vh, 1vh) * 100)}

/* === JNpatch46 ResponsiveFit2: Finish screen + header timer stability === */
.eqp-quiz-root.eqp-viewport-fixed{ contain: layout paint; }
.eqp-quiz-root .eqp-header{ transition: none !important; contain: layout; }
.eqp-quiz-root .eqp-header .eqp-timer{ min-height: 20px; line-height: 20px; white-space: nowrap; }
.eqp-quiz-root .eqp-finish, .eqp-quiz-root .eqp-summary{ max-width:100dvw; max-height:calc(var(--eqp-vh, 1vh) * 100); }
.eqp-quiz-root .eqp-finish *{ max-width:100%; }
.eqp-quiz-root .eqp-summary .eqp-bars{ flex-wrap:wrap; gap:.5rem; }
.eqp-quiz-root .eqp-summary table{ width:100%; table-layout:fixed; word-wrap:break-word; }
.eqp-quiz-root .eqp-summary table th, 
.eqp-quiz-root .eqp-summary table td{ overflow:hidden; text-overflow:ellipsis; }
.eqp-quiz-root .eqp-fit-content{ will-change: transform; transform-origin: top center; }


/* ================================
   JNpatch53 (Consolidated Category Fit + Corner Share + Solid Cards)
   Date: 2025-10-29T00:25:38Z
   ================================ */

/* Use viewport for layout, allow overlays */
.eqp-cat-quizzes .eqp-quiz-root {
  min-height: calc((var(--eqp-vh, 1vh) * 100) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  padding: 8px; gap: 6px; overflow: visible;
}

/* Flatter header & always-visible timer */
.eqp-cat-quizzes .eqp-header{ position: relative; z-index: 50; padding: 4px 6px; gap: 4px; line-height: 1.15; }
.eqp-cat-quizzes .eqp-header .eqp-progress{ height: 5px !important; opacity:1 !important; visibility:visible !important; display:block !important; }

/* Card layout & solid background (no transparency) */
.eqp-cat-quizzes .eqp-card{
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 4px 0; border-radius: 14px;
  background-color: var(--eqp-card, #0f172a) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background-image: none !important; opacity:1 !important;
  border: 1px solid var(--eqp-border, rgba(255,255,255,.08));
}

/* Actions bars solid + sticky */
.eqp-cat-quizzes .eqp-actions,
.eqp-cat-quizzes .eqp-finish .eqp-finish-actions{
  position: sticky; bottom: 0; z-index: 20;
  background: var(--eqp-card, #0f172a); border-top-left-radius: 10px; border-top-right-radius: 10px;
  padding: 8px; box-shadow: 0 -1px 0 rgba(0,0,0,.12);
}
.eqp-cat-quizzes .eqp-finish .eqp-finish-actions .eqp-btn,
.eqp-cat-quizzes .eqp-finish .eqp-finish-actions button{ padding: .48rem .66rem; font-size: .9em; line-height: 1.05; }

/* Explanation panel: bounded scroll if long */
.eqp-cat-quizzes .eqp-explanation, .eqp-cat-quizzes .eqp-explain{ max-height: 42vh; overflow-y:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }

/* FINISH: No inner summary scroll + tighter spacing */
.eqp-cat-quizzes .eqp-finish{ position: relative; gap: 4px; }
.eqp-cat-quizzes .eqp-finish [class*="summary"],
.eqp-cat-quizzes .eqp-finish [class*="detail"],
.eqp-cat-quizzes .eqp-finish [class*="breakdown"]{ max-height:none !important; overflow:visible !important; }
.eqp-cat-quizzes .eqp-finish h3{ margin: 2px 0 4px !important; }
.eqp-cat-quizzes .eqp-finish p{ margin: 4px 0 !important; }

/* Corner Share (top-right, vertical) */
.eqp-cat-quizzes .eqp-share-corner{ position:absolute; top:10px; right:10px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; z-index:60; }
.eqp-cat-quizzes .eqp-share-corner .eqp-share-title{ font-size:.86em; opacity:.9; margin:0; }
.eqp-cat-quizzes .eqp-share-corner .eqp-share-btn{ display:inline-flex; align-items:center; gap:6px; padding:.5rem .7rem; border-radius:10px; border:1px solid var(--eqp-border, rgba(255,255,255,.10)); background: var(--eqp-btn-bg, #334155); color: var(--eqp-btn-text, #e5e7eb); text-decoration:none; cursor:pointer; line-height:1.1; font-size:.92em; }
.eqp-cat-quizzes .eqp-share-corner .eqp-share-btn:hover{ filter:brightness(0.95); }

/* Reserve space so text doesn't sit under corner share */
.eqp-cat-quizzes .eqp-finish > *:first-child{ margin-right: 180px; }
@media (max-width: 600px){
  .eqp-cat-quizzes .eqp-share-corner{ top:8px; right:8px; gap:4px; }
  .eqp-cat-quizzes .eqp-share-corner .eqp-share-btn{ padding:.45rem .6rem; font-size:.9em; }
  .eqp-cat-quizzes .eqp-finish > *:first-child{ margin-right: 140px; }
}
@media (max-width: 420px){
  .eqp-cat-quizzes .eqp-finish > *:first-child{ margin-right: 118px; }
}

/* Collapse any stray empty blocks that could form blank rows */
.eqp-cat-quizzes .eqp-finish > :empty,
.eqp-cat-quizzes .eqp-finish .eqp-share:empty{ display:none !important; margin:0 !important; padding:0 !important; height:0 !important; }

/* Mobile typography: reduce titles/questions further; options +6px total */
@media (max-width: 480px){
  .eqp-cat-quizzes .eqp-header h1,
  .eqp-cat-quizzes .eqp-header h2,
  .eqp-cat-quizzes .eqp-header h3{ font-size: 0.78rem !important; }
  .eqp-cat-quizzes .eqp-question{ font-size: 0.78rem !important; }
  .eqp-cat-quizzes .eqp-opt{ font-size: calc(1em + 6px) !important; }
}

/* Quests panel: fixed overlay above everything */
.eqp-quests-panel{ position: fixed !important; right: 12px; bottom: 12px; top: auto !important; z-index: 2147483646 !important; }
.eqp-quests-panel.open{ display:flex !important; }

/* Stylish scrollbars */

/* JNpatch67-Scrollbars: thinner, modern scrollbars for card & finish areas (all quiz types) */
.eqp-quiz-root .eqp-card,
.eqp-quiz-root .eqp-card *,
.eqp-quiz-root .eqp-finish,
.eqp-quiz-root .eqp-finish *{
  scrollbar-width: thin;
  scrollbar-color: var(--eqp-accent, #6366f1) rgba(127,127,127,0.14);
}

/* Chrome/Edge/Safari */
.eqp-quiz-root .eqp-card::-webkit-scrollbar,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}

.eqp-quiz-root .eqp-card::-webkit-scrollbar-track,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar-track,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar-track,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar-track{
  background: rgba(127,127,127,0.10);
  border-radius: 10px;
}

.eqp-quiz-root .eqp-card::-webkit-scrollbar-thumb,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar-thumb,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar-thumb,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--eqp-accent, #6366f1), #fff 8%);
  border-radius: 10px;
  border: 2px solid transparent; /* gives a pill look */
  background-clip: padding-box;
}

.eqp-quiz-root .eqp-card::-webkit-scrollbar-thumb:hover,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar-thumb:hover,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar-thumb:hover,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--eqp-accent, #6366f1), #000 8%);
}

.eqp-cat-quizzes .eqp-quiz-root *{ scrollbar-width: thin; scrollbar-color: var(--eqp-accent, #6366f1) rgba(127,127,127,0.15); }
.eqp-cat-quizzes .eqp-quiz-root *::-webkit-scrollbar{ width:8px; height:8px; }
.eqp-cat-quizzes .eqp-quiz-root *::-webkit-scrollbar-track{ background: rgba(127,127,127,0.12); border-radius:10px; }
.eqp-cat-quizzes .eqp-quiz-root *::-webkit-scrollbar-thumb{ background: var(--eqp-accent, #6366f1); border-radius:10px; }



/* === JNpatch v8: Typography variables application === */
.eqp-quiz-root .eqp-title{ font-family: var(--eqp-title-font, inherit) !important; font-size: var(--eqp-title-size, 1.05em) !important; }
.eqp-quiz-root .eqp-stem{ font-family: var(--eqp-q-font, inherit) !important; font-size: var(--eqp-q-size, inherit) !important; }
.eqp-quiz-root .eqp-opt{ font-family: var(--eqp-opt-font, inherit) !important; font-size: var(--eqp-opt-size, inherit) !important; }
.eqp-quiz-root .eqp-btn{ font-family: var(--eqp-btn-font, inherit) !important; font-size: var(--eqp-btn-size, inherit) !important; }
.eqp-quiz-root .eqp-explanation{ font-family: var(--eqp-explain-font, inherit) !important; font-size: var(--eqp-explain-size, inherit) !important; }

.eqp-quiz-root .eqp-feedback, .eqp-quiz-root .eqp-error{ font-family: var(--eqp-explain-font, inherit) !important; font-size: var(--eqp-explain-size, inherit) !important; }
/* Hide explanations when toggled off */
.eqp-quiz-root.eqp-explain-hidden .eqp-explanation{ display:none !important; }


/* === JNpatch v9: Explanation forced hide === */
.eqp-quiz-root.eqp-explain-hidden .eqp-explanation,
.eqp-quiz-root.eqp-explain-hidden [data-role="explanation"],
.eqp-quiz-root.eqp-explain-hidden [class*="explain"]{ display:none !important; }

/* Ensure explanation toggle is visible and aligned */
.eqp-header .eqp-explain-toggle{ margin-left:auto; }

/* Ensure EQP header lays out controls */
.eqp-header{ display:flex; align-items:center; gap:8px; }
.eqp-header .eqp-explain-toggle{ margin-left:auto; }


/* ================================
   JNpatch54 (2025-10-30)
   Category quizzes: center header & card and tighten header→card gap,
   without shrinking overall quiz container width to the exact card width.
   Scopes: .eqp-cat-quizzes (single-category), .eqp-cats-mount (multi-category)
   ================================ */

/* 1) Use the full container for layout, but center inner content */
.eqp-cat-quizzes .eqp-quiz-root,
.eqp-cats-mount .eqp-quiz-root{
  display: flex;
  flex-direction: column;
  align-items: center; /* centers children horizontally */
}

/* 2) Constrain readable line length without forcing container width */
:root{ --eqp-content-max: 980px; } /* feel free to override via theme */
@media (max-width: 1040px){ :root{ --eqp-content-max: 92vw; } }

/* 3) Center header and card blocks and keep them the same readable width */
.eqp-cat-quizzes .eqp-header,
.eqp-cats-mount .eqp-header{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  /* reduce bottom gap towards the card */
  margin-bottom: 6px !important;
}

.eqp-cat-quizzes .eqp-card,
.eqp-cats-mount .eqp-card{
  width: min(100%, var(--eqp-content-max));
  margin-left: auto;
  margin-right: auto;
  /* tighten any default top margin the card might have */
  margin-top: 6px !important;
}

/* 4) Ensure progress/timer strip stays visible and aligned */
.eqp-cat-quizzes .eqp-header .eqp-progress,
.eqp-cats-mount .eqp-header .eqp-progress{
  display:block !important;
  visibility:visible !important;
}

/* 5) Small screens: keep things snug */
@media (max-width: 640px){
  .eqp-cat-quizzes .eqp-header,
  .eqp-cats-mount .eqp-header{ margin-bottom: 4px !important; padding-top: .5rem; padding-bottom: .5rem; }
  .eqp-cat-quizzes .eqp-card,
  .eqp-cats-mount .eqp-card{ margin-top: 4px !important; }
}


/* ================================
   JNpatch55 (2025-10-30)
   Shortcode-launched quizzes: apply the same centering & tightened header→card gap as categories.
   Adds optional separate max widths: --eqp-header-max and --eqp-card-max (fallback to --eqp-content-max).
   ================================ */

/* Root: let the container stay full width, center inner content */
.eqp-quiz-root[data-origin="shortcode"]{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Fallbacks for separate sizing (override in theme or Additional CSS if desired) */
:root{
  --eqp-header-max: var(--eqp-content-max, 980px);
  --eqp-card-max: clamp(520px, 90vw, 940px);
}

/* Center header & card bands without forcing container width */
.eqp-quiz-root[data-origin="shortcode"] .eqp-header{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  margin-bottom: 6px !important; /* tighten toward card */
  align-self:stretch;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-card{
  width: min(100%, var(--eqp-card-max));
  margin-left:auto;
  margin-right:auto;
  margin-top: 6px !important; /* tighten from header */
}

/* Keep progress/timer visible */
.eqp-quiz-root[data-origin="shortcode"] .eqp-header .eqp-progress{
  display:block !important;
  visibility:visible !important;
}

/* Small screens: keep things snug */
@media (max-width: 640px){
  .eqp-quiz-root[data-origin="shortcode"] .eqp-header{ margin-bottom:4px !important; padding-top:.5rem; padding-bottom:.5rem; }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-card{ margin-top:4px !important; }
}

/* --- Optional: allow different widths for CATEGORY header vs card too (opt-in vars) --- */
.eqp-cat-quizzes .eqp-header,
.eqp-cats-mount .eqp-header{ width: min(100%, var(--eqp-header-max, var(--eqp-content-max))); }
.eqp-cat-quizzes .eqp-card,
.eqp-cats-mount .eqp-card{ width: min(100%, var(--eqp-card-max, var(--eqp-content-max))); }


/* ================================
   JNpatch56 (2025-10-30)
   Respect "Enable time-pressure meter" toggle:
   - Hide both .eqp-pressure and .eqp-progress when disabled to avoid confusion.
   - Only force .eqp-progress visible when data-pressure="on".
   ================================ */
.eqp-quiz-root[data-pressure="off"] .eqp-header .eqp-pressure,
.eqp-quiz-root[data-pressure="off"] .eqp-header .eqp-progress{ display:none !important; }

/* Override earlier unconditional rules: only show when ON */
.eqp-quiz-root[data-pressure="on"] .eqp-header .eqp-progress{ display:block !important; visibility:visible !important; }


/* ================================
   JNpatch57 (2025-10-30)
   Decouple progress strip from time-pressure toggle + make meter thinner
   Source: applied on top of JNpatch56 upload
   - Keep .eqp-progress visible regardless of ENG.enable_pressure
   - Hide only .eqp-pressure when disabled
   - Thin the time-pressure meter
   ================================ */

/* 1) Ensure progress strip is always visible, even when data-pressure="off" */
.eqp-quiz-root .eqp-header .eqp-progress{ display:block !important; visibility:visible !important; }
/* Override any prior 'off' rule */
.eqp-quiz-root[data-pressure="off"] .eqp-header .eqp-progress{ display:block !important; visibility:visible !important; }

/* 2) Only hide the time-pressure meter when disabled */
.eqp-quiz-root[data-pressure="off"] .eqp-header .eqp-pressure{ display:none !important; }

/* 3) Make the meter thinner */
.eqp-header .eqp-pressure{ height:4px !important; }
@media (max-width: 640px){
  .eqp-header .eqp-pressure{ height:3px !important; }
}


/* ================================
   JNpatch58 (2025-10-30)
   Header bottom should not cover the time-pressure meter; raise meter by 6px,
   and make header bottom padding lap exactly to the meter.
   ================================ */

/* Defaults (can be overridden in theme if needed) */
:root{
  --eqp-pressure-height: 4px; /* keep thinner look from JNpatch57 */
  --eqp-pressure-offset: 6px; /* move meter up by 6px */
}

/* Ensure header sits above card and provides room for the meter */
.eqp-quiz-root .eqp-header{ 
  position: relative !important;
  z-index: 60 !important;
  /* bottom padding laps to the bottom of the meter (height + offset) */
  padding-bottom: calc(var(--eqp-pressure-height, 4px) + var(--eqp-pressure-offset, 6px)) !important;
}

/* Anchor the meter to the header bottom, raised by 6px, avoid flow-based shifts */
.eqp-header .eqp-pressure{
  position: absolute !important;
  left: 0; right: 0;
  bottom: var(--eqp-pressure-offset, 6px);
  height: var(--eqp-pressure-height, 4px) !important;
  margin: 0 !important;
  z-index: 2;
}

/* Keep progress strip visible (from JNpatch57); no changes needed here */


/* ================================
   JNpatch59 (2025-10-30)
   - Move time-pressure meter down by 3px (vs previous 6px raise)
   - Stop header edge from covering meter
   - Prevent header "jump" when scrollbars appear by reserving a gutter
   ================================ */

/* 0) Defaults */
:root{
  --eqp-pressure-height: 4px; /* thin from JNpatch57 */
  --eqp-pressure-offset: 3px; /* moved down a little */
}

/* 1) Keep header sticky and box-sized, reserve space for the meter */
.eqp-quiz-root .eqp-header{
  position: sticky !important;
  top: 0;
  z-index: 60 !important;
  box-sizing: border-box;
  padding-bottom: calc(var(--eqp-pressure-height) + var(--eqp-pressure-offset)) !important;
}

/* 2) Anchor meter inside header; never affected by content flow */
.eqp-header .eqp-pressure{
  position: absolute !important;
  left: 0; right: 0;
  bottom: var(--eqp-pressure-offset);
  height: var(--eqp-pressure-height) !important;
  margin: 0 !important;
  z-index: 2;
}

/* 3) Stabilize layout width when internal scrollbar appears */
.eqp-quiz-root{
  /* Encourage an internal scroll container with stable gutter to avoid reflow */
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

/* 4) Defensive: prevent accidental header overlap from parent overflow clipping */
.eqp-quiz-root, .eqp-cat-quizzes, .eqp-cats-mount{
  overflow: visible;
}


/* ================================
   JNpatch60 (2025-10-30)
   Freeze header height + lift header bottom by 3px relative to the meter
   ================================ */

/* New: header bottom lift */
:root{
  --eqp-header-bottom-lift: 3px;
}

/* Adjust header bottom padding so the visible bottom edge moves up by 3px */
.eqp-quiz-root .eqp-header{
  padding-bottom: calc(var(--eqp-pressure-height, 4px) + var(--eqp-pressure-offset, 3px) - var(--eqp-header-bottom-lift, 3px)) !important;
}

/* Optional safety: ensure header content won't overlap meter visually */
.eqp-quiz-root .eqp-header > *:not(.eqp-pressure){
  position: relative;
  z-index: 3;
}


/* ================================
   JNpatch61 (2025-10-30)
   Stabilize header immediately on first interaction & ensure meter is 3px below header bottom.
   ================================ */

/* Force the desired offset globally (override prior values) */
:root{
  --eqp-pressure-offset: 3px !important;
}

/* Ensure header reserves space using the finalized 3px offset */
.eqp-quiz-root .eqp-header{
  padding-bottom: calc(var(--eqp-pressure-height, 4px) + 3px - var(--eqp-header-bottom-lift, 3px)) !important;
}


/* ================================
   JNpatch63 (2025-10-30)
   Meter between header and card, using the *original* gap (no extra space)
   ================================ */

/* Create a controlled gap between header and card */
.eqp-header + .eqp-gap{ margin:0 !important; }
.eqp-gap{ position: relative; height: calc(var(--eqp-gap-height, 12px) * var(--eqp-autofit-scale, 1)); }
.eqp-gap + .eqp-card{ margin-top:0 !important; }

/* Make sure we don't accidentally show an in-header meter */
.eqp-header .eqp-pressure{ display:none !important; }

/* Center the meter inside the gap; add border that inherits theme border color */
.eqp-gap .eqp-pressure{
  position: absolute !important;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: var(--eqp-pressure-height, 4px) !important;
  margin: 0 !important;
  border: 1px solid var(--eqp-border, rgba(127,127,127,.3));
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  pointer-events: none; /* do not block header/card interactions */
}
.eqp-gap .eqp-pressure > span{ display:block; height:100%; width:100%; }

/* Respect the toggle */
.eqp-quiz-root[data-pressure="off"] .eqp-gap .eqp-pressure{ display:none !important; }

/* Reset header padding (we are not reserving space inside header anymore) */
.eqp-quiz-root .eqp-header{
  padding-bottom: var(--eqp-header-bottom-pad, .5rem) !important;
}


/* ================================
   JNpatch64 (2025-10-30)
   Move meter above header (pre-gap) and keep total spacing unchanged by moving height from mid-gap to pre-gap.
   ================================ */

/* Pre-gap sits directly above header, using the same height as the original tight space */
.eqp-pre-gap{ position: relative; height: calc(var(--eqp-gap-height, 12px) * var(--eqp-autofit-scale, 1)); margin:0; padding:0; }
.eqp-pre-gap + .eqp-header{ margin-top:0 !important; }

/* Mid-gap is now zero-height to avoid adding extra space */
.eqp-header + .eqp-gap{ margin:0 !important; }
.eqp-gap{ position: relative; height: 0 !important; margin:0 !important; padding:0 !important; }
.eqp-gap + .eqp-card{ margin-top:0 !important; }

/* Render the meter centered inside the pre-gap; inherit border color */
.eqp-pre-gap .eqp-pressure{
  position: absolute !important;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: var(--eqp-pressure-height, 4px) !important;
  margin: 0 !important;
  border: 1px solid var(--eqp-border, rgba(127,127,127,.3));
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.eqp-pre-gap .eqp-pressure > span{ display:block; height:100%; width:100%; }

/* Respect the toggle: hide only the meter */
.eqp-quiz-root[data-pressure="off"] .eqp-pre-gap .eqp-pressure{ display:none !important; }

/* Make sure header itself does not reserve meter space */
.eqp-quiz-root .eqp-header{ padding-bottom: var(--eqp-header-bottom-pad, .5rem) !important; }


/* JNpatch65 (reapplied) */
.eqp-pre-gap{
  width: min(100%, var(--eqp-header-max, var(--eqp-content-max, 980px)));
  margin-left:auto; margin-right:auto; position: relative;
  height: calc(var(--eqp-gap-height, 12px) * var(--eqp-autofit-scale, 1));
}
.eqp-pre-gap .eqp-pressure{ width:100%; }
.eqp-pre-gap .eqp-pressure > span{ background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); }
.eqp-header .eqp-pressure{ display:none !important; }
.eqp-quiz-root .eqp-preparing ~ .eqp-pre-gap{ display:none !important; }
.eqp-quiz-root .eqp-finish ~ .eqp-pre-gap{ display:none !important; }


/* ================================
   JNpatch66 (2025-10-30)
   - Hide/remove pre-header meter during PREPARING and FINISH on all quiz types
   - Reduce paddings: options (-3px TB), non-header buttons (-2px TB)
   ================================ */

/* State-based hiding via root class (added in JS) */
.eqp-quiz-root.state-preparing .eqp-pre-gap,
.eqp-quiz-root.state-finish .eqp-pre-gap{ display: none !important; }

/* Also hide in category wrappers to be safe */
.eqp-cat-quizzes .eqp-pre-gap,
.eqp-cats-mount .eqp-pre-gap{ display: inherit; } /* default render */
.eqp-cat-quizzes.state-preparing .eqp-pre-gap,
.eqp-cat-quizzes.state-finish .eqp-pre-gap,
.eqp-cats-mount.state-preparing .eqp-pre-gap,
.eqp-cats-mount.state-finish .eqp-pre-gap{ display: none !important; }

/* 1) Reduce options/answers vertical padding by 3px (keep LR same) */
.eqp-card .eqp-option,
.eqp-card .eqp-answer,
.eqp-card .eqp-choice{
  padding-top: calc(max(0px, (var(--eqp-opt-pad-t, 10px) - 3px))) !important;
  padding-bottom: calc(max(0px, (var(--eqp-opt-pad-b, 10px) - 3px))) !important;
}

/* Provide defaults if variables don't exist */
:root{
  --eqp-opt-pad-t: 10px;
  --eqp-opt-pad-b: 10px;
}

/* 2) Reduce vertical padding of all buttons EXCEPT header buttons by 2px */
.eqp-card button,
.eqp-finish button,
.eqp-modal button,
.eqp-dialog button{
  padding-top: calc(max(0px, (var(--eqp-btn-pad-t, 10px) - 2px))) !important;
  padding-bottom: calc(max(0px, (var(--eqp-btn-pad-b, 10px) - 2px))) !important;
}

/* Keep header buttons unchanged */
.eqp-header .eqp-controls button{ padding-top: unset !important; padding-bottom: unset !important; }

/* Defaults for button padding variables */
:root{
  --eqp-btn-pad-t: 10px;
  --eqp-btn-pad-b: 10px;
}


/* ================================
   JNpatch67 (2025-10-30)
   - Reduce options/answers box height by 4px (2px top + 2px bottom) without affecting text
   - Modernize buttons in Summary card and Finish screen (retake, download result, take new quiz)
   ================================ */

/* 1) Options/answers: subtract additional 2px from top & bottom (on top of prior trims) */
.eqp-card .eqp-option,
.eqp-card .eqp-answer,
.eqp-card .eqp-choice{
  padding-top: calc(max(0px, (var(--eqp-opt-pad-t, 10px) - 5px))) !important; /* previously -3px, now -5px */
  padding-bottom: calc(max(0px, (var(--eqp-opt-pad-b, 10px) - 5px))) !important;
}

/* 2) Modern buttons for Summary card */
.eqp-summary .eqp-actions .eqp-btn,
.eqp-summary .eqp-btn{
  border-radius: 14px !important;
  border: 1px solid var(--eqp-border, rgba(148,163,184,.35)) !important;
  background: color-mix(in srgb, var(--eqp-btn-bg, #334155) 90%, #ffffff 10%) !important;
  color: var(--eqp-btn-text, #e5e7eb) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.06) inset !important;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease !important;
}

.eqp-summary .eqp-actions .eqp-btn:hover,
.eqp-summary .eqp-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.08) inset;
  filter: brightness(1.03);
}

.eqp-summary .eqp-actions .eqp-btn:active,
.eqp-summary .eqp-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.05) inset;
}

.eqp-summary .eqp-actions .eqp-btn:focus-visible,
.eqp-summary .eqp-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--eqp-accent, #7c5cff), #fff 30%);
  outline-offset: 2px;
}

/* 3) Modern buttons for Finish screen primary actions */
.eqp-finish .eqp-finish-actions .eqp-btn,
.eqp-finish .eqp-actions .eqp-btn,
.eqp-finish .eqp-btn-retake,
.eqp-finish .eqp-btn-download,
.eqp-finish .eqp-take-new{
  min-height: 32px; padding-top: var(--eqp-btn-pad-t, 7px) !important; padding-bottom: var(--eqp-btn-pad-b, 7px) !important; border-radius: 12px !important; border: 1px solid var(--eqp-btn-bd, rgba(148,163,184,.28)) !important; background: var(--eqp-btn-bg, #334155) !important; color: var(--eqp-btn-text, #e5e7eb) !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important; transition: transform .12s ease, filter .2s ease, border-color .2s ease !important; }

.eqp-finish .eqp-finish-actions .eqp-btn:hover,
.eqp-finish .eqp-actions .eqp-btn:hover,
.eqp-finish .eqp-btn-retake:hover,
.eqp-finish .eqp-btn-download:hover,
.eqp-finish .eqp-take-new:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.08) inset;
  filter: brightness(1.03);
}

.eqp-finish .eqp-finish-actions .eqp-btn:active,
.eqp-finish .eqp-actions .eqp-btn:active,
.eqp-finish .eqp-btn-retake:active,
.eqp-finish .eqp-btn-download:active,
.eqp-finish .eqp-take-new:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.05) inset;
}

.eqp-finish .eqp-finish-actions .eqp-btn:focus-visible,
.eqp-finish .eqp-actions .eqp-btn:focus-visible,
.eqp-finish .eqp-btn-retake:focus-visible,
.eqp-finish .eqp-btn-download:focus-visible,
.eqp-finish .eqp-take-new:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--eqp-accent, #7c5cff), #fff 30%);
  outline-offset: 2px;
}


/* ================================
   JNpatch68 (2025-10-30)
   - Options/answers: reduce height by an additional 4px (2px top + 2px bottom) without affecting text
   - Remove full-width strip on preparing/finish by hiding header progress & pre-gap in those states
   ================================ */

/* 1) Options/answers: total trim now 9px vs original var */
.eqp-card .eqp-option,
.eqp-card .eqp-answer,
.eqp-card .eqp-choice{
  padding-top: calc(max(0px, (var(--eqp-opt-pad-t, 10px) - 9px))) !important;
  padding-bottom: calc(max(0px, (var(--eqp-opt-pad-b, 10px) - 9px))) !important;
}

/* 2) Hide progress strip and pre-gap meter while preparing or on finish */
.eqp-quiz-root.state-preparing .eqp-header .eqp-progress,
.eqp-quiz-root.state-finish .eqp-header .eqp-progress{ display:none !important; }

.eqp-quiz-root.state-preparing .eqp-pre-gap,
.eqp-quiz-root.state-finish .eqp-pre-gap{ display:none !important; }

/* Defensive selectors for category layouts where state class may be set on wrapper */
.eqp-cat-quizzes.state-preparing .eqp-header .eqp-progress,
.eqp-cats-mount.state-preparing .eqp-header .eqp-progress,
.eqp-cat-quizzes.state-finish .eqp-header .eqp-progress,
.eqp-cats-mount.state-finish .eqp-header .eqp-progress{ display:none !important; }

.eqp-cat-quizzes.state-preparing .eqp-pre-gap,
.eqp-cats-mount.state-preparing .eqp-pre-gap,
.eqp-cat-quizzes.state-finish .eqp-pre-gap,
.eqp-cats-mount.state-finish .eqp-pre-gap{ display:none !important; }

/* Extra safety: if the state element exists anywhere in root, hide any pre-gap via sibling */
.eqp-quiz-root .eqp-preparing ~ .eqp-pre-gap,
.eqp-quiz-root .eqp-finish ~ .eqp-pre-gap{ display:none !important; }


/* JNpatch67-Scrollbars-Final: ensure precedence over earlier category scrollbar styles */
.eqp-quiz-root .eqp-card,
.eqp-quiz-root .eqp-card *,
.eqp-quiz-root .eqp-finish,
.eqp-quiz-root .eqp-finish *{
  scrollbar-width: thin;
  scrollbar-color: var(--eqp-accent, #6366f1) rgba(127,127,127,0.14);
}
.eqp-quiz-root .eqp-card::-webkit-scrollbar,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}
.eqp-quiz-root .eqp-card::-webkit-scrollbar-track,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar-track,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar-track,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar-track{
  background: rgba(127,127,127,0.10);
  border-radius: 10px;
}
.eqp-quiz-root .eqp-card::-webkit-scrollbar-thumb,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar-thumb,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar-thumb,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--eqp-accent, #6366f1), #fff 8%);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.eqp-quiz-root .eqp-card::-webkit-scrollbar-thumb:hover,
.eqp-quiz-root .eqp-card *::-webkit-scrollbar-thumb:hover,
.eqp-quiz-root .eqp-finish::-webkit-scrollbar-thumb:hover,
.eqp-quiz-root .eqp-finish *::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--eqp-accent, #6366f1), #000 8%);
}


/* JNpatch71: Hard-remove any legacy 'Show/Hide Explanations' UI if injected by stale caches */
.eqp-explain-toggle{ display:none !important; visibility:hidden !important; }
.eqp-header .eqp-explain-toggle{ display:none !important; }


/* ================================
   JNpatch73 (2025-10-30)
   Sleek Finish Screen + Compact Summary Card + Sleeker Buttons
   ================================ */

/* 1) Summary card smaller & centered */
:root{
  --eqp-summary-max: clamp(480px, 86vw, 700px); /* smaller than main card */
  --eqp-summary-pad: clamp(10px, 2.2vw, 14px);
}
.eqp-finish .eqp-summary,
.eqp-finish .eqp-summary-card,
.eqp-finish .eqp-summary-panel{
  width: min(100%, var(--eqp-summary-max));
  margin-left: auto;
  margin-right: auto;
  padding: var(--eqp-summary-pad);
  border-radius: 14px;
  background: color-mix(in srgb, var(--eqp-card, #111827), #fff 4%);
  border: 1px solid var(--eqp-border, rgba(148,163,184,.24));
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}

/* 2) Compact inner spacing & text */
.eqp-finish .eqp-summary h2,
.eqp-finish .eqp-summary h3{ margin: 0 0 .5rem 0; font-weight: 700; font-size: 1.02rem; }
.eqp-finish .eqp-summary p{ margin: .35rem 0; line-height: 1.42; }
.eqp-finish .eqp-summary .eqp-bars{ gap: .4rem; }
.eqp-finish .eqp-summary table{ border-collapse: collapse; }
.eqp-finish .eqp-summary th, .eqp-finish .eqp-summary td{
  padding: .42rem .55rem;
  border-bottom: 1px solid var(--eqp-border, rgba(148,163,184,.18));
}
.eqp-finish .eqp-summary tr:last-child th,
.eqp-finish .eqp-summary tr:last-child td{ border-bottom:0; }

/* 3) Make the overall finish container feel tighter */
.eqp-finish{ padding-top: 8px; }
.eqp-finish .eqp-score{ margin-bottom: .5rem; }
.eqp-finish .eqp-finish-actions{ margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed rgba(148,163,184,.22); background: transparent; }

/* 4) Sleek, modern buttons (not fully flat) with reduced height */
:root{
  --eqp-btn-pad-t: 8px;  /* reduce vertical padding */
  --eqp-btn-pad-b: 8px;
}
.eqp-finish .eqp-finish-actions .eqp-btn,
.eqp-finish .eqp-actions .eqp-btn,
.eqp-finish .eqp-btn-retake,
.eqp-finish .eqp-btn-download,
.eqp-finish .eqp-take-new{
  min-height: 32px; padding-top: var(--eqp-btn-pad-t, 7px) !important; padding-bottom: var(--eqp-btn-pad-b, 7px) !important; border-radius: 12px !important; border: 1px solid var(--eqp-btn-bd, rgba(148,163,184,.28)) !important; background: var(--eqp-btn-bg, #334155) !important; color: var(--eqp-btn-text, #e5e7eb) !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important; transition: transform .12s ease, filter .2s ease, border-color .2s ease !important; }
/* Primary-ish emphasis removed to inherit button colors */

/* Hover/Active states */
.eqp-finish .eqp-finish-actions .eqp-btn:hover,
.eqp-finish .eqp-actions .eqp-btn:hover,
.eqp-finish .eqp-btn-retake:hover,
.eqp-finish .eqp-btn-download:hover,
.eqp-finish .eqp-take-new:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.eqp-finish .eqp-finish-actions .eqp-btn:active,
.eqp-finish .eqp-actions .eqp-btn:active,
.eqp-finish .eqp-btn-retake:active,
.eqp-finish .eqp-btn-download:active,
.eqp-finish .eqp-take-new:active{
  transform: translateY(0);
  filter: brightness(1.0);
}

/* 5) Category finish screens get the same look & width */
.eqp-cat-quizzes .eqp-finish .eqp-summary,
.eqp-cats-mount .eqp-finish .eqp-summary{
  width: min(100%, var(--eqp-summary-max));
  margin-inline: auto;
  border-radius: 14px;
}


/* JNpatch74: Summary even narrower & compact data */
.eqp-finish .eqp-summary{
  font-size: .96em;
}
.eqp-finish .eqp-summary th,
.eqp-finish .eqp-summary td{
  padding: .36rem .5rem;
}
.eqp-finish .eqp-finish-actions{ margin-top: .5rem; padding-top: .5rem; }


/* JNpatch75: Subject chips alignment */
.eqp-topic-row{
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: .5rem .65rem;
}
.eqp-topic-row .eqp-topic-label{ justify-self: start; }
.eqp-topic-row .eqp-chip{ justify-self: start; }
@media (max-width: 640px){
  .eqp-topic-row{ grid-template-columns: 1fr 1fr; }
  .eqp-topic-row .eqp-topic-label{ grid-column: 1 / -1; }
}


/* JNpatch75: Fit explanation without inner scroll by tightening and allowing growth
   IMPORTANT: do NOT use dvh-based min-heights here; it causes mobile "breathing".
   Let parent layout (fit/fullscreen/category shell) control height instead. */
.eqp-card{
  min-height: 0;
  display: flex; flex-direction: column;
}
.eqp-card .eqp-body{ flex: 1 1 auto; display:flex; flex-direction: column; }
.eqp-card .eqp-stem{ margin-bottom: .5rem; }
.eqp-card .eqp-answers{ margin-top: .35rem; }
.eqp-card .eqp-explanation, .eqp-card .eqp-feedback{
  margin-top: .5rem;
  max-height: none !important;
  overflow: visible !important;
}
/* Tighten option paddings slightly */
.eqp-card .eqp-opt{ padding-top: .45rem; padding-bottom: .45rem; }

/* JNpatch76: Iconic buttons spacing */
.eqp-btn-iconic .ico{ display:inline-block; margin-right:.45rem; line-height:0; }


/* ================================
   JNpatch77 (2025-10-31)
   - Exit: history.back() heuristic handled in JS
   - Finish/Summary layout: keep inside card width, single scrollbar at finish level
   ================================ */

/* Keep finish content within card width and centered for both shortcode and category quizzes */
.eqp-quiz-root .eqp-finish{
  width: min(100%, var(--eqp-card-max, 960px));
  margin-inline: auto;
  max-height: calc(var(--eqp-vh, 1vh) * 100);
  overflow: auto;           /* single scrollbar at finish level */
  display: flex;
  flex-direction: column;
  contain: layout paint;    /* avoid footer overlap on some themes */
}
.eqp-cat-quizzes .eqp-finish,
.eqp-cats-mount .eqp-finish{
  width: min(100%, var(--eqp-card-max, 960px));
  margin-inline: auto;
  max-height: calc(var(--eqp-vh, 1vh) * 100);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Prevent inner scroll areas in summary; let finish handle scrolling */
.eqp-finish .eqp-summary,
.eqp-finish .eqp-summary *{
  max-height: none !important;
  overflow: visible !important;
}

/* In finish context, tables shouldn't create their own scrollbars */
.eqp-finish .eqp-summary table{
  display: table !important;
  overflow: visible !important;
  max-width: 100% !important;
}

/* Minor spacing to avoid touching footer edges on tight themes */
.eqp-finish{ padding-bottom: 10px; }


/* ================================
   JNpatch79b (2025-11-04)
   Header bottom padding hard-lock + meter pre-gap reservation
   - Keep header bottom padding static during play & scrolling
   - Reserve space for the timer/meter in a pre-gap to avoid jumps
   ================================ */

/* 1) Always reserve a fixed bottom padding on the header */
.eqp-quiz-root .eqp-header,
.eqp-cat-quizzes .eqp-header,
.eqp-cats-mount .eqp-header{
  --eqp-header-bottom-pad: calc(var(--eqp-pressure-height, 4px) + 6px); /* static; includes meter height */
  padding-bottom: var(--eqp-header-bottom-pad) !important;
}

/* 2) Ensure the space *above* the header matches the meter height so nothing shifts */
.eqp-quiz-root .eqp-pre-gap,
.eqp-cat-quizzes .eqp-pre-gap,
.eqp-cats-mount .eqp-pre-gap{
  height: var(--eqp-pressure-height, 4px) !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Keep the layout space but hide visuals if any theme styles leak in */
  visibility: hidden;
}

/* 3) Do not render any extra mid-gap after the header */
.eqp-quiz-root .eqp-header + .eqp-gap,
.eqp-cat-quizzes .eqp-header + .eqp-gap,
.eqp-cats-mount .eqp-header + .eqp-gap{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* 4) Make sure the meter never pushes the header by accident if it renders inside */
.eqp-quiz-root .eqp-header .eqp-pressure,
.eqp-cat-quizzes .eqp-header .eqp-pressure,
.eqp-cats-mount .eqp-header .eqp-pressure{
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: var(--eqp-pressure-height, 4px) !important;
  margin: 0 !important;
  pointer-events: none;
}

/* 5) As a final guard, clamp header height once it has stabilized */
.eqp-quiz-root .eqp-header,
.eqp-cat-quizzes .eqp-header,
.eqp-cats-mount .eqp-header{
  min-height: auto !important; /* allow initial measure */
}

/* Image above question */
.eqp-stem-media{margin:0 0 .75rem 0}


/* Question image placeholder (16:9) */
.eqp-stem-media{
  margin:0 0 .75rem 0;
}



/* Fade-in animation for question image */
@keyframes eqp-img-fadein{
  0%{opacity:0; transform:scale(1.02);}
  100%{opacity:1; transform:scale(1);}
}


/* Upgrade question image placeholder to show full image (no cropping) for any aspect ratio */
.eqp-stem-media{
  margin:0 0 .75rem 0;
}



/* EQP: adaptive question image container – image defines aspect ratio and fills width */
.eqp-stem-media{
  margin:0 0 .75rem 0;
}



/* EQP: aspect-ratio buckets for question images */
.eqp-stem-media{margin:0 0 .75rem 0;}









/* EQP: aspect-ratio buckets for question images (desktop + mobile unified) */
.eqp-stem-media{
  margin:0 0 .75rem 0;
}
.eqp-stem-media-inner{
  width:100%;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:var(--eqp-card-bg-alt,#f5f5f5);
}

/* Aspect ratios snapped from image natural size */
.eqp-stem-media-inner.ar-1-1{aspect-ratio:1/1;}
.eqp-stem-media-inner.ar-4-3{aspect-ratio:4/3;}
.eqp-stem-media-inner.ar-3-2{aspect-ratio:3/2;}
.eqp-stem-media-inner.ar-16-9{aspect-ratio:16/9;}
.eqp-stem-media-inner.ar-9-16{aspect-ratio:9/16;}
.eqp-stem-media-inner.ar-239-100{aspect-ratio:239/100;}

/* Mobile: tighten bottom gap below tall 9:16 image placeholder */
@media (max-width: 1023px){
  .eqp-stem-media.eqp-stem-media-tall{
    margin: 0 0 .5rem 0;
  }
}


/* Image fills whichever bucket is chosen */
.eqp-stem-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  animation:eqp-img-fadein .35s ease-out forwards;
}


/* JNpatch: Desktop-only question image placeholder uses fixed 16:10 aspect ratio.
   The image is always fully visible (no cropping). Any leftover space is grey. */
@media (min-width: 1024px){
  .eqp-card .eqp-stem-media-inner{
    aspect-ratio: 16/9 !important;
    background: var(--eqp-img-placeholder-bg, #e5e7eb);
  }
  .eqp-card .eqp-stem-image{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}


/* ================================
   JNpatch58 (2025-11-15)
   - Make mobile header controls wrap safely inside header.
   - Align [eqp_categories] quizzes (eqp-cats-mount) with single-category styling.
   - Reserve consistent space for corner share block on all category-based finishes.
   ================================ */

/* 1) On small screens, allow header rows to wrap so buttons never hang below */
@media (max-width: 640px){
  .eqp-quiz-root .eqp-header{
    flex-wrap: wrap;
  }
  .eqp-quiz-root .eqp-header .eqp-controls{
    flex-wrap: wrap;
  }
}

/* 2) Category & categories finish cards share same layout */
.eqp-cats-mount .eqp-finish{
  position: relative;
  gap: 4px;
}

/* Ensure finish content in categories doesn't create inner scroll boxes */
.eqp-cats-mount .eqp-finish [class*="summary"],
.eqp-cats-mount .eqp-finish [class*="detail"],
.eqp-cats-mount .eqp-finish [class*="breakdown"]{
  max-height: none !important;
  overflow: visible !important;
}

/* 3) Corner share for [eqp_categories] (same style as single category) */
.eqp-cats-mount .eqp-share-corner{
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 60;
}
.eqp-cats-mount .eqp-share-corner .eqp-share-title{
  font-size: .86em;
  opacity: .9;
  margin: 0;
}
.eqp-cats-mount .eqp-share-corner .eqp-share-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--eqp-btn-bg, #334155);
  color: var(--eqp-btn-text, #e5e7eb);
  padding: .5rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--eqp-border, rgba(255,255,255,.12));
  text-decoration: none;
  cursor: pointer;
  line-height: 1.1;
  font-size: .92em;
}
.eqp-cats-mount .eqp-share-corner .eqp-share-btn:hover{
  filter: brightness(0.96);
}
.eqp-cats-mount .eqp-share-corner .eqp-share-btn:active{
  filter: brightness(0.92);
}

/* 4) Reserve space on finish body so share corner never overlaps text/treat */
.eqp-cats-mount .eqp-finish{
  padding-right: 190px;
}
@media (max-width: 600px){
  .eqp-cats-mount .eqp-finish{
    padding-right: 150px;
  }
}
@media (max-width: 420px){
  .eqp-cats-mount .eqp-finish{
    padding-right: 126px;
  }
}

/* Override earlier margin-right hack so we only rely on padding-right now */
.eqp-cats-mount .eqp-finish > *:first-child{
  margin-right: 0 !important;
}

/* 5) Collapse any empty helper nodes for [eqp_categories] as well */
.eqp-cats-mount .eqp-finish > :empty,
.eqp-cats-mount .eqp-finish .eqp-share:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* 6) Mirror mobile typography tweaks for [eqp_categories] quizzes */
@media (max-width: 480px){
  .eqp-cats-mount .eqp-header h1,
  .eqp-cats-mount .eqp-header h2,
  .eqp-cats-mount .eqp-header h3{
    font-size: 0.78rem !important;
  }
  .eqp-cats-mount .eqp-question{
    font-size: 0.78rem !important;
  }
  .eqp-cats-mount .eqp-opt{
    font-size: calc(1em + 6px) !important;
  }
}


/* JNpatch61 (2025-11-15, desktop eqp_category header stabilization)
   Let category headers use natural height so they don't visually distort
   when the quiz card grows or shrinks. */
.eqp-cat-quizzes .eqp-header,
.eqp-cats-mount .eqp-header{
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
}


/* JNpatch62 (2025-11-15)
   Make [eqp_categories] quizzes (.eqp-cats-mount) visually and behaviorally
   match single-category [.eqp_category] quizzes (.eqp-cat-quizzes). */
.eqp-cats-mount .eqp-quiz-root {
  min-height: calc((var(--eqp-vh, 1vh) * 100) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  padding: 8px; gap: 6px; overflow: visible;
}

.eqp-cats-mount .eqp-header{ position: relative; z-index: 50; padding: 4px 6px; gap: 4px; line-height: 1.15; }

.eqp-cats-mount .eqp-card{
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 4px 0; border-radius: 14px;
  background-color: var(--eqp-card, #0f172a) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background-image: none !important; opacity:1 !important;
  border: 1px solid var(--eqp-border, rgba(255,255,255,.08));
}


.eqp-cats-mount .eqp-actions,
.eqp-cats-mount .eqp-finish .eqp-finish-actions{
  position: sticky; bottom: 0; z-index: 20;
  background: var(--eqp-card, #0f172a); border-top-left-radius: 10px; border-top-right-radius: 10px;
  padding: 8px; box-shadow: 0 -1px 0 rgba(0,0,0,.12);
}

.eqp-cats-mount .eqp-finish .eqp-finish-actions .eqp-btn,
.eqp-cats-mount .eqp-finish .eqp-finish-actions button{ padding: .48rem .66rem; font-size: .9em; line-height: 1.05; }

/* Explanation panel: bounded scroll if long (same as eqp-cat-quizzes) */
.eqp-cats-mount .eqp-explanation{ max-height: 42vh; overflow-y:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }

/* Finish layout same as single-category quizzes */
.eqp-cats-mount .eqp-finish{ position: relative; gap: 4px; }

.eqp-cats-mount .eqp-finish [class*="summary"],
.eqp-cats-mount .eqp-finish [class*="detail"],
.eqp-cats-mount .eqp-finish [class*="breakdown"]{ max-height:none !important; overflow:visible !important; }

.eqp-cats-mount .eqp-finish h3{ margin: 2px 0 4px !important; }
.eqp-cats-mount .eqp-finish p{ margin: 4px 0 !important; }

/* Corner share styling identical to eqp-cat-quizzes */
.eqp-cats-mount .eqp-share-corner{ position:absolute; top:10px; right:10px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; z-index:60; }
.eqp-cats-mount .eqp-share-corner .eqp-share-title{ font-size:.86em; opacity:.9; margin:0; }
.eqp-cats-mount .eqp-share-corner .eqp-share-btn{ display:inline-flex; align-items:center; gap:6px; padding:.5rem .7rem; border-radius:10px; border:1px solid var(--eqp-border, rgba(255,255,255,.10)); background: var(--eqp-btn-bg, #334155); color: var(--eqp-btn-text, #e5e7eb); text-decoration:none; cursor:pointer; line-height:1.1; font-size:.92em; }


/* JNpatch63 (2025-11-15)
   Ensure [edu_quiz_pro] finish screens also use top-right corner share block,
   consistent with category-based quizzes. */
.eqp-quiz-root .eqp-share-corner{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  z-index:60;
}
.eqp-quiz-root .eqp-share-corner .eqp-share-title{
  font-size:.86em;
  opacity:.9;
  margin:0;
}
.eqp-quiz-root .eqp-share-corner .eqp-share-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.5rem .7rem;
  border-radius:10px;
  border:1px solid var(--eqp-border, rgba(255,255,255,.10));
  text-decoration:none;
  cursor:pointer;
  line-height:1.1;
  font-size:.92em;
}


/* JNpatch64 (2025-11-15)
   Normalize summary card width so [eqp_categories] behaves like [eqp_category]. */
.eqp-quiz-root .eqp-summary{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* JNpatch65 (2025-11-16)
   Unify question image placeholder behavior across all quiz types.
   - Desktop: force a cinematic 1.85:1 aspect ratio for all question images.
   - All devices: show full image (object-fit: contain) and grey out any empty bars. */
.eqp-card .eqp-stem-media-inner{
  background: var(--eqp-img-placeholder-bg, #e5e7eb) !important;
}

@media (min-width: 1024px){
  .eqp-card .eqp-stem-media-inner{
    aspect-ratio: 2.39 / 1 !important;
  }
}

/* Always show the whole image and let the grey placeholder fill the rest */
.eqp-card .eqp-stem-image{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}


/* JNpatch67 (2025-11-16)
   Question meta layout tweaks:
   - Bring quiz title closer to top of the card.
   - Show question count as a circular pill directly under the title,
     before the question text.
*/
.eqp-card{
  padding-top: 0.85rem !important;
}

.eqp-card > .eqp-meta{
  margin-top: 0;
  margin-bottom: 4px;
}

.eqp-card > .eqp-meta .eqp-title{
  margin: 0 0 4px 0;
}

.eqp-card > .eqp-meta .eqp-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  min-height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--eqp-border, rgba(148,163,184,0.7));
  background: rgba(15,23,42,0.26);
  font-weight: 600;
  font-size: .9rem;
  color: var(--eqp-muted);
  margin-top: 2px;
}


/* JNpatch70 (2025-11-16)
   Layout: show question count and question text on the same line,
   then everything else (image, options) flows below via the form. */
.eqp-card > .eqp-meta .eqp-meta-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.eqp-card > .eqp-meta .eqp-meta-row .eqp-stem{
  margin-bottom: 0;
}


/* JNpatch71 (2025-11-16)
   Make the question counter independent from the question text while sharing the same line.
   The counter remains a fixed pill while the question text wraps beside it. */
.eqp-card > .eqp-meta .eqp-meta-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.eqp-card > .eqp-meta .eqp-meta-row .eqp-count{
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: flex-start;
}

.eqp-card > .eqp-meta .eqp-meta-row .eqp-stem{
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}


/* JNpatch72 (2025-11-16)
   Make [eqp_categories] finish screens align like [eqp_category]:
   full-width summary and centered actions. */
.eqp-cats-mount .eqp-finish{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eqp-cats-mount .eqp-finish > *{
  width: 100%;
  max-width: 720px;
}

.eqp-cats-mount .eqp-finish .eqp-summary{
  width: 100%;
}

.eqp-cats-mount .eqp-finish .eqp-finish-actions{
  display: flex;
  justify-content: center;
  gap: 8px;
}


/* JNpatch73 (2025-11-16)
   Center the quiz title with a thin circular outline, and refine the question counter & mobile layout. */

/* Centered title pill with thin outline inheriting text color */
.eqp-card > .eqp-meta .eqp-title{
  text-align: center;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin: 0 auto 4px auto;
}

/* Make question counter container transparent with a circular outline */
.eqp-card > .eqp-meta .eqp-count{
  background: transparent;
  border: 1px solid currentColor;
}

/* On mobile, place question text on the next line after the counter */
@media (max-width: 767px){
  .eqp-card > .eqp-meta .eqp-meta-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .eqp-card > .eqp-meta .eqp-meta-row .eqp-stem{
    width: 100%;
  }
}


/* JNpatch74 (2025-11-16)
   Remove thin outline around the quiz title while keeping it centered. */
.eqp-card > .eqp-meta .eqp-title{
  border: none;
}


/* JNpatch75 (2025-11-16)
   Mobile header refinement: keep header buttons (sound, bg music, quests, etc.)
   on a single row in DOM order, so the background music button stays between
   the sound and quest buttons just like on desktop. */
@media (max-width: 767px){
  .eqp-header{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .eqp-header > .eqp-left,
  .eqp-header > .eqp-right{
    display: flex;
    align-items: center;
    width: 100%;
  }
  .eqp-header > .eqp-right{
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
  }
}


/* JNpatch76 (2025-11-16)
   Realign quiz title to the left on all viewports. */
.eqp-card > .eqp-meta .eqp-title{
  text-align: left;
  display: block;
  margin: 0 0 4px 0;
}


/* JNpatch77 (2025-11-16)
   Mobile header layout:
   - First line: timer + progress bar side-by-side (no wrapping).
   - Second line: pause/play left, sound/music/quest buttons right. */
@media (max-width: 767px){
  .eqp-header{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "eqp-time eqp-progress"
      "eqp-pause eqp-controls";
    column-gap: 6px;
    row-gap: 4px;
    align-items: center;
  }

  .eqp-header > .eqp-left{
    grid-area: eqp-time;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .eqp-header > .eqp-right{
    grid-area: eqp-progress;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Progress bar flexes to consume remaining width beside timer */
  .eqp-header > .eqp-right .eqp-progress{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  /* Pause/Resume container on the left of second line */
  .eqp-header > .eqp-pr{
    grid-area: eqp-pause;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }

  /* Sound / Music / Quests cluster on the right of second line */
  .eqp-header > .eqp-controls{
    grid-area: eqp-controls;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }
}


/* JNpatch78 (2025-11-16)
   Mobile header refinement v2:
   Use flex-wrap instead of grid to keep everything visible while
   enforcing two conceptual lines:
   - Row 1: timer (left) + progress bar (right)
   - Row 2: pause/play (left) + sound/music/quests (right)
*/
@media (max-width: 767px){
  .eqp-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .eqp-header > .eqp-left,
  .eqp-header > .eqp-right,
  .eqp-header > .eqp-pr,
  .eqp-header > .eqp-controls{
    display: flex;
    align-items: center;
  }

  /* Row 1: timer (auto width) on the left */
  .eqp-header > .eqp-left{
    order: 1;
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  /* Row 1: progress bar taking remaining space on the right */
  .eqp-header > .eqp-right{
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  .eqp-header > .eqp-right .eqp-progress{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  /* Row 2: Pause/Resume */
  .eqp-header > .eqp-pr{
    order: 3;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-top: 4px;
  }

  /* Row 2: Sound / Music / Quests */
  .eqp-header > .eqp-controls{
    order: 4;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
  }
}

/* Make the three header controls (sound, music, quests) visually uniform */
.eqp-header .eqp-controls{
  border-radius: 999px;
  overflow: visible;
}

.eqp-header .eqp-controls > *{
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 4px 8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9em;
}

/* Inside the header controls cluster, don't give snd/quests their own solid backgrounds;
   let the container handle the pill styling so all three segments match. */
.eqp-header .eqp-controls .eqp-snd-toggle,
.eqp-header .eqp-controls .eqp-quests-btn{
  background: transparent !important;
}


/* JNpatch81 (2025-11-16)
   Mobile header refinement v4:
   Layout on small screens:
   - Row 1: progress bar spans full width at the top.
   - Row 2: timer (left) + pause/play (next) + sound/music/quests cluster (right).
*/
@media (max-width: 767px){
  .eqp-header{
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "progress progress progress"
      "time pause controls";
    column-gap: 4px;
    row-gap: 4px;
    align-items: center;
  }

  /* Progress bar row at the top */
  .eqp-header > .eqp-right{
    grid-area: progress;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .eqp-header > .eqp-right .eqp-progress{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Second row: timer (left) */
  .eqp-header > .eqp-left{
    grid-area: time;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Second row: pause/play (middle) */
  .eqp-header > .eqp-pr{
    grid-area: pause;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Second row: sound + music + quests (right) */
  .eqp-header > .eqp-controls{
    grid-area: controls;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }
}


/* JNpatch82 (2025-11-16)
   Mobile header refinement v5:
   - Center the top progress bar fully within the header.
   - On mobile, only show pause/resume and the 3-segment controls cluster (sound/music/quest);
     hide any stray standalone music buttons. */
@media (max-width: 767px){
  .eqp-header > .eqp-right{
    justify-content: center;
    width: 100%;
  }
  .eqp-header > .eqp-right .eqp-progress{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* Restrict visible header buttons on mobile to:
     - pause/resume inside .eqp-pr
     - sound/music/quest segments inside .eqp-controls */
  .eqp-header button{
    display: none;
  }
  .eqp-header .eqp-pr .eqp-btn-pause,
  .eqp-header .eqp-pr .eqp-btn-resume,
  .eqp-header .eqp-controls button{
    display: inline-flex;
  }
}


/* JNpatch83 (2025-11-16)
   Mobile header RESET (clean layout):
   - Row 1: progress bar centered, full-width at the top.
   - Row 2: timer + pause/play on the left, 3-button controls pill on the right.
   This overrides previous mobile header tweaks. */
@media (max-width: 767px){
  .eqp-header{
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "progress progress progress"
      "time pause controls";
    column-gap: 4px;
    row-gap: 4px;
    align-items: center;
    padding: 4px 8px;
    box-sizing: border-box;
  }

  /* Row 1: centered progress bar */
  .eqp-header > .eqp-right{
    grid-area: progress;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .eqp-header > .eqp-right .eqp-progress{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* Row 2: timer (left) */
  .eqp-header > .eqp-left{
    grid-area: time;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }

  /* Row 2: pause/play (middle) */
  .eqp-header > .eqp-pr{
    grid-area: pause;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Row 2: sound + music + quests (right) as a pill-shaped cluster */
  .eqp-header > .eqp-controls{
    grid-area: controls;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  /* Re-enable all header buttons on mobile; visual style is controlled
     by the existing .eqp-header .eqp-controls rules for the 3-button cluster
     and by the pause/resume button styles. */
  .eqp-header button{
    display: inline-flex;
  }
}


/* JNpatch78 (2025-11-16)
   Mobile header polish:
   - Center the progress bar at the top of the quiz header
   - Keep timer + pause/play neatly grouped
   - Replace lone mobile music button with the full sound/music/quest cluster
*/
@media (max-width: 767px){

  /* Let helper rows (status + controls) drive layout on mobile */
  .eqp-header{
    display: block;
    width: 100%;
  }

  /* --- Top row: timer + centered progress bar --- */
  .eqp-header-status-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
  }

  /* Progress bar should span full width and stay centered */
  .eqp-header-status-row .eqp-progress,
  .eqp-header-status-row .eqp-progress-bar{
    flex: 1 0 100%;
    max-width: 100%;
    order: 1;
    margin: 0 auto;
  }

  /* Timer / time strip stays as a compact cluster before the bar */
  .eqp-header-status-row .eqp-time,
  .eqp-header-status-row .eqp-timer,
  .eqp-header-status-row .eqp-timer-strip{
    order: 0;
  }

  /* --- Second row: stacked header controls (sound, music, quest) --- */
  .eqp-header-controls-row{
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Use the full row width from the left */
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    flex-wrap: wrap; /* Allow wrapping on very small screens */
  }

  /* When the timer is moved into this row on mobile, keep it leading the cluster */
  .eqp-header-controls-row .eqp-time,
  .eqp-header-controls-row .eqp-timer,
  .eqp-header-controls-row .eqp-timer-strip{
    margin-right: 4px;
  }

  .eqp-header-controls-row .eqp-snd-toggle,
  .eqp-header-controls-row .eqp-bgm-toggle,
  .eqp-header-controls-row .eqp-quests-btn{
    flex: 0 0 auto;
  }

  /* Hide any stray standalone BGM toggle that sits directly in the header
     instead of inside the controls row cluster. The real toggle lives inside
     .eqp-header-controls-row after the sound toggle. */
  .eqp-header > .eqp-bgm-toggle{
    display: none !important;
  }
}


/* ================================
   JNpatch82 (2025-11-17)
   Mobile header cleanup: remove horizontal meter line, tighten bottom edge,
   and use rectangular timer instead of a circular pill.
   ================================ */
@media (max-width: 767px){
  /* Hide the thin pressure/timer strip that appears under the header controls */
  .eqp-quiz-root .eqp-pressure,
  .eqp-quiz-root .eqp-timer-strip{
    display: none !important;
  }

  /* Pull the bottom of the header up a bit and remove any bottom divider line */
  .eqp-quiz-root .eqp-header{
    padding-bottom: .35rem !important;
    border-bottom: none !important;
  }

  /* Rectangular timer chip on mobile (no pill shape) */
  .eqp-quiz-root .eqp-header .eqp-time,
  .eqp-quiz-root .eqp-header .eqp-timer{
    border-radius: 6px !important;
  }
}

/* ================================
   JNpatch83 (2025-11-17)
   Quiz title alignment + slimmer top padding on the card.
   ================================ */
.eqp-card > .eqp-meta .eqp-title{
  text-align: left;
  display: block;
  margin: 0 0 4px 0;
  padding: 2px 0 4px 0;
}


/* ================================
   JNpatch84 (2025-11-17)
   Restore the top pressure meter, remove stray strips on PREPARING/FINISH,
   and nudge the timer slightly to the right on mobile.
   ================================ */

/* 1) Ensure the pre-header pressure meter renders when the quiz is active
      (but still respects data-pressure="off"). */
.eqp-quiz-root:not(.state-preparing):not(.state-finish) .eqp-pre-gap .eqp-pressure{
  display: block !important;
}

/* 2) On PREPARING and FINISH screens, hide any pressure/timer strips entirely
      so no horizontal line appears at the bottom of the viewport. */
.eqp-quiz-root.state-preparing .eqp-pressure,
.eqp-quiz-root.state-finish .eqp-pressure,
.eqp-quiz-root.state-preparing .eqp-timer-strip,
.eqp-quiz-root.state-finish .eqp-timer-strip{
  display: none !important;
}

/* 3) Mobile-only tweaks: keep the timer rectangular (from JNpatch82)
      and nudge it 2px to the right for better spacing. */
@media (max-width: 767px){
  .eqp-quiz-root .eqp-header .eqp-time,
  .eqp-quiz-root .eqp-header .eqp-timer{
    border-radius: 6px !important;
    margin-left: 2px;
  }
}


/* ================================
   JNpatch85 (2025-11-17)
   Final mobile header polish, top pressure meter restore,
   and complete removal of stray bottom strips.
   ================================ */

/* 1) Mobile: nudge timer a bit further right and slim the header bottom */
@media (max-width: 767px){
  .eqp-quiz-root .eqp-header .eqp-time,
  .eqp-quiz-root .eqp-header .eqp-timer{
    margin-left: 3.8px;
  }

  .eqp-quiz-root .eqp-header{
    padding-bottom: 0 !important;
  }
}

/* 2) Active quiz: ensure the pre-header pressure meter is visible at the top */
.eqp-quiz-root:not(.state-preparing):not(.state-finish) .eqp-pre-gap{
  display: block !important;
  visibility: visible !important;
}

.eqp-quiz-root:not(.state-preparing):not(.state-finish) .eqp-pre-gap .eqp-pressure{
  display: block !important;
}

/* 3) Never render a meter strip inside the header itself (avoids bottom lines entirely) */
.eqp-quiz-root .eqp-header .eqp-pressure,
.eqp-cat-quizzes .eqp-header .eqp-pressure,
.eqp-cats-mount .eqp-header .eqp-pressure{
  display: none !important;
}

/* 4) Extra safety: no pressure/timer strips inside PREPARING or FINISH panels */
.eqp-quiz-root .eqp-preparing .eqp-pressure,
.eqp-quiz-root .eqp-preparing .eqp-timer-strip,
.eqp-quiz-root .eqp-finish .eqp-pressure,
.eqp-quiz-root .eqp-finish .eqp-timer-strip{
  display: none !important;
}


/* ================================
   JNpatch87 (2025-11-18)
   Desktop PREPARING/FINISH: fully remove stray bottom meter-like strip,
   and fine-tune mobile header offsets (timer + music button).
   ================================ */

/* 1) Strip any pressure/timer/gap bar from PREPARING and FINISH views entirely
      (both desktop and mobile, safe for all layouts). */
.eqp-quiz-root.state-preparing .eqp-pre-gap,
.eqp-quiz-root.state-finish .eqp-pre-gap,
.eqp-quiz-root.state-preparing .eqp-gap,
.eqp-quiz-root.state-finish .eqp-gap,
.eqp-quiz-root.state-preparing .eqp-pressure,
.eqp-quiz-root.state-finish .eqp-pressure,
.eqp-quiz-root.state-preparing .eqp-timer-strip,
.eqp-quiz-root.state-finish .eqp-timer-strip{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 2) Mobile: nudge timer slightly further right for perfect alignment. */
@media (max-width: 767px){
  .eqp-quiz-root .eqp-header .eqp-time,
  .eqp-quiz-root .eqp-header .eqp-timer{
    margin-left: 4.2px !important;
  }

  /* 3) Mobile: drop the music/BGM toggle by ~0.9px for visual centering
        inside the header controls row cluster. */
  .eqp-header-controls-row .eqp-bgm-toggle{
    position: relative;
    top: 0.9px;
  }
}


/* JN Leaderboard Batch3: modern identity gate styling */
.eqp-identity-card{
  max-width:640px;
  margin:1rem auto 1.5rem;
  border-radius:1.25rem;
  background:linear-gradient(135deg, rgba(15,23,42,0.98), rgba(17,24,39,0.98));
  box-shadow:0 18px 45px rgba(15,23,42,0.55);
  border:1px solid rgba(148,163,184,0.35);
}
.eqp-identity-card .eqp-identity-inner{
  padding:1.25rem 1.5rem 1.35rem;
}
.eqp-identity-header{
  margin-bottom:0.9rem;
}
.eqp-identity-pill{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.1rem 0.6rem;
  border-radius:999px;
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:rgba(59,130,246,0.12);
  color:rgba(191,219,254,0.9);
}
.eqp-identity-title{
  margin:0.4rem 0 0.15rem;
  font-size:1.2rem;
  font-weight:650;
}
.eqp-identity-subtitle{
  margin:0;
  font-size:0.85rem;
  color:rgba(148,163,184,0.9);
  max-width:32rem;
}
.eqp-identity-form{
  margin-top:0.4rem;
}
.eqp-identity-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.9rem 1.1rem;
}
.eqp-field.eqp-field-name,
.eqp-field.eqp-field-email{
  min-width:0;
}
.eqp-field.eqp-field-country{
  grid-column:1 / -1;
}
.eqp-identity-card label{
  display:block;
  font-size:0.8rem;
  font-weight:600;
  margin-bottom:0.25rem;
}
.eqp-identity-input,
.eqp-identity-select{
  width:100%;
  border-radius:0.75rem;
  border:1px solid rgba(51,65,85,0.9);
  background:rgba(15,23,42,0.95);
  padding:0.55rem 0.8rem;
  font-size:0.86rem;
}
.eqp-identity-input::placeholder{
  color:rgba(148,163,184,0.85);
}
.eqp-identity-country-select-wrap{
  position:relative;
}
.eqp-identity-error{
  margin-top:0.5rem;
  font-size:0.78rem;
  color:rgba(248,113,113,0.98);
  min-height:1.1rem;
}
.eqp-identity-actions{
  margin-top:0.8rem;
  display:flex;
  justify-content:flex-end;
}
.eqp-identity-actions .eqp-btn{
  padding-inline:1.4rem;
}

/* Mobile tweaks */
@media (max-width:768px){
  .eqp-identity-card{
    margin:0.4rem auto 1rem;
    border-radius:1rem;
  }
  .eqp-identity-card .eqp-identity-inner{
    padding:0.9rem 0.8rem 1rem;
  }
  .eqp-identity-grid{
    grid-template-columns:1fr;
    gap:0.7rem;
  }
  .eqp-identity-title{
    font-size:1.05rem;
  }
  .eqp-identity-subtitle{
    font-size:0.8rem;
  }
  .eqp-identity-actions{
    justify-content:stretch;
  }
  .eqp-identity-actions .eqp-btn{
    width:100%;
    text-align:center;
  }
}


/* JN Identity Remember/Privacy UI */
.eqp-identity-remember{
  margin-top:0.6rem;
  font-size:0.82rem;
  color:rgba(203,213,225,0.95);
}
.eqp-identity-remember label{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  cursor:pointer;
}
.eqp-identity-remember input[type="checkbox"]{
  accent-color:#22c55e;
}
.eqp-identity-privacy{
  margin-top:0.5rem;
  font-size:0.76rem;
  line-height:1.4;
  color:rgba(148,163,184,0.96);
  max-width:38rem;
}
@media (max-width:768px){
  .eqp-identity-privacy{
    font-size:0.74rem;
  }
}


/* JN Identity Batch3: finish footer / change player link */
.eqp-finish-footer{
  margin-top:0.6rem;
  font-size:0.8rem;
  display:flex;
  justify-content:flex-end;
}
.eqp-finish-footer .eqp-change-player{
  background:none;
  border:none;
  padding:0;
  font-size:0.8rem;
  cursor:pointer;
  text-decoration:underline;
}
.eqp-finish-footer .eqp-change-player:hover{
  text-decoration:none;
}


/* JN Identity Big Phase Batch1: identity actions & guest button */
.eqp-identity-actions{
  margin-top:0.6rem;
  display:flex;
  gap:0.5rem;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.eqp-identity-actions .eqp-btn{
  min-width:7rem;
}
.eqp-identity-actions .eqp-identity-guest{
  background:transparent;
  border:1px solid rgba(148,163,184,0.7);
  color:inherit;
}
.eqp-identity-actions .eqp-identity-guest:hover{
  background:rgba(15,23,42,0.04);
}

@media (max-width:768px){
  .eqp-identity-inner{
    padding-bottom:1.25rem;
  }
  .eqp-identity-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .eqp-identity-actions .eqp-btn{
    width:100%;
  }
}


/* JN Identity Batch4: personalized finish greeting */
.eqp-finish-greeting{
  margin-top:0.4rem;
  font-weight:500;
}
.eqp-finish-greeting:last-of-type{
  margin-bottom:0.1rem;
}

/* JN Batch5B: profile drawer */
.eqp-profile-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:9998;
}

.eqp-profile-overlay.eqp-profile-show{
  opacity:1;
  pointer-events:auto;
}
.eqp-profile-panel{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(.96);
  width:min(360px, 92vw);
  /* Batch 5: use JS-backed visualViewport vars when available so the panel
     never clips on mobile when Chrome/Samsung toolbars show/hide. */
  max-height:min(560px, calc(var(--eqp-vv-h, 100dvh) - 24px));
  background:#ffffff;
  box-shadow:0 18px 40px rgba(15,23,42,.45);
  border-radius:16px;
  opacity:0;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.eqp-profile-panel.eqp-profile-open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, -50%) scale(1);
}

.eqp-root[data-theme="dark"] .eqp-profile-panel{
  background:#020617;
  color:#e5e7eb;
}
.eqp-profile-panel-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  box-sizing:border-box;
}

.eqp-profile-header{
  flex:0 0 auto;
  padding:16px 20px 10px;
  box-sizing:border-box;
  border-bottom:1px solid rgba(148,163,184,.28);
}

.eqp-profile-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom) + var(--eqp-vv-inset-b, 0px));
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.eqp-profile-footer{
  flex:0 0 auto;
  padding:12px 20px 16px;
  box-sizing:border-box;
  border-top:1px solid rgba(148,163,184,.28);
}
.eqp-profile-title{
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:.25rem;
}
.eqp-profile-name{
  font-weight:600;
}
.eqp-profile-info{
  font-size:.875rem;
  opacity:.85;
}


/* === Batch 6: Profile panel polish + always-visible progress card === */
.eqp-profile-panel .eqp-profile-name{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:0.01em;
}
.eqp-profile-panel .eqp-profile-info{
  line-height:1.35;
}

.eqp-profile-panel .eqp-profile-meta-panel{
  margin-top:2px;
  padding:12px 12px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  background: rgba(248,250,252,.7);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.eqp-profile-panel .eqp-profile-progress-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.eqp-profile-panel .eqp-profile-level-label{
  font-weight:800;
  font-size:0.95rem;
}
.eqp-profile-panel .eqp-profile-xptext{
  font-size:0.78rem;
  opacity:0.78;
  white-space:nowrap;
}
.eqp-profile-panel .eqp-profile-xpbar{
  width:100%;
  height:7px;
  border-radius:999px;
  background: rgba(15,23,42,.08);
  overflow:hidden;
}
.eqp-profile-panel .eqp-profile-xpbar-fill{
  height:100%;
  width:0%;
  border-radius:inherit;
  background: color-mix(in srgb,var(--eqp-accent,#7c5cff), white 25%);
}

.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-meta-panel{
  background: rgba(15,23,42,.65);
  border-color: rgba(148,163,184,.28);
}
.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-xpbar{
  background: rgba(255,255,255,.16);
}
.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-xpbar-fill{
  background: rgba(255,255,255,.85);
}

/* Settings cards inside profile panel */
.eqp-profile-panel .eqp-profile-volume-group,
.eqp-profile-panel .eqp-profile-next-mode{
  margin-top:0;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  background: rgba(248,250,252,.55);
}
.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-volume-group,
.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-next-mode{
  background: rgba(15,23,42,.55);
  border-color: rgba(148,163,184,.25);
}
.eqp-profile-panel .eqp-profile-volume-label{
  font-weight:650;
  font-size:0.78rem;
  margin-bottom:0.35rem;
  opacity:0.9;
}
.eqp-profile-panel .eqp-profile-volume-slider{
  width:100%;
  accent-color: var(--eqp-accent,#7c5cff);
}
.eqp-profile-panel .eqp-profile-volume-group.is-muted{
  opacity:0.6;
}

.eqp-profile-panel .eqp-profile-next-mode .eqp-next-mode-pill{
  border:1px solid rgba(148,163,184,.55);
  padding:0.28rem 0.75rem;
  font-size:0.78rem;
  opacity:0.8;
}
.eqp-profile-panel .eqp-profile-next-mode .eqp-next-mode-pill.is-active{
  opacity:1;
}

/* Footer buttons: keep them neat and evenly spaced */
.eqp-profile-panel .eqp-profile-actions{
  gap:10px;
}
.eqp-profile-panel .eqp-profile-actions .eqp-btn{
  flex:1 1 0;
  justify-content:center;
}
.eqp-profile-actions{
  margin-top:0;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
}
.eqp-profile-actions .eqp-btn{
  padding:0.35rem 0.7rem;
  font-size:0.8rem;
  border-radius:0.6rem;
}
@media (max-width:768px){
  .eqp-profile-actions .eqp-btn{
    padding:0.3rem 0.6rem;
    font-size:0.78rem;
  }
}
.eqp-profile-logout{
  flex:0 0 auto;
}
.eqp-profile-close{
  flex:0 0 auto;
  background:transparent;
  border:1px solid rgba(148,163,184,.6);
  padding:.45rem .85rem;
  font-size:.875rem;
  cursor:pointer;
  text-decoration:none;
  border-radius:.75rem;
}
/* JN Batch5C: profile edit + guest actions */
.eqp-profile-edit{
  margin-top:.75rem;
  padding-top:.5rem;
  border-top:1px solid rgba(148,163,184,.35);
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.eqp-profile-edit-btn{
  padding:0;
  font-size:.8rem;
  cursor:pointer;
  text-decoration:underline;
  background:none;
  border:none;
  align-self:flex-start;
}
.eqp-profile-edit-form{
  display:none;
  flex-direction:column;
  gap:.35rem;
}
.eqp-profile-edit-label{
  font-size:.75rem;
  opacity:.8;
}
.eqp-profile-edit-input{
  width:100%;
  padding:.4rem .5rem;
  border-radius:.375rem;
  border:1px solid rgba(148,163,184,.8);
  font-size:.875rem;
  box-sizing:border-box;
}
.eqp-profile-edit-save{
  align-self:flex-start;
  font-size:.8125rem;
  padding:.25rem .75rem;
}
.eqp-profile-guest{
  margin-top:.5rem;
  padding:0;
  font-size:.875rem;
  cursor:pointer;
  text-decoration:underline;
  background:none;
  border:none;
  align-self:flex-start;
}


/* JN Batch7C: modern buttons for profile overlay */
.eqp-profile-panel .eqp-profile-edit-btn.eqp-btn,
.eqp-profile-panel .eqp-profile-close.eqp-btn,
.eqp-profile-panel .eqp-profile-guest.eqp-btn{
  background:transparent !important;
  color:var(--eqp-text, #0f172a) !important;
  border:1px solid rgba(148,163,184,.75) !important;
  box-shadow:none !important;
  font-size:.8125rem;
  padding:.35rem .9rem;
  border-radius:9999px;
  text-decoration:none;
  margin-top:0;
}

.eqp-profile-panel .eqp-profile-edit-btn.eqp-btn{
  margin-bottom:.15rem;
}

.eqp-profile-panel .eqp-profile-guest.eqp-btn{
  margin-top:.5rem;
}

.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-edit-btn.eqp-btn,
.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-close.eqp-btn,
.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-guest.eqp-btn{
  background:rgba(15,23,42,.75) !important;
  color:#e5e7eb !important;
  border-color:rgba(148,163,184,.85) !important;
}

/* === EQP Leaderboard & Top Players base layout (Batch5A) === */
.eqp-leaderboard{
  margin: 1.75rem auto;
  padding: 1.25rem 1.5rem;
  border-radius: 0.9rem;
  box-sizing: border-box;
}
.eqp-leaderboard,
.eqp-top-players{
  color: var(--eqp-lb-text, var(--eqp-text));
}
.eqp-leaderboard > h3{
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.eqp-leaderboard-filter{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.eqp-leaderboard-filter select{
  min-width: 9rem;
}
.eqp-leaderboard-filter .eqp-lb-minq{
  font-size: 0.8rem;
  opacity: 0.85;
}
.eqp-leaderboard-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  margin: 0 0 1.25rem;
}
.eqp-leaderboard-table thead tr{
  background: transparent;
}
.eqp-leaderboard-table thead th{
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
  text-align: left;
  border-bottom: 1px solid rgba(148,163,184,0.4);
}
.eqp-leaderboard-table thead th.eqp-lb-rank{
  width: 3rem;
  text-align: center;
}
.eqp-leaderboard-table thead th.eqp-lb-score{
  text-align: right;
}
.eqp-leaderboard-table tbody tr{
  background: rgba(15,23,42,0.9);
  box-shadow: 0 10px 24px rgba(15,23,42,0.55);
}
.eqp-leaderboard-table tbody td{
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  border-top: 1px solid rgba(30,64,175,0.35);
  border-bottom: 1px solid rgba(15,23,42,0.75);
}
.eqp-leaderboard-table tbody td.eqp-lb-rank{
  font-weight: 600;
  text-align: center;
}
.eqp-leaderboard-table tbody td.eqp-lb-score{
  text-align: right;
  white-space: nowrap;
}
.eqp-leaderboard-pagination{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.86rem;
}
.eqp-leaderboard-pagination .eqp-lb-pages a,
.eqp-leaderboard-pagination .eqp-lb-pages span{
  margin: 0 0.15rem;
}
.eqp-leaderboard-pagination .eqp-lb-prev.disabled,
.eqp-leaderboard-pagination .eqp-lb-next.disabled{
  opacity: 0.5;
}
.eqp-top-players-table td:last-child{
  white-space: nowrap;
}
@media (max-width: 768px){
  .eqp-leaderboard{
    padding: 1rem 0.9rem;
    border-radius: 0.75rem;
  }
  .eqp-leaderboard-table thead{
    display: table-header-group;
  }
  .eqp-leaderboard-table tbody td{
    font-size: 0.85rem;
  }
}

/* === EQP Leaderboard & Top Players advanced polish (Batch5B) === */

/* Rank badge */
.eqp-lb-rank-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  padding:0 0.2rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.85rem;
  background:linear-gradient(135deg, var(--eqp-lb-top-spot, rgba(59,130,246,1)), var(--eqp-lb-top-spot, rgba(56,189,248,1)));
  color:#f9fafb;
  box-shadow:0 8px 18px rgba(37,99,235,0.60);
}
.eqp-leaderboard-table tbody tr:first-child .eqp-lb-rank-badge{
  transform:scale(1.05);
}

/* Hover effect on leaderboard rows */
.eqp-leaderboard-table tbody tr{
  transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.eqp-leaderboard-table tbody tr:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,0.75);
}

/* Top players: let rank 1 inherit the same configured row color as leaderboard rank 1 */
.eqp-top-players .eqp-leaderboard-table tbody tr:first-child{
  background:var(--eqp-rank1-bg, rgba(250,204,21,0.14));
  box-shadow:0 18px 40px rgba(15,23,42,0.22);
}
.eqp-top-players .eqp-leaderboard-table tbody tr:first-child td{
  border-top-color:rgba(148,163,184,0.32);
  border-bottom-color:rgba(148,163,184,0.28);
}

/* Mobile responsiveness: keep key columns, hide secondary ones */
@media (max-width: 640px){
  .eqp-leaderboard-table thead th.eqp-lb-country,
  .eqp-leaderboard-table tbody td:nth-child(3){
    display:none;
  }
  /* For leaderboards where there are more than 4 cols, prefer showing rank, name, main score */
  .eqp-leaderboard-table thead th.eqp-lb-qs,
  .eqp-leaderboard-table tbody td:nth-child(5){
    display:none;
  }
  .eqp-leaderboard-table tbody td{
    font-size:0.82rem;
  }
}


/* JN Phase2 Batch3: align profile panel to top-right instead of center */
.eqp-profile-panel{
  top:16px;
  right:16px;
  left:auto;
  bottom:auto;
  transform:translateY(0) scale(.96);
}
.eqp-profile-panel.eqp-profile-open{
  transform:translateY(0) scale(1);
}

/* JN Phase2 Batch3: subtle link style for "Not you? Change player" */
.eqp-finish-footer .eqp-change-player-link{
  display:inline-block;
  margin-left:0.75rem;
  font-size:0.9rem;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  text-transform:none;
  color:inherit;
  opacity:0.9;
}
.eqp-finish-footer .eqp-change-player-link:hover{
  text-decoration:none;
  opacity:1;
}


/* Phase2 Batch6A – Summary overlay shell */
.eqp-overlay-summary{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2147483640;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.eqp-overlay-summary.eqp-overlay-open{
  opacity:1;
  pointer-events:auto;
}
.eqp-overlay-summary .eqp-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.78);
}
.eqp-overlay-summary .eqp-overlay-card.eqp-summary-card{
  position:relative;
  max-width:min(960px,96vw);
  max-height:min(560px,90vh);
  border-radius:18px;
  padding:1.2rem 1.25rem 1.25rem;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.eqp-overlay-summary .eqp-summary-body{
  margin-top:.75rem;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.eqp-overlay-summary .eqp-dash{
  margin-top:0;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.eqp-overlay-summary .eqp-summary-close{
  position:absolute;
  top:10px;
  right:10px;
  border:none;
  background:transparent;
  color:inherit;
  font-size:1.1rem;
  cursor:pointer;
  z-index:2;
}

@media (max-width:768px){
  .eqp-overlay-summary .eqp-overlay-card.eqp-summary-card{
    width:96vw;
    max-height:88vh;
    padding:1.1rem 1rem;
  }
}



/* NextPhase Batch2 – desktop/tablet header sound & quests buttons use main button colors */
@media (min-width: 768px){
  .eqp-header .eqp-snd-toggle,
  .eqp-header .eqp-quests-btn,
  .eqp-header a.eqp-snd-toggle,
  .eqp-header a.eqp-quests-btn{
    background: var(--eqp-btn-bg, var(--eqp-ctl-bg, #2563eb));
    color: var(--eqp-btn-text, #ffffff);
    border-color: var(--eqp-btn-bd, rgba(0,0,0,.12));
  }
}

/* NextPhase Batch2 – flatten question count pill vertically */
.eqp-card > .eqp-meta .eqp-count{
  min-height: 1.6rem;
}


/* JN Batch6B: ensure profile overlay & panel sit above other overlays and remain clickable */
.eqp-quiz-root .eqp-header{
  pointer-events:auto;
}

/* Lift profile overlay/panel above quests & summary overlays when active */
.eqp-profile-overlay{
  z-index:2147483645;
}

.eqp-profile-panel{
  z-index:2147483647;
}

/* JN Batch7B: responsive polish for profile actions on small screens */
@media (max-width: 480px){
  .eqp-profile-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:.4rem;
  }
  .eqp-profile-logout,
  .eqp-profile-close{
    flex:0 0 auto;
  }
}

/* NextPhase Batch2: overlay safety - reaffirm non-blocking defaults */
.eqp-overlay-summary{
  pointer-events:none;
}
.eqp-paused-overlay{
  pointer-events:none;
}

/* NextPhase Batch5: desktop/tablet header sound & quest buttons use EQP button colors */
@media (min-width: 641px){
  .eqp-header .eqp-snd-toggle,
  .eqp-header .eqp-quests-btn{
    background: var(--eqp-btn_bg, var(--eqp-btn-bg, #334155)) !important;
    color: var(--eqp-btn_text, var(--eqp-btn-text, #e5e7eb)) !important;
    border-color: var(--eqp-btn_border, transparent) !important;
  }
}

/* NextPhase Batch5B: strengthen desktop/tablet sound & quest button theming */
@media (min-width: 641px){
  .eqp-quiz-root .eqp-header .eqp-snd-toggle,
  .eqp-quiz-root .eqp-header .eqp-quests-btn,
  .eqp-hub-root .eqp-header .eqp-snd-toggle,
  .eqp-hub-root .eqp-header .eqp-quests-btn,
  .eqp-quiz-root .eqp-controls .eqp-snd-toggle,
  .eqp-quiz-root .eqp-controls .eqp-quests-btn,
  .eqp-hub-root .eqp-controls .eqp-snd-toggle,
  .eqp-hub-root .eqp-controls .eqp-quests-btn{
    background: var(--eqp-btn_bg, var(--eqp-btn-bg, #334155)) !important;
    color: var(--eqp-btn_text, var(--eqp-btn-text, #e5e7eb)) !important;
    border-color: var(--eqp-btn_border, transparent) !important;
  }
}


/* === EQP Game Mode skins – Batch 1 (visual-only) === */
.eqp-quiz-root.eqp-game-mode,
.eqp-hub-root.eqp-game-mode {
  position: relative;
}

.eqp-quiz-root.eqp-game-mode .eqp-header,
.eqp-hub-root.eqp-game-mode .eqp-header {
  transition: box-shadow 200ms ease, transform 200ms ease;
  box-shadow: 0 12px 35px rgba(15,23,42,0.65);
}

.eqp-quiz-root.eqp-game-mode .eqp-card,
.eqp-hub-root.eqp-game-mode .eqp-card {
  transition: box-shadow 200ms ease, transform 200ms ease;
  box-shadow: 0 18px 45px rgba(15,23,42,0.75);
}

/* Kids – Space Adventure */
.eqp-quiz-root.eqp-game-mode.eqp-skin-kids_space .eqp-header,
.eqp-hub-root.eqp-game-mode.eqp-skin-kids_space .eqp-header {
  background-image: radial-gradient(circle at 0% 0%, #22d3ee 0, transparent 50%),
                    radial-gradient(circle at 100% 0%, #a78bfa 0, transparent 50%),
                    linear-gradient(135deg, #020617 0%, #0f172a 40%, #1e293b 100%);
}

/* Kids – Jungle Safari */
.eqp-quiz-root.eqp-game-mode.eqp-skin-kids_jungle .eqp-header,
.eqp-hub-root.eqp-game-mode.eqp-skin-kids_jungle .eqp-header {
  background-image: radial-gradient(circle at 0% 0%, #22c55e 0, transparent 50%),
                    radial-gradient(circle at 100% 0%, #a3e635 0, transparent 50%),
                    linear-gradient(135deg, #022c22 0%, #064e3b 40%, #022c22 100%);
}

/* Neon Night */
.eqp-quiz-root.eqp-game-mode.eqp-skin-neon_night .eqp-header,
.eqp-hub-root.eqp-game-mode.eqp-skin-neon_night .eqp-header {
  background-image: radial-gradient(circle at 0% 0%, #f97316 0, transparent 50%),
                    radial-gradient(circle at 100% 0%, #22d3ee 0, transparent 50%),
                    linear-gradient(135deg, #020617 0%, #111827 40%, #020617 100%);
}

/* Slight hover lift for the main card in game mode */
.eqp-quiz-root.eqp-game-mode .eqp-card:hover,
.eqp-hub-root.eqp-game-mode .eqp-card:hover {
  transform: translateY(-2px);
}

/* === Batch2: Streak HUD & micro-feedback (game mode only) === */

.eqp-quiz-root.eqp-game-mode .eqp-header .eqp-left{
  display:flex;
  align-items:center;
  gap:0.35rem;
}

.eqp-quiz-root.eqp-game-mode .eqp-header .eqp-streak{
  display:inline-flex;
  align-items:center;
  margin-left:0.35rem;
  padding:0.1rem 0.45rem;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:600;
  background:rgba(15,23,42,0.88);
  color:#facc15;
  box-shadow:0 0 0 1px rgba(148,163,184,0.55);
  opacity:0;
  transform:translateY(0);
  transition:opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.eqp-quiz-root.eqp-game-mode .eqp-header .eqp-streak-icon{
  margin-right:0.25rem;
  font-size:0.85rem;
}

.eqp-quiz-root.eqp-game-mode .eqp-header .eqp-streak-label{
  white-space:nowrap;
}

.eqp-quiz-root.eqp-game-mode .eqp-header .eqp-streak.eqp-streak-active{
  opacity:1;
}

.eqp-quiz-root.eqp-game-mode .eqp-header .eqp-streak.eqp-streak-broken{
  animation:eqp-streak-shake 0.4s ease;
}

@keyframes eqp-streak-shake{
  0%{ transform:translateY(0); }
  25%{ transform:translateY(-1px); }
  50%{ transform:translateY(1px); }
  75%{ transform:translateY(-1px); }
  100%{ transform:translateY(0); }
}

/* Micro feedback bubbles */
.eqp-quiz-root.eqp-game-mode .eqp-feedback-zone{
  position:absolute;
  left:50%;
  bottom:0.85rem;
  transform:translateX(-50%);
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.25rem;
  z-index:40;
}

.eqp-quiz-root.eqp-game-mode .eqp-feedback-msg{
  padding:0.25rem 0.7rem;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:600;
  background:rgba(15,23,42,0.94);
  color:#e5e7eb;
  box-shadow:0 4px 20px rgba(15,23,42,0.75);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 160ms ease, transform 160ms ease;
}

.eqp-quiz-root.eqp-game-mode .eqp-feedback-msg.show{
  opacity:1;
  transform:translateY(0);
}

.eqp-quiz-root.eqp-game-mode .eqp-feedback-msg.eqp-feedback-ok{
  color:#bbf7d0;
}

.eqp-quiz-root.eqp-game-mode .eqp-feedback-msg.eqp-feedback-bad{
  color:#fecaca;
}


/* ================================
   JNpatch90 (Batch 2A, 2025-11-23)
   Game mode header layout prep:
   - Reserve clear zones for timer + streak (left)
   - Progress bar / future XP strip (right)
   - Keep room on the right edge for future avatar/profile chip
   - Ensure no overlap / overflow on mobile
   ================================ */

/* Desktop / tablet: horizontal header with left (timer+streak)
   and right (progress + controls). */
@media (min-width: 768px){
  .eqp-quiz-root.eqp-game-mode .eqp-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .eqp-quiz-root.eqp-game-mode .eqp-header .eqp-left{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem; /* timer + streak + future avatar if desired */
    flex: 0 0 auto;
  }

  .eqp-quiz-root.eqp-game-mode .eqp-header .eqp-right{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Progress bar reserved as a compact strip on the right, with room
     for header controls before/after it. */
  .eqp-quiz-root.eqp-game-mode .eqp-header .eqp-progress{
    flex: 0 0 min(240px, 45%);
    max-width: 260px;
    min-width: 120px;
    margin: 0;
  }
}

/* Mobile: stack header into two logical rows
   - Row 1: timer + streak (left aligned)
   - Row 2: progress bar + controls (no wrapping chaos) */
@media (max-width: 767px){
  .eqp-quiz-root.eqp-game-mode .eqp-header{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
  }

  .eqp-quiz-root.eqp-game-mode .eqp-header > .eqp-left{
    order: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
  }

  .eqp-quiz-root.eqp-game-mode .eqp-header > .eqp-right{
    order: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    flex-wrap: nowrap;
  }

  /* Progress bar stretches across row 2, with buttons held tightly
     on one side. This gives a clean lane for future XP bar visuals. */
  .eqp-quiz-root.eqp-game-mode .eqp-header .eqp-progress{
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
}

/* === JN Batch2B: Intro countdown overlay for Game Mode === */
.eqp-quiz-root.eqp-game-mode{
  position: relative;
}

.eqp-quiz-root.eqp-game-mode .eqp-countdown-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 10% 0%, rgba(56,189,248,0.12) 0, transparent 50%),
              radial-gradient(circle at 90% 100%, rgba(244,114,182,0.16) 0, transparent 55%),
              rgba(15,23,42,0.92);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 180ms ease-out, transform 220ms ease-out;
  z-index: 60;
}

.eqp-quiz-root.eqp-game-mode .eqp-countdown-overlay.eqp-countdown-visible{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.eqp-quiz-root.eqp-game-mode .eqp-countdown-bubble{
  min-width: 5rem;
  min-height: 5rem;
  padding: 1.5rem 2.5rem;
  border-radius: 999px;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: #020617;
  color: #e5e7eb;
  box-shadow: 0 20px 60px rgba(15,23,42,0.9);
  text-align: center;
  opacity: 0;
  transform: scale(0.82);
}

.eqp-quiz-root.eqp-game-mode .eqp-countdown-bubble.eqp-countdown-step{
  opacity: 1;
  transform: scale(1);
  transition: opacity 170ms ease-out, transform 220ms ease-out;
}

/* === EQP Batch 4B – Quests panel visual polish & kids skins (JN) === */

.eqp-quests-panel {
  max-width: 340px;
  width: 90vw;
  max-height: min(72vh, calc(100vh - 120px));
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(14px);
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.eqp-quests-head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.45);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--eqp-muted, #cbd5f5);
}

.eqp-quests-head .eqp-quests-close {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eqp-quests-list {
  padding: 10px 14px 14px 14px;
  margin: 0;
  list-style: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.eqp-quests-list li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), rgba(15, 23, 42, 0.95));
}

.eqp-quests-list li span {
  font-weight: 600;
  font-size: 13px;
  color: var(--eqp-text, #e5e7eb);
}

.eqp-quests-list li small {
  grid-column: 1 / 2;
  font-size: 11px;
  opacity: .85;
  color: var(--eqp-muted, #94a3b8);
}

.eqp-quests-list li .badge {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(15, 23, 42, 0.75);
  color: var(--eqp-muted, #cbd5f5);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.eqp-quests-list li.done {
  border-color: rgba(34, 197, 94, 0.75);
  background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.28), rgba(15, 23, 42, 0.98));
}

.eqp-quests-list li.done .badge {
  background: rgba(34, 197, 94, 0.15);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.8);
}

/* Compact layout for small screens */
@media (max-width: 640px) {
  .eqp-quests-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    border-radius: 18px;
  }
}

/* Kids – Space Adventure skin (brighter, spacey) */
.eqp-game-mode.eqp-skin-kids_space .eqp-quests-panel {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.96));
  border-color: rgba(94, 234, 212, 0.7);
  box-shadow: 0 22px 50px rgba(6, 182, 212, 0.5);
}

.eqp-game-mode.eqp-skin-kids_space .eqp-quests-head {
  color: #e0f2fe;
  border-bottom-color: rgba(56, 189, 248, 0.6);
}

.eqp-game-mode.eqp-skin-kids_space .eqp-quests-list li {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), rgba(15, 23, 42, 0.98));
}

.eqp-game-mode.eqp-skin-kids_space .eqp-quests-list li .badge {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.7);
  color: #e0f2fe;
}

/* Kids – Jungle Safari skin (greens & warm accents) */
.eqp-game-mode.eqp-skin-kids_jungle .eqp-quests-panel {
  background: radial-gradient(circle at top, rgba(22, 163, 74, 0.2), rgba(15, 23, 42, 0.96));
  border-color: rgba(74, 222, 128, 0.7);
  box-shadow: 0 22px 50px rgba(21, 128, 61, 0.55);
}

.eqp-game-mode.eqp-skin-kids_jungle .eqp-quests-head {
  color: #bbf7d0;
  border-bottom-color: rgba(74, 222, 128, 0.7);
}

.eqp-game-mode.eqp-skin-kids_jungle .eqp-quests-list li {
  background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.98));
}

.eqp-game-mode.eqp-skin-kids_jungle .eqp-quests-list li .badge {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.85);
  color: #bbf7d0;
}

/* Batch 6B2a – header level label */
.eqp-header .eqp-profile-level-label{
  font-size: 0.75rem;
  opacity: 0.9;
  margin-right: 4px;
  white-space: nowrap;
}

/* Batch 6B2b – header XP bar */
.eqp-header .eqp-profile-meta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.eqp-header .eqp-profile-xpbar{
  position: relative;
  width: 56px;
  max-width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}

.eqp-header .eqp-profile-xpbar-fill{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: rgba(255,255,255,0.85);
}

/* Batch 6B3 – XP chip theming & mobile refinements */

/* Slightly more playful / vivid XP bar colors for kids game skins */
.eqp-game-mode.eqp-skin-kids_space .eqp-header .eqp-profile-xpbar-fill{
  background: linear-gradient(90deg, rgba(96,165,250,.95), rgba(244,114,182,.95));
}
.eqp-game-mode.eqp-skin-kids_jungle .eqp-header .eqp-profile-xpbar-fill{
  background: linear-gradient(90deg, rgba(52,211,153,.95), rgba(251,191,36,.95));
}

/* Make sure classic / non-game mode stays subtle (keep base colors, just ensure no oversaturation) */
.eqp-root:not(.eqp-game-mode) .eqp-header .eqp-profile-xpbar{
  background: rgba(255,255,255,0.18);
}
.eqp-root:not(.eqp-game-mode) .eqp-header .eqp-profile-xpbar-fill{
  background: rgba(255,255,255,0.8);
}

/* Mobile layout refinement: keep chip compact beside controls */
@media (max-width: 480px){
  .eqp-header .eqp-profile-meta{
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .eqp-header .eqp-profile-xpbar{
    width: 48px;
  }
}

/* Batch 6C1 – XP summary on finish card */
.eqp-finish .eqp-xp-summary,
.eqp-finish-card .eqp-xp-summary{
  margin-top: 8px;
  font-size: 0.85rem;
}

/* Batch 6C2a – Level-up badge on finish card */
.eqp-finish .eqp-xp-levelup,
.eqp-finish-card .eqp-xp-levelup{
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Batch 6C2b – Level-up badge micro-animation */
.eqp-finish .eqp-xp-levelup.is-active,
.eqp-finish-card .eqp-xp-levelup.is-active{
  animation: eqpLevelUpPop 0.35s ease-out;
}

@keyframes eqpLevelUpPop{
  0%{
    transform: scale(0.9);
    opacity: 0;
  }
  60%{
    transform: scale(1.05);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}



/* JN Batch3: Desktop two-column layout for answer options */
@media (min-width: 1024px){
  .eqp-quiz-root .eqp-card .eqp-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:auto;
    column-gap:18px;
    row-gap:8px;
  }
  .eqp-quiz-root .eqp-card .eqp-form .eqp-stem-media{
    grid-column:1 / -1;
  }
  .eqp-quiz-root .eqp-card .eqp-opt{
    margin-bottom:0;
  }
}

/* JN Batch4: actions row for submit/next buttons */
.eqp-form .eqp-actions{
  display:flex;
  justify-content:flex-end;
  gap:0.5rem;
  margin-top:1rem;
}

.eqp-form .eqp-actions .eqp-btn-next{
  /* inherits base .eqp-btn styles; customize if needed */
}

@media (max-width: 640px){
  .eqp-form .eqp-actions{
    flex-wrap:wrap;
  }
}

/* JN Batch5: widen quiz header for category/hub mounts */
.eqp-cats-mount .eqp-quiz-root .eqp-header,
.eqp-cat-quizzes .eqp-quiz-root .eqp-header{
  width:100%;
  max-width:none;
}

.eqp-cats-mount .eqp-quiz-root,
.eqp-cat-quizzes .eqp-quiz-root{
  width:100%;
}


@media (max-width:980px){
  /* Force-hide header-level Auto/Manual toggle on small screens; profile popup hosts the control instead */
  .eqp-header .eqp-next-mode-toggle{
    display:none !important;
  }
}


/* JN Batch5H: profile-level volume sliders */
.eqp-profile-volume-group{
  margin-top:0.75rem;
}

.eqp-profile-volume-label{
  font-size:0.8rem;
  opacity:0.85;
  margin-bottom:0.15rem;
}

.eqp-profile-volume-slider{
  width:100%;
}


/* Phase UI — Explanation sheet/drawer (on-demand, saves vertical space) */

/* Compact feedback bar (single line) */
.eqp-feedback{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--eqp-border, rgba(255,255,255,.14));
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 88%, transparent);
}
.eqp-feedback.is-empty{ display:none; }
.eqp-feedback.ok{ border-color: rgba(34,197,94,.55); }
.eqp-feedback.wrong{ border-color: rgba(239,68,68,.55); }
.eqp-feedback.info{ border-color: rgba(59,130,246,.40); }

.eqp-fbline{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eqp-fb-pill{
  display:inline-flex;
  align-items:center;
  padding: .22rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--eqp-border, rgba(255,255,255,.14));
  font-weight: 800;
  font-size: .86em;
  line-height: 1;
}
.eqp-fb-pill.ok{ background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.55); }
.eqp-fb-pill.wrong{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.55); }
.eqp-fb-pill.info{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.40); }
body.eqp-modal-lock{ overflow:hidden !important; }

.eqp-exp-actions{ margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }
.eqp-expl-chip{
  appearance:none; border:1px solid var(--eqp-border, rgba(255,255,255,.16));
  background: rgba(15,23,42,.55);
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card,#0f172a)) 70%, transparent);
  color: var(--eqp-text, #e5e7eb);
  border-radius: 999px;
  padding: .38rem .62rem;
  font-size: .86em;
  line-height: 1;
  cursor: pointer;
}
.eqp-expl-chip:hover{ filter: brightness(1.05); }

.eqp-expl-overlay{
  position: fixed; inset: 0;
  z-index: 1000002;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: stretch;
  justify-content: flex-end;
}
.eqp-expl-overlay.is-open{ display:flex; }

.eqp-expl-panel{
  width: min(460px, 42vw);
  height: 100%;
  background: var(--eqp-card-solid, var(--eqp-card, #0f172a));
  color: var(--eqp-text, #e5e7eb);
  border-left: 1px solid var(--eqp-border, rgba(255,255,255,.14));
  box-shadow: -12px 0 30px rgba(0,0,0,.25);
  display:flex;
  flex-direction: column;
}
.eqp-expl-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--eqp-border, rgba(255,255,255,.14));
}
.eqp-expl-title{ font-weight: 700; letter-spacing: .2px; }
.eqp-expl-close{
  appearance:none; border:1px solid var(--eqp-border, rgba(255,255,255,.16));
  background: transparent;
  color: var(--eqp-text, #e5e7eb);
  border-radius: 10px;
  padding: .3rem .45rem;
  cursor:pointer;
}
.eqp-expl-body{
  padding: 12px 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.eqp-expl-body *{ max-width: 100%; }
.eqp-expl-body img{ max-width: 100%; height: auto; border-radius: 10px; }

@media (max-width: 768px){
  .eqp-expl-overlay{ align-items:flex-end; justify-content:center; }
  .eqp-expl-panel{
    width: 100%;
    height: min(82vh, 86dvh);
    border-left: none;
    border-top: 1px solid var(--eqp-border, rgba(255,255,255,.14));
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 34px rgba(0,0,0,.35);
  }
}

/* Image viewer for explanation media */
.eqp-zoomable{ cursor: zoom-in; }
.eqp-img-overlay{
  position: fixed; inset: 0;
  z-index: 1000003;
  background: rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 12px;
}
.eqp-img-overlay.is-open{ display:flex; }
.eqp-img-shell{
  position: relative;
  max-width: min(980px, 96vw);
  max-height: min(92vh, 92dvh);
}
.eqp-img-full{
  width: 100%;
  height: auto;
  max-height: min(92vh, 92dvh);
  object-fit: contain;
  border-radius: 14px;
  display:block;
}
.eqp-img-close{
  position:absolute; top: -10px; right: -10px;
  appearance:none;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 12px;
  padding: .35rem .5rem;
  cursor:pointer;
}




/* =========================================================
   Batch A — Compact header redesign
   Goal: More vertical space for question/options on all screens.
   ========================================================= */
.eqp-header.eqp-header--compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  margin:0 0 10px;
}
.eqp-header.eqp-header--compact .eqp-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
}
.eqp-header.eqp-header--compact .eqp-q,
.eqp-header.eqp-header--compact .eqp-time{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(148,163,184,.18);
  color: var(--eqp-text);
  white-space:nowrap;
}
.eqp-header.eqp-header--compact .eqp-right{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.eqp-header.eqp-header--compact .eqp-progress{
  width:auto;
  flex:1 1 180px;
  max-width:240px;
  height:6px;
  border-radius:999px;
  background: rgba(148,163,184,.22);
}
.eqp-header.eqp-header--compact .eqp-progress>span{
  border-radius:999px;
}
.eqp-header.eqp-header--compact .eqp-hdr-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* Batch 4: reserve header action space to prevent mobile layout shift */
.eqp-header.eqp-header--compact .eqp-hdr-actions{
  max-width:100%;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.eqp-header.eqp-header--compact .eqp-hdr-ph-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.eqp-header.eqp-header--compact .eqp-hdr-ph{
  display:inline-block;
  width:30px;
  height:30px;
  border-radius:999px;
  background: rgba(148,163,184,.18);
  visibility:hidden;
  pointer-events:none;
}

.eqp-header.eqp-header--compact .eqp-controls,
.eqp-header.eqp-header--compact .eqp-profile,
.eqp-header.eqp-header--compact .eqp-pr{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Compact buttons in header */
.eqp-header.eqp-header--compact .eqp-btn,
.eqp-header.eqp-header--compact .eqp-snd-toggle,
.eqp-header.eqp-header--compact .eqp-fs-toggle,
.eqp-header.eqp-header--compact .eqp-density-toggle,
.eqp-header.eqp-header--compact .eqp-quests-btn,
.eqp-header.eqp-header--compact .eqp-profile-btn,
.eqp-header.eqp-header--compact .eqp-btn-pause,
.eqp-header.eqp-header--compact .eqp-btn-resume{
  height:34px;
  min-height:34px;
  padding:0 10px;
  border-radius:12px;
  font-size:13px;
  line-height:1;
}
.eqp-header.eqp-header--compact .eqp-snd-toggle,
.eqp-header.eqp-header--compact .eqp-fs-toggle,
.eqp-header.eqp-header--compact .eqp-density-toggle,
.eqp-header.eqp-header--compact .eqp-profile-btn{
  width:34px;
  min-width:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.eqp-header.eqp-header--compact .eqp-quests-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* Make the header-level next-mode toggle compact */
.eqp-header.eqp-header--compact .eqp-next-mode-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
}
.eqp-header.eqp-header--compact .eqp-next-mode-label{
  font-size:12px;
  opacity:.85;
}
.eqp-header.eqp-header--compact .eqp-next-mode-pill{
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
}

/* Profile meta in header: keep it subtle */
.eqp-header.eqp-header--compact .eqp-profile-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(148,163,184,.14);
  white-space:nowrap;
}

/* Mobile: icon-first, hide progress bar + meta to save vertical space */
@media (max-width: 980px){
  .eqp-header.eqp-header--compact{
    flex-wrap:wrap;
  }
  .eqp-header.eqp-header--compact .eqp-right{
    justify-content:flex-start;
    flex:1 1 100%;
    order:3;
    margin-top:6px;
  }
  .eqp-header.eqp-header--compact .eqp-hdr-actions{
    order:2;
    margin-left:auto;
  }
  .eqp-header.eqp-header--compact .eqp-progress{
    max-width:none;
    flex:1 1 auto;
  }
}

@media (max-width: 820px){
  /* Mobile: add a bit more top padding so header text/stats never clip */
  .eqp-finish-head{
    padding-top: 21px !important; /* 16px + 5px */
  }

  .eqp-header.eqp-header--compact{
    padding:6px 8px;
    gap:8px;
  }
  .eqp-header.eqp-header--compact .eqp-right{
    display:none !important;
  }
  .eqp-header.eqp-header--compact .eqp-q,
  .eqp-header.eqp-header--compact .eqp-time{
    font-size:12px;
    padding:6px 9px;
  }
  .eqp-header.eqp-header--compact .eqp-pr .lbl{
    display:none !important;
  }
  .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-header.eqp-header--compact .eqp-btn-resume{
    padding:0 10px;
  }
}


/* =========================================================
   Batch B — Question media preview + tap-to-expand viewer
   Goal: Images never push options off-screen; tap/click to zoom.
   Applies to q.image blocks and inline <img> inside stems.
   ========================================================= */

/* One max-height knob for all question images (mobile tighter) */
.eqp-quiz-root, .eqp-hub-root{ --eqp-qimg-maxh: min(40vh, 380px); }
@media (max-width: 768px){
  .eqp-quiz-root, .eqp-hub-root{ --eqp-qimg-maxh: min(24vh, 240px); }
}

/* Override legacy fixed aspect-ratio placeholders so portrait images don't become huge */
.eqp-card .eqp-stem-media-inner{
  aspect-ratio: auto !important;
  max-height: var(--eqp-qimg-maxh);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius: 12px;
}

/* Ensure question image previews are bounded and fully visible (no cropping) */
.eqp-card .eqp-stem-image{
  width: 100%;
  height: auto !important;
  max-height: var(--eqp-qimg-maxh);
  object-fit: contain !important;
  border-radius: 12px;
}

/* Inline images inside stem HTML */
.eqp-card .eqp-stem img{
  max-width: 100%;
  height: auto;
  max-height: var(--eqp-qimg-maxh);
  object-fit: contain;
  border-radius: 12px;
  display:block;
  margin: .35rem auto;
}

/* Bonus: keep explanation images reasonable too (they can still scroll in the sheet/drawer) */
.eqp-expl-body img{
  max-width: 100%;
  height: auto;
  max-height: min(50vh, 520px);
  object-fit: contain;
  border-radius: 12px;
  display:block;
  margin: .35rem auto;
}


/* === Batch C: Desktop split layout for media questions === */
@media (min-width: 980px){
  .eqp-card.eqp-split .eqp-qgrid{
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.05fr);
    gap: clamp(.75rem, 2vw, 1.25rem);
    align-items: start;
    margin-top: .5rem;
  }
  .eqp-card.eqp-split .eqp-media-col,
  .eqp-card.eqp-split .eqp-main-col{
    min-width: 0;
  }
  .eqp-card.eqp-split .eqp-main-col{
    display: flex;
    flex-direction: column;
  }
  /* the image block moves out of the form in split mode */
  .eqp-card.eqp-split .eqp-stem-media{
    margin: 0;
  }
  /* keep form scroll behavior (if needed) inside the right column */
  .eqp-card.eqp-split .eqp-form{
    margin-top: 0;
  }
}
/* === End Batch C === */



/* ===========================
   Batch D — Stem clamp + option density tuning
   =========================== */

/* Default density variables */
.eqp-quiz-root, .eqp-hub-root{
  /* Batch I3 Auto-fit (best-effort): scales typography + spacing to reduce need for scrolling */
  --eqp-autofit-scale: 1;
  --eqp-autofit-font: 1;
  --eqp-font-scale-safe: var(--eqp-font-scale, 1);
  font-family: var(--eqp-font-family, inherit);
  font-size: calc(1em * var(--eqp-autofit-font, 1) * var(--eqp-font-scale-safe, 1));
  --eqp-opt-pad: 12px;
  --eqp-opt-gap: 10px;
  --eqp-opt-margin-y: 8px;
}
@media (max-width: 820px){
  .eqp-quiz-root, .eqp-hub-root{
    --eqp-opt-pad: 10px;
    --eqp-opt-gap: 10px;
    --eqp-opt-margin-y: 6px;
  }
}

/* Apply density to options */
.eqp-quiz-root .eqp-opt,
.eqp-hub-root .eqp-opt{
  padding: var(--eqp-opt-pad);
  gap: var(--eqp-opt-gap);
  margin: var(--eqp-opt-margin-y) 0;
}
.eqp-quiz-root .eqp-opt span,
.eqp-hub-root .eqp-opt span{
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Stem clamp */
.eqp-stem{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.eqp-stem-clamped{
  max-height: 7.8em; /* ~5 lines at 1.5 */
  overflow: hidden;
}
.eqp-stem-expanded{
  max-height: none;
  overflow: visible;
}
.eqp-stem-toggle{
  margin-top: 6px;
  background: transparent;
  border: 0;
  color: var(--eqp-accent);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

/* Two-column options on wide screens when safe */
.eqp-optlist{ display:block; }
@media (min-width: 980px){
  .eqp-quiz-root.eqp-opt-2col .eqp-optlist,
  .eqp-hub-root.eqp-opt-2col .eqp-optlist{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .eqp-quiz-root.eqp-opt-2col .eqp-optlist .eqp-opt,
  .eqp-hub-root.eqp-opt-2col .eqp-optlist .eqp-opt{
    margin: 0;
    height: 100%;
  }
}

/* Safer wrapping inside explanation surfaces */
.eqp-expl-body{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.eqp-expl-body table{
  max-width: 100%;
  overflow: auto;
  display: block;
}

/* === Batch D hotfix + Batch E: Layout breathing, option overflow hint, density toggle === */

/* Let question text breathe: counter above, stem full width */
.eqp-card > .eqp-meta .eqp-meta-row{
  flex-wrap: wrap;
}
.eqp-card > .eqp-meta .eqp-meta-row .eqp-stem{
  flex: 1 1 100%;
  min-width: 0;
}

/* Prevent legacy two-column FORM grid from shoving Submit beside content */
@media (min-width: 1024px){
  .eqp-quiz-root .eqp-card .eqp-form,
  .eqp-hub-root .eqp-card .eqp-form{
    display: block !important;
  }
}

/* Option overflow hint (when internal scrolling hides options) */
.eqp-overflow-hint{
  margin: 8px 0 2px;
  font-size: 12px;
  opacity: .78;
  display: flex;
  gap: 8px;
  align-items: center;
}
.eqp-overflow-hint button{
  all: unset;
  cursor: pointer;
  font-weight: 700;
  opacity: .9;
}
.eqp-overflow-hint button:hover{ opacity: 1; text-decoration: underline; }

/* Density system: comfortable defaults + compact overrides */
.eqp-quiz-root, .eqp-hub-root{
  --eqp-opt-pad: 14px;
  --eqp-opt-gap: 12px;
  --eqp-opt-margin-y: 10px;
  --eqp-card-pad: 20px;
}
.eqp-quiz-root.eqp-density-compact, .eqp-hub-root.eqp-density-compact{
  --eqp-opt-pad: 10px;
  --eqp-opt-gap: 10px;
  --eqp-opt-margin-y: 6px;
  --eqp-card-pad: 16px;
}

/* Auto-fit can temporarily tighten density beyond the user toggle when needed */
.eqp-quiz-root.eqp-autofit-compact, .eqp-hub-root.eqp-autofit-compact{
  --eqp-opt-pad: 8px;
  --eqp-opt-gap: 8px;
  --eqp-opt-margin-y: 4px;
  --eqp-card-pad: 12px;
}

/* Enforce option spacing via variables (wins over earlier patch rules) */
.eqp-quiz-root .eqp-opt, .eqp-hub-root .eqp-opt{
  padding: calc(var(--eqp-opt-pad) * var(--eqp-autofit-scale, 1)) !important;
  gap: calc(var(--eqp-opt-gap) * var(--eqp-autofit-scale, 1)) !important;
  margin: calc(var(--eqp-opt-margin-y) * var(--eqp-autofit-scale, 1)) 0 !important;
}

/* Cards slightly adjust padding with density */
.eqp-quiz-root .eqp-card, .eqp-hub-root .eqp-card{
  padding: calc(var(--eqp-card-pad) * var(--eqp-autofit-scale, 1)) !important;
}

/* Density toggle button style (matches header icon buttons) */
.eqp-header .eqp-density-toggle{
  font-weight: 900;
  letter-spacing: -0.02em;
}


/* === BatchH1 Button Scale (admin: btn_scale -> --eqp-btn-scale) === */
.eqp-quiz-root, .eqp-hub-root{
  /* provided inline via --eqp-btn-scale; fallback is 1 */
  --eqp-btn-scale-safe: var(--eqp-btn-scale, 1);
  --eqp-secondary-btn-scale-safe: var(--eqp-secondary-btn-scale, 1);
}

/* Primary buttons (avoid double-scaling special button classes) */
.eqp-quiz-root .eqp-btn:not(.eqp-btn-rect):not(.eqp-btn-icon):not(.eqp-btn-iconic),
.eqp-hub-root  .eqp-btn:not(.eqp-btn-rect):not(.eqp-btn-icon):not(.eqp-btn-iconic){
    font-size: calc(1em * var(--eqp-btn-scale-safe, 1)) !important;
    padding: calc(12px * var(--eqp-btn-scale-safe, 1)) calc(18px * var(--eqp-btn-scale-safe, 1)) !important;
    border-radius: calc(12px * var(--eqp-btn-scale-safe, 1)) !important;
  min-height: calc(40px * var(--eqp-btn-scale-safe, 1)) !important;
  line-height: 1.15 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Icon+label buttons should still obey the button size slider (e.g., Finish screen Exit) */
.eqp-quiz-root .eqp-btn.eqp-btn-iconic,
.eqp-hub-root  .eqp-btn.eqp-btn-iconic{
  font-size: calc(1em * var(--eqp-btn-scale-safe, 1)) !important;
  padding: calc(12px * var(--eqp-btn-scale-safe, 1)) calc(18px * var(--eqp-btn-scale-safe, 1)) !important;
  border-radius: calc(12px * var(--eqp-btn-scale-safe, 1)) !important;
  min-height: calc(40px * var(--eqp-btn-scale-safe, 1)) !important;
  line-height: 1.15 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Rect pause/resume style */
.eqp-btn-rect{
  padding: calc(8px * var(--eqp-btn-scale-safe, 1)) calc(14px * var(--eqp-btn-scale-safe, 1));
  border-radius: calc(10px * var(--eqp-btn-scale-safe, 1));
  font-size: calc(18px * var(--eqp-btn-scale-safe, 1));
  min-height: calc(36px * var(--eqp-btn-scale-safe, 1));
}
@media (min-width: 768px){
  .eqp-btn-rect{
    font-size: calc(20px * var(--eqp-btn-scale-safe, 1));
    min-height: calc(38px * var(--eqp-btn-scale-safe, 1));
  }
}

/* Icon buttons (profile and any eqp-btn-icon usage) */
.eqp-btn-icon{
  width:  calc(34px * var(--eqp-btn-scale-safe, 1));
  height: calc(34px * var(--eqp-btn-scale-safe, 1));
}
@media (min-width: 640px){
  .eqp-btn-icon{
    width:  calc(36px * var(--eqp-btn-scale-safe, 1));
    height: calc(36px * var(--eqp-btn-scale-safe, 1));
  }
}

/* Header utility controls (sound, quests, fullscreen, pause, resume, density) */
.eqp-header .eqp-snd-toggle,
.eqp-header .eqp-quests-btn,
.eqp-header .eqp-fs-toggle,
.eqp-header .eqp-btn-pause,
.eqp-header .eqp-btn-resume,
.eqp-header .eqp-density-toggle{
  height: calc(30px * var(--eqp-btn-scale-safe, 1));
  padding: calc(4px * var(--eqp-btn-scale-safe, 1)) calc(8px * var(--eqp-btn-scale-safe, 1));
  border-radius: calc(10px * var(--eqp-btn-scale-safe, 1));
  font-size: calc(0.88em * var(--eqp-btn-scale-safe, 1));
}
.eqp-header .eqp-snd-toggle .ico,
.eqp-header .eqp-quests-btn .ico{
  font-size: calc(16px * var(--eqp-btn-scale-safe, 1));
}

/* === end BatchH1 Button Scale === */

/* === Batch X10: Secondary button scale (admin: secondary_btn_scale -> --eqp-secondary-btn-scale) === */
.eqp-quiz-root .eqp-expl-chip,
.eqp-hub-root  .eqp-expl-chip,
.eqp-quiz-root .eqp-moreopts-btn,
.eqp-hub-root  .eqp-moreopts-btn{
  --eqp-sec-btn-scale: calc(var(--eqp-btn-scale-safe, 1) * var(--eqp-secondary-btn-scale-safe, 1));
}

/* “Show explanation” chip */
.eqp-quiz-root .eqp-expl-chip,
.eqp-hub-root  .eqp-expl-chip{
  font-size: calc(.82em * var(--eqp-sec-btn-scale, 1)) !important;
  padding: calc(4px * var(--eqp-sec-btn-scale, 1)) calc(8px * var(--eqp-sec-btn-scale, 1)) !important;
  border-radius: calc(999px * var(--eqp-sec-btn-scale, 1)) !important;
  min-height: calc(26px * var(--eqp-sec-btn-scale, 1)) !important;
  line-height: 1.05 !important;
}

/* “Show more / fewer options” */
.eqp-quiz-root .eqp-moreopts-btn,
.eqp-hub-root  .eqp-moreopts-btn{
  font-size: calc(1em * var(--eqp-sec-btn-scale, 1)) !important;
  padding: calc(10px * var(--eqp-sec-btn-scale, 1)) calc(12px * var(--eqp-sec-btn-scale, 1)) !important;
  border-radius: calc(12px * var(--eqp-sec-btn-scale, 1)) !important;
  min-height: calc(36px * var(--eqp-sec-btn-scale, 1)) !important;
  line-height: 1.1 !important;
}


/* ================================
   Batch H2 (2026-02-03)
   - Slim feedback bar
   - Restore feedback icons
   - Smaller explanation chip button
   ================================ */
.eqp-feedback{
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 10px;
}
.eqp-fbline{ gap: 8px; }
.eqp-fb-pill{
  padding: .18rem .48rem;
  font-size: .82em;
  gap: .35rem;
}
.eqp-fb-pill::before{
  display:inline-block;
  line-height: 1;
}
.eqp-fb-pill.ok::before{ content: "✅"; }
.eqp-fb-pill.wrong::before{ content: "❌"; }
.eqp-fb-pill.info::before{ content: "ℹ️"; }

/* Warnings (e.g., no option selected) */
.eqp-feedback.warn{
  border-color: rgba(245,158,11,.55);
}
.eqp-feedback.warn .eqp-exp{
  display:inline-flex;
  align-items:center;
  gap: .35rem;
}
.eqp-feedback.warn .eqp-exp::before{ content: "⚠️"; }

/* Explanation chip smaller */
.eqp-expl-chip{
  padding: .28rem .50rem;
  font-size: .78rem;
}

/* ================================
   Batch H3 (2026-02-03)
   - Mobile header: AA matches other icon buttons
   - Profile button ordered far-right after quests
   ================================ */
.eqp-header.eqp-header--compact .eqp-density-toggle{
  width:34px;
  min-width:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  text-transform:none;
}

@media (max-width: 820px){
  /* Ensure stable action ordering on mobile: controls -> pause/resume -> profile (far right) */
  .eqp-header.eqp-header--compact .eqp-controls{ order: 1; }
  .eqp-header.eqp-header--compact .eqp-pr{ order: 2; }
  .eqp-header.eqp-header--compact .eqp-profile{ order: 3; }
}

/* ================================
   Batch H4 (2026-02-03)
   - Desktop wheel/touchpad scrolling reliability in fit mode
   ================================ */

/* Ensure the scroll container can actually receive pointer wheel scrolling */
.eqp-quiz-root.eqp-fit .eqp-card > .eqp-form{
  overflow-y: auto !important;
  min-height: 0 !important;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

/* ================================
   Batch H7 (2026-02-03)
   - Desktop: ensure quiz card has internal scrollbar when content overflows
   - Allow natural page scroll chaining when not internally scrollable
   ================================ */

/* On desktop, constrain the card height so the inner form can scroll and show a scrollbar when needed */
@media (min-width: 821px){
  .eqp-quiz-root .eqp-card{
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    max-height: calc(100vh - 180px);
  }
  .eqp-quiz-root .eqp-card > .eqp-form{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: auto;
  }
}

/* If not in fit mode, do not block scroll chaining */
.eqp-quiz-root:not(.eqp-fit) .eqp-form{
  overscroll-behavior: auto;
}

/* ================================
   Batch H8 (2026-02-03)
   - Desktop: fix internal scrolling + visible scrollbar (including split layout)
   - Avoid page-scroll lock by not forcing fit mode on desktop
   ================================ */

@media (min-width: 821px){
  /* When the card is flex, make the split grid consume remaining space */
  .eqp-quiz-root .eqp-card > .eqp-qgrid{
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .eqp-quiz-root .eqp-card > .eqp-qgrid .eqp-main-col{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .eqp-quiz-root .eqp-card > .eqp-qgrid .eqp-form{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-gutter: stable;
  }

  /* Make scrollbars more discoverable on desktop (Firefox) */
  .eqp-quiz-root .eqp-form{
    scrollbar-width: auto;
  }
}



/* Batch X3 — Force reliable card scrolling + eliminate scrollbar flash
   - Always make .eqp-card a scroll container (vertical)
   - Stabilize scrollbar space on desktop to prevent flicker
*/
.eqp-quiz-root, .eqp-quiz-root *{ box-sizing: border-box; }
.eqp-quiz-root .eqp-card{
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Desktop: keep scrollbar allocation stable (prevents appear/disappear flashes) */
@media (min-width: 768px){
  .eqp-quiz-root .eqp-card{
    overflow-y: scroll;
  }
}


/* ================================
   Batch X4 (2026-02-03)
   - Remove nested scrollbars (options-only / intermediate) so ONLY the card scrolls
   - Keep a single scroll container: .eqp-card
==================================*/
.eqp-quiz-root .eqp-card{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Disable any inner scroll containers that can create extra scrollbars */
.eqp-quiz-root .eqp-card > .eqp-form,
.eqp-quiz-root .eqp-card > .eqp-meta,
.eqp-quiz-root .eqp-card > .eqp-feedback,
.eqp-quiz-root .eqp-card > .eqp-qgrid,
.eqp-quiz-root .eqp-card .eqp-form,
.eqp-quiz-root .eqp-card .eqp-opts,
.eqp-quiz-root .eqp-card .eqp-answers,
.eqp-quiz-root .eqp-card .eqp-quests-list,
.eqp-quiz-root .eqp-card .eqp-explanation,
.eqp-quiz-root .eqp-card .eqp-expl-body{
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
}

/* Ensure the form doesn't act like a scroll region in responsive overrides */
@media (min-width: 768px){
  .eqp-quiz-root .eqp-card > .eqp-form,
  .eqp-quiz-root .eqp-card > .eqp-qgrid .eqp-form{
    overflow-y: visible !important;
  }
}

.eqp-quiz-root .eqp-meta-row .eqp-count{ display:none !important; }


/* ================================
   Batch X5 (2026-02-03)
   - Remove options-only scrolling entirely (single scroll: card)
   - Prevent nested scrollbars from appearing on touchpad gesture
   ================================ */
.eqp-quiz-root .eqp-card > .eqp-form,
.eqp-quiz-root .eqp-card .eqp-form,
.eqp-quiz-root .eqp-card .eqp-qgrid,
.eqp-quiz-root .eqp-card .eqp-qgrid * ,
.eqp-quiz-root .eqp-card .eqp-opts,
.eqp-quiz-root .eqp-card .eqp-options,
.eqp-quiz-root .eqp-card .eqp-answers,
.eqp-quiz-root .eqp-card .eqp-choices{
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  scrollbar-gutter: auto !important;
}

/* Only the card itself scrolls */
.eqp-quiz-root .eqp-card{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges;
}

/* Avoid iOS rubber-band inside inner regions */
.eqp-quiz-root .eqp-card .eqp-opts,
.eqp-quiz-root .eqp-card .eqp-options{
  overscroll-behavior: none;
}

/* Batch X6: single-scroll enforcement + pause timer while saving (CSS part) */

/* Batch X6: single-scroll enforcement (disable any nested option/explanation scrolling) */
.eqp-quiz-root .eqp-optlist,
.eqp-quiz-root .eqp-opt,
.eqp-quiz-root .eqp-form,
.eqp-quiz-root .eqp-qgrid,
.eqp-quiz-root .eqp-qgrid .eqp-form,
.eqp-quiz-root .eqp-explanation,
.eqp-quiz-root .eqp-explain,
.eqp-quiz-root .eqp-explain-body,
.eqp-quiz-root .eqp-explain-panel{
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Only the card itself may scroll when constrained */
.eqp-quiz-root .eqp-card{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges;
}



/* ================================
   Batch 6 (release): Single-scroll hardening
   - Prevent nested scroll containers inside the quiz card (finish/explanation)
   - Keeps wheel/touch scrolling consistent across devices
   ================================ */

.eqp-quiz-root .eqp-finish,
.eqp-cat-quizzes .eqp-finish,
.eqp-cats-mount .eqp-finish{
  max-height: none !important;
  overflow: visible !important;
}

.eqp-cat-quizzes .eqp-explanation,
.eqp-cat-quizzes .eqp-explain,
.eqp-cats-mount .eqp-explanation{
  max-height: none !important;
  overflow: visible !important;
}


/* ================================
   Batch X12 Hotfix: Header stability + sleek mobile
   ================================ */

.eqp-quiz-root .eqp-header.eqp-header--compact{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  grid-template-areas:"left right actions" !important;
  align-items:center !important;
  column-gap:8px !important;
  row-gap:4px !important;
  padding:6px 8px !important;
}

.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
  grid-area:left;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-right{
  grid-area:right;
  min-width:0;
}

.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
  grid-area:actions;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  white-space:nowrap;
}

@media (max-width: 720px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "left actions"
      "right right" !important;
  }
}

/* Keep the pressure gap minimal and non-jumpy */
.eqp-quiz-root .eqp-pre-gap{
  height:6px !important;
  margin:0 0 3px !important;
  padding:0 !important;
}

.eqp-quiz-root .eqp-pressure{
  height:5px !important;
}


/* EQP UI v2 foundation (Batch 1) */
.eqp-ui-v2{
  /* Sizing tokens (used by upcoming v2 header/card/layout work) */
  --eqp-hdr-h: 48px;
  --eqp-strip-h: 10px;
  --eqp-btn-sz: 34px;
  --eqp-radius-card: 18px;
  --eqp-radius-btn: 12px;
  --eqp-gap: 10px;
}

/* Reduce micro-jitter from proportional numerals (timer, counters, XP, etc.) */
.eqp-ui-v2 .eqp-time,
.eqp-ui-v2 .eqp-q,
.eqp-ui-v2 .eqp-score,
.eqp-ui-v2 .eqp-xp,
.eqp-ui-v2 .eqp-level,
.eqp-ui-v2 .eqp-xp-gained,
.eqp-ui-v2 .eqp-level-badge,
.eqp-ui-v2 .eqp-chip,
.eqp-ui-v2 .eqp-stat{
  font-variant-numeric: tabular-nums;
}

/* Scroll stability helper (Batch 4/5 will wire these containers) */
.eqp-ui-v2 .eqp-scroll,
.eqp-ui-v2 [data-eqp-scroll="1"]{
  scrollbar-gutter: stable;
}


/* ===========================
   Batch 2 — UI v2 Header (topbar + strip)
   =========================== */
.eqp-ui-v2 .eqp-header--v2{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 10px;
  padding:0;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-topbar{
  height: var(--eqp-hdr-h, 48px);
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 2px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-q,
.eqp-ui-v2 .eqp-header--v2 .eqp-time{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(148,163,184,.18);
  color: var(--eqp-text);
  white-space:nowrap;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-topbar-center{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  overflow:hidden;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-hdr-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip{
  height: var(--eqp-strip-h, 10px);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 6px;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip .eqp-progress{
  flex:1 1 auto;
  height:100%;
  background: rgba(148,163,184,.16);
  border-radius:999px;
  overflow:hidden;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip .eqp-progress > span{
  display:block;
  height:100%;
  background: var(--eqp-accent, #7c5cff);
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure{
  flex:0 0 96px;
  height:100%;
}

.eqp-quiz-root.eqp-ui-v2:not(.state-finish):not(.state-preparing) .eqp-header--v2 .eqp-strip-pressure .eqp-pressure{
  height:100%;
  margin:0;
}

/* ===========================
   Batch 3 — UI v2 Header controls stability
   =========================== */
/* Make header buttons stable: fixed sizing, no translate/"jump" hover effects */
.eqp-ui-v2 .eqp-header--v2 button{
  transform:none !important;
}
.eqp-ui-v2 .eqp-header--v2 button:hover,
.eqp-ui-v2 .eqp-header--v2 button:active{
  transform:none !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-controls{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(148,163,184,.18);
  border-radius:12px;
  overflow:hidden;
  background: rgba(148,163,184,.10);
  height: var(--eqp-btn-sz, 34px);
}

.eqp-ui-v2 .eqp-header--v2 .eqp-controls > *{
  height: var(--eqp-btn-sz, 34px);
  min-height: var(--eqp-btn-sz, 34px);
  padding:0 10px;
  margin:0;
  border:0;
  background:transparent;
  color: var(--eqp-text);
  box-shadow:none;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1;
  font-size:13px;
  white-space:nowrap;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-controls > * + *{
  border-left:1px solid rgba(148,163,184,.18);
}

/* Icon-only segments: fixed width so timer/progress never gets nudged */
.eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-snd-toggle,
.eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-fs-toggle,
.eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-density-toggle{
  width: var(--eqp-btn-sz, 34px);
  padding:0;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-controls .ico{
  display:inline-block;
  line-height:1;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-quests-btn .lbl{
  display:none;
}
@media (min-width: 860px){
  .eqp-ui-v2 .eqp-header--v2 .eqp-quests-btn .lbl{ display:inline; }
}

.eqp-ui-v2 .eqp-header--v2 .eqp-profile-btn{
  width: var(--eqp-btn-sz, 34px);
  height: var(--eqp-btn-sz, 34px);
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(148,163,184,.14);
  color: var(--eqp-text);
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
  line-height:1;
}

/* Rect buttons inside v2 header (pause/resume) should not physically move */
.eqp-ui-v2 .eqp-header--v2 .eqp-btn-rect{
  transition: background-color .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-btn-rect:hover,
.eqp-ui-v2 .eqp-header--v2 .eqp-btn-rect:active{
  transform:none !important;
}

/* ===========================
   Batch 4 — Quiz card v2 zones (stable: top / scroll / bottom)
   Goal: keep the card stable and only scroll the options/media region when needed.
   =========================== */
.eqp-ui-v2 .eqp-card.eqp-card--question{
  /* override legacy card scrolling */
  overflow: hidden;
  display:flex;
  flex-direction:column;
  gap: var(--eqp-gap, 10px);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-top{
  flex:0 0 auto;
  min-width:0;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-form--v2{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap: var(--eqp-gap, 10px);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-mid{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-bot{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* feedback reserved area (prevents layout jump when feedback appears) */
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback{
  margin:0;
  min-height: var(--eqp-feedback-min, 44px);
}

/* actions should not reflow the card height; keep them visually stable */
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions{
  margin:0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Split mode: let the form manage its own scrolling (mid), not the whole form */
.eqp-ui-v2 .eqp-card.eqp-card--question.eqp-split > .eqp-qgrid{
  flex:1 1 auto;
  min-height:0;
}
.eqp-ui-v2 .eqp-card.eqp-card--question.eqp-split .eqp-main-col{
  min-height:0;
}
.eqp-ui-v2 .eqp-card.eqp-card--question.eqp-split .eqp-form{
  overflow: visible !important;
  padding-right: 0 !important;
}

@media (max-width: 560px){
  .eqp-ui-v2{ --eqp-gap: 8px; }
  .eqp-ui-v2 .eqp-card.eqp-card--question{ padding: 16px; }
}
@media (min-width: 900px){
  .eqp-ui-v2 .eqp-card.eqp-card--question{ padding: 20px; }
}

/* ================================
   Batch 5 — Finish screen v2
   Stable top/mid/bottom layout (no bottom expand/retract)
   ================================ */

.eqp-ui-v2 .eqp-card.eqp-finish--v2{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden !important;
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-top{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-headrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--eqp-border, rgba(255,255,255,.12));
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  white-space: nowrap;
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-xp-summary{
  min-height: 24px;
  opacity: .88;
  font-weight: 600;
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-mid{
  flex:1 1 auto;
  min-height:0;
  overflow:auto !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  margin-top: 8px;
}

/* Keep the full share block out of flow in v2 (corner share remains available). */
.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-share{ display:none; }

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-bot{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--eqp-border, rgba(255,255,255,.12));
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-actions,
.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-actions{
  margin:0;
}

.eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-footer{
  opacity:.85;
}

@media (max-width: 560px){
  .eqp-ui-v2 .eqp-card.eqp-finish--v2{ padding: 16px; }
}
@media (min-width: 900px){
  .eqp-ui-v2 .eqp-card.eqp-finish--v2{ padding: 20px; }
}


/* ===========================
   Batch 6 — UI v2 polish (final)
   Typography + spacing sweeps + focus visibility + reduced motion + micro-jitter guards
   =========================== */

.eqp-ui-v2,
.eqp-ui-v2 *{
  font-variant-numeric: tabular-nums;
}

.eqp-ui-v2 *,
.eqp-ui-v2 *::before,
.eqp-ui-v2 *::after{
  box-sizing: border-box;
}

/* Prevent legacy header wrap/order rules from affecting v2 header */
.eqp-ui-v2 .eqp-header--v2{
  flex-wrap: nowrap !important;
}
.eqp-ui-v2 .eqp-header--v2 > *{
  order: 0 !important;
}

/* Allow topbar to breathe without clipping; keep a stable minimum height */
.eqp-ui-v2 .eqp-header--v2 .eqp-topbar{
  height: auto;
  min-height: var(--eqp-hdr-h, 48px);
}

/* Make v2 header controls immune to the global "button theme enforcement" rule */
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > button,
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > .eqp-quests-btn{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > button:hover,
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > .eqp-quests-btn:hover{
  background: rgba(148,163,184,.12) !important;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > button[aria-pressed="true"]{
  background: rgba(124,92,255,.18) !important;
}

/* Buttons: consistent sizing + no movement */
.eqp-ui-v2 .eqp-btn{
  border-radius: var(--eqp-radius-btn, 12px);
  padding: 10px 14px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: none !important;
  transform: none !important;
}
.eqp-ui-v2 .eqp-btn:hover,
.eqp-ui-v2 .eqp-btn:active{
  transform: none !important;
}

/* Primary button: use accent without gradients (border-color is forced to match background) */
.eqp-ui-v2 .eqp-btn-primary{
  --eqp-btn-bg: var(--eqp-accent, #7c5cff);
  --eqp-btn-text: #fff;
}

/* Keep "empty" feedback from looking like a blank alert while still reserving space */
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback.is-empty{
  background: transparent !important;
  border-color: transparent !important;
}

/* Options: minimal hover (no translate), consistent tap target */
.eqp-ui-v2 .eqp-opt{
  border-radius: 14px;
  padding: 12px 12px;
  transform: none !important;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.eqp-ui-v2 .eqp-opt:hover{
  transform: none !important;
  box-shadow: 0 1px 10px rgba(0,0,0,.10);
}

/* Focus visibility (keyboard users) */
.eqp-ui-v2 button:focus-visible,
.eqp-ui-v2 a:focus-visible,
.eqp-ui-v2 [role="button"]:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--eqp-accent, #7c5cff) 80%, white);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .eqp-ui-v2 *,
  .eqp-ui-v2 *::before,
  .eqp-ui-v2 *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Cross-device micro-tweaks */
@media (max-width: 420px){
  .eqp-ui-v2 .eqp-header--v2 .eqp-topbar{
    padding: 7px 8px;
    gap: 8px;
  }
  .eqp-ui-v2 .eqp-header--v2 .eqp-q,
  .eqp-ui-v2 .eqp-header--v2 .eqp-time{
    padding: 6px 9px;
    font-size: 12.5px;
  }
  .eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure{
    flex-basis: 72px;
  }
}

@media (min-width: 768px){
  .eqp-ui-v2 .eqp-header--v2 .eqp-topbar{
    padding: 9px 12px;
  }
}


/* Batch 6 extras: scrollbar stability + finish chip sizing on small screens */
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-mid{
  scrollbar-gutter: stable;
}

@media (max-width: 420px){
  .eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-chip{
    padding: 7px 10px;
    font-size: .88rem;
  }
  .eqp-ui-v2 .eqp-card.eqp-finish--v2 .eqp-finish-bot{
    gap: 8px;
  }
}


/* ===========================
   Batch 6B — Header stability hotfix
   Goal: eliminate any remaining header button jitter / sideways shifts.
   =========================== */

/* Keep header minimal: Quests stays icon-only to avoid width reflow near breakpoints */
.eqp-ui-v2 .eqp-header--v2 .eqp-quests-btn .lbl{ display:none !important; }
.eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-quests-btn{
  width: var(--eqp-btn-sz, 34px);
  padding:0;
}

/* Make Pause/Resume stable width so toggling can't nudge the group */
.eqp-ui-v2 .eqp-header--v2 .eqp-btn-pause,
.eqp-ui-v2 .eqp-header--v2 .eqp-btn-resume{
  min-width: 92px;
  height: var(--eqp-btn-sz, 34px);
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Prevent legacy hover filter from affecting v2 header controls */
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > *{
  font-weight: 600;
  filter: none !important;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > *:hover,
.eqp-ui-v2 .eqp-header--v2 .eqp-controls > *:active{
  filter: none !important;
}



/* Batch 6B7 — Header v2 override
   Ensure global .eqp-btn styles never affect header controls (prevents jitter). */
.eqp-ui-v2 .eqp-header--v2 .eqp-pr .eqp-btn{
  padding: 0 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-pr .eqp-btn:hover{
  filter: none !important;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-profile-btn{
  padding: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-profile-btn:hover{
  filter: none !important;
}



/* Batch X13-B6F — Header v2 hard reset (fix desktop/tablet missing items + stop jitter)
   Root cause: legacy "game mode" header layout rules (min-width:768px) override the v2 header container,
   and global rules hide .eqp-pressure inside headers. We override both for v2 only. */

.eqp-quiz-root.eqp-ui-v2.eqp-game-mode .eqp-header--v2,
.eqp-ui-v2.eqp-game-mode .eqp-header--v2,
.eqp-ui-v2 .eqp-header--v2{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  height:auto !important;
  min-height:0 !important;
}

/* Topbar always row-flex; prevent legacy .eqp-header rules from forcing row layout of child blocks */
.eqp-quiz-root.eqp-ui-v2.eqp-game-mode .eqp-header--v2 > .eqp-topbar,
.eqp-ui-v2 .eqp-header--v2 > .eqp-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-topbar-left{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-topbar-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
}

/* Ensure key header pills never disappear and don't "jump" as digits change */
.eqp-ui-v2 .eqp-header--v2 .eqp-q,
.eqp-ui-v2 .eqp-header--v2 .eqp-time{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-variant-numeric: tabular-nums;
  line-height:1 !important;
  white-space:nowrap !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-q{ min-width: 76px !important; }
.eqp-ui-v2 .eqp-header--v2 .eqp-time{ min-width: 92px !important; }

/* Strip: progress + pressure must be visible (global CSS previously hid .eqp-pressure inside headers) */
.eqp-ui-v2 .eqp-header--v2 .eqp-strip{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  min-height:10px !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip-progress{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

.eqp-quiz-root.eqp-ui-v2:not(.state-finish):not(.state-preparing) .eqp-header--v2 .eqp-strip-progress .eqp-progress{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure{
  display:block !important;
  flex:0 0 160px !important;
  min-width:140px !important;
}

.eqp-quiz-root.eqp-ui-v2:not(.state-finish):not(.state-preparing) .eqp-header--v2 .eqp-strip-pressure .eqp-pressure{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Action cluster: keep a steady baseline height to avoid vertical jitter */
.eqp-ui-v2 .eqp-header--v2 .eqp-hdr-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height: var(--eqp-btn-sz, 34px) !important;
}

/* Small screens: allow wrapping but keep alignment stable */
@media (max-width: 560px){
  .eqp-ui-v2 .eqp-header--v2 > .eqp-topbar{
    flex-wrap:wrap !important;
  }
  .eqp-ui-v2 .eqp-header--v2 .eqp-topbar-right{
    width:100% !important;
    justify-content:flex-end !important;
  }
  .eqp-ui-v2 .eqp-header--v2 .eqp-strip{
    gap:8px !important;
  }
  .eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure{
    flex:1 1 100px !important;
    min-width:100px !important;
  }
}

/* ===========================
   Batch X13-B6G — Final header + finish corner stabilization
   Goals:
   - Mobile: single-line actions (no wrapping) with uniform button sizing
   - Desktop/tablet: keep pause/resume on the same row without forcing wraps
   - Stop bottom strip from "breathing" by never toggling display on/off
   - Finish: keep ONLY the top-right share/copy, engraved into the card
   =========================== */

/* Finish: hide any legacy share row; keep the corner share only */
.eqp-ui-v2 .eqp-finish .eqp-share{ display:none !important; }

/* Finish: engraved corner share/copy */
.eqp-ui-v2 .eqp-finish{ position:relative; }
.eqp-ui-v2 .eqp-finish .eqp-share-corner{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(148,163,184,.32);
  box-shadow: 0 8px 20px rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
}
.eqp-ui-v2 .eqp-finish .eqp-share-corner .eqp-share-title{ display:none !important; }

/* Header: ensure strip visibility (some legacy rules hide pressure/progress in headers) */
.eqp-ui-v2 .eqp-header--v2 .eqp-strip .eqp-progress{ display:block !important; }
.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure .eqp-pressure{ display:block !important; }

/* Header: never collapse the pressure host; hide via visibility/opacity (JS toggles .eqp-strip-hidden) */
.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure{ height: 100% !important; }
.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure.eqp-strip-hidden{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Header: hard guarantee single-row topbar + actions (prevents the "bottom shifting" look) */
.eqp-ui-v2 .eqp-header--v2 > .eqp-topbar{
  flex-wrap: nowrap !important;
}
.eqp-ui-v2 .eqp-header--v2 .eqp-topbar-right,
.eqp-ui-v2 .eqp-header--v2 .eqp-hdr-actions,
.eqp-ui-v2 .eqp-header--v2 .eqp-controls,
.eqp-ui-v2 .eqp-header--v2 .eqp-pr{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Mobile: unify button sizes; only pause/start/resume is slightly larger.
   Also: keep everything on one line by allowing the actions cluster to scroll horizontally if needed. */
@media (max-width: 767px){
  .eqp-ui-v2 .eqp-header--v2{ --eqp-btn-sz: 32px; }

  /* More room for actions; no wrapping */
  .eqp-ui-v2 .eqp-header--v2 .eqp-topbar-center{ display:none !important; }
  .eqp-ui-v2 .eqp-header--v2 .eqp-topbar-right{ min-width:0 !important; max-width: 60vw; }
  .eqp-ui-v2 .eqp-header--v2 .eqp-hdr-actions{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 60vw;
  }
  .eqp-ui-v2 .eqp-header--v2 .eqp-hdr-actions::-webkit-scrollbar{ display:none; }

  /* Icon buttons are perfectly square */
  .eqp-ui-v2 .eqp-header--v2 .eqp-controls{ height: var(--eqp-btn-sz, 32px) !important; }
  .eqp-ui-v2 .eqp-header--v2 .eqp-controls > *{
    height: var(--eqp-btn-sz, 32px) !important;
    min-height: var(--eqp-btn-sz, 32px) !important;
    font-size: 12.5px !important;
  }
  .eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-snd-toggle,
  .eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-fs-toggle,
  .eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-density-toggle,
  .eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-profile-btn{
    width: var(--eqp-btn-sz, 32px) !important;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  }

  /* Quests stays square/icon-only on mobile */
  .eqp-ui-v2 .eqp-header--v2 .eqp-controls .eqp-quests-btn{ width: var(--eqp-btn-sz, 32px) !important; padding:0 !important; }
  .eqp-ui-v2 .eqp-header--v2 .eqp-quests-btn .lbl{ display:none !important; }

  /* Pause/Resume: slightly larger than the others */
  .eqp-ui-v2 .eqp-header--v2 .eqp-pr .eqp-btn{
    height: calc(var(--eqp-btn-sz, 32px) + 4px) !important;
    min-height: calc(var(--eqp-btn-sz, 32px) + 4px) !important;
    min-width: calc(var(--eqp-btn-sz, 32px) + 4px) !important;
    padding: 0 10px !important;
  }
  /* Keep mobile header compact: icon-only labels for pause/resume to avoid wrapping */
  .eqp-ui-v2 .eqp-header--v2 .eqp-pr .lbl{ display:none !important; }
}

/* Desktop/tablet: keep pause/resume from forcing wraps on mid-width screens */
@media (max-width: 1023px){
  .eqp-ui-v2 .eqp-header--v2 .eqp-pr .lbl{ display:none !important; }
  .eqp-ui-v2 .eqp-header--v2 .eqp-btn-pause,
  .eqp-ui-v2 .eqp-header--v2 .eqp-btn-resume{ min-width: 0 !important; }
}


/* ===========================
   Batch X13 — Header/Scroll Jitter Kill
   Root causes: legacy pre-gap insertion + strip height being allowed to auto-size.
   Fix: for UI v2, never allow pre-gap to take space; lock strip height; keep pressure hidden via opacity only.
   =========================== */
.eqp-ui-v2 .eqp-pre-gap{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip{
  height: var(--eqp-strip-h, 10px) !important;
  min-height: var(--eqp-strip-h, 10px) !important;
  max-height: var(--eqp-strip-h, 10px) !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  align-items:stretch !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure{
  height:100% !important;
  display:block !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure .eqp-pressure{
  display:block !important;
  height:100% !important;
  margin:0 !important;
}

.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure .eqp-pressure > span{
  height:100% !important;
}


/* ===============================
   Batch X13 B6k – X8R header/finish port
   Goal: keep the compact header single-line + stable across devices.
   =============================== */

.eqp-header.eqp-header--compact{
  flex-wrap:nowrap;
  padding:6px 8px;
  gap:8px;
  margin:0 0 8px;
}

.eqp-header.eqp-header--compact .eqp-q,
.eqp-header.eqp-header--compact .eqp-time{
  padding:5px 9px;
  font-size:12.5px;
}

/* Never allow header actions to wrap (wrapping causes height-jitter). Use horizontal scroll instead. */
.eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex:0 1 auto;
  max-width:60%;
  flex-wrap:nowrap !important;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }

/* Remove placeholder reservers that can change width/height when controls mount. */
.eqp-header.eqp-header--compact .eqp-hdr-ph-wrap,
.eqp-header.eqp-header--compact .eqp-hdr-ph{ display:none !important; }

/* Keep controls on one line */
.eqp-header.eqp-header--compact .eqp-controls{ flex-wrap:nowrap; }
.eqp-header.eqp-header--compact .eqp-profile,
.eqp-header.eqp-header--compact .eqp-pr{ flex-wrap:nowrap; }

/* Normalize button sizing (pause/resume slightly larger) */
.eqp-header.eqp-header--compact .eqp-btn,
.eqp-header.eqp-header--compact .eqp-snd-toggle,
.eqp-header.eqp-header--compact .eqp-fs-toggle,
.eqp-header.eqp-header--compact .eqp-density-toggle,
.eqp-header.eqp-header--compact .eqp-quests-btn,
.eqp-header.eqp-header--compact .eqp-profile-btn{
  height:32px;
  min-width:32px;
  padding:0 10px;
  line-height:1;
}
.eqp-header.eqp-header--compact .eqp-btn-pause,
.eqp-header.eqp-header--compact .eqp-btn-resume{
  height:34px;
  min-width:34px;
}

/* On smaller screens, keep the header strictly one-row */
@media (max-width:720px){
  .eqp-header.eqp-header--compact{
    padding:6px 8px;
    gap:6px;
  }
  .eqp-header.eqp-header--compact .eqp-right{ display:none; }
  .eqp-header.eqp-header--compact .eqp-hdr-actions{ max-width:100%; }
}

/* Finish: classic stable layout + space for top-right share corner */
.eqp-card.eqp-finish{ position:relative; }
.eqp-quiz-root .eqp-card.eqp-finish > *:first-child{ margin-right: 170px; }
.eqp-card.eqp-finish .eqp-xp-line{ opacity:.95; }


/* =========================================================
   Hotfix b6l — Desktop header one-line + no-jitter controls
   - Prevent legacy global .eqp-header rules from reflowing compact header
   - Remove pause/resume translate nudges
   - Keep compact header slim and stable on desktop/tablet
   ========================================================= */
.eqp-header.eqp-header--compact{ --eqp-pr-nudge: 0px; }
.eqp-header.eqp-header--compact .eqp-btn-pause,
.eqp-header.eqp-header--compact .eqp-btn-resume,
.eqp-header.eqp-header--compact .eqp-btn-pause:hover,
.eqp-header.eqp-header--compact .eqp-btn-resume:hover,
.eqp-header.eqp-header--compact .eqp-btn-pause:active,
.eqp-header.eqp-header--compact .eqp-btn-resume:active{
  transform:none !important;
}

/* Desktop/tablet: force a single slim row */
@media (min-width: 821px){
  .eqp-header.eqp-header--compact{
    display:grid !important;
    grid-template-columns: auto minmax(140px, 1fr) auto;
    align-items:center;
    column-gap: 10px;
    row-gap: 0;
    flex-wrap:nowrap !important;
    padding: 4px 10px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    height: 44px !important;
    overflow: hidden;
  }
  .eqp-header.eqp-header--compact > *{ min-width:0; }

  .eqp-header.eqp-header--compact .eqp-left{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-start;
    white-space:nowrap;
  }
  .eqp-header.eqp-header--compact .eqp-q,
  .eqp-header.eqp-header--compact .eqp-time{
    display:inline-flex;
    align-items:center;
    height: 28px;
    min-height: 28px;
    padding: 0 10px;
  }
  .eqp-header.eqp-header--compact .eqp-time{
    min-width: 78px;
    justify-content:center;
    text-align:center;
  }

  .eqp-header.eqp-header--compact .eqp-right{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-width:0;
    width:100%;
  }
  .eqp-header.eqp-header--compact .eqp-progress{
    flex: 1 1 auto;
    max-width: 320px;
    height: 4px;
  }

  .eqp-header.eqp-header--compact .eqp-hdr-actions{
    display:flex !important;
    align-items:center;
    gap: 8px;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    justify-content:flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE/Edge legacy */
  }
  .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }

  /* Prevent legacy header "pressure takes full row" ordering from affecting compact header */
  .eqp-header.eqp-header--compact .eqp-pressure{
    flex: 0 0 auto !important;
    order: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
}


/* =========================================================
   Hotfix b6m — compact header final alignment + no clipping
   - Shift header contents up by 4px (desktop/tablet)
   - Progress bar sits next to timer (not centered)
   - Constrain action strip so buttons never disappear off-screen
   - Lock numeric widths to remove the last micro-jitters
   ========================================================= */

@media (min-width: 821px){
  .eqp-header.eqp-header--compact{
    /* Override b6l grid: flex is more predictable for single-row headers */
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:nowrap !important;

    /* 44px header with +4px upward visual nudge (top 0 / bottom 8) */
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    padding-top:0px !important;
    padding-bottom:8px !important;
    overflow:visible !important;
  }

  .eqp-header.eqp-header--compact .eqp-left{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }

  .eqp-header.eqp-header--compact .eqp-q{
    min-width: 86px;
    justify-content:center;
    text-align:center;
    font-variant-numeric: tabular-nums;
  }
  .eqp-header.eqp-header--compact .eqp-time{
    min-width: 96px;
    justify-content:center;
    text-align:center;
    font-variant-numeric: tabular-nums;
  }

  /* Inline progress (next to timer) */
  .eqp-header.eqp-header--compact .eqp-progress--inline{
    flex:0 0 auto;
    width: clamp(120px, 16vw, 220px);
    max-width: 220px;
    height: 4px;
    margin-left: 2px;
  }

  /* Actions: keep visible and allow horizontal scroll if needed */
  .eqp-header.eqp-header--compact .eqp-hdr-actions{
    flex:0 0 auto;
    display:flex !important;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap !important;
    white-space:nowrap;
    max-width: min(52vw, 520px);
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }
  .eqp-header.eqp-header--compact .eqp-hdr-actions > *{ flex:0 0 auto; }

  /* Keep pause/resume footprint consistent (label swaps won't shift layout) */
  .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-header.eqp-header--compact .eqp-btn-resume{
    min-width: 84px;
  }
}

@media (max-width: 820px){
  /* Inline progress hidden on mobile for space */
  .eqp-header.eqp-header--compact .eqp-progress--inline{ display:none !important; }

  /* Quests becomes an icon button like the rest */
  .eqp-header.eqp-header--compact .eqp-quests-btn{
    width:34px;
    min-width:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .eqp-header.eqp-header--compact .eqp-quests-btn .lbl{ display:none !important; }

  /* Nudge the start/pause/resume control up slightly */
  .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-header.eqp-header--compact .eqp-btn-resume{
    transform: translateY(-4px) !important;
  }
}

/* =========================================================
   JNpatch72 (2026-02-11)
   Header jitter elimination (compact header)
   Root cause: global sticky + padding-bottom meter patches caused the compact header
   to constantly re-evaluate its sticky state/box metrics, producing vertical flicker
   and sideways reflow when timer text/controls update.
   Fix: make the compact header non-sticky, lock its box model, and prevent wraps.
   ========================================================= */

.eqp-quiz-root .eqp-header.eqp-header--compact{
  position: relative !important; /* override global position:sticky */
  top: auto !important;
  padding: 8px 10px !important;
  margin: 0 0 10px !important;
  box-sizing: border-box !important;
  padding-bottom: 8px !important; /* override global meter padding */
  contain: layout paint;
}

/* Prevent row wraps that cause lateral jumping; allow horizontal scroll if needed */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }

/* Keep timer/question pills a stable width so digits don't shift layout */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q,
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
  font-variant-numeric: tabular-nums;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
  min-width: 74px;
  justify-content: center;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{
  min-width: 86px;
  justify-content: center;
}

/* Ensure fixed vertical alignment baseline across all children */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left,
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-right,
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
  min-height: 34px;
  align-items: center;
}

/* Kill accidental animated shifts from earlier patches */
.eqp-quiz-root .eqp-header.eqp-header--compact,
.eqp-quiz-root .eqp-header.eqp-header--compact *{
  transition: none !important;
}

/* =========================================================
   Hotfix b6p — compact header: keep pressure meter INSIDE header (no pre-gap)
   - Prevents vertical header jumps when pressure meter updates
   ========================================================= */
.eqp-ui-v2 .eqp-header.eqp-header--compact{
  position: relative !important;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip{
  position: absolute !important;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 3px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  pointer-events: none;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  flex: 1 1 auto;
  height: 100%;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure .eqp-pressure{
  display: block !important;
  height: 100%;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
  overflow: hidden;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure .eqp-pressure > span{
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0%;
  background: var(--eqp-timer, currentColor);
  transition: width .25s linear;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure.eqp-strip-hidden{
  opacity: 0;
  visibility: hidden;
}

/* If any older pre-gap pressure meters are present, keep them visually collapsed */
.eqp-ui-v2 .eqp-pre-gap{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   B6Q HOTFIX: Header stability
   - Make compact header a true single-row layout (no wrapping)
   - Prevent time text width changes from pushing items around
   - Remove the v2 "pressure strip" (it rendered as a long line)
   ========================================================= */

/* Stop scroll anchoring from nudging the page when small DOM/text changes happen */
.eqp-quiz-root{ overflow-anchor: none; }
.eqp-quiz-root .eqp-header{ overflow-anchor: none; }

/* Force a single-row header everywhere */
.eqp-quiz-root .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Stable numeric width for timer + counter */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q,
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{ min-width: 78px; }
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{ min-width: 70px; }

/* Keep left side from forcing wrap */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
  min-width: 0;
  flex: 1 1 auto;
}

/* Progress stays next to timer but never forces a second row */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress{
  flex: 1 1 160px;
  min-width: 110px;
  max-width: 260px;
}

/* Actions never wrap; on small screens they can scroll horizontally (without a visible scrollbar line) */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  align-items: center;
}

@media (max-width: 820px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    flex-wrap: nowrap !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{
    height: 0;
    width: 0;
    display: none;
  }
}

/* Remove v2 pressure strip entirely (it was the long line across the header) */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  display: none !important;
}

/* Stop scroll anchoring from nudging the page when small DOM updates happen */
.eqp-quiz-root,
.eqp-quiz-root *{
  overflow-anchor: none;
}

/* Force the compact header to never wrap (wrap was the main cause of up/down jitter) */
.eqp-quiz-root .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Make the left cluster resilient and prevent it from forcing wraps */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

/* Use tabular numbers so the timer width doesn’t "breathe" each second */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time,
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  justify-content: center;
}

/* Give the timer/counter a stable footprint */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{ min-width: 78px; }
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{ min-width: 66px; }

/* Keep the progress bar from stealing space and triggering wrap thresholds */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress{
  flex: 1 1 160px;
  min-width: 96px;
  max-width: 260px;
}

/* Action strip: never wrap. On small screens, allow horizontal scroll but hide scrollbar. */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex: 0 0 auto;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

@media (max-width: 720px){
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    max-width: 58vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;
  }
}

/* Remove the v2 bottom "pressure strip" line entirely (we disabled its JS updates too) */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  display: none !important;
}


/* =========================================================
   Batch X13 (B6R) — Compact header stability hardfix
   Goal: eliminate jitter caused by wrapping/scrollbar thresholds and
   per-second timer text width changes.
   ========================================================= */
.eqp-quiz-root .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
}

.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
  flex: 0 1 auto !important;
  min-width: 0 !important;
  gap: 6px !important;
}

/* Tabular nums keep the pills from resizing on every tick */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q,
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
  font-variant-numeric: tabular-nums;
}

.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
  min-width: 9.5ch;
  justify-content: center;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{
  min-width: 7.5ch;
  justify-content: center;
}

/* Inline progress: fixed width so it never triggers reflow/wrap thresholds */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline{
  flex: 0 0 120px !important;
  width: 120px !important;
  max-width: 120px !important;
}

/* Actions must never wrap (wrapping was the main source of vertical jitter). */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  max-width: none !important;
  overflow: hidden !important; /* desktop: no scrollbars, no height changes */
}

/* Mobile: allow horizontal swipe if needed, but hide scrollbars to avoid height shifts */
@media (max-width: 820px){
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline{ display: none !important; }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display: none; }
}

/* Prevent legacy mobile rules from re-enabling wrapping */
@media (max-width: 980px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{ flex-wrap: nowrap !important; }
}

/* ==========================================================
   Batch X13 B6S — Mobile header: 3-line layout (meta / progress / actions)
   - Line 1: question counter + timer + streak
   - Line 2: progress bar
   - Line 3: buttons (single row, auto-shrink, no spillover)
   Applies to mobile only; keeps current header height/padding tight.
   ========================================================== */
@media (max-width: 820px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* Slimmer mobile header: reduce vertical spacing between lines */
    gap: 1px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* --- Line 1 + Line 2 live inside .eqp-left as a 2-row grid --- */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "q time streak"
      "prog prog prog";
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 1px !important;
    min-width: 0 !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{
    grid-area: q;
    white-space: nowrap;
    /* Increase question counter size by ~5px on mobile */
    font-size: clamp(16px, 3.9vw, 18px) !important;
    padding: 4px 8px !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
    grid-area: time;
    white-space: nowrap;
    /* Increase timer size by ~5px on mobile */
    font-size: clamp(16px, 3.9vw, 18px) !important;
    padding: 4px 8px !important;
    min-width: 8ch !important;
  }

  /* Streak HUD (only present in game mode). Keep it on the first line, right-aligned. */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-streak{
    grid-area: streak;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    min-width: 0;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-streak-label{
    font-variant-numeric: tabular-nums;
  }

  /* --- Line 2: progress bar full-width --- */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline{
    grid-area: prog;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    height: 4px !important;
    margin: 0 !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline span{
    height: 100% !important;
  }

  /* --- Line 3: buttons --- */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    /* Keep one line; if a very narrow viewport can't fit, allow horizontal swipe rather than wrapping/clipping. */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: none;
    touch-action: pan-x;
    contain: layout paint;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display: none; }

  /* Auto-shrink button size on small screens while keeping one row */
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    --eqp-hdr-btn: 30px;
}

/* ==========================================================
   Batch X79 — Desktop header tweaks
   - Move progress bar right by 50px
   - Streak is inserted after timer in JS (runner.js)
   ========================================================== */
@media (min-width: 821px){
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline{
    margin-left: 50px !important;
  }
}

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions button{
    height: var(--eqp-hdr-btn) !important;
    min-height: var(--eqp-hdr-btn) !important;
    max-height: var(--eqp-hdr-btn) !important;
    line-height: 1 !important;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  }

  /* Icon-style buttons become square */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-btn-icon,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-snd-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-fs-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-density-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-quests-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-profile-btn{
    width: var(--eqp-hdr-btn) !important;
    min-width: var(--eqp-hdr-btn) !important;
    max-width: var(--eqp-hdr-btn) !important;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    justify-content: center !important;
  }

  /* Keep Pause/Resume compact on mobile by hiding labels */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-pause .lbl,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-resume .lbl,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-quests-btn .lbl{
    display: none !important;
  }

  /* Make pause/resume behave like icon buttons (square) */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-pr .eqp-btn-rect{
    width: var(--eqp-hdr-btn) !important;
    min-width: var(--eqp-hdr-btn) !important;
    max-width: var(--eqp-hdr-btn) !important;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  }

  /* Prevent the control group from forcing overflow */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-pr{
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 1.2vw, 8px);
    min-width: 0;
  }
}


/* ==========================================================
   Batch X13 B6T — Mobile header: button size steps
   Avoid vw-based fractional sizing (can cause subtle jitter in fullscreen).
   ========================================================== */
@media (max-width: 420px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{ --eqp-hdr-btn: 28px; }
}
@media (max-width: 360px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{ --eqp-hdr-btn: 26px; }
}
@media (max-width: 320px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{ --eqp-hdr-btn: 24px; }
}


/* ==========================================================
   Batch X13 B6T — Mobile fullscreen stability + tighter spacing
   - Prevent subtle left/right jitter caused by centered min-width blocks when viewport width fluctuates.
   - Reduce overlay padding/gap to give the quiz card more room.
   ========================================================== */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-fullscreen,
  .eqp-hub-root.eqp-fullscreen{
    gap: 6px !important;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  }
  .eqp-quiz-root.eqp-fullscreen > .eqp-header,
  .eqp-quiz-root.eqp-fullscreen > .eqp-card,
  .eqp-quiz-root.eqp-fullscreen > .eqp-finish,
  .eqp-hub-root.eqp-fullscreen > .eqp-header,
  .eqp-hub-root.eqp-fullscreen > .eqp-card,
  .eqp-hub-root.eqp-fullscreen > .eqp-finish{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* ==========================================================
   Batch X13 B6V — Header bottom-edge stability (mobile + fullscreen)
   Goal: stop vertical "bounce" caused by dynamic viewport + sticky positioning
   ========================================================== */

/* Use stable viewport units on mobile in fit/fullscreen mode to prevent dvh bounce */
@media (max-width: 820px){
  @supports (height: 100svh){
    .eqp-quiz-root.eqp-fit{
      height: 100svh !important;
      max-height: 100svh !important;
    }
  }
  /* Fallback: prefer fixed vh var when svh isn't supported */
  @supports not (height: 100svh){
    .eqp-quiz-root.eqp-fit{
      height: calc(var(--eqp-vh, 1vh) * 100) !important;
      max-height: calc(var(--eqp-vh, 1vh) * 100) !important;
    }
  }
}

/* Sticky headers can jitter inside transformed/flex/fullscreen contexts; keep compact headers in normal flow. */
.eqp-quiz-root.eqp-fit .eqp-header,
.eqp-quiz-root.eqp-fullscreen .eqp-header,
html.eqp-fs-lock .eqp-quiz-root .eqp-header{
  position: relative !important;
  top: auto !important;
}

/* Prevent scroll anchoring from nudging the viewport during per-second DOM text updates */
.eqp-quiz-root.eqp-fit,
.eqp-quiz-root.eqp-fit *{
  overflow-anchor: none;
}
.eqp-quiz-root.eqp-fullscreen,
.eqp-quiz-root.eqp-fullscreen *{
  overflow-anchor: none;
}

/* =========================================================
   X13-B8 (2026-02-12)
   Permanent quiz header stability + restore time pressure meter

   Fixes:
   - Remove mobile pause/resume "nudge" that caused the control to ride up into other buttons
   - Restore the compact/v2 pressure strip (time pressure meter) and keep it inside the header
   - Prevent wrap-driven vertical jitter on desktop + mobile
   - Stabilize desktop scrollbar width to stop wrap thresholds flapping
   ========================================================= */

/* 1) Stop the mobile nudge that makes the control overlap other buttons */
@media (max-width: 820px){
  .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-header.eqp-header--compact .eqp-btn-resume{
    transform: none !important;
  }
}

/* 2) Keep scrollbar width stable on desktop to prevent layout reflow/jitter */
@media (min-width: 981px){
  html{ scrollbar-gutter: stable; }
  body{ overflow-y: scroll; }
}

/* 3) Force compact header to remain a single row everywhere (no wrap height changes) */
.eqp-quiz-root .eqp-header.eqp-header--compact,
.eqp-hub-root .eqp-header.eqp-header--compact,
.eqp-cat-quizzes .eqp-header.eqp-header--compact,
.eqp-cats-mount .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
  align-items: center !important;
  /* reserve space so the pressure strip never overlays the buttons */
  padding-bottom: 14px !important;
}

.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{
  height: 0;
  width: 0;
  display: none;
}

/* 4) Restore and pin the compact/v2 pressure strip inside the header */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  display: flex !important;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact{
  position: relative !important;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip{
  position: absolute !important;
  left: 10px;
  right: 10px;
  bottom: 6px !important;
  height: 4px !important;
  pointer-events: none;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  height: 100% !important;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure .eqp-pressure,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure .eqp-pressure > span{
  height: 100% !important;
}


/* =========================================================
   X13-B8 (2026-02-12)
   Permanent quiz header stability + restore time pressure meter

   Fixes:
   - Remove mobile pause/resume "nudge" that pushed the control into the button row
   - Restore the compact/v2 pressure strip (time pressure meter) and keep it inside the header
   - Prevent wrap-driven vertical jitter on desktop + mobile
   - Stabilize scrollbar width on desktop so vw-based sizing doesn't "breathe"
   ========================================================= */

/* Desktop: keep scrollbar gutter stable so content width doesn't flap */
@media (min-width: 981px){
  html{ scrollbar-gutter: stable; }
  body{ overflow-y: scroll; }
}

/* Mobile: undo older nudge that caused overlap */
@media (max-width: 820px){
  .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-header.eqp-header--compact .eqp-btn-resume{
    transform: none !important;
  }
}

/* Restore pressure strip visibility for compact/v2 header */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  display: flex !important;
}

/* Reserve a small bottom band for the strip so it never overlaps buttons */
.eqp-quiz-root .eqp-header.eqp-header--compact,
.eqp-hub-root .eqp-header.eqp-header--compact,
.eqp-cat-quizzes .eqp-header.eqp-header--compact,
.eqp-cats-mount .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding-bottom: 14px !important;
}

/* Keep actions in a single line; allow horizontal scroll instead of wrapping */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{
  height: 0;
  width: 0;
  display: none;
}

/* Pressure strip placement: keep it anchored inside the reserved band */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip{
  left: 10px !important;
  right: 10px !important;
  bottom: 6px !important;
  height: 4px !important;
}

/* =========================================================
   X13-B8 (2026-02-12)
   Permanent quiz header stability + restore time pressure meter

   Fixes:
   - Remove mobile pause/resume "nudge" that pushed the control into the button row
   - Restore the compact/v2 pressure strip (time pressure meter) and keep it inside the header
   - Prevent wrap-driven vertical jitter on desktop + mobile
   - Stabilize scrollbar width on desktop to avoid width-triggered reflow
   ========================================================= */

/* Desktop: reserve scrollbar gutter so content width doesn't flap (wrap jitter) */
@media (min-width: 981px){
  html{ scrollbar-gutter: stable; }
  body{ overflow-y: scroll; }
}

/* Mobile: remove the forced upward translate that caused overlap */
@media (max-width: 820px){
  .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-header.eqp-header--compact .eqp-btn-resume{
    transform: none !important;
  }
}

/* Restore v2/compact pressure strip visibility (some earlier patches hid it) */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  display: flex !important;
}

/* Reserve space so the strip never overlays the button row */
.eqp-quiz-root .eqp-header.eqp-header--compact,
.eqp-hub-root .eqp-header.eqp-header--compact,
.eqp-cat-quizzes .eqp-header.eqp-header--compact,
.eqp-cats-mount .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding-bottom: 14px !important;
}

/* Keep actions on a single line; horizontal scroll instead of wrapping */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{
  height: 0;
  width: 0;
  display: none;
}

/* Strip placement: sit in the reserved padding area */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip{
  bottom: 6px !important;
  height: 4px !important;
}


/* =========================================================
   X13-B8 (2026-02-12)
   Permanent quiz header stability + restore time pressure meter

   Fixes:
   - Remove mobile pause/resume "nudge" that pushed the control into the button row
   - Restore the compact/v2 pressure strip (time pressure meter) and keep it inside the header
   - Prevent wrap-driven vertical jitter on desktop + mobile
   - Stabilize scrollbar width on desktop to avoid wrap threshold flapping
   ========================================================= */

/* Desktop: keep scrollbar gutter stable so vw-based sizing doesn't "breathe" */
@media (min-width: 981px){
  html{ scrollbar-gutter: stable; }
  body{ overflow-y: scroll; }
}

/* Mobile: remove the upward nudge that caused overlap */
@media (max-width: 820px){
  .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-header.eqp-header--compact .eqp-btn-resume{
    transform: none !important;
  }
}

/* Restore pressure strip for compact/v2 header (some earlier hotfixes hid it entirely) */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure{
  display: flex !important;
}

/* Reserve space at the bottom so the strip never overlaps the button row */
.eqp-quiz-root .eqp-header.eqp-header--compact,
.eqp-hub-root .eqp-header.eqp-header--compact,
.eqp-cat-quizzes .eqp-header.eqp-header--compact,
.eqp-cats-mount .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding-bottom: 14px !important;
}

/* Keep the action buttons on a single line; scroll horizontally instead of wrapping */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-hub-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cat-quizzes .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar,
.eqp-cats-mount .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{
  height: 0;
  width: 0;
  display: none;
}

/* Strip geometry: keep it low and thin; use reserved padding for clearance */
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip{
  bottom: 6px !important;
  height: 4px !important;
}
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure,
.eqp-ui-v2 .eqp-header.eqp-header--compact .eqp-strip-pressure .eqp-pressure{
  height: 100% !important;
}


/* =========================================
   Batch X13 b9 (2026-02-12)
   Move time pressure meter into the quiz card (below title),
   and remove header/pre-gap meters to stop sticky header jitter.
   Also remove header XP/Level indicator (progress is in profile panel).
   ========================================= */

/* Never render any legacy pre-gap/gap bars that can shift sticky headers */
.eqp-quiz-root .eqp-pre-gap,
.eqp-cat-quizzes .eqp-pre-gap,
.eqp-cats-mount .eqp-pre-gap,
.eqp-quiz-root .eqp-gap,
.eqp-cat-quizzes .eqp-gap,
.eqp-cats-mount .eqp-gap{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* If a v2/compact header strip exists, hide any pressure host */
.eqp-ui-v2 .eqp-header--v2 .eqp-strip-pressure,
.eqp-ui-v2 .eqp-header--compact .eqp-strip-pressure{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card meter placement + spacing */
.eqp-card-pressure{
  width: 100%;
  margin: 6px 0 10px 0;
}
.eqp-card-pressure .eqp-pressure{
  margin-top: 0 !important;
}

/* Mobile: older patches hid .eqp-pressure globally; re-enable for the card meter only */
@media (max-width: 767px){
  .eqp-quiz-root .eqp-card-pressure .eqp-pressure{
    display: block !important;
  }
}

/* Remove header XP/Level indicator */
.eqp-header .eqp-profile-meta{
  display: none !important;
}



/* =========================================================
   Batch X13 b10: Desktop header stability + card meter visibility
   - Prevent vertical "bounce" when the header re-renders / enhances after first answer
   - Disable scroll anchoring adjustments caused by feedback insertion
   ========================================================= */
.eqp-quiz-root,
.eqp-quiz-root .eqp-header,
.eqp-quiz-root .eqp-card,
.eqp-quiz-root .eqp-feedback{
  overflow-anchor: none !important;
}

/* Reserve a stable header box height so inner content never re-centers vertically */
.eqp-quiz-root .eqp-header.eqp-header--compact{
  min-height: 50px !important; /* 34px controls + 16px padding */
  padding-bottom: 8px !important; /* no header meter padding */
}

/* Reserve stable actions height even before enhanceHeader mounts controls */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
  min-height: 34px !important;
  align-items: center !important;
}

/* Make pills stable height */
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q,
.eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
  min-height: 28px !important;
}

/* Ensure any legacy header pressure bar is never shown (meter is in-card) */
.eqp-quiz-root .eqp-header .eqp-pressure{
  display: none !important;
}


/* === Batch X13 b11: stability inheritance (from 1.9.9.168) ===
   Goal: eliminate header bounce/jitter and keep header buttons vertically aligned.
*/
.eqp-quiz-root{ overflow-anchor: none; }
.eqp-quiz-root .eqp-header{ overflow-anchor: none; }

/* Ensure header rows are always center-aligned */
.eqp-quiz-root .eqp-header,
.eqp-quiz-root .eqp-header .eqp-topbar,
.eqp-quiz-root .eqp-header .eqp-topbar-left,
.eqp-quiz-root .eqp-header .eqp-topbar-right,
.eqp-quiz-root .eqp-header .eqp-hdr-actions,
.eqp-quiz-root .eqp-header .eqp-controls,
.eqp-quiz-root .eqp-header .eqp-actions,
.eqp-quiz-root .eqp-header .eqp-pr,
.eqp-quiz-root .eqp-header .eqp-profile{
  align-items: center !important;
}

/* Prevent multi-line button wraps from changing height; allow horizontal scroll instead */
.eqp-quiz-root .eqp-header .eqp-hdr-actions{
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eqp-quiz-root .eqp-header .eqp-hdr-actions::-webkit-scrollbar{ display:none; }

/* Force icon/buttons to share a common vertical box */
.eqp-quiz-root .eqp-header .eqp-btn-icon,
.eqp-quiz-root .eqp-header .eqp-snd-toggle,
.eqp-quiz-root .eqp-header .eqp-quests-btn,
.eqp-quiz-root .eqp-header .eqp-density-toggle,
.eqp-quiz-root .eqp-header .eqp-fs-toggle,
.eqp-quiz-root .eqp-header .eqp-btn-pause,
.eqp-quiz-root .eqp-header .eqp-btn-resume,
.eqp-quiz-root .eqp-header .eqp-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: 34px;
  min-height: 34px;
}

/* Make numeric readouts stable and prevent baseline shifts */
.eqp-quiz-root .eqp-header .eqp-time,
.eqp-quiz-root .eqp-header .eqp-timer,
.eqp-quiz-root .eqp-header .eqp-q{
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Slight containment reduces repaint ripple from card updates */
.eqp-quiz-root .eqp-header{ contain: layout paint; }


/* ==========================================================
   Batch X13 b12 — Header jitter fix (desktop + mobile)
   - Keep Pause/Resume as a SINGLE button (JS)
   - Remove press/hover translateY that causes visible "bouncing"
   - Prevent header reflow/wrap from timer/Q/progress updates
   ========================================================== */

.eqp-quiz-root, .eqp-hub-root{
  --eqp-pr-nudge: 0px; /* override legacy nudge */
}

/* Never wrap the header rows on desktop; overflow actions horizontally instead */
.eqp-quiz-root .eqp-header.eqp-header--compact,
.eqp-hub-root .eqp-header.eqp-header--compact{
  flex-wrap: nowrap !important;
  align-items: center !important;
  align-content: center !important;
}

/* Keep left meta on a single line */
.eqp-quiz-root .eqp-header .eqp-left,
.eqp-hub-root .eqp-header .eqp-left{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: .35rem !important;
}

/* Actions: single line + horizontal scroll instead of wrapping (prevents vertical jumps) */
.eqp-quiz-root .eqp-header .eqp-hdr-actions,
.eqp-hub-root .eqp-header .eqp-hdr-actions{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.eqp-quiz-root .eqp-header .eqp-hdr-actions::-webkit-scrollbar,
.eqp-hub-root .eqp-header .eqp-hdr-actions::-webkit-scrollbar{
  display: none;
}

/* Single toggle button should not change overall header height; give it a stable footprint */
.eqp-quiz-root .eqp-header .eqp-pr .eqp-btn-rect,
.eqp-hub-root .eqp-header .eqp-pr .eqp-btn-rect{
  min-width: 86px;
}

/* Remove all translateY hover/active effects in header that cause visible up/down jitter */
.eqp-quiz-root .eqp-header .eqp-btn,
.eqp-quiz-root .eqp-header .eqp-btn-rect,
.eqp-quiz-root .eqp-header .eqp-snd-toggle,
.eqp-quiz-root .eqp-header .eqp-quests-btn,
.eqp-quiz-root .eqp-header .eqp-fs-toggle,
.eqp-quiz-root .eqp-header .eqp-profile-btn,
.eqp-hub-root .eqp-header .eqp-btn,
.eqp-hub-root .eqp-header .eqp-btn-rect,
.eqp-hub-root .eqp-header .eqp-snd-toggle,
.eqp-hub-root .eqp-header .eqp-quests-btn,
.eqp-hub-root .eqp-header .eqp-fs-toggle,
.eqp-hub-root .eqp-header .eqp-profile-btn{
  transform: none !important;
  transition: none !important;
}

.eqp-quiz-root .eqp-header .eqp-btn:hover,
.eqp-quiz-root .eqp-header .eqp-btn:active,
.eqp-quiz-root .eqp-header .eqp-btn-rect:hover,
.eqp-quiz-root .eqp-header .eqp-btn-rect:active,
.eqp-quiz-root .eqp-header .eqp-snd-toggle:hover,
.eqp-quiz-root .eqp-header .eqp-snd-toggle:active,
.eqp-quiz-root .eqp-header .eqp-quests-btn:hover,
.eqp-quiz-root .eqp-header .eqp-quests-btn:active,
.eqp-hub-root .eqp-header .eqp-btn:hover,
.eqp-hub-root .eqp-header .eqp-btn:active,
.eqp-hub-root .eqp-header .eqp-btn-rect:hover,
.eqp-hub-root .eqp-header .eqp-btn-rect:active,
.eqp-hub-root .eqp-header .eqp-snd-toggle:hover,
.eqp-hub-root .eqp-header .eqp-snd-toggle:active,
.eqp-hub-root .eqp-header .eqp-quests-btn:hover,
.eqp-hub-root .eqp-header .eqp-quests-btn:active{
  transform: none !important;
}

/* Keep timer + question counter vertically centered and numerically stable */
.eqp-quiz-root .eqp-header .eqp-q,
.eqp-quiz-root .eqp-header .eqp-time,
.eqp-hub-root .eqp-header .eqp-q,
.eqp-hub-root .eqp-header .eqp-time{
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   Batch X13-b13 — Pause/Start offset + mobile header jitter guard
   Notes:
   - Desktop: lift Start/Pause/Resume control by 6px as requested.
   - Mobile: replace wrap-based compact header with a stable 2-row grid so timer/counter/buttons never "bounce".
   ========================================================= */

@media (min-width: 981px){
  .eqp-header.eqp-header--compact .eqp-pr .eqp-btn-pause{
    position: relative;
    top: -6px;
  }
}

@media (max-width: 980px){
  /* Stable 2-row layout: row 1 = counter/time + actions, row 2 = progress bar */
  .eqp-header.eqp-header--compact{
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap !important;
  }

  .eqp-header.eqp-header--compact .eqp-left{
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .eqp-header.eqp-header--compact .eqp-hdr-actions{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: flex;
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .eqp-header.eqp-header--compact .eqp-right{
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    margin-top: 0 !important; /* grid handles spacing via gap */
  }

  /* Lock chip heights to prevent baseline micro-jitter from font rendering */
  .eqp-header.eqp-header--compact .eqp-q,
  .eqp-header.eqp-header--compact .eqp-time{
    height: 28px;
    box-sizing: border-box;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }
}

/* =========================================================
   Batch X13 b14 — Mobile header jitter hard-fix + profile panel scroll fix
   - Stop any wrap-induced vertical bouncing.
   - Make numerals tabular + reserve chip widths.
   - Disable header button micro-transforms/transitions on mobile.
   - Make profile panel show full content on desktop; scroll only when needed.
   ========================================================= */

/* Make counters/timer use tabular numerals everywhere (prevents width micro-shifts) */
.eqp-header.eqp-header--compact .eqp-time,
.eqp-header.eqp-header--compact .eqp-q{
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px){
  /* Force a single, stable top row: left chips + actions (scroll horizontally if needed) */
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "left actions" !important;
    align-items:center !important;
    column-gap:8px !important;
    row-gap:0 !important;
    padding:6px 8px !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
    grid-area:left !important;
    min-width:0 !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    white-space:nowrap !important;
  }
  /* Reserve enough width so chip widths don't fluctuate with digit changes */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{
    min-width: 70px;
    justify-content:center;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
    min-width: 84px;
    justify-content:center;
  }
  /* Keep the inline progress bar from forcing extra layout work on narrow widths */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress{
    display:none !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    grid-area:actions !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    max-width: 58vw !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions > *{ flex:0 0 auto !important; }

  /* Kill all header button micro-lifts / nudges on mobile (they can present as jitter) */
  .eqp-quiz-root .eqp-header.eqp-header--compact{ --eqp-pr-nudge: 0px !important; }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-snd-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-bgm-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-quests-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-profile-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-density-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-fs-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-resume{
    transform:none !important;
    transition:none !important;
  }
}

/* Profile panel: show full content on desktop; scroll the whole panel only when needed */
@media (min-width: 821px){
  .eqp-profile-panel{
    max-height: calc(100vh - 32px) !important;
    height: auto !important;
    overflow-y: auto !important;
  }
  .eqp-profile-panel-inner{ height:auto !important; min-height:0 !important; }
  .eqp-profile-body{
    flex: 0 0 auto !important;
    overflow: visible !important;
    max-height: none !important;
  }
}

/* Move profile Close button down slightly for better visual balance */
.eqp-profile-close{ position: relative; top: 6px; }

/* Batch X13 b14: progress bar moved to card on mobile (header progress hidden there) */
.eqp-card-progress{ display:none; }
.eqp-card-progress .eqp-progress{ margin-top:0 !important; }
@media (max-width: 820px){
  .eqp-card--question .eqp-card-progress{ display:block; margin-top:6px; }
}



/* ==========================================================
   Batch X13 b15 — Mobile header layout fix + profile panel scroll parity
   - Prevent overlap between meta chips and buttons on mobile header.
   - Make profile panel scroll the full panel on mobile (not only inner body).
   ========================================================== */

/* --- Mobile header: 2-row grid (meta + actions), no overlap --- */
@media (max-width: 768px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    display:grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items:stretch !important;
    justify-content:stretch !important;
    gap: 6px !important;
  }

  /* Hide header progress bar on mobile (progress is rendered in the quiz card) */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-right{
    display:none !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap: 8px;
    flex-wrap:nowrap;
    overflow:hidden;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
    height: 30px;
    line-height: 1;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* Actions row: never wrap into a new line; horizontal scroll instead */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start !important;
    gap: 8px;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
    padding-bottom:2px; /* avoids "baseline bounce" on some mobile browsers */
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-controls{
    display:flex;
    align-items:center;
    gap: 6px;
    flex-wrap:nowrap !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-controls > *{
    flex: 0 0 auto;
  }

  /* Hard-disable micro-lifts/transforms on mobile header controls (can present as jitter). */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-icon,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-snd-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-quests-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-fs-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-resume{
    transform:none !important;
    transition:none !important;
  }

  /* Avoid focus outline reflow on mobile */
  .eqp-quiz-root .eqp-header.eqp-header--compact button:focus{
    outline: none;
  }
}

/* --- Profile panel: on mobile, scroll the whole panel (header/body/footer together) --- */
@media (max-width: 768px){
  .eqp-profile-panel{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    /* Use the visual viewport height (JS-maintained) so the panel can reach the bottom even
       when Chrome's address bar is visible. This fixes the "can't scroll to the last item" bug. */
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    border-radius: 0 !important;
    transform: none !important;
    overflow-y: auto !important; /* whole panel scrolls */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .eqp-profile-panel.eqp-profile-open{
    transform: none !important;
  }
  .eqp-profile-panel-inner{
    height:auto !important;
    min-height:100% !important;
  }
  .eqp-profile-body{
    overflow: visible !important; /* no inner-only scroll traps */
    min-height: auto !important;
    flex: 0 0 auto !important;
  }
  .eqp-profile-footer{
    flex: 0 0 auto;
  }

  /* Close button: keep the 6px drop on mobile too */
  .eqp-profile-close{
    margin-top: 6px !important;
  }
}

/* Batch X69: Mobile v4 — nudge Start/Pause/Resume button down slightly (1.5px) */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-pr .eqp-btn-pause{
    position: relative;
    top: 1.0px;
  }
}




/* ==========================================================
   Batch X13 b16 — Finish screen bottom stability + modern prep screen
   - Make finish screen internally scrollable to prevent bottom cropping/jitter.
   - Remove duplicate XP/Level by keeping only the inline XP line under "Items".
   - Modern "Preparing quiz" loader with spinner.
   ========================================================== */

/* Modern prep screen */
.eqp-prep-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 16px;
}
.eqp-prep{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 12px;
  width: min(420px, 100%);
  text-align:center;
}
.eqp-prep-title{
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 1.02rem;
}
.eqp-prep-sub{
  font-size: .9rem;
  opacity: .8;
}
.eqp-spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(148,163,184,.35);
  border-top-color: var(--eqp-accent, #7c5cff);
  animation: eqpSpin .9s linear infinite;
}
@keyframes eqpSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Finish screen: ensure all content is reachable (no cropping), especially in fullscreen */
.eqp-root.eqp-fullscreen .eqp-card.eqp-finish,
.eqp-hub-root.eqp-fullscreen .eqp-card.eqp-finish,
.eqp-quiz-root.eqp-fullscreen .eqp-card.eqp-finish{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}

/* Also allow internal scroll for finish card when not fullscreen but viewport is short */
@media (max-height: 740px){
  .eqp-card.eqp-finish{
    max-height: 82vh;
    overflow-y:auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}



/* ==========================================================
   Batch X13 b18 — Header + finish stability + borders
   - Restore mobile 3-row header with progress bar in header
   - Add thin borders around card pressure meter and image-question options column
   - Force 1-column options for image-split questions on desktop
   - Fix finish screen bottom jitter by enabling internal scrolling on finish card
   ========================================================== */

/* 1) Circle the time pressure meter on the quiz card with a thin border */
.eqp-card-pressure{
  border: 1px solid var(--eqp-border);
  border-radius: 14px;
  padding: 8px 10px;
  box-sizing: border-box;
}

/* 2) Image questions (desktop split): circle the options column + force 1-column options */
@media (min-width: 980px){
  .eqp-card.eqp-split .eqp-main-col{
    border: 1px solid var(--eqp-border);
    border-radius: 16px;
    padding: 12px;
    box-sizing: border-box;
  }
  .eqp-card.eqp-split .eqp-optlist{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* 3) Mobile header: restore 3-row setup (meta row, progress row, actions row) */
@media (max-width: 820px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
  }

  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{
    grid-column: 1;
    grid-row: 1;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
    grid-column: 2;
    grid-row: 1;
  }

  /* Progress bar lives in header again */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress{
    grid-column: 1 / -1;
    grid-row: 2;
    display: block !important;
    height: 8px;
    margin: 0 !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress > span{
    height: 100% !important;
  }

  /* Actions row: stable, no wrapping */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions > *{ flex: 0 0 auto !important; }
}

/* 4) Finish screen bottom jitter fix: always allow internal scroll on finish card */
.eqp-quiz-root .eqp-card.eqp-finish{
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  max-height: 82vh !important;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.eqp-quiz-root.eqp-fit .eqp-card.eqp-finish,
.eqp-quiz-root.eqp-fullscreen .eqp-card.eqp-finish{
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
}



/* ==========================================================
   Batch X13 b19 — Mobile header anti-jitter + button left shift
   - Stop mobile header button jitter by disabling transforms/transitions
   - Keep progress bar always visible/stable
   - Shift mobile header buttons left by 7px
   - Refine image-question options border to wrap options only (not feedback/submit)
   ========================================================== */

/* Image questions (desktop split): border should wrap ONLY the options list */
@media (min-width: 980px){
  .eqp-card.eqp-split .eqp-main-col{
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    box-sizing: border-box !important;
  }
  .eqp-card.eqp-split .eqp-optlist{
    border: 1px solid var(--eqp-border);
    border-radius: 16px;
    padding: 12px;
    box-sizing: border-box;
  }
  .eqp-card.eqp-split .eqp-optlist{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Mobile header: kill hover/active transforms and lock row spacing so progress bar never "blinks" */
@media (max-width: 820px){
  :root{ --eqp-pr-nudge: 0px; } /* neutralize global pause/resume nudge on mobile */

  /* Ensure meta chips have stable box metrics */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{
    height: 30px !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    font-variant-numeric: tabular-nums;
  }

  /* Progress row must always be visible; prevent any clipping/overlap */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Actions row: shift left by 7px and disable transforms/transitions that cause jitter */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    margin-left: -7px !important;
    padding-left: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Kill all lift/press animations within the mobile header (hover can get "stuck" on touch devices) */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions *,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions *:hover,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions *:active,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-rect,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-rect:hover,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-rect:active,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-snd-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-snd-toggle:hover,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-snd-toggle:active,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-quests-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-quests-btn:hover,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-quests-btn:active{
    transform: none !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
}



/* ==========================================================
   Batch X13 b20 — final UI tweaks
   - Desktop: nudge feedback box down for image-split questions
   - Mobile: ensure profile button is fully visible, progress bar never blinks
   - Fullscreen: stabilize viewport height to eliminate finish-screen bottom jitter
   ========================================================== */

/* Desktop (image questions): give the feedback box a touch more breathing room */
@media (min-width: 980px){
  .eqp-card.eqp-split .eqp-feedback{
    margin-top: 15px !important; /* +3px vs default */
  }
}

/* Mobile header: keep controls within bounds and freeze box metrics */
@media (max-width: 820px){
  /* Ensure the actions row never clips the last button (profile) */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    padding-right: 10px !important;
    min-height: calc(var(--eqp-hdr-btn, 30px) + 4px) !important;
    box-sizing: border-box !important;
  }

  /* Make the profile chip render fully (letter/emoji centered, no clipping) */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-profile-btn{
    font-size: 14px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  /* Give the profile wrapper a tiny trailing margin so it doesn't look cut */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions > .eqp-profile{
    margin-right: 6px !important;
  }

  /* Progress bar must never collapse or become hidden */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    min-height: 8px !important;
    height: 8px !important;
  }

  /* Lock consistent box metrics for all header controls (prevents subtle vertical bounce) */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions button,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-snd-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-quests-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-density-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-fs-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-profile-btn{
    box-sizing: border-box !important;
    border-width: 1px !important;
  }
}

/* Fullscreen container: use a stable, JS-backed vh variable (avoids mobile browser UI bounce) */
.eqp-quiz-root.eqp-fullscreen,
.eqp-hub-root.eqp-fullscreen,
.eqp-root.eqp-fullscreen{
  height: calc(var(--eqp-vh, 1vh) * 100) !important;
  min-height: calc(var(--eqp-vh, 1vh) * 100) !important;
}

/* In fullscreen, keep finish card scrolling smooth without forcing always-on scrollbars */
.eqp-quiz-root.eqp-fullscreen .eqp-card.eqp-finish,
.eqp-hub-root.eqp-fullscreen .eqp-card.eqp-finish{
  overflow-y: auto !important;
}


/* ==========================================================
   Batch X14 — CSS cleanup for jitter (mobile header + finish screen)
   - Use a stable, JS-seeded --eqp-vh for BOTH fit + fullscreen containers (stops bottom "bounce")
   - Rebuild the mobile compact header as an explicit 3-row layout (meta / progress / actions)
   - Remove negative offsets that can clip the profile button
   - Disable finish-card hover lifts (prevents perceived jitter on desktop)
   ========================================================== */

/* Fit mode: use stable vh var instead of dynamic dvh (prevents mobile address-bar reflow) */
.eqp-quiz-root.eqp-fit,
.eqp-hub-root.eqp-fit,
.eqp-root.eqp-fit{
  height: calc(var(--eqp-vh, 1vh) * 100) !important;
  max-height: calc(var(--eqp-vh, 1vh) * 100) !important;
  min-height: calc(var(--eqp-vh, 1vh) * 100) !important;
}

@supports (height: 100svh){
  .eqp-quiz-root.eqp-fit,
  .eqp-hub-root.eqp-fit,
  .eqp-root.eqp-fit{
    height: 100svh !important;
    max-height: 100svh !important;
    min-height: 100svh !important;
  }
}

/* Fullscreen overlay: anchor to top with a stable height (avoid inset+height over-constraint) */
.eqp-quiz-root.eqp-fullscreen,
.eqp-hub-root.eqp-fullscreen,
.eqp-root.eqp-fullscreen{
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: calc(var(--eqp-vh, 1vh) * 100) !important;
  min-height: calc(var(--eqp-vh, 1vh) * 100) !important;
}

@supports (height: 100svh){
  .eqp-quiz-root.eqp-fullscreen,
  .eqp-hub-root.eqp-fullscreen,
  .eqp-root.eqp-fullscreen{
    height: 100svh !important;
    min-height: 100svh !important;
  }
}

/* Finish card: no hover "lift" (removes any perceived up/down jitter on desktop) */
.eqp-card.eqp-finish,
.eqp-card.eqp-finish:hover{
  transform: none !important;
}
@media (prefers-reduced-motion:no-preference){
  .eqp-card.eqp-finish{ transition: none !important; }
}

/* Mobile compact header: explicit 3-row layout so progress never blinks */
@media (max-width: 820px){
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 6px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  /* Row 1–2: meta + progress (progress is inside .eqp-left) */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-left{
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q{ grid-column: 1; grid-row: 1; }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time{ grid-column: 2; grid-row: 1; }

  /* Progress bar: always visible, fixed height */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 8px !important;
    min-height: 8px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress > span,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--inline > span{
    height: 100% !important;
  }

  /* Row 3: actions — stable box, no negative offsets, no clipping */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 8px 0 0 !important;
    margin-left: 0 !important; /* override b19 left shift */
    box-sizing: border-box !important;
    min-height: 34px !important;
    height: 34px !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions::-webkit-scrollbar{ display:none; }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions > *{ flex: 0 0 auto !important; }

  /* Profile button: fixed square hitbox so it never looks "sliced" */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-profile-btn{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions > .eqp-profile{
    margin-right: 10px !important;
  }
}




/* ==========================================================
   Batch X16 — Option A redesign
   1) Mobile quiz header: fixed-height 2-row minimal header + "More" bottom sheet
   2) Finish screen: fixed overlay with scrollable body + fixed footer (mobile + desktop)
   ========================================================== */

/* Prevent background page scroll when overlays are open */
html.eqp-modal-open, body.eqp-modal-open{ overflow: hidden !important; height: 100% !important; overscroll-behavior: none !important; }
html.eqp-finish-locked, body.eqp-finish-locked{ overflow: hidden !important; overscroll-behavior: none !important; }
body.eqp-finish-locked{ position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; }

/* ---------- Mobile minimal header (stable 2-row) ---------- */
@media (max-width: 820px){
  .eqp-quiz-root .eqp-header.eqp-header--minimal{
    /* Keep it visually consistent with existing header styling */
    margin-bottom: calc(10px + var(--eqp-vv-inset-b, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-row--a{
    height: 48px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-left,
  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-center,
  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-right{
    min-width: 0 !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-left{
    justify-self: start !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-center{
    justify-self: center !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-right{
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-q{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.1 !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-time{
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-more{
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    line-height: 1 !important;
  }

  /* Progress row: always visible, full width */
  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-row--b{
    height: 12px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 12px !important;
    max-height: 12px !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-progress{
    width: 100% !important;
    min-width: 0 !important;
    height: 10px !important;
  }

  /* Hide the desktop inline progress if any older CSS tries to show it */
  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-progress--inline{
    display: none !important;
  }

  /* Keep injected controls present in DOM but never participating in layout */
  .eqp-quiz-root .eqp-header.eqp-header--minimal .eqp-hdr-menu-host{
    display: none !important;
  }
}

/* ---------- Mobile "More" bottom sheet ---------- */
.eqp-more-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000007 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.eqp-more-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: var(--eqp-finish-backdrop, rgba(15, 23, 42, 0.55)) !important;
}

.eqp-more-sheet{
  position: relative !important;
  width: 100% !important;
  max-width: 720px !important;
  background: var(--eqp-finish-card, var(--eqp-card-solid, #fff)) !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  box-shadow: 0 -14px 40px rgba(0,0,0,.25) !important;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: min(70svh, 520px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.eqp-more-handle{
  width: 44px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.6) !important;
  margin: 0 auto !important;
}

.eqp-more-title{
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--eqp-text, #0f172a) !important;
  text-align: center !important;
}

.eqp-more-body{
  overflow: auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

.eqp-more-body .eqp-hdr-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-bottom: 6px !important;
}

/* Ensure the profile button is never clipped in the menu */
.eqp-more-body .eqp-profile-btn{
  overflow: visible !important;
  clip-path: none !important;
}

/* ---------- Finish overlay (mobile + desktop) ---------- */
.eqp-finish-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000006 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: none !important;
}

.eqp-finish-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: var(--eqp-finish-backdrop, rgba(15, 23, 42, 0.55));
}

.eqp-finish-sheet{
  position: relative !important;
  width: min(720px, 100%) !important;
  touch-action: pan-y !important;
  background: var(--eqp-finish-card, var(--eqp-card-solid, #fff));
  color: var(--eqp-text, #0f172a);
  border: 1px solid var(--eqp-border, rgba(0,0,0,.08));
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.30) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(92vh, 680px) !important;
  max-height: min(92svh, 680px) !important;
  /* Batch C: prefer visualViewport-based height where available */
  max-height: min(calc(var(--eqp-vv-h, 100dvh) - 48px), 680px) !important;
  overflow: hidden !important;
  transform: none !important; /* kill any hover/transform jitter */
}

@media (max-width: 820px){
  .eqp-finish-overlay{
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
    top: var(--eqp-vv-top, 0px) !important;
    bottom: auto !important;
    height: var(--eqp-vv-h, 100dvh) !important;
  }
  .eqp-finish-sheet{
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 8px) !important;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - 8px) !important;
    max-height: calc(var(--eqp-vv-h, 100dvh) - env(safe-area-inset-top, 0px) - 8px - var(--eqp-vv-inset-b, 0px)) !important;
  }
}

.eqp-finish-head{
  padding: 21px !important;
  border-bottom: 1px solid var(--eqp-border, rgba(148,163,184,.35)) !important;
}

.eqp-finish-head h3{
  margin: 0 0 6px 0 !important;
}

.eqp-finish-meta{
  margin: 0 0 8px 0 !important;
  color: var(--eqp-muted, rgba(100,116,139,1)) !important;
  font-size: 0.95rem !important;
}

.eqp-finish-body{
  padding: 21px !important;
  overflow: auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

.eqp-finish-foot{
  padding: 12px 21px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid var(--eqp-border, rgba(148,163,184,.35)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.eqp-finish-foot .eqp-actions{
  display: flex !important;
  gap: 10px !important;
}

.eqp-finish-foot .eqp-actions .eqp-btn{
  flex: 1 1 auto !important;
}

.eqp-finish-foot .eqp-finish-footer{
  text-align: center !important;
  font-size: 0.9rem !important;
}

.eqp-finish-foot .eqp-change-player-link{
  cursor: pointer !important;
  text-decoration: underline !important;
}


/* =========================================================
   Batch X36 — Finish screen: keep buttons accessible
   - When treat content is long, the mid section becomes scrollable
     while the action buttons stay docked inside the finish card.
   ========================================================= */


/* Batch X37 — Finish treat area scrollbar (when treat text is long) */
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-body{
  /* Make the treat area the scroll container (not the whole mid wrapper) */
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* Ensure overflow can occur and scrollbar is visible when treat content is long */
  /* Fill the available mid space so content never hides behind the footer buttons */
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
  padding-bottom: 22px !important; /* keep last lines clear of the button bar */
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) transparent;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll::-webkit-scrollbar{
  width: 10px;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.45);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll::-webkit-scrollbar-track{
  background: transparent;
}
/* Batch X38 — Treat scrollbar: apply even if finish variant changes */
.eqp-finish-sheet .eqp-finish-treat-scroll{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) transparent;
}

/* Desktop: allow treat area to use available height inside the finish sheet */
@media (min-width: 821px){
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
    max-height: none !important;
  }
}

.eqp-finish-sheet.eqp-finish--v2{
  display: flex !important;
  flex-direction: column !important;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-top{
  flex: 0 0 auto !important;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative;
  z-index: 1;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
  height: 100% !important;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
  flex: 0 0 auto !important;
  padding: 12px 21px calc(12px + env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  border-top: 1px solid var(--eqp-border, rgba(148,163,184,.35)) !important;
  background: var(--eqp-finish-card, var(--eqp-card-solid, #fff)) !important;
  position: relative;
  z-index: 2;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
  flex: 1 1 calc(50% - 10px) !important;
  min-width: 150px !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  min-height: 40px !important;
  box-shadow: none !important;
  background: rgba(148,163,184,.10) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
}

/* Make the “more” icon button look like the others */
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-icon{
  flex: 0 0 44px !important;
  min-width: 44px !important;
  width: 44px !important;
  padding: 0 !important;
}

/* Guest-locked download: greyed out but still clickable (shows toast) */
.eqp-finish-sheet.eqp-guest-mode .eqp-btn-download.eqp-guest-locked{
  opacity: .55 !important;
  filter: grayscale(1) !important;
}

/* Finish greeting: nudge right slightly for nicer alignment */
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-greeting{
  padding-left: 8px !important;
}

/* Toast UI (used for guest-locked actions) */
.eqp-toast{
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  z-index: 1000012;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  font-weight: 700;
  max-width: min(520px, calc(100vw - 24px));
  text-align: center;
  pointer-events: none;
}
.eqp-toast.is-in{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}
@media (max-width: 420px){
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* Finish overlay v2: stats + primary actions + finish menu */
.eqp-finish-stats{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
@media (max-width: 520px){
  .eqp-finish-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.eqp-finish-stat{
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid var(--eqp-border, rgba(148,163,184,.35)) !important;
  background: rgba(255,255,255,0.04) !important;
}
.eqp-finish-stat-label{
  font-size: 0.75rem !important;
  line-height: 1.1 !important;
  color: var(--eqp-muted, rgba(100,116,139,1)) !important;
}
.eqp-finish-stat-value{font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin-top: 2px !important;
  color: var(--eqp-finish-accent, var(--eqp-text));
}
.eqp-finish-stat-sub{
  font-size: 0.75rem !important;
  color: var(--eqp-muted, rgba(100,116,139,1)) !important;
  margin-top: 2px !important;
}

/* We render XP/level in stat cards */
.eqp-finish-overlay .eqp-xp-line{
  display: none !important;
}

.eqp-finish-primary{
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}
.eqp-finish-primary .eqp-btn{
  flex: 1 1 0 !important;
}
.eqp-finish-primary .eqp-btn-icon{
  flex: 0 0 auto !important;
  width: 46px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.eqp-finish-primary .eqp-btn,
.eqp-finish-more-body .eqp-btn,
.eqp-finish-more-close{
  touch-action: manipulation !important;
}
@media (max-width: 420px){
  .eqp-finish-primary{
    flex-wrap: wrap !important;
  }
  .eqp-finish-primary .eqp-btn{
    flex: 1 1 calc(50% - 6px) !important;
  }
  .eqp-finish-primary .eqp-btn-icon{
    flex: 1 1 calc(100% - 0px) !important;
    width: auto !important;
  }
}

/* Finish menu bottom sheet */
.eqp-finish-more-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000008 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: none !important;
}
.eqp-finish-more-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: var(--eqp-finish-backdrop, rgba(15, 23, 42, 0.55)) !important;
}
.eqp-finish-more-sheet{
  position: relative !important;
  width: min(92vw, 560px) !important;
  touch-action: pan-y !important;
  max-width: 720px !important;
  background: var(--eqp-finish-card, var(--eqp-card-solid, #fff)) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.28) !important;
  padding: 12px 14px !important;
  max-height: min(80svh, 620px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow: hidden !important;
}
.eqp-finish-more-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.eqp-finish-more-title{
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: var(--eqp-text, #0f172a) !important;
}
.eqp-finish-more-close{
  border: 0 !important;
  background: transparent !important;
  color: var(--eqp-text, #0f172a) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 6px !important;
  border-radius: 999px !important;
}
.eqp-finish-more-body{
  overflow: auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}
.eqp-finish-more-body .eqp-finish-actions{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.eqp-finish-more-body .eqp-finish-actions .eqp-btn{
  width: 100% !important;
}
.eqp-finish-more-body .eqp-finish-actions .eqp-new-btn{
  display: inline-flex !important;
}
.eqp-finish-more-body .eqp-share{
  margin-top: 10px !important;
}
.eqp-finish-more-body .eqp-share-btn{
  display: none !important;
}

/* Finish menu: add tiny spacing between Share and Copy */
.eqp-finish-more-body .eqp-copy-btn{
  margin-left: 3px !important;
}

/* =========================================================
   Batch X49 — Finish treat scroll reliability + menu button styling
   - Treat area scrolls on both desktop + mobile (touch + wheel)
   - Finish menu buttons match finish primary buttons
   - Supports Appearance vars:
     --eqp-finish-btn-bg / --eqp-finish-btn-text
     --eqp-finish-menu-btn-bg / --eqp-finish-menu-btn-text
   ========================================================= */

/* Use a grid for finish v2 so the mid section always gets a real, scrollable height */
.eqp-finish-sheet.eqp-finish--v2{
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: min(calc(var(--eqp-vv-h, 100dvh) - 48px), 680px) !important;
}
@media (max-width: 820px){
  .eqp-finish-sheet.eqp-finish--v2{
    height: calc(var(--eqp-vv-h, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px - var(--eqp-vv-inset-b, 0px)) !important;
  }
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-top{ grid-row: 1 !important; }
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid{
  grid-row: 2 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{ grid-row: 3 !important; }

.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
  height: 100% !important;
  padding: 21px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain;
  padding-bottom: 18px !important;
}

/* Finish primary buttons (use Appearance vars if provided) */
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
  background: var(--eqp-finish-btn-bg, rgba(148,163,184,.10)) !important;
  color: var(--eqp-finish-btn-text, var(--eqp-text, #0f172a)) !important;
}

/* Finish menu buttons: same look/size as finish primary */
.eqp-finish-more-body .eqp-btn{
  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  min-height: 40px !important;
  box-shadow: none !important;
  background: var(--eqp-finish-menu-btn-bg, var(--eqp-finish-btn-bg, rgba(148,163,184,.10))) !important;
  color: var(--eqp-finish-menu-btn-text, var(--eqp-finish-btn-text, var(--eqp-text, #0f172a))) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
}

/* Keep the menu close button consistent */
.eqp-finish-more-close:hover{
  background: rgba(148,163,184,.10) !important;
}

/* If treat HTML includes its own scroll, let the finish body handle scrolling */
.eqp-finish-overlay .eqp-finish-body .eqp-treat,
.eqp-finish-overlay .eqp-finish-body .eqp-treat *{
  max-height: none !important;
  overflow-y: visible !important;
}


/* ==========================================================
   Phase 2A — Mobile UI redesign (Quiz interface only)
   Goal: stable, modern single-sheet mobile layout.
   - Header is embedded inside the quiz card (JS adds .eqp-mobile-ui-v3)
   - Only the options region scrolls; header + actions remain visually stable
   ========================================================== */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v3{
    padding: max(8px, env(safe-area-inset-top)) 10px max(0px, env(safe-area-inset-bottom));
  }

  /* The quiz card becomes the full "sheet" */
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question{
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 22px;
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 26px rgba(2,6,23,.14);
  }

  /* Disable viewport-sticky header behavior on mobile v3 */
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-header{
    position: relative !important;
    top: auto !important;
    z-index: 5;
    margin: 0;
  }

  /* Mobile app-bar styling */
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question > .eqp-header{
    padding: 10px 10px 8px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--eqp-border) 85%, transparent);
    background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 78%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(2,6,23,.10);
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-header .eqp-hdr-row--a{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    min-height: 40px;
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-left{ justify-self: start; }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-center{ justify-self: center; }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-right{ justify-self: end; }

  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-left .eqp-q{
    font-weight: 800;
    letter-spacing: .2px;
    font-size: .95rem;
    opacity: .95;
    white-space: nowrap;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-center .eqp-time{
    font-weight: 800;
    font-size: .9rem;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.20);
    background: linear-gradient(90deg, var(--eqp-accent), var(--eqp-accent-2));
    color: #fff;
    line-height: 1;
    white-space: nowrap;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-more{
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: none !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-row--b{ padding-top: 8px; }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-progress--block{
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(148,163,184,.22);
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-progress--block > span{ border-radius: 999px; }

  /* Keep injected actions host truly out of layout (menu uses a fixed overlay) */
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-hdr-menu-host{ display:none !important; }

  /* Card top typography */
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-card-top{ padding: 2px 2px 0; }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-stem{
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 8px 0 8px;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-card-mid{ padding-right: 0; }

  /* Option cards: tighter + no physical movement */
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-opt{
    padding: 12px;
    margin: 10px 0;
    border-radius: 14px;
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-opt:hover,
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-opt:active{ transform: none !important; }

  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-card-bot{
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--eqp-border) 70%, transparent);
  }

  /* Fix "sliced" circular buttons (profile in menu/header) */
  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-profile-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--eqp-btn-sz, 36px) !important;
    height: var(--eqp-btn-sz, 36px) !important;
    line-height: 1 !important;
    overflow: visible !important;
  }
}


/* ==========================================================
   Mobile embedded header (in-card) — stable layout + profile tools
   ========================================================== */

@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-card--question .eqp-header.eqp-header--embedded{
    margin: 0 0 12px 0 !important;
    padding: 10px 10px 8px 10px !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.06) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-card--question .eqp-mhdr-row--a{
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-mhdr-left .eqp-q{
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-mhdr-center{
    text-align: center !important;
    min-width: 0 !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-mhdr-center .eqp-time{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-mhdr-right{
    justify-self: end !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-mhdr-actions{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Primary buttons sizing (pause/resume + profile) */
  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-header--embedded .eqp-pr button,
  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-header--embedded .eqp-profile-btn{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-header--embedded .eqp-profile-btn{
    border-radius: 999px !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-header--embedded .eqp-pr button{
    border-radius: 12px !important;
  }

  /* Hide non-primary controls in header; they live in profile panel now */
  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-header--embedded .eqp-controls{
    display: none !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-mhdr-row--b{
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    display: flex !important;
    align-items: center !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-header--embedded .eqp-progress{
    width: 100% !important;
    min-width: 0 !important;
    height: 10px !important;
  }

  /* Streak chip lives on the card (not in the embedded header) */
  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-card--question{
    position: relative !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-streak--card{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    font-weight: 700 !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v3 .eqp-streak--card .eqp-streak-icon{
    visibility: visible !important;
  }
}

/* Profile panel: quick controls grid */
.eqp-profile-panel .eqp-profile-panel-inner{
  background: var(--eqp-profile-panel, var(--eqp-card)) !important;
}

.eqp-profile-tools{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}

.eqp-profile-tools-title{
  font-size: 12px !important;
  opacity: 0.85 !important;
  margin-bottom: 8px !important;
}

.eqp-profile-tools-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.eqp-bgm-toggle .eqp-ico-svg{ width:18px; height:18px; display:block; }
.eqp-profile-panel .eqp-bgm-toggle:empty::before{
  content: '♫';
  display: block;
  font-size: 18px;
  line-height: 1;
}

.eqp-profile-tool{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.eqp-profile-tool-btn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.eqp-profile-tool-btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.eqp-profile-tool-btn .eqp-ico-svg{
  width: 18px;
  height: 18px;
  display: block;
}

.eqp-profile-tool-label{
  font-size: 11px !important;
  opacity: 0.9 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 90px !important;
}

/* =========================================================
   Batch X24 — Mobile embedded header: hard stability rules
   - Works regardless of whether eqp-mobile-ui-v3 class is present
   - Prevents sticky/header reflow + keeps progress bar always visible
   - Non-primary controls are hidden in header (they are moved into profile panel by JS)
   ========================================================= */
@media (max-width: 820px){
  .eqp-quiz-root .eqp-header.eqp-header--embedded{
    position: relative !important; /* override global sticky */
    top: auto !important;
    margin: 0 0 12px 0 !important;
    padding: 10px 10px 8px 10px !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.06) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 78px !important; /* 44 + 12 + padding */
  }

  .eqp-quiz-root .eqp-header.eqp-header--embedded .eqp-mhdr-row--a{
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--embedded .eqp-mhdr-row--b{
    display: flex !important;
    align-items: center !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    overflow: hidden !important;
  }

  .eqp-quiz-root .eqp-header.eqp-header--embedded .eqp-progress{
    display: block !important;
    height: 12px !important;
    min-height: 12px !important;
  }

  /* Keep only the primary controls visible in the embedded header.
     These buttons are moved into the profile panel tools grid. */
  .eqp-quiz-root .eqp-header.eqp-header--embedded button.eqp-snd-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--embedded button.eqp-music-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--embedded button.eqp-fs-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--embedded button.eqp-density-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--embedded button.eqp-quests-btn{
    display: none !important;
  }

  /* Also hide the auto-created controls strip to prevent height jitter */
  .eqp-quiz-root .eqp-header.eqp-header--embedded .eqp-controls{ display:none !important; }

  /* Profile button: prevent the "sliced" look */
  .eqp-quiz-root .eqp-header.eqp-header--embedded .eqp-profile-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }
}

/* ===========================
   Mobile controls block (no header)
   =========================== */
@media (max-width: 820px){
  .eqp-mobile-controls{
    border: 1px solid var(--eqp-border, rgba(0,0,0,.14));
    border-radius: 16px;
    padding: 10px 10px 10px;
    margin-bottom: 10px;
    background: transparent;
  }
  .eqp-mobile-controls .eqp-mc-row--a{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    min-height: 34px;
  }
  .eqp-mobile-controls .eqp-q{
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }
  .eqp-mobile-controls .eqp-time{
    justify-self: center;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    opacity: .9;
  }
  .eqp-mobile-controls .eqp-hdr-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
  }
  /* Hide non-primary controls inside the mobile controls block: they live in the profile panel on mobile */
  .eqp-mobile-controls .eqp-controls{
    display: none !important;
  }
  /* Hotfix: never allow music button to appear in the mobile header row */
  .eqp-mobile-controls .eqp-bgm-toggle,
  .eqp-mobile-controls .eqp-music-toggle{
    display: none !important;
  }

  .eqp-mobile-controls .eqp-profile{
    display: inline-flex;
  }
  .eqp-mobile-controls .eqp-profile-btn{
    width: 34px;
    height: 34px;
    border-radius: 999px;
  }
  .eqp-mobile-controls .eqp-pr .eqp-btn-pause{
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
  }
  .eqp-mobile-controls .eqp-pr .eqp-btn-pause .lbl{
    display: none;
  }
  .eqp-mobile-controls .eqp-mc-row--b{
    margin-top: 8px;
  }
  .eqp-mobile-controls .eqp-progress--block{
    width: 100%;
    height: 8px;
    border-radius: 999px;
  }
  .eqp-mobile-controls .eqp-progress--block > span{
    border-radius: 999px;
  }
}




/* =========================================================
   Batch X28 — Finish screen safe side padding (buttons away from edges)
   ========================================================= */
.eqp-finish-sheet{
  --eqp-finish-pad: 26px !important; /* +5px vs prior 21px */
  box-sizing: border-box !important;
}

/* Apply consistent horizontal padding (with iOS safe-area support) to ALL finish regions */
.eqp-finish-head,
.eqp-finish-body,
.eqp-finish-foot,
.eqp-finish-bot{
  padding-left:  calc(var(--eqp-finish-pad) + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(var(--eqp-finish-pad) + env(safe-area-inset-right, 0px)) !important;
}

/* Footer: keep vertical rhythm + safe bottom inset */
.eqp-finish-foot,
.eqp-finish-bot{
  padding-top: 12px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Actual v2 footer button host */
.eqp-finish-primary{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: stretch !important;
}

/* Prevent global .eqp-btn margin-top from crushing the footer layout */
.eqp-finish-primary .eqp-btn,
.eqp-finish-foot .eqp-actions .eqp-btn{
  margin-top: 0 !important;
}

/* =========================================================
   Batch X27 — Profile panel tools: wrapper + spacing
   ========================================================= */

.eqp-profile-tool-btn{ margin-top: 0 !important; }

/* =========================================================
   Batch X27 — Mobile quiz card bottom stability (dock + internal scroll)
   ========================================================= */
@media (max-width:820px){
  .eqp-quiz-root.eqp-mobile-ui-v3{
    height: 100svh;
    min-height: 100svh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question{
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-form--v2{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-card-mid{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-card-bot{
    flex: 0 0 auto;
  }
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question .eqp-feedback{
    min-height: var(--eqp-feedback-min, 44px);
  }
}

/* ================================
   Batch X31: Mobile UI V4 — stable, modern quiz card
   - Fix mobile bottom jitter by using an app-shell layout
   - Keep header minimal (count/timer/play/profile) and keep other controls inside profile panel
   ================================ */

@media (max-width: 820px){
  /* App-shell: lock the quiz root to the viewport (stable bottom) */
.eqp-quiz-root.eqp-mobile-ui-v4{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;

  /*
    Height strategy (mobile stability):
    - Prefer 100svh when supported: stable viewport height that does not grow/shrink with the URL bar.
    - Fallback to JS-frozen --eqp-svh (px-per-1vh) seeded once, so height stays constant.
  */
  height: var(--eqp-vv-h, 100dvh) !important;
  max-height: var(--eqp-vv-h, 100dvh) !important;

  width: 100% !important;
  overflow: hidden !important;
  z-index: 999990 !important;
  background: var(--eqp-bg, #0b1020) !important;

  /*
    Safe-area padding:
    We *freeze* env(safe-area-inset-*) into CSS vars (--eqp-safe-*) at runtime so the
    bottom padding won’t oscillate on mobile browsers.
  */
  padding:
    calc(10px + var(--eqp-safe-top, 0px))
    calc(10px + var(--eqp-safe-right, 0px))
    0px
    calc(10px + var(--eqp-safe-left, 0px)) !important;

  box-sizing: border-box;
  contain: none !important;
  -webkit-tap-highlight-color: transparent;
  display: flex !important;
  flex-direction: column !important;
}

@supports (height: 100svh){
  .eqp-quiz-root.eqp-mobile-ui-v4{
    /* IMPORTANT (X76): do NOT use a frozen lock height here.
       Chrome can re-show the address bar / UI after native fullscreen exits;
       the quiz root must shrink to the *visible* viewport to keep bottom actions visible. */
    height: var(--eqp-vv-h, 100svh) !important;
    max-height: var(--eqp-vv-h, 100svh) !important;
  }
}

  /* The card becomes a clean “sheet” */
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card{
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px !important;
    border: 1px solid var(--eqp-border, rgba(255,255,255,.10)) !important;
    background-color: var(--eqp-card, rgba(255,255,255,.08)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 10px !important;
    padding-bottom: calc(10px + var(--eqp-safe-bottom, 0px)) !important;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
  }

  /* Embedded mobile header stays pinned */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls{
    position: sticky;
    top: 0;
    z-index: 999997;
    pointer-events: auto;
    padding: 2px 2px 8px;
    margin: 0 0 6px;
    background: transparent;
    border-bottom: 1px solid rgba(148,163,184,.18);
  }

  /* Ensure the profile button always receives taps */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-profile-btn{
    position: relative;
    z-index: 90;
    pointer-events: auto;
    touch-action: manipulation;
  }

  /* Hard-hide any extra header controls (keep them inside the profile panel) */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-controls,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-bgm-toggle,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-sfx-toggle,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-density,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-quest,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-music,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-sound,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-bgm,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-sfx{
    display: none !important;
    visibility: hidden !important;
  }

  /* Question card layout: scrollable middle, docked bottom */
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question{
    padding-top: 10px !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-top{
    flex: 0 0 auto;
    padding: 0 2px 8px;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-form{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-mid{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px;
    scrollbar-gutter: stable;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-bot{
    flex: 0 0 auto;
    padding: 10px 2px 2px;
    border-top: 1px solid rgba(148,163,184,.16);
    background: transparent;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    /* Root already includes safe-area padding; keep actions padding stable to avoid perceived “bounce” */
    padding-bottom: 6px;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback{
    min-height: var(--eqp-feedback-min, 44px);
  }

  /* Keep the bottom dock stable: never fully remove the feedback box on mobile v4 */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-feedback.is-empty{
    display: block !important;
    visibility: hidden !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-feedback.is-empty *{
    display: none !important;
  }

  /* Ensure music icon is never ‘blank’ (fallback if SVG was stripped) */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-profile-panel .eqp-bgm-toggle:empty::before,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-profile-panel .eqp-music-toggle:empty::before{
    content: '♫';
    font-size: 18px;
    line-height: 1;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-profile-panel .eqp-bgm-toggle .eqp-ico-svg,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-profile-panel .eqp-music-toggle .eqp-ico-svg{
    width: 18px;
    height: 18px;
    display: block;
  }

  /* Finish/summary: keep it clean and readable */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-finish,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-summary{
    max-width: 100% !important;
  }
}


/* =========================================================
   Batch X33 — Profile panel z-index above mobile app-shell
   ========================================================= */
.eqp-profile-overlay{ z-index: 1000000 !important; }
.eqp-profile-panel{ z-index: 1000001 !important; }


/* =========================================================
   Batch X34 — Start screen for [edu_quiz_pro] shortcode
   ========================================================= */
.eqp-start-card{
  max-width: 760px;
  margin: 18px auto;
  padding: 18px 16px;
}
.eqp-start-card .eqp-start-top{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 14px;
}
.eqp-start-card .eqp-start-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.eqp-start-card .eqp-start-sub{
  color: var(--eqp-muted, #94a3b8);
  font-size: 13px;
}
.eqp-start-card .eqp-start-actions{
  display:flex;
  justify-content:flex-start;
}
.eqp-start-card .eqp-start-btn{
  margin-top: 0 !important;
}
@media (max-width: 820px){
  .eqp-start-card{
    margin: 12px auto;
  }
}





/* =========================================================
   Batch X39 — Shortcode start screen: compact + stable
   - Keep start/identity cards small and minimal.
   - Scoped to [edu_quiz_pro] shortcode roots only.
   ========================================================= */
.eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact{
  max-width: 560px;
  margin: 12px auto 14px;
  padding: 14px 14px;
  border-radius: 1.1rem;
  border: 1px solid rgba(148,163,184,0.28);
  box-shadow: 0 12px 30px rgba(15,23,42,0.22);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-top{
  gap: 4px;
  margin-bottom: 10px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-title{
  font-size: 18px;
  font-weight: 800;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-sub{
  font-size: 12.5px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-actions{
  justify-content:flex-start;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-btn{
  min-height: 40px;
  padding: 10px 14px;
}

/* Batch X40 (Batch 2 patch) — Mobile: make the shortcode start box shorter while keeping its width */
@media (max-width: 820px){
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact{
    margin: 10px auto 12px;
    padding: 10px 12px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-top{
    margin-bottom: 8px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-title{
    font-size: 17px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-sub{
    font-size: 12px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact .eqp-start-btn{
    min-height: 38px;
    padding: 9px 13px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card{
    margin: 10px auto 12px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card .eqp-identity-actions .eqp-btn{
    min-height: 38px;
  }
}

/* Hard safety: if we're in shortcode gate mode, never allow fixed/fit shell rules to affect layout */
.eqp-quiz-root[data-eqp-gate="1"]{ overflow: visible !important; }
.eqp-quiz-root[data-eqp-gate="1"].eqp-fit{ height:auto !important; max-height:none !important; overflow: visible !important; }
.eqp-quiz-root[data-eqp-gate="1"].eqp-mobile-ui-v4{
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}



/* Compact identity card for shortcode start (the "Before you start" form) */
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card{
  max-width: 560px;
  margin: 12px auto 14px;
  border-radius: 1.1rem;
  background: var(--eqp-card-solid, var(--eqp-card, rgba(15,23,42,0.98)));
  box-shadow: 0 12px 30px rgba(15,23,42,0.22);
  border: 1px solid rgba(148,163,184,0.28);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card .eqp-identity-inner{
  padding: 14px 14px 14px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-title{
  font-size: 1.02rem;
  margin-top: 0.35rem;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-subtitle{
  display: none;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-grid{
  gap: 0.65rem 0.75rem;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card label{
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-input,
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-select{
  border-radius: 0.7rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-actions{
  margin-top: 0.6rem;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-actions .eqp-btn{
  min-width: 6.5rem;
  padding-inline: 1.1rem;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-privacy{
  display:none;
}

@media (max-width: 820px){
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start-card--compact{
    margin: 10px auto 12px;
    padding: 12px 12px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card{
    margin: 10px auto 12px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card .eqp-identity-inner{
    padding: 12px 12px 12px;
  }
}

/* =========================================================
   Batch X35 — Mobile scroll lock (prevents URL-bar reflow jitter)
   ========================================================= */
html.eqp-mobile-locked, body.eqp-mobile-locked{
  overflow: hidden !important;
  height: 100% !important;
}

/* =========================================================
   Batch X35 — Mobile stability: lock page scroll during mobile app-shell
   ========================================================= */
html.eqp-mobile-locked,
body.eqp-mobile-locked{
  overflow: hidden !important;
  height: 100% !important;
}
body.eqp-mobile-locked{
  overscroll-behavior: none;
}


/* Batch 6D — Start/identity/prep play count */
.eqp-start-meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--eqp-muted);
  line-height: 1.2;
}
.eqp-prep-meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--eqp-muted);
  line-height: 1.2;
}
.eqp-identity-meta{
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--eqp-muted);
  line-height: 1.25;
}

/* Leaderboard: retries column */
.eqp-leaderboard-table thead th.eqp-lb-retries,
.eqp-leaderboard-table tbody td.eqp-lb-retries{
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 640px){
  .eqp-leaderboard-table thead th.eqp-lb-retries,
  .eqp-leaderboard-table tbody td.eqp-lb-retries{
    display: none;
  }
}


/* Batch X47 — Mobile: let card touch bottom of quiz background (move safe-area padding inside card) */
@media (max-width: 782px){
  .eqp-quiz-root.eqp-fit{
    padding-bottom: 0 !important;
  }
  .eqp-quiz-root.eqp-fit .eqp-card{
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}


/* Hotfix: ensure music toggle icon visible in profile panel */
.eqp-profile-panel .eqp-bgm-toggle,
.eqp-profile-panel .eqp-music-toggle{
  background: #334155;
  color: #e5e7eb;
  border: 1px solid rgba(0,0,0,0.10);
}
.eqp-profile-panel .eqp-music-toggle svg{
  display:block;
  stroke: currentColor;
}
.eqp-profile-panel .eqp-music-toggle:empty::before{
  content: "♫";
  font-size: 16px;
  line-height: 1;
}


/* Hotfix (X47): force music icon contrast in profile panel */
.eqp-profile-panel .eqp-profile-tool-btn.eqp-bgm-toggle,
.eqp-profile-panel .eqp-profile-tool-btn.eqp-music-toggle{
  background: #334155 !important;
  color: #e5e7eb !important;
}

/* =========================================================
   Batch X73 — Mobile UI v4: mathematically precise card fill
   Goal: Make the *card itself* perfectly match the visible viewport height.
   Notes:
   - On mobile v4 the header is embedded inside the card, so we do NOT subtract header height.
   - Root carries zero padding; all safe-area + breathing room is applied to the card.
   ========================================================= */

@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4{
    padding: 0px !important; /* card owns padding */
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card{
    /* Force the card to be exactly the visible viewport height */
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    flex: 0 0 auto !important;

    /* Card owns safe-area padding (pre-frozen in JS into --eqp-safe-*) */
    padding-top: calc(12px + var(--eqp-safe-top, 0px)) !important;
    padding-right: calc(12px + var(--eqp-safe-right, 0px)) !important;
    padding-left: calc(12px + var(--eqp-safe-left, 0px)) !important;
    padding-bottom: calc(12px + var(--eqp-safe-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  @supports (height: 100svh){
    .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card{
      height: var(--eqp-vv-h, 100svh) !important;
      max-height: var(--eqp-vv-h, 100svh) !important;
    }
  }
}
.eqp-profile-panel .eqp-profile-tool-btn.eqp-bgm-toggle svg,
.eqp-profile-panel .eqp-profile-tool-btn.eqp-music-toggle svg{
  stroke: currentColor !important;
  fill: none !important;
}

/* Batch X50B — Mobile UI v4: final override to extend quiz card down by +15px */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls{
    margin: 0 0 0px !important;
    padding: 2px 2px 6px !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card{
    padding-bottom: calc(3px + var(--eqp-safe-bottom, 0px)) !important;
  }
}

/* Batch X50C — Fit mode mobile: reduce top padding to maximize card height */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-fit,
  .eqp-hub-root.eqp-fit{
    padding-top: max(0px, env(safe-area-inset-top)) !important;
  }
}

/* =========================================================
   Batch X51 — Mobile polish
   1) Let the quiz card lap the bottom of the quiz background (mobile)
   2) Modern minimal embedded mobile header (inherits --eqp-header)
   3) Streak chip: move up 5px + standout styling (mobile v4)
   ========================================================= */

/* 1) Mobile: remove any remaining root bottom padding in fit mode so the card can sit flush */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-fit,
  .eqp-hub-root.eqp-fit{
    padding-bottom: 0px !important; /* card carries its own safe-area padding */
  }
  .eqp-quiz-root.eqp-fit .eqp-card,
  .eqp-hub-root.eqp-fit .eqp-card{
    margin-bottom: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
}

/* Mobile UI v4: make the sheet lap the bottom edge */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card{
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    margin-bottom: 0px !important;
  }
}

/* 2) Modern mobile header (v4 + embedded v3): use the quiz header color */
@media (max-width: 820px){
  /* v4 header block */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls{
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--eqp-header, #0f172a), transparent 0%),
      color-mix(in srgb, var(--eqp-header, #0f172a), transparent 10%)
    ) !important;
    border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 15%) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);

    /* Let it span the card width (bleed to edges) */
    margin: -10px -12px 10px !important;
    padding: 8px 10px 8px !important;

    /* Override older divider look */
    border-bottom: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 15%) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-mc-row--a{
    height: 44px !important;
    min-height: 44px !important;
    gap: 7px !important;
  }

  /* Batch 2 — Mobile v4 header sizing + theming (counter + timer) */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-q{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    font-weight: 700 !important;
    font-size: 18px !important; /* +6px */
    line-height: 1 !important;
    border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 40%) !important;
    background: color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 35%) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    font-weight: 700 !important;
    font-size: 18px !important; /* +6px */
    line-height: 1 !important;
    background: linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22c55e)) !important;
    color: var(--eqp-timer, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 25%) !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time *{
    color: var(--eqp-timer, #fff) !important;
    stroke: var(--eqp-timer, #fff) !important;
  }
  /* Timer chip on mobile v4 must inherit Appearance accents (bg) + timer color (text/stroke) */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time{
    background: linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22c55e)) !important;
    color: var(--eqp-timer, #fff) !important;
    border-color: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 15%) !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time *{
    color: var(--eqp-timer, #fff) !important;
    stroke: var(--eqp-timer, #fff) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-hdr-actions{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-profile-btn{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    background: color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 55%) !important;
    border: 1px solid color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 35%) !important;
    box-shadow: 0 10px 18px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 70%);
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-progress{
    height: 8px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 70%) !important;
    overflow: hidden !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-progress > span{
    display: block !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22d3ee)) !important;
  }

  /* Embedded header (v3): inherit same header colors */
  .eqp-quiz-root .eqp-header.eqp-header--embedded{
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--eqp-header, #0f172a), transparent 0%),
      color-mix(in srgb, var(--eqp-header, #0f172a), transparent 10%)
    ) !important;
    border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 15%) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
  }
}

/* 3) Streak chip: bottom-left on mobile v4, moved up by 5px + standout styling */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-card--question{ position: relative !important; }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card{
    position: absolute !important;
    left: 12px !important;
    /* Move streak chip UP by an additional 10px (mobile only) */
    bottom: calc(23px + var(--eqp-safe-bottom, 0px)) !important;
    z-index: 20 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;

    background: color-mix(in srgb, var(--eqp-header, #0f172a), transparent 18%) !important;
    border: 1px solid color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 45%) !important;
    box-shadow:
      0 14px 26px rgba(0,0,0,.28),
      0 0 0 1px color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 70%),
      0 0 18px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 70%);

    font-weight: 900 !important;
    letter-spacing: 0.2px;
    pointer-events: none !important; /* never block taps/scroll */
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card .eqp-streak-icon{
    font-size: 16px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card .eqp-streak-label{
    font-size: 12px !important;
    line-height: 1 !important;
    opacity: 0.98;
  }
}

/* === v1.9.9.206 BatchX53: mobile header pause/start nudge + finish greeting padding === */
@media (max-width: 820px){
  /* Move Start/Pause/Resume control slightly up and left on the mobile quiz header */
  .eqp-quiz-root .eqp-header.eqp-header--compact{
    --eqp-pr-nudge: -8px; /* was -12px; move DOWN by 2.5px on mobile */
  }
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-pr{
    transform: translateX(-4px);
  }
}
/* Finish greeting: nudge right */
.eqp-finish-greeting{
  padding-left: 8px;
  box-sizing: border-box;
}

/* === v1.9.9.206 BatchX53: modern Quiz Summary overlay styling === */
.eqp-overlay-summary{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.eqp-overlay-summary[hidden]{ display:none !important; }
.eqp-overlay-summary .eqp-overlay-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.eqp-overlay-summary .eqp-summary-card{
  position: relative;
  width: min(980px, 96vw);
  max-height: min(86vh, 860px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  background: var(--eqp-summary-card, var(--eqp-card, #0b1220));
  color: var(--eqp-text, #e5e7eb);
}
.eqp-overlay-summary .eqp-summary-close{
  position:absolute;
  top: 10px; right: 10px;
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: inherit;
  cursor: pointer;
}
.eqp-overlay-summary .eqp-summary-body{
  padding: 16px 16px 14px;
  overflow: auto;
  max-height: min(86vh, 860px);
  -webkit-overflow-scrolling: touch;
}

/* Dashboard */
.eqp-dash{ color: inherit; }
.eqp-dash .eqp-dash-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.eqp-dash .eqp-dash-head h3{
  margin: 0;
  font-size: 18px;
  letter-spacing: .2px;
}
.eqp-dash .eqp-dash-sub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .85;
}
.eqp-dash .eqp-dash-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}
.eqp-dash .eqp-dash-actions .eqp-btn{
  border-radius: 12px;
  padding: 10px 12px;
}

/* Summary overlay color settings (Appearance > Summary...) */
.eqp-overlay-summary .eqp-dash .eqp-dash-actions .eqp-btn{
  background: var(--eqp-summary-btn-bg, var(--eqp-btn-bg, #334155));
  color: var(--eqp-summary-btn-text, var(--eqp-btn-text, #e5e7eb));
}
.eqp-overlay-summary .eqp-dash .eqp-dash-actions .eqp-btn:hover{ filter: brightness(1.06); }
.eqp-dash .eqp-dash-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
.eqp-dash .eqp-stat{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.eqp-dash .eqp-stat .k{
  font-size: 11px;
  opacity: .82;
}
.eqp-dash .eqp-stat .v{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
}
.eqp-dash .eqp-stat .s{
  margin-top: 2px;
  font-size: 11px;
  opacity: .82;
}
.eqp-dash h4{
  margin: 14px 0 8px;
  font-size: 14px;
}
.eqp-dash .eqp-section{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.eqp-dash .eqp-bars .eqp-bar-row{
  display:grid;
  grid-template-columns: 140px 1fr 48px;
  gap: 10px;
  align-items:center;
  padding: 6px 0;
}
.eqp-dash .eqp-bar-track{
  height: 10px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.10);
}
.eqp-dash .eqp-bar-fill{
  display:block;
  height: 10px;
  background: var(--eqp-accent, #60a5fa);
}
.eqp-dash .eqp-spark{
  display:flex;
  gap: 3px;
  align-items:flex-end;
  padding: 8px 0 2px;
}
.eqp-dash .eqp-spark-bar{
  width: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.eqp-dash .eqp-topic-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.eqp-dash .eqp-chip{
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: inherit;
}
.eqp-dash .eqp-chip.is-active{
  background: rgba(96,165,250,.22);
  border-color: rgba(96,165,250,.40);
}
.eqp-dash .eqp-review-head{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
}
.eqp-dash .eqp-review-search{
  flex: 1 1 220px;
  min-width: 180px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: inherit;
}
.eqp-dash details.eqp-review-item{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.eqp-dash details.eqp-review-item summary{
  cursor:pointer;
  list-style:none;
  padding: 10px 12px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.eqp-dash details.eqp-review-item summary::-webkit-details-marker{ display:none; }
.eqp-dash .eqp-review-badge{
  margin-left:auto;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.eqp-dash .eqp-review-badge.ok{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.30); }
.eqp-dash .eqp-review-badge.bad{ background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.28); }
.eqp-dash .eqp-review-body{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  line-height: 1.45;
}
.eqp-dash .eqp-review-meta{
  margin-top: 8px;
  font-size: 12px;
  opacity: .86;
}
@media (max-width: 820px){
  .eqp-dash .eqp-dash-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eqp-dash .eqp-bars .eqp-bar-row{ grid-template-columns: 1fr; }
}

/* BatchX53: profile panel footer can now have 4 buttons (wrap nicely) */
.eqp-profile-actions{
  flex-wrap: wrap;
}
.eqp-profile-actions .eqp-btn{
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
}
@media (max-width: 420px){
  .eqp-profile-actions .eqp-btn{
    min-width: 120px;
  }
}



/* Batch X54: mobile pause/start/resume nudge (up 5px, left 4px) */
@media (max-width: 820px){
  /* Compact mobile header inside quiz card */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-pr{
    position: relative;
    top: -5px;
    left: -4px;
  }
  /* Fallback if header isn't in compact mode */
  .eqp-quiz-root .eqp-header > .eqp-pr{
    position: relative;
    top: -5px;
    left: -4px;
  }
}

/* Batch X54: finish greeting shift right by 8px */
.eqp-finish-top .eqp-finish-greeting{
  padding-left: 8px;
}


/* =========================================================
   Batch X55 — Mobile header pause/start nudge + Summary UI upgrades
   ========================================================= */

/* Mobile header (new v4 block): nudge Start/Pause/Resume up 5px and left 4px */
@media (max-width: 820px){
  .eqp-quiz-root .eqp-mobile-controls .eqp-pr{
    position: relative;
    top: -6px;
    left: -4px;
  }
}

/* Finish greeting: shift right by 8px (robust across finish variants) */
.eqp-finish-greeting{
  margin-left: 8px !important;
  padding-left: 0 !important;
}

/* Summary overlay must sit above finish overlays / menus */
.eqp-overlay-summary{
  z-index: 2147483640 !important;
}

/* Summary: Insights grid */
.eqp-dash .eqp-insights-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.eqp-dash .eqp-insight{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.eqp-dash .eqp-insight .k{
  font-size: 11px;
  opacity: .82;
}
.eqp-dash .eqp-insight .v{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
}
.eqp-dash .eqp-insight .s{
  margin-top: 2px;
  font-size: 11px;
  opacity: .82;
}
@media (max-width: 820px){
  .eqp-dash .eqp-insights-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   Batch X58B1 — Mobile Start/Pause/Resume nudge (additional +3px up)
   ========================================================= */
@media (max-width: 820px){
  /* Compact header: was -5px; move up 3px more → -8px */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-pr{
    top: -6px;
  }
  /* Fallback: was -5px; move up 3px more → -8px */
  .eqp-quiz-root .eqp-header > .eqp-pr{
    top: -6px;
  }
  /* New mobile v4 controls: was -8px; move up 3px more → -11px */
  .eqp-quiz-root .eqp-mobile-controls .eqp-pr{
    top: -9px;
  }
}


/* =========================================================
   Batch X62 — Rebuilt edu_quiz_pro Start screen (stable)
   - Replaces eqp-start-card--compact with a sturdier layout
   - Scoped to [edu_quiz_pro] shortcode roots only.
   ========================================================= */
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2{
  max-width: 560px;
  margin: 12px auto 14px;
  padding: 14px 14px 12px;
  border-radius: 1.15rem;
  border: 1px solid rgba(148,163,184,0.28);
  background: var(--eqp-card-solid, var(--eqp-card, rgba(15,23,42,0.98)));
  box-shadow: 0 12px 30px rgba(15,23,42,0.22);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-head{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 12px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-pill{
  display:inline-flex;
  align-self:flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(148,163,184,0.10);
  color: var(--eqp-text, #e5e7eb);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-title{
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.01em;
  min-height: 1.3em; /* reserve space to prevent jumps */
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-sub{
  font-size: 12.5px;
  color: var(--eqp-muted, #94a3b8);
  min-height: 1.2em; /* reserve space to prevent jumps */
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-stat{
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.16);
  border-radius: 0.95rem;
  padding: 10px 10px;
  min-height: 52px; /* keep stable */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 4px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-stat .k{
  font-size: 11px;
  color: var(--eqp-muted, #94a3b8);
  letter-spacing: 0.02em;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-stat .v{
  font-size: 13px;
  font-weight: 800;
  color: var(--eqp-text, #e5e7eb);
  letter-spacing: -0.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-meta{
  margin-top: 8px;
  font-size: 12px;
  color: var(--eqp-muted, #94a3b8);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-btn{
  min-height: 40px;
  padding: 10px 14px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-btn--primary{
  background: var(--eqp-btn-bg, #334155);
  color: var(--eqp-btn-text, #e5e7eb);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-btn--ghost{
  background: transparent;
  border: 1px solid rgba(148,163,184,0.35);
  color: var(--eqp-text, #e5e7eb);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start2-foot{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148,163,184,0.25);
  font-size: 12px;
  color: var(--eqp-muted, #94a3b8);
}

@media (max-width: 820px){
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start2{
    margin: 10px auto 12px;
    padding: 12px 12px 11px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start2-grid{
    gap: 8px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start2-stat{
    padding: 9px 9px;
    min-height: 50px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start2-title{
    font-size: 17px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start2-btn{
    min-height: 38px;
    padding: 9px 13px;
  }
}


/* =========================================================
   Batch X63 — edu_quiz_pro Start screen V3 (ultra-stable + minimal)
   - Removes vh-based constraints during gate mode to eliminate bottom jitter.
   - Modern, minimal layout with “chips” and stable text slots.
   ========================================================= */
.eqp-quiz-root[data-origin="shortcode"][data-eqp-gate="1"] .eqp-start3{
  max-height: none !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

/* Base (shortcode start gate) */
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3{
  max-width: 560px;
  margin: 12px auto 14px;
  padding: 16px 16px 14px;
  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,0.26);
  background: var(--eqp-card-solid, var(--eqp-card, rgba(15,23,42,0.98)));
  box-shadow: 0 14px 34px rgba(2,6,23,0.22);
}

/* Batch B — Start screen music toggle */
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3{
  position: relative;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3 .eqp-start-music-toggle{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-top{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 12px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-badge{
  display:inline-flex;
  align-self:flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(148,163,184,0.10);
  color: var(--eqp-text, #e5e7eb);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  min-height: 1.3em; /* reserve space to prevent jumps */
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-sub{
  margin: 0;
  font-size: 12.5px;
  color: var(--eqp-muted, #94a3b8);
  min-height: 1.2em; /* reserve space to prevent jumps */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip{
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.16);
  border-radius: 999px;
  padding: 10px 12px;
  min-height: 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .k{
  font-size: 11px;
  color: var(--eqp-muted, #94a3b8);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .v{
  font-size: 13px;
  font-weight: 850;
  color: var(--eqp-text, #e5e7eb);
  letter-spacing: -0.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 60%;
  text-align:right;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-meta{
  margin-top: 10px;
  font-size: 12px;
  color: var(--eqp-muted, #94a3b8);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn{
  min-height: 42px;
  padding: 10px 14px;
  flex: 1 1 auto;
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn--primary{
  background: var(--eqp-btn-bg, #334155);
  color: var(--eqp-btn-text, #e5e7eb);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn--ghost{
  background: transparent;
  border: 1px solid rgba(148,163,184,0.35);
  color: var(--eqp-text, #e5e7eb);
}
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-foot{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148,163,184,0.25);
  font-size: 12px;
  color: var(--eqp-muted, #94a3b8);
}

@media (max-width: 820px){
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3{
    margin: 10px auto 12px;
    padding: 14px 14px 12px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-stats{
    gap: 8px;
  }
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn{
    min-height: 40px;
    padding: 10px 14px;
    width: 100%;
    flex: 1 1 100%;
  }
}

/* =========================================================
   Batch X64 — Summary retry action + Mobile header refinement
   - Fix: retry actions should start the quiz in the main root (not inside summary modal)
   - Mobile header: cleaner, more minimal, modern feel
   - Mobile PR control: move DOWN by 3px (v4 + compact fallback)
   ========================================================= */

@media (max-width: 820px){
  /* Mobile UI v4 header: reduce bulk, keep it crisp */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls{
    margin: -8px -12px 8px !important;
    padding: 7px 9px 7px !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.20) !important;
    background: color-mix(in srgb, var(--eqp-header, #0f172a), transparent 10%) !important;
  }
  @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
    .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls{
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: color-mix(in srgb, var(--eqp-header, #0f172a), transparent 30%) !important;
    }
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-mc-row--a{
    height: 44px !important;
    min-height: 44px !important;
    gap: 7px !important;
  }

  /* Batch 2 — Mobile v4 header sizing + theming (counter + timer) */
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-q{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    font-weight: 700 !important;
    font-size: 18px !important; /* +6px */
    line-height: 1 !important;
    border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 40%) !important;
    background: color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 35%) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    font-weight: 700 !important;
    font-size: 18px !important; /* +6px */
    line-height: 1 !important;
    background: linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22c55e)) !important;
    color: var(--eqp-timer, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 25%) !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-time *{
    color: var(--eqp-timer, #fff) !important;
    stroke: var(--eqp-timer, #fff) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-progress{
    height: 6px !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-hdr-actions{
    gap: 7px !important;
  }

  /* Move Start/Play/Pause/Resume DOWN by 3px (v4 controls) */
  .eqp-quiz-root .eqp-mobile-controls .eqp-pr{
    top: -8px !important; /* was -11px */
  }

  /* Also move DOWN by 3px on compact header fallback */
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-hdr-actions .eqp-pr,
  .eqp-quiz-root .eqp-header > .eqp-pr{
    top: -5px !important; /* was -8px */
  }
}

/* === v1.9.9.219 BatchX77: Header meta sizing + timer theming (desktop + mobile) === */

/* Desktop/tablet: bump question counter + timer by ~5px */
@media (min-width: 821px){
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-q,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-time,
  .eqp-hub-root .eqp-header.eqp-header--compact .eqp-q,
  .eqp-hub-root .eqp-header.eqp-header--compact .eqp-time{
    font-size: 18px !important;
  }
}

/* Timer chip: always follow Appearance menu vars (accents + timer color) */
.eqp-quiz-root .eqp-header .eqp-time,
.eqp-quiz-root .eqp-header .eqp-timer{
  background-image: linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22d3ee)) !important;
  border-color: color-mix(in srgb, var(--eqp-timer, #ffffff), transparent 55%) !important;
  color: var(--eqp-timer, #ffffff) !important;
}

/* Ensure timer icon/ring (if present) also inherits timer color */
.eqp-quiz-root .eqp-header .eqp-time svg,
.eqp-quiz-root .eqp-header .eqp-timer svg{
  stroke: var(--eqp-timer, #ffffff) !important;
  fill: none !important;
}

/* === Batch X80 (final): Desktop header grid contract (progress centered + stable + longer) ===
   This block is intentionally placed at the end of the stylesheet to override
   earlier "compact header" hotfixes that forced flex layout and capped progress width.
*/
@media (min-width: 821px){
  .eqp-header.eqp-header--compact.eqp-header--grid{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 12px;
    justify-content: stretch;
  }

  /* Keep grid items shrinkable so the center column never drifts */
  .eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-left,
  .eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right{
    min-width: 0;
  }

  /* Progress: +10px vs prior desktop length (clamped for smaller desktops) */
  .eqp-header.eqp-header--compact.eqp-header--grid .eqp-progress.eqp-progress--inline{
    width: clamp(200px, 34vw, 270px) !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Prevent generic compact-header rules from capping the grid progress width */
  .eqp-header.eqp-header--compact.eqp-header--grid .eqp-progress{
    max-width: none !important;
  }

  /* Streak: reserve a fixed slot so activation never reflows */
  .eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak--slot{
    min-width: 92px;
    max-width: 140px;
    white-space: nowrap;
  }
}


/* Batch B — Category start pages music toggle */
.eqp-cats-modern .eqp-cats-tools .eqp-start-music-toggle,
.eqp-cat-one.eqp-cat-modern .eqp-cat-tools .eqp-start-music-toggle{
  margin-left: 8px;
  flex: 0 0 auto;
}
.eqp-start-music-toggle .eqp-ico-svg{
  display:block;
}


/* --- Batch B hotfix: ensure start-page music toggle is always visible (even if theme hides SVGs) --- */
.eqp-start-music-toggle{ position: relative; }
.eqp-start-music-toggle .eqp-music-glyph{
  display:block;
  font-size:18px;
  line-height:1;
}
.eqp-start-music-toggle[aria-pressed="false"]::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:22px;
  background: currentColor;
  border-radius:2px;
  transform: translate(-50%,-50%) rotate(45deg);
  opacity:.9;
}
/* Hub (edu_quiz_pro start page) tools placement */
.eqp-hub-root .eqp-hub-card{ position: relative; }
.eqp-hub-root .eqp-hub-tools{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:5;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-tools{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:5;
}


/* Batch B follow-up: force a visible music icon inside the mobile profile-panel tile */
.eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music{
  position: relative;
}
.eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music .eqp-ico-svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke: currentColor !important;
}
@media (max-width: 820px){
  .eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music{
    background: #334155 !important;
    color: #e5e7eb !important;
  }
  .eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music::before{
    content: "♫";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    opacity: .18;
    pointer-events: none;
  }
  .eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music .eqp-ico-svg{
    position: relative;
    z-index: 1;
  }
}


/* Batch B icon follow-up: keep a visible music glyph in the profile-panel tile even if SVG styling is stripped */
.eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music{
  gap: 0 !important;
}
.eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music .eqp-tool-glyph--music{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music .eqp-ico-svg{
  display: none !important;
}
.eqp-profile-panel .eqp-profile-tool--music .eqp-profile-tool-btn--music[aria-pressed="false"] .eqp-tool-glyph--music{
  opacity: .72 !important;
}


/* =========================================================
   Batch C follow-up — mobile fullscreen bottom obstruction + summary header layout
   Fixes:
   - Mobile v4 fullscreen roots must not add extra outer padding/gap on top of a full-height card.
   - Keep submit row + streak chip above browser bottom overlays by using vv-inset-b.
   - Summary card: quiz title/attempts first, buttons wrap below, close button on the left.
   ========================================================= */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4,
  .eqp-root.eqp-mobile-ui-v4{
    --eqp-bottom-guard: calc(var(--eqp-safe-bottom, 0px) + var(--eqp-vv-inset-b, 0px));
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card,
  .eqp-root.eqp-mobile-ui-v4 > .eqp-card{
    padding-bottom: calc(16px + var(--eqp-bottom-guard, 0px)) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions,
  .eqp-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions{
    padding-bottom: calc(8px + var(--eqp-vv-inset-b, 0px)) !important;
    margin-bottom: calc(8px + var(--eqp-vv-inset-b, 0px)) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card,
  .eqp-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card{
    bottom: calc(23px + var(--eqp-bottom-guard, 0px)) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4.eqp-fullscreen,
  .eqp-hub-root.eqp-mobile-ui-v4.eqp-fullscreen,
  .eqp-root.eqp-mobile-ui-v4.eqp-fullscreen{
    padding: 0 !important;
    gap: 0 !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4.eqp-fullscreen > .eqp-card,
  .eqp-hub-root.eqp-mobile-ui-v4.eqp-fullscreen > .eqp-card,
  .eqp-root.eqp-mobile-ui-v4.eqp-fullscreen > .eqp-card{
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    min-height: 0 !important;
  }

  @supports (height: 100svh){
    .eqp-quiz-root.eqp-mobile-ui-v4.eqp-fullscreen > .eqp-card,
    .eqp-hub-root.eqp-mobile-ui-v4.eqp-fullscreen > .eqp-card,
    .eqp-root.eqp-mobile-ui-v4.eqp-fullscreen > .eqp-card{
      height: var(--eqp-lock-h, 100svh) !important;
      max-height: var(--eqp-lock-h, 100svh) !important;
    }
  }
}

.eqp-overlay-summary .eqp-summary-close{
  left: 10px !important;
  right: auto !important;
}

.eqp-overlay-summary .eqp-summary-body{
  padding-top: 56px !important;
}

.eqp-overlay-summary .eqp-dash .eqp-dash-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.eqp-overlay-summary .eqp-dash .eqp-dash-title{
  width: 100%;
  min-width: 0;
}

.eqp-overlay-summary .eqp-dash .eqp-dash-title h3,
.eqp-overlay-summary .eqp-dash .eqp-dash-sub{
  max-width: 100%;
  overflow-wrap: anywhere;
}

.eqp-overlay-summary .eqp-dash .eqp-dash-actions{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: stretch;
}

.eqp-overlay-summary .eqp-dash .eqp-dash-actions .eqp-btn{
  width: 100%;
  justify-content: center;
}

@media (max-width: 820px){
  .eqp-overlay-summary .eqp-summary-body{
    padding: 54px 14px 14px !important;
  }

  .eqp-overlay-summary .eqp-dash .eqp-dash-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .eqp-overlay-summary .eqp-dash .eqp-dash-actions{
    grid-template-columns: 1fr;
  }
}


/* Batch 227 — Auth card + fullscreen auto-start hardening */
.eqp-auth-card{
  /* Local overrides (populated via Appearance → Player auth screens colors) */
  background: var(--eqp-card, rgba(255,255,255,0.08));
  border-color: var(--eqp-border, rgba(255,255,255,0.14));
  color: var(--eqp-text, #e5e7eb);
}
.eqp-auth-card .eqp-identity-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,0.14)), transparent 0%);
  background: color-mix(in srgb, var(--eqp-card, rgba(255,255,255,0.08)), transparent 20%);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.02em;
  color: color-mix(in srgb, var(--eqp-text, #e5e7eb), transparent 20%);
}
.eqp-auth-card .eqp-identity-title{ margin-top:10px; }
.eqp-auth-card .eqp-identity-subtitle{ color: var(--eqp-muted, #94a3b8) !important; }

.eqp-auth-card .eqp-auth-tabs{
  display:flex;
  gap:8px;
  margin: 14px 0 14px;
  padding:6px;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,0.14)), transparent 0%);
  background: var(--eqp-auth-tab-bg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,0.08)), transparent 10%));
}
.eqp-auth-card .eqp-auth-tab{
  flex:1 1 0;
  border-radius: 999px !important;
  padding:10px 12px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  background: transparent !important;
  color: var(--eqp-auth-tab-text, var(--eqp-text, #e5e7eb)) !important;
  border: 1px solid transparent !important;
}
.eqp-auth-card .eqp-auth-tab.is-active{
  background: var(--eqp-auth-tab-active-bg, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 80%)) !important;
  color: var(--eqp-auth-tab-active-text, var(--eqp-text, #e5e7eb)) !important;
  border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 10%) !important;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 78%);
}
.eqp-auth-card .eqp-auth-panel[hidden]{ display:none !important; }
.eqp-auth-card .eqp-auth-notice{
  display:none;
  margin: 8px 0 0;
}
.eqp-auth-card .eqp-auth-notice.is-ok{
  color: #15803d !important;
  border-color: rgba(34,197,94,.28) !important;
  background: rgba(34,197,94,.08) !important;
}
.eqp-auth-card .eqp-field{ display:flex; flex-direction:column; gap:6px; }
.eqp-auth-card .eqp-identity-grid{ align-items:start; }
.eqp-auth-card .eqp-identity-actions{ align-items:center; }
.eqp-auth-card .eqp-identity-actions .eqp-btn{ min-width: 150px; }
.eqp-auth-card .eqp-identity-select,
.eqp-auth-card .eqp-identity-input{ width:100%; }

/* Inputs + buttons polish for auth screens (scoped, does not affect in-quiz profile panel) */
.eqp-auth-card .eqp-input,
.eqp-auth-card .eqp-select{
  background: var(--eqp-auth-input-bg, color-mix(in srgb, var(--eqp-bg, #0b1020), transparent 10%)) !important;
  border-color: var(--eqp-auth-input-border, var(--eqp-border, rgba(255,255,255,0.14))) !important;
  color: var(--eqp-text, #e5e7eb) !important;
  border-radius: 14px !important;
}
.eqp-auth-card .eqp-input:focus,
.eqp-auth-card .eqp-select:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eqp-accent2, #22d3ee), transparent 78%) !important;
  border-color: color-mix(in srgb, var(--eqp-accent2, #22d3ee), transparent 30%) !important;
}
.eqp-auth-card .eqp-identity-submit{
  background: var(--eqp-btn-bg, #334155) !important;
  color: var(--eqp-btn-text, #e5e7eb) !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--eqp-btn-bg, #334155), transparent 74%);
}
.eqp-auth-card .eqp-btn-ghost{
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,0.14)), transparent 10%) !important;
  color: color-mix(in srgb, var(--eqp-text, #e5e7eb), transparent 10%) !important;
  border-radius: 14px !important;
}

@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4,
  .eqp-root.eqp-mobile-ui-v4{
    min-height: var(--eqp-vv-h, 100dvh) !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card,
  .eqp-root.eqp-mobile-ui-v4 > .eqp-card{
    min-height: var(--eqp-vv-h, 100dvh) !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    padding-bottom: calc(12px + var(--eqp-safe-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions,
  .eqp-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions{
    padding-bottom: calc(8px + var(--eqp-vv-inset-b, 0px)) !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card,
  .eqp-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card{
    bottom: calc(26px + var(--eqp-safe-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  }
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  }
}


/* Batch 228 — Mobile auto-start fullscreen white bottom gap fix
   Problem:
   - On the mobile auto-start app shell (mobile-ui-v4 without manual fullscreen), the card already
     follows the visible viewport height via --eqp-vv-h.
   - Adding --eqp-vv-inset-b again as internal bottom spacing leaves a blank white gap under the
     question card content even though the controls are no longer clipped.
   Fix:
   - For the auto-start path only (mobile-ui-v4, not manual/native fullscreen), size to the visible
     viewport and use only the frozen safe-bottom inset inside the question card.
   - Keep vv-inset-b handling for explicit fullscreen/finish flows untouched.
*/
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4:not(.eqp-fullscreen),
  .eqp-root.eqp-mobile-ui-v4:not(.eqp-fullscreen){
    min-height: var(--eqp-vv-h, 100dvh) !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) > .eqp-card,
  .eqp-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) > .eqp-card{
    min-height: var(--eqp-vv-h, 100dvh) !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    padding-bottom: calc(12px + var(--eqp-safe-bottom, 0px)) !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) > .eqp-card.eqp-card--question .eqp-card-bot,
  .eqp-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) > .eqp-card.eqp-card--question .eqp-card-bot{
    padding-bottom: 2px !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) > .eqp-card.eqp-card--question .eqp-actions,
  .eqp-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) > .eqp-card.eqp-card--question .eqp-actions{
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) .eqp-streak.eqp-streak--card,
  .eqp-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) .eqp-streak.eqp-streak--card{
    bottom: calc(23px + var(--eqp-safe-bottom, 0px)) !important;
  }
}


/* Batch 229 — Auto-start mobile shell true-height follow-up
   Root cause observed on device:
   - The white area is a real gap below the quiz card, not an overlay.
   - That points to the auto-start shell/root/card keeping a stale shorter height captured while
     Chrome's address bar was still visible.
   Fix:
   - For the auto-start mobile shell only (mobile-ui-v4, not manual/native fullscreen),
     pin the shell to all four viewport edges and let the question card fill the shell height,
     instead of depending on an earlier locked pixel height.
   - JS now also performs delayed viewport refresh kicks after the question card mounts.
*/
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4:not(.eqp-fullscreen){
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4:not(.eqp-fullscreen) > .eqp-card.eqp-card--question{
    flex: 1 1 auto !important;
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   Batch 1 follow-up — auto-start prep card gap + eqp_category finish menu reachability
   - Make the preparing screen use the same live viewport height contract as the quiz card.
   - Keep finish/menu bottom actions above the mobile browser gesture area in fullscreen/auto-fullscreen.
   ========================================================= */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4.state-preparing,
  .eqp-hub-root.eqp-mobile-ui-v4.state-preparing,
  .eqp-root.eqp-mobile-ui-v4.state-preparing{
    padding: 0 !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    overflow: hidden !important;
  }

  .eqp-quiz-root.eqp-mobile-ui-v4.state-preparing > .eqp-card.eqp-prep-card,
  .eqp-hub-root.eqp-mobile-ui-v4.state-preparing > .eqp-card.eqp-prep-card,
  .eqp-root.eqp-mobile-ui-v4.state-preparing > .eqp-card.eqp-prep-card{
    height: var(--eqp-vv-h, 100dvh) !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: calc(12px + var(--eqp-safe-top, 0px)) !important;
    padding-right: calc(12px + var(--eqp-safe-right, 0px)) !important;
    padding-left: calc(12px + var(--eqp-safe-left, 0px)) !important;
    padding-bottom: calc(12px + var(--eqp-safe-bottom, 0px)) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-sizing: border-box !important;
  }

  .eqp-finish-overlay,
  .eqp-finish-more-overlay{
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
    top: var(--eqp-vv-top, 0px) !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    bottom: auto !important;
  }

  .eqp-finish-more-overlay{
    align-items: flex-end !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .eqp-finish-more-sheet{
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: calc(var(--eqp-vv-h, 100dvh) - env(safe-area-inset-top, 0px) - 8px - var(--eqp-vv-inset-b, 0px)) !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary,
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-icon{
    transform: translateY(-2px);
  }
}


/* Batch 1 finish follow-up — eqp_category auto-fullscreen finish bottom hit-area fix */
@media (max-width: 820px){
  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-autofit,
  .eqp-finish-more-overlay.eqp-origin-hub.eqp-mobile-autofit{
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-autofit .eqp-finish-sheet{
    max-height: calc(var(--eqp-vv-h, 100dvh) - env(safe-area-inset-top, 0px) - 14px - var(--eqp-vv-inset-b, 0px) - 18px) !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
    transform: translateY(-6px) !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-icon{
    transform: translateY(-2px) !important;
  }

  .eqp-finish-more-overlay.eqp-origin-hub.eqp-mobile-autofit .eqp-finish-more-sheet{
    max-height: calc(var(--eqp-vv-h, 100dvh) - env(safe-area-inset-top, 0px) - 10px - var(--eqp-vv-inset-b, 0px) - 18px) !important;
    margin-bottom: 8px !important;
  }
}


/* Batch 1 final mobile finish follow-up — eqp_category auto-fullscreen menu button must stay above dead bottom zone */
@media (max-width: 820px){
  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-ui-v4.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-bottom: max(22px, calc(18px + env(safe-area-inset-bottom, 0px))) !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-ui-v4.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    transform: translateY(-10px) !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-ui-v4.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn,
  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-ui-v4.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text{
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-ui-v4.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text{
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
  }
}


/* Mobile finish follow-up — always render More as a normal Menu button above Share on mobile finish screens */
@media (max-width: 820px){
  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }

  .eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-label{
    display: inline-block !important;
    visibility: visible !important;
  }
}


/* Mobile finish bottom-edge dead-zone fix
   - Keep Share in its former position and Menu last.
   - Add a non-interactive spacer after the last real button so the bottom-most touch target
     no longer sits inside the browser's bottom gesture/dead zone on mobile fullscreen. */
@media (max-width: 820px){
  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    transform: none !important;
  }

  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-share,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-share,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-share,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-share{ order: 30 !important; }

  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text{ order: 40 !important; }

  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after{
    content: '' !important;
    display: block !important;
    flex: 0 0 auto !important;
    height: calc(46px + env(safe-area-inset-bottom, 0px) + var(--eqp-vv-inset-b, 0px)) !important;
    pointer-events: none !important;
  }

  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Batch 1 finish layout tidy-up
   - Remove the visible fake spacer between finish buttons on mobile.
   - Keep the whole action block lifted by footer padding instead.
   - Re-center the finish menu sheet instead of docking it to the bottom. */
@media (max-width: 820px){
  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary::after{
    content: none !important;
    display: none !important;
    height: 0 !important;
  }

  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .eqp-finish-overlay.eqp-origin-hub.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
  .eqp-finish-overlay.eqp-origin-quiz.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .eqp-finish-overlay.eqp-mobile-ui-v4 .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary,
  .eqp-finish-overlay.eqp-mobile-autofit .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary,
  .eqp-finish-overlay.eqp-origin-quiz .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary,
  .eqp-finish-overlay.eqp-origin-hub .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
    margin-bottom: 0 !important;
    gap: 8px !important;
  }

  .eqp-finish-more-overlay{
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    top: var(--eqp-vv-top, 0px) !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    bottom: auto !important;
  }

  .eqp-finish-more-sheet{
    width: min(92vw, 560px) !important;
    max-width: 560px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    max-height: min(calc(var(--eqp-vv-h, 100dvh) - env(safe-area-inset-top, 0px) - 32px), 620px) !important;
  }

  .eqp-finish-more-overlay.eqp-origin-hub.eqp-mobile-autofit .eqp-finish-more-sheet,
  .eqp-finish-more-overlay.eqp-origin-quiz.eqp-mobile-autofit .eqp-finish-more-sheet{
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   Batch 1 finish fit pass — mobile finish card must fit the live viewport
   - Prevent the finish sheet from extending below the visible display area on Chrome
   - Prevent Firefox/Samsung bottom toolbars from covering the card footer
   - Rely on the live visual viewport height for the shell, then fit the card within that shell
   ========================================================= */
@media (max-width: 820px){
  .eqp-finish-overlay,
  .eqp-finish-more-overlay{
    box-sizing: border-box !important;
    top: var(--eqp-vv-top, 0px) !important;
    height: var(--eqp-vv-h, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--eqp-vv-h, 100dvh) !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: max(8px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
    padding-right: max(8px, calc(env(safe-area-inset-right, 0px) + 8px)) !important;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    padding-left: max(8px, calc(env(safe-area-inset-left, 0px) + 8px)) !important;
  }

  .eqp-finish-sheet.eqp-finish--v2,
  .eqp-finish-more-sheet{
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
  }

  .eqp-finish-sheet.eqp-finish--v2{
    width: min(720px, 100%) !important;
    height: auto !important;
    border-radius: 18px !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-top,
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid,
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
    min-height: 0 !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
    padding: 16px !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
    padding-bottom: 12px !important;
  }

  .eqp-finish-more-sheet{
    width: min(92vw, 560px) !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 820px) and (max-height: 760px){
  .eqp-finish-head,
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-top{
    padding: 16px !important;
  }

  .eqp-finish-stats{
    gap: 8px !important;
  }

  .eqp-finish-stat{
    padding: 8px !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
    padding: 14px !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
    gap: 8px !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
    min-height: 38px !important;
    padding: 9px 11px !important;
  }

  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Batch 1 mobile-finish stability polish */
.eqp-finish-overlay,
.eqp-finish-more-overlay,
.eqp-finish-sheet,
.eqp-finish-more-sheet{
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}
.eqp-finish-sheet,
.eqp-finish-more-sheet,
.eqp-finish-top,
.eqp-finish-mid,
.eqp-finish-bot,
.eqp-finish-more-top,
.eqp-finish-more-body,
.eqp-finish-treat-scroll,
.eqp-finish-primary,
.eqp-finish-stats{
  transition: none !important;
}
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid,
.eqp-finish-more-body,
.eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
  scrollbar-gutter: stable both-edges;
}
@media (max-width: 820px){
  .eqp-finish-overlay,
  .eqp-finish-more-overlay{
    overflow: hidden !important;
  }
  .eqp-finish-sheet.eqp-finish--v2,
  .eqp-finish-more-sheet{
    min-height: min(300px, calc(var(--eqp-vv-h, 100dvh) - 12px)) !important;
    contain: layout paint !important;
  }
  .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-body,
  .eqp-finish-more-body{
    overscroll-behavior: contain !important;
  }
}

/* Batch 3 follow-up: profile update modal + account actions */
.eqp-profile-panel .eqp-profile-update-btn.eqp-btn{
  background:transparent !important;
  color:var(--eqp-text, #0f172a) !important;
  border:1px solid rgba(148,163,184,.75) !important;
  box-shadow:none !important;
  font-size:.8125rem;
  padding:.35rem .9rem;
  border-radius:9999px;
  text-decoration:none;
  margin-top:.2rem;
  margin-bottom:.15rem;
}
.eqp-root[data-theme="dark"] .eqp-profile-panel .eqp-profile-update-btn.eqp-btn,
.eqp-profile-panel[data-theme="dark"] .eqp-profile-update-btn.eqp-btn{
  background:rgba(15,23,42,.75) !important;
  color:#e5e7eb !important;
  border-color:rgba(148,163,184,.85) !important;
}
.eqp-account-modal{
  position:fixed;
  inset:0;
  z-index:1000004;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.eqp-account-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(6px);
}
.eqp-account-modal-shell{
  position:relative;
  z-index:1;
  width:min(720px, calc(100vw - 24px));
  max-height:min(92vh, calc(var(--eqp-vv-h, 100vh) - 24px));
  overflow:auto;
  border-radius:24px;
  box-shadow:0 24px 60px rgba(2,6,23,.24);
  background:var(--eqp-card, #fff);
  color:var(--eqp-text, #0f172a);
}
.eqp-account-modal-close{
  position:absolute;
  top:29px;
  right:4px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:9999px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(255,255,255,.82);
  color:inherit;
  cursor:pointer;
}
.eqp-profile-update-card{
  margin:0;
  box-shadow:none;
  border:none;
}
.eqp-profile-update-card .eqp-identity-inner{
  padding-right:56px;
}
.eqp-profile-readonly{
  opacity:.78;
  cursor:not-allowed;
  background:rgba(148,163,184,.12);
}
.eqp-profile-update-card .eqp-auth-notice.is-ok{
  color:#166534;
}
@media (max-width: 640px){
  .eqp-account-modal{ padding:10px; align-items:flex-start; }
  .eqp-account-modal-shell{
    width:min(100vw - 12px, 720px);
    max-height:min(96vh, calc(var(--eqp-vv-h, 100vh) - 12px));
    border-radius:20px;
  }
  .eqp-profile-update-card .eqp-identity-inner{ padding-right:44px; }
  .eqp-account-modal-close{ top:25px; right:0; width:34px; height:34px; }
}

/* Batch 3 follow-up: persistent page header for account + music actions */
.eqp-page-topbar-shell{
  width:100%;
  margin:0 0 14px;
  color:var(--eqp-pagebar-text, var(--eqp-text,#e5e7eb));
}
.eqp-page-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid var(--eqp-pagebar-border, var(--eqp-border, rgba(148,163,184,.28)));
  background:var(--eqp-pagebar-bg, linear-gradient(135deg, color-mix(in srgb, var(--eqp-header,#0f172a), #ffffff 5%), color-mix(in srgb, var(--eqp-card,#111827), #000000 5%)));
  box-shadow:0 20px 42px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.eqp-page-topbar-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 260px;
}
.eqp-page-topbar-title{
  font-size:1.04rem;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.2;
  color:var(--eqp-pagebar-title, var(--eqp-text,#e5e7eb));
}
.eqp-page-topbar-status{
  font-size:.92rem;
  color:var(--eqp-pagebar-muted, var(--eqp-muted,#94a3b8));
  line-height:1.45;
}
.eqp-page-topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex:1 1 420px;
}
.eqp-page-topbar-btn{
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--eqp-pagebar-btn-border, color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.28)), transparent 10%));
  background:var(--eqp-pagebar-btn-bg, color-mix(in srgb, var(--eqp-card,#111827), #ffffff 5%));
  color:var(--eqp-pagebar-btn-text, var(--eqp-text,#e5e7eb));
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(2,6,23,.10);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.eqp-page-topbar-btn:hover,
.eqp-page-topbar-btn:focus-visible{
  background:var(--eqp-pagebar-btn-hover-bg, color-mix(in srgb, var(--eqp-pagebar-btn-bg, var(--eqp-card,#111827)), var(--eqp-accent,#7c5cff) 18%));
  color:var(--eqp-pagebar-btn-hover-text, var(--eqp-pagebar-btn-text, var(--eqp-text,#e5e7eb)));
  border-color:var(--eqp-pagebar-btn-border, color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 45%));
  box-shadow:0 14px 28px rgba(2,6,23,.16);
  transform:translateY(-1px);
}
.eqp-page-topbar-btn[disabled]{
  opacity:.58;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.eqp-page-topbar-btn[aria-pressed="true"]{
  background:var(--eqp-pagebar-btn-hover-bg, color-mix(in srgb, var(--eqp-pagebar-btn-bg, var(--eqp-card,#111827)), var(--eqp-accent,#7c5cff) 20%));
  border-color:var(--eqp-pagebar-btn-border, color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 45%));
}
.eqp-page-auth-music{
  min-width:108px;
}
.eqp-page-topbar-music-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  font-size:1rem;
  line-height:1;
}
.eqp-page-topbar-btn-label{
  display:inline-flex;
  align-items:center;
}
/* Remove these actions from the profile panel; they live in the page header now. */
.eqp-profile-panel .eqp-profile-update-btn,
.eqp-profile-panel .eqp-profile-guest{
  display:none !important;
}
@media (min-width: 821px){
  .eqp-page-topbar-actions{
    flex-wrap:nowrap;
    flex:0 1 auto;
    gap:8px;
    margin-left:auto;
    position:relative;
    left:-30px;
  }
  .eqp-page-topbar-btn{
    padding:0 14px;
  }
  .eqp-page-auth-music{
    min-width:96px;
  }
}
@media (max-width: 820px){
  .eqp-page-topbar{
    flex-direction:column;
    align-items:stretch;
    padding:14px;
    gap:14px;
  }
  .eqp-page-topbar-actions{
    justify-content:flex-start;
    gap:8px;
  }
  .eqp-page-topbar-btn{
    flex:1 1 calc(50% - 8px);
    min-width:150px;
  }
}

/* Make the edu_quiz_pro start / identity cards span the full page band. */
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3,
.eqp-quiz-root[data-origin="shortcode"] .eqp-identity-card{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
@media (max-width: 560px){
  .eqp-page-topbar-btn{
    flex:1 1 100%;
    width:100%;
  }
}


/* Batch 5 follow-up — edu_quiz_pro desktop scroll chaining + smarter mobile page bar
   - Let the shortcode/root page scroll naturally when hovering the start or quiz card on desktop.
   - Keep touch scrolling available over the card surface on touchscreen desktop devices.
   - Tighten and modernize the mobile page top bar so actions sit closer to the top edge. */
@media (min-width: 821px){
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen){
    overflow: visible !important;
    touch-action: pan-y pinch-zoom;
  }
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card > .eqp-form,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card > .eqp-qgrid,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card > .eqp-qgrid .eqp-form{
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
  }
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card{
    display: block !important;
    height: auto !important;
    touch-action: pan-y pinch-zoom;
  }
}

@media (max-width: 820px){
  .eqp-page-topbar-shell{
    margin: 0 0 12px;
  }
  .eqp-page-topbar{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 10px 12px 12px;
    gap: 10px;
    border-radius: 18px;
  }
  .eqp-page-topbar-actions{
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
    margin: 0;
    width: 100%;
  }
  .eqp-page-topbar-copy{
    order: 2;
    gap: 4px;
  }
  .eqp-page-topbar-title{
    font-size: .98rem;
  }
  .eqp-page-topbar-status{
    font-size: .82rem;
    line-height: 1.35;
  }
  .eqp-page-topbar-btn{
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 12px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    font-size: .89rem;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(2,6,23,.12);
  }
  .eqp-page-auth-music{
    min-width: 0;
  }
  .eqp-page-topbar-music-ico{
    margin-right: 6px;
  }
}

@media (max-width: 560px){
  .eqp-page-topbar{
    padding: 9px 10px 10px;
    gap: 8px;
    border-radius: 16px;
  }
  .eqp-page-topbar-actions{
    gap: 7px;
  }
  .eqp-page-topbar-btn{
    min-height: 40px;
    padding: 8px 10px;
    font-size: .85rem;
    letter-spacing: 0;
  }
  .eqp-page-topbar-copy{
    padding-top: 1px;
  }
}

/* Batch 5 continuation — mobile shortcode page scroll + mobile pagebar refinement */
@media (max-width: 820px){
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen){
    position: relative !important;
    inset: auto !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    touch-action: pan-y pinch-zoom;
  }
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card > .eqp-form,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card > .eqp-qgrid,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-card > .eqp-qgrid .eqp-form,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-start3,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-identity-card,
  .eqp-quiz-root[data-origin="shortcode"]:not(.eqp-fit):not(.eqp-fullscreen) .eqp-identity-card .eqp-identity-inner{
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }

  .eqp-page-topbar-shell{
    margin: 0 0 10px;
  }
  .eqp-page-topbar{
    position: relative;
    padding: 8px 10px 10px;
    gap: 9px;
    border-radius: 20px;
    border-color: color-mix(in srgb, var(--eqp-pagebar-border, var(--eqp-border, rgba(148,163,184,.28))), transparent 8%);
    box-shadow: 0 16px 30px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .eqp-page-topbar::before{
    content:"";
    position:absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events:none;
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 82%), transparent 42%),
      radial-gradient(circle at bottom left, color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 84%), transparent 48%);
    opacity:.95;
  }
  .eqp-page-topbar-copy,
  .eqp-page-topbar-actions{
    position: relative;
    z-index: 1;
  }
  .eqp-page-topbar-copy{
    order: 1;
    gap: 3px;
    padding-top: 0;
  }
  .eqp-page-topbar-title{
    font-size: .94rem;
    line-height: 1.18;
  }
  .eqp-page-topbar-status{
    font-size: .78rem;
    line-height: 1.32;
  }
  .eqp-page-topbar-actions{
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
  }
  .eqp-page-topbar-btn{
    min-height: 39px;
    padding: 8px 10px;
    border-radius: 15px;
    font-size: .83rem;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(2,6,23,.10);
  }
  .eqp-page-auth-music .eqp-page-topbar-btn-label{
    gap: 4px;
  }
}
@media (max-width: 480px){
  .eqp-page-topbar{
    padding: 7px 9px 9px;
    gap: 8px;
    border-radius: 18px;
  }
  .eqp-page-topbar-title{
    font-size: .9rem;
  }
  .eqp-page-topbar-status{
    font-size: .75rem;
  }
  .eqp-page-topbar-actions{
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .eqp-page-topbar-btn{
    min-height: 37px;
    padding: 7px 9px;
    font-size: .8rem;
    border-radius: 14px;
  }
}

/* Guard rail: category launchers must not clip the mounted quiz/auth surfaces */
.eqp-cat-one.eqp-cat-modern,
.eqp-cat-one.eqp-cat-modern .eqp-cat-mount,
.eqp-cat-quizzes,
.eqp-cats-mount{
  overflow: visible !important;
}



/* Batch B — shared top bar + auth card redesign (visual only)
   Guard rails:
   - no auth/runtime/modal logic changes
   - no fullscreen/scroll/mount contract changes
   - skins only the shared page bar + auth surfaces introduced by Batch A */
:where(.eqp-shell-pagebar, .eqp-shell-auth){
  --eqp-batchb-glass-edge: color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 76%);
  --eqp-batchb-glass-edge-2: color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 82%);
  --eqp-batchb-soft-ink: color-mix(in srgb, var(--eqp-text,#e5e7eb), transparent 26%);
  --eqp-batchb-panel-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-surface-2, rgba(15,23,42,.88)), #ffffff 4%), color-mix(in srgb, var(--eqp-surface-1, rgba(2,6,23,.92)), #000000 4%));
  --eqp-batchb-btn-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card,#111827), #ffffff 7%), color-mix(in srgb, var(--eqp-card,#111827), #000000 2%));
}

.eqp-page-topbar-shell{
  margin: 0 0 16px;
}

.eqp-page-topbar{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--eqp-pagebar-border, var(--eqp-border, rgba(148,163,184,.28))), transparent 6%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--eqp-header,#0f172a), #ffffff 6%), color-mix(in srgb, var(--eqp-card,#111827), #000000 2%));
  box-shadow:
    0 18px 42px rgba(2,6,23,.16),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.eqp-page-topbar::before,
.eqp-page-topbar::after{
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.eqp-page-topbar::before{
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 84%), transparent 32%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 86%), transparent 36%);
  opacity: .95;
}
.eqp-page-topbar::after{
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: .75;
}
.eqp-page-topbar-copy,
.eqp-page-topbar-actions{
  position: relative;
  z-index: 1;
}
.eqp-page-topbar-copy{
  gap: 7px;
}
.eqp-page-topbar-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .012em;
  line-height: 1.18;
}
.eqp-page-topbar-title::before{
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--eqp-accent,#7c5cff), var(--eqp-accent-2,#22d3ee));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 88%);
}
.eqp-page-topbar-status{
  max-width: 48ch;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--eqp-pagebar-muted, var(--eqp-batchb-soft-ink, var(--eqp-muted,#94a3b8)));
}
.eqp-page-topbar-actions{
  gap: 10px;
}
.eqp-page-topbar-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--eqp-pagebar-btn-border, var(--eqp-border, rgba(148,163,184,.28))), transparent 4%);
  background: var(--eqp-batchb-btn-bg);
  color: var(--eqp-pagebar-btn-text, var(--eqp-text,#e5e7eb));
  box-shadow:
    0 10px 24px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.eqp-page-topbar-btn:hover,
.eqp-page-topbar-btn:focus-visible{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-pagebar-btn-bg, var(--eqp-card,#111827)), var(--eqp-accent,#7c5cff) 14%),
      color-mix(in srgb, var(--eqp-pagebar-btn-bg, var(--eqp-card,#111827)), var(--eqp-accent-2,#22d3ee) 5%));
  border-color: color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 48%);
  color: var(--eqp-pagebar-btn-hover-text, var(--eqp-text,#e5e7eb));
  box-shadow:
    0 16px 28px rgba(2,6,23,.15),
    0 0 0 1px color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 84%),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.eqp-page-topbar-btn[aria-pressed="true"]{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-pagebar-btn-bg, var(--eqp-card,#111827)), var(--eqp-accent,#7c5cff) 18%),
      color-mix(in srgb, var(--eqp-pagebar-btn-bg, var(--eqp-card,#111827)), var(--eqp-accent-2,#22d3ee) 6%));
  border-color: color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 42%);
}
.eqp-page-topbar-btn[disabled]{
  opacity: .56;
  border-style: solid;
}
.eqp-page-auth-login::before,
.eqp-page-auth-register::before,
.eqp-page-auth-update::before,
.eqp-page-auth-switch::before{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1;
  color: inherit;
  background: color-mix(in srgb, currentColor, transparent 88%);
}
.eqp-page-auth-login::before{ content: "↗"; }
.eqp-page-auth-register::before{ content: "+"; font-weight: 900; }
.eqp-page-auth-update::before{ content: "✎"; }
.eqp-page-auth-switch::before{ content: "⇄"; }
.eqp-page-auth-music{
  min-width: 108px;
}
.eqp-page-topbar-music-ico{
  margin-right: 2px;
  width: 18px;
  justify-content: center;
}
.eqp-page-auth-music[aria-pressed="false"] .eqp-page-topbar-music-ico{
  opacity: .68;
}

.eqp-account-modal-backdrop{
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 88%), transparent 34%),
    rgba(2,6,23,.60);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.eqp-account-modal-shell{
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.28)), transparent 4%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, #111827), #ffffff 5%), color-mix(in srgb, var(--eqp-card, #111827), #000000 3%));
  box-shadow:
    0 28px 68px rgba(2,6,23,.28),
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.eqp-account-modal-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 84%), transparent 36%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 88%), transparent 40%);
  opacity: .92;
}
.eqp-account-modal-mount{
  position: relative;
  z-index: 1;
}
.eqp-account-modal-close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.45)), transparent 8%);
  background: color-mix(in srgb, var(--eqp-card,#111827), #ffffff 18%);
  color: var(--eqp-text, inherit);
  box-shadow: 0 12px 24px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.eqp-account-modal-close:hover,
.eqp-account-modal-close:focus-visible{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 46%);
  background: color-mix(in srgb, var(--eqp-card,#111827), var(--eqp-accent,#7c5cff) 14%);
  box-shadow: 0 16px 28px rgba(2,6,23,.18), 0 0 0 1px color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 84%);
}

.eqp-auth-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 6%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #000000 3%));
  box-shadow:
    0 24px 54px rgba(2,6,23,.20),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
.eqp-auth-card::before,
.eqp-auth-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.eqp-auth-card::before{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 84%), transparent 34%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 88%), transparent 38%);
  opacity: .92;
}
.eqp-auth-card::after{
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
}
.eqp-auth-card .eqp-identity-inner{
  position: relative;
  z-index: 1;
  padding: clamp(1.1rem, 1rem + .4vw, 1.5rem) clamp(1rem, .92rem + .7vw, 1.45rem) clamp(1.2rem, 1rem + .5vw, 1.6rem);
}
.eqp-auth-card .eqp-identity-header{
  margin-bottom: 1rem;
}
.eqp-auth-card .eqp-identity-pill{
  gap: 9px;
  padding: 7px 12px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 6%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 7%),
      color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), var(--eqp-accent,#7c5cff) 6%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-size: .77rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.eqp-auth-card .eqp-identity-title{
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: clamp(1.16rem, 1rem + .6vw, 1.42rem);
  font-weight: 900;
  line-height: 1.18;
}
.eqp-auth-card .eqp-identity-subtitle{
  max-width: 58ch;
  font-size: .92rem;
  line-height: 1.55;
}
.eqp-auth-card .eqp-auth-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 14px;
  padding: 6px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 4%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-auth-tab-bg, var(--eqp-card, rgba(255,255,255,.08))), #ffffff 3%),
      color-mix(in srgb, var(--eqp-auth-tab-bg, var(--eqp-card, rgba(255,255,255,.08))), #000000 2%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.eqp-auth-card .eqp-auth-tab{
  min-height: 44px;
  box-shadow: none;
}
.eqp-auth-card .eqp-auth-tab.is-active{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 78%),
      color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 88%)) !important;
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 80%),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.eqp-auth-card .eqp-auth-notice{
  border-radius: 16px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, rgba(248,113,113,.88), transparent 58%);
  background: color-mix(in srgb, rgba(127,29,29,.34), transparent 20%);
  line-height: 1.45;
}
.eqp-auth-card .eqp-field{
  gap: 7px;
}
.eqp-auth-card label{
  font-size: .79rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--eqp-text,#e5e7eb), transparent 10%);
}
.eqp-auth-card .eqp-identity-grid{
  gap: 14px 16px;
}
.eqp-auth-card .eqp-input,
.eqp-auth-card .eqp-select{
  min-height: 48px;
  padding: 0 14px;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-auth-input-bg, var(--eqp-bg,#0b1020)), #ffffff 3%),
      color-mix(in srgb, var(--eqp-auth-input-bg, var(--eqp-bg,#0b1020)), #000000 1%)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.02);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}
.eqp-auth-card .eqp-input::placeholder{
  color: color-mix(in srgb, var(--eqp-muted,#94a3b8), transparent 12%);
}
.eqp-auth-card .eqp-input:hover,
.eqp-auth-card .eqp-select:hover{
  border-color: color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 62%) !important;
}
.eqp-auth-card .eqp-input:focus,
.eqp-auth-card .eqp-select:focus{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 78%) !important,
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  border-color: color-mix(in srgb, var(--eqp-accent-2,#22d3ee), transparent 28%) !important;
}
.eqp-auth-card .eqp-identity-remember,
.eqp-auth-card .eqp-identity-privacy{
  color: color-mix(in srgb, var(--eqp-muted,#94a3b8), transparent 6%);
}
.eqp-auth-card .eqp-identity-remember{
  margin-top: 12px;
}
.eqp-auth-card .eqp-identity-remember input[type="checkbox"]{
  accent-color: var(--eqp-accent,#7c5cff);
}
.eqp-auth-card .eqp-identity-privacy{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.28)), transparent 24%);
  line-height: 1.55;
}
.eqp-auth-card .eqp-identity-actions{
  margin-top: 14px;
  gap: 10px;
}
.eqp-auth-card .eqp-identity-actions .eqp-btn{
  min-height: 46px;
  padding-inline: 1rem;
}
.eqp-auth-card .eqp-identity-submit{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--eqp-btn-bg,#334155), var(--eqp-accent,#7c5cff) 18%),
      color-mix(in srgb, var(--eqp-btn-bg,#334155), var(--eqp-accent-2,#22d3ee) 4%)) !important;
  border: 1px solid color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 48%) !important;
  box-shadow:
    0 16px 30px color-mix(in srgb, var(--eqp-btn-bg,#334155), transparent 74%),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.eqp-auth-card .eqp-identity-submit:hover,
.eqp-auth-card .eqp-identity-submit:focus-visible{
  transform: translateY(-1px);
  filter: saturate(108%);
}
.eqp-auth-card .eqp-btn-ghost{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-card,#111827), #ffffff 5%),
      color-mix(in srgb, var(--eqp-card,#111827), #000000 1%)) !important;
  border-color: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 4%) !important;
  color: color-mix(in srgb, var(--eqp-text,#e5e7eb), transparent 6%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 20px rgba(2,6,23,.08);
}
.eqp-auth-card .eqp-btn-ghost:hover,
.eqp-auth-card .eqp-btn-ghost:focus-visible{
  border-color: color-mix(in srgb, var(--eqp-accent,#7c5cff), transparent 56%) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-card,#111827), var(--eqp-accent,#7c5cff) 9%),
      color-mix(in srgb, var(--eqp-card,#111827), #000000 1%)) !important;
}
.eqp-profile-update-card{
  background: transparent;
}
.eqp-profile-update-card .eqp-profile-readonly{
  background: color-mix(in srgb, var(--eqp-card,#111827), #ffffff 10%);
  border-color: color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.28)), transparent 8%);
}

@media (min-width: 821px){
  .eqp-page-topbar-actions{
    flex-wrap: nowrap;
    flex: 0 1 auto;
    gap: 10px;
    margin-left: auto;
    left: 0;
  }
  .eqp-page-topbar-btn{
    padding: 0 15px;
  }
}

@media (max-width: 820px){
  .eqp-page-topbar{
    padding: 12px;
    gap: 12px;
    border-radius: 20px;
  }
  .eqp-page-topbar-title{
    font-size: .99rem;
  }
  .eqp-page-topbar-status{
    font-size: .81rem;
    max-width: none;
  }
  .eqp-page-topbar-actions{
    gap: 8px;
  }
  .eqp-page-topbar-btn{
    min-height: 41px;
    border-radius: 16px;
    font-size: .85rem;
  }
  .eqp-auth-card,
  .eqp-account-modal-shell{
    border-radius: 22px;
  }
  .eqp-auth-card .eqp-identity-inner{
    padding: 1rem .95rem 1.15rem;
  }
  .eqp-auth-card .eqp-identity-title{
    font-size: 1.08rem;
  }
  .eqp-auth-card .eqp-identity-subtitle{
    font-size: .84rem;
  }
  .eqp-auth-card .eqp-input,
  .eqp-auth-card .eqp-select,
  .eqp-auth-card .eqp-identity-actions .eqp-btn{
    min-height: 44px;
  }
}

@media (max-width: 560px){
  .eqp-page-topbar-shell{
    margin-bottom: 12px;
  }
  .eqp-page-topbar{
    padding: 10px;
    gap: 9px;
    border-radius: 18px;
  }
  .eqp-page-topbar-title{
    gap: 8px;
    font-size: .93rem;
  }
  .eqp-page-topbar-title::before{
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }
  .eqp-page-topbar-btn{
    min-height: 39px;
    padding: 8px 10px;
    font-size: .81rem;
    border-radius: 14px;
  }
  .eqp-page-auth-login::before,
  .eqp-page-auth-register::before,
  .eqp-page-auth-update::before,
  .eqp-page-auth-switch::before,
  .eqp-page-topbar-music-ico{
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    font-size: .76rem;
  }
  .eqp-account-modal-close{
    width: 34px;
    height: 34px;
  }
  .eqp-auth-card,
  .eqp-account-modal-shell{
    border-radius: 20px;
  }
  .eqp-auth-card .eqp-auth-tabs{
    margin-top: 14px;
  }
}


/* =========================================================
   Batch C — Shared start pages redesign (visual only)
   - Applies premium shared start skin to shortcode and hub/category start pages
   - No root mount/overflow/fullscreen/runtime contract changes
   ========================================================= */
:where(.eqp-start-panel, .eqp-quiz-root[data-origin="shortcode"] .eqp-start3, .eqp-hub-root .eqp-start-hub-panel, .eqp-hub-root .eqp-hub-card.eqp-shell-start){
  --eqp-start-radius: clamp(22px, 2.4vw, 30px);
  --eqp-start-pad: clamp(16px, 2.3vw, 24px);
  --eqp-start-gap: clamp(12px, 1.8vw, 18px);
  --eqp-start-border: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 18%);
  --eqp-start-surface: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), white 4%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 8%));
  --eqp-start-hero: radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 78%), transparent 58%), radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 80%), transparent 62%);
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel,
.eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
  position: relative;
  width: min(100%, var(--eqp-shell-max-card, 1200px));
  max-width: min(100%, var(--eqp-shell-max-card, 1200px));
  margin: 12px auto 14px;
  padding: var(--eqp-start-pad);
  border-radius: var(--eqp-start-radius);
  border: 1px solid var(--eqp-start-border);
  background: var(--eqp-start-hero), var(--eqp-start-surface), var(--eqp-card, rgba(15,23,42,.96));
  box-shadow: 0 20px 46px rgba(2,6,23,.22), 0 0 0 1px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 90%);
}

.eqp-hub-root .eqp-hub-card.eqp-shell-start{
  position: relative;
  width: min(100%, var(--eqp-shell-max-card, 1200px));
  max-width: min(100%, var(--eqp-shell-max-card, 1200px));
  padding: clamp(14px, 2vw, 22px);
  border-radius: clamp(24px, 2.6vw, 32px);
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 14%);
  background:
    radial-gradient(140% 140% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 86%), transparent 56%),
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 88%), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), white 2%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 6%));
  box-shadow: 0 18px 40px rgba(2,6,23,.18), 0 0 0 1px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 92%);
}

.eqp-hub-root .eqp-hub-card.eqp-shell-start > h3{
  margin: 0 0 14px;
  padding-right: 56px;
  font-size: clamp(1.05rem, 1vw + .9rem, 1.45rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--eqp-text, #e5e7eb);
}

.eqp-start-panel-top{
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding-right: 56px;
}

.eqp-start-panel-badge,
.eqp-hub-root .eqp-start-hub-badge,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-badge{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--eqp-accent, #7c5cff), var(--eqp-border, rgba(255,255,255,.14)) 62%);
  background: color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 88%);
  color: color-mix(in srgb, var(--eqp-text, #e5e7eb), var(--eqp-accent-2, #22d3ee) 12%);
}

.eqp-start-panel-title,
.eqp-hub-root .eqp-start-hub-title,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-title{
  margin: 0;
  font-size: clamp(1.35rem, 1.3vw + 1rem, 2rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--eqp-text, #e5e7eb);
  text-wrap: balance;
}

.eqp-start-panel-sub,
.eqp-hub-root .eqp-start-hub-sub,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-sub{
  margin: 0;
  max-width: 72ch;
  font-size: clamp(.92rem, .25vw + .88rem, 1rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--eqp-muted, #94a3b8), var(--eqp-text, #e5e7eb) 8%);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.eqp-start-panel-meta,
.eqp-hub-root .eqp-start-hub-meta,
.eqp-hub-root .eqp-start-hub-loading,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-meta{
  margin-top: 2px;
  font-size: .92rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--eqp-muted, #94a3b8), var(--eqp-text, #e5e7eb) 10%);
}

.eqp-start-panel-stats,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.eqp-start-panel-chip,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip{
  min-height: 68px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 12%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), white 2%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 10%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.eqp-start-panel-chip .k,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .k{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--eqp-muted, #94a3b8), var(--eqp-text, #e5e7eb) 12%);
}

.eqp-start-panel-chip .v,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .v{
  width: 100%;
  max-width: none;
  font-size: 1rem;
  font-weight: 850;
  color: var(--eqp-text, #e5e7eb);
  text-align: left;
}

.eqp-start-panel-actions,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-actions{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.eqp-start-panel-btn,
.eqp-hub-root .eqp-start-hub-btn,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn{
  position: relative;
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 18%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 76%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 10%));
  box-shadow: 0 12px 24px rgba(2,6,23,.14);
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.eqp-start-panel-btn:hover,
.eqp-start-panel-btn:focus-visible,
.eqp-hub-root .eqp-start-hub-btn:hover,
.eqp-hub-root .eqp-start-hub-btn:focus-visible,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn:hover,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(2,6,23,.18);
  border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff), var(--eqp-border, rgba(255,255,255,.14)) 46%);
}

.eqp-hub-root .eqp-start-hub-subjects{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.eqp-hub-root .eqp-start-hub-btn{
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  white-space: normal;
}

.eqp-hub-root .eqp-start-hub-btn::after{
  content: '›';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  opacity: .7;
}

.eqp-start3-tools,
.eqp-hub-tools{
  top: clamp(14px, 2vw, 18px);
  right: clamp(14px, 2vw, 18px);
}

.eqp-start-music-toggle,
.eqp-start-music-toggle--hub{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent-2, #22d3ee) 18%);
  background: color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 8%);
  box-shadow: 0 10px 22px rgba(2,6,23,.14);
}

.eqp-start-music-toggle:hover,
.eqp-start-music-toggle:focus-visible,
.eqp-start-music-toggle--hub:hover,
.eqp-start-music-toggle--hub:focus-visible{
  filter: brightness(1.05);
}

@media (max-width: 820px){
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel,
  .eqp-hub-root .eqp-hub-card.eqp-shell-start,
  .eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .eqp-start-panel-top{
    padding-right: 48px;
  }

  .eqp-start-panel-stats,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-stats,
  .eqp-hub-root .eqp-start-hub-subjects{
    grid-template-columns: minmax(0, 1fr);
  }

  .eqp-start-panel-actions,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-actions{
    gap: 10px;
  }

  .eqp-start-panel-btn,
  .eqp-hub-root .eqp-start-hub-btn,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn{
    width: 100%;
  }
}


/* =========================================================
   Batch C refinement — start pages visual correction
   - Stronger futuristic/minimal skin
   - Smaller mobile scale
   - Keeps start/auth/mount/runtime behavior untouched
   ========================================================= */
:where(.eqp-start-panel, .eqp-quiz-root[data-origin="shortcode"] .eqp-start3, .eqp-hub-root .eqp-start-hub-panel, .eqp-hub-root .eqp-hub-card.eqp-shell-start){
  --eqp-start-refine-radius: clamp(18px, 2vw, 24px);
  --eqp-start-refine-border: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 12%);
  --eqp-start-refine-shadow: 0 14px 34px rgba(2,6,23,.18);
  --eqp-start-refine-panel:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 3%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 9%));
}

.eqp-hub-root .eqp-hub-card.eqp-shell-start{
  padding: 12px;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(2,6,23,.16);
}

.eqp-hub-root .eqp-hub-card.eqp-shell-start > h3{
  margin: 0 0 10px;
  padding-right: 48px;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--eqp-muted, #94a3b8), var(--eqp-text, #e5e7eb) 12%);
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel,
.eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
  border-radius: var(--eqp-start-refine-radius);
  border-color: var(--eqp-start-refine-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 2%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 10%)),
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 86%), transparent 54%),
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 88%), transparent 58%),
    var(--eqp-start-refine-panel);
  box-shadow: var(--eqp-start-refine-shadow), inset 0 1px 0 rgba(255,255,255,.04);
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel{
  max-width: min(100%, 980px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(220px, .72fr);
  grid-template-areas:
    'top actions'
    'stats stats'
    'meta meta';
  gap: 14px 16px;
  align-items: end;
  padding: 16px 18px 18px;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-top{
  grid-area: top;
  margin-bottom: 0;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-actions{
  grid-area: actions;
  margin-top: 0;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent-2, #22d3ee) 14%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 2%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 10%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-actions .eqp-start3-btn{
  width: 100%;
  min-height: 46px;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-stats{
  grid-area: stats;
  margin-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-meta{
  grid-area: meta;
  margin-top: -2px;
}

.eqp-start-panel-top{
  gap: 8px;
  padding-right: 46px;
}

.eqp-start-panel-badge,
.eqp-hub-root .eqp-start-hub-badge,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-badge{
  min-height: 26px;
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: .12em;
  background: color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 90%);
}

.eqp-start-panel-title,
.eqp-hub-root .eqp-start-hub-title,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-title{
  font-size: clamp(1.08rem, .72vw + .96rem, 1.42rem);
  line-height: 1.04;
  letter-spacing: -.026em;
}

.eqp-start-panel-sub,
.eqp-hub-root .eqp-start-hub-sub,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-sub{
  max-width: 64ch;
  font-size: .86rem;
  line-height: 1.45;
}

.eqp-start-panel-meta,
.eqp-hub-root .eqp-start-hub-meta,
.eqp-hub-root .eqp-start-hub-loading,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-meta{
  font-size: .8rem;
}

.eqp-start-panel-chip,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip{
  min-height: 56px;
  padding: 11px 12px;
  border-radius: 16px;
  gap: 4px;
}

.eqp-start-panel-chip .k,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .k{
  font-size: .64rem;
  letter-spacing: .08em;
}

.eqp-start-panel-chip .v,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .v{
  font-size: .9rem;
}

.eqp-start-panel-actions,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-actions{
  gap: 10px;
}

.eqp-start-panel-btn,
.eqp-hub-root .eqp-start-hub-btn,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn{
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(2,6,23,.12);
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 80%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 8%));
}

.eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
  max-width: min(100%, 1020px);
  padding: 14px;
}

.eqp-hub-root .eqp-start-hub-panel .eqp-start-panel-top{
  margin-bottom: 12px;
}

.eqp-hub-root .eqp-start-hub-subjects{
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
}

.eqp-hub-root .eqp-start-hub-btn{
  min-height: 52px;
  padding: 12px 40px 12px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 2%), color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 92%));
}

.eqp-hub-root .eqp-start-hub-btn::after{
  right: 12px;
  font-size: 1rem;
  opacity: .58;
}

.eqp-start3-tools,
.eqp-hub-tools{
  top: 12px;
  right: 12px;
}

.eqp-start-music-toggle,
.eqp-start-music-toggle--hub{
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

@media (max-width: 820px){
  .eqp-hub-root .eqp-hub-card.eqp-shell-start{
    padding: 10px;
    border-radius: 20px;
  }

  .eqp-hub-root .eqp-hub-card.eqp-shell-start > h3{
    margin-bottom: 8px;
    font-size: .68rem;
  }

  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel,
  .eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
    display: block;
    padding: 12px;
    border-radius: 18px;
  }

  .eqp-start-panel-top{
    padding-right: 42px;
    gap: 7px;
  }

  .eqp-start-panel-title,
  .eqp-hub-root .eqp-start-hub-title,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-title{
    font-size: 1.02rem;
    line-height: 1.08;
  }

  .eqp-start-panel-sub,
  .eqp-hub-root .eqp-start-hub-sub,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-sub{
    font-size: .78rem;
    line-height: 1.38;
  }

  .eqp-start-panel-meta,
  .eqp-hub-root .eqp-start-hub-meta,
  .eqp-hub-root .eqp-start-hub-loading,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-meta{
    font-size: .75rem;
  }

  .eqp-start-panel-stats,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-stats{
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .eqp-start-panel-chip,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip{
    min-height: 48px;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .eqp-start-panel-chip .k,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .k{
    font-size: .58rem;
  }

  .eqp-start-panel-chip .v,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip .v{
    font-size: .82rem;
  }

  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-actions{
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .eqp-start-panel-btn,
  .eqp-hub-root .eqp-start-hub-btn,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn{
    min-height: 40px;
    padding: 10px 12px;
    font-size: .84rem;
    border-radius: 13px;
  }

  .eqp-hub-root .eqp-start-hub-subjects{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .eqp-hub-root .eqp-start-hub-btn{
    min-height: 44px;
    padding: 10px 36px 10px 12px;
  }

  .eqp-start-music-toggle,
  .eqp-start-music-toggle--hub{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
}

@media (max-width: 480px){
  .eqp-hub-root .eqp-hub-card.eqp-shell-start{
    padding: 8px;
  }

  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel,
  .eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
    padding: 10px;
    border-radius: 16px;
  }

  .eqp-start-panel-top{
    padding-right: 38px;
  }

  .eqp-start-panel-title,
  .eqp-hub-root .eqp-start-hub-title,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-title{
    font-size: .96rem;
  }

  .eqp-start-panel-sub,
  .eqp-hub-root .eqp-start-hub-sub,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-sub{
    font-size: .74rem;
  }

  .eqp-start-panel-stats,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-stats{
    gap: 7px;
  }

  .eqp-start-panel-chip,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-chip{
    min-height: 44px;
    padding: 8px 9px;
  }

  .eqp-start-panel-btn,
  .eqp-hub-root .eqp-start-hub-btn,
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn{
    min-height: 38px;
    font-size: .8rem;
  }
}


/* =========================================================
   Batch C corrective — revert edu_quiz_pro start card to original stable look
   and give eqp_category / hub start page a clearly visible premium redesign.
   - No runtime / mount / overflow / fullscreen changes.
   ========================================================= */

/* --- Revert shortcode start card to the stable pre-Batch-C visual contract --- */
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel{
  display:block !important;
  grid-template-columns:none !important;
  grid-template-areas:none !important;
  gap:0 !important;
  align-items:stretch !important;
  width:auto !important;
  max-width:560px !important;
  margin:12px auto 14px !important;
  padding:16px 16px 14px !important;
  border-radius:1.25rem !important;
  border:1px solid rgba(148,163,184,0.26) !important;
  background:var(--eqp-card-solid, var(--eqp-card, rgba(15,23,42,0.98))) !important;
  box-shadow:0 14px 34px rgba(2,6,23,0.22) !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-top{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  margin-bottom:12px !important;
  padding-right:0 !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-badge{
  display:inline-flex !important;
  align-self:flex-start !important;
  min-height:auto !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  border:1px solid rgba(148,163,184,0.35) !important;
  background:rgba(148,163,184,0.10) !important;
  color:var(--eqp-text, #e5e7eb) !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-title{
  margin:0 !important;
  min-height:1.3em !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:-0.01em !important;
  text-wrap:initial !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-sub{
  margin:0 !important;
  max-width:none !important;
  min-height:1.2em !important;
  font-size:12.5px !important;
  line-height:1.3 !important;
  color:var(--eqp-muted, #94a3b8) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-stats{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:0 !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-chip{
  min-height:44px !important;
  padding:10px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,0.22) !important;
  background:rgba(2,6,23,0.16) !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-chip .k{
  flex:0 0 auto !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0.02em !important;
  text-transform:none !important;
  color:var(--eqp-muted, #94a3b8) !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-chip .v{
  width:auto !important;
  max-width:60% !important;
  font-size:13px !important;
  font-weight:850 !important;
  text-align:right !important;
  color:var(--eqp-text, #e5e7eb) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-meta{
  margin-top:10px !important;
  font-size:12px !important;
  line-height:1.35 !important;
  color:var(--eqp-muted, #94a3b8) !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-actions{
  margin-top:14px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-btn{
  width:auto !important;
  flex:1 1 auto !important;
  min-height:42px !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  box-shadow:none !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-btn--primary{
  background:var(--eqp-btn-bg, #334155) !important;
  color:var(--eqp-btn-text, #e5e7eb) !important;
}

.eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-btn--ghost{
  background:transparent !important;
  border:1px solid rgba(148,163,184,0.35) !important;
  color:var(--eqp-text, #e5e7eb) !important;
}

@media (max-width: 820px){
  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel{
    margin:10px auto 12px !important;
    padding:14px 14px 12px !important;
  }

  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-stats{
    gap:8px !important;
  }

  .eqp-quiz-root[data-origin="shortcode"] .eqp-start3.eqp-start-panel .eqp-start3-btn{
    width:100% !important;
    flex:1 1 100% !important;
    min-height:40px !important;
    padding:10px 14px !important;
    font-size:inherit !important;
  }
}

/* --- Stronger, clearly visible redesign for eqp_category / hub start page --- */
.eqp-hub-root .eqp-hub-card.eqp-shell-start{
  padding:14px !important;
  border-radius:28px !important;
  border:1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 18%) !important;
  background:
    radial-gradient(140% 130% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 84%), transparent 54%),
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 86%), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 4%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 6%)) !important;
  box-shadow:0 20px 48px rgba(2,6,23,.20), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.eqp-hub-root .eqp-hub-card.eqp-shell-start > h3{
  margin:0 0 12px !important;
  padding-right:48px !important;
  font-size:.74rem !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:color-mix(in srgb, var(--eqp-muted, #94a3b8), var(--eqp-text, #e5e7eb) 18%) !important;
}

.eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
  max-width:min(100%, 1120px) !important;
  margin:0 !important;
  padding:20px !important;
  border-radius:22px !important;
  border:1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent-2, #22d3ee) 12%) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 2%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 10%)),
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 88%), transparent 52%),
    radial-gradient(100% 100% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 88%), transparent 56%) !important;
  box-shadow:0 14px 32px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.eqp-hub-root .eqp-start-hub-panel .eqp-start-panel-top{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  grid-template-areas:
    "badge badge"
    "title strap"
    "sub strap"
    "meta meta" !important;
  gap:10px 14px !important;
  align-items:start !important;
  margin-bottom:18px !important;
  padding-right:0 !important;
}

.eqp-hub-root .eqp-start-hub-badge{ grid-area:badge; }
.eqp-hub-root .eqp-start-hub-title{ grid-area:title; }
.eqp-hub-root .eqp-start-hub-sub{ grid-area:sub; }
.eqp-hub-root .eqp-start-hub-meta{ grid-area:meta; }
.eqp-hub-root .eqp-start-hub-strap{ grid-area:strap; }

.eqp-hub-root .eqp-start-hub-title{
  margin:0 !important;
  font-size:clamp(1.28rem, 1vw + 1rem, 1.78rem) !important;
  line-height:1.04 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}

.eqp-hub-root .eqp-start-hub-sub{
  margin:0 !important;
  max-width:64ch !important;
  font-size:.95rem !important;
  line-height:1.55 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.eqp-hub-root .eqp-start-hub-meta,
.eqp-hub-root .eqp-start-hub-loading{
  margin-top:2px !important;
  font-size:.88rem !important;
  line-height:1.45 !important;
}

.eqp-hub-root .eqp-start-hub-strap{
  align-self:start !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:110px !important;
  min-height:86px !important;
  padding:14px 16px !important;
  border-radius:20px !important;
  border:1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 18%) !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 2%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 10%)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.eqp-hub-root .eqp-start-hub-strap-num{
  display:block !important;
  font-size:1.65rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  color:var(--eqp-text, #e5e7eb) !important;
}

.eqp-hub-root .eqp-start-hub-strap-label{
  display:block !important;
  margin-top:6px !important;
  font-size:.68rem !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:color-mix(in srgb, var(--eqp-muted, #94a3b8), var(--eqp-text, #e5e7eb) 14%) !important;
}

.eqp-hub-root .eqp-start-hub-subjects{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:12px !important;
}

.eqp-hub-root .eqp-start-hub-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  width:100% !important;
  min-height:102px !important;
  padding:16px 48px 16px 16px !important;
  border-radius:18px !important;
  text-align:left !important;
  white-space:normal !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 3%), color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 92%)) !important;
  border:1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 12%) !important;
  box-shadow:0 12px 24px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.eqp-hub-root .eqp-start-hub-btn::after{
  content:'›' !important;
  position:absolute !important;
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-size:1.22rem !important;
  opacity:.72 !important;
}

.eqp-hub-root .eqp-start-hub-btn-main{
  display:block !important;
  margin:0 0 8px !important;
  font-size:1rem !important;
  line-height:1.25 !important;
  font-weight:850 !important;
  letter-spacing:-.015em !important;
  color:var(--eqp-text, #e5e7eb) !important;
}

.eqp-hub-root .eqp-start-hub-btn-meta{
  display:inline-flex !important;
  align-items:center !important;
  min-height:28px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  font-size:.7rem !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:color-mix(in srgb, var(--eqp-text, #e5e7eb), var(--eqp-accent-2, #22d3ee) 12%) !important;
  background:color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 88%) !important;
  border:1px solid color-mix(in srgb, var(--eqp-accent-2, #22d3ee), var(--eqp-border, rgba(255,255,255,.14)) 72%) !important;
}

@media (max-width: 820px){
  .eqp-hub-root .eqp-hub-card.eqp-shell-start{
    padding:12px !important;
    border-radius:22px !important;
  }

  .eqp-hub-root .eqp-start-hub-panel.eqp-start-panel{
    padding:14px !important;
    border-radius:18px !important;
  }

  .eqp-hub-root .eqp-start-hub-panel .eqp-start-panel-top{
    grid-template-columns:minmax(0, 1fr) !important;
    grid-template-areas:
      "badge"
      "title"
      "sub"
      "strap"
      "meta" !important;
    gap:8px !important;
    margin-bottom:14px !important;
  }

  .eqp-hub-root .eqp-start-hub-title{
    font-size:1.06rem !important;
    line-height:1.08 !important;
  }

  .eqp-hub-root .eqp-start-hub-sub{
    font-size:.8rem !important;
    line-height:1.4 !important;
  }

  .eqp-hub-root .eqp-start-hub-meta,
  .eqp-hub-root .eqp-start-hub-loading{
    font-size:.76rem !important;
  }

  .eqp-hub-root .eqp-start-hub-strap{
    min-width:0 !important;
    min-height:64px !important;
    padding:10px 12px !important;
    border-radius:16px !important;
    justify-content:flex-start !important;
  }

  .eqp-hub-root .eqp-start-hub-strap-num{
    font-size:1.2rem !important;
  }

  .eqp-hub-root .eqp-start-hub-strap-label{
    margin-top:4px !important;
    font-size:.62rem !important;
  }

  .eqp-hub-root .eqp-start-hub-subjects{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  .eqp-hub-root .eqp-start-hub-btn{
    min-height:72px !important;
    padding:12px 40px 12px 12px !important;
    border-radius:16px !important;
  }

  .eqp-hub-root .eqp-start-hub-btn-main{
    margin-bottom:6px !important;
    font-size:.9rem !important;
  }

  .eqp-hub-root .eqp-start-hub-btn-meta{
    min-height:24px !important;
    padding:0 8px !important;
    font-size:.64rem !important;
  }
}


/* =========================================================
   Batch D — Shared quiz header redesign (visual only)
   - Keeps existing header zones mounted and stable
   - No runtime, timer, progress, fullscreen, or mount behavior changes
   ========================================================= */
:where(.eqp-shell-header, .eqp-header.eqp-header--compact.eqp-header--grid, .eqp-mobile-controls){
  --eqp-header-d-glass:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 4%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 8%));
  --eqp-header-d-edge: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 14%);
  --eqp-header-d-shadow: 0 18px 42px rgba(2,6,23,.16);
  --eqp-header-chip-bg: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), #ffffff 3%), color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 12%));
  --eqp-header-chip-border: color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), var(--eqp-accent, #7c5cff) 12%);
}

.eqp-header.eqp-header--compact.eqp-header--grid{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 24px;
  border: 1px solid var(--eqp-header-d-edge);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 88%), transparent 54%),
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 90%), transparent 58%),
    var(--eqp-header-d-glass);
  box-shadow: var(--eqp-header-d-shadow), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  gap: 14px !important;
}

.eqp-header.eqp-header--compact.eqp-header--grid::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  pointer-events: none;
  z-index: 0;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-left,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-center,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right{
  position: relative;
  z-index: 1;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-left{
  gap: 10px;
  min-height: 42px;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-q,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-time,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--eqp-header-chip-border);
  background: var(--eqp-header-chip-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-q{
  font-size: .88rem;
  letter-spacing: -.01em;
  color: color-mix(in srgb, var(--eqp-text, #e5e7eb), var(--eqp-accent-2, #22d3ee) 6%);
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-time{
  min-width: 8.5ch;
  padding-inline: 16px;
  border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 42%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--eqp-accent, #7c5cff), #ffffff 10%), color-mix(in srgb, var(--eqp-accent-2, #22d3ee), #ffffff 4%));
  color: var(--eqp-timer, #fff) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 82%), inset 0 1px 0 rgba(255,255,255,.10);
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-time,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-time *{
  color: var(--eqp-timer, #fff) !important;
  stroke: var(--eqp-timer, #fff) !important;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak--slot{
  min-width: 110px !important;
  max-width: 156px !important;
  justify-content: flex-start;
  gap: 7px;
  padding-inline: 12px;
  visibility: hidden;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak.eqp-streak-active,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak.eqp-streak-broken{
  visibility: visible;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak.eqp-streak-active{
  border-color: color-mix(in srgb, #f59e0b, transparent 42%);
  background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(245,158,11,.08));
  color: #fbbf24;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak.eqp-streak-broken{
  border-color: color-mix(in srgb, #ef4444, transparent 42%);
  background: linear-gradient(180deg, rgba(239,68,68,.14), rgba(239,68,68,.08));
  color: #fca5a5;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-streak-label{
  overflow: hidden;
  text-overflow: ellipsis;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-center{
  min-width: clamp(220px, 34vw, 320px);
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-progress--inline{
  width: clamp(220px, 35vw, 320px) !important;
  max-width: 100% !important;
  height: 8px !important;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 18%);
  background: color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 22%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-progress--inline > span{
  border-radius: inherit;
  background: linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22d3ee));
  box-shadow: 0 0 16px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 76%);
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-btn:not(.eqp-btn-pause):not(.eqp-btn-resume):not(.eqp-btn-rect),
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-profile-btn,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-snd-toggle,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-quests-btn,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-fs-toggle,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-density-toggle,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-bgm-toggle,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-music-toggle{
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--eqp-header-chip-border);
  background: var(--eqp-header-chip-bg);
  box-shadow: 0 10px 20px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.05);
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-pr .eqp-btn-pause,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-pr .eqp-btn-resume,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-pr .eqp-btn-rect{
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--eqp-header-chip-border);
  background: var(--eqp-header-chip-bg);
  box-shadow: 0 10px 20px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.05);
}

.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-btn:hover,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-profile-btn:hover,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-snd-toggle:hover,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-quests-btn:hover,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-fs-toggle:hover,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-density-toggle:hover,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-bgm-toggle:hover,
.eqp-header.eqp-header--compact.eqp-header--grid .eqp-hdr-right .eqp-music-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.07);
}

/* Mobile header / controls block */
@media (max-width: 820px){
  .eqp-mobile-controls{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 11px 11px 10px !important;
    margin-bottom: 10px !important;
    border-radius: 18px !important;
    border: 1px solid var(--eqp-header-d-edge) !important;
    background:
      radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 88%), transparent 54%),
      radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee), transparent 92%), transparent 58%),
      var(--eqp-header-d-glass) !important;
    box-shadow: 0 14px 30px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .eqp-mobile-controls .eqp-mc-row--a{
    column-gap: 8px !important;
    min-height: 38px !important;
  }

  .eqp-mobile-controls .eqp-q,
  .eqp-mobile-controls .eqp-time{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--eqp-header-chip-border);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }

  .eqp-mobile-controls .eqp-q{
    font-size: 12px !important;
    letter-spacing: -.01em;
    background: var(--eqp-header-chip-bg);
  }

  .eqp-mobile-controls .eqp-time{
    justify-self: center;
    min-width: 7.6ch;
    font-size: 12px !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--eqp-accent, #7c5cff), #ffffff 8%), color-mix(in srgb, var(--eqp-accent-2, #22d3ee), #ffffff 3%));
    color: var(--eqp-timer, #fff) !important;
    border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 42%) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 84%), inset 0 1px 0 rgba(255,255,255,.10);
    opacity: 1 !important;
  }

  .eqp-mobile-controls .eqp-time,
  .eqp-mobile-controls .eqp-time *{
    color: var(--eqp-timer, #fff) !important;
    stroke: var(--eqp-timer, #fff) !important;
  }

  .eqp-mobile-controls .eqp-hdr-actions{
    gap: 7px !important;
  }

  .eqp-mobile-controls .eqp-profile-btn,
  .eqp-mobile-controls .eqp-pr .eqp-btn-pause,
  .eqp-mobile-controls .eqp-pr .eqp-btn-resume,
  .eqp-mobile-controls .eqp-pr .eqp-btn-rect{
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 12px !important;
    border: 1px solid var(--eqp-header-chip-border);
    background: var(--eqp-header-chip-bg) !important;
    box-shadow: 0 8px 18px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.05);
  }

  .eqp-mobile-controls .eqp-mc-row--b{
    margin-top: 9px !important;
  }

  .eqp-mobile-controls .eqp-progress--block{
    height: 7px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.14)), transparent 18%);
    background: color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)), transparent 22%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }

  .eqp-mobile-controls .eqp-progress--block > span{
    border-radius: inherit !important;
    background: linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22d3ee)) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--eqp-accent, #7c5cff), transparent 80%);
  }

  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card,
  .eqp-root.eqp-mobile-ui-v4 .eqp-streak.eqp-streak--card{
    border-radius: 16px !important;
    border: 1px solid var(--eqp-header-chip-border);
    background: var(--eqp-header-d-glass) !important;
    box-shadow: 0 10px 22px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
}


/* =========================================================
   Batch E — Quiz card / content redesign (visual only)
   Safe scope: question surface, media frame, options, feedback,
   action row, and explanation overlay.
   ========================================================= */
:where(.eqp-quiz-root, .eqp-hub-root){
  --eqp-q-card-radius: 24px;
  --eqp-q-card-border: color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.26)) 80%, rgba(255,255,255,.16));
  --eqp-q-card-shadow: 0 22px 60px rgba(2,6,23,.24), inset 0 1px 0 rgba(255,255,255,.08);
  --eqp-q-top-bg: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 88%, rgba(255,255,255,.08)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 96%, transparent) 100%);
  --eqp-q-bot-bg: linear-gradient(180deg, rgba(255,255,255,0) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 90%, rgba(255,255,255,.03)) 100%);
  --eqp-q-opt-bg: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 90%, rgba(255,255,255,.06)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 98%, transparent) 100%);
  --eqp-q-opt-bg-active: linear-gradient(180deg, color-mix(in srgb, var(--eqp-accent, #7c5cff) 14%, var(--eqp-card-solid, var(--eqp-card, #111827)) 86%) 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 8%, var(--eqp-card-solid, var(--eqp-card, #111827)) 92%) 100%);
  --eqp-q-opt-border: color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.26)) 74%, rgba(255,255,255,.1));
  --eqp-q-opt-shadow: 0 10px 28px rgba(2,6,23,.16);
  --eqp-q-status-border: color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.26)) 70%, rgba(255,255,255,.12));
}

.eqp-ui-v2 .eqp-card.eqp-card--question,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question{
  position: relative;
  isolation: isolate;
  border-radius: var(--eqp-q-card-radius);
  border: 1px solid var(--eqp-q-card-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 96%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 100%, transparent) 100%);
  box-shadow: var(--eqp-q-card-shadow);
}

.eqp-ui-v2 .eqp-card.eqp-card--question::before,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 16%, transparent) 0%, transparent 34%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--eqp-accent, #7c5cff) 15%, transparent) 0%, transparent 32%);
  opacity: .9;
  z-index: 0;
}

.eqp-ui-v2 .eqp-card.eqp-card--question > *,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question > *{
  position: relative;
  z-index: 1;
}

.eqp-ui-v2 .eqp-card.eqp-card--question:hover,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question:hover{
  transform: none;
  box-shadow: 0 24px 64px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-top,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-top{
  padding: 2px 2px 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.18)) 72%, transparent);
  background: var(--eqp-q-top-bg);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-meta,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-meta{
  display: grid;
  gap: 10px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-title,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.18)) 82%, rgba(255,255,255,.08));
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 86%, rgba(255,255,255,.05));
  color: var(--eqp-muted);
  font-size: .79rem !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-pressure,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-pressure{
  margin: 2px 0 0;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-pressure .eqp-pressure,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-pressure .eqp-pressure{
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 74%, rgba(148,163,184,.18));
  box-shadow: inset 0 1px 2px rgba(2,6,23,.24);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-meta-row,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-meta-row{
  align-items: flex-start;
  gap: 10px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem{
  margin: 0;
  font-size: clamp(1.05rem, .94rem + .46vw, 1.28rem) !important;
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: -.01em;
  color: var(--eqp-text);
  text-wrap: pretty;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem p,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem p{
  margin: 0 0 .75em;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem p:last-child,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem p:last-child{
  margin-bottom: 0;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-mid,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-mid{
  padding: 10px 2px 8px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-media,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-media{
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.22)) 84%, rgba(255,255,255,.09));
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 90%, rgba(255,255,255,.07)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 98%, transparent) 100%);
  box-shadow: 0 12px 28px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-media-inner,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-media-inner{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(2,6,23,.18);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-image,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-image{
  border-radius: 16px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-optlist,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-optlist{
  display: grid;
  gap: 12px;
  padding: 0 0 2px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt{
  position: relative;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid var(--eqp-q-opt-border);
  background: var(--eqp-q-opt-bg);
  box-shadow: var(--eqp-q-opt-shadow);
  overflow: hidden;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt::before,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%);
  opacity: .9;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:hover,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:hover{
  border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff) 26%, var(--eqp-q-opt-border));
  box-shadow: 0 14px 34px rgba(2,6,23,.2);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt input,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt input{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt > span,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt > span{
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--eqp-text);
  font-size: clamp(.96rem, .92rem + .15vw, 1.02rem);
  font-weight: 600;
  line-height: 1.55;
}

@supports selector(label:has(input:checked)){
  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:has(> input:checked),
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:has(> input:checked){
    border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff) 48%, rgba(255,255,255,.12));
    background: var(--eqp-q-opt-bg-active);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--eqp-accent, #7c5cff) 22%, transparent) inset, 0 14px 32px rgba(99,102,241,.16);
  }
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-correct,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-correct{
  border-color: rgba(16,185,129,.72) !important;
  background: linear-gradient(180deg, rgba(16,185,129,.18) 0%, rgba(16,185,129,.11) 100%) !important;
  box-shadow: 0 0 0 1px rgba(16,185,129,.14) inset, 0 16px 34px rgba(16,185,129,.12) !important;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-wrong,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-wrong{
  border-color: rgba(239,68,68,.74) !important;
  background: linear-gradient(180deg, rgba(239,68,68,.17) 0%, rgba(239,68,68,.1) 100%) !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,.12) inset, 0 16px 34px rgba(239,68,68,.1) !important;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-moreopts-btn,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-moreopts-btn{
  margin-top: 2px;
  padding: .72rem .95rem;
  border-radius: 16px;
  border-style: solid;
  font-weight: 800;
  letter-spacing: .01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 86%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 96%, transparent) 100%);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-bot,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-bot{
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.18)) 72%, transparent);
  background: var(--eqp-q-bot-bg);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback{
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--eqp-q-status-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 88%, rgba(255,255,255,.06)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 96%, transparent) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback.is-empty,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback.is-empty{
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: .5;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback p,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback .eqp-exp,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback p,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback .eqp-exp{
  margin: 0;
  line-height: 1.55;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions{
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn{
  min-height: 46px;
  padding: 0 22px;
  border-radius: 16px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary{
  min-width: min(220px, 100%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--eqp-accent, #7c5cff) 92%, white 8%) 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 84%, white 16%) 100%);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--eqp-accent, #7c5cff) 28%, transparent);
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-exp-actions,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-exp-actions{
  gap: 10px;
}

.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-expl-chip,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-expl-chip{
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.18)) 80%, rgba(255,255,255,.08));
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 82%, rgba(255,255,255,.06)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 92%, transparent) 100%);
  color: var(--eqp-text);
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(2,6,23,.12);
}

.eqp-expl-overlay{
  backdrop-filter: blur(18px);
  background: rgba(2,6,23,.62);
}

.eqp-expl-panel{
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.2)) 84%, rgba(255,255,255,.1));
  background: linear-gradient(180deg, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 92%, rgba(255,255,255,.06)) 0%, color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 100%, transparent) 100%);
  box-shadow: 0 28px 70px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.06);
}

.eqp-expl-head{
  padding: 16px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.18)) 70%, transparent);
}

.eqp-expl-title{
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.eqp-expl-close{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.18)) 74%, rgba(255,255,255,.08));
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #111827)) 84%, rgba(255,255,255,.05));
  color: var(--eqp-text);
}

.eqp-expl-body{
  padding: 18px;
  line-height: 1.68;
}

.eqp-expl-body p,
.eqp-expl-body ul,
.eqp-expl-body ol{
  margin-top: 0;
}

.eqp-expl-body > :last-child{
  margin-bottom: 0;
}

@media (max-width: 767px){
  :where(.eqp-quiz-root, .eqp-hub-root){
    --eqp-q-card-radius: 18px;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-top,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-top{
    padding: 0 0 10px;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-mid,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-mid{
    padding: 8px 0 6px;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem{
    font-size: clamp(.98rem, .9rem + .65vw, 1.12rem) !important;
    line-height: 1.56;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-media,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-media{
    padding: 8px;
    border-radius: 18px;
    margin-bottom: 10px;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt{
    padding: 13px 14px;
    border-radius: 16px;
    gap: 10px;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt > span,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt > span{
    font-size: .96rem;
    line-height: 1.48;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback{
    padding: 12px 13px;
    border-radius: 16px;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions{
    justify-content: stretch;
  }

  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn,
  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-expl-chip,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-expl-chip{
    width: 100%;
    justify-content: center;
  }

  .eqp-expl-panel{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .eqp-expl-head{
    padding: 14px 14px 12px;
  }

  .eqp-expl-body{
    padding: 14px;
  }
}

/* =========================================================
   Batch F — Profile panel + finish/summary redesign
   Visual-only refinement layer. Do not alter runtime/scroll/fullscreen logic.
   ========================================================= */
:root{
  --eqp-fx-panel-glass: linear-gradient(180deg, rgba(15,23,42,.92), rgba(10,15,31,.96));
  --eqp-fx-panel-line: rgba(148,163,184,.18);
  --eqp-fx-panel-line-2: rgba(99,102,241,.24);
  --eqp-fx-soft-shadow: 0 28px 80px rgba(2,6,23,.34);
  --eqp-fx-inner-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  --eqp-fx-pill-bg: rgba(15,23,42,.62);
  --eqp-fx-tile-bg: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.52));
  --eqp-fx-highlight: linear-gradient(135deg, color-mix(in srgb, var(--eqp-accent, #7c3aed) 78%, white 22%), color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 84%, white 16%));
}

/* Profile panel */
.eqp-profile-overlay{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.eqp-profile-panel.eqp-shell-profile,
.eqp-profile-panel{
  --eqp-profile-card-radius: 28px;
}
.eqp-profile-panel .eqp-profile-panel-inner{
  position: relative;
  background:
    radial-gradient(140% 120% at 12% 0%, color-mix(in srgb, var(--eqp-accent, #7c3aed) 18%, transparent), transparent 42%),
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 16%, transparent), transparent 44%),
    var(--eqp-fx-panel-glass) !important;
  border: 1px solid color-mix(in srgb, var(--eqp-accent, #7c3aed) 16%, var(--eqp-fx-panel-line));
  box-shadow: var(--eqp-fx-soft-shadow), var(--eqp-fx-inner-shadow);
  border-radius: var(--eqp-profile-card-radius);
  overflow: hidden;
}
.eqp-profile-panel .eqp-profile-panel-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 18%, transparent 82%, rgba(255,255,255,.04));
  pointer-events: none;
}
.eqp-profile-panel .eqp-profile-header{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 24px 18px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    linear-gradient(135deg, color-mix(in srgb, var(--eqp-accent, #7c3aed) 10%, transparent), transparent 62%);
}
.eqp-profile-panel .eqp-profile-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.52);
  color: color-mix(in srgb, var(--eqp-text, #e5eefc) 88%, white 12%);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eqp-profile-panel .eqp-profile-title::before{
  content: "◈";
  color: color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 86%, white 14%);
  font-size: .82rem;
  line-height: 1;
}
.eqp-profile-panel .eqp-profile-body{
  display: grid;
  gap: 16px;
  padding: 20px 24px 18px;
}
.eqp-profile-panel .eqp-profile-name{
  margin: 0;
  font-size: clamp(1.28rem, 2vw, 1.7rem);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 94%, white 6%);
}
.eqp-profile-panel .eqp-profile-info{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.42);
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 90%, white 10%);
  line-height: 1.48;
}
.eqp-profile-panel .eqp-profile-meta-panel{
  position: relative;
  margin-top: 2px;
  padding: 16px 16px 14px;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.56));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.eqp-profile-panel .eqp-profile-meta-panel::before{
  content: "Progress";
  display: block;
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 84%, white 16%);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eqp-profile-panel .eqp-profile-progress-row{
  align-items: center;
  gap: 10px;
}
.eqp-profile-panel .eqp-profile-level-label,
.eqp-profile-panel .eqp-profile-xptext{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.52);
  border: 1px solid rgba(148,163,184,.12);
}
.eqp-profile-panel .eqp-profile-level-label{
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 92%, white 8%);
  font-weight: 800;
}
.eqp-profile-panel .eqp-profile-xptext{
  color: color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 76%, white 24%);
  font-weight: 700;
}
.eqp-profile-panel .eqp-profile-xpbar{
  height: 12px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(2,6,23,.5);
  border: 1px solid rgba(148,163,184,.12);
  overflow: hidden;
}
.eqp-profile-panel .eqp-profile-xpbar-fill{
  border-radius: inherit;
  background: var(--eqp-fx-highlight);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px color-mix(in srgb, var(--eqp-accent, #7c3aed) 28%, transparent);
}
.eqp-profile-panel .eqp-profile-volume-group,
.eqp-profile-panel .eqp-profile-next-mode,
.eqp-profile-panel .eqp-profile-tools,
.eqp-profile-panel .eqp-profile-tool,
.eqp-profile-panel .eqp-profile-tool-btn,
.eqp-profile-panel .eqp-profile-tool-label{
  border-color: rgba(148,163,184,.14);
}
.eqp-profile-panel .eqp-profile-volume-group,
.eqp-profile-panel .eqp-profile-next-mode,
.eqp-profile-panel .eqp-profile-tools{
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(15,23,42,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.eqp-profile-panel .eqp-profile-tools{
  padding: 14px;
}
.eqp-profile-panel .eqp-profile-tools-title{
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 86%, white 14%);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eqp-profile-panel .eqp-profile-tools-grid{
  gap: 10px;
}
.eqp-profile-panel .eqp-profile-tool{
  min-height: 84px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), rgba(15,23,42,.5);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.eqp-profile-panel .eqp-profile-tool-btn{
  min-height: 50px;
  border-radius: 16px;
  background: rgba(15,23,42,.58);
  border: 1px solid rgba(148,163,184,.14);
}
.eqp-profile-panel .eqp-profile-tool-btn:hover{
  background: rgba(15,23,42,.74);
  transform: translateY(-1px);
}
.eqp-profile-panel .eqp-profile-tool-label{
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 88%, white 12%);
  font-weight: 700;
}
.eqp-profile-panel .eqp-profile-footer,
.eqp-profile-panel .eqp-profile-actions{
  border-top: 1px solid rgba(148,163,184,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
}
.eqp-profile-panel .eqp-profile-actions{
  padding: 16px 24px 20px;
  gap: 10px;
}
.eqp-profile-panel .eqp-profile-actions .eqp-btn,
.eqp-profile-panel .eqp-profile-close.eqp-btn,
.eqp-profile-panel .eqp-profile-newquiz.eqp-btn,
.eqp-profile-panel .eqp-profile-exit.eqp-btn,
.eqp-profile-panel .eqp-profile-edit-btn.eqp-btn,
.eqp-profile-panel .eqp-profile-guest.eqp-btn{
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(15,23,42,.52);
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 92%, white 8%);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.eqp-profile-panel .eqp-profile-newquiz.eqp-btn,
.eqp-profile-panel .eqp-profile-edit-btn.eqp-btn{
  background: linear-gradient(135deg, color-mix(in srgb, var(--eqp-accent, #7c3aed) 40%, rgba(15,23,42,.75)), color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 34%, rgba(15,23,42,.72)));
  border-color: color-mix(in srgb, var(--eqp-accent, #7c3aed) 26%, rgba(148,163,184,.18));
}
.eqp-profile-panel .eqp-profile-close.eqp-btn{
  background: rgba(15,23,42,.42);
}
.eqp-profile-panel .eqp-profile-actions .eqp-btn:hover,
.eqp-profile-panel .eqp-profile-close.eqp-btn:hover,
.eqp-profile-panel .eqp-profile-newquiz.eqp-btn:hover,
.eqp-profile-panel .eqp-profile-exit.eqp-btn:hover,
.eqp-profile-panel .eqp-profile-edit-btn.eqp-btn:hover,
.eqp-profile-panel .eqp-profile-guest.eqp-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Finish screen */
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2{
  position: relative;
  background:
    radial-gradient(135% 120% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c3aed) 18%, transparent), transparent 44%),
    radial-gradient(115% 95% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 16%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,.96), rgba(7,12,26,.98));
  border: 1px solid color-mix(in srgb, var(--eqp-accent, #7c3aed) 16%, rgba(148,163,184,.18));
  box-shadow: 0 32px 96px rgba(2,6,23,.46), inset 0 1px 0 rgba(255,255,255,.05);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%, transparent 80%, rgba(255,255,255,.03));
  pointer-events: none;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-top{
  position: relative;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-head h3{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 82%, white 18%);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-head h3::before{
  content: "◈";
  color: color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 84%, white 16%);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-xp-line{
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(15,23,42,.42);
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 88%, white 12%);
}
.eqp-finish-overlay .eqp-finish-stats{
  gap: 12px;
}
.eqp-finish-overlay .eqp-finish-stat{
  position: relative;
  min-height: 108px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(15,23,42,.52);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.eqp-finish-overlay .eqp-finish-stat::before{
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--eqp-accent, #7c3aed) 44%, transparent), color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 40%, transparent));
  opacity: .62;
}
.eqp-finish-overlay .eqp-finish-stat-label,
.eqp-finish-overlay .eqp-finish-stat-sub{
  position: relative;
  z-index: 1;
}
.eqp-finish-overlay .eqp-finish-stat-label{
  margin-bottom: 18px;
  padding-left: 44px;
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 80%, white 20%);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eqp-finish-overlay .eqp-finish-stat-value{
  position: relative;
  z-index: 1;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 850;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 95%, white 5%);
}
.eqp-finish-overlay .eqp-finish-stat-sub{
  margin-top: 7px;
  color: color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 70%, white 30%);
  font-weight: 700;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid{
  padding: 18px 24px 12px;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(15,23,42,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
  padding: 18px 18px 20px;
  line-height: 1.68;
  color: color-mix(in srgb, var(--eqp-text, #e5eefc) 92%, white 8%);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll h1,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll h2,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll h3,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll h4{
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 95%, white 5%);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
  padding: 14px 24px 22px;
  border-top: 1px solid rgba(148,163,184,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
  gap: 10px;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
  min-height: 48px;
  border-radius: 17px;
  border: 1px solid rgba(148,163,184,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(15,23,42,.58);
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 92%, white 8%);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-retake,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-nextquiz,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-retake,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-nextquiz{
  background: linear-gradient(135deg, color-mix(in srgb, var(--eqp-accent, #7c3aed) 38%, rgba(15,23,42,.82)), color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 30%, rgba(15,23,42,.74)));
  border-color: color-mix(in srgb, var(--eqp-accent, #7c3aed) 24%, rgba(148,163,184,.2));
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-share{
  background: rgba(15,23,42,.4);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-guest-mode .eqp-btn-download.eqp-guest-locked,
.eqp-finish-overlay .eqp-finish-sheet.eqp-guest-mode .eqp-summary-btn.eqp-guest-locked{
  opacity: .6;
}
.eqp-finish-more-overlay .eqp-finish-more-sheet{
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c3aed) 16%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,13,28,.98));
  border: 1px solid rgba(148,163,184,.15);
  box-shadow: 0 24px 80px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.04);
}
.eqp-finish-more-overlay .eqp-finish-more-title{
  font-weight: 850;
  letter-spacing: -.02em;
}

/* Summary overlay */
.eqp-overlay-summary{
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.eqp-overlay-summary .eqp-summary-card{
  position: relative;
  background:
    radial-gradient(135% 120% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c3aed) 18%, transparent), transparent 45%),
    radial-gradient(105% 90% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,.96), rgba(7,12,26,.98));
  border: 1px solid color-mix(in srgb, var(--eqp-accent, #7c3aed) 16%, rgba(148,163,184,.16));
  box-shadow: 0 32px 96px rgba(2,6,23,.46), inset 0 1px 0 rgba(255,255,255,.05);
}
.eqp-overlay-summary .eqp-summary-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%, transparent 80%, rgba(255,255,255,.03));
}
.eqp-overlay-summary .eqp-summary-close{
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.62);
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 92%, white 8%);
}
.eqp-overlay-summary .eqp-summary-close:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.eqp-overlay-summary .eqp-summary-body{
  padding: 24px;
}
.eqp-overlay-summary .eqp-dash{
  gap: 16px;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-head{
  position: relative;
  align-items: flex-end;
  gap: 14px;
  padding: 0 56px 16px 0;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.eqp-overlay-summary .eqp-dash .eqp-dash-title h3{
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 850;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 95%, white 5%);
}
.eqp-overlay-summary .eqp-dash .eqp-dash-sub{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.5);
  border: 1px solid rgba(148,163,184,.12);
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 86%, white 14%);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-actions{
  gap: 10px;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-actions .eqp-btn,
.eqp-overlay-summary .eqp-dash-actions a,
.eqp-overlay-summary .eqp-dash-actions button{
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.54);
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 92%, white 8%);
  font-weight: 800;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-stats{
  gap: 12px;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-stats > *{
  position: relative;
  min-height: 104px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(15,23,42,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.eqp-overlay-summary .eqp-dash .eqp-section{
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(15,23,42,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  padding: 16px 16px 18px;
}
.eqp-overlay-summary .eqp-dash .eqp-section h3,
.eqp-overlay-summary .eqp-dash .eqp-section h4{
  margin-top: 0;
  color: color-mix(in srgb, var(--eqp-text, #f8fafc) 94%, white 6%);
}
.eqp-overlay-summary .eqp-dash .eqp-section table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
}
.eqp-overlay-summary .eqp-dash .eqp-section th,
.eqp-overlay-summary .eqp-dash .eqp-section td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.eqp-overlay-summary .eqp-dash .eqp-section th{
  color: color-mix(in srgb, var(--eqp-muted, #cbd5e1) 84%, white 16%);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(15,23,42,.38);
}
.eqp-overlay-summary .eqp-dash .eqp-section tr:last-child td{
  border-bottom: 0;
}
.eqp-overlay-summary .eqp-dash .eqp-bars > *{
  border-radius: 999px;
  background: rgba(15,23,42,.48);
  border: 1px solid rgba(148,163,184,.12);
}
.eqp-overlay-summary .eqp-dash .eqp-section .eqp-btn,
.eqp-overlay-summary .eqp-dash .eqp-section button,
.eqp-overlay-summary .eqp-dash .eqp-section a{
  border-radius: 14px;
}

@media (max-width: 820px){
  .eqp-profile-panel .eqp-profile-header{
    padding: 20px 18px 16px;
  }
  .eqp-profile-panel .eqp-profile-body{
    gap: 14px;
    padding: 16px 18px;
  }
  .eqp-profile-panel .eqp-profile-name{
    font-size: 1.2rem;
  }
  .eqp-profile-panel .eqp-profile-actions{
    padding: 14px 18px 18px;
  }
  .eqp-profile-panel .eqp-profile-tools-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-top{
    padding: 18px 16px 14px;
  }
  .eqp-finish-overlay .eqp-finish-stats{
    gap: 10px;
  }
  .eqp-finish-overlay .eqp-finish-stat{
    min-height: 96px;
    padding: 14px 14px 12px;
    border-radius: 18px;
  }
  .eqp-finish-overlay .eqp-finish-stat-label{
    margin-bottom: 14px;
    padding-left: 38px;
    font-size: .68rem;
  }
  .eqp-finish-overlay .eqp-finish-stat::before{
    width: 28px;
    height: 28px;
    border-radius: 12px;
  }
  .eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid{
    padding: 14px 16px 10px;
  }
  .eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
    padding: 14px 14px 16px;
  }
  .eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
    padding: 12px 16px 16px;
  }
  .eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
    min-height: 44px;
    border-radius: 15px;
  }

  .eqp-overlay-summary .eqp-summary-body{
    padding: 18px 16px;
  }
  .eqp-overlay-summary .eqp-dash .eqp-dash-head{
    align-items: flex-start;
    padding-right: 48px;
  }
  .eqp-overlay-summary .eqp-dash .eqp-dash-title h3{
    font-size: 1.16rem;
  }
  .eqp-overlay-summary .eqp-dash .eqp-dash-sub{
    font-size: .7rem;
  }
  .eqp-overlay-summary .eqp-dash .eqp-dash-stats > *{
    min-height: 92px;
    padding: 14px 14px 12px;
    border-radius: 18px;
  }
  .eqp-overlay-summary .eqp-dash .eqp-section{
    padding: 14px;
    border-radius: 20px;
  }
}


/* =========================================================
   Corrective pass — restore earlier finish screen,
   make summary obey Appearance > Summary colors,
   and make quiz card cleaner/minimal while inheriting
   Appearance + Typography settings.
   ========================================================= */

/* 1) Finish screen: revert to earlier simpler/stable look */
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2{
  background: var(--eqp-finish-card, var(--eqp-card-solid, var(--eqp-card, #0f172a))) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.28)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.30) !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2::before{
  content: none !important;
  display: none !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-top,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
  background: transparent !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-head h3{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--eqp-text, #e5e7eb) !important;
  font-size: clamp(1.08rem, .98rem + .42vw, 1.34rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-head h3::before{
  content: none !important;
}
.eqp-finish-overlay .eqp-xp-line{
  display: none !important;
}
.eqp-finish-overlay .eqp-finish-stats{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.eqp-finish-overlay .eqp-finish-stat{
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid var(--eqp-border, rgba(148,163,184,.35)) !important;
  background: color-mix(in srgb, var(--eqp-finish-card, var(--eqp-card, #0f172a)) 90%, transparent) !important;
  box-shadow: none !important;
}
.eqp-finish-overlay .eqp-finish-stat::before{
  content: none !important;
}
.eqp-finish-overlay .eqp-finish-stat-label,
.eqp-finish-overlay .eqp-finish-stat-sub{
  color: var(--eqp-muted, #94a3b8) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.eqp-finish-overlay .eqp-finish-stat-value{
  color: var(--eqp-finish-accent, var(--eqp-text, #e5e7eb)) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-mid .eqp-finish-body{
  padding: 0 !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll{
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-bot{
  border-top: 1px solid var(--eqp-border, rgba(148,163,184,.35)) !important;
  background: var(--eqp-finish-card, var(--eqp-card-solid, var(--eqp-card, #0f172a))) !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn{
  flex: 1 1 calc(50% - 10px) !important;
  min-width: 150px !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: var(--eqp-finish-btn-bg, rgba(148,163,184,.10)) !important;
  color: var(--eqp-finish-btn-text, var(--eqp-text, #e5e7eb)) !important;
  border: 1px solid var(--eqp-border, rgba(148,163,184,.28)) !important;
  box-shadow: none !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-share,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-more-text,
.eqp-finish-more-overlay .eqp-finish-more-body .eqp-btn,
.eqp-finish-more-overlay .eqp-finish-more-close{
  background: var(--eqp-finish-menu-btn-bg, rgba(148,163,184,.10)) !important;
  color: var(--eqp-finish-menu-btn-text, var(--eqp-text, #e5e7eb)) !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn-icon{
  flex: 0 0 44px !important;
  min-width: 44px !important;
  width: 44px !important;
  padding: 0 !important;
}
@media (max-width: 520px){
  .eqp-finish-overlay .eqp-finish-stats{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* 2) Summary card: inherit Appearance > Summary colors */
.eqp-overlay-summary{
  color: var(--eqp-text, #e5e7eb);
}
.eqp-overlay-summary .eqp-overlay-backdrop{
  background: var(--eqp-finish-backdrop, rgba(15,23,42,.72));
}
.eqp-overlay-summary .eqp-summary-card,
.eqp-overlay-summary .eqp-overlay-card.eqp-summary-card{
  background: var(--eqp-summary-card, var(--eqp-card, #0f172a)) !important;
  color: var(--eqp-text, #e5e7eb) !important;
  border: 1px solid var(--eqp-border, rgba(148,163,184,.26)) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
}
.eqp-overlay-summary .eqp-summary-card::before{
  content: none !important;
  display: none !important;
}
.eqp-overlay-summary .eqp-summary-close{
  background: color-mix(in srgb, var(--eqp-summary-card, var(--eqp-card, #0f172a)) 88%, rgba(255,255,255,.10)) !important;
  color: var(--eqp-text, #e5e7eb) !important;
  border: 1px solid var(--eqp-border, rgba(148,163,184,.24)) !important;
  box-shadow: none !important;
}
.eqp-overlay-summary .eqp-summary-body,
.eqp-overlay-summary .eqp-dash,
.eqp-overlay-summary .eqp-dash .eqp-dash-head,
.eqp-overlay-summary .eqp-dash .eqp-dash-title h3,
.eqp-overlay-summary .eqp-dash .eqp-dash-sub{
  color: var(--eqp-text, #e5e7eb) !important;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-sub,
.eqp-overlay-summary .eqp-dash .eqp-section th,
.eqp-overlay-summary .eqp-dash .eqp-stat .k,
.eqp-overlay-summary .eqp-dash .eqp-stat .s{
  color: var(--eqp-muted, #94a3b8) !important;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-actions .eqp-btn,
.eqp-overlay-summary .eqp-dash .eqp-section .eqp-btn,
.eqp-overlay-summary .eqp-dash .eqp-section button,
.eqp-overlay-summary .eqp-dash .eqp-section a{
  background: var(--eqp-summary-btn-bg, var(--eqp-btn-bg, #334155)) !important;
  color: var(--eqp-summary-btn-text, var(--eqp-btn-text, #e5e7eb)) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.26)) !important;
  box-shadow: none !important;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-stats > *,
.eqp-overlay-summary .eqp-dash .eqp-stat,
.eqp-overlay-summary .eqp-dash .eqp-section,
.eqp-overlay-summary .eqp-dash .eqp-chip,
.eqp-overlay-summary .eqp-dash .eqp-bars > *{
  background: color-mix(in srgb, var(--eqp-summary-card, var(--eqp-card, #0f172a)) 86%, transparent) !important;
  color: var(--eqp-text, #e5e7eb) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.22)) !important;
  box-shadow: none !important;
}
.eqp-overlay-summary .eqp-dash .eqp-section table{
  background: transparent !important;
}
.eqp-overlay-summary .eqp-dash .eqp-section th,
.eqp-overlay-summary .eqp-dash .eqp-section td,
.eqp-overlay-summary .eqp-dash .eqp-topic-row{
  border-color: color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.22)) 84%, transparent) !important;
}
.eqp-overlay-summary .eqp-dash .eqp-bar-track{
  background: color-mix(in srgb, var(--eqp-summary-card, var(--eqp-card, #0f172a)) 72%, rgba(255,255,255,.12)) !important;
}
.eqp-overlay-summary .eqp-dash .eqp-bar-fill{
  background: var(--eqp-accent, #7c5cff) !important;
}

/* 3) Quiz card: cleaner/minimal and typography/color driven */
:where(.eqp-quiz-root, .eqp-hub-root){
  --eqp-q-card-radius: 18px;
  --eqp-q-card-border: var(--eqp-border, rgba(148,163,184,.24));
  --eqp-q-card-shadow: 0 12px 30px rgba(2,6,23,.16);
  --eqp-q-top-bg: transparent;
  --eqp-q-bot-bg: transparent;
  --eqp-q-opt-bg: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 92%, transparent);
  --eqp-q-opt-bg-active: color-mix(in srgb, var(--eqp-accent, #7c5cff) 10%, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 90%);
  --eqp-q-opt-border: var(--eqp-border, rgba(148,163,184,.24));
  --eqp-q-opt-shadow: none;
}
.eqp-ui-v2 .eqp-card.eqp-card--question,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question{
  border-radius: var(--eqp-q-card-radius) !important;
  border-color: var(--eqp-q-card-border) !important;
  background: var(--eqp-card-solid, var(--eqp-card, #0f172a)) !important;
  box-shadow: var(--eqp-q-card-shadow) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question::before,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question::before{
  opacity: .22 !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-top,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-top,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-card-bot,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-card-bot{
  background: transparent !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-title,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-title{
  font-family: var(--eqp-title-font, inherit) !important;
  font-size: var(--eqp-title-size, .79rem) !important;
  color: var(--eqp-muted, #94a3b8) !important;
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 92%, transparent) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.24)) !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem{
  font-family: var(--eqp-q-font, inherit) !important;
  font-size: var(--eqp-q-size, clamp(1rem, .94rem + .28vw, 1.18rem)) !important;
  font-weight: 700 !important;
  line-height: 1.58 !important;
  color: var(--eqp-text, #e5e7eb) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-media,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-media{
  padding: 8px !important;
  border-radius: 16px !important;
  border-color: var(--eqp-border, rgba(148,163,184,.24)) !important;
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 96%, transparent) !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt{
  padding: 13px 14px !important;
  border-radius: 14px !important;
  border-color: var(--eqp-q-opt-border) !important;
  background: var(--eqp-q-opt-bg) !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt::before,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt::before{
  opacity: .22 !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:hover,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:hover{
  border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff) 24%, var(--eqp-q-opt-border)) !important;
  box-shadow: none !important;
  transform: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt > span,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt > span{
  font-family: var(--eqp-opt-font, inherit) !important;
  font-size: var(--eqp-opt-size, 1rem) !important;
  line-height: 1.52 !important;
  color: var(--eqp-text, #e5e7eb) !important;
}
@supports selector(label:has(input:checked)){
  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:has(> input:checked),
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:has(> input:checked){
    background: var(--eqp-q-opt-bg-active) !important;
    border-color: color-mix(in srgb, var(--eqp-accent, #7c5cff) 42%, var(--eqp-border, rgba(148,163,184,.24))) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eqp-accent, #7c5cff) 14%, transparent) !important;
  }
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-correct,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-correct{
  border-color: var(--eqp-ok-bd, rgba(16,185,129,.60)) !important;
  background: var(--eqp-ok-bg, rgba(16,185,129,.12)) !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-wrong,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-wrong{
  border-color: var(--eqp-bad-bd, rgba(239,68,68,.60)) !important;
  background: var(--eqp-bad-bg, rgba(239,68,68,.12)) !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback{
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border-color: var(--eqp-border, rgba(148,163,184,.24)) !important;
  background: color-mix(in srgb, var(--eqp-card-solid, var(--eqp-card, #0f172a)) 94%, transparent) !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback p,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-feedback .eqp-exp,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback p,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-feedback .eqp-exp{
  font-family: var(--eqp-explain-font, inherit) !important;
  font-size: var(--eqp-explain-size, .98rem) !important;
  color: var(--eqp-text, #e5e7eb) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-expl-chip,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-expl-chip{
  font-family: var(--eqp-btn-font, inherit) !important;
  font-size: var(--eqp-btn-size, .95rem) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary{
  background: var(--eqp-btn-bg, #334155) !important;
  color: var(--eqp-btn-text, #e5e7eb) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.24)) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-expl-chip,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-expl-chip,
.eqp-expl-panel,
.eqp-expl-close{
  background: var(--eqp-card-solid, var(--eqp-card, #0f172a)) !important;
  color: var(--eqp-text, #e5e7eb) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.24)) !important;
}
.eqp-expl-body,
.eqp-expl-body p,
.eqp-expl-body li{
  font-family: var(--eqp-explain-font, inherit) !important;
  font-size: var(--eqp-explain-size, .98rem) !important;
  color: var(--eqp-text, #e5e7eb) !important;
}
@media (max-width: 767px){
  :where(.eqp-quiz-root, .eqp-hub-root){
    --eqp-q-card-radius: 16px;
    --eqp-q-card-shadow: 0 8px 22px rgba(2,6,23,.12);
  }
  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem{
    font-size: var(--eqp-q-size, 1rem) !important;
    line-height: 1.54 !important;
  }
  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt{
    padding: 12px 12px !important;
    border-radius: 13px !important;
  }
  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
  .eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt > span,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt,
  .eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt > span{
    font-size: var(--eqp-opt-size, .96rem) !important;
  }
}


/* =========================================================
   Typography + profile appearance corrective pass
   Fix Typography menu coverage, restore profile color inheritance,
   keep profile controls visible, and align density button colors.
   ========================================================= */

/* Global typography hooks for shared surfaces */
.eqp-overlay-summary .eqp-dash .eqp-dash-title h3,
.eqp-overlay-summary .eqp-summary-card .eqp-summary-title,
.eqp-overlay-summary .eqp-summary-head h3{
  font-family: var(--eqp-summary-title-font, var(--eqp-title-font, inherit)) !important;
  font-size: var(--eqp-summary-title-size, var(--eqp-title-size, 1.18rem)) !important;
}
.eqp-overlay-summary .eqp-summary-body,
.eqp-overlay-summary .eqp-summary-body p,
.eqp-overlay-summary .eqp-dash .eqp-section,
.eqp-overlay-summary .eqp-dash .eqp-section td,
.eqp-overlay-summary .eqp-dash .eqp-bars,
.eqp-overlay-summary .eqp-dash .eqp-topic-row{
  font-family: var(--eqp-summary-body-font, var(--eqp-explain-font, inherit)) !important;
  font-size: var(--eqp-summary-body-size, var(--eqp-explain-size, .95rem)) !important;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-sub,
.eqp-overlay-summary .eqp-dash .eqp-stat .k,
.eqp-overlay-summary .eqp-dash .eqp-stat .s,
.eqp-overlay-summary .eqp-dash .eqp-section th,
.eqp-overlay-summary .eqp-dash .eqp-chip{
  font-family: var(--eqp-summary-meta-font, var(--eqp-explain-font, inherit)) !important;
  font-size: var(--eqp-summary-meta-size, .78rem) !important;
}
.eqp-overlay-summary .eqp-dash .eqp-dash-actions .eqp-btn,
.eqp-overlay-summary .eqp-dash .eqp-section .eqp-btn,
.eqp-overlay-summary .eqp-dash .eqp-section button,
.eqp-overlay-summary .eqp-dash .eqp-section a,
.eqp-overlay-summary .eqp-summary-close{
  font-family: var(--eqp-summary-btn-font, var(--eqp-btn-font, inherit)) !important;
  font-size: var(--eqp-summary-btn-size, var(--eqp-btn-size, .92rem)) !important;
}

.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-head h3{
  font-family: var(--eqp-finish-title-font, var(--eqp-title-font, inherit)) !important;
  font-size: var(--eqp-finish-title-size, clamp(1.08rem, .98rem + .42vw, 1.34rem)) !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-treat-scroll,
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-body{
  font-family: var(--eqp-finish-body-font, var(--eqp-explain-font, inherit)) !important;
  font-size: var(--eqp-finish-body-size, var(--eqp-explain-size, .95rem)) !important;
}
.eqp-finish-overlay .eqp-finish-stat-label,
.eqp-finish-overlay .eqp-finish-stat-sub,
.eqp-finish-overlay .eqp-finish-stat-value{
  font-family: var(--eqp-finish-stat-font, var(--eqp-btn-font, inherit)) !important;
}
.eqp-finish-overlay .eqp-finish-stat-label,
.eqp-finish-overlay .eqp-finish-stat-sub{
  font-size: var(--eqp-finish-stat-size, .75rem) !important;
}
.eqp-finish-overlay .eqp-finish-stat-value{
  font-size: calc(var(--eqp-finish-stat-size, .75rem) * 1.55) !important;
}
.eqp-finish-overlay .eqp-finish-sheet.eqp-finish--v2 .eqp-finish-primary .eqp-btn,
.eqp-finish-more-overlay .eqp-finish-more-body .eqp-btn,
.eqp-finish-more-overlay .eqp-finish-more-close{
  font-family: var(--eqp-finish-btn-font, var(--eqp-btn-font, inherit)) !important;
  font-size: var(--eqp-finish-btn-size, var(--eqp-btn-size, .92rem)) !important;
}

/* Profile panel should inherit Appearance > Profile panel and button colors */
.eqp-profile-panel .eqp-profile-panel-inner{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 96%, rgba(255,255,255,.04)), color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 100%, rgba(2,6,23,.04))) !important;
  border-color: color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.20)) 88%, transparent) !important;
  box-shadow: 0 24px 72px rgba(2,6,23,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.eqp-profile-panel .eqp-profile-panel-inner::before{
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 20%, transparent 82%, rgba(255,255,255,.03)) !important;
}
.eqp-profile-panel .eqp-profile-header,
.eqp-profile-panel .eqp-profile-footer,
.eqp-profile-panel .eqp-profile-actions{
  background: color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 94%, rgba(255,255,255,.02)) !important;
}
.eqp-profile-panel .eqp-profile-title{
  font-family: var(--eqp-profile-meta-font, var(--eqp-explain-font, inherit)) !important;
  font-size: var(--eqp-profile-meta-size, .74rem) !important;
  color: var(--eqp-text, #e5e7eb) !important;
  background: color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 84%, rgba(255,255,255,.08)) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.18)) !important;
}
.eqp-profile-panel .eqp-profile-name{
  font-family: var(--eqp-profile-title-font, var(--eqp-title-font, inherit)) !important;
  font-size: var(--eqp-profile-title-size, clamp(1.24rem, 2vw, 1.64rem)) !important;
  color: var(--eqp-text, #e5e7eb) !important;
}
.eqp-profile-panel .eqp-profile-info{
  font-family: var(--eqp-profile-body-font, var(--eqp-explain-font, inherit)) !important;
  font-size: var(--eqp-profile-body-size, var(--eqp-explain-size, .94rem)) !important;
  color: var(--eqp-text, #e5e7eb) !important;
  background: color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 88%, rgba(255,255,255,.04)) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.18)) !important;
}
.eqp-profile-panel .eqp-profile-meta-panel,
.eqp-profile-panel .eqp-profile-volume-group,
.eqp-profile-panel .eqp-profile-next-mode,
.eqp-profile-panel .eqp-profile-tools,
.eqp-profile-panel .eqp-profile-tool{
  background: color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 90%, rgba(255,255,255,.05)) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.18)) !important;
}
.eqp-profile-panel .eqp-profile-meta-panel::before,
.eqp-profile-panel .eqp-profile-level-label,
.eqp-profile-panel .eqp-profile-xptext,
.eqp-profile-panel .eqp-profile-volume-label,
.eqp-profile-panel .eqp-profile-tool-label,
.eqp-profile-panel .eqp-next-mode-label{
  font-family: var(--eqp-profile-meta-font, var(--eqp-explain-font, inherit)) !important;
  font-size: var(--eqp-profile-meta-size, .8rem) !important;
}
.eqp-profile-panel .eqp-profile-level-label,
.eqp-profile-panel .eqp-profile-xptext{
  color: var(--eqp-text, #e5e7eb) !important;
  background: color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 82%, rgba(255,255,255,.08)) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.18)) !important;
}
.eqp-profile-panel .eqp-profile-volume-group{
  display: block !important;
  margin-top: 0 !important;
  padding: 14px 14px 12px !important;
  border-radius: 20px !important;
}
.eqp-profile-panel .eqp-profile-volume-label{
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--eqp-text, #e5e7eb) !important;
}
.eqp-profile-panel .eqp-profile-volume-slider{
  display: block !important;
  width: 100% !important;
  accent-color: var(--eqp-btn-bg, var(--eqp-accent, #7c5cff));
  background: transparent !important;
}
.eqp-profile-panel .eqp-profile-tool-btn,
.eqp-profile-panel .eqp-next-mode-pill{
  background: color-mix(in srgb, var(--eqp-btn-bg, #334155) 90%, rgba(255,255,255,.04)) !important;
  color: var(--eqp-btn-text, #e5e7eb) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.18)) !important;
}
.eqp-profile-panel .eqp-profile-tool-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.eqp-profile-panel .eqp-profile-tool-label{
  font-family: var(--eqp-profile-tool-font, var(--eqp-explain-font, inherit)) !important;
  font-size: var(--eqp-profile-tool-size, .82rem) !important;
}
.eqp-profile-panel .eqp-profile-actions .eqp-btn,
.eqp-profile-panel .eqp-profile-close.eqp-btn,
.eqp-profile-panel .eqp-profile-newquiz.eqp-btn,
.eqp-profile-panel .eqp-profile-exit.eqp-btn,
.eqp-profile-panel .eqp-profile-edit-btn.eqp-btn,
.eqp-profile-panel .eqp-profile-guest.eqp-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--eqp-profile-btn-font, var(--eqp-btn-font, inherit)) !important;
  font-size: var(--eqp-profile-btn-size, var(--eqp-btn-size, .92rem)) !important;
  background: var(--eqp-btn-bg, #334155) !important;
  color: var(--eqp-btn-text, #e5e7eb) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.18)) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.eqp-profile-panel .eqp-profile-close.eqp-btn::before{
  content: "✕";
  margin-right: .45rem;
  font-size: .92em;
}
.eqp-profile-panel .eqp-profile-exit.eqp-btn::before{
  content: "↩";
  margin-right: .45rem;
  font-size: .95em;
}
.eqp-profile-panel .eqp-profile-newquiz.eqp-btn::before{
  content: "⟳";
  margin-right: .45rem;
  font-size: .95em;
}
.eqp-profile-panel .eqp-profile-actions .eqp-btn:hover,
.eqp-profile-panel .eqp-profile-tool-btn:hover,
.eqp-profile-panel .eqp-next-mode-pill:hover{
  filter: brightness(1.04) !important;
}
.eqp-profile-panel .eqp-profile-update-btn.eqp-btn{
  background: var(--eqp-btn-bg, #334155) !important;
  color: var(--eqp-btn-text, #e5e7eb) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.18)) !important;
}

/* Header utility button typography + density color inheritance */
.eqp-header .eqp-density-toggle{
  font-family: var(--eqp-header-btn-font, var(--eqp-btn-font, inherit)) !important;
  font-size: var(--eqp-header-btn-size, var(--eqp-btn-size, .84rem)) !important;
  background: var(--eqp-btn-bg, #334155) !important;
  color: var(--eqp-btn-text, #e5e7eb) !important;
  border-color: var(--eqp-border, rgba(148,163,184,.22)) !important;
}
.eqp-header .eqp-density-toggle *,
.eqp-header .eqp-density-toggle span{
  color: inherit !important;
  font-family: inherit !important;
}


/* =========================================================
   1.9.9.290 corrective layer
   - restore visible profile panel action buttons + mode pills
   - unify page topbar music button theme
   - add safe 3D polish to options, media, and pause/start button
   - upgrade quests panel presentation
   ========================================================= */

/* Profile panel controls: force clear visibility and usable layout */
.eqp-profile-panel .eqp-profile-footer{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:sticky;
  bottom:0;
  z-index:4;
  padding:14px 18px calc(16px + env(safe-area-inset-bottom) + var(--eqp-vv-inset-b, 0px)) !important;
  border-top:1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.22)) 88%, transparent) !important;
  background: color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 96%, rgba(255,255,255,.04)) !important;
  box-shadow: 0 -10px 24px rgba(2,6,23,.14);
}
.eqp-profile-panel .eqp-profile-actions{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px !important;
  width:100%;
  padding:0 !important;
  visibility:visible !important;
  opacity:1 !important;
}
.eqp-profile-panel .eqp-profile-actions .eqp-btn,
.eqp-profile-panel .eqp-profile-close.eqp-btn,
.eqp-profile-panel .eqp-profile-newquiz.eqp-btn,
.eqp-profile-panel .eqp-profile-exit.eqp-btn{
  min-height:48px !important;
  min-width:0;
  padding:0 12px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45rem;
  white-space:nowrap;
  text-align:center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-btn-bg, #334155) 88%, white 12%), color-mix(in srgb, var(--eqp-btn-bg, #334155) 100%, black 4%)) !important;
  color:var(--eqp-btn-text, #ffffff) !important;
  border:1px solid color-mix(in srgb, var(--eqp-btn-bg, #334155) 42%, white 16%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(2,6,23,.22),
    0 12px 22px rgba(2,6,23,.16) !important;
  text-shadow:0 1px 0 rgba(2,6,23,.18);
}
.eqp-profile-panel .eqp-profile-actions .eqp-btn:hover,
.eqp-profile-panel .eqp-profile-close.eqp-btn:hover,
.eqp-profile-panel .eqp-profile-newquiz.eqp-btn:hover,
.eqp-profile-panel .eqp-profile-exit.eqp-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}
.eqp-profile-panel .eqp-profile-close.eqp-btn{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 72%, white 6%), color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 90%, black 8%)) !important;
  color:var(--eqp-text, #e5e7eb) !important;
  border-color:var(--eqp-border, rgba(148,163,184,.22)) !important;
}
.eqp-profile-panel .eqp-profile-next-mode{
  display:grid !important;
  grid-template-columns:auto repeat(2, minmax(0, 1fr));
  align-items:center;
  gap:10px;
  padding:12px 14px !important;
  border-radius:18px !important;
}
.eqp-profile-panel .eqp-next-mode-label{
  display:inline-flex !important;
  align-items:center;
  color:var(--eqp-text, #e5e7eb) !important;
  font-weight:700;
}
.eqp-profile-panel .eqp-next-mode-pill{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 12px !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-btn-bg, #334155) 84%, white 10%), color-mix(in srgb, var(--eqp-btn-bg, #334155) 100%, black 2%)) !important;
  color:var(--eqp-btn-text, #ffffff) !important;
  border:1px solid color-mix(in srgb, var(--eqp-btn-bg, #334155) 46%, white 14%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(2,6,23,.16),
    0 10px 20px rgba(2,6,23,.12) !important;
}
.eqp-profile-panel .eqp-next-mode-pill.is-active{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--eqp-accent, #7c5cff) 62%, white 8%), color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 48%, black 2%)) !important;
  color:var(--eqp-btn-text, #ffffff) !important;
  border-color:color-mix(in srgb, var(--eqp-accent, #7c5cff) 54%, white 14%) !important;
}
@media (max-width: 560px){
  .eqp-profile-panel .eqp-profile-actions{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .eqp-profile-panel .eqp-profile-close.eqp-btn{
    grid-column:1 / -1;
  }
  .eqp-profile-panel .eqp-profile-next-mode{
    grid-template-columns:1fr 1fr;
  }
  .eqp-profile-panel .eqp-next-mode-label{
    grid-column:1 / -1;
  }
}

/* Profile tool buttons and sliders keep configured colors */
.eqp-profile-panel .eqp-profile-tool-btn,
.eqp-profile-panel .eqp-profile-volume-slider{
  color:var(--eqp-btn-text, #ffffff) !important;
}
.eqp-profile-panel .eqp-profile-tool-btn{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-btn-bg, #334155) 86%, white 10%), color-mix(in srgb, var(--eqp-btn-bg, #334155) 100%, black 3%)) !important;
  border-color:color-mix(in srgb, var(--eqp-btn-bg, #334155) 42%, white 12%) !important;
}

/* Page topbar music button should look like the rest of the topbar actions */
.eqp-page-topbar .eqp-page-auth-music,
.eqp-page-topbar .eqp-page-auth-music[aria-pressed="true"],
.eqp-page-topbar .eqp-page-auth-music[aria-pressed="false"]{
  background:var(--eqp-pagebar-btn-bg, var(--eqp-btn-bg, #334155)) !important;
  color:var(--eqp-pagebar-btn-text, var(--eqp-btn-text, #ffffff)) !important;
  border-color:var(--eqp-pagebar-btn-border, var(--eqp-border, rgba(148,163,184,.24))) !important;
  box-shadow:0 10px 24px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.eqp-page-topbar .eqp-page-auth-music:hover,
.eqp-page-topbar .eqp-page-auth-music:focus-visible,
.eqp-page-topbar .eqp-page-auth-music[aria-pressed="true"]{
  background:var(--eqp-pagebar-btn-hover-bg, color-mix(in srgb, var(--eqp-pagebar-btn-bg, var(--eqp-btn-bg, #334155)), var(--eqp-accent, #7c5cff) 18%)) !important;
  color:var(--eqp-pagebar-btn-hover-text, var(--eqp-pagebar-btn-text, var(--eqp-btn-text, #ffffff))) !important;
}
.eqp-page-topbar .eqp-page-auth-music,
.eqp-page-topbar .eqp-page-auth-music .eqp-page-topbar-btn-label,
.eqp-page-topbar .eqp-page-auth-music .eqp-page-topbar-music-ico{
  color:inherit !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

/* 3D quiz options: richer depth without changing layout behavior */
:where(.eqp-quiz-root, .eqp-hub-root){
  --eqp-q-3d-lip: rgba(255,255,255,.14);
  --eqp-q-3d-shadow: rgba(2,6,23,.20);
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt{
  transform:translateY(0);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, #111827) 74%, white 12%) 0%, color-mix(in srgb, var(--eqp-card, #111827) 90%, transparent) 58%, color-mix(in srgb, var(--eqp-card, #111827) 100%, black 2%) 100%) !important;
  border-color:color-mix(in srgb, var(--eqp-q-opt-border, var(--eqp-border, rgba(148,163,184,.24))) 84%, white 10%) !important;
  box-shadow:
    inset 0 1px 0 var(--eqp-q-3d-lip),
    inset 0 -2px 0 rgba(2,6,23,.18),
    0 14px 30px var(--eqp-q-3d-shadow) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt::before,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt::before{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) !important;
  opacity:.9 !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:hover,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:focus-within,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:hover,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:focus-within{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -2px 0 rgba(2,6,23,.22),
    0 20px 36px rgba(2,6,23,.24) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:has(input:checked),
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-selected,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:has(input:checked),
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-selected{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-accent, #7c5cff) 24%, white 10%) 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff) 12%, var(--eqp-card, #111827) 88%) 50%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 16%, var(--eqp-card, #111827) 84%) 100%) !important;
  border-color:color-mix(in srgb, var(--eqp-accent, #7c5cff) 54%, white 10%) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-correct,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-correct{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(3,84,42,.22),
    0 18px 32px rgba(21,128,61,.18) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-wrong,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-wrong{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(127,29,29,.26),
    0 18px 32px rgba(185,28,28,.14) !important;
}

/* 3D media frame */
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-media,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-media{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-card, #111827) 80%, white 10%), color-mix(in srgb, var(--eqp-card, #111827) 100%, black 4%)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(2,6,23,.20),
    0 22px 40px rgba(2,6,23,.22) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-media-inner,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-media-inner{
  border:1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.22)) 72%, white 10%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-image,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-image{
  filter: saturate(1.04) contrast(1.02);
  box-shadow: 0 18px 34px rgba(2,6,23,.24);
}

/* 3D start/pause/resume control */
.eqp-btn-pause.eqp-btn-rect,
.eqp-pr .eqp-btn-pause.eqp-btn-rect,
.eqp-mobile-controls .eqp-pr .eqp-btn-pause.eqp-btn-rect,
.eqp-header .eqp-btn-pause.eqp-btn-rect{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-btn-bg, #334155) 82%, white 16%) 0%, color-mix(in srgb, var(--eqp-btn-bg, #334155) 98%, black 6%) 100%) !important;
  color:var(--eqp-btn-text, #ffffff) !important;
  border:1px solid color-mix(in srgb, var(--eqp-btn-bg, #334155) 46%, white 14%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 0 rgba(2,6,23,.20),
    0 14px 26px rgba(2,6,23,.18) !important;
  transform:translateY(0);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.eqp-btn-pause.eqp-btn-rect:hover,
.eqp-pr .eqp-btn-pause.eqp-btn-rect:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(2,6,23,.22),
    0 18px 32px rgba(2,6,23,.22) !important;
}

/* Sophisticated quests panel */
.eqp-quests-panel{
  width:min(420px, calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  border-radius:28px !important;
  border:1px solid color-mix(in srgb, var(--eqp-accent, #7c5cff) 16%, rgba(148,163,184,.22)) !important;
  background:
    radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--eqp-accent, #7c5cff) 18%, transparent), transparent 42%),
    radial-gradient(105% 100% at 100% 0%, color-mix(in srgb, var(--eqp-accent-2, #22d3ee) 16%, transparent), transparent 40%),
    linear-gradient(180deg, rgba(9,14,28,.96), rgba(4,8,18,.98)) !important;
  box-shadow: 0 30px 90px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow:hidden;
}
.eqp-quests-head{
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 12px !important;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.eqp-quests-kicker{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--eqp-muted, #cbd5e1) 82%, white 18%);
  font-weight:800;
  margin-bottom:4px;
}
.eqp-quests-title{
  font-size:1.18rem;
  font-weight:900;
  color:#f8fafc;
}
.eqp-quests-sub{
  margin-top:4px;
  font-size:.86rem;
  line-height:1.45;
  color:rgba(226,232,240,.84);
}
.eqp-quests-close{
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(15,23,42,.58) !important;
  color:#f8fafc !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.eqp-quests-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  padding:0 18px 14px;
}
.eqp-quests-stat{
  padding:12px 10px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.eqp-quests-stat .k{
  display:block;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(203,213,225,.78);
  margin-bottom:6px;
}
.eqp-quests-stat strong{
  display:block;
  font-size:1rem;
  color:#f8fafc;
}
.eqp-quests-list{
  gap:12px !important;
  padding:4px 18px 18px !important;
}
.eqp-quests-list li{
  align-items:center !important;
  gap:12px !important;
  padding:14px 14px !important;
  border-radius:22px !important;
  border:1px solid rgba(148,163,184,.12) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.eqp-quest-copy{
  min-width:0;
  flex:1 1 auto;
}
.eqp-quest-copy > span{
  display:block;
  font-weight:800;
  color:#f8fafc;
  margin-bottom:3px;
}
.eqp-quest-copy > small{
  display:block;
  color:rgba(203,213,225,.82);
  line-height:1.42;
}
.eqp-quest-progress{
  margin-top:10px;
  height:8px;
  border-radius:999px;
  background:rgba(51,65,85,.55);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(2,6,23,.24);
}
.eqp-quest-progress i{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22d3ee));
  box-shadow:0 0 18px color-mix(in srgb, var(--eqp-accent, #7c5cff) 42%, transparent);
}
.eqp-quests-list li .badge{
  min-width:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.62);
  color:#f8fafc;
  font-weight:800;
}
.eqp-quests-list li.done{
  border-color:color-mix(in srgb, var(--eqp-accent, #7c5cff) 24%, rgba(148,163,184,.18)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eqp-accent, #7c5cff) 16%, rgba(255,255,255,.06)), rgba(255,255,255,.02)),
    rgba(15,23,42,.48) !important;
}
.eqp-quests-list li.done .badge{
  background:linear-gradient(135deg, var(--eqp-accent, #7c5cff), var(--eqp-accent-2, #22d3ee)) !important;
  color:#fff !important;
  border-color:transparent !important;
}
@media (max-width: 560px){
  .eqp-quests-stats{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .eqp-quests-panel{
    right:14px !important;
    left:14px !important;
    bottom:14px !important;
    width:auto !important;
    max-width:none !important;
  }
}


/* Quest system theming + rotating board */
:root{
  --eqp-quest-panel-bg: var(--eqp-quest-panel, linear-gradient(180deg, rgba(9,14,28,.96), rgba(4,8,18,.98)));
  --eqp-quest-card-bg: var(--eqp-quest-card, linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)));
  --eqp-quest-border-color: var(--eqp-quest-border, rgba(148,163,184,.14));
  --eqp-quest-text-color: var(--eqp-quest-text, #f8fafc);
  --eqp-quest-muted-color: var(--eqp-quest-muted, rgba(203,213,225,.82));
  --eqp-quest-accent-color: var(--eqp-quest-accent, var(--eqp-accent, #7c5cff));
  --eqp-quest-accent2-color: var(--eqp-quest-accent-2, var(--eqp-accent-2, #22d3ee));
  --eqp-quest-btn-bg-color: var(--eqp-quest-btn-bg, rgba(15,23,42,.62));
  --eqp-quest-btn-text-color: var(--eqp-quest-btn-text, #ffffff);
}
.eqp-quests-panel{
  width:min(560px, calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  max-height:min(78vh, 820px) !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius:30px !important;
  border:1px solid var(--eqp-quest-border-color) !important;
  background:var(--eqp-quest-panel-bg) !important;
  color:var(--eqp-quest-text-color) !important;
  box-shadow:0 30px 90px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow:hidden !important;
}
.eqp-quests-head{
  padding:20px 20px 14px !important;
  border-bottom:1px solid color-mix(in srgb, var(--eqp-quest-border-color) 92%, transparent) !important;
}
.eqp-quests-kicker{
  color:var(--eqp-quest-muted-color) !important;
  font-family:var(--eqp-quest-meta-font, var(--eqp-profile-meta-font, inherit));
  font-size:var(--eqp-quest-meta-size, .72rem);
}
.eqp-quests-title{
  color:var(--eqp-quest-text-color) !important;
  font-family:var(--eqp-quest-title-font, inherit);
  font-size:var(--eqp-quest-title-size, 1.18rem);
}
.eqp-quests-sub,
.eqp-quests-status,
.eqp-quest-copy > small,
.eqp-quest-meta{
  color:var(--eqp-quest-muted-color) !important;
  font-family:var(--eqp-quest-body-font, inherit);
  font-size:var(--eqp-quest-body-size, .88rem);
}
.eqp-quests-status{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--eqp-quest-accent-color) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--eqp-quest-border-color) 75%, var(--eqp-quest-accent-color) 25%);
}
.eqp-quests-close{
  background:var(--eqp-quest-btn-bg-color) !important;
  color:var(--eqp-quest-btn-text-color) !important;
  border:1px solid var(--eqp-quest-border-color) !important;
  font-family:var(--eqp-quest-btn-font, inherit);
  font-size:var(--eqp-quest-btn-size, .92rem);
}
.eqp-quests-stats{
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  padding:0 20px 14px !important;
}
.eqp-quests-stat{
  background:var(--eqp-quest-card-bg) !important;
  border:1px solid var(--eqp-quest-border-color) !important;
}
.eqp-quests-stat .k{
  color:var(--eqp-quest-muted-color) !important;
  font-family:var(--eqp-quest-meta-font, inherit);
  font-size:var(--eqp-quest-meta-size, .68rem);
}
.eqp-quests-stat strong{
  color:var(--eqp-quest-text-color) !important;
  font-family:var(--eqp-quest-stat-font, inherit);
  font-size:var(--eqp-quest-stat-size, 1rem);
}
.eqp-quests-body{
  flex:1 1 auto;
  min-height:0;
  padding:0 20px 20px;
  overflow:auto;
}
.eqp-quests-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 0 12px;
  color:var(--eqp-quest-text-color);
  font-family:var(--eqp-quest-meta-font, inherit);
  font-size:var(--eqp-quest-meta-size, .82rem);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.eqp-quests-list{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px !important;
  padding:0 !important;
}
.eqp-quests-list li{
  align-items:flex-start !important;
  background:var(--eqp-quest-card-bg) !important;
  border:1px solid var(--eqp-quest-border-color) !important;
  min-height:148px;
}
.eqp-quest-icon{
  width:42px;
  height:42px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--eqp-quest-accent-color) 26%, transparent), color-mix(in srgb, var(--eqp-quest-accent2-color) 24%, transparent));
  border:1px solid color-mix(in srgb, var(--eqp-quest-border-color) 75%, var(--eqp-quest-accent-color) 25%);
  font-size:20px;
  flex:0 0 auto;
}
.eqp-quest-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.eqp-quest-topline > span{
  color:var(--eqp-quest-text-color) !important;
  font-family:var(--eqp-quest-title-font, inherit);
  font-size:var(--eqp-quest-title-size, 1rem);
  font-weight:800;
}
.eqp-quest-topline > em{
  font-style:normal;
  color:var(--eqp-quest-muted-color);
  font-family:var(--eqp-quest-meta-font, inherit);
  font-size:var(--eqp-quest-meta-size, .74rem);
  white-space:nowrap;
}
.eqp-quest-copy > small{
  display:block;
  line-height:1.5;
}
.eqp-quest-progress{
  margin-top:10px;
  background:rgba(51,65,85,.55);
}
.eqp-quest-progress i{
  background:linear-gradient(90deg, var(--eqp-quest-accent-color), var(--eqp-quest-accent2-color)) !important;
}
.eqp-quest-meta{
  margin-top:10px;
  font-family:var(--eqp-quest-meta-font, inherit);
  font-size:var(--eqp-quest-meta-size, .76rem);
}
.eqp-quests-list li .badge,
.eqp-quest-chip{
  background:var(--eqp-quest-btn-bg-color) !important;
  color:var(--eqp-quest-btn-text-color) !important;
  border:1px solid var(--eqp-quest-border-color) !important;
  font-family:var(--eqp-quest-stat-font, inherit);
  font-size:var(--eqp-quest-stat-size, .82rem);
}
.eqp-quest-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.5rem .8rem;
  border-radius:999px;
  margin:4px 8px 0 0;
}
.eqp-quests-list li.done{
  border-color:color-mix(in srgb, var(--eqp-quest-accent-color) 30%, var(--eqp-quest-border-color)) !important;
}
.eqp-quests-list li.done .badge{
  background:linear-gradient(135deg, var(--eqp-quest-accent-color), var(--eqp-quest-accent2-color)) !important;
  border-color:transparent !important;
}
.eqp-quest-toast-stack{
  position:fixed;
  top:max(18px, env(safe-area-inset-top));
  right:max(18px, env(safe-area-inset-right));
  z-index:2147483646;
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}
.eqp-quest-toast{
  width:min(360px, calc(100vw - 28px));
  display:grid;
  grid-template-columns:52px 1fr;
  gap:14px;
  padding:14px 14px 14px 12px;
  border-radius:22px;
  border:1px solid var(--eqp-quest-border-color);
  background:var(--eqp-quest-panel-bg);
  color:var(--eqp-quest-text-color);
  box-shadow:0 24px 60px rgba(2,6,23,.32);
  transform:translateY(-12px) scale(.98);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.eqp-quest-toast.is-in{ transform:none; opacity:1; }
.eqp-quest-toast-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--eqp-quest-accent-color) 26%, transparent), color-mix(in srgb, var(--eqp-quest-accent2-color) 24%, transparent));
  border:1px solid color-mix(in srgb, var(--eqp-quest-border-color) 75%, var(--eqp-quest-accent-color) 25%);
}
.eqp-quest-toast-kicker,
.eqp-quest-toast-note,
.eqp-quest-toast-next{
  color:var(--eqp-quest-muted-color);
  font-family:var(--eqp-quest-meta-font, inherit);
  font-size:var(--eqp-quest-meta-size, .75rem);
}
.eqp-quest-toast-copy strong{
  display:block;
  margin:2px 0 6px;
  color:var(--eqp-quest-text-color);
  font-family:var(--eqp-quest-title-font, inherit);
  font-size:var(--eqp-quest-title-size, 1rem);
}
.eqp-quest-toast-copy p{
  margin:0 0 6px;
  color:var(--eqp-quest-text-color);
  font-family:var(--eqp-quest-body-font, inherit);
  font-size:var(--eqp-quest-body-size, .9rem);
  line-height:1.45;
}
@media (max-width: 820px){
  .eqp-quests-stats{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .eqp-quests-list{ grid-template-columns:1fr !important; }
}
@media (max-width: 560px){
  .eqp-quests-panel{ left:14px !important; right:14px !important; width:auto !important; max-width:none !important; max-height:min(82vh, 840px) !important; }
  .eqp-quest-toast-stack{ left:14px; right:14px; }
  .eqp-quest-toast{ width:auto; }
}

/* =========================================================
   v1.9.9.292 — Quest whole-panel scroll + profile scroll parity + 3D submit
   Scope: visual/layout only; keep runtime intact.
   ========================================================= */

/* Quest overlay: let the WHOLE board scroll, not only the missions area */
.eqp-quests-panel{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-gutter: stable both-edges;
}
.eqp-quests-head,
.eqp-quests-stats,
.eqp-quests-body{
  flex:0 0 auto !important;
}
.eqp-quests-body{
  min-height:auto !important;
  overflow:visible !important;
  padding-bottom:22px !important;
}
.eqp-quests-mastered{
  margin-top:14px;
}

/* Profile panel: scroll body cleanly on desktop/mobile while footer stays docked */
.eqp-profile-panel{
  max-height:min(86vh, calc(var(--eqp-vv-h, 100dvh) - 20px)) !important;
  overflow:hidden !important;
}
.eqp-profile-panel-inner{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
}
.eqp-profile-header,
.eqp-profile-footer{
  flex:none !important;
}
.eqp-profile-body{
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
  padding-bottom:calc(28px + env(safe-area-inset-bottom) + var(--eqp-vv-inset-b, 0px)) !important;
}
.eqp-profile-footer{
  position:sticky;
  bottom:0;
  z-index:2;
  background:color-mix(in srgb, var(--eqp-profile-panel, var(--eqp-card, #0f172a)) 94%, transparent) !important;
  backdrop-filter:blur(10px);
}
.eqp-profile-actions{
  width:100%;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.eqp-profile-actions .eqp-btn,
.eqp-profile-actions .eqp-profile-close,
.eqp-profile-actions .eqp-profile-exit,
.eqp-profile-actions .eqp-profile-newquiz{
  min-height:42px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* 3D submit button treatment aligned with new option/start button language */
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary,
.eqp-card.eqp-card--question .eqp-actions button[type="submit"],
.eqp-card.eqp-card--question .eqp-actions .eqp-btn[type="submit"]{
  position:relative;
  border-radius:16px !important;
  border:1px solid color-mix(in srgb, var(--eqp-btn-bg, #334155) 72%, white 16%) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 78%, white 22%),
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 94%, black 6%) 54%,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 86%, black 14%)
    ) !important;
  color:var(--eqp-btn-text, #e5e7eb) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(2,6,23,.22),
    0 14px 28px rgba(2,6,23,.20),
    0 6px 12px rgba(2,6,23,.14) !important;
  transform:translateY(0);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary:hover,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary:hover,
.eqp-card.eqp-card--question .eqp-actions button[type="submit"]:hover,
.eqp-card.eqp-card--question .eqp-actions .eqp-btn[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 0 rgba(2,6,23,.24),
    0 18px 34px rgba(2,6,23,.24),
    0 8px 14px rgba(2,6,23,.16) !important;
  filter:saturate(1.03) brightness(1.02);
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary:active,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary:active,
.eqp-card.eqp-card--question .eqp-actions button[type="submit"]:active,
.eqp-card.eqp-card--question .eqp-actions .eqp-btn[type="submit"]:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(2,6,23,.18),
    0 8px 16px rgba(2,6,23,.18) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary[disabled],
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary[disabled],
.eqp-card.eqp-card--question .eqp-actions button[type="submit"][disabled],
.eqp-card.eqp-card--question .eqp-actions .eqp-btn[type="submit"][disabled]{
  opacity:.78;
  transform:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(2,6,23,.14),
    0 8px 18px rgba(2,6,23,.12) !important;
}

@media (max-width: 767px){
  .eqp-profile-panel{
    width:min(380px, 94vw) !important;
  }
  .eqp-profile-footer{
    padding:12px 16px calc(14px + env(safe-area-inset-bottom) + var(--eqp-vv-inset-b, 0px)) !important;
  }
  .eqp-profile-actions{
    gap:8px;
  }
  .eqp-profile-actions .eqp-btn,
  .eqp-profile-actions .eqp-profile-close,
  .eqp-profile-actions .eqp-profile-exit,
  .eqp-profile-actions .eqp-profile-newquiz{
    min-width:0;
    font-size:var(--eqp-profile-btn-size, .78rem) !important;
  }
}


/* =========================================================
   v1.9.9.293 — Quest single-row cleanup + natural 3D polish + mobile header polish
   Scope: visual/layout only; keep runtime intact.
   ========================================================= */

/* Quest board: one mission per row, cleaner wrapping, safer badges, full-panel readability */
.eqp-quests-panel{
  width:min(620px, calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  border-radius:26px !important;
  box-shadow:0 22px 56px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.eqp-quests-head{
  position:sticky;
  top:0;
  z-index:2;
  padding:18px 18px 12px !important;
  background:color-mix(in srgb, var(--eqp-quest-panel-bg) 94%, transparent) !important;
  backdrop-filter:blur(12px);
}
.eqp-quests-head-copy,
.eqp-quests-title,
.eqp-quests-sub,
.eqp-quests-status{
  min-width:0;
}
.eqp-quests-close{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  padding:0 !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:0 !important;
  box-shadow:0 8px 18px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
  position:relative;
}
.eqp-quests-close::before{
  content:'×';
  font-size:20px;
  font-weight:800;
  line-height:1;
  color:inherit;
}
.eqp-quests-close:hover,
.eqp-quests-close:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.eqp-quests-body{
  padding:0 18px 18px !important;
}
.eqp-quests-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  padding:0 !important;
}
.eqp-quests-list li{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:12px !important;
  min-height:0 !important;
  padding:14px 15px !important;
  border-radius:18px !important;
  box-shadow:0 8px 18px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.eqp-quest-icon{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
  font-size:20px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.eqp-quest-copy{
  min-width:0;
  width:100%;
}
.eqp-quest-topline{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:10px !important;
  margin-bottom:6px !important;
}
.eqp-quest-topline > span,
.eqp-quest-copy > small,
.eqp-quest-meta,
.eqp-quests-sub,
.eqp-quests-status{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.eqp-quest-topline > span{
  line-height:1.34 !important;
}
.eqp-quest-topline > em{
  align-self:start;
  white-space:nowrap;
  padding-top:2px;
}
.eqp-quest-copy > small{
  display:block;
  line-height:1.56 !important;
}
.eqp-quest-progress{
  margin-top:10px !important;
  height:10px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:color-mix(in srgb, var(--eqp-quest-btn-bg-color) 82%, transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.eqp-quest-progress i{
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.eqp-quest-meta{
  margin-top:10px !important;
  line-height:1.45 !important;
}
.eqp-quests-list li .badge{
  align-self:start !important;
  justify-self:end !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:74px !important;
  max-width:100%;
  height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:clamp(.7rem, .64rem + .22vw, .82rem) !important;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.eqp-quests-mastered{
  margin-top:16px !important;
}
.eqp-quests-mastered-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.eqp-quest-chip{
  box-shadow:none !important;
}
@media (max-width: 640px){
  .eqp-quests-panel{
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(84vh, calc(var(--eqp-vv-h, 100dvh) - 24px)) !important;
    border-radius:22px !important;
  }
  .eqp-quests-stats{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    padding:0 18px 12px !important;
  }
  .eqp-quests-list li{
    grid-template-columns:40px minmax(0,1fr) !important;
  }
  .eqp-quest-icon{
    width:40px !important;
    height:40px !important;
    border-radius:13px !important;
  }
  .eqp-quests-list li .badge{
    grid-column:2;
    justify-self:start !important;
    margin-top:4px;
  }
}

/* Mobile quiz header: cleaner natural 3D sheet */
@media (max-width: 820px){
  .eqp-mobile-controls,
  .eqp-quiz-root .eqp-header.eqp-header--compact,
  .eqp-quiz-root.eqp-mobile-ui-v3 > .eqp-card.eqp-card--question > .eqp-header{
    border:1px solid color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.24)) 88%, rgba(255,255,255,.08)) !important;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--eqp-header, var(--eqp-card, #0f172a)) 88%, white 6%),
        color-mix(in srgb, var(--eqp-header, var(--eqp-card, #0f172a)) 96%, black 4%)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(2,6,23,.08),
      0 10px 22px rgba(2,6,23,.12) !important;
    border-radius:18px !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .eqp-mobile-controls .eqp-profile-btn,
  .eqp-mobile-controls .eqp-pr .eqp-btn-pause,
  .eqp-mobile-controls .eqp-pr .eqp-btn-resume,
  .eqp-mobile-controls .eqp-hdr-actions > .eqp-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-pause,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-btn-resume,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-snd-toggle,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-quests-btn,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-density-toggle{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(2,6,23,.10),
      0 7px 16px rgba(2,6,23,.10) !important;
    border-color:color-mix(in srgb, var(--eqp-border, rgba(148,163,184,.24)) 88%, rgba(255,255,255,.12)) !important;
  }
  .eqp-mobile-controls .eqp-progress--block,
  .eqp-quiz-root .eqp-header.eqp-header--compact .eqp-progress--block{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(2,6,23,.08) !important;
  }
}

/* Natural 3D polish: soften heavy shadows on options/buttons/media/start controls */
:where(.eqp-quiz-root, .eqp-hub-root){
  --eqp-q-3d-shadow: rgba(2,6,23,.12);
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(2,6,23,.10),
    0 8px 18px rgba(2,6,23,.10) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:hover,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt:focus-within,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:hover,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt:focus-within{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(2,6,23,.11),
    0 10px 22px rgba(2,6,23,.12) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-correct,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-correct{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(3,84,42,.16),
    0 10px 22px rgba(21,128,61,.12) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-opt.is-wrong,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-opt.is-wrong{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(127,29,29,.16),
    0 10px 22px rgba(185,28,28,.10) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-media,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-media{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(2,6,23,.10),
    0 12px 26px rgba(2,6,23,.12) !important;
}
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-stem-image,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-stem-image{
  box-shadow:0 10px 22px rgba(2,6,23,.12) !important;
}
.eqp-btn-pause.eqp-btn-rect,
.eqp-pr .eqp-btn-pause.eqp-btn-rect,
.eqp-mobile-controls .eqp-pr .eqp-btn-pause.eqp-btn-rect,
.eqp-header .eqp-btn-pause.eqp-btn-rect,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary,
.eqp-card.eqp-card--question .eqp-actions button[type="submit"],
.eqp-card.eqp-card--question .eqp-actions .eqp-btn[type="submit"],
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3 .eqp-start3-btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(2,6,23,.12),
    0 10px 20px rgba(2,6,23,.12) !important;
}
.eqp-btn-pause.eqp-btn-rect:hover,
.eqp-pr .eqp-btn-pause.eqp-btn-rect:hover,
.eqp-ui-v2 .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary:hover,
.eqp-quiz-root.eqp-mobile-ui-v4 > .eqp-card.eqp-card--question .eqp-actions .eqp-btn-primary:hover,
.eqp-card.eqp-card--question .eqp-actions button[type="submit"]:hover,
.eqp-card.eqp-card--question .eqp-actions .eqp-btn[type="submit"]:hover,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3-btn:hover,
.eqp-quiz-root[data-origin="shortcode"] .eqp-start3 .eqp-start3-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(2,6,23,.14),
    0 12px 24px rgba(2,6,23,.14) !important;
}

/* =========================================================
   v1.9.9.294 — Mobile header 3D + topbar music inheritance + profile CTA relocation
   ========================================================= */

/* Final guarantee: page-topbar music button inherits the same theme colors as other topbar buttons */
.eqp-page-topbar .eqp-page-auth-music,
.eqp-page-topbar .eqp-page-auth-music.eqp-page-topbar-btn,
.eqp-page-topbar .eqp-page-auth-music[aria-pressed="true"],
.eqp-page-topbar .eqp-page-auth-music[aria-pressed="false"],
.eqp-page-topbar-actions .eqp-page-auth-music{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 80%, white 14%),
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 96%, black 4%) 58%,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 88%, black 12%)
    ) !important;
  color:var(--eqp-btn-text, #ffffff) !important;
  border:1px solid color-mix(in srgb, var(--eqp-btn-bg, #334155) 68%, white 14%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -2px 0 rgba(2,6,23,.14),
    0 10px 22px rgba(2,6,23,.12),
    0 4px 10px rgba(2,6,23,.08) !important;
}
.eqp-page-topbar .eqp-page-auth-music:hover,
.eqp-page-topbar .eqp-page-auth-music:focus-visible,
.eqp-page-topbar .eqp-page-auth-music[aria-pressed="true"]{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 72%, white 18%),
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 84%, var(--eqp-accent, #7c5cff) 16%) 58%,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 78%, var(--eqp-accent, #7c5cff) 22%)
    ) !important;
  color:var(--eqp-btn-text, #ffffff) !important;
}
.eqp-page-topbar .eqp-page-auth-music,
.eqp-page-topbar .eqp-page-auth-music *,
.eqp-page-topbar .eqp-page-auth-music .eqp-page-topbar-btn-label,
.eqp-page-topbar .eqp-page-auth-music .eqp-page-topbar-music-ico,
.eqp-page-topbar .eqp-page-auth-music svg,
.eqp-page-topbar .eqp-page-auth-music path{
  color:inherit !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

/* Move Take New Quiz out of the dock row and style it as a roomy CTA under the mode pills */
.eqp-profile-panel .eqp-profile-body > .eqp-profile-newquiz.eqp-profile-cta{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100% !important;
  min-height:52px !important;
  margin:12px 0 2px !important;
  padding:14px 18px !important;
  border-radius:18px !important;
  white-space:normal !important;
  text-wrap:balance;
  text-align:center !important;
  line-height:1.18 !important;
  font-size:clamp(.92rem, 1.55vw, 1rem) !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  border:1px solid color-mix(in srgb, var(--eqp-btn-bg, #334155) 70%, white 14%) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 80%, white 18%),
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 92%, black 8%) 58%,
      color-mix(in srgb, var(--eqp-btn-bg, #334155) 86%, black 14%)
    ) !important;
  color:var(--eqp-btn-text, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(2,6,23,.16),
    0 14px 28px rgba(2,6,23,.14),
    0 6px 12px rgba(2,6,23,.09) !important;
}
.eqp-profile-panel .eqp-profile-body > .eqp-profile-newquiz.eqp-profile-cta:hover,
.eqp-profile-panel .eqp-profile-body > .eqp-profile-newquiz.eqp-profile-cta:focus-visible{
  transform:translateY(-1px);
  filter:brightness(1.02) saturate(1.03);
}
.eqp-profile-panel .eqp-profile-footer .eqp-profile-newquiz{
  display:none !important;
}
.eqp-profile-panel .eqp-profile-actions{
  justify-content:flex-end !important;
}
.eqp-profile-panel .eqp-profile-actions .eqp-profile-exit,
.eqp-profile-panel .eqp-profile-actions .eqp-profile-close{
  flex:0 0 auto !important;
  min-width:110px;
  padding-inline:16px !important;
}

/* Stronger but clean 3D sheet for mobile quiz header */
@media (max-width: 820px){
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls{
    padding:8px 8px 10px !important;
    margin:0 0 8px !important;
    border:1px solid color-mix(in srgb, var(--eqp-border, rgba(255,255,255,.10)) 82%, white 8%) !important;
    border-radius:18px !important;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)) 84%, white 10%),
        color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)) 96%, black 4%) 58%,
        color-mix(in srgb, var(--eqp-card, rgba(255,255,255,.08)) 88%, black 12%)
      ) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -2px 0 rgba(2,6,23,.14),
      0 16px 30px rgba(2,6,23,.16),
      0 6px 12px rgba(2,6,23,.10) !important;
    backdrop-filter:blur(10px) saturate(1.04);
    -webkit-backdrop-filter:blur(10px) saturate(1.04);
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls::before{
    content:"";
    position:absolute;
    inset:1px 1px auto 1px;
    height:38%;
    border-radius:16px 16px 12px 12px;
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    pointer-events:none;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls > *{
    position:relative;
    z-index:1;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-count,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-timer,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-profile-btn,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-btn,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls button{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -2px 0 rgba(2,6,23,.12),
      0 8px 16px rgba(2,6,23,.12) !important;
  }
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-progress,
  .eqp-quiz-root.eqp-mobile-ui-v4 .eqp-mobile-controls .eqp-progress-track{
    border-radius:999px !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.08), inset 0 -1px 1px rgba(2,6,23,.16) !important;
  }

  .eqp-profile-panel .eqp-profile-body > .eqp-profile-newquiz.eqp-profile-cta{
    min-height:50px !important;
    padding:13px 16px !important;
    font-size:.90rem !important;
  }
  .eqp-profile-panel .eqp-profile-actions .eqp-profile-exit,
  .eqp-profile-panel .eqp-profile-actions .eqp-profile-close{
    min-width:96px;
  }
}