body {
  font-family: 'Inter', sans-serif;
  color: #334155;
  background: #f1f5f9;
  transition: color 0.3s, background 0.3s;
  line-height: 1.7;
}

.dark body {
color: #cbd5e1;
background: #0f172a;
}

/* --- NEW: Softer scrollbar colors --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s ease-out;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.modal-enter-active, .modal-leave-active {
  transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}

.modal-enter-from, .modal-leave-to {
  transform: scale(0.95);
  opacity: 0;
}

/* --- NEW: Staggered list transition (used on Beranda) --- */
.list-stagger-move {
  transition: transform 0.4s ease;
}

.list-enter-active, .list-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.toast-enter-active, .toast-leave-active {
  transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}

.toast-enter-from, .toast-leave-to {
  transform: translateY(20px) scale(0.95);
  opacity: 0;
}

.sortable-ghost {
  opacity: 0.4;
  background: #cbd5e1;
}
.dark .sortable-ghost {
  background: #334155;
}

.sortable-chosen {
  cursor: grabbing;
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18);
}

.drag-handle {
  cursor: grab;
}

.custom-checkbox {
  -webkit-appearance: none;
  appearance: none;
  background: #f1f5f9; /* fallback for bg-slate-200 */
  margin: 0;
  font: inherit;
  color: #0f172a; /* fallback for currentColor */
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;
  min-height: 1.25em;
  border: 2px solid #cbd5e1; /* fallback for border-slate-300 */
  border-radius: 0.375em;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: 120ms all ease-in-out;
}

.dark .custom-checkbox {
  background: #1e293b; /* fallback for dark:bg-slate-800 */
  border-color: #334155; /* fallback for dark:border-slate-600 */
}

.custom-checkbox:checked {
  background: #fbbf24; /* fallback for bg-primary-400 */
  border-color: #fbbf24; /* fallback for border-primary-400 */
}

.custom-checkbox::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #fbbf24; /* fallback for primary-400 */
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: transparent;
}

.custom-checkbox:checked::before {
  transform: scale(1);
}

.custom-checkbox:focus {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

  .switch input {
      opacity: 0;
      width: 0;
      height: 0;
  }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e2e8f0;
  transition: .4s;
  border-radius: 30px;
  border: 2px solid #cbd5e1; /* slate-300 */
}
.dark .slider {
  background: #334155;
}
.switch .slider.dark {
  border: 2px solid #fbbf24 !important;
  background: #fbbf24 !important;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 50%;
  left: 0.3em;
  bottom: 0.3em;
  background: #fff;
  transition: .4s;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
}
.switch .slider.dark:before {
  background: #fff !important;
}

input:checked + .slider {
  background: #fbbf24;
  border: 1px solid #f59e0b;
}

  input:checked + .slider:before {
      transform: translateX(1.5em);
  }

.photo-preview-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  cursor: pointer;
}

/* 1. Confetti animation */
@keyframes confetti-fall {
0% { transform: translateY(-100px) rotateZ(0deg); opacity: 1; }
100% { transform: translateY(600px) rotateZ(360deg); opacity: 0.7; }
}
.confetti-piece {
position: absolute;
width: 12px;
height: 12px;
border-radius: 2px;
opacity: 0.8;
animation: confetti-fall 2.5s linear forwards;
}

/* 2. Lottie animation container */
.lottie-container {
width: 120px;
height: 120px;
margin: 0 auto 1.5rem auto;
display: flex;
align-items: center;
justify-content: center;
}

/* 3. Microinteraction transitions for buttons/cards */
.btn-animate, .card-animate {
transition: transform 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.btn-animate:hover, .card-animate:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 6px 24px 0 rgb(0 0 0 / 0.08);
}
.btn-animate:active {
transform: scale(0.97);
}

/* 4. Friendly empty state illustration */
.empty-illustration {
width: 120px;
height: 120px;
margin: 0 auto 1.5rem auto;
opacity: 0.85;
display: flex;
align-items: center;
justify-content: center;
}

/* 5. Focus ring for drag handles */
.drag-handle:focus {
outline: 2px solid #a855f7;
outline-offset: 2px;
box-shadow: 0 0 0 3px #c084fc55;
}

/* 6. Sticky action button shadow */
.sticky-action {
box-shadow: 0 8px 32px 0 rgb(171 85 247 / 0.18), 0 1.5px 6px 0 rgb(0 0 0 / 0.08);
}

/* 7. Animated toast icon */
.toast-icon-animate {
animation: toast-pop 0.5s cubic-bezier(0.4,0,0.2,1);
}
@keyframes toast-pop {
0% { transform: scale(0.7) rotate(-10deg); opacity: 0; }
60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.no-scroll {
overflow: hidden !important;
height: 100vh !important;
}

/* --- NEW: Subscription page animations and effects --- */
@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}

.animate-shine {
  animation: shine 3s ease-in-out infinite;
}

.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Enhanced button hover effects */
.btn-gradient {
  background: linear-gradient(135deg, #f59e0b 0%, #a855f7 100%);
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #d97706 0%, #9333ea 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Floating animation for background elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Pulse animation with different delays */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-1000 {
  animation-delay: 1s;
}

/* Backdrop blur support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Enhanced shadows */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Gradient text support */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Smooth transitions for all interactive elements */
* {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}