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

/* 自定义样式 */
.auth-container {
    @apply max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden p-6 mt-10;
}
.form-group {
    @apply mb-4;
}
label {
    @apply block text-gray-700 mb-2;
}
input, select, textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-200;
}
button {
    @apply bg-indigo-500 text-white py-2 rounded-md hover:bg-indigo-600 transition duration-300 shadow-md hover:shadow-lg;
}
.flash {
    @apply p-3 mb-4 rounded-md;
}
.success {
    @apply bg-green-100 text-green-800;
}
.error {
    @apply bg-red-100 text-red-800;
}
.novel-list {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
}
.novel-item {
    @apply bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 transform hover:-translate-y-1;
}
.audio-controls {
    @apply flex items-center justify-between mt-4;
}
.timer-control {
    @apply flex items-center space-x-2;
}
.timer-button {
    @apply px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md transition duration-200;
}
.timer-button.active {
    @apply bg-indigo-500 text-white;
}

/* 现代清爽风格样式 */
.modern-primary {
    @apply bg-indigo-500;
}
.modern-secondary {
    @apply bg-indigo-100;
}
.modern-text-primary {
    @apply text-indigo-500;
}
.modern-text-secondary {
    @apply text-indigo-800;
}
.modern-button {
    @apply bg-indigo-500 text-white rounded-full px-6 py-2 hover:bg-indigo-600 transition duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
}
.modern-button-outline {
    @apply border border-indigo-500 text-indigo-500 rounded-full px-6 py-2 hover:bg-indigo-50 transition duration-300;
}
.modern-card {
    @apply bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden transition duration-300 hover:shadow-xl transform hover:-translate-y-1;
}
.modern-tab {
    @apply px-4 py-2 text-gray-600 hover:text-indigo-500 transition duration-200;
}
.modern-tab.active {
    @apply text-indigo-500 border-b-2 border-indigo-500;
}
.modern-search-bar {
    @apply flex items-center bg-white rounded-full px-4 py-2 border border-gray-200 shadow-sm focus-within:shadow-md transition duration-300;
}
.modern-search-bar input {
    @apply bg-transparent border-none focus:ring-0;
}
.modern-tag {
    @apply bg-indigo-50 text-indigo-500 rounded-full px-3 py-1 text-sm hover:bg-indigo-100 transition duration-200;
}
.modern-progress {
    @apply appearance-none h-2 rounded-full bg-gray-200;
}
.modern-progress::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 rounded-full bg-indigo-500 cursor-pointer shadow-md;
}
.modern-progress::-moz-range-thumb {
    @apply w-4 h-4 rounded-full bg-indigo-500 cursor-pointer border-none shadow-md;
}

/* 定时控制组件样式 */
#timer-control-wrapper select {
    @apply appearance-none cursor-pointer;
}
#timer-control-wrapper select option {
    @apply py-2 cursor-pointer;
}

/* 统一按钮尺寸 */
.playback-controls button {
    @apply min-w-[80px] text-center;
}

/* 进度条动画效果 */
#progress-bar {
    @apply transition-all duration-200 ease-out;
}

/* 卡片悬停效果 */
.himalaya-card {
    @apply bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden transition duration-300 hover:shadow-xl transform hover:-translate-y-1;
}

/* 喜马拉雅风格样式修改为现代清爽风格 */
.himalaya-primary {
    @apply bg-indigo-500;
}
.himalaya-secondary {
    @apply bg-indigo-100;
}
.himalaya-text-primary {
    @apply text-indigo-500;
}
.himalaya-text-secondary {
    @apply text-indigo-800;
}
.himalaya-button {
    @apply bg-indigo-500 text-white rounded-full px-6 py-2 hover:bg-indigo-600 transition duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
}
.himalaya-button-outline {
    @apply border border-indigo-500 text-indigo-500 rounded-full px-6 py-2 hover:bg-indigo-50 transition duration-300;
}
.himalaya-tag {
    @apply bg-indigo-50 text-indigo-500 rounded-full px-3 py-1 text-sm hover:bg-indigo-100 transition duration-200;
}
.himalaya-progress::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 rounded-full bg-indigo-500 cursor-pointer shadow-md;
}
.himalaya-progress::-moz-range-thumb {
    @apply w-4 h-4 rounded-full bg-indigo-500 cursor-pointer border-none shadow-md;
}

/* 通知样式优化 */
#player-notification {
    @apply bg-indigo-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-20 opacity-0;
}

#error-notification {
    @apply bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-20 opacity-0;
}

/* 音频播放器优化 */
.audio-player {
    @apply rounded-lg overflow-hidden;
}

.progress-container {
    @apply w-full h-4 bg-gray-200 rounded-full my-3 overflow-hidden cursor-pointer shadow-inner;
}

/* 加载动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

main section {
    @apply animation-delay-0 animation-duration-300 animation-fill-mode-both opacity-0;
    animation-name: fadeIn;
}

main section:nth-child(2) { animation-delay: 0.1s; }
main section:nth-child(3) { animation-delay: 0.2s; }
main section:nth-child(4) { animation-delay: 0.3s; }
main section:nth-child(5) { animation-delay: 0.4s; }