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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', system-ui, sans-serif;
    @apply bg-gradient-to-br from-slate-50 to-slate-100 text-slate-900 antialiased;
  }
  
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-slate-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-sm hover:bg-slate-400 transition-colors;
  }
  
  ::selection {
    @apply bg-indigo-100 text-indigo-700;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply btn bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-700 hover:to-purple-700 focus:ring-indigo-500 shadow-md hover:shadow-lg;
  }
  
  .btn-secondary {
    @apply btn bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-500 shadow-sm hover:shadow-md;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden transition-all duration-200 hover:shadow-md;
  }
  
  .card-header {
    @apply px-4 py-3 border-b border-slate-200 bg-slate-50;
  }
  
  .card-body {
    @apply p-4;
  }
  
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-primary {
    @apply badge bg-indigo-100 text-indigo-800;
  }
  
  .badge-success {
    @apply badge bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }
  
  .badge-error {
    @apply badge bg-red-100 text-red-800;
  }
  
  .input {
    @apply block w-full px-3 py-2 border border-slate-300 rounded-lg text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors;
  }
  
  .navbar {
    @apply sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-slate-200 shadow-sm;
  }
  
  .nav-link {
    @apply text-slate-600 hover:text-indigo-600 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200;
  }
  
  .nav-link.active {
    @apply text-indigo-600 bg-indigo-50;
  }
  
  .ranking-card {
    @apply card hover:scale-[1.02] cursor-pointer group;
  }
  
  .ranking-position {
    @apply flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold;
  }
  
  .ranking-position.gold {
    @apply bg-gradient-to-r from-yellow-400 to-yellow-600 text-white;
  }
  
  .ranking-position.silver {
    @apply bg-gradient-to-r from-slate-300 to-slate-500 text-white;
  }
  
  .ranking-position.bronze {
    @apply bg-gradient-to-r from-amber-600 to-amber-800 text-white;
  }
  
  .ranking-position.default {
    @apply bg-slate-100 text-slate-600;
  }
  
  .stats-card {
    @apply card p-4 text-center;
  }
  
  .stats-number {
    @apply text-3xl font-bold text-indigo-600;
  }
  
  .stats-label {
    @apply text-sm text-slate-500 mt-1;
  }
  
  .category-card {
    @apply card p-4 text-center hover:scale-105 cursor-pointer group transition-all duration-300;
  }
  
  .category-icon {
    @apply text-4xl mb-3 group-hover:scale-110 transition-transform duration-300;
  }
  
  .hero-section {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white;
  }
  
  .section-title {
    @apply text-xl font-bold text-slate-900 mb-4;
  }
  
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
  }
  
  .loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600;
  }
  
  /* 新增的配色相关组件 */
  .search-container {
    @apply bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50;
  }
  
  .search-input-enhanced {
    @apply w-full px-6 py-4 text-lg border-2 border-indigo-200 rounded-full focus:border-indigo-500 focus:outline-none transition-colors duration-200 pl-14 shadow-sm;
  }
  
  .search-button-enhanced {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-6 py-2 rounded-full transition-colors duration-200 shadow-md;
  }
  
  .category-card-enhanced {
    @apply group bg-gradient-to-br from-white to-indigo-50 hover:from-indigo-50 hover:to-purple-50 rounded-xl p-5 text-center transition-all duration-300 hover:shadow-lg border border-indigo-100 hover:border-indigo-200 hover:-translate-y-1;
  }
  
  .latest-update-card {
    @apply block bg-gradient-to-br from-white to-blue-50 rounded-xl p-6 hover:shadow-lg hover:scale-[1.02] transition-all duration-300 cursor-pointer border border-blue-100;
  }
  
  .editor-pick-card {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 border border-indigo-100;
  }
  
  .stats-overview-card {
    @apply text-center bg-white/10 backdrop-blur-sm rounded-xl p-6 hover:bg-white/20 transition-all duration-300;
  }
  
  .featured-ranking-card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-indigo-100;
  }
  
  .feature-card-enhanced {
    @apply group bg-gradient-to-br rounded-2xl p-7 text-center hover:shadow-xl transition-all duration-300 border hover:-translate-y-2;
  }
  
  /* 侧边栏组件样式 */
  .sidebar {
    @apply bg-gradient-to-b from-white to-slate-50 shadow-xl border-r border-slate-200 z-50;
  }
  
  .sidebar-header {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-4;
  }
  
  .sidebar-overlay {
    @apply bg-black bg-opacity-50 z-40;
  }
  
  .sidebar-nav-item {
    @apply flex items-center space-x-3 p-3 rounded-lg text-slate-700 hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 hover:text-indigo-700 transition-all duration-200 ease-in-out transform hover:scale-[1.02] hover:shadow-sm;
  }
  
  .sidebar-nav-item.active {
    @apply bg-gradient-to-r from-indigo-100 to-purple-100 text-indigo-700 font-medium border-l-4 border-indigo-500;
  }
  
  .sidebar-nav-icon {
    @apply text-xl transition-transform duration-200 group-hover:scale-110;
  }
  
  .sidebar-nav-text {
    @apply font-medium text-sm md:text-base;
  }
  
  .sidebar-category-count {
    @apply ml-auto text-xs bg-gradient-to-r from-indigo-100 to-purple-100 text-indigo-700 rounded-full px-2 py-1 font-medium;
  }
  
  /* 侧边栏分隔线 */
  .sidebar-divider {
    @apply border-t border-slate-200 my-2;
  }
  
  /* 侧边栏滚动条 */
  .sidebar-content::-webkit-scrollbar {
    width: 4px;
  }
  
  .sidebar-content::-webkit-scrollbar-track {
    @apply bg-slate-100 rounded-full;
  }
  
  .sidebar-content::-webkit-scrollbar-thumb {
    @apply bg-indigo-300 rounded-full hover:bg-indigo-400 transition-colors;
  }
  
  /* 标签标题样式 */
  .sidebar-title {
    @apply text-sm font-semibold text-gray-500 uppercase tracking-wider;
  }
  
  .sidebar-count {
    @apply text-xs text-gray-400;
  }
  
  /* 标签网格布局 */
  .sidebar-tags-grid {
    @apply grid grid-cols-2 gap-2;
  }
  
  /* 标签项紧凑样式 */
  .sidebar-tag-item {
    @apply flex items-center p-2 rounded-lg text-slate-700 hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 hover:text-indigo-700 transition-all duration-200 ease-in-out text-sm;
  }
  
  /* 响应式字体大小调整类 */
  .responsive-title {
    @apply text-2xl md:text-3xl font-bold;
  }
  
  .responsive-subtitle {
    @apply text-lg md:text-xl font-semibold;
  }
  
  .responsive-text {
    @apply text-base md:text-lg;
  }
  
  .responsive-description {
    @apply text-sm md:text-base text-gray-600;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent;
  }
  
  .glass {
    @apply bg-white/80 backdrop-blur-sm;
  }
  
  .shadow-glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.5s ease-out;
  }
  
  /* 搜索建议样式 */
  .search-suggestions {
    @apply absolute top-full left-0 right-0 bg-white border border-slate-200 rounded-lg shadow-lg mt-1 z-50 max-h-80 overflow-y-auto;
  }
  
  .suggestion-item {
    @apply flex items-center px-4 py-3 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-b-0 transition-colors duration-150;
  }
  
  .suggestion-item.selected {
    @apply bg-indigo-50 text-indigo-700;
  }
  
  .suggestion-item.history {
    @apply text-slate-600;
  }
  
  .suggestion-item.hot {
    @apply text-orange-600;
  }
  
  .suggestion-icon {
    @apply mr-3 text-slate-400;
  }
  
  .suggestion-text {
    @apply flex-1 text-sm;
  }
  
  .suggestion-count {
    @apply text-xs text-slate-400 ml-2;
  }
  
  .suggestion-remove {
    @apply ml-2 text-slate-400 hover:text-red-500 cursor-pointer transition-colors;
  }
  
  /* 搜索高亮 */
  .suggestion-text mark {
    @apply bg-yellow-200 text-yellow-800 px-1 rounded;
  }
  
  .suggestion-item.fuzzy {
    @apply text-blue-600;
  }
  
  .suggestion-item.completion {
    @apply text-purple-600;
  }
  
  .suggestion-icon {
    @apply mr-3 text-lg flex-shrink-0;
  }
  
  .suggestion-text {
    @apply flex-1 text-sm font-medium;
  }
  
  .suggestion-text mark {
    @apply bg-yellow-200 text-yellow-800 px-1 rounded;
  }
  
  .suggestion-count {
    @apply text-xs text-slate-400 ml-2;
  }
  
  .suggestion-remove {
    @apply ml-2 text-slate-400 hover:text-red-500 font-bold text-lg leading-none cursor-pointer transition-colors duration-150;
  }
  
  .suggestion-remove:hover {
    @apply bg-red-50 rounded-full w-5 h-5 flex items-center justify-center;
  }
  
  /* 搜索表单样式增强 */
  .search-form {
    @apply relative;
  }
  
  .search-input {
    @apply input pr-12;
  }
  
  .search-input:focus + .search-suggestions {
    @apply block;
  }
  
  /* 高级搜索过滤器样式 */
  .search-filters {
    @apply bg-white border border-slate-200 rounded-lg p-4 mb-6 shadow-sm;
  }
  
  .filter-group {
    @apply mb-4 last:mb-0;
  }
  
  .filter-label {
    @apply block text-sm font-medium text-slate-700 mb-2;
  }
  
  .filter-select {
    @apply input;
  }
  
  .filter-range {
    @apply flex items-center space-x-2;
  }
  
  .filter-range input {
    @apply input w-20 text-center;
  }
  
  .filter-buttons {
    @apply flex space-x-2 mt-4;
  }
  
  /* 搜索结果高亮样式 */
  .search-highlight {
    @apply bg-yellow-200 text-yellow-800 px-1 rounded font-medium;
  }
  
  /* 搜索统计样式 */
  .search-stats {
    @apply bg-slate-50 border border-slate-200 rounded-lg p-4 mb-6;
  }
  
  .search-stats-item {
    @apply flex justify-between items-center py-2 border-b border-slate-200 last:border-b-0;
  }
  
  .search-stats-label {
    @apply text-sm text-slate-600;
  }
  
  .search-stats-value {
    @apply text-sm font-medium text-slate-900;
  }
  
  /* 智能推荐样式 */
  .smart-recommendations {
    @apply bg-indigo-50 border border-indigo-200 rounded-lg p-4 mt-6;
  }
  
  .recommendation-title {
    @apply text-sm font-medium text-indigo-800 mb-3;
  }
  
  .recommendation-list {
    @apply flex flex-wrap gap-2;
  }
  
  .recommendation-item {
    @apply inline-flex items-center px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm hover:bg-indigo-200 cursor-pointer transition-colors duration-150;
  }
  
  /* 响应式设计 */
  @media (max-width: 640px) {
    .search-suggestions {
      @apply max-h-60;
    }
    
    .suggestion-item {
      @apply px-3 py-2;
    }
    
    .suggestion-text {
      @apply text-xs;
    }
    
    .search-filters {
      @apply p-3;
    }
    
    /* 移动端字体大小调整 */
    .responsive-title {
      @apply text-xl;
    }
    
    .responsive-subtitle {
      @apply text-base;
    }
    
    .responsive-text {
      @apply text-sm;
    }
    
    .responsive-description {
      @apply text-xs;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 通知样式 */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateX(0);
}

.notification.error {
    background: #f44336;
}

.notification.warning {
    background: #ff9800;
}

.notification.info {
    background: #2196F3;
}

/* 回到顶部按钮样式 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
    transform: translateY(-2px) scale(1.05);
}

.back-to-top:active {
    transform: translateY(0) scale(0.95);
    transition: all 0.1s ease;
}

.back-to-top::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: conic-gradient(from -90deg, transparent 0deg, transparent var(--progress, 0deg), #667eea var(--progress, 0deg), #667eea 360deg);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.back-to-top.with-progress::before {
    opacity: 1;
}

/* 添加脉冲动画 */
.back-to-top::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.3);
    transform: translate(-50%, -50%) scale(0);
    animation: pulse 2s infinite;
    z-index: -2;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .back-to-top {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .back-to-top {
        background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);
        box-shadow: 0 4px 20px rgba(76, 81, 191, 0.4);
    }
    
    .back-to-top:hover {
        background: linear-gradient(135deg, #434190 0%, #4c1d95 100%);
        box-shadow: 0 6px 25px rgba(76, 81, 191, 0.6);
    }
}