@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* 暗黑模式过渡动画 */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@keyframes screen-time-shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.screen-time-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.7) 0%, rgba(241, 245, 249, 0.95) 50%, rgba(226, 232, 240, 0.7) 100%);
}

.screen-time-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  animation: screen-time-shimmer 1.8s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  .screen-time-skeleton {
    background: linear-gradient(90deg, rgba(51, 65, 85, 0.7) 0%, rgba(71, 85, 105, 0.95) 50%, rgba(51, 65, 85, 0.7) 100%);
  }

  .screen-time-skeleton::after {
    background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.18) 50%, transparent 100%);
  }
}