:root {
  --card-bg: #ffffff;
  --text-color: #111827;
  --text-light: #6B7280;
  --border-color: #E5E7EB;
  --bg-color: #f9fafb;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.dark {
  --card-bg: #1F2937;
  --text-color: #F9FAFB;
  --text-light: #9CA3AF;
  --border-color: #374151;
  --bg-color: #111827;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* 全局背景与文本颜色 */
html {
  color-scheme: light;
}

.dark html {
  color-scheme: dark;
}

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* 强制覆盖Tailwind类 */
.bg-gray-50 {
  background-color: var(--bg-color) !important;
}

.dark .bg-gray-900 {
  background-color: var(--bg-color) !important;
}

.text-gray-900 {
  color: var(--text-color) !important;
}

.dark .text-gray-100 {
  color: var(--text-color) !important;
}

/* 站点卡片样式 */
.site-card {
  background-color: var(--card-bg) !important;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
}

.site-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-0.25rem);
}

.site-card img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

/* 链接颜色修复 */
.site-card a, 
.font-medium.text-blue-600 {
  font-weight: 500 !important;
  color: #3B82F6 !important;
}

.dark .site-card a, 
.dark .font-medium.text-blue-600 {
  color: #60A5FA !important;
}

.site-card p, 
.text-xs.text-gray-500 {
  font-size: 0.75rem !important;
  color: #6B7280 !important;
}

.dark .site-card p, 
.dark .text-xs.text-gray-500 {
  color: #9CA3AF !important;
}

/* 分类标题样式修复 */
h2, 
.text-gray-800, 
.text-xl.font-bold.text-gray-800, 
.text-xl.md\:text-2xl.font-bold.text-gray-800 {
  color: #111827 !important;
}

.dark h2, 
.dark .text-gray-800, 
.dark .text-xl.font-bold.text-gray-800,
.dark .text-white, 
.dark .text-xl.md\:text-2xl.font-bold.text-white {
  color: #F9FAFB !important;
}

/* 分类图标颜色修复 */
.category-icon, 
.text-gray-700 {
  color: #4B5563 !important;
}

.dark .category-icon, 
.dark .text-gray-300, 
.dark .text-gray-700.dark\:text-gray-300 {
  color: #9CA3AF !important;
}

/* 侧边栏文本颜色修复 */
.text-gray-700 {
  color: #4B5563 !important;
}

.dark .text-gray-300 {
  color: #D1D5DB !important;
}

/* 侧边栏图标颜色修复 */
.text-gray-600 {
  color: #4B5563 !important;
}

.dark .text-gray-400 {
  color: #9CA3AF !important;
}

/* 主题切换按钮 */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.theme-toggle-btn:hover {
  transform: rotate(15deg);
  box-shadow: var(--shadow-md);
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.theme-toggle-btn i {
  font-size: 1.25rem;
}

.theme-toggle-btn .dark-icon,
.theme-toggle-btn .light-icon {
  color: #4B5563 !important;
}

.dark .theme-toggle-btn .dark-icon,
.dark .theme-toggle-btn .light-icon {
  color: #D1D5DB !important;
}

/* 页面结构样式 */
#sidebar, .bg-white {
  background-color: var(--card-bg) !important;
  border-right: 1px solid var(--border-color);
}

.dark #sidebar, .dark .bg-gray-800 {
  background-color: var(--card-bg) !important;
}

#header, .bg-white {
  background-color: var(--card-bg) !important;
  border-bottom-color: var(--border-color);
}

.dark #header, .dark .bg-gray-800 {
  background-color: var(--card-bg) !important;
}

/* 修复导航悬停效果 */
.hover\:bg-gray-100:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.dark .hover\:bg-gray-700:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 汉堡菜单按钮样式 */
#hamburger-btn {
  margin-right: 0.5rem;
}

/* 确保在窄屏下侧边栏正确隐藏和显示 */
@media (max-width: 1023px) {
  #sidebar {
    transform: translateX(-100%);
    z-index: 40;
    width: 80%;
    max-width: 16rem;
  }
  
  #sidebar.translate-x-0 {
    transform: translateX(0);
  }
  
  #overlay {
    z-index: 30;
  }
  
  .overflow-hidden {
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  #hamburger-btn {
    display: none;
  }
}