/* 自定义样式 */
/* 阿里妈妈字体 */
* {
  font-family: 'Alibaba PuHuiTi', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root {
  --primary-color: #3b82f6;
  --primary-color-light: #60a5fa;
  --primary-color-dark: #2563eb;
  --secondary-color: #8b5cf6;
}

/* 主题变量 */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --theme-color: var(--primary-color);
  --theme-color-hover: var(--primary-color-light);
}

[data-theme="dark"] {
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --border-color: #374151;
  --theme-color: var(--primary-color-light);
  --theme-color-hover: var(--primary-color);
}

/* 主题色类 */
.theme-color {
  color: var(--theme-color) !important;
}

.theme-color svg,
svg.theme-color {
  color: var(--theme-color) !important;
  stroke: currentColor !important;
}

.theme-color-hover:hover {
  color: var(--theme-color-hover) !important;
}

.theme-color-hover:hover svg,
svg.theme-color-hover:hover {
  color: var(--theme-color-hover) !important;
  stroke: currentColor !important;
}

.theme-bg {
  background-color: var(--theme-color) !important;
}

.theme-bg-hover:hover {
  background-color: var(--theme-color-hover) !important;
}

.theme-bg-secondary {
  background-color: var(--theme-color-hover) !important;
}

.theme-bg-secondary-hover:hover {
  background-color: var(--theme-color) !important;
}

/* 主题色焦点环 */
.theme-focus-ring:focus {
  --tw-ring-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  outline: none;
  box-shadow: 0 0 0 2px var(--theme-color) !important;
}

/* 平滑过渡 */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 工具卡片悬停效果 */
.tool-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
}

/* 固定导航栏 - 毛玻璃效果 */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] header {
  background-color: rgba(31, 41, 55, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 为固定header预留空间 */
main {
  padding-top: 80px !important; /* 根据header高度调整，确保不被遮挡 */
}