/**
 * Admin-selectable exam typing-page themes (exams.ui_theme). Purely visual — every theme
 * shares the exact same #practiceWrap DOM, TypingEngine instance, scoring, and content; only
 * these selectors (scoped under .exam-theme-*) change. "classic" (the default) needs no rules
 * here at all since it IS the site's existing look — only the other four override anything.
 * A few small theme-only elements (.theme-refbox-label, .theme-layout-info,
 * .theme-stats-sidebar) are rendered by practice.php/hindi-practice.php only when their owning
 * theme is active, and stay display:none for every other theme via the catch-all rule below.
 */
.theme-refbox-label,
.theme-layout-info,
.theme-stats-sidebar { display: none; }

/* ============================================================
   Theme: Minimal Topbar — compact header, plain boxes, lime input
   ============================================================ */
/* Two-row layout to match the reference design: row 1 is title (left) ... timer (right),
   row 2 is just the font-size buttons sitting under the title. Overrides the shared
   .exam-mode 3-column single-row grid (typing.css) with a grid-template-areas layout instead. */
.exam-theme-minimal_topbar .typing-page-header {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "title . timer" "controls . .";
  row-gap: .5rem; align-items: start;
  border-bottom: 1px solid var(--border-color); padding-bottom: .6rem; margin-bottom: .75rem;
}
.exam-theme-minimal_topbar .typing-page-header h1 {
  grid-area: title; font-size: 1.05rem; font-weight: 700; color: #1e293b;
  justify-self: start; text-align: left;
}
.exam-theme-minimal_topbar .typing-mode-badge-timer {
  grid-area: timer; font-weight: 800; color: #1d4ed8; background: transparent; padding: 0;
  font-size: 1rem; justify-self: end; align-self: start;
}
.exam-theme-minimal_topbar .typing-header-controls {
  grid-area: controls; justify-self: start;
}
/* No Settings gear beside the title — matches the reference design. The Fullscreen button
   stays, but icon-only (⛶/⤢, via wireFullscreenToggle's iconOnly flag) and restyled below to
   sit flush with the A+/A/A- row instead of its own separate "⛶ Fullscreen" text button. */
.exam-theme-minimal_topbar .typing-header-controls > .dropdown {
  display: none;
}
.exam-theme-minimal_topbar #btnFullscreen {
  border: 1px solid var(--border-color); color: #1a1d29; background: #fff;
  border-radius: .375rem; width: 2.2rem; font-size: .95rem;
}
.exam-theme-minimal_topbar #btnFullscreen:hover { background: #f3f4f6; }
/* Reference design reads "A+  A  A-" left to right (increase first), the reverse of this
   app's own default Dec/Reset/Inc DOM order — flip it visually just for this theme. */
.exam-theme-minimal_topbar .typing-font-controls {
  flex-direction: row-reverse;
}
/* Plain neutral border/text instead of the site-wide accent-colored outline
   (.typing-header-controls .btn.btn-outline-secondary in typing.css) — reference design
   uses a plain black/gray outline regardless of the student's chosen accent color. */
.exam-theme-minimal_topbar .typing-font-controls .btn {
  border-color: var(--border-color); color: #1a1d29; background: #fff;
}
.exam-theme-minimal_topbar .typing-font-controls .btn:hover,
.exam-theme-minimal_topbar .typing-font-controls .btn:focus {
  background: #f3f4f6; border-color: var(--border-color); color: #1a1d29;
}
.exam-theme-minimal_topbar .typing-passage {
  background: #fff; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: none;
}
.exam-theme-minimal_topbar .typing-input {
  background: #ddf7a3 !important; border: 1px solid #bfe377; border-radius: 4px;
}
/* Reference design shows a single centered "End Typing Test" button — no separate Cancel. */
.exam-theme-minimal_topbar .typing-controls #btnCancelExam { display: none; }
.exam-theme-minimal_topbar .typing-controls #btnSubmitExam {
  background: #fff !important; border: 1.5px solid #1a1d29 !important; color: #1a1d29 !important;
  border-radius: 6px; min-width: 170px; text-transform: uppercase; font-size: .82rem; letter-spacing: .03em;
}
.exam-theme-minimal_topbar .typing-controls #btnSubmitExam:hover { background: #f3f4f6; }

/* ============================================================
   Theme: Reference Box — dark toolbar, labeled reference-text panel
   ============================================================ */
.exam-theme-reference_box.container {
  max-width: 100%; padding-left: 0; padding-right: 0;
}
/* #practiceWrap:fullscreen/.fs-fallback (typing.css) sets a generic padding:2rem on every
   theme once actually fullscreen — needs the ID matched here too, or its higher specificity
   (ID vs. class) would silently win over the container rule above and reintroduce the gap. */
#practiceWrap.exam-theme-reference_box:fullscreen,
#practiceWrap.exam-theme-reference_box.fs-fallback {
  padding-left: 0; padding-right: 0;
}
.exam-theme-reference_box .typing-page-header {
  border-bottom: none; padding-bottom: 0; margin-bottom: .9rem;
}
.exam-theme-reference_box .typing-page-header h1 { display: none; }
.exam-theme-reference_box .typing-header-controls > .dropdown { display: none; }
.exam-theme-reference_box #btnFullscreen,
.exam-theme-reference_box #btnUpsscProfileMute {
  border: none; background: #2563eb; color: #fff; border-radius: 8px;
  width: 2.2rem; font-size: .95rem;
}
.exam-theme-reference_box #btnFullscreen:hover,
.exam-theme-reference_box #btnUpsscProfileMute:hover { filter: brightness(.92); }
.exam-theme-reference_box .typing-font-controls {
  background: #f1f5f9; border-radius: 8px; padding: .15rem;
}
.exam-theme-reference_box .typing-font-controls .btn {
  border: none; background: transparent; color: #1a1d29; border-radius: 6px !important;
}
.exam-theme-reference_box #btnFontReset {
  min-width: 3rem; font-weight: 700; font-size: .78rem;
}
.exam-theme-reference_box .typing-mode-badge-timer {
  background: #000; color: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .85rem;
}
.exam-theme-reference_box .theme-refbox-label {
  display: flex; justify-content: space-between; align-items: center;
  background: #eaf3ff; border: 1px solid #bcd9f7; border-bottom: none;
  border-radius: 6px 6px 0 0; padding: .4rem .8rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1d4ed8;
}
.exam-theme-reference_box .theme-refbox-actions { display: flex; align-items: center; gap: .35rem; }
.exam-theme-reference_box .theme-refbox-icon-btn {
  border: none; background: transparent; color: #1d4ed8; cursor: pointer; line-height: 1;
  width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: .85rem; text-transform: none; letter-spacing: normal;
}
.exam-theme-reference_box .theme-refbox-icon-btn:hover { background: rgba(29, 78, 216, .12); }
.exam-theme-reference_box .typing-passage {
  background: #f5f9ff; border: 1px solid #bcd9f7; border-top: none; border-radius: 0 0 6px 6px;
}
.exam-theme-reference_box #btnRefboxEyeToggle {
  position: relative; border: none; background: #2563eb; color: #fff; border-radius: 8px; width: 2.2rem;
}
.exam-theme-reference_box #btnRefboxEyeToggle:hover { filter: brightness(.92); }
.exam-theme-reference_box #btnRefboxEyeToggle[aria-pressed="true"]::after {
  content: ''; position: absolute; left: 18%; right: 18%; top: 50%; height: 1.5px;
  background: currentColor; transform: rotate(-35deg);
}
.exam-theme-reference_box .typing-input {
  border: 1px dashed var(--border-color); border-radius: 6px;
}
.exam-theme-reference_box .typing-controls #btnCancelExam {
  background: #f97316; border-color: #f97316; color: #fff; border-radius: 999px; min-width: 110px;
}
.exam-theme-reference_box .typing-controls #btnSubmitExam {
  background: #2563eb !important; border-color: #2563eb !important; border-radius: 999px; min-width: 110px;
}

/* ============================================================
   Theme: Stats Sidebar — live keystroke/word counters in a side panel
   ============================================================ */
.exam-theme-stats_sidebar {
  display: grid; column-gap: 1.25rem; row-gap: 0;
  grid-template-columns: 1fr 250px;
  grid-template-areas:
    "header   header"
    "info     sidebar"
    "stats    sidebar"
    "progress sidebar"
    "passage  sidebar"
    "input    sidebar"
    "controls sidebar";
}
.exam-theme-stats_sidebar .typing-page-header { grid-area: header; }
.exam-theme-stats_sidebar .theme-layout-info { grid-area: info; }
.exam-theme-stats_sidebar .typing-stats-bar { grid-area: stats; }
.exam-theme-stats_sidebar .typing-progress-wrap { grid-area: progress; }
.exam-theme-stats_sidebar .typing-passage { grid-area: passage; }
.exam-theme-stats_sidebar .typing-input { grid-area: input; }
.exam-theme-stats_sidebar .typing-controls { grid-area: controls; }
.exam-theme-stats_sidebar .theme-stats-sidebar { grid-area: sidebar; display: block; }

.exam-theme-stats_sidebar .theme-layout-info,
.exam-theme-kvs .theme-layout-info {
  display: flex; justify-content: space-between; background: #2563eb; color: #fff;
  border-radius: 6px; padding: .45rem .9rem; font-size: .8rem; font-weight: 600; margin-bottom: .6rem;
}
.exam-theme-stats_sidebar .typing-controls #btnCancelExam {
  background: #f97316; border-color: #f97316; color: #fff; border-radius: 999px; min-width: 110px;
}
.exam-theme-stats_sidebar .typing-controls #btnSubmitExam {
  background: #2563eb !important; border-color: #2563eb !important; border-radius: 999px; min-width: 110px;
}
.theme-stats-sidebar {
  border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem;
  background: var(--bg-surface); align-self: start; position: sticky; top: 1rem;
}
.theme-stats-sidebar-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem;
}
.theme-stats-sidebar-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.theme-stats-sidebar-header .form-check-input:checked {
  background-color: #f97316; border-color: #f97316;
}
.theme-stats-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .4rem 0; border-bottom: 1px dashed var(--border-color); font-size: .82rem;
}
.theme-stats-row:last-child { border-bottom: none; }
.theme-stats-row strong { color: var(--accent); font-weight: 700; }

@media (max-width: 767.98px) {
  .exam-theme-stats_sidebar {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "info" "stats" "progress" "passage" "input" "controls" "sidebar";
  }
  .theme-stats-sidebar { position: static; }
}

/* ============================================================
   Theme: UPSSC Type — minimal exam-style header, lime input, single
   centered "End Typing Test" button. No Fullscreen/Settings controls;
   only the text-size buttons remain, shown in reverse (A+ · A · A-).
   ============================================================ */
.exam-theme-upssc_type.container {
  max-width: 100%; padding-left: 0; padding-right: 0;
}
/* #practiceWrap:fullscreen/.fs-fallback (typing.css) sets a generic padding:2rem on every
   theme once actually fullscreen — needs the ID matched here too, or its higher specificity
   (ID vs. class) would silently win over the container rule above and reintroduce the gap. */
#practiceWrap.exam-theme-upssc_type:fullscreen,
#practiceWrap.exam-theme-upssc_type.fs-fallback {
  padding-left: 0; padding-right: 0;
}
.exam-theme-upssc_type .typing-page-header {
  border-bottom: none; padding-bottom: 0; margin-bottom: .9rem;
}
.exam-theme-upssc_type .typing-page-header h1 {
  font-size: 1.15rem; font-weight: 800; color: #1e3a8a; order: -1;
}
.exam-theme-upssc_type .typing-mode-badge-timer {
  font-weight: 800; color: #1e3a8a; background: transparent; padding: 0; font-size: 1.1rem;
}
.exam-theme-upssc_type .typing-header-controls > .dropdown {
  display: none;
}
.exam-theme-upssc_type #btnFullscreen {
  border: 2px solid #dc2626; color: #dc2626; background: #fff; border-radius: 6px;
  width: 2.4rem; font-weight: 700; font-size: 1rem;
}
.exam-theme-upssc_type #btnFullscreen:hover { background: #fef2f2; }
.exam-theme-upssc_type .typing-font-controls {
  flex-direction: row-reverse; gap: .4rem;
}
.exam-theme-upssc_type .typing-font-controls .btn {
  border: 2px solid #dc2626; border-radius: 6px !important; color: #dc2626; background: #fff;
  font-weight: 700; width: 2.4rem;
}
.exam-theme-upssc_type .typing-font-controls .btn:hover { background: #fef2f2; }
.exam-theme-upssc_type #btnFontReset {
  border-color: #f3b4bd; color: #f3b4bd; font-weight: 600;
}
.exam-theme-upssc_type .typing-passage {
  background: #fff; border: 1px solid var(--border-color); border-radius: 6px; box-shadow: none;
  /* Reference site fills the page with generous white space around the passage/input rather
     than sizing them tightly to content — it isn't actually using the browser's Fullscreen
     API at all (its own tabs/address bar stay visible), just a spacious, nav-free page. */
  min-height: 46vh; max-height: 46vh;
}
.exam-theme-upssc_type .typing-input {
  background: #ddf7a3 !important; border: 1px solid #bfe377; border-radius: 6px;
  min-height: 18vh;
}
.exam-theme-upssc_type .typing-controls #btnCancelExam { display: none; }
.exam-theme-upssc_type .typing-controls #btnSubmitExam {
  background: #fff !important; border: 2px solid #dc2626 !important; color: #dc2626 !important; border-radius: 999px;
  min-width: 200px; text-transform: uppercase; font-weight: 700; font-size: .85rem; letter-spacing: .03em;
}
.exam-theme-upssc_type .typing-controls #btnSubmitExam:hover { background: #fef2f2; }

/* ============================================================
   Theme: UPSSC Profile — icon header (mute/fullscreen/A-,A,A+), a
   "Time left: " timer, student avatar + name, mint-green passage/input,
   and both Cancel + Submit always visible. No breadcrumb, no site nav.
   ============================================================ */
.exam-theme-upssc_profile.container {
  max-width: 100%; padding-left: .75rem; padding-right: .75rem;
  /* Overrides the shared "pt-3" Bootstrap class on this element (which is itself !important —
     Bootstrap's spacing utilities always are) — that top padding exists to clear the site
     nav/breadcrumb above it, but this theme has neither (hideHeader, no breadcrumb), so it was
     just showing as dead space above the icon row. */
  padding-top: .6rem !important;
}
.exam-theme-upssc_profile .typing-page-header {
  border-bottom: none; padding-bottom: 0; margin-bottom: .9rem;
  align-items: flex-start; position: relative; min-height: 3.5rem;
}
.exam-theme-upssc_profile .typing-page-header h1 { display: none; }
.exam-theme-upssc_profile .typing-mode-badge-timer {
  font-weight: 800; color: #1a1d29; background: transparent; padding: 0; font-size: 1.05rem;
  display: block; text-align: right;
  /* Sits beside the avatar/name block (theme-upsscpro-profile), not stacked above it — both
     are vertically centered on the header's own midline via top:50%/translateY, and the
     timer's right offset leaves just enough room for that block's width beside it. */
  position: absolute; top: 50%; right: 4.75rem; transform: translateY(-50%); justify-self: auto;
}
.exam-theme-upssc_profile .typing-header-controls > .dropdown { display: none; }
.exam-theme-upssc_profile #btnFullscreen,
.exam-theme-upssc_profile #btnUpsscProfileMute {
  border: 1px solid var(--border-color); color: var(--text-muted); background: #fff;
  border-radius: 6px; width: 2.2rem; font-size: .95rem;
}
.exam-theme-upssc_profile .typing-font-controls .btn {
  border: 1px solid var(--border-color); color: var(--text-muted); background: #fff;
  border-radius: 6px !important; width: 2.2rem;
}
.exam-theme-upssc_profile .theme-upsscpro-profile {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
}
.theme-upsscpro-profile {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; margin-top: .4rem;
}
.theme-upsscpro-avatar-img,
.theme-upsscpro-avatar-placeholder {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover;
}
.theme-upsscpro-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-alt); color: var(--text-muted); font-weight: 700; font-size: 1rem;
}
.theme-upsscpro-username {
  font-size: .7rem; font-weight: 700; letter-spacing: .03em; color: var(--text-primary);
}
.exam-theme-upssc_profile .typing-passage {
  background: #f4fbf6; border: 1px solid var(--border-color); border-radius: 6px; box-shadow: none;
}
.exam-theme-upssc_profile .typing-input {
  background: #b8f3d1 !important; border: 1px solid #8fe0b3; border-radius: 6px;
}
.exam-theme-upssc_profile .typing-controls #btnCancelExam {
  background: #f97316; border-color: #f97316; color: #fff; border-radius: 999px; min-width: 110px;
}
.exam-theme-upssc_profile .typing-controls #btnSubmitExam {
  background: #2563eb !important; border-color: #2563eb !important; border-radius: 999px; min-width: 110px;
}

/* ============================================================
   Theme: KVS — icon-only minimize button, avatar+"Time left:-" (like
   UPSSC Profile), blue Keyboard-Layout bar (like Stats Sidebar), plus
   its own dedicated "Font Size: A- Npx A+" row, white input w/ blue
   border. No title, no site nav, no Settings dropdown.
   ============================================================ */
.exam-theme-kvs.container {
  max-width: 100%; padding-left: .75rem; padding-right: .75rem; padding-top: .6rem !important;
}
#practiceWrap.exam-theme-kvs:fullscreen,
#practiceWrap.exam-theme-kvs.fs-fallback {
  padding-left: .75rem; padding-right: .75rem;
}
.exam-theme-kvs .typing-page-header {
  border-bottom: none; padding-bottom: 0; margin-bottom: .5rem;
  /* min-height clears .theme-kvs-timer-profile-row's own height (it's position:absolute
     inside here, so it doesn't push this container taller on its own) — the row is a
     single flex line now (timer beside the avatar/name block), so this only needs to
     match that row's real height, not the old taller stacked timer-above-profile layout. */
  align-items: flex-start; position: relative; min-height: 4.5rem;
}
.exam-theme-kvs .typing-page-header h1 { display: none; }
.exam-theme-kvs .typing-header-controls > .dropdown,
.exam-theme-kvs .typing-font-controls {
  display: none;
}
.exam-theme-kvs #btnFullscreen {
  border: 1px solid var(--border-color); color: var(--text-muted); background: #fff;
  border-radius: 8px; width: 2.2rem; font-size: .95rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.theme-kvs-timer-profile-row {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; gap: .85rem;
}
.exam-theme-kvs .typing-mode-badge-timer {
  font-weight: 800; color: #1a1d29; background: transparent; padding: 0; font-size: 1.05rem;
  display: block; text-align: right;
}
.exam-theme-kvs .theme-upsscpro-avatar-img,
.exam-theme-kvs .theme-upsscpro-avatar-placeholder {
  background: #dbeafe; color: #2563eb;
}
.theme-kvs-fontsize-row {
  display: flex; align-items: center; gap: .45rem; background: #fff;
  border: 1px solid var(--border-color); border-radius: 999px;
  padding: .25rem .4rem .25rem .8rem; margin-bottom: .6rem; font-size: .78rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06); width: fit-content;
}
.theme-kvs-fontsize-label { color: var(--text-muted); font-weight: 600; margin-right: .1rem; }
.theme-kvs-fontsize-row .btn {
  border: 1px solid #93c5fd; color: #2563eb; background: #eff6ff;
  border-radius: 50%; width: 1.55rem; height: 1.55rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; line-height: 1;
}
.theme-kvs-fontsize-row .btn:hover { background: #dbeafe; }
.theme-kvs-fontsize-value {
  font-weight: 700; min-width: 2.5rem; text-align: center; cursor: pointer;
  color: #1a1d29; background: #f1f5f9; border-radius: 999px; padding: .15rem .4rem;
  font-size: .78rem;
}
.exam-theme-kvs .typing-passage {
  background: #fff; border: 1px solid var(--border-color); border-radius: 6px; box-shadow: none;
  font-size: calc(16px * var(--typing-font-scale, 1));
}
.exam-theme-kvs .typing-input {
  background: #fff !important; border: 1.5px solid #93c5fd; border-radius: 6px;
}
.exam-theme-kvs .typing-input:focus { border-color: #2563eb; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.exam-theme-kvs .typing-controls #btnCancelExam {
  background: #f97316; border-color: #f97316; color: #fff; border-radius: 999px; min-width: 110px;
}
.exam-theme-kvs .typing-controls #btnSubmitExam {
  background: #2563eb !important; border-color: #2563eb !important; border-radius: 999px; min-width: 110px;
}

/* ============================================================
   Theme: Focus Dark — dark distraction-free mode with glowing accents
   ============================================================ */
.exam-theme-focus_dark {
  background: #0c0e14; color: #e2e8f0; border-radius: 12px; padding: 1.25rem !important;
}
.exam-theme-focus_dark .typing-breadcrumb,
.exam-theme-focus_dark .typing-header-controls .btn {
  background: #171a24; border-color: #2a2f3f; color: #9ca3af;
}
.exam-theme-focus_dark .typing-page-header h1 { color: #f1f5f9; }
.exam-theme-focus_dark .typing-mode-badge-timer {
  background: #171a24; color: #5eead4; border: 1px solid #2a2f3f; border-radius: 999px;
  padding: .35rem .9rem; font-weight: 700; box-shadow: 0 0 12px rgba(94, 234, 212, .35);
}
.exam-theme-focus_dark .typing-progress-bar { background: linear-gradient(90deg, #5eead4, #6366f1); }
.exam-theme-focus_dark .typing-progress-wrap { background: #171a24; }
.exam-theme-focus_dark .typing-passage {
  background: #12141c !important; border: 1px solid #2a2f3f; color: #e2e8f0 !important;
  box-shadow: inset 0 0 24px rgba(94, 234, 212, .04);
}
.exam-theme-focus_dark .typing-passage .tc { color: #94a3b8; }
.exam-theme-focus_dark .typing-passage .tc-correct { color: #e2e8f0; }
.exam-theme-focus_dark .typing-input {
  background: #12141c !important; border: 1px solid #2a2f3f; color: #e2e8f0 !important;
}
.exam-theme-focus_dark .typing-input:focus { border-color: #5eead4; box-shadow: 0 0 0 .2rem rgba(94, 234, 212, .15); }
.exam-theme-focus_dark .typing-controls { background: #0c0e14; }
.exam-theme-focus_dark .typing-controls #btnCancelExam {
  background: transparent; border: 1px solid #2a2f3f; color: #9ca3af; border-radius: 999px; min-width: 110px;
}
.exam-theme-focus_dark .typing-controls #btnSubmitExam {
  background: linear-gradient(90deg, #5eead4, #6366f1); border: none; color: #0c0e14; font-weight: 700;
  border-radius: 999px; min-width: 110px; box-shadow: 0 0 16px rgba(99, 102, 241, .45);
}

/* ============================================================
   Custom Practice pages (custom.php/hindi-custom.php) reuse these same
   8 themes as a purely student-chosen visual skin (localStorage, no
   server data, no avatar/marks/qualifying) picked from the Settings
   dropdown — which only ever appears once the test has started (the
   whole toolbar is hidden during the paste-your-text setup step).
   Two shape differences from the exam pages above still need
   overrides: (1) Settings must stay reachable no matter which theme
   is active — it's the only way back to "Classic"; (2) passage/
   input/controls live nested inside one #enginePanel (toggled setup
   vs live-typing), not as flat siblings of #practiceWrap, so
   stats_sidebar's named-grid-areas layout is redone as a simple
   2-column grid on #enginePanel instead. The title is also forced
   visible — several themes hide it to mimic a real exam portal's
   chrome, which makes no sense for a page with no official exam to
   imitate. #btnFullscreen always keeps its full "⛶ Fullscreen" label
   here (no per-theme icon-only swap), so its per-theme fixed width
   is reset to avoid wrapping/overlapping.
   ============================================================ */
.typing-mode-custom .typing-header-controls > .dropdown { display: block !important; }
.typing-mode-custom .typing-page-header h1 { display: block !important; }
.typing-mode-custom #btnFullscreen { width: auto !important; white-space: nowrap; }
.typing-mode-custom #btnUpsscProfileMute,
.typing-mode-custom #btnRefboxEyeToggle { display: none; }
.typing-mode-custom.exam-theme-upssc_profile #btnUpsscProfileMute,
.typing-mode-custom.exam-theme-reference_box #btnUpsscProfileMute { display: inline-flex; align-items: center; justify-content: center; }
.typing-mode-custom.exam-theme-reference_box #btnRefboxEyeToggle { display: inline-flex; align-items: center; justify-content: center; }
.typing-mode-custom.exam-theme-upssc_profile .typing-mode-badge-timer,
.typing-mode-custom.exam-theme-kvs .typing-mode-badge-timer {
  position: static; text-align: right; transform: none;
}
.typing-mode-custom.exam-theme-minimal_topbar .typing-page-header,
.typing-mode-custom.exam-theme-upssc_type .typing-page-header,
.typing-mode-custom.exam-theme-upssc_profile .typing-page-header,
.typing-mode-custom.exam-theme-kvs .typing-page-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
}
.typing-mode-custom.exam-theme-stats_sidebar {
  /* Undo the named-grid-areas rule above (it targets the bare .exam-theme-stats_sidebar
     class, i.e. #practiceWrap itself) — that layout assumes flat siblings matching
     practice.php's shape and otherwise grid-squeezes #setupPanel (visible before Start is
     even clicked) into a random implicit cell alongside it. */
  display: block;
}
.typing-mode-custom.exam-theme-stats_sidebar #enginePanel {
  display: grid; grid-template-columns: 1fr 250px; column-gap: 1.25rem;
}
.typing-mode-custom.exam-theme-stats_sidebar #enginePanel > *:not(.theme-stats-sidebar) { grid-column: 1; }
.typing-mode-custom.exam-theme-stats_sidebar .theme-stats-sidebar { grid-column: 2; grid-row: 1 / -1; display: block; }
@media (max-width: 767.98px) {
  .typing-mode-custom.exam-theme-stats_sidebar #enginePanel { display: block; }
}