/* Fonts import: Inter (body, buttons, inputs, nav, labels), General Sans (headings), JetBrains Mono (typing practice) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700,800&display=swap');

@font-face {
  font-family: 'Kruti Dev 010';
  src: url('https://cdn.jsdelivr.net/gh/TGNYC/Kriti-Dev-to-Unicode@master/Kruti%20Dev%20010%20Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Light Mode Colors (default) - Deep Sky Blue Theme */
  --color-background: #e0f2fe;             /* Soft sky blue tinted background */
  --color-background-offset: #bae6fd;      /* Light sky offset */
  --color-surface: #ffffff;                /* Pure white surface */
  --color-surface-container: #f0f9ff;      /* Sky container */
  --color-surface-container-low: #f8fafc;  
  --color-surface-container-lowest: #ffffff;
  --color-surface-variant: #bae6fd;        
  --color-on-background: #0f172a;          
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #334155;      
  --color-outline: #bae6fd;                
  --color-outline-variant: #7dd3fc;
  
  /* Brand accents - Deep Sky Blue & Ocean Blue */
  --color-primary: #0284c7;                /* Deep Sky Blue / Ocean Blue */
  --color-primary-container: #e0f2fe;      /* Light sky container */
  --color-on-primary-container: #0369a1;    /* Deep sky dark text */
  
  /* Accent Secondary - Vibrant Cyan / Sky Accent */
  --color-secondary: #00bfff;              /* Deep Sky Blue Accent */
  --color-secondary-container: #e0f2fe;    /* Sky 100 */
  --color-on-secondary-container: #0284c7; /* Sky 700 */
  
  /* Error - Crimson / Blood Red */
  --color-error: #ef4444;                  /* Red 500 */
  --color-error-container: #fee2e2;        /* Red 100 */
  --color-on-error-container: #b91c1c;     /* Red 700 */
  
  /* Tertiary & Success */
  --color-tertiary: #d97706;               /* Gold / Amber 600 */
  --color-on-tertiary-container: #92400e;  /* Gold 800 */
  --color-success: #10b981;                /* Emerald 500 */
  --color-tertiary-fixed-dim: #10b981;     /* Correct text green */

  /* Stat Cards Gradients - Light Mode (Deep Sky Blue, Emerald, Royal Sky) */
  --card-exams-grad: radial-gradient(circle at 100% 107%, #bae6fd 0%, #38bdf8 30%, #0284c7 65%, #0369a1 100%);
  --card-exams-box1: radial-gradient(circle at 30% 107%, #e0f2fe 0%, #bae6fd 40%, #38bdf8 100%);
  --card-exams-box2: radial-gradient(circle at 30% 107%, #7dd3fc 0%, #0284c7 90%);
  --card-exams-box3: radial-gradient(circle at 30% 107%, #0284c7 0%, #0c4a6e 90%);

  --card-dictation-grad: radial-gradient(circle at 100% 107%, #a7f3d0 0%, #6ee7b7 30%, #059669 65%, #064e3b 100%);
  --card-dictation-box1: radial-gradient(circle at 30% 107%, #ecfdf5 0%, #a7f3d0 40%, #10b981 100%);
  --card-dictation-box2: radial-gradient(circle at 30% 107%, #6ee7b7 0%, #059669 90%);
  --card-dictation-box3: radial-gradient(circle at 30% 107%, #059669 0%, #064e3b 90%);

  --card-plans-grad: radial-gradient(circle at 100% 107%, #bae6fd 0%, #7dd3fc 30%, #0284c7 65%, #0c4a6e 100%);
  --card-plans-box1: radial-gradient(circle at 30% 107%, #f0f9ff 0%, #bae6fd 40%, #0ea5e9 100%);
  --card-plans-box2: radial-gradient(circle at 30% 107%, #7dd3fc 0%, #0284c7 90%);
  --card-plans-box3: radial-gradient(circle at 30% 107%, #0284c7 0%, #0c4a6e 90%);
}

html.dark {
  /* Dark Mode Colors - Deep Sky Blue Accent */
  --color-background: #071328;             /* Deep navy background */
  --color-background-offset: #0f172a;      /* Slate 900 */
  --color-surface: #0f233f;                /* Dark ocean surface */
  --color-surface-container: #0f233f;      
  --color-surface-container-low: #08162d;  
  --color-surface-container-lowest: #050d1e;
  --color-surface-variant: #1e3a5f;        /* Deep sky slate variant */
  --color-on-background: #f0f9ff;          /* Sky 50 text */
  --color-on-surface: #f0f9ff;
  --color-on-surface-variant: #94a3b8;      /* Muted text */
  --color-outline: #1e3a5f;                /* Thin borders */
  --color-outline-variant: #334155;        
  
  /* Brand accents - Deep Sky Blue Dark */
  --color-primary: #38bdf8;                /* Vibrant Sky 400 */
  --color-primary-container: #0c4a6e;      /* Deep Sky Container */
  --color-on-primary-container: #bae6fd;   /* Sky 200 */
  
  /* Accent Secondary - Deep Sky Blue */
  --color-secondary: #00bfff;              /* Deep Sky Blue */
  --color-secondary-container: #0369a1;    /* Sky 700 */
  --color-on-secondary-container: #e0f2fe; /* Sky 100 */
  
  /* Error */
  --color-error: #f87171;                  /* Red 400 */
  --color-error-container: #7f1d1d;        /* Red 950 */
  --color-on-error-container: #fecaca;     /* Red 200 */
  
  /* Tertiary & Success */
  --color-tertiary: #fbbf24;               /* Gold Amber 400 */
  --color-on-tertiary-container: #fef08a;  /* Amber 200 */
  --color-success: #34d399;                /* Emerald 400 */
  --color-tertiary-fixed-dim: #34d399;     /* Correct text green */

  /* Stat Cards Gradients - Dark Mode */
  --card-exams-grad: radial-gradient(circle at 100% 107%, #0369a1 0%, #0284c7 30%, #0f172a 65%, #030712 100%);
  --card-exams-box1: radial-gradient(circle at 30% 107%, #0c4a6e 0%, #0369a1 40%, #38bdf8 100%);
  --card-exams-box2: radial-gradient(circle at 30% 107%, #0c4a6e 0%, #0284c7 90%);
  --card-exams-box3: radial-gradient(circle at 30% 107%, #0f172a 0%, #0c4a6e 90%);

  --card-dictation-grad: radial-gradient(circle at 100% 107%, #064e3b 0%, #022c22 30%, #0f172a 65%, #020617 100%);
  --card-dictation-box1: radial-gradient(circle at 30% 107%, #022c22 0%, #064e3b 40%, #10b981 100%);
  --card-dictation-box2: radial-gradient(circle at 30% 107%, #022c22 0%, #064e3b 90%);
  --card-dictation-box3: radial-gradient(circle at 30% 107%, #0f172a 0%, #022c22 90%);

  --card-plans-grad: radial-gradient(circle at 100% 107%, #0c4a6e 0%, #075985 30%, #0f172a 65%, #020617 100%);
  --card-plans-box1: radial-gradient(circle at 30% 107%, #075985 0%, #0c4a6e 40%, #0ea5e9 100%);
  --card-plans-box2: radial-gradient(circle at 30% 107%, #075985 0%, #0c4a6e 90%);
  --card-plans-box3: radial-gradient(circle at 30% 107%, #0f172a 0%, #075985 90%);
}

html {
  /* Match the dark navbar color so overscroll past the top doesn't show blank white space */
  background-color: #020617;
  overscroll-behavior: none;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-background);
  color: var(--color-on-background);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .font-display-lg {
  font-family: 'General Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.heading-bebas, nav a, #mobile-pill-dock a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* Custom premium typography additions */
button, .btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

input, select, textarea {
  font-family: 'Inter', sans-serif;
  font-weight: 500 !important;
}

label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

p, .body-text {
  line-height: 1.7;
}

.hero-pattern h1, .hero-heading {
  font-family: 'General Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

/* Typing Arena Typography and Animations */
.typing-arena-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  line-height: 2.6rem;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

/* Character highlight states for Inverted Cream theme */
.char-untyped {
  color: var(--color-on-surface-variant);
  opacity: 0.55;
}

.char-correct {
  color: var(--color-success); /* Modern green for correct inputs */
  background-color: rgba(16, 185, 129, 0.1);
  border-radius: 4px;
  padding: 0 1px;
  transition: background-color 0.1s ease;
}

.char-incorrect {
  color: var(--color-error); /* Crimson Red for errors */
  background-color: var(--color-error-container);
  border-radius: 4px;
  text-decoration: line-through;
  padding: 0 1px;
}

.char-current {
  color: #ffffff;
  background-color: var(--color-primary); /* Indigo highlighted block cursor */
  border-radius: 3px;
  animation: cursor-block-blink 1s infinite;
}

@keyframes cursor-block-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Focus Ring for practice inputs */
.typing-input-focus:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Subtle modern grid pattern */
.hero-pattern {
  background-color: var(--color-background);
  background-image: radial-gradient(var(--color-outline) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}

/* Premium Box Shadows replacing thick black borders */
.underground-shadow {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  border: 1px solid var(--color-outline);
}

.underground-shadow-primary {
  box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.12);
  border: 1px solid var(--color-primary);
}

.underground-shadow-error {
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.12);
  border: 1px solid var(--color-error);
}

.underground-card-hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--color-outline) !important;
}

.underground-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  border-color: var(--color-primary) !important;
}

/* Table Row Stripping */
.table-stripped tr:nth-child(even) {
  background-color: var(--color-background-offset);
}

.table-stripped tr {
  border-bottom: 1px solid var(--color-outline);
}

.table-stripped tr:hover {
  background-color: var(--color-surface-container-low);
  transition: background-color 0.2s ease;
}

/* Visual Keyboard Styling - Clean & Modern Style */
.keyboard-key {
  background: #f6f5fc;                     /* Soft lavender-white to stand out on #ffffff card */
  color: var(--color-on-background);
  border: 1px solid var(--color-outline);
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--color-outline);
  transition: all 0.08s ease;
  user-select: none;
}

.keyboard-key.active {
  background: var(--color-primary);
  color: #ffffff !important;
  transform: translateY(2px);
  box-shadow: none;
  border-color: var(--color-primary);
}

.keyboard-key.active span {
  color: #ffffff !important;
}

/* Transition for Navigation Views */
.app-view {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.app-view.active {
  display: block;
  opacity: 1;
}

/* Ticker loop animations */
@keyframes ticker-loop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-content {
  display: inline-block;
  animation: ticker-loop 35s linear infinite;
}

/* Animated slide-down entry for navigation disabled */
.animate-slide-down {
  animation: none !important;
  transform: none !important;
}

/* Admin Sidebar Utilities */
.admin-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
}

.admin-sidebar-btn .material-symbols-outlined {
  width: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.admin-sidebar-btn:hover {
  background-color: var(--color-background-offset);
  color: var(--color-primary);
}

.admin-sidebar-btn.active {
  background-color: var(--color-primary-container) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Navigation Zoom Hover Animation */
#main-navbar a {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.15s ease, border-color 0.15s ease !important;
  display: inline-flex;
  -webkit-tap-highlight-color: transparent;
}
#mobile-guest-links .border-t a {
  justify-content: center !important;
  align-items: center !important;
}
@media (hover: hover) {
  #main-navbar a:hover {
    transform: scale(1.05) translateY(-1px);
  }
}
#mobile-menu a:hover {
  transform: scale(1.02) translateX(4px);
}

/* ─── Cursor Spotlight Effect ─────────────────────────────────────────────── */
#main-navbar {
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: sticky;
  overflow: hidden;
}

#main-navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    rgba(129, 140, 248, 0.18) 0%,
    rgba(99, 102, 241, 0.09) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

#main-navbar.spotlight-active::before {
  opacity: 1;
}

/* Ensure nav children sit above the spotlight layer */
#main-navbar > * {
  position: relative;
  z-index: 1;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-on-surface-variant);
}

/* Transcription Diff Evaluation Highlighting */
.correct-word {
  color: var(--color-success) !important;
  background-color: transparent !important;
  font-weight: bold;
}

.wrong-word {
  color: var(--color-error) !important;
  text-decoration: underline !important;
  font-weight: bold;
  background-color: transparent !important;
}

.substituted-word {
  background-color: var(--color-error-container) !important;
  color: var(--color-on-error-container) !important;
  text-decoration: line-through !important;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 4px;
  display: inline-block;
}

.inserted-word {
  background-color: #fee2e2 !important; /* Light red background */
  color: #b91c1c !important;             /* Dark red text */
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

html.dark .inserted-word {
  background-color: #7f1d1d !important; /* Dark red background */
  color: #fecaca !important;             /* Light red text */
}

.omitted-word {
  background-color: #fef08a !important; /* Yellow background */
  color: #854d0e !important;             /* Dark yellow text */
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

html.dark .omitted-word {
  background-color: #ca8a04 !important; /* Muted dark yellow background */
  color: #fef08a !important;             /* Light yellow text */
}

/* Distraction-Free zone styling when dictation-typing-active class is on body */
body.dictation-typing-active {
  background-color: var(--color-background) !important;
  overflow: hidden !important;
}

body.dictation-typing-active #main-navbar,
body.dictation-typing-active #mobile-menu,
body.dictation-typing-active #background-watermark,
body.dictation-typing-active footer,
body.dictation-typing-active #main-view-container > div:not(#audio-view),
body.dictation-typing-active #audio-view .text-center.mb-8,
body.dictation-typing-active #dictation-list-container,
body.dictation-typing-active #dictation-active-container > div:not(#dictation-typing-stage),
body.dictation-typing-active #dictation-instructions-card {
  display: none !important;
}

body.dictation-typing-active #audio-view section {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  max-width: 100% !important;
  margin: 0 !important;
  width: 100% !important;
}

body.dictation-typing-active #dictation-typing-stage {
  display: block !important;
  width: 96% !important;
  margin: 0 auto !important;
  max-width: 1400px !important;
}

/* Force solid colors and borders */
body.dictation-typing-active #dictation-typing-stage .bg-surface {
  background-color: var(--color-surface) !important;
  border: 2px solid var(--color-outline) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

body.dictation-typing-active #dictation-transcription-input {
  background-color: var(--color-surface-container) !important;
  border: 2px solid var(--color-outline) !important;
  color: var(--color-on-background) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Golden Gradient Profile Name styling for Paid Members */
.golden-gradient-name {
  background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Security Selection Blocker */
body, 
.typing-arena-text, 
#typing-text-display, 
#dictation-typing-stage, 
.app-view, 
.correct-word, 
.wrong-word, 
.substituted-word, 
.inserted-word, 
.omitted-word {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Allow text inputs, textareas, and editables to remain selectable */
input, textarea, [contenteditable="true"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Prevent iOS auto-zoom on form inputs by forcing 16px font size on mobile screens */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ─── Hero Staggered Text Reveal Animation ──────────────────────────────── */

/* Letter-pop keyframe: scale 0.4→1 + translateY 18px→0 + opacity */
@keyframes letter-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(0.4); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.08); }  /* overshoot = spring */
  80%  { transform: translateY(2px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Each letter span in the heading */
.hero-letter {
  display: inline-block;
  opacity: 0;
  animation: letter-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* Spaces between words must stay visible and not collapse */
.hero-letter.is-space {
  display: inline;
  white-space: pre;
}

/* Primary-colored letters (AKHIL STENO prefix) */
.hero-letter.primary {
  color: var(--color-primary);
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* Typing Page Arena and Dictation Input Styling */
#typing-arena-card {
  background-color: #cfccf1 !important;    /* Slightly darker lavender offset */
}
#typing-text-display {
  background-color: #cfccf1 !important;
}
#dictation-transcription-input {
  background-color: #cfccf1 !important;    /* Slightly darker lavender offset */
  color: var(--color-on-background) !important;
}
#typing-arena-card .char-untyped {
  color: #0000dc !important;               /* Royal Blue font color from the second image */
  opacity: 0.65 !important;
}
#typing-arena-card .char-correct {
  color: #065f46 !important;               /* Dark green text */
  background-color: rgba(52, 211, 153, 0.25) !important;
}
#typing-arena-card .char-incorrect {
  color: #991b1b !important;               /* Dark red text */
  background-color: rgba(248, 113, 113, 0.3) !important;
}

/* Footer and Ticker Custom Background Colors */
footer {
  background-color: var(--color-background) !important;   /* Lavender background */
}
footer .ticker-wrap {
  background-color: var(--color-surface) !important;      /* Pure white background */
  border-top: 2px solid var(--color-outline) !important;
  border-bottom: 2px solid var(--color-outline) !important;
}

#background-watermark {
  opacity: 0.04 !important;                               /* Subtle watermark (4%) to improve reading contrast */
}

/* Specific background overrides for typing pages to match website theme */
#practice-view {
  background-color: var(--color-background) !important;
  min-height: calc(100vh - 16rem) !important;
}

/* Candidate Slideshow Marquee Animation Styles */
.candidate-ticker-wrap {
  display: flex;
  overflow: hidden;
  user-select: none;
  width: 100%;
  gap: 1.5rem;
}

@keyframes candidate-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - 1.5rem));
  }
}

.animate-candidate-marquee {
  display: flex;
  flex-shrink: 0;
  gap: 1.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  animation: candidate-marquee 30s linear infinite;
}

.candidate-ticker-wrap:hover .animate-candidate-marquee {
  animation-play-state: paused;
}

/* Full-screen Exam Mode Layout Overrides & Watermark Hiding for Typing Interface */
body.dictation-typing-active #background-watermark,
body.exam-mode-active #background-watermark,
body.typing-interface-active #background-watermark,
body.typing-active #background-watermark,
body:has(#exam-typing-view:not(.hidden)) #background-watermark,
body:has(#typing-active-container:not(.hidden)) #background-watermark,
body:has(#dictation-active-container:not(.hidden)) #background-watermark,
body:has(#dictation-typing-stage:not(.hidden)) #background-watermark {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.exam-mode-active #main-navbar,
body.exam-mode-active #background-watermark,
body.exam-mode-active footer,
body.exam-mode-active #main-footer {
  display: none !important;
}

body.exam-mode-active #practice-view {
  background-color: white !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.exam-mode-active #practice-view > section {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.exam-mode-active #main-view-container {
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.exam-mode-active #typing-active-container {
  margin: 0 !important;
  padding: 0 !important;
}

body.exam-mode-active #typing-exam-layouts {
  margin: 0 !important;
  padding: 0 !important;
}

/* Custom Premium Button (Theme Variable Controlled) */
/* ── Navbar Auth Buttons ── */
.nav-login-btn {
  background: #E60023 !important;
  color: #ffffff !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(230, 0, 35, 0.35) !important;
}

.nav-login-btn:hover {
  background: #ad0018 !important;
  box-shadow: 0 4px 16px rgba(230, 0, 35, 0.5) !important;
  transform: translateY(-1px) !important;
}

.nav-login-btn .material-symbols-outlined,
.nav-login-btn .btn-text {
  color: #ffffff !important;
  font-size: 0.75rem !important;
}

.nav-login-btn .material-symbols-outlined {
  font-size: 16px !important;
}

.nav-signup-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(6px) !important;
}

.nav-signup-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-1px) !important;
}

.nav-signup-btn .material-symbols-outlined,
.nav-signup-btn .btn-text {
  color: #ffffff !important;
  font-size: 0.75rem !important;
}

.nav-signup-btn .material-symbols-outlined {
  font-size: 16px !important;
}

.custom-premium-btn {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-width: 1px !important; /* Enforce thin 1px classic border */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.4s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.custom-premium-btn:hover {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

/* Icon styles */
.custom-premium-btn svg,
.custom-premium-btn .material-symbols-outlined,
.custom-premium-btn .btn-icon {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important; /* Enforce Material symbols font size for consistent heights */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.4s ease-in-out !important;
  margin: 0 !important;
}

.custom-premium-btn:hover svg,
.custom-premium-btn:hover .material-symbols-outlined,
.custom-premium-btn:hover .btn-icon {
  transform: translateX(5px) !important;
}

.custom-premium-btn .btn-text {
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}

/* Danger variant (Log Out) */
.custom-premium-btn.btn-danger {
  color: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

.custom-premium-btn.btn-danger:hover {
  background-color: var(--color-error) !important;
  color: #ffffff !important;
  border-color: var(--color-error) !important;
}

.custom-premium-btn.btn-danger .btn-text,
.custom-premium-btn.btn-danger .material-symbols-outlined {
  color: var(--color-error) !important;
  transition: all 0.4s ease-in-out !important;
}

.custom-premium-btn.btn-danger:hover .btn-text,
.custom-premium-btn.btn-danger:hover .material-symbols-outlined {
  color: #ffffff !important;
}

/* Custom styling for light-mode white borders & text on dark components (navbar & auth card) */
html.light .custom-premium-btn.light-mode-white-btn {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.light .custom-premium-btn.light-mode-white-btn .btn-text,
html.light .custom-premium-btn.light-mode-white-btn .material-symbols-outlined {
  color: #ffffff !important;
  transition: all 0.4s ease-in-out !important;
}

html.light .custom-premium-btn.light-mode-white-btn:hover {
  background-color: #ffffff !important;
  color: #0f172a !important; /* dark slate color matching header/card background */
  border-color: #ffffff !important;
}

html.light .custom-premium-btn.light-mode-white-btn:hover .btn-text,
html.light .custom-premium-btn.light-mode-white-btn:hover .material-symbols-outlined {
  color: #0f172a !important;
}

/* Custom styling for Student Portal Logout Button (red by default, dark blue on hover) */
.custom-premium-btn.student-logout-btn {
  color: #ef4444 !important; /* Default red */
  border-color: #ef4444 !important;
  border-radius: 9999px !important; /* Make it a rounded-full pill button */
}

.custom-premium-btn.student-logout-btn .btn-text,
.custom-premium-btn.student-logout-btn .material-symbols-outlined {
  color: #ef4444 !important;
  transition: all 0.4s ease-in-out !important;
}

.custom-premium-btn.student-logout-btn:hover {
  background-color: #0000dc !important; /* Dark/Royal Blue */
  border-color: #0000dc !important;
  color: #ffffff !important;
}

.custom-premium-btn.student-logout-btn:hover .btn-text,
.custom-premium-btn.student-logout-btn:hover .material-symbols-outlined {
  color: #ffffff !important;
}

/* Premium Locked Test Button Style (For Free Users on Paid Tests) */
.unlock-pro-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important; /* Elegant padding to fit table rows nicely */
  border: none !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #ff6a00, #ee0979, #9b59b6) !important;
  color: #ffffff !important;
  font-size: 11px !important; /* Balanced for table rows */
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(238, 9, 121, 0.45) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.unlock-pro-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px rgba(238, 9, 121, 0.6) !important;
}

.unlock-pro-btn:active {
  transform: translateY(0px) !important;
  box-shadow: 0 3px 14px rgba(238, 9, 121, 0.4) !important;
}

.unlock-pro-btn svg.crown-icon {
  width: 14px !important;
  height: 14px !important;
  fill: #ffd700 !important; /* Premium gold crown icon fill */
  transition: transform 0.2s ease !important;
}

.unlock-pro-btn:hover svg.crown-icon {
  transform: scale(1.1) rotate(5deg) !important;
}

.unlock-pro-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.08) 60%,
    transparent 100%
  );
  transition: left 0s;
  pointer-events: none; /* Make sure it doesn't block click events */
}

.unlock-pro-btn:hover::after {
  animation: shimmer 0.65s ease forwards;
}

@keyframes shimmer {
  0%   { left: -75%; }
  100% { left: 130%; }
}

/* Gold Fill Button Animation (from subscribe-button.md) */
.gold-premium-btn {
  cursor: pointer !important;
  position: relative !important;
  padding: 10px 24px !important;
  font-size: 12px !important; /* text-xs equivalent */
  color: rgb(193, 163, 98) !important;
  border: 2px solid rgb(193, 163, 98) !important;
  border-radius: 34px !important;
  background-color: transparent !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1) !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.gold-premium-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: inherit !important;
  scale: 0 !important;
  transform: scale(0) !important;
  z-index: -1 !important;
  background-color: rgb(193, 163, 98) !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) !important;
}

.gold-premium-btn:hover::before {
  scale: 5 !important;
  transform: scale(5) !important;
}

.gold-premium-btn:hover {
  color: #212121 !important;
  scale: 1.05 !important;
  box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4) !important;
}

.gold-premium-btn:hover .btn-text,
.gold-premium-btn:hover .material-symbols-outlined {
  color: #212121 !important;
}

.gold-premium-btn:active {
  scale: 1 !important;
}

.gold-premium-btn svg,
.gold-premium-btn .material-symbols-outlined,
.gold-premium-btn .btn-icon {
  width: 1.25em !important;
  height: 1.25em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.4s ease-in-out, color 0.4s ease-in-out !important;
  margin: 0 !important;
  color: inherit !important;
}

.gold-premium-btn:hover svg,
.gold-premium-btn:hover .material-symbols-outlined,
.gold-premium-btn:hover .btn-icon {
  transform: translateX(5px) !important;
  color: #212121 !important;
}

.gold-premium-btn .btn-text {
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  transition: color 0.4s ease-in-out !important;
  color: inherit !important;
}

/* Play Button — Paid Tier (from play-button.md) */
.play-btn-paid {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  background: #22c55e !important; /* light shiny green background to match free */
  color: white !important;
  padding: 5px 12px !important;
  padding-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 9999px !important; /* More round shape */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease-in-out !important;
}

.play-btn-paid span {
  display: block !important;
  margin-left: 0.4em !important;
  transition: all 0.3s ease-in-out !important;
  color: white !important;
}

.play-btn-paid .svg-wrapper {
  display: flex !important;
  align-items: center !important;
  transition: transform 0.5s linear !important;
}

.play-btn-paid svg {
  display: block !important;
  transform-origin: center center !important;
  transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out !important;
  fill: rgb(220, 252, 231) !important; /* very light minty/shiny green fill to match free */
  width: 14px !important;
  height: 14px !important;
}

/* Hover states */
.play-btn-paid:hover {
  background: #15803d !important; /* darker green hover background to match free */
}

.play-btn-paid:hover .svg-wrapper {
  transform: scale(1.25) !important;
  transition: 0.5s linear !important;
}

.play-btn-paid:hover svg {
  transform: translateX(1.8em) scale(1.1) !important;
  fill: #fff !important;
}

.play-btn-paid:hover span {
  opacity: 0 !important;
  transition: 0.5s linear !important;
}

/* Click feedback */
.play-btn-paid:active {
  transform: scale(0.95) !important;
}

/* Play Button — Free Tier (Modified with light shiny green and more round shape) */
.play-btn-free {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  background: #22c55e !important; /* light shiny green background */
  color: white !important;
  padding: 5px 12px !important;
  padding-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 9999px !important; /* More round shape */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease-in-out !important;
}

.play-btn-free span {
  display: block !important;
  margin-left: 0.4em !important;
  transition: all 0.3s ease-in-out !important;
  color: white !important;
}

.play-btn-free .svg-wrapper {
  display: flex !important;
  align-items: center !important;
  transition: transform 0.5s linear !important;
}

.play-btn-free svg {
  display: block !important;
  transform-origin: center center !important;
  transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out !important;
  fill: rgb(220, 252, 231) !important; /* very light minty/shiny green fill */
  width: 14px !important;
  height: 14px !important;
}

/* Hover states */
.play-btn-free:hover {
  background: #15803d !important; /* darker green hover background */
}

.play-btn-free:hover .svg-wrapper {
  transform: scale(1.25) !important;
  transition: 0.5s linear !important;
}

.play-btn-free:hover svg {
  transform: translateX(1.8em) scale(1.1) !important;
  fill: #fff !important;
}

.play-btn-free:hover span {
  opacity: 0 !important;
  transition: 0.5s linear !important;
}

/* Click feedback */
.play-btn-free:active {
  transform: scale(0.95) !important;
}



/* Modern Capsule Test Card styling & Animations */
.test-card {
  border-radius: 9999px !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-color: var(--color-background-elevated) !important;
}

@media (max-width: 768px) {
  .test-card {
    border-radius: 1.5rem !important; /* Graceful degradation on mobile */
  }
}

/* Hover effects: Scale, Brightness boost, and Pulse throb */
.test-card:hover {
  transform: translateY(-3px) scale(1.015) !important; /* Scale — hover:scale-102 (adapted for full-width cards) */
  filter: brightness(1.05) !important; /* Brightness boost */
  border-color: var(--color-primary) !important; /* Highlight border with website's brand blue on hover */
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15) !important;
  animation: card-pulse 2s infinite ease-in-out !important; /* Pulse animation */
}

/* Click/Active effect: Bounce (triggers on click and hold) */
.test-card:active {
  animation: card-bounce 0.4s ease-out !important;
}

/* Pulse animation keyframe (repetitive throbbing glow) */
@keyframes card-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
  }
}

/* Bounce animation keyframe (jumping slightly on active/click) */
@keyframes card-bounce {
  0%, 100% {
    transform: translateY(-3px) scale(1.015);
  }
  50% {
    transform: translateY(-8px) scale(1.02);
  }
}

/* Page Loader transitions - glowing green orbiting dots (Horrible Fish) */
.page-loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background);
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  visibility: visible;
}

.page-loader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader {
  --size-loader: 60px;
  --size-orbe: 12px;
  width: var(--size-loader);
  height: var(--size-loader);
  position: relative;
  transform: rotate(45deg);
}

.orbe {
  position: absolute;
  width: 100%;
  height: 100%;
  --delay: calc(var(--index) * 0.1s);
  animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;
  opacity: calc(1 - calc(0.15 * var(--index)));
}

.orbe::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: var(--size-orbe);
  height: var(--size-orbe);
  background-color: var(--color-primary);
  box-shadow: 0px 0px 20px 3px var(--color-primary);
  border-radius: 50%;
}

@keyframes orbit7456 {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Card Redesign capsule row items */
.typing-test-card {
  border-radius: 20px !important;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
  cursor: pointer;
}
.typing-test-card:hover {
  transform: scale(1.015) !important;
}
.typing-test-card .sno-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
  background: #22c55e !important; /* light shiny green background */
  color: white !important;
  padding: 5px 12px !important;
  padding-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 9999px !important; /* More round shape */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease-in-out !important;
}

.play-btn-free span {
  display: block !important;
  margin-left: 0.4em !important;
  transition: all 0.3s ease-in-out !important;
  color: white !important;
}

.play-btn-free .svg-wrapper {
  display: flex !important;
  align-items: center !important;
  transition: transform 0.5s linear !important;
}

.play-btn-free svg {
  display: block !important;
  transform-origin: center center !important;
  transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out !important;
  fill: rgb(220, 252, 231) !important; /* very light minty/shiny green fill */
  width: 14px !important;
  height: 14px !important;
}

/* Hover states */
.play-btn-free:hover {
  background: #15803d !important; /* darker green hover background */
}

.play-btn-free:hover .svg-wrapper {
  transform: scale(1.25) !important;
  transition: 0.5s linear !important;
}

.play-btn-free:hover svg {
  transform: translateX(1.8em) scale(1.1) !important;
  fill: #fff !important;
}

.play-btn-free:hover span {
  opacity: 0 !important;
  transition: 0.5s linear !important;
}

/* Click feedback */
.play-btn-free:active {
  transform: scale(0.95) !important;
}



/* Modern Capsule Test Card styling & Animations */
.test-card {
  border-radius: 9999px !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-color: var(--color-background-elevated) !important;
}

@media (max-width: 768px) {
  .test-card {
    border-radius: 1.5rem !important; /* Graceful degradation on mobile */
  }
}

/* Hover effects: Scale, Brightness boost, and Pulse throb */
.test-card:hover {
  transform: translateY(-3px) scale(1.015) !important; /* Scale — hover:scale-102 (adapted for full-width cards) */
  filter: brightness(1.05) !important; /* Brightness boost */
  border-color: var(--color-primary) !important; /* Highlight border with website's brand blue on hover */
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15) !important;
  animation: card-pulse 2s infinite ease-in-out !important; /* Pulse animation */
}

/* Click/Active effect: Bounce (triggers on click and hold) */
.test-card:active {
  animation: card-bounce 0.4s ease-out !important;
}

/* Pulse animation keyframe (repetitive throbbing glow) */
@keyframes card-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
  }
}

/* Bounce animation keyframe (jumping slightly on active/click) */
@keyframes card-bounce {
  0%, 100% {
    transform: translateY(-3px) scale(1.015);
  }
  50% {
    transform: translateY(-8px) scale(1.02);
  }
}

/* Page Loader transitions - glowing green orbiting dots (Horrible Fish) */
.page-loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background);
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  visibility: visible;
}

.page-loader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader {
  --size-loader: 60px;
  --size-orbe: 12px;
  width: var(--size-loader);
  height: var(--size-loader);
  position: relative;
  transform: rotate(45deg);
}

.orbe {
  position: absolute;
  width: 100%;
  height: 100%;
  --delay: calc(var(--index) * 0.1s);
  animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;
  opacity: calc(1 - calc(0.15 * var(--index)));
}

.orbe::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: var(--size-orbe);
  height: var(--size-orbe);
  background-color: var(--color-primary);
  box-shadow: 0px 0px 20px 3px var(--color-primary);
  border-radius: 50%;
}

@keyframes orbit7456 {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Card Redesign capsule row items */
.typing-test-card {
  border-radius: 20px !important;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
  cursor: pointer;
}
.typing-test-card:hover {
  transform: scale(1.015) !important;
}
.typing-test-card .sno-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.typing-test-card:hover .sno-badge {
  background: linear-gradient(135deg, #eef0ff, #c7d2fe) !important;
  color: #4338ca !important;
}
.dark .typing-test-card:hover .sno-badge {
  background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
  color: #c7d2fe !important;
}

/* Homepage Stat Cards Redesign styles */
.stat-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  min-height: 280px;
  background: #f1f0fe;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 0.6s ease-in-out;
  text-decoration: none;
  color: #ffffff !important;
  cursor: pointer;
}

.stat-card .background {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  transition: opacity 0.6s ease-in-out;
}

.stat-card.exams .background     { background: var(--card-exams-grad); }
.stat-card.dictation .background { background: var(--card-dictation-grad); }
.stat-card.plans .background     { background: var(--card-plans-grad); }

/* ── Card Header ── */
.stat-card .card-header {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  z-index: 5;
  transition: transform 0.4s ease-in-out;
  overflow: hidden;
}

.stat-card .card-header .card-title {
  font-weight: 900;
  font-size: 1.55rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.stat-card:hover .card-header { transform: translateY(-2px); }

/* ── Layer Text (inside animated boxes) ── */
.stat-card .layer-text {
  position: absolute;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  line-height: 1.15;
}

/* box1 = 85 % of card → lots of room */
.stat-card .box1 .layer-text {
  top: 32px;
  left: 28px;
  font-size: 1.35rem;
}

/* box2 = 60 % of card → mid-tier */
.stat-card .box2 .layer-text {
  top: 22px;
  left: 28px;
  font-size: 1.15rem;
}

/* box3 = 42 % of card → tighter but still readable */
.stat-card .box3 .layer-text {
  bottom: 18px;
  left: 20px;
  font-size: 0.95rem;
}

.stat-card .layer-text .layer-sub {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 3px;
  opacity: 0.85;
}

/* ── Box Content wrapper ── */
.stat-card .box-content {
  position: absolute;
  inset: 0;
  color: #ffffff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transition-delay: inherit;
}

.stat-card.scroll-active .box-content {
  opacity: 1;
}

/* ── Logo Circles ── */
.stat-card .logo-row {
  display: flex;
  gap: 10px;
  position: absolute;
  align-items: center;
}

.stat-card .box1 .logo-row {
  top: 30px;
  left: 28px;
}

.stat-card .box2 .logo-row {
  top: 22px;
  left: 28px;
}

.stat-card .box3 .logo-row {
  bottom: 20px;
  left: 20px;
}

.stat-card .logo-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.stat-card .logo-circle img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.stat-card .logo-circle.main-badge {
  width: 48px;
  height: 48px;
  border: 2.5px solid rgba(255, 255, 255, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.stat-card .logo-circle:hover {
  transform: scale(1.12);
}

/* ── Animated Box Layers ── */
.stat-card .box {
  position: absolute;
  background: rgba(255, 255, 255, 0.22);
  border-top: 2px solid rgba(255,255,255,0.65);
  border-right: 1px solid rgba(255,255,255,0.55);
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(0, 0, 0, 0.12) -6px 6px 24px 0px;
  transform-origin: bottom left;
  transition: all 0.8s ease-in-out;
  z-index: 1;
}

.stat-card .box1 { width: 85%; height: 85%; bottom: -85%; left: -85%; }
.stat-card .box2 { width: 60%; height: 60%; bottom: -60%; left: -60%; transition-delay: 0.12s; }
.stat-card .box3 { width: 42%; height: 42%; bottom: -42%; left: -42%; transition-delay: 0.24s; }

.stat-card.exams .box1     { background: var(--card-exams-box1); }
.stat-card.exams .box2     { background: var(--card-exams-box2); }
.stat-card.exams .box3     { background: var(--card-exams-box3); }
.stat-card.dictation .box1 { background: var(--card-dictation-box1); }
.stat-card.dictation .box2 { background: var(--card-dictation-box2); }
.stat-card.dictation .box3 { background: var(--card-dictation-box3); }
.stat-card.plans .box1     { background: var(--card-plans-box1); }
.stat-card.plans .box2     { background: var(--card-plans-box2); }
.stat-card.plans .box3     { background: var(--card-plans-box3); }

.stat-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: rgba(100, 100, 111, 0.3) 0px 14px 40px 0px;
}
.stat-card.scroll-active .box { bottom: -1px; left: -1px; }

.stat-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .stat-card { min-height: 220px; }
  .stat-card .card-header { top: 20px; left: 20px; right: 20px; }
  .stat-card .card-header .card-title { font-size: 1.2rem; }
  .stat-card .logo-circle { width: 34px; height: 34px; }
  .stat-card .logo-circle.main-badge { width: 40px; height: 40px; }
  .stat-card .box1 .layer-text { font-size: 1.1rem; top: 24px; left: 20px; }
  .stat-card .box2 .layer-text { font-size: 0.95rem; top: 16px; left: 20px; }
  .stat-card .box3 .layer-text { font-size: 0.8rem; bottom: 14px; left: 14px; }
  .stat-card .box1 .logo-row { top: 24px; left: 20px; }
  .stat-card .box2 .logo-row { top: 16px; left: 20px; }
  .stat-card .box3 .logo-row { bottom: 14px; left: 14px; }
  .stat-card .logo-row { gap: 8px; }
}

/* ───────────────────────────────────────────────────────── */
/* ── LOADING RESULT ANIMATION (Uiverse unlucky-mouse-21) ─ */
/* ───────────────────────────────────────────────────────── */

.result-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease;
}

body.dark .result-loader-overlay,
.dark .result-loader-overlay {
  background-color: rgba(15, 23, 42, 0.92);
}

.result-loader-overlay.hidden {
  display: none !important;
}

.result-loader {
  --main-size: 2.5em;              /* text is longer than "Loading" */
  --text-color: #2563eb;           /* primary blue */
  --shine-color: #60a5fa66;        /* light blue glow */
  --shadow-color: #93c5fd;         /* soft blue shadow */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
  position: relative;
  font-size: var(--main-size);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-color);
  width: 10em;                     /* widened to fit "LOADING RESULT" */
  height: 1.2em;
  filter: drop-shadow(0 0 0.05em var(--shine-color));
  margin: 0 auto;
  transform: scale(4) !important;      /* Scaled up 4x */
}

.result-loader.hidden {
  display: none !important;
}

.result-loader .text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.result-loader .text:nth-child(1) {
  clip-path: polygon(0% 0%, 11.11% 0%, 11.11% 100%, 0% 100%);
  font-size: calc(var(--main-size) / 20);
  margin-left: -2.9em;
  opacity: 0.6;
}

.result-loader .text:nth-child(2) {
  clip-path: polygon(11.11% 0%, 22.22% 0%, 22.22% 100%, 11.11% 100%);
  font-size: calc(var(--main-size) / 16);
  margin-left: -1.35em;
  opacity: 0.7;
}

.result-loader .text:nth-child(3) {
  clip-path: polygon(22.22% 0%, 33.33% 0%, 33.33% 100%, 22.22% 100%);
  font-size: calc(var(--main-size) / 13);
  margin-left: -0.45em;
  opacity: 0.8;
}

.result-loader .text:nth-child(4) {
  clip-path: polygon(33.33% 0%, 44.44% 0%, 44.44% 100%, 33.33% 100%);
  font-size: calc(var(--main-size) / 11);
  margin-left: -0.07em;
  opacity: 0.9;
}

.result-loader .text:nth-child(5) {
  clip-path: polygon(44.44% 0%, 55.55% 0%, 55.55% 100%, 44.44% 100%);
  font-size: calc(var(--main-size) / 10);
  margin-left: 0em;
  opacity: 1;
}

.result-loader .text:nth-child(6) {
  clip-path: polygon(55.55% 0%, 66.66% 0%, 66.66% 100%, 55.55% 100%);
  font-size: calc(var(--main-size) / 11);
  margin-left: 0.07em;
  opacity: 0.9;
}

.result-loader .text:nth-child(7) {
  clip-path: polygon(66.66% 0%, 77.77% 0%, 77.77% 100%, 66.66% 100%);
  font-size: calc(var(--main-size) / 13);
  margin-left: 0.45em;
  opacity: 0.8;
}

.result-loader .text:nth-child(8) {
  clip-path: polygon(77.77% 0%, 88.88% 0%, 88.88% 100%, 77.77% 100%);
  font-size: calc(var(--main-size) / 16);
  margin-left: 1.35em;
  opacity: 0.7;
}

.result-loader .text:nth-child(9) {
  clip-path: polygon(88.88% 0%, 100% 0%, 100% 100%, 88.88% 100%);
  font-size: calc(var(--main-size) / 20);
  margin-left: 2.9em;
  opacity: 0.6;
}

.result-loader .text span {
  animation:
    scrolling 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite,
    shadow 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite;
}

.result-loader .text:nth-child(1) span {
  background: linear-gradient(to right, var(--text-color) 4%, var(--shadow-color) 7%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .text:nth-child(2) span {
  background: linear-gradient(to right, var(--text-color) 9%, var(--shadow-color) 13%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .text:nth-child(3) span {
  background: linear-gradient(to right, var(--text-color) 15%, var(--shadow-color) 18%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .text:nth-child(4) span {
  background: linear-gradient(to right, var(--text-color) 20%, var(--shadow-color) 23%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .text:nth-child(6) span {
  background: linear-gradient(to right, var(--shadow-color) 29%, var(--text-color) 32%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .text:nth-child(7) span {
  background: linear-gradient(to right, var(--shadow-color) 34%, var(--text-color) 37%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .text:nth-child(8) span {
  background: linear-gradient(to right, var(--shadow-color) 39%, var(--text-color) 42%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .text:nth-child(9) span {
  background: linear-gradient(to right, var(--shadow-color) 45%, var(--text-color) 48%);
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

.result-loader .line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 0.06em;
  width: calc(var(--main-size) / 2);
  margin-top: 0.9em;
  border-radius: 0.05em;
  background-color: transparent;
}

.loader .line::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--text-color);
  opacity: 0.3;
}

.loader .line::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--text-color);
  border-radius: 0.05em;
  transform: translateX(-90%);
  animation: wobble 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;
}

@keyframes wobble {
  0% { transform: translateX(-90%); }
  50% { transform: translateX(90%); }
  100% { transform: translateX(-90%); }
}

@keyframes scrolling {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes shadow {
  0% { background-position: -98% 0; }
  100% { background-position: 102% 0; }
}

@media (max-width: 1024px) {
  .result-loader {
    transform: scale(2.8) !important;
  }
}

@media (max-width: 640px) {
  .result-loader {
    transform: scale(1.8) !important;
  }
}

@media (max-width: 420px) {
  .result-loader {
    transform: scale(1.3) !important;
  }
}

/* ==========================================================================
   AKHIL STENO — Left Sidebar Implementation & Drawer Styles
   ========================================================================== */
:root {
  --sb-bg: #032b45;
  --sb-bg-elevated: #06456d;
  --sb-text: #f8fafc;
  --sb-text-muted: #7dd3fc;
  --sb-accent: #00bfff;
  --sb-border: rgba(0, 191, 255, 0.22);
  --sb-shadow: 4px 0 24px rgba(2, 132, 199, 0.35);
  --sb-width: 280px;
}

html.dark {
  --sb-bg: #021a2e;
  --sb-bg-elevated: #042a4a;
  --sb-text: #f0f9ff;
  --sb-text-muted: #38bdf8;
  --sb-accent: #38bdf8;
  --sb-border: rgba(56, 189, 248, 0.25);
  --sb-shadow: 2px 0 16px rgba(0, 0, 0, 0.35);
}

.sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f1e6;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 18px;
}
.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: scale(1.05);
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 998;
}
.sidebar-overlay.active,
.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1023px) {
  body.sidebar-open,
  html.sidebar-open {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: pan-y !important;
    overscroll-behavior: none !important;
  }
  /* Ensure sidebar links are always tappable on mobile */
  .sidebar.open {
    touch-action: manipulation !important;
  }
  .sidebar.open a,
  .sidebar.open button {
    touch-action: manipulation !important;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sb-width);
  background: var(--sb-bg);
  color: var(--sb-text);
  border-right: 1px solid var(--sb-border);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: var(--sb-shadow);
}
.sidebar.open {
  transform: translateX(0);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--sb-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
}
.sidebar-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(79, 70, 229, 0.5);
  object-fit: cover;
}
.sidebar-brand strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sb-text);
}
.sidebar-brand span {
  font-size: 11px;
  color: var(--sb-text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sidebar-close-btn {
  margin-left: auto;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  color: var(--color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.sidebar-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-error);
  border-color: var(--color-error);
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
}
.sidebar-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sb-bg-elevated);
  border: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.sidebar-user-info small {
  display: block;
  font-size: 11px;
  color: var(--sb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.sidebar-user-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--sb-text);
  line-height: 1.2;
}

.sidebar-auth-box {
  display: flex;
  gap: 10px;
  padding: 4px 18px 16px;
}
.sidebar-auth-btn {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.sidebar-auth-btn.login {
  background: #E60023;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(230, 0, 35, 0.35);
}
.sidebar-auth-btn.login:hover {
  background: #ad0018;
  box-shadow: 0 6px 16px rgba(230, 0, 35, 0.5);
  transform: translateY(-1px);
}
.sidebar-auth-btn.signup {
  background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.sidebar-auth-btn.signup:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.sidebar-auth-btn.logout {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.sidebar-auth-btn.logout:hover {
  background: rgba(239, 68, 68, 0.25);
}

.sidebar-menu-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sb-text-muted);
  padding: 16px 18px 8px;
}

.sidebar-main-menu {
  list-style: none;
  margin: 0;
  padding: 0 10px;
}
.sidebar-main-menu li {
  margin-bottom: 2px;
}
.sidebar-main-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sb-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  text-transform: capitalize;
}
.sidebar-main-menu a:hover {
  background: var(--sb-bg-elevated);
  color: var(--sb-text);
}
.sidebar-main-menu a.active {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.28) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
  color: #ffffff !important;
  border-left: 4px solid #6366f1 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
  font-weight: 800 !important;
}
.sidebar-main-menu a.active .sb-icon {
  background: #4f46e5 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5) !important;
}

.sb-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sidebar-main-menu a:hover .sb-icon {
  transform: scale(1.1);
}
.sb-icon.blue { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
.sb-icon.purple { background: rgba(168, 85, 247, 0.16); color: #c084fc; }
.sb-icon.teal { background: rgba(20, 184, 166, 0.16); color: #2dd4bf; }
.sb-icon.amber { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.sb-icon.green { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.sb-icon.pink { background: rgba(236, 72, 153, 0.16); color: #f472b6; }
.sb-icon.orange { background: rgba(249, 115, 22, 0.16); color: #fb923c; }

.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-top: auto;
  border-top: 1px solid var(--sb-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-text-muted);
}
.sidebar-theme-toggle .switch {
  font-size: 12px;
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

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

.sidebar-theme-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 20px;
}

.sidebar-theme-toggle .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  border-radius: 50%;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.sidebar-theme-toggle .sun svg {
  position: absolute;
  top: 4px;
  left: 24px;
  z-index: 1;
  width: 14px;
  height: 14px;
}

.sidebar-theme-toggle .moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 14px;
  height: 14px;
}

.sidebar-theme-toggle .sun svg {
  animation: rotate 15s linear infinite;
}

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

.sidebar-theme-toggle .moon svg {
  animation: tilt 5s linear infinite;
}

@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.sidebar-theme-toggle .input:checked + .slider {
  background-color: #183153;
}

.sidebar-theme-toggle .input:focus + .slider {
  box-shadow: 0 0 1px #183153;
}

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

.sidebar-footer-credit {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--sb-text-muted);
  padding: 10px 0 16px;
  opacity: 0.8;
}

/* Enable smooth mouse sliding & custom scrollbar for sidebar */
.sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.sidebar::-webkit-scrollbar {
  width: 5px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sidebar-theme-toggle {
  display: flex !important;
}

/* Keep auth buttons box visible in sidebar */
.sidebar-auth-box {
  display: flex !important;
  padding-top: 16px !important;
}

/* Hide top user avatar card and bottom Quick Access section from sidebar */
.sidebar-user-card,
.sidebar-menu-title:nth-of-type(2),
.sidebar-main-menu:nth-of-type(2) {
  display: none !important;
}

/* Remove top navigation links from header as sidebar now contains them */
#nav-links-guest,
#nav-links-logged-in {
  display: none !important;
}

/* Ensure top navigation bar has square flush corners and Deep Sky Blue theme */
#main-navbar,
nav.top-navbar-deep-sky {
  border-radius: 0 !important;
  background: linear-gradient(135deg, #021a2e 0%, #032b45 45%, #0284c7 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.3) !important;
}

html.dark #main-navbar,
html.dark nav.top-navbar-deep-sky {
  background: linear-gradient(135deg, #011120 0%, #021e36 45%, #0369a1 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

/* Remove bottom border line on hero section and header vertical divider */
.hero-pattern {
  border-bottom: none !important;
}

#guest-header-row > div:nth-child(2) > div.w-\[1px\],
#student-header-row > div:nth-child(2) > div.w-\[1px\] {
  display: none !important;
}

/* Remove duplicate right-side mobile hamburger menu button */
#mobile-hamburger-btn {
  display: none !important;
}

/* Ensure 3-lines button on the left of logo is visible on mobile */
.sidebar-toggle-btn {
  display: inline-flex !important;
}

/* Persistent Fixed Sidebar on Desktop Screens (min-width: 1024px) */
@media (min-width: 1024px) {
  .sidebar {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    height: calc(100vh - 64px) !important;
    width: 270px !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid var(--sb-border) !important;
    transform: translateX(0) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25) !important;
    z-index: 40 !important;
    background-color: var(--sb-bg) !important;
  }
  .sidebar-brand,
  .sidebar-overlay,
  .sidebar-close-btn,
  .sidebar-toggle-btn {
    display: none !important;
  }
  
  #main-navbar {
    position: sticky !important;
    top: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    z-index: 50 !important;
    border-radius: 0 !important;
  }

  #main-view-container,
  main,
  footer {
    margin-left: 270px !important;
    width: calc(100% - 270px) !important;
  }

  .app-view {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    z-index: 100000 !important;
  }
  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
  }
  body.sidebar-open #mobile-bottom-nav-container,
  html.sidebar-open #mobile-bottom-nav-container {
    filter: blur(6px) brightness(0.4) !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    transition: filter 0.3s ease, opacity 0.3s ease !important;
  }
  #main-view-container,
  main,
  .app-view,
  footer {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ====================================================================
   Active Test Interface: Hide Sidebar & Expand Main Container to 100% Width
   ==================================================================== */
body.in-active-test .sidebar,
body.in-active-test .sidebar-overlay,
body.in-active-test .sidebar-toggle-btn,
body.exam-mode-active .sidebar,
body.exam-mode-active .sidebar-overlay,
body.exam-mode-active .sidebar-toggle-btn {
  display: none !important;
}

body.in-active-test #main-navbar,
body.exam-mode-active #main-navbar {
  margin-left: 0 !important;
  width: 100% !important;
}

body.in-active-test #main-view-container,
body.in-active-test main,
body.in-active-test .app-view,
body.in-active-test footer,
body.exam-mode-active #main-view-container,
body.exam-mode-active main,
body.exam-mode-active .app-view,
body.exam-mode-active footer {
  margin-left: 0 !important;
  width: 100% !important;
}


/* ====================================================================
   Expanded Desktop Content Layout: Fill Left Gap Next to Sidebar
   ==================================================================== */
@media (min-width: 1024px) {

  /* === PAGES WITH #main-view-container (Home, Dictation, Typing, Plans) === */
  #main-view-container {
    margin-left: 270px !important;
    width: calc(100% - 270px) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #main-view-container .app-view {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Kill ALL padding on every section/div inside #main-view-container */
  #main-view-container section,
  #main-view-container .hero-pattern,
  #main-view-container .app-view section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Kill ALL max-width + auto centering on ANY element inside #main-view-container */
  #main-view-container [class*="max-w-container"],
  #main-view-container section[class*="max-w-container"],
  #main-view-container div[class*="max-w-container"],
  #main-view-container .max-w-container-max {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Kill mx-auto centering on any element inside #main-view-container */
  #main-view-container section.mx-auto,
  #main-view-container div.mx-auto,
  #main-view-container [class*="mx-auto"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* === PAGES WITHOUT #main-view-container (All Exams, Blog, Recruitments, About, Legal) === */
  main:not(#main-view-container) {
    margin-left: 270px !important;
    width: calc(100% - 270px) !important;
    box-sizing: border-box !important;
  }

  /* Hero Pattern Grid: 2 columns on desktop filling full width */
  .hero-pattern .max-w-container-max {
    display: grid !important;
    grid-template-columns: 1.25fr 0.95fr !important;
    gap: 2.5rem !important;
    align-items: center !important;
  }

  /* Keep right auth card container clean and prevent card clipping */
  #hero-auth-card-container {
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    margin-left: auto !important;
  }

  #auth-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero-paragraph,
  .hero-pattern p {
    max-width: 100% !important;
  }
}


/* Disable Background Watermark Logo Globally */
#background-watermark,
.bg-watermark,
div[id="background-watermark"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Mobile Logged-in Navigation & Dark Gradient Backdrop Fixes */
@media (max-width: 1023px) {
  #student-badge-container {
    display: none !important;
  }

  #mobile-bottom-nav-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 99999 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 1.75rem !important;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
    background: linear-gradient(to bottom, rgba(226, 224, 248, 0) 0%, rgba(226, 224, 248, 0.85) 30%, #e2e0f8 75%, #e2e0f8 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  html.dark #mobile-bottom-nav-container {
    background: linear-gradient(to bottom, rgba(11, 15, 25, 0) 0%, rgba(11, 15, 25, 0.85) 30%, #0b0f19 75%, #0b0f19 100%) !important;
  }

  #mobile-bottom-nav-container.hidden {
    display: none !important;
  }

  #mobile-bottom-nav-container > * {
    pointer-events: auto !important;
  }

  #mobile-pill-dock {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(99, 102, 241, 0.25) !important;
  }

  #mobile-theme-toggle {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  }
}

@media (min-width: 1024px) {
  #mobile-bottom-nav-container {
    display: none !important;
  }
}

/* Sidebar Dropdown Styling */
.sidebar-dropdown {
  position: relative;
}

.sidebar-dropdown-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.sidebar-dropdown-toggle .sb-arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.3s ease;
  color: var(--sb-text-muted);
}

.sidebar-dropdown.active .sidebar-dropdown-toggle .sb-arrow {
  transform: rotate(180deg);
}

.sidebar-submenu {
  display: none;
  list-style: none;
  padding-left: 20px;
  margin: 4px 0 8px 0;
  border-left: 2px solid var(--color-outline-variant);
}

.sidebar-dropdown.active .sidebar-submenu {
  display: block;
}

.sidebar-submenu li {
  margin-bottom: 2px;
}

.sidebar-submenu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebar-submenu a:hover {
  background-color: var(--color-primary-container);
  color: var(--color-primary);
}

.sidebar-submenu a.active {
  background-color: var(--color-primary-container) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* ── Popular Features Card Grid ── */
.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  width: 100%;
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 8px 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
  border-color: #C7D2FE;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.feature-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.feature-card:hover .feature-icon-box {
  transform: scale(1.08);
}

.feature-label {
  font-size: 12px;
  font-weight: 700;
  color: #1F2937;
  white-space: nowrap;
  letter-spacing: 0.1px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-arrow {
  font-size: 16px !important;
  color: #9CA3AF;
  font-weight: 500;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.feature-card:hover .feature-arrow {
  color: #6366F1;
  transform: translateX(2px);
}

/* Dark Mode Feature Cards */
.dark .feature-card {
  background: rgba(30, 27, 75, 0.35);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .feature-card:hover {
  border-color: rgba(165, 180, 252, 0.35);
  background: rgba(49, 46, 129, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.dark .feature-label {
  color: #E5E7EB;
}

.dark .feature-arrow {
  color: rgba(255, 255, 255, 0.35);
}

.dark .feature-card:hover .feature-arrow {
  color: #A5B4FC;
}

/* Tablet: 3 columns */
@media (max-width: 900px) {
  .feature-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
  .feature-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .feature-card {
    padding: 7px 8px;
    gap: 6px;
    border-radius: 12px;
  }
  .feature-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .feature-icon-box .material-symbols-outlined {
    font-size: 18px !important;
  }
  .feature-label {
    font-size: 11px;
  }
  .feature-arrow {
    font-size: 14px !important;
  }
}

/* Animated Folder Style PDF Buttons — Professional Light Theme */
.doc-buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

.Documents-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 220px;
  height: 48px;
  border-radius: 16px;
  padding: 0px 16px;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.folderContainer {
  width: 32px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
}

.fileBack {
  z-index: 1;
  width: 80%;
  height: auto;
}

.filePage {
  width: 50%;
  height: auto;
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-out;
}

.fileFront {
  width: 85%;
  height: auto;
  position: absolute;
  z-index: 3;
  opacity: 0.95;
  transform-origin: bottom;
  transition: all 0.3s ease-out;
}

.Documents-btn .text {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.Documents-btn:hover .filePage {
  transform: translateY(-5px);
}

.Documents-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.Documents-btn:active {
  transform: scale(0.98);
}

.Documents-btn:hover .fileFront {
  transform: rotateX(28deg);
}

/* Light Theme Color Schemes */
.btn1 {
  background-color: #EEF2FF;
  border: 1px solid #C7D2FE;
}
.btn1 .text {
  color: #1E1B4B;
}
.btn1:hover {
  background-color: #E0E7FF;
  border-color: #A5B4FC;
}

.btn2 {
  background-color: #F5F3FF;
  border: 1px solid #DDD6FE;
}
.btn2 .text {
  color: #2E1065;
}
.btn2:hover {
  background-color: #EDE9FE;
  border-color: #C4B5FD;
}

.btn3 {
  background-color: #ECFDF5;
  border: 1px solid #A7F3D0;
}
.btn3 .text {
  color: #064E3B;
}
.btn3:hover {
  background-color: #D1FAE5;
  border-color: #6EE7B7;
}

/* Dark Mode Overrides */
.dark .btn1 {
  background-color: rgba(30, 27, 75, 0.5);
  border: 1px solid rgba(199, 210, 254, 0.25);
}
.dark .btn1 .text {
  color: #E0E7FF;
}
.dark .btn1:hover {
  background-color: rgba(49, 46, 129, 0.7);
  border-color: rgba(165, 180, 252, 0.4);
}

.dark .btn2 {
  background-color: rgba(46, 16, 101, 0.5);
  border: 1px solid rgba(221, 214, 254, 0.25);
}
.dark .btn2 .text {
  color: #EDE9FE;
}
.dark .btn2:hover {
  background-color: rgba(76, 29, 149, 0.7);
  border-color: rgba(196, 181, 253, 0.4);
}

.dark .btn3 {
  background-color: rgba(6, 78, 59, 0.5);
  border: 1px solid rgba(167, 243, 208, 0.25);
}
.dark .btn3 .text {
  color: #D1FAE5;
}
.dark .btn3:hover {
  background-color: rgba(6, 95, 70, 0.7);
  border-color: rgba(110, 231, 183, 0.4);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .doc-buttons-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .Documents-btn {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0px 14px;
    border-radius: 14px;
    justify-content: flex-start;
  }
  .Documents-btn .text {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Navigation Bar Theme Toggle Hidden */
#theme-toggle,
#theme-toggle-student,
#mobile-header-theme-toggle,
#mobile-theme-toggle {
  display: none !important;
}

/* Profile Circle Styling in Navigation Bar */
.nav-profile-circle {
  background: linear-gradient(135deg, #be185d 0%, #db2777 50%, #e11d48 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(219, 39, 119, 0.45);
  cursor: default !important;
  user-select: none;
  pointer-events: none;
}

/* Toast Notification Redesign Styles & Animations */
#toast-container {
  pointer-events: none;
  z-index: 9999;
}

.toast-item {
  pointer-events: auto;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-item.toast-hiding {
  animation: toastSlideOut 0.25s ease-in forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

/* Mobile Guest LOG IN Button - Strictly visible only on mobile screens (<768px) */
.mobile-guest-login-btn {
  display: flex !important;
}

@media (min-width: 768px) {
  .mobile-guest-login-btn {
    display: none !important;
  }
}

/* ====================================================================
   Annapurna SIL WebFont Definition & Typography Rules
   ==================================================================== */
@font-face {
  font-family: 'Annapurna SIL';
  src: url('https://s.keyman.com/font/deploy/AnnapurnaSIL-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Global Devanagari Input Enforcer */
textarea.hindi-typing-box,
textarea#transcribeArea,
textarea#examTypingArea,
textarea#userInput,
textarea#dictation-input,
textarea#exam-test-form-content-text,
.keymanweb-input,
.stenoshala-typing-area {
  font-family: 'Annapurna SIL', 'Mangal', sans-serif !important;
  font-size: 24px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  white-space: pre-wrap;
  word-break: keep-all;
}