/* 基础样式 */
.main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 导航样式 */
.nav-link {
    @apply text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200 px-4 py-2 rounded-lg hover:bg-gray-50;
}

.nav-link.active {
    @apply text-primary-600 bg-primary-50;
}

/* 移动端导航 */
.mobile-nav-link {
    @apply block text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200 px-4 py-3 border-b border-gray-100;
}

/* 按钮样式 */
.btn-primary {
    @apply inline-flex items-center px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-all duration-300 transform hover:scale-105;
}

.btn-secondary {
    @apply inline-flex items-center px-6 py-3 bg-gray-100 text-gray-900 font-semibold rounded-lg hover:bg-gray-200 transition-all duration-300;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-1;
}

/* 文本截断 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.4s ease-out;
}

/* Swiper自定义样式 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-swiper {
    @apply relative overflow-hidden rounded-none;
}

.hero-swiper .swiper-slide {
    @apply relative flex items-center justify-center;
}

.hero-swiper .swiper-slide img {
    @apply absolute inset-0 w-full h-full object-cover;
}

/* 现代化分页器样式 */
.swiper-pagination {
    @apply flex justify-center space-x-2;
}

.swiper-pagination-bullet {
    @apply w-3 h-3 bg-white/50 rounded-full transition-all duration-300 cursor-pointer;
}

.swiper-pagination-bullet-active {
    @apply bg-white scale-125 shadow-lg;
}

.swiper-pagination-bullet:hover {
    @apply bg-white/80 scale-110;
}

/* 导航按钮重置 */
.swiper-button-next:after,
.swiper-button-prev:after {
    content: none;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .hero-swiper .swiper-pagination {
        @apply bottom-4;
    }
    
    .swiper-pagination-bullet {
        @apply w-2 h-2;
    }
    
    #autoplay-toggle {
        @apply w-8 h-8 bottom-4 right-4;
    }
    
    #autoplay-toggle svg {
        @apply w-3 h-3;
    }
}

/* 悬停效果增强 */
.hero-swiper:hover .swiper-pagination-bullet {
    @apply bg-white/70;
}

.hero-swiper:hover .swiper-pagination-bullet-active {
    @apply bg-white;
}

/* 导航按钮优化 */
.swiper-button-next,
.swiper-button-prev {
    @apply text-white w-14 h-14 bg-black/20 rounded-full backdrop-blur-sm hover:bg-black/40 transition-all duration-300;
    margin-top: 0;
    transform: translateY(-50%);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    @apply scale-110;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    @apply text-xl font-bold;
}

/* 分页器优化 */
.swiper-pagination {
    @apply bottom-8;
}

.swiper-pagination-bullet {
    @apply bg-white/60 w-3 h-3 mx-2 transition-all duration-300;
}

.swiper-pagination-bullet-active {
    @apply bg-white w-8 rounded-full;
}

/* 文字动画 */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        @apply w-10 h-10;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        @apply text-base;
    }
    
    .swiper-pagination-bullet {
        @apply w-2 h-2;
    }
    
    .swiper-pagination-bullet-active {
        @apply w-6;
    }
}

/* 暂停自动播放指示器 */
.hero-swiper:hover .swiper-pagination-bullet {
    @apply bg-white/80;
}

.hero-swiper:hover .swiper-pagination-bullet-active {
    @apply bg-primary-400;
}

/* 响应式图片 */
.responsive-img {
    @apply w-full h-auto object-cover;
}

/* 加载动画 */
.loading {
    @apply inline-block w-4 h-4 border-2 border-current border-r-transparent rounded-full animate-spin;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* 文章内容样式 */
.markdown {
    @apply prose prose-lg max-w-none;
}

.markdown h1 {
    @apply text-3xl font-bold text-gray-900 mb-6;
}

.markdown h2 {
    @apply text-2xl font-bold text-gray-900 mb-4 mt-8;
}

.markdown h3 {
    @apply text-xl font-semibold text-gray-900 mb-3 mt-6;
}

.markdown p {
    @apply text-gray-700 leading-relaxed mb-4;
}

.markdown img {
    @apply rounded-lg shadow-md mx-auto;
}

.markdown blockquote {
    @apply border-l-4 border-primary-500 pl-4 italic text-gray-600 bg-gray-50 py-2 rounded-r-lg;
}

.markdown code {
    @apply bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm;
}

.markdown pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto;
}

.markdown pre code {
    @apply bg-transparent text-gray-100 p-0;
}

/* 分页样式 - 更具体的选择器 */
.pagination {
    @apply flex items-center justify-center mt-8;
    gap: 1rem; /* 使用gap替代space-x来确保间距 */
}

.pagination a,
.pagination span {
    @apply inline-block px-6 py-3 rounded-lg font-medium transition-all duration-200 min-w-[44px] text-center;
}

.pagination a {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-primary-50 hover:text-primary-600 hover:border-primary-300 shadow-sm hover:shadow-md;
}

.pagination span {
    @apply bg-primary-600 text-white border border-primary-600 shadow-md;
}

/* 移除默认的text-gray-300类的影响 */
.pagination.text-gray-300 a {
    @apply text-gray-700;
}

.pagination.text-gray-300 span {
    @apply text-white;
}

/* 响应式分页优化 */
@media (max-width: 640px) {
    .pagination {
        gap: 0.5rem;
    }
    
    .pagination a,
    .pagination span {
        @apply px-4 py-2 text-sm min-w-[36px];
    }
}

.pagination a {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-primary-50 hover:text-primary-600 hover:border-primary-300;
}

.pagination span {
    @apply bg-primary-600 text-white border border-primary-600;
}

/* 表单样式 */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200 resize-vertical;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* 工具提示 */
.tooltip {
    @apply relative;
}

.tooltip:hover .tooltip-text {
    @apply visible opacity-100;
}

.tooltip-text {
    @apply invisible opacity-0 absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 transition-all duration-200;
}

/* 徽章样式 */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.badge-primary {
    @apply bg-primary-100 text-primary-800;
}

.badge-secondary {
    @apply bg-gray-100 text-gray-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* 响应式工具类 */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
    
    .text-responsive {
        @apply text-sm;
    }
    
    .btn-responsive {
        @apply px-4 py-2 text-sm;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
    
    .dark-mode .card {
        @apply bg-gray-800 border-gray-700;
    }
    
    .dark-mode .nav-link {
        @apply text-gray-300 hover:text-white;
    }
}

/* 打印样式 */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

/* 侧边栏优化样式 */
#sidebar {
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.1);
}

/* 移动端菜单链接悬停效果 */
.mobile-nav-link:hover {
    transform: translateX(4px);
}

/* 防止页面滚动时的样式问题 */
body.overflow-hidden {
    overflow: hidden !important;
}

/* 响应式调整 */
@media (max-width: 480px) {
    #sidebar {
        width: 100vw;
    }
}

@media (max-width: 480px) {
    #sidebar {
        width: 85vw; /* 小屏幕上使用85%宽度 */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #sidebar {
        width: 60vw; /* 中等屏幕上使用60%宽度 */
    }
}