/* 主题变量与基础组件风格 */
:root {
  --primary: #3b82f6;
  --primary-600: #2563eb;
  --secondary: #64748b;
  --bg: #F9FAFB; /* Tailwind gray-100，更柔和的浅色背景 */
  --text: #1f2937; /* gray-800 */
  --muted: #6b7280; /* gray-500 */
  --border: #e5e7eb; /* gray-200 */
}

html.dark {
  --bg: #111827; /* gray-900，与 tw-overrides 保持一致 */
  --text: #e5e7eb; /* gray-200 */
  --muted: #9ca3af; /* gray-400 */
  --border: #334155; /* slate-700 */
}

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

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; border-radius: .5rem; padding: .625rem 1rem;
  border: 1px solid var(--border); transition: all .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-600); }
.btn-outline { background: transparent; color: var(--text); }

.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem;
}
.card-title { font-weight: 600; }
.card-desc { color: var(--muted); font-size: .875rem; }

.badge { display: inline-block; padding: .25rem .5rem; font-size: .75rem; border-radius: .375rem; background: #f1f5f9; color: #0f172a; }
html.dark .badge { background: #1f2937; color: #e5e7eb; }

/* 工具分类标签的风格（非Tailwind场景） */
.category-btn { background: #fff; color: var(--text); border: 1px solid var(--border); }
/* 确保分类按钮内的图标颜色不被父元素的color覆盖，允许Tailwind颜色类生效 */
/* 非激活状态下，图标使用其自身的Tailwind颜色类 */
.category-btn:not(.category-btn-active) i {
  color: inherit;
}
/* 明确指定各个颜色类在非激活状态下的颜色 */
.category-btn:not(.category-btn-active) i.text-orange-500 { color: rgb(249 115 22) !important; }
.category-btn:not(.category-btn-active) i.text-green-500 { color: rgb(34 197 94) !important; }
.category-btn:not(.category-btn-active) i.text-red-500 { color: rgb(239 68 68) !important; }
.category-btn:not(.category-btn-active) i.text-purple-500 { color: rgb(168 85 247) !important; }
.category-btn:not(.category-btn-active) i.text-pink-500 { color: rgb(236 72 153) !important; }
.category-btn:not(.category-btn-active) i.text-indigo-500 { color: rgb(99 102 241) !important; }
.category-btn:not(.category-btn-active) i.text-gray-500 { color: rgb(107 114 128) !important; }
.category-btn:not(.category-btn-active) i.text-yellow-500 { color: rgb(234 179 8) !important; }
.category-btn:not(.category-btn-active) i.text-sky-600 { color: rgb(2 132 199) !important; }
.category-btn-active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 分类按钮激活态与悬停修复：防止点击后颜色重叠，并移除悬停变色 */
.category-btn-active {
  background-color: rgb(59 130 246);
  color: #fff;
  border-color: rgb(59 130 246);
}
.category-btn-active:hover {
  background-color: rgb(59 130 246) !important;
  color: #fff !important;
  border-color: rgb(59 130 246) !important;
  /* 保留激活态的阴影效果，不覆盖 */
}
/* 激活态下图标与SVG统一为白色，避免与蓝底重叠冲突 */
.category-btn-active i,
.category-btn-active svg {
  color: #fff !important;
  /* 仅保留描边为白色，取消填充由下方规则控制 */
  stroke: currentColor;
}
/* 方案B：激活态下移除所有SVG内部填充，避免白色块 */
.category-btn-active svg * {
  fill: none !important;
}
/* —— 按分类定义激活态颜色方案 —— */
/* 所有分类按钮激活态统一添加缩放和阴影效果，与"最近使用"按钮保持一致 */
.category-btn-active[data-category="all"] {
  background-color: rgb(2 132 199) !important; /* sky-600 */
  border-color: rgb(2 132 199) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: none !important; /* 移除 box-shadow，避免与 filter 叠加 */
  filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.25)) !important; /* 只使用 filter 确保阴影不被裁剪 */
}
.category-btn-active[data-category="doc"] {
  background-color: rgb(99 102 241) !important; /* indigo-500 */
  border-color: rgb(99 102 241) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: none !important; /* 移除 box-shadow，避免与 filter 叠加 */
  filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.25)) !important; /* 只使用 filter 确保阴影不被裁剪 */
}
.category-btn-active[data-category="image"] {
  background-color: rgb(236 72 153) !important; /* pink-500 */
  border-color: rgb(236 72 153) !important;

  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: none !important; /* 移除 box-shadow，避免与 filter 叠加 */
  filter: drop-shadow(0 2px 8px rgba(236, 72, 153, 0.25)) !important; /* 只使用 filter 确保阴影不被裁剪 */
}
.category-btn-active[data-category="ofd"] {
  background-color: rgb(34 197 94) !important; /* green-500 */
  border-color: rgb(34 197 94) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 8px rgba(34, 197, 94, 0.25)) !important;
}
/* 其他工具分类按钮激活色：黄色，参考白板工具主题 */
.category-btn-active[data-category="other"] {
  background-color: rgb(202 138 4) !important; /* yellow-600 */
  border-color: rgb(202 138 4) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: none !important; /* 移除 box-shadow，避免与 filter 叠加 */
  filter: drop-shadow(0 2px 8px rgba(202, 138, 4, 0.25)) !important; /* 只使用 filter 确保阴影不被裁剪 */
}
/* 最近使用分类按钮激活色：橙色，与图标一致 */
.category-btn-active[data-category="recent"] {
  background-color: rgb(249 115 22) !important; /* orange-500 */
  border-color: rgb(249 115 22) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: none !important; /* 移除 box-shadow，避免与 filter 叠加 */
  filter: drop-shadow(0 2px 8px rgba(249, 115, 22, 0.25)) !important; /* 只使用 filter 确保阴影不被裁剪 */
}

/* 圆形最近使用按钮的图标在激活时变为白色 */
.category-btn-active[data-category="recent"] i {
  color: #fff !important;
}
/* 覆盖PDF分类按钮激活色为红色，与分类视觉一致 */
.category-btn-active[data-category="pdf"] {
  background-color: rgb(239 68 68) !important; /* red-500 */
  border-color: rgb(239 68 68) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: none !important; /* 移除 box-shadow，避免与 filter 叠加 */
  filter: drop-shadow(0 2px 8px rgba(239, 68, 68, 0.25)) !important; /* 只使用 filter 确保阴影不被裁剪 */
}
/* 保持激活态悬停不变色，不叠加 hover 效果，但保留缩放和阴影 */
.category-btn-active[data-category]:hover {
  /* 保留激活态的缩放和阴影效果，不恢复默认状态 */
  transform: scale(1.05) !important;
  box-shadow: none !important; /* 确保不使用 box-shadow */
  /* filter 由各自的 data-category 规则控制，不覆盖，确保阴影效果一致 */
}

/* 深色模式文本颜色适配：修复常见 Tailwind 文本色在暗色下过暗问题 */
html.dark .text-dark { color: var(--text) !important; }
html.dark .text-gray-800,
html.dark .text-gray-700 { color: var(--text) !important; }
html.dark .text-gray-600,
html.dark .text-gray-500 { color: var(--muted) !important; }

/* Light mode: unify footer text colors (including copyright) */
html:not(.dark) footer p,
html:not(.dark) footer li,
html:not(.dark) footer .text-gray-400,
html:not(.dark) footer .text-gray-500 {
  color: var(--muted) !important; /* uses gray-500 in light mode */
}