flnxi-Wu/app/globals.css

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 250, 250, 250;
  --background-end-rgb: 255, 255, 255;
}

html {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 18, 18, 18;
    --background-end-rgb: 0, 0, 0;
  }

  html {
    color-scheme: dark;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

/* Apple-style button */
.btn-apple {
  @apply px-6 py-2.5 rounded-apple font-medium transition-all duration-200 shadow-apple hover:shadow-apple-lg;
}

.btn-primary {
  @apply btn-apple bg-gray-900 dark:bg-gray-700 text-white hover:bg-gray-800 dark:hover:bg-gray-600 active:scale-95;
}

.btn-secondary {
  @apply btn-apple bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 active:scale-95;
}

.btn-danger {
  @apply btn-apple bg-red-600 dark:bg-red-700 text-white hover:bg-red-700 dark:hover:bg-red-600 active:scale-95;
}

/* Apple-style input */
.input-apple {
  @apply w-full px-4 py-3 rounded-apple border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-gray-900 dark:focus:border-gray-400 focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-600 outline-none transition-all;
}

/* Apple-style card */
.card-apple {
  @apply bg-white dark:bg-gray-800 rounded-apple shadow-apple hover:shadow-apple-lg transition-all duration-300 border border-transparent dark:border-gray-700;
}

/* Scrollbar styling (light & dark) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.6);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

@media (prefers-color-scheme: dark) {
  *::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.7);
    border-color: rgba(15, 23, 42, 0.9);
  }
}

body {
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 114, 128, 0.6) transparent;
}

@media (prefers-color-scheme: dark) {
  body {
    scrollbar-color: rgba(148, 163, 184, 0.7) rgba(15, 23, 42, 0.9);
  }
}

@keyframes modal-overlay-apple {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(25px);
  }
}

@keyframes modal-content-apple {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
    filter: blur(12px);
  }
  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-overlay-apple {
  animation: modal-overlay-apple 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.modal-content-apple {
  position: relative;
  animation: modal-content-apple 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top center;
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.22),
    0 6px 24px rgba(15, 23, 42, 0.12);
}

.dark .modal-content-apple {
  box-shadow:
    0 32px 110px rgba(0, 0, 0, 0.8),
    0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-content-apple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.35),
    0 1px 0 rgba(15, 23, 42, 0.08);
  pointer-events: none;
}

.dark .modal-content-apple::after {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.4);
}