/* Custom Styles for mpsctest.in - Modern High-Performance MPSC Exam Portal */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root {
  --brand-deep-navy: #012149;
  --brand-navy: #012C5E;
  --brand-deep-teal: #025876;
  --brand-blue-teal: #015385;
  --brand-cyan: #02A3BE;
  --brand-teal: #028874;
  --brand-dark-teal: #027161;
  --brand-green: #03A185;
  --brand-bright-green: #1FB57D;
  --brand-mint: #B2E2D8;
  --brand-primary: #012C5E;
  --brand-dark: #012149;
  --brand-accent: #1FB57D;
  --header-bg: #ffffff;
  --canvas-bg: #f8fafc;
  --surface-bg: #ffffff;

  /* ========================================================================
     MPSC DYNAMIC TYPOGRAPHY CONFIGURATION (Admin Panel Managed Sliders)
     ======================================================================== */
  --mpsc-font-q-en: 18px;
  --mpsc-font-q-mr: 21px;
  --mpsc-font-q-sub-en: 15px;
  --mpsc-font-q-sub-mr: 17px;
  --mpsc-font-q-num-en: 14px;
  --mpsc-font-q-num-mr: 15px;

  --mpsc-font-opt-en: 16px;
  --mpsc-font-opt-mr: 18px;
  --mpsc-font-opt-badge-en: 16px;
  --mpsc-font-opt-badge-mr: 18px;

  --mpsc-font-exp-en: 15px;
  --mpsc-font-exp-mr: 18px;
  --mpsc-font-exp-key-en: 14px;
  --mpsc-font-exp-key-mr: 16px;

  --mpsc-font-exam-title-en: 15px;
  --mpsc-font-exam-title-mr: 18px;
  --mpsc-font-exam-badge-en: 12px;
  --mpsc-font-exam-badge-mr: 14px;
  --mpsc-font-hub-title-en: 18px;
  --mpsc-font-hub-title-mr: 20px;

  --mpsc-font-test-title-en: 17px;
  --mpsc-font-test-title-mr: 18px;
  --mpsc-font-test-desc-en: 13px;
  --mpsc-font-test-desc-mr: 15px;

  --mpsc-font-subtab-en: 14px;
  --mpsc-font-subtab-mr: 21px;
  --mpsc-font-pill-en: 13px;
  --mpsc-font-pill-mr: 21px;
}

body {
  background-color: var(--canvas-bg);
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* ==========================================================================
   Content Security & Anti-Copy / Anti-Selection Engine
   - Disables text selection across all elements
   - Disables iOS long-press callout menus
   - Disables image and link dragging
   - Preserves text input and editing in form inputs & textareas
   ========================================================================== */
html,
body,
*,
*::before,
*::after {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

input,
textarea,
select,
option,
[contenteditable="true"],
.allow-select {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

img,
svg,
a {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

@media print {
  body * {
    visibility: hidden !important;
  }
  body::before {
    content: "🔒 Content Protected — mpsctest.in. Printing or extracting question papers is restricted.";
    visibility: visible !important;
    display: block !important;
    text-align: center;
    padding: 60px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    font-family: sans-serif;
  }
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}

@media (min-width: 640px) {
  html {
    font-size: 16.5px;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 17.5px;
  }
}

@media (min-width: 1280px) {
  html {
    font-size: 18px;
  }
}


body {
  font-family: 'Plus Jakarta Sans', 'Mukta', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #ffffff;
  color: #0f172a;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: normal; /* Never use negative letter-spacing globally, as it breaks Indic ligatures */
  line-height: 1.6;
}

/* ==========================================================================
   Indic / Marathi Conjunct Typography & OpenType Ligature Protection
   Uses 'Mukta' (premier Marathi typeface by Ek Type) followed by 
   'Noto Sans Devanagari'. Strictly enforces 'letter-spacing: 0 !important' 
   to guarantee complex ligatures like 'महाराष्ट्र' (ष्ट्र), 'राष्ट्रीय', 'दृष्टीने'
   render seamlessly with authentic subjoined conjuncts instead of broken viramas.
   ========================================================================== */
[lang="mr"],
[lang="mr"] body,
.marathi-text {
  font-family: 'Mukta', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "dlig" 1;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   FontAwesome Icon Protection & Glyph Defense
   Guarantees Font Awesome icons are NEVER overridden by Devanagari/Marathi
   font rules (.marathi-text, :lang(mr), [lang="mr"]) or corrupted by font-weight
   or letter-spacing resets.
   ========================================================================== */
i[class*="fa-"],
.fa,
.fas,
.far,
.fal,
.fab,
.fa-solid,
.fa-regular,
.fa-light,
.fa-thin,
.fa-duotone,
.fa-brands {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome' !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  display: inline-block;
}

.fa-solid,
.fas {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

.fa-regular,
.far {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
}

.fa-brands,
.fab {
  font-family: 'Font Awesome 6 Brands' !important;
  font-weight: 400 !important;
}


.marathi-text {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

p.marathi-text,
.marathi-paragraph {
  line-height: 1.75;
}

/* Devanagari Typography Protection */
.marathi-text,
[lang="mr"] {
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "dlig" 1;
  text-rendering: optimizeLegibility;
}

/* Neutralize negative tracking on Marathi elements */
.marathi-text.tracking-tight,
.marathi-text.tracking-tighter,
.marathi-text.tracking-wide,
.marathi-text.tracking-wider,
[lang="mr"] .tracking-tight,
[lang="mr"] .tracking-tighter {
  letter-spacing: 0 !important;
}

/* High-Contrast Light Mode Typography (Razor-Sharp Legibility) */
.text-slate-900 { color: #0f172a; }
.text-slate-800 { color: #1e293b; }
.text-slate-700 { color: #334155; }
.text-slate-600 { color: #334155; } /* Upgraded from washed-out gray to crisp slate-700 */
.text-slate-500 { color: #475569; }

/* Hide scrollbar for Chrome, Safari and Opera on horizontal mobile carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

/* Custom Scrollbar for Desktop */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Explicit Visible Custom Scrollbar for Containers */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Streak Modal & Rounded Card Modern Scrollbars (Anti-Bleed & Rounded Conformance) */
.streak-modal-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  -webkit-overflow-scrolling: touch;
}
.streak-modal-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.streak-modal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
}
.streak-modal-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.streak-modal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.modal-rounded-scrollbar-dark {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  -webkit-overflow-scrolling: touch;
}
.modal-rounded-scrollbar-dark::-webkit-scrollbar {
  width: 5px;
}
.modal-rounded-scrollbar-dark::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
}
.modal-rounded-scrollbar-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
}
.modal-rounded-scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Exam Palette Status Buttons (MPSC / TCS iON Standard) */
.palette-btn {
  width: 42px;
  height: 42px;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}

@media (min-width: 1024px) {
  .palette-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }
}

.palette-btn:hover {
  transform: translateY(-1px);
}

.palette-not-visited {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.palette-not-answered {
  background-color: #ef4444;
  color: #ffffff;
  border: 1px solid #dc2626;
}

.palette-answered {
  background-color: #16a34a;
  color: #ffffff;
  border: 1px solid #15803d;
}

.palette-review {
  background-color: #7c3aed;
  color: #ffffff;
  border: 1px solid #6d28d9;
  border-radius: 9999px;
}

.palette-answered-review {
  background-color: #7c3aed;
  color: #ffffff;
  border: 1px solid #6d28d9;
  border-radius: 9999px;
  position: relative;
}

.palette-answered-review::after {
  content: '✓';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  background-color: #16a34a;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  line-height: 1;
}

.palette-current {
  outline: 3px solid #f97316;
  outline-offset: 2px;
}

/* Real CBT Radio Selection Styles */
.cbt-option-row {
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background-color: #ffffff;
}
.cbt-option-row:hover {
  border-color: #02A3BE;
  background-color: #f0fdfa;
}
.cbt-option-row.selected {
  border-color: #028874;
  background-color: rgba(178, 226, 216, 0.22);
  box-shadow: 0 1px 4px rgba(2, 136, 116, 0.18);
}
.cbt-radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.cbt-option-row.selected .cbt-radio-circle {
  border-color: #028874;
  background-color: #ffffff;
}
.cbt-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #028874;
  transform: scale(0);
  transition: transform 0.15s ease;
}
.cbt-option-row.selected .cbt-radio-dot {
  transform: scale(1);
}

/* Option Card Hover & Selection (Legacy Support) */
.option-card {
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  min-height: 56px;
}
.option-card:hover {
  border-color: #93c5fd;
  background-color: #f8fafc;
}
.option-card:active {
  transform: scale(0.995);
}
.option-card.selected {
  border-color: #2563eb;
  background-color: #eff6ff;
  box-shadow: 0 0 0 1px #2563eb;
}

/* Category Pill Active State */
.category-tab.active {
  background-color: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Safe Area Padding for Mobile Bottom Bar */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0.5rem);
}

/* Clean Print / Save PDF Styling for Scorecard & Solutions */
@media print {
  header, nav, footer, .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    padding: 0 !important;
  }
}



/* ============================================================================
   SMOOTH 60-120 FPS GPU-ACCELERATED ANIMATION SYSTEM
   ============================================================================ */

/* 1. Rock-Solid Card Elevation (Eliminates Hover Shaking / Jitter Loop) */
.modern-card {
  transition: box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.2s ease,
              background-color 0.2s ease !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  transform: none !important;
}

.modern-card:hover {
  transform: none !important;
  box-shadow: 0 12px 26px -6px rgba(1, 44, 94, 0.12), 0 6px 12px -3px rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(2, 132, 199, 0.55) !important;
}

/* Zero-Jitter Rock-Solid Exam Card Action Buttons (Start Test / Retake Test / Resume) */
.test-card-action-btn,
.modern-card button[onclick*="openInstructionsModal"],
.modern-card button[onclick*="resumeSavedExam"],
.modern-card button[onclick*="viewSavedAttempt"] {
  transform: none !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease !important;
  will-change: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.test-card-action-btn:hover,
.modern-card button[onclick*="openInstructionsModal"]:hover,
.modern-card button[onclick*="resumeSavedExam"]:hover,
.modern-card button[onclick*="viewSavedAttempt"]:hover {
  transform: none !important;
  filter: brightness(1.08) contrast(1.02);
  box-shadow: 0 4px 14px 0 rgba(1, 44, 94, 0.22) !important;
}

.test-card-action-btn:active,
.modern-card button[onclick*="openInstructionsModal"]:active,
.modern-card button[onclick*="resumeSavedExam"]:active,
.modern-card button[onclick*="viewSavedAttempt"]:active {
  transform: none !important;
  filter: brightness(0.96);
  transition-duration: 0.08s !important;
}



/* 2. Staggered Cascade Waterfall Entrance */
@keyframes cardCascade {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cascade-item {
  animation: cardCascade 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cascade-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 3. Screen View Transition */
@keyframes viewSlideFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-fade-in {
  animation: viewSlideFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 4. Daily Streak Flame Breathing Glow */
@keyframes flameBreathe {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.4));
  }
  50% {
    transform: scale(1.2) rotate(-3deg);
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.9));
  }
}

.flame-pulse {
  display: inline-block;
  animation: flameBreathe 2s ease-in-out infinite;
  transform-origin: center bottom;
}

/* 5. Exam Critical Timer Heartbeat Alert */
@keyframes timerAlertPulse {
  0%, 100% {
    transform: scale(1);
    background-color: rgba(239, 68, 68, 0.12);
  }
  50% {
    transform: scale(1.06);
    background-color: rgba(239, 68, 68, 0.28);
    box-shadow: 0 0 14px 2px rgba(239, 68, 68, 0.5);
  }
}

.timer-critical {
  animation: timerAlertPulse 1s ease-in-out infinite !important;
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

/* 6. Leaderboard Rank #1 Shimmer Sheen */
@keyframes badgeShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-badge {
  position: relative;
  overflow: hidden;
}

.shimmer-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.5) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: badgeShimmer 2.6s infinite linear;
  pointer-events: none;
  border-radius: inherit;
}

/* 7. Option Card Micro-Interactions */
.option-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.2s ease, 
              background-color 0.2s ease, 
              box-shadow 0.2s ease !important;
}

.option-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.08);
}

.option-card:active {
  transform: scale(0.985);
}

/* ============================================================================
   BESPOKE HIGH-END DEVELOPER BACKGROUND (Multi-Mesh Aurora & Precision Grid)
   ============================================================================ */
.ambient-mesh {
  background:
    radial-gradient(ellipse 700px 420px at 50% -60px, rgba(2, 132, 199, 0.07), transparent 75%),
    radial-gradient(ellipse 650px 380px at 90% 100px, rgba(1, 44, 94, 0.05), transparent 70%),
    radial-gradient(ellipse 550px 350px at 10% 220px, rgba(14, 165, 233, 0.05), transparent 65%);
  filter: blur(25px);
}
.bespoke-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.035) 1px, transparent 0),
    linear-gradient(to right, rgba(15, 23, 42, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 18%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 18%, black 30%, transparent 85%);
}

/* ============================================================================ */
/* REFERENCE-MATCHED MODERN AUTH MODAL (ROYAL BLUE + PURE WHITE INPUTS)        */
/* ============================================================================ */
.auth-google-btn {
  background-color: #ffffff !important;
  color: #1e293b !important;
}
.auth-google-btn span {
  color: #1e293b !important;
}
.auth-input-box {
  background-color: #ffffff !important;
  color: #0f172a !important;
}
.auth-input-box input {
  color: #0f172a !important;
  background-color: transparent !important;
}
.auth-input-box input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
.auth-input-box i {
  color: #64748b !important;
}

/* ============================================================================ */
/* ============================================================================ */
/* PRE-EXAM INSTRUCTIONS SCREEN STYLES (REAL MPSC / CBT ENGINE)                 */
/* ============================================================================ */
#view-instructions {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#view-instructions.hidden,
#view-exam.hidden,
#view-exam-summary.hidden,
#view-result.hidden,
#view-exam-hub.hidden,
#view-home.hidden,
#view-mistakes.hidden {
  display: none !important;
}

#ob-header-top {
  background-color: #012C5E;
  min-height: 50px;
  width: 100%;
  flex-shrink: 0;
  border-bottom: 1px solid #012149;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 60;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#ob-header-top .main-title-container {
  min-width: 0;
  flex: 1 1 0%;
}

#ob-header-top .main-title-container h2 {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ob-header-top .logo-container img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.ob-screen-toggle {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.75);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ob-screen-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

.ob-exit-btn {
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ob-exit-btn:hover {
  background: rgba(239, 68, 68, 0.8);
  border-color: #ef4444;
}

.tab-in {
  width: 100%;
  min-width: 520px;
  margin: 18px 0;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #000000;
  font-size: 17px;
}
.tab-in th, .tab-in td {
  border: 1px solid #000000;
  padding: 12px 16px;
}
.tab-in th {
  background-color: #f1f5f9;
  font-weight: 700;
  color: #0f172a;
  font-size: 17.5px;
}
.tab-in td {
  color: #1e293b;
  font-size: 17px;
}

.explain-butts {
  width: 100%;
  min-width: 580px;
  margin: 18px 0;
  border-collapse: separate;
  border-spacing: 8px 14px;
  font-size: 17px;
}
.explain-butts td {
  vertical-align: middle;
  padding: 8px 12px;
}
.explain-butts .td3 {
  color: #1e293b;
  font-size: 16.5px;
}

/* Palette Status Shapes */
.ob-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  font-family: Arial, sans-serif;
  user-select: none;
}
.ob-sym-grey {
  width: 36px;
  height: 32px;
  background: #e2e8f0;
  color: #1e293b;
  border: 1px solid #94a3b8;
  border-radius: 4px;
}
.ob-sym-red {
  width: 36px;
  height: 32px;
  background: #dc2626;
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  border-radius: 2px;
}
.ob-sym-green {
  width: 36px;
  height: 32px;
  background: #16a34a;
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  border-radius: 2px;
}
.ob-sym-purple {
  width: 34px;
  height: 34px;
  background: #7c3aed;
  color: #ffffff;
  border-radius: 50%;
}
.ob-sym-purple-check {
  position: relative;
  width: 34px;
  height: 34px;
  background: #7c3aed;
  color: #ffffff;
  border-radius: 50%;
}
.ob-sym-purple-check .check-tick {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: #16a34a;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

/* Mock Action Buttons */
.ob-btn-mock {
  display: inline-block;
  height: 36px;
  line-height: 34px;
  width: 220px;
  font-family: verdana, helvetica, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
  border-radius: 5px;
  user-select: none;
}
.ob-btn-review, .ob-btn-clear, .ob-btn-questions, .ob-btn-inst {
  background-color: #c7dcf0;
  color: #000000;
  border: 1px solid #a9d0f5;
}
.ob-btn-save {
  background-color: #3778bd;
  color: #ffffff;
  border: 1px solid #2b6199;
}

#ob-start-test {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border: 1px solid #166534;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
  transition: all 0.15s ease;
  user-select: none;
}
#ob-start-test:hover {
  background: linear-gradient(135deg, #15803d, #166534);
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.45);
}
#ob-start-test:active {
  transform: translateY(1px);
}


/* ========================================================================== */
/* OLIVEBOARD LIVE CBT EXAMINATION HALL STYLES                               */
/* ========================================================================== */
.ob-header-top {
  background-color: #012C5E;
  min-height: 48px;
}

#ob-exam-main-container {
  min-height: 0;
  height: 100%;
  flex: 1 1 0%;
}

.secgen {
  background-color: #e6f6f3;
  border: 1px solid #B2E2D8;
  color: #012C5E;
  font-family: verdana, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 7px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.secgen:hover {
  background-color: #B2E2D8;
  color: #012149;
}
.secgen.secgen-active {
  background-color: #012C5E;
  border-color: #012149;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(1, 44, 94, 0.25);
}

.ob-action-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  padding: 8px 18px;
  cursor: pointer;
}

.ob-util-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

/* 4-Column Palette Grid matching Oliveboard desktop */
.ob-palette-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-content: start;
}

/* Palette button item */
.ob-palette-btn {
  width: 100%;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  position: relative;
}
.ob-palette-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.ob-palette-btn.ob-current-q {
  box-shadow: 0 0 0 2px #ff9800, 0 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: 900;
}

/* Legend Badges */
.ob-legend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  text-align: center;
  user-select: none;
}

/* 5 Real CBT Oliveboard Status Geometries & Colors */
/* 1. Answered: Green Downward Pentagon */
.ob-bg-answered {
  background-color: #27ae60;
  color: #ffffff;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
}

/* 2. Not Answered: Red Upward Pentagon */
.ob-bg-notanswered {
  background-color: #e74c3c;
  color: #ffffff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
}

/* 3. Marked: Purple Circle */
.ob-bg-marked {
  background-color: #8e44ad;
  color: #ffffff;
  border-radius: 50%;
}

/* 4. Not Visited: Light Grey Square */
.ob-bg-notvisited {
  background-color: #e9eef2;
  color: #495057;
  border: 1px solid #ced4da;
  border-radius: 3px;
}

/* 5. Answered & Marked: Purple Circle with Green Check Badge */
.ob-bg-ansmarked {
  background-color: #8e44ad;
  color: #ffffff;
  border-radius: 50%;
  position: relative;
}
.ob-bg-ansmarked::after {
  content: "\2713";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background-color: #27ae60;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Option Row */
.ob-option-row {
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  transition: all 0.15s ease;
}
.ob-option-row:hover {
  background-color: #f7faff;
  border-color: #a9d0f5;
}
.ob-option-row.selected {
  background-color: #eef5fc !important;
  border-color: #3476bb !important;
  box-shadow: 0 1px 3px rgba(52, 118, 187, 0.15);
}

/* ========================================================================== */
/* OLIVEBOARD EXAM SUMMARY SCREEN STYLES                                      */
/* ========================================================================== */
.ob-summary-table {
  width: 95%;
  min-width: 580px;
  max-width: 820px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid #000;
  font-family: verdana, helvetica, sans-serif;
  font-size: 17px;
  background-color: #fff;
}
.ob-summary-table thead tr {
  background-color: #E4EDF7;
}
.ob-summary-table th {
  border: 1px solid #000;
  padding: 14px 12px;
  font-weight: 700;
  text-align: center;
  color: #111;
  font-size: 18px;
}
.ob-summary-table td {
  border: 1px solid #000;
  padding: 12px 14px;
  text-align: center;
  color: #222;
  font-size: 17px;
}
.ob-summary-table tbody tr:hover {
  background-color: #f8fafc;
}

.ob-summary-btn-back {
  background-color: #E4EDF7;
  border: 1px solid #A9D0F5;
  color: #000;
  font-family: verdana, helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 10px 32px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ob-summary-btn-back:hover {
  background-color: #d0e2f5;
}

.ob-summary-btn-submit {
  background-color: #3476bb;
  border: 1px solid #205085;
  color: #fff;
  font-family: verdana, helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 10px 34px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ob-summary-btn-submit:hover {
  background-color: #205085;
}

/* ==========================================================================
   STANDARD CBT EXAM PANEL TYPOGRAPHY & CALIBRATED LAYOUT (Desktop >= 1025px)
   Calibrated to official MPSC / TCS-iON / Oliveboard exam software scale
   ========================================================================== */
@media (min-width: 1025px) {
  #view-exam:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 40 !important;
  }

  #view-exam.view-fade-in {
    animation: examHallFadeIn 0.15s ease-out both !important;
  }

  @keyframes examHallFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  #view-exam {
    font-size: 15px;
  }

  #view-exam #exam-q-number {
    font-size: 18px;
    font-weight: 700;
  }

  #view-exam #exam-q-text-container {
    font-size: 18px;
    line-height: 1.75;
  }

  #view-exam #exam-q-text-container p {
    font-size: 18px !important;
    line-height: 1.75 !important;
    font-weight: 600 !important;
    color: #0f172a !important;
  }

  #view-exam .ob-option-row {
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 10px 16px !important;
    font-size: 16px;
    line-height: 1.55;
    transition: all 0.15s ease;
    min-height: auto;
    max-width: 760px;
  }

  #view-exam .ob-option-row:hover {
    background-color: #f7faff;
    border-color: #a9d0f5;
  }

  #view-exam .ob-option-row.selected {
    background-color: #eef5fc !important;
    border-color: #3476bb !important;
    box-shadow: 0 1px 3px rgba(52, 118, 187, 0.15);
  }

  #view-exam .ob-option-row .marathi-text,
  #view-exam .ob-option-row .opt-text {
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
  }

  #view-exam .ob-option-row input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #3476bb;
  }

  #view-exam .ob-action-btn {
    font-size: 14px;
    padding: 8px 18px;
  }

  #view-exam .ob-util-btn {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* ========================================================================== */
/* TESTBOOK CBT EXAMINATION HALL STYLES                                       */
/* ========================================================================== */
.tb-palette-5col-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-content: start;
  min-height: 0;
}

.tb-palette-btn {
  width: 100%;
  height: 35px;
  min-width: 0;
  min-height: 35px;
  max-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  position: relative;
}

.tb-palette-btn:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tb-palette-btn.tb-current-q {
  box-shadow: 0 0 0 2px #0284c7;
  font-weight: 700;
  border-color: #0284c7 !important;
}

/* 5 Testbook Palette States */
.tb-bg-notvisited {
  background-color: #ffffff;
  color: #1e293b;
  border: 1px solid #94a3b8;
}

.tb-bg-notanswered {
  background-color: #e74c3c;
  color: #ffffff;
  border: 1px solid #d32f2f;
  border-radius: 2px;
}

.tb-bg-answered {
  background-color: #27ae60;
  color: #ffffff;
  border: 1px solid #219653;
  border-radius: 2px;
}

.tb-bg-marked {
  background-color: #8e44ad;
  color: #ffffff;
  border-radius: 50% !important;
  border: none;
}

.tb-bg-ansmarked {
  background-color: #8e44ad;
  color: #ffffff;
  border-radius: 50% !important;
  border: none;
  position: relative;
}

.tb-bg-ansmarked::after {
  content: "✓";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  background-color: #27ae60;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  line-height: 1;
}

/* Legend Shapes */
.tb-legend-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  user-select: none;
  border-radius: 3px;
}

.tb-legend-shape.tb-bg-marked,
.tb-legend-shape.tb-bg-ansmarked {
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50% !important;
}

/* Testbook Section Tab */
.tb-sec-tab {
  background-color: transparent;
  color: #475569;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 22px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}
.tb-sec-tab:hover {
  background-color: #e2e8f0;
  color: #0f172a;
}
.tb-sec-tab.tb-sec-tab-active {
  background-color: #08708a;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 112, 138, 0.2);
}

/* ==========================================================================
   DESKTOP CBT EXAMINATION HALL STYLES (>= 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
  /* Testbook Option Row */
  #view-exam .tb-option-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.12s ease;
    max-width: 820px;
    border: none !important;
  }

  #view-exam .tb-option-row:hover {
    background-color: #f8fafc;
  }

  /* No green box when selected! Testbook uses authentic clean radio selection */
  #view-exam .tb-option-row.tb-option-selected {
    background-color: transparent !important;
  }

  #view-exam .tb-option-row input[type="radio"] {
    width: 17px !important;
    height: 17px !important;
    margin-top: 3.5px;
    cursor: pointer;
    accent-color: #0284c7;
  }

  /* Question & Option Typography on Desktop */
  #view-exam #exam-q-text-container {
    font-size: var(--mpsc-font-q-mr, 21px) !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: #1e293b !important;
  }

  #view-exam #exam-q-text-container p,
  #view-exam #exam-q-text-container .marathi-text {
    font-size: var(--mpsc-font-q-mr, 21px) !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: #1e293b !important;
  }

  /* Offline Question Paper Booklet (MPSC Exam Standard 21px) */
  #offline-q-text,
  #offline-q-text p,
  #offline-q-text .marathi-text {
    font-size: var(--mpsc-font-q-mr, 21px) !important;
    line-height: 1.78 !important;
    word-break: break-word;
    text-rendering: optimizeLegibility;
  }

  #offline-options-list,
  #offline-options-list .paper-serif,
  #offline-options-list div {
    font-size: var(--mpsc-font-opt-mr, 18px) !important;
  }

  #offline-options-list span.font-serif.font-bold {
    font-size: var(--mpsc-font-opt-badge-mr, 18px) !important;
    line-height: 1.75 !important;
    word-break: break-word;
    text-rendering: optimizeLegibility;
  }

  @media (max-width: 640px) {
    #offline-paper-card {
      border-radius: 12px !important;
    }
    #offline-options-list {
      row-gap: 0.85rem !important;
    }
  }

  #view-exam .tb-option-row .opt-text,
  #view-exam .tb-option-row .marathi-text {
    font-size: var(--mpsc-font-opt-mr, 18px) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #1e293b !important;
  }

  #view-exam .ob-option-row .marathi-text,
  #view-exam .ob-option-row .opt-text {
    font-size: var(--mpsc-font-opt-mr, 18px) !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
  }

  #view-exam #exam-q-text-container p.en-question-text,
  #view-exam #exam-q-text-container .en-question-text {
    font-size: var(--mpsc-font-q-en, 18px) !important;
    line-height: 1.75 !important;
    color: #1e293b !important;
  }

  #view-exam .tb-option-row .opt-text .en-option-text,
  #view-exam .tb-option-row .en-option-text {
    font-size: var(--mpsc-font-opt-en, 16px) !important;
    line-height: 1.75 !important;
    color: #1e293b !important;
  }
}

/* Solution Modal Question & Typography */
#sol-q-body-container .marathi-text,
#exam-question-paper-content .marathi-text {
  font-size: var(--mpsc-font-q-mr, 19px) !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  color: #1e293b !important;
}

#sol-options-container .marathi-text,
#sol-options-container .opt-text {
  font-size: var(--mpsc-font-opt-mr, 18px) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  color: #1e293b !important;
}

/* Marathi Solution Explanation Typography (Exact 18px) */
#sol-explanation-box #sol-exp-mr,
#sol-explanation-box #sol-exp-mr p,
#sol-explanation-box #sol-exp-keypoints .marathi-text,
#solution-question-paper-modal .marathi-text {
  font-size: var(--mpsc-font-exp-mr, 18px) !important;
  line-height: 1.8 !important;
  color: #0f172a !important;
}

#sol-explanation-box .marathi-text {
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* English Typography for Exam Hall Palette, Header & Content (Exact 18px on Desktop) */
#side-section-title,
#sol-side-section-title,
#side-candidate-name,
.tb-exam-timer-label,
#sol-q-body-container .en-question-text,
#sol-options-container .en-option-text,
#sol-explanation-box #sol-exp-en,
#sol-explanation-box #sol-exp-en p {
  font-size: var(--mpsc-font-exp-en, 15px) !important;
  line-height: 1.75 !important;
  color: #1e293b !important;
}

/* Authentic Testbook Legend Typography (Clean & Proportional) */
.tb-legend-label {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

/* Mistake Book Question, Options & Explanation Typography */
#hub-mistakes-cards-container .mistake-q-marathi,
#mistake-notebook-list .mistake-q-marathi {
  font-size: 19px !important;
  line-height: 1.8 !important;
  font-weight: 700 !important;
}

#hub-mistakes-cards-container .mistake-opt-marathi,
#mistake-notebook-list .mistake-opt-marathi {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

#hub-mistakes-cards-container .mistake-exp-marathi,
#mistake-notebook-list .mistake-exp-marathi {
  font-size: 18px !important;
  line-height: 1.8 !important;
}

#hub-mistakes-cards-container .mistake-q-english,
#mistake-notebook-list .mistake-q-english {
  font-size: 18px !important;
  line-height: 1.75 !important;
  font-weight: 700 !important;
}

#hub-mistakes-cards-container .mistake-opt-english,
#mistake-notebook-list .mistake-opt-english {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

#hub-mistakes-cards-container .mistake-exp-english,
#mistake-notebook-list .mistake-exp-english {
  font-size: 18px !important;
  line-height: 1.75 !important;
}

#side-section-title,
#sol-side-section-title,
#side-candidate-name,
.tb-exam-timer-label {
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* ========================================================================== */
/* EXAM HALL MOBILE EXPERIENCE (Clean Light CBT Theme)                         */
/* ========================================================================== */
@media (max-width: 1024px) {
  /* Strictly Hide Desktop Right Sidebar & Toggle Button on Mobile */
  #ob-exam-right-container,
  #ob-exam-sidebar-toggle-btn {
    display: none !important;
  }

  /* Viewport Height & Safe Inset (ONLY when active in test mode) */
  #view-exam:not(.hidden) {
    height: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background-color: #f5f5f5 !important;
    color: #1e293b !important;
    z-index: 50 !important;
  }

  #view-exam.hidden {
    display: none !important;
  }

  /* Structural containers must flex-fit within viewport without overflow clipping */
  #view-exam #ob-exam-main-container {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: none !important;
  }

  #view-exam #ob-exam-left-container {
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: none !important;
  }

  #view-exam #ob-exam-left-container > div.flex-1 {
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Light Header */
  #view-exam header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    min-height: 52px !important;
    padding: 8px 14px !important;
    flex-shrink: 0 !important;
  }

  /* Question Meta Bar */
  #exam-q-meta-bar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 8px 14px !important;
    flex-shrink: 0 !important;
  }

  /* Question Viewport */
  #exam-question-viewport {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px 24px 14px !important;
    background-color: #ffffff !important;
  }

  /* Question Typography (Clean Dark Slate Text on Light) */
  #view-exam #exam-q-text-container,
  #view-exam #exam-q-text-container p,
  #view-exam #exam-q-text-container .marathi-text,
  #view-exam #exam-q-text-container .en-question-text,
  #view-exam #exam-q-text-container p.en-question-text {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #1e293b !important;
    font-weight: 400 !important;
  }

  /* Option Cards (Clean Light Cards with Subtle Border) */
  #view-exam .tb-option-row {
    padding: 13px 16px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    gap: 12px !important;
    min-height: 48px !important;
    color: #1e293b !important;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease !important;
    max-width: 100% !important;
    -webkit-tap-highlight-color: transparent;
  }

  #view-exam .tb-option-row:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
  }

  #view-exam .tb-option-row:active {
    transform: scale(0.982) !important;
    background-color: #f1f5f9 !important;
  }

  /* Active Selected Option Card */
  #view-exam .tb-option-row.tb-option-selected {
    animation: optionSelectedPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 1.5px #0284c7, 0 3px 8px -1px rgba(2, 132, 199, 0.18) !important;
  }

  #view-exam .tb-option-row .opt-text,
  #view-exam .tb-option-row .marathi-text,
  #view-exam .tb-option-row .en-option-text,
  #view-exam .tb-option-row .opt-text .en-option-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
  }

  #view-exam .tb-option-row.tb-option-selected .opt-text,
  #view-exam .tb-option-row.tb-option-selected .marathi-text,
  #view-exam .tb-option-row.tb-option-selected .en-option-text,
  #view-exam .tb-option-row.tb-option-selected .opt-text .en-option-text {
    color: #012C5E !important;
  }

  #view-exam .tb-option-row.tb-option-selected .mob-opt-num {
    color: #0284c7 !important;
    animation: optionBadgePop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 700 !important;
  }

  /* Italic numbers on mobile options */
  .mob-opt-num {
    font-style: italic !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-right: 6px !important;
    min-width: 14px !important;
    line-height: 1.6 !important;
    flex-shrink: 0 !important;
  }

  /* Bottom Actions Bar (Clean Light Theme matching current white design) */
  #view-exam .exam-bottom-bar {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 40 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom, 12px)) 14px !important;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.05) !important;
  }

  #view-exam .exam-bottom-bar button {
    min-height: 44px !important;
  }

  /* Mobile Palette Drawer */
  #mobile-palette-drawer > div {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-left: 1px solid #e2e8f0 !important;
  }

  /* Exam Summary Screen on Mobile */
  .ob-summary-table {
    min-width: 100% !important;
    font-size: 11.5px !important;
  }
  .ob-summary-table th {
    padding: 6px 3px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }
  .ob-summary-table td {
    padding: 6px 3px !important;
    font-size: 11px !important;
    text-align: center !important;
  }
  .ob-summary-btn-back,
  .ob-summary-btn-submit {
    font-size: 13px !important;
    padding: 7px 18px !important;
  }
}

/* ========================================================================== */
/* Mobile Swipe Transition Animations                                         */
/* ========================================================================== */
@keyframes questionSlideInRight {
  from {
    opacity: 0.65;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes questionSlideInLeft {
  from {
    opacity: 0.65;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#exam-question-viewport {
  touch-action: pan-y;
  overflow-x: hidden;
}

.anim-slide-in-right {
  animation: questionSlideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-slide-in-left {
  animation: questionSlideInLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Option & Bookmark Micro-Interactions */
@keyframes optionSelectedPop {
  0% {
    transform: scale(0.978);
  }
  50% {
    transform: scale(1.012);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes optionBadgePop {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bookmarkPop {
  0% {
    transform: scale(0.75);
  }
  45% {
    transform: scale(1.35) rotate(-10deg);
  }
  75% {
    transform: scale(0.95) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.anim-bookmark-pop {
  animation: bookmarkPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  display: inline-block !important;
  transform-origin: center center;
}

/* Post-Exam Metric Cards Staggered Animation & Hover Lift */
@keyframes resCardEnter {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.008);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.res-metric-card {
  animation: resCardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.res-metric-card:hover {
  transform: translateY(-3px) scale(1.015) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
}

.res-metric-card:nth-child(1) { animation-delay: 0.04s; }
.res-metric-card:nth-child(2) { animation-delay: 0.09s; }
.res-metric-card:nth-child(3) { animation-delay: 0.14s; }
.res-metric-card:nth-child(4) { animation-delay: 0.19s; }
.res-metric-card:nth-child(5) { animation-delay: 0.24s; }

@media (max-width: 640px) {
  .res-metric-card {
    min-height: 74px;
  }
  .res-metric-card:hover {
    transform: none !important;
  }
}

/* Mobile Question Palette Active Badge Radar Ping */
@keyframes radarPing {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(249, 115, 22, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

.mob-palette-active-q {
  animation: radarPing 1.8s cubic-bezier(0.25, 0.8, 0.25, 1) infinite !important;
  transform: scale(1.06);
  z-index: 2;
}

/* Question of the Day (QOTD) Micro-Interactions */
@keyframes optCorrectPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

.anim-correct-pop {
  animation: optCorrectPop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

@keyframes optWrongShake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}

.anim-wrong-shake {
  animation: optWrongShake 0.4s ease-in-out both !important;
}

@keyframes expandDown {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-expand-down {
  animation: expandDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Analytics & Comparison Bar Growth */
.res-bar-grow {
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Gamification: Streak Flame Glow & Milestone Node Entrance */
@keyframes flameGlow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.5));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(234, 88, 12, 0.85));
    transform: scale(1.1);
  }
}

.anim-flame-glow {
  animation: flameGlow 2.2s infinite ease-in-out !important;
  display: inline-block;
}

@keyframes streakNodePop {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-streak-node {
  animation: streakNodePop 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* 3. Post-Exam Results: Gold Trophy Shimmer & State Rank Axis Spring */
@keyframes shimmerSweep {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  35%, 100% {
    transform: translateX(250%) skewX(-20deg);
  }
}

.anim-shimmer-sweep {
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.22), transparent);
  animation: shimmerSweep 3.2s infinite ease-in-out;
}

.res-rank-spring {
  transition: left 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 4. Mistake Notebook: Mastered Stamp & Slide-Out */
@keyframes stampMastered {
  0% {
    opacity: 0;
    transform: scale(2.2) rotate(-22deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.95) rotate(-6deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}

.anim-mastered-stamp {
  animation: stampMastered 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes cardSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-height: 500px;
    margin-bottom: 1rem;
  }
  50% {
    opacity: 0;
    transform: translateX(35px) scale(0.96);
  }
  100% {
    opacity: 0;
    transform: translateX(80px) scale(0.9);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
  }
}

.anim-card-slideout {
  animation: cardSlideOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* 5. Maharashtra State Leaderboard: Podium Elevation & Crown Float */
@keyframes podiumRise {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.95);
  }
  65% {
    opacity: 1;
    transform: translateY(-4px) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.anim-podium-card-1 {
  animation: podiumRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.anim-podium-card-2 {
  animation: podiumRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.04s backwards;
}

.anim-podium-card-3 {
  animation: podiumRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.16s backwards;
}

@keyframes crownFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(4deg);
  }
}

.anim-crown-float {
  display: inline-block;
  animation: crownFloat 2.6s ease-in-out infinite;
}

/* 6. Mobile Bottom Dock: Tap Micro-Spring */
@keyframes dockIconBounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.82) translateY(2px);
  }
  65% {
    transform: scale(1.18) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.anim-dock-bounce {
  animation: dockIconBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

.mob-nav-btn {
  transition: transform 0.15s ease, color 0.15s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.mob-nav-btn:active {
  transform: scale(0.88);
}

/* ==========================================================================
   Post-Exam CBT Solutions & Analytics Hall (Testbook-Style Architecture)
   ========================================================================== */
.res-star.active {
  color: #f59e0b !important;
}

.sol-tile {
  position: relative;
  width: 100%;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  border: 1px solid transparent;
}
.sol-tile:hover {
  transform: scale(1.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sol-tile.active {
  box-shadow: 0 0 0 2px #0284c7 !important;
  font-weight: 800;
  border-color: #0284c7 !important;
}

/* Correct Answer: Green Dome (rounded top, flat bottom) */
.sol-tile-correct {
  background-color: #27ae60 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px 14px 2px 2px !important;
  font-weight: 700 !important;
}

/* Incorrect Answer: Red Inverted Dome (flat top, rounded bottom) */
.sol-tile-incorrect {
  background-color: #e74c3c !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 2px 2px 14px 14px !important;
  font-weight: 700 !important;
}

/* Unattempted / Skipped: Clean White Box with Dark Border */
.sol-tile-unattempted,
.sol-tile-skipped {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #333333 !important;
  border-radius: 2px !important;
  font-weight: 500 !important;
}

/* Partially Correct */
.sol-tile-partial {
  background-color: #f1c40f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
}

.sol-opt-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #d4d4d4;
  background-color: #ffffff;
  transition: all 0.15s ease;
}
.sol-opt-row:hover {
  background-color: #f8fafc;
}
.sol-opt-row.opt-correct {
  border-color: #22c55e !important;
  background-color: #f0fdf4 !important;
  color: #14532d !important;
}
.sol-opt-row.opt-wrong-chosen {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
  color: #7f1d1d !important;
}

/* ========================================================================== */
/* HIGH-CLARITY EXAM DIAGRAMS & INTERACTIVE LIGHTBOX VIEWER                   */
/* ========================================================================== */
.exam-diagram-img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.02);
  user-select: none;
  -webkit-user-drag: none;
}

.exam-diagram-card {
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.9);
  transition: all 0.2s ease;
}

.exam-diagram-card:hover {
  box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(2, 136, 116, 0.3);
}

#exam-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background-color: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.2s ease;
}

#exam-image-lightbox.hidden,
#exam-image-lightbox[hidden] {
  display: none !important;
}

#exam-lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  touch-action: none;
  cursor: grab;
}

#exam-lightbox-stage:active {
  cursor: grabbing;
}

#exam-lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  transition: transform 0.12s ease-out;
  transform-origin: center center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.03);
}

.lightbox-backdrop-light {
  background-color: #f8fafc !important;
}

.lightbox-backdrop-light #exam-lightbox-header,
.lightbox-backdrop-light #exam-lightbox-footer {
  background-color: rgba(241, 245, 249, 0.95) !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* ========================================================================== */
/* CBT SOLUTION VIEW SCROLLABLE PANE (Fixed Header & Footer Architecture)     */
/* ========================================================================== */
#view-result.sol-mode-active {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

#res-subview-solutions {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#sol-two-col-container {
  height: calc(100vh - 92px) !important;
  max-height: calc(100vh - 92px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
}

#sol-question-pane {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
}

#sol-question-scroll-area {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 3.5rem;
}

#sol-question-scroll-area::-webkit-scrollbar {
  width: 8px;
}
#sol-question-scroll-area::-webkit-scrollbar-track {
  background: #f8fafc;
}
#sol-question-scroll-area::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 9999px;
  border: 2px solid #f8fafc;
}
#sol-question-scroll-area::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

#sol-exam-right-container {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

@media (min-width: 1024px) {
  #sol-exam-right-container {
    height: 100% !important;
    max-height: 100% !important;
    flex-shrink: 0 !important;
  }
}

#sol-palette-grid,
#exam-palette-grid {
  min-height: 0 !important;
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #0284c7 #c5dae9;
  padding-right: 6px;
}

#sol-palette-grid::-webkit-scrollbar,
#exam-palette-grid::-webkit-scrollbar {
  width: 8px;
  display: block;
}

#sol-palette-grid::-webkit-scrollbar-track,
#exam-palette-grid::-webkit-scrollbar-track {
  background: #c5dae9;
  border-radius: 9999px;
}

#sol-palette-grid::-webkit-scrollbar-thumb,
#exam-palette-grid::-webkit-scrollbar-thumb {
  background: #0284c7;
  border-radius: 9999px;
  border: 1.5px solid #c5dae9;
}

#sol-palette-grid::-webkit-scrollbar-thumb:hover,
#exam-palette-grid::-webkit-scrollbar-thumb:hover {
  background: #0369a1;
}

/* ========================================================================== */
/* RE-ATTEMPT MODERN SLIDER TOGGLE SWITCH (Tactile Micro-Animation)           */
/* ========================================================================== */
.sol-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 24px;
  background-color: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
}

.peer:checked ~ .sol-toggle-track,
.sol-toggle-track.active {
  background: linear-gradient(135deg, #0284c7 0%, #02a3be 100%) !important;
  box-shadow: 0 0 12px rgba(2, 163, 190, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

.sol-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.peer:checked ~ .sol-toggle-track .sol-toggle-thumb,
.sol-toggle-track.active .sol-toggle-thumb {
  transform: translateX(22px);
  box-shadow: 0 2px 6px rgba(1, 44, 94, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.sol-toggle-track:hover {
  filter: brightness(1.02);
}

/* Tactile press effect */
.peer:active ~ .sol-toggle-track .sol-toggle-thumb,
.sol-toggle-track:active .sol-toggle-thumb {
  width: 23px;
}
.peer:checked:active ~ .sol-toggle-track .sol-toggle-thumb,
.sol-toggle-track.active:active .sol-toggle-thumb {
  transform: translateX(19px);
  width: 23px;
}

/* Center dot inside active thumb */
.sol-toggle-thumb::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0284c7;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.peer:checked ~ .sol-toggle-track .sol-toggle-thumb::after,
.sol-toggle-track.active .sol-toggle-thumb::after {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   HEADER & STUDENT AUTH ANCHOR DEFENSE
   Guarantees that the login / user auth button never gets pushed off-screen
   ========================================================================== */
#main-site-header {
  overflow-x: clip;
}

#header-student-auth {
  flex-shrink: 0 !important;
  margin-left: auto;
}

#nav-login-btn-visible,
#nav-user-badge-visible {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Header Logo Subtitle & Devanagari Headroom Defense:
   Guarantees top matras (वेलांटी, मात्रा, रफार, चंद्र) never get clipped */
#header-site-subtitle {
  line-height: 1.45 !important;
  overflow: visible !important;
  padding-top: 1.5px !important;
  padding-bottom: 1.5px !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   INTERACTIVE BOOK LOGO HOVER ANIMATION (3D Page Open & Shimmer Engine)
   Transforms the static logo into a dynamic, living book that flutters open
   when the user hovers over the logo emblem or "mpsctest.in" brand text.
   ========================================================================== */

.logo-interactive-wrap {
  perspective: 600px;
  user-select: none;
  cursor: pointer;
}

/* 1. Book Badge Container - Lifts with Multi-Layer Cyan & Emerald Knowledge Glow */
.logo-book-badge {
  position: relative;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.35s ease;
  transform-origin: center center;
  will-change: transform, box-shadow;
}

/* Ethereal radiant glow pseudo-element */
.logo-book-badge::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 35% 45%, rgba(2, 163, 190, 0.35) 0%, rgba(16, 185, 129, 0.3) 50%, transparent 75%);
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1;
}

/* Delicate Page-Turn Shimmer Light Glint */
.logo-book-badge::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 25%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.3) 75%,
    transparent 100%
  );
  transform: rotate(28deg) translateX(-180%);
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}

.logo-interactive-wrap:hover .logo-book-badge,
.logo-book-badge:hover,
.group:hover .logo-book-badge {
  transform: translateY(-2.5px) scale(1.05);
  border-color: rgba(2, 163, 190, 0.65) !important;
  box-shadow: 0 10px 22px -3px rgba(2, 163, 190, 0.32),
              0 0 16px rgba(16, 185, 129, 0.22),
              0 0 0 2px rgba(2, 163, 190, 0.2) !important;
}

.logo-interactive-wrap:hover .logo-book-badge::before,
.logo-book-badge:hover::before,
.group:hover .logo-book-badge::before {
  opacity: 1;
  transform: scale(1.12);
}

@keyframes pageBloomSheen {
  0% {
    transform: rotate(28deg) translateX(-180%);
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    transform: rotate(28deg) translateX(380%);
    opacity: 0;
  }
}

.logo-interactive-wrap:hover .logo-book-badge::after,
.logo-book-badge:hover::after,
.group:hover .logo-book-badge::after {
  animation: pageBloomSheen 0.85s cubic-bezier(0.25, 1, 0.5, 1) 0.05s forwards;
}

/* 2. Book Emblem 3D Page Flutter / Knowledge Bloom Motion */
.book-emblem-graphic,
.logo-book-badge img {
  position: relative;
  z-index: 2;
  transform-origin: 50% 88%;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
  will-change: transform, filter;
  filter: drop-shadow(0 1px 2px rgba(1, 44, 94, 0.12));
}

@keyframes knowledgeBloomFlutter {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 1px 2px rgba(1, 44, 94, 0.12));
  }
  22% {
    /* Bloom up with gentle left page tip */
    transform: scaleX(1.11) scaleY(1.08) translateY(-2px) rotate(-3deg);
    filter: drop-shadow(-1px 3px 6px rgba(2, 163, 190, 0.35));
  }
  48% {
    /* Flutter across to right page */
    transform: scaleX(1.13) scaleY(1.09) translateY(-2.5px) rotate(2.5deg);
    filter: drop-shadow(1px 4px 7px rgba(16, 185, 129, 0.35));
  }
  75% {
    /* Gentle counter balance */
    transform: scaleX(1.09) scaleY(1.06) translateY(-1.5px) rotate(-1deg);
    filter: drop-shadow(0 3px 5px rgba(1, 44, 94, 0.22));
  }
  100% {
    /* Settle in proud open bloom */
    transform: scaleX(1.07) scaleY(1.05) translateY(-1.5px) rotate(0deg);
    filter: drop-shadow(0 3px 6px rgba(1, 44, 94, 0.25)) drop-shadow(0 0 5px rgba(2, 163, 190, 0.25));
  }
}

.logo-interactive-wrap:hover .book-emblem-graphic,
.logo-interactive-wrap:hover .logo-book-badge img,
.logo-book-badge:hover .book-emblem-graphic,
.logo-book-badge:hover img,
.group:hover .book-emblem-graphic,
.group:hover .logo-book-badge img {
  animation: knowledgeBloomFlutter 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 3. Text Spring & Cyan Neon Accent */
.brand-test,
.logo-interactive-wrap .text-\[\#0284c7\],
.group .text-\[\#0284c7\] {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.25s ease,
              text-shadow 0.3s ease;
}

.logo-interactive-wrap:hover .brand-test,
.logo-interactive-wrap:hover .text-\[\#0284c7\],
.group:hover .brand-test,
.group:hover .text-\[\#0284c7\] {
  color: #02a3be !important;
  transform: translateY(-1px) scale(1.06);
  text-shadow: 0 0 10px rgba(2, 163, 190, 0.4);
}

.logo-interactive-wrap:hover #header-site-subtitle,
.group:hover #header-site-subtitle {
  color: #0284c7;
  transition: color 0.25s ease;
}

/* 4. Click / Tap Press Feel */
.logo-interactive-wrap:active .logo-book-badge,
.logo-book-badge:active,
.group:active .logo-book-badge {
  transform: translateY(0) scale(0.96) !important;
  transition-duration: 0.1s;
}

/* 4b. Logo Home & Refresh Animation */
@keyframes logoRefreshGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(2, 163, 190, 0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(2, 163, 190, 0.35), 0 0 20px rgba(31, 181, 125, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(2, 163, 190, 0);
  }
}

.logo-refreshing .logo-book-badge {
  animation: logoRefreshGlow 0.8s ease-out;
  border-color: #02a3be !important;
}

/* 5. Modern .IN Domain Badge (Harmonious with Navy/Sky Branding) */
.brand-in {
  display: inline-flex;
  align-items: center;
  background: #e0f2fe;
  color: #0284c7 !important;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 0.5px 5px;
  margin-left: 3px;
  font-size: 0.72em;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  vertical-align: baseline;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.08);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo-interactive-wrap:hover .brand-in,
.group:hover .brand-in {
  background: #0284c7;
  color: #ffffff !important;
  border-color: #0284c7;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
}


/* ==========================================================================
   BRAND INTRO SPLASH SCREEN (App Open & Startup Brand Animation)
   ========================================================================== */
#brand-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #01142f;
  background: radial-gradient(circle at 50% 40%, #012149 0%, #01142f 60%, #000c1e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #ffffff;
  user-select: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s ease;
  will-change: opacity, transform;
}

#brand-splash-overlay.splash-exit {
  opacity: 0;
  transform: scale(1.035);
  pointer-events: none;
  visibility: hidden;
}

/* Ambient Aurora Glow */
.splash-aurora-cyan {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 480px;
  max-width: 90vw;
  height: 380px;
  max-height: 90vw;
  background: radial-gradient(circle, rgba(2, 163, 190, 0.38) 0%, rgba(31, 181, 125, 0.18) 45%, transparent 75%);
  transform: translate(-50%, -50%);
  filter: blur(55px);
  pointer-events: none;
  animation: splashAuroraPulse 2.4s ease-in-out infinite alternate;
}

@keyframes splashAuroraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 720px;
  width: 100%;
}

/* 1. Book Logo Emblem Squircle Badge */
.splash-badge {
  width: 96px;
  height: 96px;
  background: #ffffff;
  border-radius: 28px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px -5px rgba(2, 163, 190, 0.55),
              0 0 0 2px rgba(255, 255, 255, 0.25),
              0 0 50px rgba(31, 181, 125, 0.35);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  animation: splashBadgeEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (max-width: 640px) {
  .splash-badge {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    padding: 10px;
    margin-bottom: 16px;
  }
}

@keyframes splashBadgeEnter {
  0% { transform: scale(0.4) translateY(30px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.splash-book-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 85%;
  animation: splashBookFlutter 1.1s cubic-bezier(0.25, 1, 0.5, 1) 0.15s forwards;
}

@keyframes splashBookFlutter {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.16) rotate(-4deg) translateY(-2px); }
  50% { transform: scale(1.18) rotate(3deg) translateY(-3px); }
  75% { transform: scale(1.1) rotate(-1deg) translateY(-1.5px); }
  100% { transform: scale(1.08) rotate(0deg) translateY(-2px); }
}

/* Diagonal Shimmer Light Sweep across Badge */
.splash-shimmer {
  position: absolute;
  top: -50%;
  left: -80%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent);
  transform: rotate(25deg);
  animation: splashShimmerSweep 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}

@keyframes splashShimmerSweep {
  0% { transform: rotate(25deg) translateX(-150%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: rotate(25deg) translateX(350%); opacity: 0; }
}

/* 2. Big Brand Title Animation */
.splash-brand-title {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 8.5vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 14px 0;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  animation: splashTitleEnter 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
  opacity: 0;
}

@keyframes splashTitleEnter {
  0% { transform: translateY(24px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.splash-brand-test {
  color: #02a3be;
  text-shadow: 0 0 25px rgba(2, 163, 190, 0.8),
               0 0 50px rgba(31, 181, 125, 0.45);
  display: inline-block;
  animation: splashTestPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

@keyframes splashTestPop {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.09) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* 2B. High-Impact .IN Domain Squircle Badge (Immediate Retention) */
.splash-brand-in-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.38) 100%);
  border: 2px solid #f59e0b;
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.9);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.45), inset 0 0 12px rgba(245, 158, 11, 0.2);
  border-radius: clamp(10px, 2.5vw, 18px);
  padding: 2px clamp(8px, 2vw, 16px);
  margin-left: clamp(4px, 1.2vw, 10px);
  letter-spacing: -0.02em;
  transform: translateY(-2px);
  animation: inBadgePulse 2s ease-in-out infinite alternate;
}

@keyframes inBadgePulse {
  0% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.4); transform: translateY(-2px) scale(1); }
  100% { box-shadow: 0 0 45px rgba(245, 158, 11, 0.75); transform: translateY(-3px) scale(1.03); }
}

/* 2C. Explicit Domain Distinction Verification Pill */
.splash-domain-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Mukta', sans-serif;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fef08a;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: clamp(0.75rem, 2.2vw, 0.9rem);
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
  animation: splashMottoEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
  opacity: 0;
}

/* 3. Subtitle / Motto Animation */
.splash-motto {
  font-family: 'Mukta', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: splashMottoEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.34s forwards;
  opacity: 0;
}

@keyframes splashMottoEnter {
  0% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.splash-tagline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: #cbd5e1;
  max-width: 620px;
  line-height: 1.4;
  margin: 0;
}

.splash-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #34d399;
  background: rgba(6, 78, 59, 0.55);
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 4px 14px;
  border-radius: 9999px;
  margin-top: 4px;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.2);
}

.splash-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #34d399;
  animation: splashDotPulse 1.4s ease-in-out infinite alternate;
}

@keyframes splashDotPulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px #34d399; }
}

/* 3C. Ambient Floating Educational Knowledge Particles */
.edu-particle {
  position: absolute;
  color: rgba(255, 255, 255, 0.18);
  font-size: 24px;
  pointer-events: none;
  animation: floatEduParticle 4s ease-in-out infinite alternate;
}
.edu-p1 { top: 16%; left: 16%; font-size: 28px; color: rgba(2, 163, 190, 0.32); animation-delay: 0s; }
.edu-p2 { top: 20%; right: 18%; font-size: 32px; color: rgba(245, 158, 11, 0.32); animation-delay: 0.7s; }
.edu-p3 { bottom: 24%; left: 20%; font-size: 26px; color: rgba(31, 181, 125, 0.32); animation-delay: 1.2s; }
.edu-p4 { bottom: 20%; right: 20%; font-size: 30px; color: rgba(56, 189, 248, 0.28); animation-delay: 1.8s; }
.edu-p5 { top: 50%; left: 10%; font-size: 22px; color: rgba(251, 191, 36, 0.25); animation-delay: 2.2s; }
.edu-p6 { top: 52%; right: 12%; font-size: 24px; color: rgba(167, 139, 250, 0.28); animation-delay: 1.5s; }

@media (max-width: 640px) {
  .edu-particle { font-size: 18px; }
  .edu-p1 { top: 10%; left: 8%; font-size: 20px; }
  .edu-p2 { top: 12%; right: 8%; font-size: 22px; }
  .edu-p3 { bottom: 12%; left: 8%; font-size: 18px; }
  .edu-p4 { bottom: 10%; right: 8%; font-size: 20px; }
  .edu-p5, .edu-p6 { display: none; }
}

@keyframes floatEduParticle {
  0% { transform: translateY(0px) rotate(0deg) scale(0.95); opacity: 0.22; }
  50% { opacity: 0.55; }
  100% { transform: translateY(-16px) rotate(10deg) scale(1.1); opacity: 0.32; }
}

/* 3D. Educational Feature Tags */
.splash-feature-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
  animation: splashMottoEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
  opacity: 0;
}

.splash-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(10px, 1.8vw, 12px);
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 3px 11px;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}

/* 4. Interactive Enter Button & Skip Hint */
.splash-action-row {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  animation: splashMottoEnter 0.5s ease 0.55s forwards;
  opacity: 0;
}

.splash-enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 18px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
}

.splash-enter-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 15px rgba(2, 163, 190, 0.3);
}

.splash-enter-btn:active {
  transform: translateY(0) scale(0.97);
}

.splash-skip-hint {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   AUTHENTIC CBT EXAM WATERMARK (Non-disturbing, Anti-Piracy Branding)
   ========================================================================== */
.exam-watermark-bg {
  position: relative;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='210' viewBox='0 0 320 210'%3E%3Ctext x='45' y='115' fill='%23012c5e' fill-opacity='0.038' font-size='21' font-weight='800' font-family='system-ui, -apple-system, BlinkMacSystemFont, sans-serif' transform='rotate(-22 160 105)'%3Empsctest.in%3C/text%3E%3C/svg%3E");
  background-size: 320px 210px;
  background-repeat: repeat;
}

.dark .exam-watermark-bg {
  background-color: #0f172a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='210' viewBox='0 0 320 210'%3E%3Ctext x='45' y='115' fill='%23e2e8f0' fill-opacity='0.04' font-size='21' font-weight='800' font-family='system-ui, -apple-system, BlinkMacSystemFont, sans-serif' transform='rotate(-22 160 105)'%3Empsctest.in%3C/text%3E%3C/svg%3E");
}

/* ==========================================================================
   AUTHENTIC MPSC OFFLINE OMR PEN CURSOR & INK DARKENING ANIMATION
   ========================================================================== */
/* Pen cursor exclusively active over the OMR sheet, bubbles, and OMR interactive zones */
#offline-omr-card,
#offline-omr-card *:not(button):not(button *),
#offline-omr-scroll-container,
#offline-omr-scroll-container *,
.omr-bubble-btn,
.omr-bubble-btn *,
#mob-omr-drawer,
#mob-omr-drawer *:not(button):not(button *),
.omr-pen-zone,
.omr-pen-zone * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%27nibGrad%27%20x1%3D%270%25%27%20y1%3D%270%25%27%20x2%3D%27100%25%27%20y2%3D%27100%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23ffffff%27%2F%3E%20%3Cstop%20offset%3D%2735%25%27%20stop-color%3D%27%23cbd5e1%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%2364748b%27%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%27barrelGrad%27%20x1%3D%270%25%27%20y1%3D%270%25%27%20x2%3D%27100%25%27%20y2%3D%27100%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%231e40af%27%2F%3E%20%3Cstop%20offset%3D%2730%25%27%20stop-color%3D%27%23172554%27%2F%3E%20%3Cstop%20offset%3D%2780%25%27%20stop-color%3D%27%230f172a%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23020617%27%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%27clipGrad%27%20x1%3D%270%25%27%20y1%3D%270%25%27%20x2%3D%27100%25%27%20y2%3D%27100%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23f8fafc%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%2394a3b8%27%2F%3E%20%3C%2FlinearGradient%3E%20%3Cfilter%20id%3D%27penShad%27%20x%3D%27-20%25%27%20y%3D%27-20%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%20%3CfeDropShadow%20dx%3D%271.2%27%20dy%3D%271.8%27%20stdDeviation%3D%271.2%27%20flood-color%3D%27%23000000%27%20flood-opacity%3D%270.4%27%2F%3E%20%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Cg%20filter%3D%27url(%23penShad)%27%3E%20%3Cpolygon%20points%3D%2711%2C7%2026%2C22%2022%2C26%207%2C11%27%20fill%3D%27url(%23barrelGrad)%27%20stroke%3D%27%23020617%27%20stroke-width%3D%270.5%27%2F%3E%20%3Cpolygon%20points%3D%277%2C11%2014%2C18%2012%2C20%205%2C13%27%20fill%3D%27%231e293b%27%20stroke%3D%27%230f172a%27%20stroke-width%3D%270.4%27%2F%3E%20%3Cline%20x1%3D%278.5%27%20y1%3D%2710%27%20x2%3D%276.5%27%20y2%3D%2712%27%20stroke%3D%27%23334155%27%20stroke-width%3D%270.6%27%2F%3E%20%3Cline%20x1%3D%2710.5%27%20y1%3D%2712%27%20x2%3D%278.5%27%20y2%3D%2714%27%20stroke%3D%27%23334155%27%20stroke-width%3D%270.6%27%2F%3E%20%3Cline%20x1%3D%2712.5%27%20y1%3D%2714%27%20x2%3D%2710.5%27%20y2%3D%2716%27%20stroke%3D%27%23334155%27%20stroke-width%3D%270.6%27%2F%3E%20%3Cpolygon%20points%3D%277%2C11%2011%2C7%209%2C5%205%2C9%27%20fill%3D%27%23f1f5f9%27%20stroke%3D%27%2394a3b8%27%20stroke-width%3D%270.5%27%2F%3E%20%3Cpolygon%20points%3D%275%2C9%209%2C5%202%2C2%27%20fill%3D%27url(%23nibGrad)%27%20stroke%3D%27%23475569%27%20stroke-width%3D%270.5%27%2F%3E%20%3Ccircle%20cx%3D%272%27%20cy%3D%272%27%20r%3D%271.3%27%20fill%3D%27%230f172a%27%2F%3E%20%3Ccircle%20cx%3D%272%27%20cy%3D%272%27%20r%3D%270.6%27%20fill%3D%27%231e40af%27%2F%3E%20%3Cpolygon%20points%3D%2718%2C10%2024%2C16%2023%2C17%2017%2C11%27%20fill%3D%27url(%23clipGrad)%27%20stroke%3D%27%2364748b%27%20stroke-width%3D%270.3%27%2F%3E%20%3Cline%20x1%3D%2712%27%20y1%3D%276%27%20x2%3D%2725%27%20y2%3D%2719%27%20stroke%3D%27%2360a5fa%27%20stroke-width%3D%270.7%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.75%27%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") 2 2, crosshair !important;
}

/* OMR Card Submission Button - keep pointer cursor */
#offline-omr-card button:not(.omr-bubble-btn),
#offline-omr-card button:not(.omr-bubble-btn) *,
#mob-omr-drawer button:not(.omr-bubble-btn),
#mob-omr-drawer button:not(.omr-bubble-btn) * {
  cursor: pointer !important;
}

/* Left Side Question Paper Booklet & Question / Options: Always Regular Mouse Arrow */
#offline-paper-card,
#offline-paper-card #offline-q-text,
#offline-paper-card #offline-q-text *,
#offline-paper-card #offline-options-list,
#offline-paper-card #offline-options-list * {
  cursor: default !important;
}

/* Navigation & Interactive buttons on left side paper card */
#offline-paper-card button,
#offline-paper-card button * {
  cursor: pointer !important;
}

#offline-paper-card button:disabled,
#offline-paper-card button:disabled * {
  cursor: not-allowed !important;
}

/* OMR Bubble Button Base */
.omr-bubble-btn {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.omr-bubble-btn:hover {
  transform: scale(1.14) !important;
  box-shadow: 0 0 0 2.5px rgba(27, 54, 93, 0.22) !important;
}

.omr-bubble-btn:active {
  transform: scale(0.96) !important;
}

/* Authentic Dark Ballpoint Pen Ink */
.omr-bubble-btn.omr-filled {
  border-color: #0f172a !important;
  background: radial-gradient(circle at 40% 36%, #224375 0%, #172c4c 55%, #0a1322 100%) !important;
  color: transparent !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.28), 0 1.5px 3px rgba(0, 0, 0, 0.35) !important;
}

/* Amber Ballpoint Ink for Marked for Review */
.omr-bubble-btn.omr-review-filled {
  border-color: #d97706 !important;
  background: radial-gradient(circle at 40% 36%, #fbbf24 0%, #f59e0b 60%, #b45309 100%) !important;
  color: transparent !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 1.5px 3px rgba(0, 0, 0, 0.25) !important;
}

/* REALISTIC INK DARKENING ANIMATION (Swirl & Expansion from center outwards) */
.omr-bubble-btn.omr-bubble-filling::before {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 44% 40%, #3b82f6 0%, #1d4ed8 28%, #1e3a8a 58%, #0f172a 82%, #020617 100%) !important;
  transform-origin: center center !important;
  animation: omrInkDarken 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

@keyframes omrInkDarken {
  0% {
    transform: scale(0.06) rotate(0deg);
    opacity: 0.65;
    border-radius: 50%;
    filter: blur(0.6px);
  }
  30% {
    transform: scale(0.52) rotate(130deg);
    opacity: 0.92;
    border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
    filter: blur(0.3px);
  }
  70% {
    transform: scale(0.9) rotate(280deg);
    opacity: 0.98;
    border-radius: 49% 51% 52% 48%;
    filter: blur(0px);
  }
  100% {
    transform: scale(1.05) rotate(360deg);
    opacity: 1;
    border-radius: 50%;
  }
}

/* Subtle Ink Pressure Ring on Impact */
.omr-bubble-btn.omr-bubble-filling::after {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(30, 58, 138, 0.5) !important;
  opacity: 0 !important;
  animation: omrInkRipple 0.28s ease-out forwards !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

@keyframes omrInkRipple {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* ==========================================================================
   Exam Hub Typography: Sub-Tabs & Subject Pills (Desktop 21px Marathi Text)
   ========================================================================== */
.hub-subtab-btn .hub-subtab-text.marathi-text,
.hub-subtab-marathi-text {
  font-family: 'Mukta', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
}

.hub-subject-pill.marathi-pill,
.hub-chapter-subject-pill.marathi-pill {
  font-family: 'Mukta', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
}

@media (min-width: 640px) {
  .hub-subtab-btn .hub-subtab-text.marathi-text,
  .hub-subtab-marathi-text {
    font-size: var(--mpsc-font-subtab-mr, 21px) !important;
    line-height: 1.35 !important;
  }
  .hub-subject-pill.marathi-pill,
  .hub-subject-pill.marathi-pill span,
  .hub-chapter-subject-pill.marathi-pill,
  .hub-chapter-subject-pill.marathi-pill span {
    font-size: var(--mpsc-font-pill-mr, 21px) !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 639px) {
  .hub-subtab-btn .hub-subtab-text.marathi-text,
  .hub-subtab-marathi-text {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
  .hub-subject-pill.marathi-pill,
  .hub-subject-pill.marathi-pill span,
  .hub-chapter-subject-pill.marathi-pill,
  .hub-chapter-subject-pill.marathi-pill span {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}


/* ==========================================================================
   DYNAMIC TYPOGRAPHY UTILITY CLASSES (Driven by Admin Panel Sliders)
   ========================================================================== */
.typo-dyn-q-en { font-size: var(--mpsc-font-q-en, 18px) !important; }
.typo-dyn-q-mr { font-size: var(--mpsc-font-q-mr, 21px) !important; }

.typo-dyn-q-sub-en { font-size: var(--mpsc-font-q-sub-en, 15px) !important; }
.typo-dyn-q-sub-mr { font-size: var(--mpsc-font-q-sub-mr, 17px) !important; }

.typo-dyn-q-num-en { font-size: var(--mpsc-font-q-num-en, 14px) !important; }
.typo-dyn-q-num-mr { font-size: var(--mpsc-font-q-num-mr, 15px) !important; }

.typo-dyn-opt-en { font-size: var(--mpsc-font-opt-en, 16px) !important; }
.typo-dyn-opt-mr { font-size: var(--mpsc-font-opt-mr, 18px) !important; }

.typo-dyn-opt-badge-en { font-size: var(--mpsc-font-opt-badge-en, 16px) !important; }
.typo-dyn-opt-badge-mr { font-size: var(--mpsc-font-opt-badge-mr, 18px) !important; }

.typo-dyn-exp-en { font-size: var(--mpsc-font-exp-en, 15px) !important; }
.typo-dyn-exp-mr { font-size: var(--mpsc-font-exp-mr, 18px) !important; }

.typo-dyn-exp-key-en { font-size: var(--mpsc-font-exp-key-en, 14px) !important; }
.typo-dyn-exp-key-mr { font-size: var(--mpsc-font-exp-key-mr, 16px) !important; }

.typo-dyn-exam-title-en { font-size: var(--mpsc-font-exam-title-en, 15px) !important; }
.typo-dyn-exam-title-mr { font-size: var(--mpsc-font-exam-title-mr, 18px) !important; }

.typo-dyn-exam-badge-en { font-size: var(--mpsc-font-exam-badge-en, 12px) !important; }
.typo-dyn-exam-badge-mr { font-size: var(--mpsc-font-exam-badge-mr, 14px) !important; }

.typo-dyn-hub-title-en { font-size: var(--mpsc-font-hub-title-en, 18px) !important; }
.typo-dyn-hub-title-mr { font-size: var(--mpsc-font-hub-title-mr, 20px) !important; }

.typo-dyn-test-title-en { font-size: var(--mpsc-font-test-title-en, 17px) !important; }
.typo-dyn-test-title-mr { font-size: var(--mpsc-font-test-title-mr, 18px) !important; }

.typo-dyn-test-desc-en { font-size: var(--mpsc-font-test-desc-en, 13px) !important; }
.typo-dyn-test-desc-mr { font-size: var(--mpsc-font-test-desc-mr, 15px) !important; }

.typo-dyn-subtab-en { font-size: var(--mpsc-font-subtab-en, 14px) !important; }
.typo-dyn-subtab-mr { font-size: var(--mpsc-font-subtab-mr, 21px) !important; }

.typo-dyn-pill-en { font-size: var(--mpsc-font-pill-en, 13px) !important; }
.typo-dyn-pill-mr { font-size: var(--mpsc-font-pill-mr, 21px) !important; }


/* ============================================================================
   EXAM HUB: 2-COLUMN GRID VS LIST VIEW MODE
   ============================================================================ */
#exam-hub-tests-grid.hub-grid-mode {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 0.875rem !important;
}

@media (min-width: 768px) {
  #exam-hub-tests-grid.hub-grid-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.125rem !important;
  }

  #exam-hub-tests-grid.hub-grid-mode > .modern-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 1.125rem 1.25rem !important;
  }

  #exam-hub-tests-grid.hub-grid-mode > .modern-card > div:first-child {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  #exam-hub-tests-grid.hub-grid-mode > .modern-card h3 {
    flex: 1 1 auto !important;
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.75rem !important;
  }

  #exam-hub-tests-grid.hub-grid-mode > .modern-card > div:first-child > div:last-child {
    margin-top: auto !important;
    padding-top: 0.5rem !important;
    gap: 0.5rem !important;
  }

  #exam-hub-tests-grid.hub-grid-mode > .modern-card > div:last-child {
    margin-top: 1rem !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px dashed rgba(226, 232, 240, 0.9) !important;
  }

  #exam-hub-tests-grid.hub-grid-mode > .modern-card > div:last-child button:first-child {
    flex: 1 1 auto !important;
    width: 100% !important;
    justify-content: center !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  #exam-hub-tests-grid.hub-grid-mode > .modern-card > div:last-child button:not(:first-child) {
    flex: 0 0 auto !important;
  }
}

#exam-hub-tests-grid.hub-grid-mode > div:only-child {
  grid-column: 1 / -1 !important;
}