/* =====================================================================
   新 UI 风格 / 配色 · 套皮层（仅视觉，不改布局）
   ---------------------------------------------------------------------
   叠加在现有 common.css / index.css / ittools.css 之上：
   - 复用现有布局（grid / flex / 尺寸 / 定位 完全不动）
   - 仅替换：配色变量、圆角、阴影、渐变、悬浮微交互
   不修改站点任何现有代码，仅作为「套皮」演示。
   ===================================================================== */

/* ---------- 1. 配色 Token（覆盖 common.css 同名变量） ---------- */
:root {
  /* 中性灰阶：更干净的冷灰，略提对比 */
  --bg:           #f5f7fb;
  --bg-elev:      #ffffff;
  --bg-soft:      #eef1f7;
  --bg-hover:     #e6ebf4;
  --text:         #161b26;
  --text-soft:    #586173;
  --text-mute:    #8a93a3;
  --border:       #e4e9f1;
  --border-strong:#d4dce8;

  /* 主色：信任蓝（保持品牌一致） */
  --accent:       #2f6df0;
  --accent-soft:  #eaf1fe;
  --accent-text:  #ffffff;

  /* 新增：辅助强调色（紫），用于渐变 / 高亮，体现新风格 */
  --accent-2:     #7c5cff;
  --accent-2-soft:#f1ecff;

  /* 语义色 */
  --ok:     #15a06d;
  --warn:   #f0a020;
  --error:  #e60012;   /* 中国红 */
  --danger: #e5484d;

  /* 圆角（更柔和的新风格） */
  --radius-s: 10px;
  --radius:   14px;
  --radius-l: 18px;

  /* 阴影（更轻、更通透） */
  --shadow-s: 0 1px 3px rgba(22, 33, 55, .05);
  --shadow:   0 6px 22px rgba(22, 33, 55, .08);
  --shadow-l: 0 16px 44px rgba(22, 33, 55, .12);
}

html[data-theme="dark"] {
  --bg:           #0f131a;
  --bg-elev:      #171c25;
  --bg-soft:      #1e242f;
  --bg-hover:     #262d39;
  --text:         #e9edf3;
  --text-soft:    #aab3c1;
  --text-mute:    #767f8e;
  --border:       #283040;
  --border-strong:#364054;

  --accent:       #6a9bff;
  --accent-soft:  #18243c;
  --accent-2:     #9b87ff;
  --accent-2-soft:#241d3a;

  --ok:     #3fcf9a;
  --warn:   #e6a348;
  --error:  #ff5a5a;
  --danger: #ef6a6a;

  --shadow-s: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow:   0 6px 22px rgba(0, 0, 0, .4);
  --shadow-l: 0 16px 44px rgba(0, 0, 0, .55);
}

/* ---------- 2. 全局细微质感（视觉，不影响布局） ---------- */
body {
  background:
    radial-gradient(1200px 480px at 80% -10%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 60%),
    var(--bg);
}

/* ---------- 3. 顶栏：加一层柔和投影，层次更清 ---------- */
.site-header {
  box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(22, 33, 55, .05);
}
.icon-btn:hover { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- 4. 主按钮：渐变 + 柔和投影（新风格标志性） ---------- */
.btn-primary {
  background: linear-gradient(135deg,
              var(--accent) 0%,
              color-mix(in srgb, var(--accent) 78%, var(--accent-2)) 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn { border-radius: 11px; }
.btn-sm { border-radius: 9px; }

/* ---------- 5. 工具卡片：更柔悬浮 + 渐变顶条 ---------- */
.tool-card {
  border-radius: 16px;
  box-shadow: var(--shadow-s);
}
.tool-card:hover {
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-3px);
}
.tool-card::after {
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

/* ---------- 6. 分类图标：渐变底（视觉） ---------- */
.cat-head .cat-icon {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2-soft));
  color: var(--accent);
}

/* ---------- 7. 侧栏激活态：渐变点缀（视觉） ---------- */
.sn-cat.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
}
.sn-cat.active .sn-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

/* ---------- 8. Hero 标题：新风格双色渐变（替代原彩虹，纯视觉） ---------- */
.home-hero .hero-name {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: none;
}
.home-hero { border-bottom-color: var(--border); }

/* ---------- 9. 搜索框：聚焦光环更明显 ---------- */
.home-search input {
  box-shadow: var(--shadow-s);
}
.home-search input:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- 10. 统计数字 / 关于卡片 ---------- */
.home-stats b { color: var(--accent); }
.about-card {
  border-radius: 16px;
  transition: .18s;
}
.about-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* ---------- 11. 工具页：主按钮 / 输入 / 卡片（视觉） ---------- */
.it-btn.primary {
  background: linear-gradient(135deg,
              var(--accent) 0%,
              color-mix(in srgb, var(--accent) 78%, var(--accent-2)) 100%);
  border-color: transparent;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: filter .18s ease, box-shadow .18s ease, transform .14s ease;
}
.it-btn.primary:hover {
  /* 保持与常态相同的渐变，仅做亮度/投影/微抬升的优雅过渡，避免颜色突变 */
  background: linear-gradient(135deg,
              var(--accent) 0%,
              color-mix(in srgb, var(--accent) 78%, var(--accent-2)) 100%);
  filter: brightness(1.06);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 36%, transparent);
  transform: translateY(-1px);
}
.it-btn.primary:active {
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 24%, transparent);
}
.it-card { border-radius: 16px; }
.it-input:focus, textarea.it-input:focus, select.it-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.it-tag.on, .it-tabs .it-tab.on {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2-soft));
}

/* ---------- 12. 提示条 / 页脚 微调（保持语义色） ---------- */
.note { border-radius: var(--radius); }
.site-footer {
  background:
    radial-gradient(900px 300px at 50% 0%, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 70%),
    var(--bg-elev);
}