/* Tailwind 自定义覆盖（从 <style type="text/tailwindcss"> 抽离） */

/* 工具类 */
.content-auto { content-visibility: auto; }
.transition-custom { transition: all 0.3s ease; }

/* 颜色与按钮实用类（补齐 Tailwind JIT 未生成的常用类） */
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.bg-primary\/10 { background-color: rgba(59,130,246,0.1); }
.hover\:bg-secondary:hover { background-color: var(--primary-600); }
.border-primary { border-color: var(--primary); }
.hover\:border-primary\/50:hover { border-color: rgba(59,130,246,0.5); }
.accent-primary { accent-color: var(--primary); }

/* 卡片悬浮交互，等价于 rounded-xl p-4 shadow-md hover:shadow-lg hover:-translate-y-1 */
.card-hover {
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  transform: translateY(0);
  position: relative;
  overflow: hidden;
}
.card-hover:hover {
  box-shadow: 0 10px 15px rgba(0,0,0,0.12);
  transform: translateY(-0.25rem);
}

/* 简化版本的工具卡片悬浮效果 */
.tool-card-hover {
  transition: all 0.3s ease;
}
.tool-card-hover:hover {
  box-shadow: 0 10px 15px rgba(0,0,0,0.12);
  transform: translateY(-0.25rem);
}

/* 导航项选中态 */
.nav-item-active {
  background-color: rgba(59,130,246,0.10);
  color: #3b82f6;
  font-weight: 500;
}

/* 广告占位（虚线边框+居中） */
.ad-placeholder {
  background-color: #f3f4f6; /* gray-100 */
  border: 1px dashed #d1d5db; /* gray-300 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af; /* gray-400 */
  font-weight: 500;
  border-radius: 0.5rem; /* rounded-lg */
}

/* 导航链接样式 */
.nav-link {
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover { color: #3b82f6; }

/* 深色模式下的导航链接 hover，与原逻辑一致 */
html.dark .nav-link:hover { color: #60a5fa; background-color: #1f2937; }

/* 深色模式覆盖，等价于原 @apply 规则 */
html.dark body {
  background-color: #111827; /* gray-900 */
  color: #f3f4f6; /* gray-100 */
}
html.dark .bg-white { background-color: #1f2937; /* gray-800 */ }
html.dark .bg-gray-50 { background-color: #111827; /* gray-900 */ }
html.dark .bg-gray-100 { background-color: #1f2937; /* gray-800 */ }
html.dark .bg-gray-200 { background-color: #374151; /* gray-700 */ }
html.dark .hover\:bg-gray-300:hover { background-color: #4b5563; /* gray-600 */ }
html.dark .text-gray-700 { color: #d1d5db; /* gray-300 */ }
html.dark .text-gray-800 { color: #f3f4f6; /* gray-100 */ }
html.dark .text-gray-600 { color: #d1d5db; /* gray-300 */ }
html.dark .text-gray-500 { color: #9ca3af; /* gray-400 */ }
html.dark .border-gray-100 { border-color: #374151; /* gray-700 */ }
html.dark .border-gray-200 { border-color: #374151; /* gray-700 */ }
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.5); }

html.dark input {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}
html.dark input::placeholder { color: #9ca3af; /* gray-400 */ }

html.dark select {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}

html.dark textarea {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}
html.dark textarea::placeholder { color: #9ca3af; /* gray-400 */ }

/* Dark mode: dropdown item hover background should be darker */
html.dark .hover\:bg-gray-50:hover { background-color: #0f172a; /* slate-900 */ }
html.dark .hover\:bg-gray-100:hover { background-color: #0f172a; /* slate-900 */ }
/* Specific dropdown menus for extra robustness */
html.dark #desktop-language-menu a:hover,
html.dark #mobile-language-menu a:hover,
html.dark .qs-menu a:hover { background-color: #0f172a; }

/* PC端：最近使用标题与操作按钮加大字号（增强选择器优先级）*/
@media (min-width: 768px) {
  /* 整体提升标题区域基准字号 */
  #recent-header { font-size: 1rem; }
  #recent-header h3 { font-size: 1rem !important; }
  /* 按钮与图标统一提升，覆盖 Tailwind 的 text-xs */
  #recent-header a { font-size: 0.875rem !important; padding: 0.5rem 0.75rem !important; line-height: 1.25rem !important; }
  #recent-header a i { font-size: 0.875rem !important; }
  /* 如果内部存在 .text-xs 类，强制提升到更大字号 */
  #recent-header .text-xs { font-size: 0.875rem !important; }
}

/* PC端：确保Hero标题字体大小正确（不受移动端样式影响） */
@media (min-width: 768px) {
  #hero-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  }
}

/* 统一工具页面主标题样式：确保所有工具页面标题大小一致 */
/* PC端：工具页面主标题使用统一的响应式字体大小 */
@media (min-width: 768px) {
  main.container h2.text-center,
  main.container .text-center h2,
  main h2[data-i18n-key$=".title"] {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
  }
}

/* 移动端：工具页面主标题保持合适的大小（不受html font-size影响） */
@media (max-width: 767.98px) {
  main.container h2.text-center,
  main.container .text-center h2,
  main h2[data-i18n-key$=".title"] {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
}

@media (min-width: 768px) {
  main.container h1.text-center,
  main.container .text-center h1,
  main h1[data-i18n-key^="toolPage"] {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 767.98px) {
  main.container h1.text-center,
  main.container .text-center h1,
  main h1[data-i18n-key^="toolPage"] {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
    line-height: 1.25 !important;
  }
}
/* 确保工具卡片图标背景色正确显示（修复图片工具等分类的背景色丢失问题） */
.card-hover[data-category="pdf"] .w-10.h-10 {
  background-color: rgb(254 226 226) !important; /* red-100 */
}
.card-hover[data-category="doc"] .w-10.h-10 {
  background-color: rgb(224 231 255) !important; /* indigo-100 */
}
.card-hover[data-category="image"] .w-10.h-10 {
  background-color: rgb(252 231 243) !important; /* pink-100 */
}
.card-hover[data-category="video"] .w-10.h-10 {
  background-color: rgb(243 232 255) !important; /* purple-100 */
}
.card-hover[data-category="file"] .w-10.h-10 {
  background-color: rgb(243 244 246) !important; /* gray-100 */
}
.card-hover[data-category="other"] .w-10.h-10 {
  background-color: rgb(254 249 195) !important; /* yellow-100 */
}

/* 确保工具卡片分类标签背景色正确显示（修复表格工具等分类标签的背景色丢失问题） */
.category-badge.bg-teal-50,
.category-badge[class*="bg-teal-50"] {
  background-color: rgb(240 253 250) !important; /* teal-50 */
  color: rgb(13 148 136) !important; /* teal-600 */
}
.category-badge.bg-red-50,
.category-badge[class*="bg-red-50"] {
  background-color: rgb(254 242 242) !important; /* red-50 */
  color: rgb(220 38 38) !important; /* red-600 */
}
.category-badge.bg-indigo-50,
.category-badge[class*="bg-indigo-50"] {
  background-color: rgb(238 242 255) !important; /* indigo-50 */
  color: rgb(79 70 229) !important; /* indigo-600 */
}
.category-badge.bg-pink-50,
.category-badge[class*="bg-pink-50"] {
  background-color: rgb(253 244 255) !important; /* pink-50 */
  color: rgb(219 39 119) !important; /* pink-600 */
}
.category-badge.bg-purple-50,
.category-badge[class*="bg-purple-50"] {
  background-color: rgb(250 245 255) !important; /* purple-50 */
  color: rgb(147 51 234) !important; /* purple-600 */
}
.category-badge.bg-gray-50,
.category-badge[class*="bg-gray-50"] {
  background-color: rgb(249 250 251) !important; /* gray-50 */
  color: rgb(55 65 81) !important; /* gray-700 */
}
.category-badge.bg-yellow-50,
.category-badge[class*="bg-yellow-50"] {
  background-color: rgb(254 252 232) !important; /* yellow-50 */
  color: rgb(202 138 4) !important; /* yellow-600 */
}

/* 分类筛选条吸顶阴影已移至 index.html 内联样式（使用 .sticky-shadow class） */

/* —— 页脚响应式栅格（避免 Tailwind JIT 对异步模板的遗漏）—— */
/* 父级三列（移动端单列，PC 三列），行距保持 1.5rem，列距更紧凑 */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem; /* mobile:略紧凑 */
  row-gap: 1.5rem;    /* ≈ gap-y-6 */
}
@media (min-width: 768px) {
  .footer-grid {
    /* 改为内容自适应列宽，避免三列平均分导致“看起来很空”的大间距 */
    grid-template-columns: minmax(0, 360px) minmax(0, 220px) minmax(0, 1fr);
    column-gap: 1rem; /* PC端：由此控制三栏之间的实际距离 */
    row-gap: 1.5rem;
  }
  /* 限制前两栏的最大宽度，使其更贴近截图的窄列布局 */
  .footer-grid > div:first-child { min-width: 0; }
  .footer-grid > div:nth-child(2) { min-width: 120px; }
  .footer-grid > div:nth-child(3) { overflow: hidden; }
}

/* 热门工具：改为类似 TinyWow 的多列文本列表布局 */
.footer-tool-columns {
  column-count: 2;
  column-gap: 1rem;
  list-style: none;
  padding-left: 0;
}
@media (min-width: 768px) {
  .footer-tool-columns { column-count: auto; column-width: 7rem; column-gap: 1.5rem; }
}
.footer-tool-columns li { break-inside: avoid; }
.footer-tool-columns a { display: block; margin-bottom: 0.5rem; color: var(--muted); text-decoration: none; }
.footer-tool-columns a:hover { color: var(--primary); }

/* “更多”链接：最后一项始终蓝色加粗 */
#footer-hot-tools li:last-child a {
  color: var(--primary) !important;
  font-weight: 600;
}

/* 页脚分栏标题：与“智码空间工具集”一致（text-lg + font-semibold），下间距更大 */
.footer-title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;    /* font-semibold */
  margin-bottom: 1.25rem; /* 比 mb-4 更大一些（≈mb-5） */
}

/* —— 文档对比工具：通用样式抽离 —— */
.drag-active { border-color: #3b82f6; background-color: #eff6ff; }

.bg-added { background-color: #D1FAE5; }
.border-added-border { border-color: #A7F3D0; }
.bg-removed { background-color: #FEE2E2; }
.border-removed-border { border-color: #FECACA; }
.bg-changed { background-color: #FEF3C7; }
.border-changed-border { border-color: #FDE68A; }

.diff-added { background-color: #D1FAE5; border-left: 4px solid #A7F3D0; padding: 0.5rem; margin: 0.25rem 0; }
.diff-removed { background-color: #FEE2E2; border-left: 4px solid #FECACA; padding: 0.5rem; margin: 0.25rem 0; }
.diff-changed { background-color: #FEF3C7; border-left: 4px solid #FDE68A; padding: 0.5rem; margin: 0.25rem 0; }
.diff-unchanged { padding: 0.5rem; margin: 0.25rem 0; }

.doc-preview { border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; height: 400px; display: flex; flex-direction: column; }
@media (min-width: 768px) { .doc-preview { height: 500px; } }
.preview-header { background-color: #f9fafb; padding: 0.5rem 1rem; border-bottom: 1px solid #e5e7eb; font-weight: 500; color: #374151; flex: none; }
.preview-content { padding: 1rem; overflow: auto; font-size: 0.875rem; flex: 1 1 auto; min-height: 0; }

.table-diff { border-collapse: collapse; width: 100%; }
  .table-diff th, .table-diff td { border: 1px solid #e5e7eb; padding: 0.25rem 0.5rem; font-size: 0.875rem; }
  .table-diff th { background-color: #f9fafb; }

@media (min-width: 768px) {
  /* 所有工具页的介绍描述 h2 统一样式（匹配 .desc 和 .header.desc） */
  main.container .text-center h2[data-i18n-key$=".header.desc"],
  main.container .text-center h2[data-i18n-key$=".desc"],
  main h2[data-i18n-key$=".header.desc"],
  main h2[data-i18n-key$=".desc"] {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 767.98px) {
  /* 所有工具页的介绍描述 h2 统一样式（匹配 .desc 和 .header.desc） */
  main.container .text-center h2[data-i18n-key$=".header.desc"],
  main.container .text-center h2[data-i18n-key$=".desc"],
  main h2[data-i18n-key$=".header.desc"],
  main h2[data-i18n-key$=".desc"] {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
}