@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);
.m_b37d9ac7 {
  width: calc(100% - var(--mantine-spacing-md) * 2);
  position: fixed;
  z-index: var(--notifications-z-index);
  max-width: var(--notifications-container-width);
}

  .m_b37d9ac7:where([data-position='top-center']) {
    top: var(--mantine-spacing-md);
    left: 50%;
    transform: translateX(-50%);
  }

  .m_b37d9ac7:where([data-position='top-left']) {
    top: var(--mantine-spacing-md);
    left: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='top-right']) {
    top: var(--mantine-spacing-md);
    right: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='bottom-center']) {
    bottom: var(--mantine-spacing-md);
    left: 50%;
    transform: translateX(-50%);
  }

  .m_b37d9ac7:where([data-position='bottom-left']) {
    bottom: var(--mantine-spacing-md);
    left: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='bottom-right']) {
    bottom: var(--mantine-spacing-md);
    right: var(--mantine-spacing-md);
  }

.m_5ed0edd0 + .m_5ed0edd0 {
    margin-top: var(--mantine-spacing-md);
  }


/* E-ink Kindle Theme Styles for Test Mode */

/* Base e-ink theme variables */
html[data-theme="eink"] {
  --eink-bg: #f8f8f8;
  --eink-text: #272727;
  --eink-text-light: #4A4A4A;
  --eink-border: #676767;
  --eink-shadow: #8e8e8e;
  --eink-shadow-dark: #999999;
  --eink-gray-light: #E5E5E5;
  --eink-gray-medium: #B0B0B0;
  --eink-gray-dark: #666666;
}

/* Global grayscale filter and base styling */
html[data-theme="eink"] {
  filter: grayscale(100%) !important;
  font-family: 'Fira Code', monospace !important;
}

html[data-theme="eink"] * {
  font-family: 'Fira Code', monospace !important;
}

/* Override filter for elements that need special treatment */
html[data-theme="eink"] img,
html[data-theme="eink"] svg,
html[data-theme="eink"] canvas {
  filter: grayscale(100%) contrast(1.1) !important;
}

/* Base background and text colors */
html[data-theme="eink"] {
  background-color: var(--eink-bg) !important;
  color: var(--eink-text) !important;
}

html[data-theme="eink"] body {
  background-color: var(--eink-bg) !important;
  color: var(--eink-text) !important;
}

/* Question container styling - no box, vertically and horizontally centered */
.eink-test-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--eink-bg);
  color: var(--eink-text);
  position: relative;
}

.eink-test-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Centered header above question */
.eink-test-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  align-self: center;
}

/* Fixed close button in top right */
.eink-close-fixed {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--eink-text);
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
  line-height: 1;
  z-index: 10;
  width: auto;
  height: auto;
}

.eink-close-fixed:hover {
  opacity: 0.7;
}

/* Pixelation effects for retro look */
html[data-theme="eink"] button,
html[data-theme="eink"] img,
html[data-theme="eink"] svg {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/* Reading Comprehension passage */
.eink-rc-passage {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 2rem;
  padding: 1.5rem;
  font-weight: 400;
  color: var(--eink-text);
  text-align: left;
  font-family: 'Fira Code', monospace !important;
  max-width: 1050px;
  letter-spacing: 0.01em;
  background-color: var(--eink-gray-light);
  border: 1px solid var(--eink-border);
  border-radius: 4px;
  white-space: pre-wrap;
}

/* Question text styling */
.eink-question {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 2rem;
  font-weight: 400;
  color: var(--eink-text);
  text-align: left;
  font-family: 'Fira Code', monospace !important;
  max-width: 1050px;
  letter-spacing: 0.01em;
}

.eink-question * {
  font-family: 'Fira Code', monospace !important;
  font-size: 15px;
}

/* Answer choices as checkbox lines */
.eink-choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-bottom: 0;
  width: 100%;
  align-items: flex-start;
}

.eink-choice-line {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0;
  cursor: pointer;
  font-family: 'Fira Code', monospace !important;
  font-size: 15px;
  color: var(--eink-text);
  line-height: 1.6;
  background-color: transparent;
  font-weight: 400;
  letter-spacing: 0.01em;
  width: 100%;
}

.eink-choice-line * {
  font-family: 'Fira Code', monospace !important;
  font-size: 15px;
}

.eink-choice-line:hover {
  background-color: var(--eink-gray-light);
}

/* Square checkbox */
.eink-square-checkbox {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--eink-text);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: transparent;
  overflow: hidden;
}

/* Scribble SVG with brush animation - top to bottom */
.eink-scribble {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: brushStroke 0.6s ease-out;
}

@keyframes brushStroke {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Check SVG with same animation as scribble */
.eink-check {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: brushStroke 0.6s ease-out;
}

.eink-choice-text {
  flex: 1;
  font-family: 'Fira Code', monospace !important;
  font-size: 15px;
}

.eink-choice-line.correct {
  background-color: var(--eink-gray-light);
}

.eink-choice-line.incorrect {
  opacity: 0.5;
}

/* Submit button */
.eink-submit-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  width: 100%;
  max-width: 1050px;
}

.eink-submit-button {
  background-color: transparent;
  color: var(--eink-text);
  border: 1.5px solid var(--eink-text);
  border-radius: 4px !important;
  padding: 0.5rem 1.5rem;
  font-family: 'Fira Code', monospace !important;
  font-size: 14px;
  font-weight: 400 !important;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.eink-submit-button:hover:not(:disabled) {
  background-color: var(--eink-gray-light);
}

.eink-submit-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--eink-text-light);
  border-color: var(--eink-text-light);
}

/* Grid for multi-blank questions */
.eink-blanks-grid {
  display: grid;
  gap: 2rem;
  width: 100%;
  max-width: 1050px;
  margin-bottom: 2rem;
}

/* 2 blanks: 50% each */
.eink-blanks-2 {
  grid-template-columns: 1fr 1fr;
}

/* 3 blanks: 33.33% each */
.eink-blanks-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Column for each blank */
.eink-blank-column {
  display: flex;
  flex-direction: column;
}

/* Blank label for multi-blank questions */
.eink-blank-label {
  font-family: 'Fira Code', monospace !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--eink-text);
  margin-bottom: 0.75rem;
  text-align: left;
}

/* Sentence equivalence note */
.eink-sentence-equiv-note {
  font-family: 'Fira Code', monospace !important;
  font-size: 14px;
  color: var(--eink-text-light);
  font-style: italic;
  margin-bottom: 1rem;
  text-align: center;
  max-width: 1050px;
}

/* Question history */
.eink-question-history {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--eink-border);
  text-align: center;
  width: 100%;
  max-width: 1050px;
  font-family: 'Fira Code', monospace !important;
  font-size: 14px;
  color: var(--eink-text-light);
  font-style: italic;
}

/* Feedback messages */
.eink-feedback-container {
  margin-top: 1.5rem;
  text-align: center;
  width: 100%;
  max-width: 1050px;
}

.eink-feedback-message {
  font-family: 'Fira Code', monospace !important;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--eink-text);
  letter-spacing: 0.01em;
}

.eink-time {
  font-family: 'Fira Code', monospace !important;
  font-size: 14px;
  color: var(--eink-text);
  letter-spacing: 0.01em;
}

/* XP inline display with ascend animation */
.eink-xp-inline {
  font-family: 'Fira Code', monospace !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--eink-text);
  margin-left: 0.75rem;
  display: inline-block;
  animation: ascend 0.6s ease-out;
}

@keyframes ascend {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header/title */
.eink-header {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--eink-text);
  font-weight: 500;
  font-family: 'Fira Code', monospace !important;
}

/* Combined timer display */
.eink-timer-combined {
  font-size: 15px;
  font-weight: 400;
  color: var(--eink-text);
  font-family: 'Fira Code', monospace !important;
  letter-spacing: 0.01em;
}

/* Text elements */
html[data-theme="eink"] h1,
html[data-theme="eink"] h2,
html[data-theme="eink"] h3,
html[data-theme="eink"] h4,
html[data-theme="eink"] h5,
html[data-theme="eink"] h6 {
  font-family: 'Fira Code', monospace !important;
  font-weight: 500 !important;
  color: var(--eink-text) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
}

html[data-theme="eink"] p,
html[data-theme="eink"] span,
html[data-theme="eink"] div,
html[data-theme="eink"] .mantine-Text-root {
  font-family: 'Fira Code', monospace !important;
  color: var(--eink-text) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* Text shadow for depth */
.eink-question,
.eink-header {
  text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.1);
}

/* Ensure close button never gets affected by any rules */
button.eink-close-fixed,
html[data-theme="eink"] button.eink-close-fixed,
html[data-theme="eink"] .eink-close-fixed {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  min-height: auto !important;
}

/* Badges and chips */
html[data-theme="eink"] .mantine-Badge-root {
  background-color: var(--eink-gray-light) !important;
  color: var(--eink-text) !important;
  border: none !important;
  font-family: 'Fira Code', monospace !important;
  box-shadow: none !important;
}

/* Enhanced contrast for cards */
html[data-theme="eink"] .mantine-Card-root,
html[data-theme="eink"] .eink-test-container {
  filter: grayscale(100%) contrast(1.15) !important;
}

/* Overall brightness adjustment */
html[data-theme="eink"] {
  filter: grayscale(100%) contrast(1.05) brightness(0.98) !important;
}

/* Navbar and stats container background */
html[data-theme="eink"] .stats-section,
html[data-theme="eink"] .stats-section > .mantine-Box-root,
html[data-theme="eink"] .mantine-Header-root,
html[data-theme="eink"] .bottom-navbar,
html[data-theme="eink"] nav {
  background-color: var(--eink-bg) !important;
}

/* Stats box specific styling */
html[data-theme="eink"] .stats-section .mantine-Box-root[style*="boxShadow"] {
  background-color: var(--eink-bg) !important;
  border: 2px solid var(--eink-text) !important;
  box-shadow: 2px 2px 0px var(--eink-shadow) !important;
}

/* "Your Learning Journey" title in stats section */
html[data-theme="eink"] .stats-section .mantine-Title-root,
html[data-theme="eink"] .stats-section h3,
html[data-theme="eink"] .stats-section h4 {
  font-size: 16px !important;
  font-family: 'Fira Code', monospace !important;
  color: var(--eink-text) !important;
}

/* Left panel and main container backgrounds */
html[data-theme="eink"] .left-panel {
  background-color: var(--eink-bg) !important;
}

/* Main container backgrounds */
html[data-theme="eink"] .mantine-Container-root,
html[data-theme="eink"] .mantine-AppShell-root,
html[data-theme="eink"] .mantine-Box-root[style*="height: '100%'"] {
  background-color: var(--eink-bg) !important;
}

/* Ensure borders throughout use eink colors */
html[data-theme="eink"] [style*="borderBottom"],
html[data-theme="eink"] [style*="border-bottom"],
html[data-theme="eink"] [style*="borderRight"],
html[data-theme="eink"] [style*="border-right"] {
  border-color: var(--eink-border) !important;
}


/* App-specific styles */

.app-container {
  min-height: 100vh;
  background-color: var(--duolingo-gray);
}

/* Prevent page scrolling */
html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}

#root {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Font family overrides - Open Sans */
* {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}


/* Specific font overrides for key areas */
.mantine-Card-root,
.mantine-Text-root,
.mantine-Title-root,
.mantine-Badge-root,
.mantine-Button-root,
.mantine-TextInput-root,
.mantine-Stack-root,
.mantine-Group-root,
.mantine-Stack-root *,
.mantine-Group-root *,
[class*="mantine-"] {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}

/* Code font overrides with maximum specificity - Must come AFTER Mantine overrides */
/* Standard HTML code elements */
code,
code *,
pre,
pre *,
/* Code elements within Mantine components */
.mantine-Card-root code,
.mantine-Card-root code *,
.mantine-Card-root pre,
.mantine-Card-root pre *,
.mantine-Text-root code,
.mantine-Text-root code *,
.mantine-Text-root pre,
.mantine-Text-root pre *,
.mantine-Stack-root code,
.mantine-Stack-root code *,
.mantine-Stack-root pre,
.mantine-Stack-root pre *,
.mantine-Group-root code,
.mantine-Group-root code *,
.mantine-Group-root pre,
.mantine-Group-root pre *,
[class*="mantine-"] code,
[class*="mantine-"] code *,
[class*="mantine-"] pre,
[class*="mantine-"] pre *,
/* Elements with Courier New inline styles */
[style*="fontFamily: \"Courier New\""],
[style*="fontFamily: \"Courier New\""] *,
span[style*="fontFamily: \"Courier New\""],
span[style*="fontFamily: \"Courier New\""] *,
div[style*="fontFamily: \"Courier New\""],
div[style*="fontFamily: \"Courier New\""] *,
.mantine-Card-root [style*="fontFamily: \"Courier New\""],
.mantine-Card-root [style*="fontFamily: \"Courier New\""] *,
.mantine-Text-root [style*="fontFamily: \"Courier New\""],
.mantine-Text-root [style*="fontFamily: \"Courier New\""] *,
.mantine-Stack-root [style*="fontFamily: \"Courier New\""],
.mantine-Stack-root [style*="fontFamily: \"Courier New\""] *,
.mantine-Group-root [style*="fontFamily: \"Courier New\""],
.mantine-Group-root [style*="fontFamily: \"Courier New\""] *,
[class*="mantine-"] [style*="fontFamily: \"Courier New\""],
[class*="mantine-"] [style*="fontFamily: \"Courier New\""] *,
/* Maximum specificity override for any code elements */
html body * code,
html body * code *,
html body * pre,
html body * pre *,
html body * [style*="fontFamily: \"Courier New\""],
html body * [style*="fontFamily: \"Courier New\""] * {
  font-family: "Courier New", monospace !important;
}

/* KaTeX math rendering styles */
.katex,
.katex *,
.math,
.math *,
.math-display,
.math-display *,
.math-inline,
.math-inline * {
  color: inherit !important;
}

/* Ensure KaTeX formulas inherit text color from parent */
.mantine-Card-root .katex,
.mantine-Card-root .katex *,
.mantine-Text-root .katex,
.mantine-Text-root .katex *,
.mantine-Stack-root .katex,
.mantine-Stack-root .katex *,
.mantine-Group-root .katex,
.mantine-Group-root .katex *,
[class*="mantine-"] .katex,
[class*="mantine-"] .katex * {
  color: inherit !important;
}

/* Display math centering and spacing */
.math-display {
  text-align: center !important;
  margin: 1rem 0 !important;
}

/* Inline math spacing */
.math-inline {
  margin: 0 2px !important;
}

/* Disable animations for matching card buttons - MUST override all global button styles */
button.matching-card-button,
button.matching-card-button.mantine-Button-root,
button.matching-card-button.unified-button,
button.matching-card-button:hover,
button.matching-card-button.mantine-Button-root:hover,
button.matching-card-button.unified-button:hover,
.matching-card-button,
.matching-card-button:hover {
  transform: none !important;
  transition: none !important;
}

button.matching-card-button:hover .mantine-Button-inner,
button.matching-card-button:hover .mantine-Button-label,
button.matching-card-button:hover .mantine-Button-leftIcon,
button.matching-card-button:hover .mantine-Button-rightIcon,
.matching-card-button:hover .mantine-Button-inner,
.matching-card-button:hover .mantine-Button-label,
.matching-card-button:hover .mantine-Button-leftIcon,
.matching-card-button:hover .mantine-Button-rightIcon {
  transform: none !important;
}

/* Custom Mantine theme overrides - Unified button styling */

/* Force Unified button styling with maximum specificity */
button,
button[class*="mantine"],
.mantine-Button-root,
[class*="mantine-Button"] {
  border-radius: 50px !important; /* Pill-like shape */
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}

button:hover,
button[class*="mantine"]:hover,
.mantine-Button-root:hover,
[class*="mantine-Button"]:hover {
  transform: translateY(-2px) !important;
}

/* Prevent text from moving during button animation */
button:hover .mantine-Button-inner,
button:hover .mantine-Button-label,
.white-button:hover .mantine-Button-inner,
.white-button:hover .mantine-Button-label,
/* Apply to all UnifiedButton instances including navbar */
a[href="/create"]:hover .mantine-Button-inner,
a[href="/create"]:hover .mantine-Button-label,
a[href="/login"]:hover .mantine-Button-inner,
a[href="/login"]:hover .mantine-Button-label {
  transform: none !important;
}

/* Allow icons to move with the button for better visual cohesion */
button:hover .mantine-Button-leftIcon,
button:hover .mantine-Button-rightIcon,
.white-button:hover .mantine-Button-leftIcon,
.white-button:hover .mantine-Button-rightIcon,
a[href="/create"]:hover .mantine-Button-leftIcon,
a[href="/create"]:hover .mantine-Button-rightIcon,
a[href="/login"]:hover .mantine-Button-leftIcon,
a[href="/login"]:hover .mantine-Button-rightIcon {
  transform: translateY(-2px) !important;
}

/* Target all Mantine button elements with maximum specificity */
.mantine-Button-root,
.mantine-Button-root[data-variant="filled"],
.mantine-Button-root[data-variant="outline"],
.mantine-Button-root[data-variant="subtle"],
.mantine-Button-root[data-variant="light"],
.mantine-Button-root[data-variant="default"],
button.mantine-Button-root,
button[class*="mantine-Button"] {
  border-radius: 50px !important; /* Very rounded, pill-like shape */
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}

.mantine-Button-root:hover,
.mantine-Button-root[data-variant="filled"]:hover,
.mantine-Button-root[data-variant="outline"]:hover,
.mantine-Button-root[data-variant="subtle"]:hover,
.mantine-Button-root[data-variant="light"]:hover,
.mantine-Button-root[data-variant="default"]:hover,
button.mantine-Button-root:hover,
button[class*="mantine-Button"]:hover {
  transform: translateY(-2px) !important;
}

/* Ensure all button variants get the same styling */
.mantine-Button-filled,
.mantine-Button-outline,
.mantine-Button-subtle,
.mantine-Button-light,
.mantine-Button-default {
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}

.mantine-Button-filled:hover,
.mantine-Button-outline:hover,
.mantine-Button-subtle:hover,
.mantine-Button-light:hover,
.mantine-Button-default:hover {
  transform: translateY(-2px) !important;
}

.mantine-Card-root {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: none;
  transition: all 0.3s ease;
}

/* Force white background with black shadow for all UnifiedButton components */
.white-button,
.white-button *,
.white-button .mantine-Button-inner,
.white-button .mantine-Button-label,
.white-button .mantine-Button-leftIcon,
.white-button .mantine-Button-rightIcon,
button[style*="backgroundColor: 'white !important'"],
button[style*="backgroundColor: 'white !important'"] * {
  background-color: white !important;
  color: black !important;
  border: none !important;
}

/* Target the root button element specifically for shadow */
.white-button.mantine-Button-root,
button[style*="backgroundColor: 'white !important'"] {
  background-color: white !important;
  color: black !important;
  box-shadow: 4px 4px 0px black !important;
  border: none !important;
}

/* Ensure consistent button heights for small buttons */
.mantine-Button-root[data-size="sm"] {
  height: 32px !important;
  min-height: 32px !important;
}

/* Unified button styling */
.unified-button *,
.unified-button .mantine-Button-inner,
.unified-button .mantine-Button-label,
.unified-button .mantine-Button-leftIcon,
.unified-button .mantine-Button-rightIcon {
  background-color: inherit !important;
  color: inherit !important;
  border: none !important;
}

/* Unified button root element - use CSS custom properties */
.unified-button.mantine-Button-root {
  background-color: var(--unified-bg-color, #66B2FF) !important;
  color: var(--unified-text-color, white) !important;
  box-shadow: var(--unified-shadow, 4px 4px 0px #4A90E2) !important;
}

/* Unified button hover animation */
.unified-button:hover .mantine-Button-inner,
.unified-button:hover .mantine-Button-label {
  transform: none !important;
}

.unified-button:hover .mantine-Button-leftIcon,
.unified-button:hover .mantine-Button-rightIcon {
  transform: translateY(-2px) !important;
}

.mantine-Card-root:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.mantine-Progress-root {
  border-radius: 6px;
  overflow: hidden;
}

.mantine-Progress-bar,
.mantine-Progress-bar[data-filled],
[data-mantine-component="Progress"] .mantine-Progress-bar,
[data-mantine-component="Progress"] .mantine-Progress-bar[data-filled] {
  background: #59CA06 !important;
  background-color: #59CA06 !important;
}

/* Lesson card specific styles */
.lesson-card-container {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-card-content {
  width: 100%;
  max-width: 600px;
}

/* Additional button styling to ensure consistency */
.mantine-Button-root[data-size="xs"],
.mantine-Button-root[data-size="sm"],
.mantine-Button-root[data-size="md"],
.mantine-Button-root[data-size="lg"],
.mantine-Button-root[data-size="xl"] {
  border-radius: 50px !important; /* Pill-like shape for all sizes */
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
}

/* Make lesson card buttons smaller to match navbar button size */
.mantine-Button-root[data-size="lg"] {
  font-size: 14px !important; /* Match navbar button size */
  padding: 8px 16px !important; /* Match navbar button padding */
  min-height: 32px !important; /* Match navbar button height */
}

/* Custom rounded text input */
.rounded-text-input .mantine-Input-input {
  border-radius: 50px !important;
  height: 36px !important;
}

.rounded-text-input .mantine-Input-root {
  border-radius: 50px !important;
  overflow: hidden !important;
}

/* Fix Mantine Menu z-index and positioning */
.mantine-Menu-dropdown {
  z-index: 10000 !important;
  /* Prevent layout shift when menu opens */
  position: fixed !important;
}

.mantine-Popover-dropdown {
  z-index: 10000 !important;
  /* Prevent layout shift when popover opens */
  position: fixed !important;
}

/* Ensure Menu Target (Avatar) is stable and clickable */
.mantine-Menu-target {
  z-index: 1 !important;
  position: relative;
  /* Prevent transform/transition issues that cause jumping */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Fix for header menu items to prevent jumping */
.mantine-Menu-dropdown[data-position] {
  /* Override any conflicting positioning */
  will-change: unset !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mantine-Button-root {
    border-radius: 50px !important; /* Keep pill shape on mobile too */
    font-size: 14px !important;
  }
  
  .mantine-Card-root {
    border-radius: 16px;
  }
  
  .lesson-card-container {
    min-height: 300px;
  }
}

/* Home content container responsive padding */
@media (max-width: 1000px) {
  .home-content-container {
    padding: 0 3rem !important; /* 48px padding when left panel < 600px */
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    column-gap: 0 !important;
  }
  
  .quick-actions-grid > * {
    justify-self: center !important;
  }
}

@media (max-width: 800px) {
  .home-content-container {
    padding: 0 3rem !important; /* 48px padding */
  }
}

@media (max-width: 600px) {
  .home-content-container {
    padding: 0 3rem !important; /* 48px padding */
  }
}

@media (max-width: 480px) {
  .home-content-container {
    padding: 0 4rem !important; /* 64px padding */
  }
  
  .quick-actions-box {
    display: none !important;
  }
}

/* Cat Lottie animation responsive scaling */
@media (max-width: 1000px) {
  .cat-lottie-animation {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    aspect-ratio: 420/300 !important; /* Maintain original aspect ratio */
  }
}

@media (max-width: 800px) {
  .cat-lottie-animation {
    max-width: 300px !important;
  }
}

@media (max-width: 600px) {
  .cat-lottie-animation {
    max-width: 250px !important;
  }
}

@media (max-width: 480px) {
  .cat-lottie-animation {
    max-width: 250px !important;
  }
}

/* Cat message heading and subheading responsive text */
.cat-message-spacing {
  margin-top: -39px !important; /* Default spacing for screens >= 1000px (30% closer) */
}

@media (max-width: 1000px) {
  .cat-message-heading {
    font-size: 1.25rem !important; /* 20px - smaller than lg (1.125rem) */
  }
  
  .cat-message-subheading {
    font-size: 0.875rem !important; /* 14px - smaller than sm (0.875rem) */
  }
  
  .cat-message-spacing {
    margin-top: -35px !important; /* Much closer when screen < 1000px */
  }
}

@media (max-width: 800px) {
  .cat-message-heading {
    font-size: 1.125rem !important; /* 18px */
  }
  
  .cat-message-subheading {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .cat-message-spacing {
    margin-top: -28px !important; /* Even closer on smaller screens */
  }
}

@media (max-width: 600px) {
  .cat-message-heading {
    font-size: 1rem !important; /* 16px */
  }
  
  .cat-message-subheading {
    font-size: 0.75rem !important; /* 12px */
  }
  
  .cat-message-spacing {
    margin-top: -20px !important; /* Very close on mobile */
  }
}

@media (max-width: 480px) {
  .cat-message-heading {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  .cat-message-subheading {
    font-size: 0.6875rem !important; /* 11px */
  }
  
  .cat-message-spacing {
    margin-top: -15px !important; /* Extremely close on very small screens */
  }
}

/* Edgur (AI cat) pawwwndering animation */
@keyframes thinkingDots {
  0%, 20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.thinking-dots {
  display: inline-block;
}

.thinking-dots span {
  animation: thinkingDots 1.4s infinite ease-in-out;
  animation-fill-mode: both;
}

.thinking-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.thinking-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0s;
}

/* FillBlank input placeholder styling */
[contenteditable]:empty:before {
  content: attr(data-placeholder);
  color: #999;
  pointer-events: none;
}

/* XP chip animation */
@keyframes xpPulse {
  0% {
    transform: scale(1);
    box-shadow: 4px 4px 0px #FFD700;
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 25px #FFD700, 4px 4px 0px #FFD700;
  }
  100% {
    transform: scale(1.1);
    box-shadow: 0 0 20px #FFD700, 4px 4px 0px #FFD700;
  }
}

/* Audio icon hover animation */
.audio-icon-container:hover {
  transform: translateY(-2px) !important;
}