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

[v-cloak] { display: none; }

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #D1D1D6;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #3A3A3C;
}
::-webkit-scrollbar-thumb:hover {
  background: #8E8E93;
}

/* iOS/Mac 风格通用组件类 */
@layer components {
  .ios-card {
    @apply bg-white dark:bg-[#1C1C1E] rounded-2xl shadow-sm border border-gray-100 dark:border-white/5 transition-all hover:shadow-md;
  }
  
  .ios-input {
    @apply w-full px-3 py-2 bg-gray-50 dark:bg-white/10 border border-transparent rounded-lg text-sm transition-all focus:bg-white dark:focus:bg-black focus:ring-2 focus:ring-apple-blue/50 focus:border-apple-blue/50 outline-none;
  }
  
  .ios-btn-primary {
    @apply px-4 py-2 bg-apple-blue text-white rounded-lg text-sm font-medium shadow-sm transition-all hover:bg-blue-600 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .ios-btn-secondary {
    @apply px-4 py-2 bg-gray-100 dark:bg-white/10 text-gray-900 dark:text-white rounded-lg text-sm font-medium transition-all hover:bg-gray-200 dark:hover:bg-white/20 active:scale-95;
  }

  .ios-toggle {
    @apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-apple-blue focus:ring-offset-2 dark:focus:ring-offset-black;
  }
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.modal-enter-active, .modal-leave-active {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-enter-from, .modal-leave-to {
  opacity: 0;
  transform: scale(0.95);
}