:root {
  /* Z-index 层级 */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1080;
  --z-header: 1090;

  /* 尺寸与布局 */
  --header-height: 64px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 64px;

  /* 间距系统（8px 基础） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-floating: 0 4px 20px rgba(0, 125, 255, 0.15);

  /* 字体 */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* 字号 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* 主题色（亮色） */
  --color-primary: #019b98;
  --color-primary-hover: #55ccc9;
  --color-primary-light: #c1ffff;
  --color-secondary: #ffbfab;
  --color-accent: #dd0025;

  /* 文本与背景 */
  --text-primary: #014e60;
  --text-secondary: #3f7a8d;
  --text-tertiary: #3f7a8d;
  --text-inverse: #ffffff;
  --bg-primary: #fbfbfb;
  --bg-secondary: #f1f1f1;
  --bg-tertiary: #c8c8c8;
  --bg-card: rgba(255, 255, 255, 0.8);
  --bg-overlay: rgba(255, 255, 255, 0.95);

  /* 边框 */
  --border-light: #e5e5e5;
  --border-medium: #d4d4d4;
  --border-dark: #a3a3a3;

  /* 动画时长与缓动 */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  --easing-linear: linear;
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-harmony: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =====================
   Sticky 搜索容器（吸顶模式）
   ===================== */
#sticky-search-shell {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  display: none;
}

/* 启用 sticky 搜索时，主容器继续保留头部高度，避免跳动 */
body.search-sticky-active .main-container {
  padding-top: var(--header-height);
}

/* 提升建议层级，确保在 sticky 容器内仍覆盖内容 */
#sticky-search-shell .search-suggestions,
.search-sticky-active .search-suggestions {
  z-index: calc(var(--z-fixed) + 1);
}

/* 深色主题 */
[data-theme="dark"] {
  /* 暗色主题变量覆盖 */
  --color-primary: #2C3A4F;
  --color-primary-hover: #56647b;
  --color-primary-light: #b4c2dc;
  --color-accent: #FF4D4D;
  --color-secondary: #ffecda;

  --text-primary: #FFFFFF;
  --text-secondary: #e0e0e0;
  --text-tertiary: #e0e0e0;
  --text-inverse: #0d0d0d;

  --bg-primary: #1A1F2B;
  --bg-secondary: #292e3b;
  --bg-tertiary: #414654;
  --bg-card: rgba(45, 45, 45, 0.8);
  --bg-overlay: rgba(26, 26, 26, 0.95);

  --border-light: #404040;
  --border-medium: #525252;
  --border-dark: #737373;

  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* ==========================================
   基础样式重置与设置
   ========================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--duration-normal) var(--easing-out),
              color var(--duration-normal) var(--easing-out);
  overflow-x: hidden;
}

/* 搜索聚焦全屏展开支持 */
body.search-focused::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: var(--z-header);
  pointer-events: none;
}

body.search-focused {
  overflow: hidden;
}

/* 可访问性增强 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 选择文本样式 */
::selection {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-normal) var(--easing-out);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark);
}

/* ==========================================
   沉浸式顶栏样式
   ========================================== */

.immersive-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg-overlay);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
  z-index: var(--z-header);
  transition: transform var(--duration-normal) var(--easing-out);
}

.immersive-header.hidden {
  transform: translateY(-100%);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--space-6);
  gap: var(--space-6);
}

/* 左区 - Logo，无面包屑 */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  flex-shrink: 0;
  line-height: 1.5;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-out);
  gap: 4px;
}

.mobile-menu-btn:hover {
  background: var(--bg-secondary);
}

.mobile-menu-btn .btn-dot {
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all var(--duration-fast) var(--easing-out);
  transform-origin: center;
}

.mobile-menu-btn[aria-expanded="true"] .btn-dot:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu-btn[aria-expanded="true"] .btn-dot:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn[aria-expanded="true"] .btn-dot:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.logo-section {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--duration-fast) var(--easing-out);
  margin-left: 0;
}

.logo-section:hover {
  opacity: 0.8;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-primary); /* 统一：移除渐变，跟随主题主色 */
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

/* 统一：不再使用 emoji 占位，允许插入 SVG */
.logo-icon::after {
  content: '';
}

/* 支持在 .logo-icon 中放置 .logo-svg 矢量图标 */
.logo-svg {
  width: 70%;
  height: 70%;
  display: block;
  transition: transform var(--duration-normal) var(--easing-harmony);
  color: white;
  fill: currentColor;
}

.logo-section:hover .logo-svg {
  transform: scale(1.08);
}

.logo-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.5;
}

/* .breadcrumb 被移除 */
/* 保留占位注释，避免影响其他样式引用 */
.breadcrumb { display: none !important; }

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-out);
}

.breadcrumb a:hover {
  color: var(--text-primary);
}

.breadcrumb span[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 500;
}

.breadcrumb-item {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--easing-out);
}

.breadcrumb-item.current {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
}

/* 中区 - 智能搜索 */
.header-center {
  flex: 1;
  max-width: 600px;
  min-width: 0;
}

.search-container {
  position: relative;
  width: 100%;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  z-index: var(--z-sticky);
  transition: all var(--duration-normal) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out),
              transform var(--duration-normal) var(--easing-out);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.search-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-floating);
  transform: translateY(-1px);
}

.search-input-wrapper.focused {
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), inset 0 0 0 1px var(--border-light);
  transform: translateZ(0);
}

.search-icon {
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  margin-right: var(--space-3);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.voice-input-btn {
  background: none;
  border: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--duration-normal) var(--easing-out);
}

.voice-input-btn:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.voice-input-btn svg {
  width: 16px;
  height: 16px;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-2);
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: all var(--duration-normal) var(--easing-out);
}

.search-suggestions.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* 右区 - 操作按钮 */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.theme-toggle,
.language-toggle,
.notification-btn,
.user-avatar,
.admin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--easing-out);
  position: relative;
}

.admin-toggle:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }
.admin-toggle svg { width: 20px; height: 20px; }

.theme-toggle:hover,
.language-toggle:hover,
.notification-btn:hover,
.user-avatar:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-toggle svg,
.language-toggle .lang-icon,
.notification-btn svg {
  width: 20px;
  height: 20px;
}

/* 主题图标切换 */
[data-theme="light"] .moon-icon,
[data-theme="dark"] .sun-icon {
  display: none;
}

/* 语言切换按钮样式 */
.language-toggle {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-normal) var(--easing-out);
}

.language-toggle:hover {
  background: linear-gradient(135deg, var(--color-primary-light), var(--bg-tertiary));
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.language-toggle .lang-icon {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  transition: all var(--duration-fast) var(--easing-out);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
}

.language-toggle .zh-icon {
  opacity: 1;
  transform: translateY(0) scale(1);
  color: var(--color-primary);
  background: rgba(1, 155, 152, 0.1);
}

.language-toggle .en-icon {
  opacity: 0;
  transform: translateY(100%) scale(0.8);
  color: var(--color-accent);
  background: rgba(221, 0, 37, 0.1);
}

.language-toggle[data-current-lang="en"] .zh-icon {
  opacity: 0;
  transform: translateY(-100%) scale(0.8);
}

.language-toggle[data-current-lang="en"] .en-icon {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 语言切换动画效果 */
.language-toggle:active {
  transform: translateY(0) scale(0.95);
}

.language-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, transparent 70%);
  border-radius: var(--radius-md);
  transform: translate(-50%, -50%);
  transition: all var(--duration-fast) var(--easing-out);
  opacity: 0;
  z-index: -1;
}

.language-toggle:hover::before {
  width: 60px;
  height: 60px;
  opacity: 0.1;
}

/* 通知徽章 */
.notification-center {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-md);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 用户头像 */
.user-profile .user-avatar {
  width: auto;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.avatar-image {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-md);
  background: var(--color-primary); /* 统一主题色 */
}

.user-name {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ==========================================
   主要布局容器
   ========================================== */

.main-container {
  display: flex;
  min-height: 100vh;
  padding-top: var(--header-height);
}

/* ==========================================
   智能侧栏样式
   ========================================== */

.smart-sidebar {
  position: fixed;
  left: 0;
  top: var(--header-height);
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
  z-index: var(--z-fixed);
  transition: all var(--duration-normal) var(--easing-out);
}

.sidebar-content {
  padding: var(--space-6) 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 var(--space-6) var(--space-4);
  line-height: 1.5;
}

.section-icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* 保持头部Logo图标与侧栏图标在视觉上的统一比例 */
.logo-icon { width: 32px; height: 32px; }
.logo-svg { width: 70%; height: 70%; }

/* 快速入口 */
.quick-access {
  margin-bottom: var(--space-8);
}

.quick-tools {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-4);
}

.quick-tool-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--easing-out);
}

.quick-tool-item:hover {
  background-color: var(--bg-tertiary);
}

.tool-emoji {
  font-size: var(--text-base);
}

.tool-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* 工具分类 */
.category-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-4);
}

.category-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--duration-normal) var(--easing-out);
  position: relative;
}

.category-item:hover {
  background-color: var(--bg-tertiary);
}

.category-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 分类图标统一：支持 SVG 与 emoji，统一尺寸 */
.category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: var(--text-base);
  line-height: 1;
}

.category-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: currentColor;
  fill: currentColor;
}

.category-name {
  flex: 1;
  font-size: var(--text-sm);
}

.category-count {
  font-size: var(--text-xs);
  font-weight: 600;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  min-width: 24px;
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.category-item.active .category-count {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

/* 侧栏收纳按钮（样式保留，入口已移除） */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 10;
  transition: all var(--duration-normal) var(--easing-out);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.sidebar-toggle:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sidebar-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-normal) var(--easing-out);
}

/* 收纳状态（样式保留，逻辑已移除） */
.smart-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.smart-sidebar.collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ==========================================
   内容区域样式
   ========================================== */

.content-area {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: var(--space-6);
  transition: margin-left var(--duration-normal) var(--easing-out);
}

.smart-sidebar.collapsed + .content-area {
  margin-left: var(--sidebar-collapsed-width);
}

.content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  gap: var(--space-6);
}

.content-info h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.content-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.content-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* 视图切换 */
.view-toggle {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 2px;
}

.view-btn {
  padding: var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--duration-normal) var(--easing-out);
}

.view-btn.active {
  background: var(--bg-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.view-btn svg {
  width: 16px;
  height: 16px;
}

/* 排序下拉 */
.sort-dropdown {
  position: relative;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--easing-out);
}

.sort-btn:hover {
  border-color: var(--color-primary);
}

.sort-btn svg {
  width: 14px;
  height: 14px;
}

/* ==========================================
   工具网格布局
   ========================================== */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 28vw, 360px), 1fr));
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: var(--space-12);
}

/* ==========================================
   加载更多区域
   ========================================== */

.load-more-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-8) 0;
}

.load-more-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal) var(--easing-out);
}

.load-more-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.load-more-btn svg {
  width: 16px;
  height: 16px;
}

/* ==========================================
   背景装饰
   ========================================== */

.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.decoration-circle {
  position: absolute;
  border-radius: var(--radius-lg);
  background: var(--color-primary); /* 统一主题色，去除渐变 */
  opacity: 0.03;
  animation: float var(--duration-slower) ease-in-out infinite;
}

.circle-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
  animation-delay: 0s;
}

.circle-2 {
  width: 400px;
  height: 400px;
  bottom: -200px;
  left: -200px;
  animation-delay: -2s;
}

.circle-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* ==========================================
   加载指示器
   ========================================== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--easing-out);
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-spinner {
  text-align: center;
}

.spinner-circle {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-light);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-md);
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-4);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ==========================================
   工具卡片组件
   ========================================== */
.tool-atom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--duration-slow) var(--easing-harmony),
              box-shadow var(--duration-normal) var(--easing-out),
              border-color var(--duration-normal) var(--easing-out);
  will-change: transform;
}

.tool-atom-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.tool-atom-card.press {
  transform: translateY(0) scale(0.98);
}

.card-hero {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary); /* 统一主题色，去除渐变与动画 */
  background-size: auto;
  transition: none;
}
.tool-atom-card:hover .card-hero {
  background-position: initial; /* 去除hover渐变位移动画 */
  background-position: 100% 0;
}

/* avatar image support */
.tool-avatar .avatar-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Ensure alignment similar to SVG icon */
.tool-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* deprecated legacy block (no-op) to avoid duplicate rules */
.tool-avatar .avatar-img-legacy {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  display: block;
  transform: translateZ(0);
  transition: transform var(--duration-normal) var(--easing-harmony);
}

.tool-atom-card:hover .tool-avatar {
  transform: scale(1.1);
}

.avatar-icon {
  width: 36px;
  height: 36px;
}

.tool-status {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.8);
}

.tool-status.online { background: #22c55e; }
.tool-status.offline { background: #ef4444; }

.card-content {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  flex: 1 1 auto; /* 让内容区占据剩余空间，按钮始终贴底 */
}

.tool-name {
  font-size: var(--text-lg);
  font-weight: 700;
}

.tool-desc {
  color: var(--text-secondary);
}

.tool-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tag {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 2px 8px;
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  padding-top: 0;
  gap: var(--space-3);
  flex-wrap: nowrap; /* 保持单行 */
  min-height: 48px; /* 统一操作区高度，减少抖动 */
}

.quick-try {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 125, 255, 0.25);
  transition: transform var(--duration-normal) var(--easing-harmony),
              box-shadow var(--duration-normal) var(--easing-out);
}

.quick-try:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.quick-try:active { transform: translateY(0) scale(0.98); }

.more-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: nowrap; margin-left: auto; }
.more-actions button {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--easing-out);
}
.more-actions button:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Harmony 统一图标尺寸与对齐 */
.h-icon { display: inline-block; vertical-align: middle; color: currentColor; }
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }

/* 使用次数计数与图标间距 */
.usage-count { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }

/* more-actions按钮内图标与文字对齐 */
.more-actions button { display: inline-flex; align-items: center; gap: 6px; }

/* iOS风格分段控件 */
.view-toggle {
  display: inline-flex;
  background: var(--bg-tertiary);
  border-radius: 999px;
  padding: 4px;
  box-shadow: inset 0 0 0 1px var(--border-light);
}
.view-btn {
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--duration-normal) var(--easing-out), background var(--duration-normal) var(--easing-out), box-shadow var(--duration-normal) var(--easing-out);
}
.view-btn.active {
  background: var(--bg-primary);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
}
.view-btn svg { width: 16px; height: 16px; }

/* 移除涟漪视觉影响（保留类无效果） */
.ripple { display: none; }

/* Overlay按钮图标尺寸统一 */

/* 搜索建议 */
.suggestion-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed var(--border-light);
  cursor: pointer;
}
.suggestion-item:hover { background: var(--bg-tertiary); }
.suggestion-item .name { font-weight: 600; }
.suggestion-item .desc { color: var(--text-secondary); font-size: var(--text-xs); }

/* 列表视图 */
.tools-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tools-grid.list-view .tool-atom-card {
  flex-direction: row;
}
.tools-grid.list-view .card-hero { width: 220px; height: auto; }
.tools-grid.list-view .card-content { flex: 1; }
.tools-grid.list-view .card-actions { align-items: center; }

/* Toast */
.h-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform var(--duration-normal) var(--easing-out), opacity var(--duration-normal) var(--easing-out);
  z-index: var(--z-toast);
}
.h-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================
   工具Overlay弹窗系统（已弃用）
   ========================================== */
/* 已弃用：相关 JS 打开逻辑已移除，此处样式同样删除以避免残留影响 */
/* 占位：overlay 样式已移除（保持注释以便追溯） */
/* ==========================================
   移动端响应式设计
   ========================================== */

/* 小屏幕设备 (手机竖屏) - 320px to 640px */
/* 移动端优化 - 小屏幕设备 */
@media (max-width: 640px) {
  /* 容器和间距优化 */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  /* 显示移动端菜单按钮 */
  .mobile-menu-btn {
    display: flex;
  }
  
  /* 抽屉侧边栏：遮罩 + 面板（移动端） */
  body.sidebar-open { overflow: hidden; }
  .smart-sidebar {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer, 1000);
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--easing-out);
    display: block !important; /* 覆盖任意隐藏规则 */
  }
  .smart-sidebar .sidebar-content {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: min(82vw, 320px);
    background: var(--bg-primary);
    border-right: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--easing-out);
    display: block !important; /* 在抽屉中显示内容 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .smart-sidebar.open { opacity: 1; pointer-events: auto; }
  .smart-sidebar.open .sidebar-content { transform: translateX(0); }
  /* 在抽屉中显示快速入口与工具分类 */
  .quick-access, .tool-categories { display: block !important; }
  
  /* 主内容区占满全宽 */
  .main-container {
    grid-template-columns: 1fr !important;
  }
  
  .content-area {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* 隐藏桌面端导航 */
  .header-left .breadcrumb-nav {
    display: none;
  }
  
  /* Logo文字在小屏幕上隐藏 */
  .logo-text {
    display: none;
  }
  
  /* 搜索框优化 */
  .header-center {
    max-width: none;
    margin: 0 var(--space-2);
  }
  
  .search-input-wrapper {
    padding: var(--space-2) var(--space-3);
  }
  
  .search-input {
    font-size: var(--text-base);
  }

  /* 顶栏布局防重叠：小屏幕两行布局 */
  .header-content { flex-wrap: wrap; align-items: center; }
  .header-left { order: 1; }
  .header-right { order: 2; margin-left: auto; gap: 4px; }
  .header-center { order: 3; flex: 0 0 100%; max-width: 100%; margin: var(--space-2) var(--space-2) 0; }
  .search-input-wrapper { width: 100%; }
  .theme-toggle, .language-toggle, .admin-toggle { width: 36px; height: 36px; }
  
  /* 工具网格 - 单列布局 */
  .tools-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }
  
  /* 工具卡片优化 */
  .tool-atom-card {
    margin-bottom: var(--space-2);
  }
  
  /* 强制所有元素横向显示 */
  * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
  }
  
  /* 确保头部导航横向布局 */
  .header-nav,
  .header-left,
  .header-center,
  .header-right {
    display: flex !important;
    flex-direction: row !important;
    writing-mode: horizontal-tb !important;
  }
  
  /* 确保内容区域横向布局 */
  .content-area,
  .content-header,
  .content-info,
  .content-controls {
    display: flex !important;
    flex-direction: column !important;
    writing-mode: horizontal-tb !important;
  }
  
  .content-controls {
    flex-direction: row !important;
  }
  
  /* 确保工具卡片横向布局 */
  .tools-grid {
    display: grid !important;
    writing-mode: horizontal-tb !important;
  }
  
  .tool-atom-card {
    display: flex !important;
    flex-direction: column !important;
    writing-mode: horizontal-tb !important;
  }
  
  /* 确保文本横向显示 */
  .tool-name,
  .tool-description,
  .content-title,
  .content-subtitle,
  .section-title,
  h1, h2, h3, h4, h5, h6,
  p, span, div, a, button {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
    transform: none !important;
  }
  
  /* 移除所有可能的旋转变换 */
  .rotate-90,
  .rotate-180,
  .rotate-270,
  [class*="rotate"] {
    transform: none !important;
  }
  
  .card-hero {
    height: 100px;
  }
  
  .tool-avatar .avatar-img {
    width: 48px;
    height: 48px;
  }
  
  .avatar-icon {
    width: 28px;
    height: 28px;
  }
  
  /* 触摸目标优化 */
  .tool-atom-card,
  .quick-tool-item,
  .category-item {
    min-height: 44px;
  }
  
  /* 按钮和交互元素 */
  .voice-input-btn,
  .view-btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-3);
  }
  
  /* 文字大小调整 */
  .card-title {
    font-size: var(--text-base);
  }
  
  .card-description {
    font-size: var(--text-xs);
    line-height: 1.4;
  }
  
  /* 全局文字方向修复 - 确保所有文字都是横向显示 */
  * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
  }
  
  /* 特别针对可能出现竖向显示的元素 */
  .section-title,
  .tool-name,
  .card-title,
  .card-description,
  .content-title,
  .content-subtitle,
  .nav-item,
  .menu-item,
  .button-text,
  .link-text,
  .label-text,
  .input-text,
  .placeholder-text,
  h1, h2, h3, h4, h5, h6,
  p, span, div, a, button, input, textarea,
  .quick-access-item,
  .category-item,
  .tool-item {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
    transform: none !important; /* 移除可能的旋转变换 */
  }
  
  /* 修复可能的CSS变换导致的竖向显示 */
  .text-vertical,
  .vertical-text {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: rotate(0deg) !important;
  }
  
  .card-content {
    padding: var(--space-3);
  }
  
  .card-title {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
  }
  
  .card-description {
    font-size: var(--text-xs);
  }
  
  /* 按钮组优化 */
  .card-actions {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  
  .btn-primary,
  .btn-secondary {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* 中等屏幕设备 (手机横屏/小平板) - 641px to 768px */
@media (min-width: 641px) and (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }
  
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
  
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  .header-center {
    max-width: 400px;
  }
}

/* 平板设备 - 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  
  /* 在平板上也显示移动端菜单 */
  .mobile-menu-btn {
    display: flex;
  }
}

/* 大屏幕优化 - 1025px+ */
@media (min-width: 1025px) {
  .mobile-menu-btn {
    display: none;
  }
  
  .tools-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 30vw, 360px), 1fr));
  }
}

/* 超小屏幕设备优化 - 320px to 480px */
@media (max-width: 480px) {
  /* 更紧凑的间距 */
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  
  /* 头部高度调整 */
  .immersive-header {
    padding: var(--space-3) 0;
  }
  
  /* 搜索框进一步优化 */
  .search-input-wrapper {
    padding: var(--space-2);
  }
  
  .search-icon {
    width: 16px;
    height: 16px;
    margin-right: var(--space-2);
  }
  
  /* 工具卡片更紧凑 */
  .card-hero {
    height: 80px;
  }
  
  .tool-avatar .avatar-img {
    width: 40px;
    height: 40px;
  }
  
  .avatar-icon {
    width: 24px;
    height: 24px;
  }
  
  .card-content {
    padding: var(--space-3);
  }
  
  .card-title {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
  }
  
  .card-description {
    font-size: var(--text-xs);
  }
  
  /* 按钮组优化 */
  .card-actions {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  
  .btn-primary,
  .btn-secondary {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* 触摸设备通用优化 */
@media (hover: none) and (pointer: coarse) {
  /* 移除hover效果，优化触摸体验 */
  .tool-atom-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
  
  .tool-atom-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* 确保所有交互元素符合触摸标准 */
  button,
  .btn,
  .tool-atom-card,
  .category-item,
  .quick-tool-item,
  .suggestion-item {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 增加触摸间距 */
  .card-actions {
    gap: var(--space-3);
  }
  
  /* 优化表单元素 */
  input,
  select,
  textarea {
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 44px;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
  .immersive-header {
    padding: var(--space-2) 0;
  }
  
  .card-hero {
    height: 60px;
  }
  
  .tool-avatar .avatar-img {
    width: 32px;
    height: 32px;
  }
  
  .avatar-icon {
    width: 20px;
    height: 20px;
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tool-avatar .avatar-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* =====================
   应用注脚（全局底部）
   ===================== */
.app-footer {
  width: 100%;
  padding: 16px 12px 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
}
.app-footer .footer-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 2px;
}
.app-footer .footer-link:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  .tool-atom-card,
  .search-input-wrapper,
  .mobile-menu-btn .btn-dot {
    transition: none;
  }
  
  .tool-atom-card:hover {
    transform: none;
  }
}