@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geom:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');


/* KaTeX and React-Quill CSS are now loaded lazily by components that need them */

@font-face {
  font-family: 'ATAMI';
  src: url('https://db.onlinewebfonts.com/t/1c587cd97662591427eac7d30696f237.eot');
  src: url('https://db.onlinewebfonts.com/t/1c587cd97662591427eac7d30696f237.eot?#iefix') format('embedded-opentype'),
    url('https://db.onlinewebfonts.com/t/1c587cd97662591427eac7d30696f237.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/1c587cd97662591427eac7d30696f237.woff') format('woff'),
    url('https://db.onlinewebfonts.com/t/1c587cd97662591427eac7d30696f237.ttf') format('truetype'),
    url('https://db.onlinewebfonts.com/t/1c587cd97662591427eac7d30696f237.svg#ATAMI') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Dark Theme as Default for Customer Sections */
    --background: 220 15% 10%;
    /* Dark background #181a1f */
    --foreground: 210 40% 98%;
    /* Light text */

    --card: 220 15% 14%;
    /* Dark card #1f2228 */
    --card-foreground: 210 40% 98%;

    --popover: 220 15% 14%;
    --popover-foreground: 210 40% 98%;

    /* New Color Palette */
    --primary: 205 28% 61%;
    /* #80A1BA - Soft blue */
    --primary-foreground: 0 0% 100%;
    --primary-light: 205 28% 70%;
    /* Lighter variant */
    --primary-glow: 205 28% 61%;

    --secondary: 133 37% 72%;
    /* #B4DEBD - Mint green */
    --secondary-foreground: 220 15% 10%;
    /* Dark text on light bg */

    --tertiary: 180 28% 67%;
    /* #91C4C3 - Teal */
    --tertiary-foreground: 220 15% 10%;

    --muted: 220 15% 20%;
    /* Dark muted */
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 205 28% 61%;
    /* Same as primary */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 50%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 15% 25%;
    /* Dark border */
    --input: 220 15% 20%;
    /* Dark input */
    --ring: 205 28% 61%;

    --radius: 0.75rem;

    /* Solid colors with new palette */
    --gradient-primary: #80A1BA;
    /* Primary */
    --gradient-secondary: #B4DEBD;
    /* Secondary */
    --gradient-accent: #91C4C3;
    /* Tertiary */
    --gradient-card: #1f2228;
    /* Dark card */
    --gradient-hero: #80A1BA;
    /* Primary */
    --gradient-warm: #B4DEBD;
    /* Secondary */
    --gradient-cool: #91C4C3;
    /* Tertiary */
    --gradient-soft: #2a2d35;
    /* Soft dark */

    /* Dark theme shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(128, 161, 186, 0.3);
    --shadow-card-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.4);

    /* Sidebar remains light for admin */
    --sidebar-background: 210 50% 98%;
    --sidebar-foreground: 215 25% 27%;
    --sidebar-primary: 205 28% 61%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 133 37% 72%;
    --sidebar-accent-foreground: 220 15% 10%;
    --sidebar-border: 214.3 31.8% 91.4%;
    --sidebar-ring: 205 28% 61%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 200 91% 33%;
    /* Dark blue #07689F */
    --primary-foreground: 0 0% 100%;
    --primary-light: 0 0% 98%;
    /* Very light gray #FAFAFA */
    --primary-glow: 200 91% 33%;
    /* Same as primary */

    --secondary: 10 100% 71%;
    /* Coral/orange #FF7E67 */
    --secondary-foreground: 0 0% 100%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 200 91% 33%;
    /* Same as primary */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 200 91% 33%;

    /* Dark mode - solid colors */
    --gradient-primary: #07689F;
    /* Primary solid */
    --gradient-secondary: #FF7E67;
    /* Secondary solid */
    --gradient-accent: #FF7E67;
    /* Tertiary solid */
    --gradient-card: #222228;
    /* Dark card */
    --gradient-hero: #07689F;
    /* Primary solid */

    --sidebar-background: 222 30% 10%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 200 91% 33%;
    /* Primary */
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 10 100% 71%;
    /* Tertiary/Secondary */
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 217.2 32.6% 17.5%;
    --sidebar-ring: 200 91% 33%;
    /* Primary */
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-surface-base text-foreground font-inter leading-relaxed;
    overflow-x: clip;
    width: 100%;
  }

  html {
    overflow-x: clip;
    width: 100%;
  }

  #root {
    overflow-x: clip;
    width: 100%;
  }

  /* Improved typography with responsive sizes using clamp() - Updated to new font hierarchy */
  h1 {
    @apply font-gotham font-bold tracking-tight leading-tight text-gray-900;
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    /* Level 1: 1.75rem base */
    margin-bottom: 0.7em;
  }

  h2 {
    @apply font-gotham font-bold leading-tight tracking-normal text-gray-800;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    /* Level 2: 1.5rem base */
    margin-bottom: 0.6em;
  }

  h3 {
    @apply font-gotham font-medium leading-tight text-gray-800;
    font-size: clamp(1.25rem, 2.7vw, 1.75rem);
    /* Level 3: 1.25rem base */
    margin-bottom: 0.55em;
  }

  h4 {
    @apply font-gotham font-medium leading-snug text-gray-700;
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    /* Level 4: 1.125rem base */
    margin-bottom: 0.45em;
  }

  h5 {
    @apply font-gotham font-medium leading-snug text-gray-700;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    /* Level 5: 1rem base */
    margin-bottom: 0.45em;
  }

  h6 {
    @apply font-gotham font-medium leading-snug text-gray-700;
    font-size: clamp(0.9375rem, 0.9vw, 1.125rem);
    /* Level 6: 0.9375rem base */
    margin-bottom: 0.45em;
  }

  p {
    @apply font-inter leading-relaxed text-muted-foreground;
    font-size: 1rem;
    /* Level 5: 1rem */
    margin-bottom: 1em;
  }

  /* Improve form elements */
  input,
  select,
  textarea {
    @apply transition-all duration-200;
    font-size: 1rem;
    /* Level 5 */
  }

  /* Improve buttons */
  button,
  .btn {
    @apply rounded-lg font-medium transition-all duration-200;
  }
}

/* Font family classes */
.font-inter {
  font-family: 'Inter', sans-serif;
}

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

.font-atami {
  font-family: 'ATAMI', serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.font-geom {
  font-family: 'Geom', 'Poppins', sans-serif;
}

/* Layout - 12 column grid system */
.grid-container {
  @apply w-full grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 md:gap-6;
}

/* Modern Gen-Z card styling */
.card-enhanced {
  @apply border border-gray-100/50 rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 bg-white/95 backdrop-blur-sm hover:scale-[1.02] hover:border-primary/20;
}

/* Glassmorphism card - Airbnb style */
.glass-card {
  @apply backdrop-blur-xl bg-white/80 border border-white/30 rounded-2xl shadow-md hover:shadow-lg transition-all duration-300;
}

/* Modern card with solid color */
.card-modern {
  @apply bg-white border border-gray-100/50 rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 hover:scale-[1.01];
}

/* Floating card effect */
.card-floating {
  @apply bg-white/90 backdrop-blur-sm border border-white/20 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-1;
}

/* Floating elements */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounce-gentle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

/* Solid text color */
.gradient-text {
  color: #07689F;
}

/* Improved form layout */
.form-group {
  @apply mb-5 md:mb-6;
}

/* Consistent spacing - enhanced for better visual hierarchy */
.section-padding {
  @apply py-16 md:py-24 lg:py-32;
}

.section-padding-sm {
  @apply py-10 md:py-16;
}

/* Better modal sizing */
.modal-custom-width {
  @apply w-full max-w-xl md:max-w-2xl;
}

/* Modern 8px grid spacing system */
.space-xs {
  @apply mb-2;
}

.space-sm {
  @apply mb-4;
}

.space-md {
  @apply mb-6 md:mb-8;
}

.space-lg {
  @apply mb-8 md:mb-12;
}

.space-xl {
  @apply mb-12 md:mb-16;
}

.space-2xl {
  @apply mb-16 md:mb-24;
}

.space-3xl {
  @apply mb-24 md:mb-32;
}

/* Modern padding utilities */
.padding-xs {
  @apply p-2;
}

.padding-sm {
  @apply p-4;
}

.padding-md {
  @apply p-6;
}

.padding-lg {
  @apply p-8;
}

.padding-xl {
  @apply p-12;
}

/* Improved container padding */
.container {
  @apply px-3 sm:px-5 lg:px-7;
}

/* Card spacing */
.card-spacing {
  @apply p-6 md:p-8;
}

/* Modern button styles - Gen-Z inspired */
.btn-lg {
  @apply py-4 px-8 font-semibold rounded-xl transition-all duration-200 hover:scale-105 active:scale-95;
  font-size: 1rem;
  /* Level 5 */
}

.btn-md {
  @apply py-3 px-6 font-medium rounded-lg transition-all duration-200 hover:scale-105 active:scale-95;
  font-size: 0.9375rem;
  /* Level 6 */
}

.btn-sm {
  @apply py-2 px-4 font-medium rounded-lg transition-all duration-200 hover:scale-105 active:scale-95;
  font-size: 0.875rem;
  /* Level 7 */
}

/* Modern button variants */
.btn-primary {
  @apply bg-primary text-white shadow-lg hover:shadow-xl hover:bg-primary/90;
}

.btn-secondary {
  @apply bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300 shadow-sm hover:shadow-md;
}

.btn-ghost {
  @apply bg-transparent text-gray-600 hover:bg-gray-100 hover:text-gray-900;
}

/* Modern interaction utilities */
.hover-lift {
  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.hover-glow {
  @apply transition-all duration-300 hover:shadow-lg;
}

.hover-scale {
  @apply transition-all duration-200 hover:scale-105 active:scale-95;
}

/* Visual hierarchy enhancement utilities - Updated to new font hierarchy */
.section-title {
  @apply font-poppins font-bold mb-5 md:mb-8 text-gray-900;
  font-size: 1.25rem;
  /* Level 3 - responsive dapat ditambahkan jika diperlukan */
}

.subsection-title {
  @apply font-poppins font-bold mb-3 md:mb-5 text-gray-800;
  font-size: 1.125rem;
  /* Level 4 */
}

.card-title {
  @apply font-poppins font-bold mb-2.5 text-gray-800;
  font-size: 1rem;
  /* Level 5 */
}

/* Consistent Typography System - Updated to new font hierarchy */
.text-display {
  @apply font-gotham font-bold leading-tight tracking-tight text-gray-900;
  font-size: 1.75rem;
  /* Level 1 */
}

.text-h1 {
  @apply font-gotham font-bold leading-tight tracking-tight text-gray-900;
  font-size: 1.5rem;
  /* Level 2 */
}

.text-h2 {
  @apply font-gotham font-bold leading-tight tracking-tight text-gray-800;
  font-size: 1.25rem;
  /* Level 3 */
}

.text-h3 {
  @apply font-gotham font-semibold leading-snug tracking-tight text-gray-800;
  font-size: 1.125rem;
  /* Level 4 */
}

.text-h4 {
  @apply font-gotham font-semibold leading-snug tracking-tight text-gray-700;
  font-size: 1rem;
  /* Level 5 */
}

.text-h5 {
  @apply font-gotham font-medium leading-snug tracking-tight text-gray-700;
  font-size: 0.9375rem;
  /* Level 6 */
}

.text-h6 {
  @apply font-gotham font-medium leading-snug tracking-tight text-gray-700;
  font-size: 0.875rem;
  /* Level 7 */
}

.text-body-lg {
  @apply font-inter leading-relaxed text-gray-600;
  font-size: 1rem;
  /* Level 5 */
}

.text-body {
  @apply font-inter leading-relaxed text-gray-600;
  font-size: 0.9375rem;
  /* Level 6 */
}

.text-body-sm {
  @apply font-inter leading-relaxed text-gray-600;
  font-size: 0.875rem;
  /* Level 7 */
}

.text-caption {
  @apply font-inter leading-normal text-gray-500;
  font-size: 0.75rem;
  /* Level 9 */
}

.text-label {
  @apply font-inter font-medium leading-normal text-gray-700;
  font-size: 0.875rem;
  /* Level 7 */
}

/* Consistent Spacing System */
.space-section {
  @apply py-12 md:py-16 lg:py-20;
}

.space-component {
  @apply py-6 md:py-10 lg:py-12;
}

.space-element {
  @apply py-3 md:py-5 lg:py-6;
}

.space-tight {
  @apply py-1.5 md:py-2.5 lg:py-3;
}

/* Consistent Container Spacing */
.container-padding {
  @apply px-3 sm:px-5 lg:px-7;
}

.container-padding-sm {
  @apply px-2.5 sm:px-3.5 lg:px-5;
}

.container-padding-lg {
  @apply px-5 sm:px-7 lg:px-10;
}

/* Consistent Card Spacing */
.card-padding {
  @apply p-3 md:p-5 lg:p-6;
}

.card-padding-sm {
  @apply p-2.5 md:p-3.5 lg:p-5;
}

.card-padding-lg {
  @apply p-5 md:p-7 lg:p-8;
}

/* Consistent Gap Spacing */
.gap-section {
  @apply gap-5 md:gap-6 lg:gap-8;
}

.gap-component {
  @apply gap-3 md:gap-5 lg:gap-6;
}

.gap-element {
  @apply gap-1.5 md:gap-2.5 lg:gap-3.5;
}

.gap-tight {
  @apply gap-1 md:gap-1.5 lg:gap-2.5;
}

/* Ensure form labels are consistent - Updated to new font hierarchy */
label {
  @apply block font-medium text-gray-700 mb-1.5;
  font-size: 0.875rem;
  /* Level 7 */
}

/* Define text size utilities properly to avoid circular dependencies - Updated to new font hierarchy */
.text-size-xs {
  font-size: 0.75rem;
  /* Level 9 */
  line-height: 1rem;
}

.text-size-sm {
  font-size: 0.875rem;
  /* Level 7 */
  line-height: 1.25rem;
}

.text-size-base {
  font-size: 1rem;
  /* Level 5 */
  line-height: 1.5rem;
}

/* Height utility for tutor cards */
.h-104 {
  height: 22rem;
  /* 352px */
}

/* Hide scrollbar for subject slider */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

/* Hide scrollbar utility - mirrors scrollbar-hide, used in toggle rows etc. */
.no-scrollbar {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

/* Custom scrollbar styles for modals */
.modal-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.modal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  margin: 16px 0;
}

.modal-scrollbar::-webkit-scrollbar-thumb {
  background: #E5E7EB;
  border-radius: 4px;
}

.modal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #D1D5DB;
}

/* Review-specific animations and styles */
.review-card-animate {
  animation: slide-in 0.6s ease-out forwards;
  opacity: 0;
}

.review-gradient-bg {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.review-emoji-bounce {
  animation: bounce-gentle 2s ease-in-out infinite;
}

/* Pokemon Card Reveal Animation for Mnemonic Page */
@keyframes card-reveal-flip {
  0% {
    transform: perspective(1000px) rotateY(180deg) scale(0.7);
    opacity: 0;
  }

  40% {
    transform: perspective(1000px) rotateY(90deg) scale(0.85);
    opacity: 0.5;
  }

  100% {
    transform: perspective(1000px) rotateY(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes card-shine-sweep {
  0% {
    left: -100%;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes card-sparkle {

  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.mnemonic-card-reveal {
  animation: card-reveal-flip 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-style: preserve-3d;
}

.mnemonic-card-shine {
  position: relative;
  overflow: hidden;
}

.mnemonic-card-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: card-shine-sweep 0.6s ease-out 0.4s forwards;
  pointer-events: none;
}

/* Swipe card animations */
@keyframes swipe-left-exit {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateX(-120%) rotate(-10deg);
    opacity: 0;
  }
}

@keyframes swipe-right-exit {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateX(120%) rotate(10deg);
    opacity: 0;
  }
}

@keyframes swipe-enter {
  0% {
    transform: translateX(0) scale(0.95);
    opacity: 0;
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.mnemonic-swipe-left-exit {
  animation: swipe-left-exit 0.3s ease-out forwards;
}

.mnemonic-swipe-right-exit {
  animation: swipe-right-exit 0.3s ease-out forwards;
}

.mnemonic-swipe-enter {
  animation: swipe-enter 0.3s ease-out forwards;
}

/* Mnemonic card touch/drag styling */
.mnemonic-card-draggable {
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.mnemonic-card-draggable:active {
  cursor: grabbing;
}

/* Featured carousel slide animations */
@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-30px);
    opacity: 0;
  }
}

@keyframes slide-out-right {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(30px);
    opacity: 0;
  }
}

@keyframes slide-in-featured {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-out-left {
  animation: slide-out-left 0.25s ease-out forwards;
}

.animate-slide-out-right {
  animation: slide-out-right 0.25s ease-out forwards;
}

.animate-slide-in {
  animation: slide-in-featured 0.25s ease-out forwards;
}

/* ======================================== */
/* Cheatsheet Page Redesign - Gamified Look */
/* ======================================== */

/* Featured section - soft dark background */
.cheatsheet-featured-wrap {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%);
  border-radius: 2rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .cheatsheet-featured-wrap {
    padding: 2rem;
  }
}

/* Softer card base for cheatsheet */
.cheatsheet-card {
  background: hsl(var(--card));
  border-radius: 1.5rem;
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.cheatsheet-card:hover {
  transform: translateY(-4px);
}

/* Stack effect - softer with opacity */
.cheatsheet-stack-layer-1 {
  background-color: rgba(30, 41, 59, 0.4);
  border-radius: 1.25rem;
}

.cheatsheet-stack-layer-2 {
  background-color: rgba(15, 23, 42, 0.3);
  border-radius: 1.25rem;
}

/* Filter pill styling - softer */
.cheatsheet-filter-pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
  background: transparent;
  color: #64748B;
  border: none;
}

.cheatsheet-filter-pill:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.cheatsheet-filter-pill.active {
  background: #07689F;
  color: white;
}

/* Category-specific filter active states */
.cheatsheet-filter-pill.active-blue {
  background: rgba(30, 58, 138, 0.4);
  color: #60A5FA;
}

.cheatsheet-filter-pill.active-purple {
  background: rgba(88, 28, 135, 0.4);
  color: #C084FC;
}

.cheatsheet-filter-pill.active-emerald {
  background: rgba(6, 78, 59, 0.4);
  color: #34D399;
}

.cheatsheet-filter-pill.active-amber {
  background: rgba(120, 53, 15, 0.4);
  color: #FBBF24;
}

/* Progress bar - thicker and more engaging */
.cheatsheet-progress-bar {
  height: 0.5rem;
  background: hsla(var(--foreground), 0.1);
  border-radius: 9999px;
  overflow: hidden;
}

.cheatsheet-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal card - friendlier appearance */
.cheatsheet-modal-card {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-radius: 1.75rem;
  overflow: hidden;
}

/* Navigation button - softer touch */
.cheatsheet-nav-btn {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 0.875rem;
  transition: all 0.2s ease;
  border: 1px solid rgba(51, 65, 85, 0.5);
}

.cheatsheet-nav-btn:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.7);
  transform: scale(1.08);
}

.cheatsheet-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Dot indicators - softer */
.cheatsheet-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted-foreground) / 0.3);
  transition: all 0.3s ease;
}

.cheatsheet-dot.active {
  width: 1.25rem;
  background: #07689F;
}

/* Card bounce animation on enter */
@keyframes cheatsheet-card-bounce {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }

  60% {
    transform: scale(1.02);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.cheatsheet-bounce-enter {
  animation: cheatsheet-card-bounce 0.35s ease-out forwards;
}

/* Empty state - friendlier */
.cheatsheet-empty-state {
  background: hsl(var(--muted) / 0.3);
  border-radius: 1.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* Badge styling - softer appearance */
.cheatsheet-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Search input - warmer style */
.cheatsheet-search {
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 9999px;
  padding-left: 2.75rem;
  height: 2.75rem;
  transition: border-color 0.2s ease;
}

.cheatsheet-search:focus {
  border-color: #07689F;
  outline: none;
}

@layer utilities {

  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  /* Micro-interaction utilities for dark theme */
  .btn-micro-interact {
    @apply transition-all duration-200 hover:scale-105 active:scale-95 hover:shadow-lg;
  }

  .card-micro-interact {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
  }

  .pulse-on-hover {
    @apply transition-all duration-300 hover:shadow-glow;
  }

  /* Bento grid layouts */
  .bento-grid {
    @apply grid gap-4 md:gap-6;
  }

  .bento-grid-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6;
  }

  .bento-grid-3 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6;
  }

  .bento-grid-4 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6;
  }

  /* Bento card variants */
  .bento-card {
    @apply bg-card border border-border rounded-2xl p-6 transition-all duration-300 hover:shadow-lg;
  }

  .bento-card-large {
    @apply md:col-span-2 lg:row-span-2;
  }

  .bento-card-wide {
    @apply md:col-span-2;
  }

  .bento-card-tall {
    @apply md:row-span-2;
  }
}

/* ============================================ */
/* FLAT DESIGN 2.0 — Duolingo-like Components  */
/* ============================================ */
@layer components {

  /* ── Page Container ── */
  .flat-page-container {
    @apply min-h-screen pb-24 bg-surface-base;
  }

  .flat-content-container {
    @apply max-w-3xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .flat-content-container-wide {
    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* ── Cards ── */
  .flat-card {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-card-interactive {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl cursor-pointer
           transition-all duration-150;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-card-interactive:hover {
    @apply brightness-110;
  }

  .flat-card-interactive:active {
    @apply scale-[0.98] brightness-95;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.25);
    transform: scale(0.98) translateY(2px);
  }

  .flat-card-elevated {
    @apply bg-surface-elevated border-2 border-surface-border-strong rounded-2xl;
    box-shadow: 0 6px 0 0 rgba(0,0,0,0.3);
  }

  /* ── Buttons ── */
  .flat-btn {
    @apply inline-flex items-center justify-center gap-2 font-extrabold
           rounded-2xl transition-all duration-150 select-none;
  }

  .flat-btn-primary {
    @apply flat-btn bg-flat-green text-white border-2 border-flat-green/30
           px-6 py-3 text-[15px];
    box-shadow: 0 4px 0 0 #46a302;
  }

  .flat-btn-primary:hover {
    @apply brightness-110;
  }

  .flat-btn-primary:active {
    @apply translate-y-[2px] brightness-95;
    box-shadow: 0 1px 0 0 #46a302;
  }

  .flat-btn-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .flat-btn-secondary {
    @apply flat-btn bg-flat-blue text-white border-2 border-flat-blue/30
           px-6 py-3 text-[15px];
    box-shadow: 0 4px 0 0 #1899d6;
  }

  .flat-btn-secondary:hover {
    @apply brightness-110;
  }

  .flat-btn-secondary:active {
    @apply translate-y-[2px] brightness-95;
    box-shadow: 0 1px 0 0 #1899d6;
  }

  .flat-btn-secondary:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .flat-btn-danger {
    @apply flat-btn bg-flat-red text-white border-2 border-flat-red/30
           px-6 py-3 text-[15px];
    box-shadow: 0 4px 0 0 #ea2b2b;
  }

  .flat-btn-danger:hover {
    @apply brightness-110;
  }

  .flat-btn-danger:active {
    @apply translate-y-[2px] brightness-95;
    box-shadow: 0 1px 0 0 #ea2b2b;
  }

  .flat-btn-ghost {
    @apply flat-btn bg-transparent text-white/70 border-2 border-surface-border
           px-6 py-3 text-[15px];
  }

  .flat-btn-ghost:hover {
    @apply border-surface-border-strong bg-surface-elevated text-white;
  }

  .flat-btn-ghost:active {
    @apply scale-[0.97] bg-surface-hover;
  }

  /* Small button variants */
  .flat-btn-sm {
    @apply px-4 py-2 text-[13px] rounded-xl;
  }

  .flat-btn-lg {
    @apply px-8 py-4 text-[17px] rounded-2xl;
  }

  /* ── Badges / Pills ── */
  .flat-badge {
    @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full
           text-xs font-bold tracking-wide;
  }

  .flat-badge-green {
    @apply flat-badge bg-flat-green/15 text-flat-green;
  }

  .flat-badge-blue {
    @apply flat-badge bg-flat-blue/15 text-flat-blue;
  }

  .flat-badge-red {
    @apply flat-badge bg-flat-red/15 text-flat-red;
  }

  .flat-badge-orange {
    @apply flat-badge bg-flat-orange/15 text-flat-orange;
  }

  .flat-badge-purple {
    @apply flat-badge bg-flat-purple/15 text-flat-purple;
  }

  .flat-badge-yellow {
    @apply flat-badge bg-flat-yellow/15 text-flat-yellow;
  }

  /* ── Progress Bar ── */
  .flat-progress-bar {
    @apply relative w-full h-6 rounded-2xl overflow-hidden flex items-center
           border border-surface-border;
    background: #37464f;
  }

  .flat-progress-fill {
    @apply absolute top-0 left-0 h-full rounded-2xl
           transition-all duration-500 ease-out;
  }

  .flat-progress-fill::after {
    content: '';
    @apply absolute top-1 left-2 right-2 h-[30%] bg-white/25 rounded-full;
  }

  .flat-progress-label {
    @apply absolute inset-0 flex items-center justify-center
           font-extrabold text-xs tracking-widest z-10 text-white/95;
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  }

  /* ── Inputs ── */
  .flat-input {
    @apply w-full py-3.5 px-4 rounded-2xl bg-surface-card
           border-2 border-surface-border text-white text-sm font-semibold
           placeholder:text-white/30 outline-none transition-colors duration-200;
  }

  .flat-input:focus {
    @apply border-flat-blue;
  }

  /* ── Typography ── */
  .flat-page-title {
    @apply text-2xl sm:text-3xl md:text-4xl font-extrabold text-white
           tracking-tight leading-tight;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }

  .flat-section-title {
    @apply text-lg sm:text-xl font-extrabold text-white leading-tight;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }

  .flat-card-title {
    @apply text-base font-extrabold text-white leading-tight;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }

  .flat-subtitle {
    @apply text-sm text-white/50 font-semibold leading-snug;
  }

  .flat-body {
    @apply text-sm text-white/70 font-medium leading-relaxed;
  }

  .flat-caption {
    @apply text-[11px] text-white/40 font-semibold;
  }

  .flat-label {
    @apply text-[10px] font-bold text-white/40 uppercase tracking-wider;
  }

  /* ── Stat / KPI Cards ── */
  .flat-stat-card {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl p-5 sm:p-6
           flex flex-col justify-between transition-all duration-200;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-stat-value {
    @apply text-3xl sm:text-4xl font-extrabold text-white tracking-tight leading-none;
  }

  .flat-stat-label {
    @apply text-xs font-bold text-white/40 uppercase tracking-wider mt-2;
  }

  /* ── Section Containers ── */
  .flat-section-container {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl overflow-hidden;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-section-header {
    @apply flex items-center justify-between mb-3 px-1;
  }

  /* ── List Items (inside flat-section-container) ── */
  .flat-list-item {
    @apply relative px-4 py-5 sm:px-6 sm:py-6 flex items-center gap-4
           transition-all duration-200 cursor-pointer;
  }

  .flat-list-item:not(:last-child) {
    @apply border-b border-surface-border;
  }

  .flat-list-item:hover {
    @apply bg-surface-hover/50;
  }

  /* ── Micro-interaction Utilities ── */
  .flat-press {
    @apply transition-all duration-150 active:scale-[0.97] active:brightness-90;
  }

  .flat-hover-lift {
    @apply transition-all duration-200 hover:-translate-y-0.5 hover:brightness-105;
  }

  .flat-hover-glow {
    @apply transition-all duration-300;
  }

  .flat-hover-glow:hover {
    box-shadow: 0 0 20px rgba(88, 204, 2, 0.15);
  }

  /* ── Empty State ── */
  .flat-empty-state {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl p-10
           text-center flex flex-col items-center;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-empty-icon {
    @apply bg-surface-elevated w-24 h-24 rounded-full flex items-center justify-center mb-5;
  }

  /* ── Speech Bubble ── */
  .flat-speech-bubble {
    @apply relative bg-surface-card border-2 border-surface-border rounded-2xl p-4 sm:p-5
           text-sm font-semibold text-white/80 leading-relaxed;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-speech-bubble-left::after {
    content: '';
    @apply absolute top-6 -left-3;
    width: 0; height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 12px solid #1a1d24;
  }

  .flat-speech-bubble-left::before {
    content: '';
    @apply absolute top-[22px] -left-[15px];
    width: 0; height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 14px solid #2e3440;
  }

  .flat-speech-bubble-right::after {
    content: '';
    @apply absolute top-6 -right-3;
    width: 0; height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #1a1d24;
  }

  .flat-speech-bubble-right::before {
    content: '';
    @apply absolute top-[22px] -right-[15px];
    width: 0; height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #2e3440;
  }

  .flat-speech-bubble-bottom::after {
    content: '';
    @apply absolute -bottom-3 left-8;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #1a1d24;
  }

  .flat-speech-bubble-bottom::before {
    content: '';
    @apply absolute -bottom-[15px] left-[30px];
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 14px solid #2e3440;
  }

  .flat-speech-bubble-success {
    @apply flat-speech-bubble border-flat-green/40 text-flat-green;
    background: rgba(88, 204, 2, 0.08);
    box-shadow: 0 4px 0 0 rgba(70, 163, 2, 0.3);
  }

  .flat-speech-bubble-error {
    @apply flat-speech-bubble border-flat-red/40 text-flat-red;
    background: rgba(255, 75, 75, 0.08);
    box-shadow: 0 4px 0 0 rgba(234, 43, 43, 0.3);
  }

  /* ── Dropdown ── */
  .flat-dropdown-trigger {
    @apply w-full flex items-center justify-between gap-2 px-4 py-3
           bg-surface-card border-2 border-surface-border rounded-2xl
           text-sm font-bold text-white cursor-pointer select-none
           transition-all duration-150;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-dropdown-trigger:hover {
    @apply border-surface-border-strong brightness-110;
  }

  .flat-dropdown-trigger:active {
    @apply translate-y-[1px];
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.25);
  }

  .flat-dropdown-menu {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl py-2 overflow-hidden;
    box-shadow: 0 6px 0 0 rgba(0,0,0,0.3);
  }

  .flat-dropdown-item {
    @apply px-4 py-3 text-sm font-semibold text-white/70
           transition-all duration-100 cursor-pointer flex items-center gap-3;
  }

  .flat-dropdown-item:hover {
    @apply bg-surface-hover text-white;
  }

  .flat-dropdown-item-active {
    @apply bg-flat-blue/10 text-flat-blue;
  }

  .flat-dropdown-divider {
    @apply my-1 border-t border-surface-border;
  }

  /* ── Loading Screens ── */
  .flat-loading-screen {
    @apply fixed inset-0 z-50 bg-surface-base flex flex-col items-center justify-center gap-6;
  }

  .flat-loading-spinner {
    @apply w-12 h-12 rounded-full border-4 border-surface-border;
    border-top-color: #1cb0f6;
    animation: spin 0.8s linear infinite;
  }

  .flat-loading-spinner-sm {
    @apply w-6 h-6 rounded-full border-2 border-surface-border;
    border-top-color: #1cb0f6;
    animation: spin 0.8s linear infinite;
  }

  .flat-loading-dots {
    @apply flex items-center gap-2;
  }

  .flat-loading-dots span {
    @apply w-3 h-3 rounded-full bg-flat-blue;
    animation: flat-loading-dot 1.2s ease-in-out infinite;
  }

  .flat-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .flat-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  .flat-skeleton {
    @apply bg-surface-elevated rounded-2xl relative overflow-hidden;
  }

  .flat-skeleton::after {
    content: '';
    @apply absolute inset-0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    animation: shimmer 1.5s infinite;
  }

  .flat-loading-bar {
    @apply w-full h-1.5 rounded-full bg-surface-border overflow-hidden;
  }

  .flat-loading-bar-fill {
    @apply h-full rounded-full bg-flat-blue;
    animation: flat-loading-progress 2s ease-in-out infinite;
  }

  /* ── Feedback Sense ── */
  .flat-feedback-correct {
    @apply relative rounded-2xl p-5 text-center;
    background: linear-gradient(135deg, rgba(88,204,2,0.12), rgba(88,204,2,0.05));
    border: 2px solid rgba(88,204,2,0.3);
    box-shadow: 0 4px 0 0 rgba(70,163,2,0.3);
  }

  .flat-feedback-wrong {
    @apply relative rounded-2xl p-5 text-center;
    background: linear-gradient(135deg, rgba(255,75,75,0.12), rgba(255,75,75,0.05));
    border: 2px solid rgba(255,75,75,0.3);
    box-shadow: 0 4px 0 0 rgba(234,43,43,0.3);
  }

  .flat-feedback-icon {
    @apply w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3;
  }

  .flat-feedback-icon-correct {
    @apply flat-feedback-icon;
    background: rgba(88,204,2,0.2);
    color: #58cc02;
  }

  .flat-feedback-icon-wrong {
    @apply flat-feedback-icon;
    background: rgba(255,75,75,0.2);
    color: #ff4b4b;
  }

  .flat-feedback-title {
    @apply text-lg font-extrabold leading-tight mb-1;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }

  .flat-feedback-subtitle {
    @apply text-sm font-medium leading-relaxed;
  }

  /* Sound-ready classes — JS hooks via data-sound attr */
  /* .flat-sound-tap       → data-sound="tap"       */
  /* .flat-sound-correct   → data-sound="correct"   */
  /* .flat-sound-wrong     → data-sound="wrong"     */
  /* .flat-sound-levelup   → data-sound="levelup"   */
  /* .flat-sound-click     → data-sound="click"     */
  /* .flat-sound-whoosh    → data-sound="whoosh"    */
  /* .flat-sound-coin      → data-sound="coin"      */
  /* .flat-sound-streak    → data-sound="streak"    */

  /* ── Enhanced Interactive Feedback ── */
  .flat-feedback-wiggle:active {
    animation: flat-wiggle 0.5s ease-out;
  }

  .flat-feedback-rubber:active {
    animation: flat-rubber-band 0.5s ease-out;
  }

  .flat-feedback-tada:active {
    animation: flat-tada 0.8s ease-out;
  }

  .flat-feedback-jello:active {
    animation: flat-jello 0.7s ease-out;
  }

  .flat-feedback-heartbeat:hover {
    animation: flat-heartbeat 1s ease-in-out;
  }

  .flat-feedback-confetti:active {
    animation: flat-confetti-pop 0.4s ease-out;
  }

  /* ── Stroke & Border Width Utilities ── */
  .flat-stroke-thin {
    @apply border border-surface-border;
  }

  .flat-stroke-default {
    @apply border-2 border-surface-border;
  }

  .flat-stroke-thick {
    border: 3px solid #2e3440;
  }

  .flat-stroke-heavy {
    @apply border-4 border-surface-border;
  }

  .flat-stroke-accent-green {
    @apply border-2;
    border-color: rgba(88, 204, 2, 0.4);
  }

  .flat-stroke-accent-blue {
    @apply border-2;
    border-color: rgba(28, 176, 246, 0.4);
  }

  .flat-stroke-accent-red {
    @apply border-2;
    border-color: rgba(255, 75, 75, 0.4);
  }

  .flat-stroke-accent-orange {
    @apply border-2;
    border-color: rgba(255, 150, 0, 0.4);
  }

  /* ── Empty States (expanded) ── */
  .flat-empty-state-compact {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl p-6
           text-center flex flex-col items-center;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-empty-state-illustration {
    @apply bg-surface-card border-2 border-surface-border rounded-2xl p-12
           text-center flex flex-col items-center;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  }

  .flat-empty-action {
    @apply mt-5;
  }
}

/* ── Loading Keyframes ── */
@keyframes flat-loading-dot {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes flat-loading-progress {
  0% { width: 0%; margin-left: 0%; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* ============================================ */
/* FLAT DESIGN 2.0 — Notification / Toast       */
/* ============================================ */
@layer components {

  /* ── Base toast shell ── */
  .flat-toast {
    @apply relative flex items-start gap-3 w-full max-w-[400px]
           rounded-2xl border-2 p-4 pr-10
           bg-surface-card border-surface-border text-white
           text-sm font-semibold leading-snug select-none overflow-hidden;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }

  /* Left accent bar — add a colored child div */
  .flat-toast-bar {
    @apply absolute left-0 top-0 bottom-0 w-1 rounded-l-2xl;
  }

  /* ── Variant skins ── */
  .flat-toast-success {
    @apply flat-toast border-flat-green/30 text-flat-green;
    background: rgba(88, 204, 2, 0.10);
    box-shadow: 0 4px 0 0 rgba(70, 163, 2, 0.35);
  }

  .flat-toast-error {
    @apply flat-toast border-flat-red/30 text-flat-red;
    background: rgba(255, 75, 75, 0.10);
    box-shadow: 0 4px 0 0 rgba(234, 43, 43, 0.35);
  }

  .flat-toast-warning {
    @apply flat-toast border-flat-orange/30 text-flat-orange;
    background: rgba(255, 150, 0, 0.10);
    box-shadow: 0 4px 0 0 rgba(224, 134, 0, 0.35);
  }

  .flat-toast-info {
    @apply flat-toast border-flat-blue/30 text-flat-blue;
    background: rgba(28, 176, 246, 0.10);
    box-shadow: 0 4px 0 0 rgba(24, 153, 214, 0.35);
  }

  /* ── Toast content parts ── */
  .flat-toast-icon {
    @apply flex-shrink-0 mt-0.5;
  }

  .flat-toast-body {
    @apply flex-1 min-w-0;
  }

  .flat-toast-title {
    @apply font-extrabold text-sm leading-tight;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }

  .flat-toast-description {
    @apply text-xs font-medium opacity-70 mt-0.5 leading-snug;
  }

  .flat-toast-close {
    @apply absolute right-2.5 top-2.5 rounded-xl p-1
           text-white/30 hover:text-white transition-colors duration-150;
  }

  .flat-toast-action {
    @apply inline-flex h-7 shrink-0 items-center justify-center
           rounded-xl border-2 border-white/20 bg-white/10
           px-3 text-xs font-bold text-white
           hover:bg-white/20 hover:border-white/30
           transition-all duration-150;
  }
}

/* ── Global Sonner position and dark override ── */
[data-sonner-toaster] {
  --width: 400px;
}

[data-sonner-toaster][data-theme="dark"] [data-sonner-toast],
[data-sonner-toaster][data-theme="light"] [data-sonner-toast],
[data-sonner-toaster][data-theme="system"] [data-sonner-toast] {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}

/* Gamified UI Animations */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-20deg);
  }

  100% {
    transform: translateX(200%) skewX(-20deg);
  }
}

@keyframes bounce-slow {

  0%,
  100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 3s infinite;
}