/* 基础样式与小型工具集通用样式 */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-dark: #1e293b;
  --color-light: #f8fafc;
}

/* 禁止页面级横向滚动，避免全出血背景/固定层导致整体右滑 */
/* 使用 clip 而非 hidden，以保持 position:sticky 正常工作 */
html, body { overflow-x: clip; overscroll-behavior-x: none; }

/* 无滚动条（横向标签用） */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 渐变文案（LOGO标题用） */
.gradient-text {
  background: linear-gradient(135deg, #3B82F6 0%, #6366f1 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 卡片轻交互动效（非Tailwind场景） */
.card-hover-lite {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover-lite:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* 适配深色模式的基础覆盖（与Tailwind类共存） */
html.dark body {
  background-color: #0f172a; /* slate-900 */
  color: #e5e7eb; /* gray-200 */
}

/* 语言菜单和弹层的细节优化 */
.menu-elevated {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-radius: 12px;
}

/* 工具网格容器占位（如果启用数据渲染） */
#tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* 细节：按钮聚焦与可访问性 */
:where(button, a, input, select) { outline: none; }
:where(button, a) { cursor: pointer; }
:where(button, a):focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.4); }

/* 统一页头和页脚的容器样式，确保左右边距和自适应方式一致 */
/* 确保页头和页脚都使用相同的容器行为（Tailwind container 类会自动处理响应式最大宽度） */
header .container,
footer .container {
  /* 确保容器居中对齐，与 Tailwind 的 mx-auto 行为一致 */
  margin-left: auto;
  margin-right: auto;
  /* 确保左右内边距一致（px-4 = 1rem） */
  padding-left: 1rem;
  padding-right: 1rem;
}

/* PC端为首页全宽容器添加左右边距，避免贴边视觉 */
@media (min-width: 768px) {
  /* 直接作用于注入容器与内部section，提升选择器优先级并使用!important保证生效 */
  #all-tools-container,
  #all-tools-container > section#all-tools,
  .ad-placeholder {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* PC端：确保页头和页脚容器的左右内边距一致 */
  header .container,
  footer .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 兼容Tailwind v2与v3的调色差异：提供text-sky-600类以统一图标颜色 */
.text-sky-600 { color: #0284c7; }