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

/* 1) Modern cards + spacing */
.eqp-card{border-radius:1rem;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:1rem;margin:1rem 0;background:var(--eqp-card, #111827);background: var(--eqp-card, var(--eqp-card-bg, #111827));}

/* Sticky header with gentle divider */
.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);position:sticky;top:0;z-index:20;background:var(--eqp-card, #111827);padding:.75rem 1rem;border-bottom:1px solid var(--eqp-border,rgba(0,0,0,.08));backdrop-filter:saturate(120%) blur(6px) border:1px solid var(--eqp-border, rgba(0,0,0,.08)); box-shadow:0 2px 12px rgba(0,0,0,.10);  border-radius: var(--eqp-header-radius, 14px); overflow: hidden; background: var(--eqp-header, var(--eqp-header-bg, #0f172a));}

/* Buttons: rounded, snappy */
.eqp-btn{border-radius:.75rem;padding:.6rem .9rem;font-weight:600;transition:transform .08s ease, filter .2s ease}
.eqp-btn:active{transform:translateY(1px)}
.eqp-btn:focus{outline:2px solid color-mix(in srgb,var(--eqp-accent,#7c5cff),#fff 30%); outline-offset:2px}

/* 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%)}

/* 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 */
.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) === */


/* JNpatch20: hard-hide Pause/Resume when instance says 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; }


/* === EQP THEME VAR INHERITANCE PATCH (JNpatch15) === */
.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, currentColor) !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);
}
/* === end patch === */

.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); }
.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: 860px; margin: 14px auto; color: var(--eqp-text); }
.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}
.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:240px}
.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: rgba(255,255,255,.04); cursor:pointer; transition: transform .08s ease, background .2s ease; }
.eqp-opt:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.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; }
.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;}
/* 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: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid 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));}
.eqp-no-scroll{overflow:hidden !important;height:100dvh !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(980px, 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 */
.eqp-cats-mount, .eqp-cat-quizzes{min-height:100dvh}

/* === 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:100dvh; }
.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(100dvh - 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));
}
.eqp-cat-quizzes .eqp-card *{ background: transparent none; }

/* 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; top: max(56px, calc(env(safe-area-inset-top) + 12px)); right: 10px; z-index: 2147483646 !important; }
.eqp-quests-panel.open{ display:block !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.05rem) !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: min(100%, var(--eqp-content-max));
  margin-left: auto;
  margin-right: auto;
  /* 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, 84vw, 820px);
}

/* Center header & card bands without forcing container width */
.eqp-quiz-root[data-origin="shortcode"] .eqp-header{
  width: min(100%, var(--eqp-header-max));
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 6px !important; /* tighten toward card */
}

.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: var(--eqp-gap-height, 12px); }
.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: var(--eqp-gap-height, 12px); 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: var(--eqp-gap-height, 12px);
}
.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 */
.eqp-card{
  min-height: min(92dvh, 980px); /* stretch available height without exceeding view */
  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: 100dvh;
  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: 100dvh;
  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; }