/* ============================================================================
 * 赛博朋克外观层（cyberpunk skin）
 * ----------------------------------------------------------------------------
 * 加载顺序：style.css → home-upgrade.css → **本文件**（最后加载，同优先级下覆盖前者）
 * 设计原则（务必遵守，否则会重演 2026-09-24 那两次事故）：
 *   1. 只改"令牌值 + 组件外观"，**不动任何 HTML 结构** —— 46 个页面零标记改动
 *   2. 颜色一律走变量或本文件顶部的霓虹令牌，不在页面里硬编码
 *   3. 注释里不要出现"星号紧挨斜杠"的写法（那个符号会提前闭合注释）
 *   4. 不做嵌套 var() 折叠（上次因此被浏览器静默丢弃 131 处声明）
 *   5. 动效只做 transform / opacity / box-shadow（不触发重排），
 *      并尊重 prefers-reduced-motion
 *
 * 回退方式（任选其一）：
 *   a. 删掉各页 <head> 里那行 cyberpunk.css 的 <link>（用同一个脚本的 --remove）
 *   b. 直接删除本文件
 *   css/ 的改动前快照在 toolbox-site-internal/_bak-cyberpunk-20261009-195711/
 * ========================================================================== */

/* ---------------------------------------------------------------- 1. 霓虹令牌
   两套主题共用同一批霓虹色，但**用途不同**：
   深色下霓虹可以做文字/描边；浅色下霓虹只做描边、发光与底色块，
   文字一律用深色（亮青压在白底上只有 1.9:1，会被对比度闸门直接拦下）。 */
:root {
  --neon-cyan: #22d3ee;
  --neon-magenta: #ff2fb9;
  --neon-violet: #a78bfa;
  --neon-lime: #a3e635;

  /* 卡片四角 HUD 括号：8 组线性渐变各画一个"直角"，拆成三条**长属性**变量。
     为什么不用 background 简写、为什么要拆成三条：
       a) home-upgrade.css 里有 html[data-theme='dark'] .tool-card { background: var(--card-bg); }
          —— 简写会把 background-image/size/position 一起重置，深色下括号会被清掉；
       b) 用长属性则互不重置，下面同名选择器（0,2,1，本文件更晚）即可拿回控制权；
       c) 变量里不写斜杠语法，避免个别解析器拒绝整条声明。 */
  --card-deco-img:
    linear-gradient(var(--neon-line), var(--neon-line)),
    linear-gradient(var(--neon-line), var(--neon-line)),
    linear-gradient(var(--neon-line), var(--neon-line)),
    linear-gradient(var(--neon-line), var(--neon-line)),
    linear-gradient(var(--neon-line-2), var(--neon-line-2)),
    linear-gradient(var(--neon-line-2), var(--neon-line-2)),
    linear-gradient(var(--neon-line-2), var(--neon-line-2)),
    linear-gradient(var(--neon-line-2), var(--neon-line-2));
  --card-deco-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  --card-deco-pos: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;

  /* 浅色主题的赛博化：底色冷一点、文字用深海军蓝，霓虹只出现在描边与光晕里 */
  --bg: #f2f6fc;
  --card-bg: #ffffff;
  --text: #0a1222;
  --text-light: #46536b;
  --border: #d5deee;
  --primary: #0e7490;            /* 11.4:1 on white */
  --primary-dark: #155e75;
  --primary-light: #e6f7fb;
  --panel: #f7fafd;
  --shadow: 0 6px 24px rgba(10, 18, 34, 0.08);

  /* 浅色下的霓虹"描边版"（明度压低，任何地方都能当文字用） */
  --neon-line: rgba(14, 116, 144, 0.35);
  --neon-glow: rgba(14, 116, 144, 0.22);
  --neon-line-2: rgba(190, 24, 93, 0.28);
  --neon-glow-2: rgba(190, 24, 93, 0.18);
  --card-top: linear-gradient(90deg, #0e7490, #a78bfa);
}

html[data-theme='dark'] {
  /* 底色：接近纯黑但带蓝，纯黑+霓虹会显得脏 */
  --bg: #05070e;
  --card-bg: #0c111d;
  --text: #e8f0ff;               /* 对 #0c111d 约 16:1 */
  --text-light: #93a7c4;         /* 约 8:1 */
  --border: #1c2740;
  --primary: #22d3ee;
  --primary-dark: #67e8f9;       /* 深色下"强调文字"要更亮，不是更深 */
  --primary-light: #0e2433;
  --panel: #111a2b;
  --tint-a: #0c1a26;
  --tint-b: #1a1030;
  --tint-warm-a: #241c0d;
  --tint-warm-b: #2b2210;
  --tint-warm-line: #453614;
  --ink-1: #eaf2ff;
  --ink-2: #d3ddf0;
  --ink-3: #b3c0d8;
  --ink-4: #9aa8c2;
  --ink-5: #93a2bd;
  --paper: #0a0f1a;
  --hair: #1b2436;
  --ok-ink: #6ee7b7;
  --shadow: 0 6px 32px rgba(0, 0, 0, 0.6);
  --zc-sun: linear-gradient(135deg, #2a2214, #1b1811);
  --zc-moon: linear-gradient(135deg, #101c2c, #0e1320);
  --zc-asc: linear-gradient(135deg, #0d231c, #0d1518);
  --zc-mc: linear-gradient(135deg, #1c1330, #12101c);
  --zc-line: #23304a;

  /* 深色下霓虹可以直接上文字与描边 */
  --neon-line: rgba(34, 211, 238, 0.45);
  --neon-glow: rgba(34, 211, 238, 0.55);
  --neon-line-2: rgba(244, 114, 182, 0.40);
  --neon-glow-2: rgba(244, 114, 182, 0.45);
  --card-top: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);

  color-scheme: dark;
}

/* ---------------------------------------------------- 2. 背景：扫描线 + 城市辉光
   固定在视口上的装饰层，不参与布局、不接收鼠标事件。
   只放一张 fixed 层，避免每个卡片都开 backdrop-filter（40 张卡会卡）。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}
html[data-theme='dark'] body::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(160, 220, 255, 0.030) 0 1px, transparent 1px 3px),
    radial-gradient(900px 480px at 50% -8%, rgba(34, 211, 238, 0.10), transparent 70%),
    radial-gradient(700px 420px at 8% bottom, rgba(244, 114, 182, 0.08), transparent 70%);
}

/* 选中文字也用霓虹，成本极低但很出效果 */
::selection { background: rgba(34, 211, 238, 0.28); }

/* ---------------------------------------------------------------- 3. 顶栏与页脚 */
.site-header {
  /* 先给纯色兜底：不支持 color-mix() 的浏览器会丢弃那条声明，
     若只写 color-mix 顶栏会变成透明 —— 曾有同类事故的先例。 */
  background: var(--card-bg);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--neon-line);
  box-shadow: 0 1px 0 0 var(--neon-glow), 0 10px 30px -18px var(--neon-glow);
}
.brand {
  letter-spacing: 0.3px;
}
html[data-theme='dark'] .brand {
  text-shadow: 0 0 18px var(--neon-glow);
}
.site-footer {
  border-top: 1px solid var(--neon-line);
}

/* ---------------------------------------------------------------- 4. 工具卡片
   这是本次改动的重点：40 张卡片全部由纯 CSS 重塑，HTML 一个字没动。
   每张卡自带 3 层装饰，全部用伪元素与 background-image 实现：
     ① 四角 HUD 直角括号（background-image 的 4 组 linear-gradient）
     ② 顶部霓虹线（::before，悬停时从左向右展开）
     ③ 斜向流光扫过（::after，悬停时扫一次）
   性能取舍：不用 backdrop-filter、不用 filter: blur，只动 transform/opacity/box-shadow。 */
.tools-grid { gap: 22px; }

/* 两个选择器写在一起，理由见 :root 里 --card-deco-* 的注释：
   深色下必须和 home-upgrade.css 的 html[data-theme='dark'] .tool-card 打平优先级（都是 0,2,1），
   再靠"本文件后加载"取胜，否则四角括号与霓虹描边会被那条 background 简写清掉。 */
.tool-card,
html[data-theme='dark'] .tool-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 22px 20px;
  border: 1px solid var(--neon-line);
  border-radius: 14px;
  background-color: var(--card-bg);
  background-image: var(--card-deco-img);
  background-repeat: no-repeat;
  background-size: var(--card-deco-size);
  background-position: var(--card-deco-pos);
  box-shadow: var(--shadow);
  transition: transform 0.22s ease, box-shadow 0.28s ease, border-color 0.22s ease;
}

/* 顶部霓虹线：默认宽度 0，悬停展开 */
.tool-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--card-top);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}

/* 斜向流光：默认在左侧视野外 */
.tool-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transition: left 0.55s ease;
  pointer-events: none;
  z-index: 1;
}

.tool-card:hover,
.tool-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--neon-cyan);
  box-shadow:
    0 0 0 1px var(--neon-line),
    0 18px 44px -16px var(--neon-glow),
    0 6px 20px -10px rgba(0, 0, 0, 0.5);
}
.tool-card:hover::before,
.tool-card:focus-visible::before { transform: scaleX(1); }
.tool-card:hover::after,
.tool-card:focus-visible::after { left: 130%; }

/* 键盘可达性：焦点环也用霓虹，不能只照顾鼠标 */
.tool-card:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
}

.tool-card h3 {
  letter-spacing: 0.2px;
}
html[data-theme='dark'] .tool-card:hover h3 {
  color: var(--neon-cyan);
  text-shadow: 0 0 16px var(--neon-glow);
}

.tool-icon {
  display: inline-block;
  transition: transform 0.24s ease, filter 0.24s ease;
}
html[data-theme='dark'] .tool-card:hover .tool-icon {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 12px var(--neon-glow));
}

/* 状态胶囊：改成霓虹描边风格（原来是实心绿底） */
.tool-status {
  background: transparent;
  border: 1px solid var(--neon-line);
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.4px;
}
html[data-theme='dark'] .tool-status {
  background: rgba(34, 211, 238, 0.08);
  color: #8ef1ff;
  border-color: var(--neon-line);
}

/* 站长推荐卡同样待遇（它是 .featured-card） */
.featured-card {
  position: relative;
  border: 1px solid var(--neon-line);
  transition: transform 0.22s ease, box-shadow 0.28s ease;
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -16px var(--neon-glow);
}

/* ---------------------------------------------------------------- 5. 标题与分隔 */
.section-title,
.tool-cat-title {
  position: relative;
  padding-left: 12px;
}
.section-title::before,
.tool-cat-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 3px;
  border-radius: 2px;
  background: var(--card-top);
  box-shadow: 0 0 12px var(--neon-glow);
}
html[data-theme='dark'] .section-title,
html[data-theme='dark'] .tool-cat-title {
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.18);
}

/* ---------------------------------------------------------------- 6. 按钮 */
.btn-primary {
  /* 渐变两端都要让白字 ≥4.5:1 —— 原 #0891b2 只有 3.68、#6366f1 只有 4.47
     （渐变最亮的那一端决定最差对比度，不是扫描器取的两端均值）。详见第 11 节。 */
  background: linear-gradient(135deg, #0e7490, #4f46e5);
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.24s ease, filter 0.24s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 30px -10px var(--neon-glow), 0 0 0 1px var(--neon-line);
}
html[data-theme='dark'] .btn-primary {
  background: linear-gradient(135deg, #0e7490, #7c3aed);
}
.btn-ghost {
  border: 1px solid var(--neon-line);
  color: var(--primary);
  transition: border-color 0.2s ease, box-shadow 0.24s ease, transform 0.18s ease;
}
.btn-ghost:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px var(--neon-line), 0 8px 24px -12px var(--neon-glow);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- 7. 表单与面板 */
.tool-inputs,
.tool-output,
.tool-tip,
.tool-section {
  border-color: var(--neon-line);
}
.form-group input,
.form-group textarea,
.form-group select,
.tool-search input {
  border-color: var(--neon-line);
  transition: border-color 0.2s ease, box-shadow 0.24s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.tool-search input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px var(--neon-glow);
}
html[data-theme='dark'] .form-group input,
html[data-theme='dark'] .form-group textarea,
html[data-theme='dark'] .form-group select,
html[data-theme='dark'] .tool-search input {
  background: #0a0f1a;
  color: var(--text);
}

/* 分类导航：悬停亮边 */
.cat-nav a {
  transition: border-color 0.2s ease, box-shadow 0.24s ease, color 0.2s ease;
}
.cat-nav a:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px var(--neon-line);
  color: var(--primary);
}

/* ---------------------------------------------------------------- 8. Hero 地面网格
   经典赛博朋克元素：地平线网格。只做装饰，压在 hero 内容之下。 */
.hero {
  position: relative;
  overflow: hidden;
}
html[data-theme='dark'] .hero::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -2px;
  height: 120px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.10) 1px, transparent 1px);
  background-size: 100% 26px, 64px 100%;
  transform: perspective(220px) rotateX(62deg);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 82%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 82%);
}

/* ---------------------------------------------------------------- 9. 滚动条（仅深色） */
html[data-theme='dark'] {
  scrollbar-color: #1d2a44 #070b14;
}
html[data-theme='dark'] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme='dark'] ::-webkit-scrollbar-track { background: #070b14; }
html[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: #1d2a44;
  border-radius: 6px;
}
html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #2a3d61; }

/* ---------------------------------------------------------------- 10. 无障碍：
   系统开了「减少动态效果」就关掉所有位移与动画，只保留静态霓虹。 */
@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .tool-card::before,
  .tool-card::after,
  .tool-icon,
  .featured-card,
  .btn-primary,
  .btn-ghost,
  .cat-nav a {
    transition: none;
  }
  .tool-card:hover,
  .tool-card:focus-visible,
  .featured-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover {
    transform: none;
  }
  .tool-card:hover::after,
  .tool-card:focus-visible::after { left: -60%; }
}

/* ================================================================ 11. 对比度闸门修色
   2026-10-09 全站对比度扫描（scan_contrast.py，46 页 × 深浅两主题）抓出的问题。
   本节**只调明度/文字色**，不改任何色相，也不动 style.css / home-upgrade.css / HTML。
   每条都写了「改前 → 改后 + 实算比值」，方便回退与复核。 */

/* ---------------------------------------------------------------- 11.1
   别把皮肤令牌漏进「自带整套调色板」的独立工具页。
   事故：tools/geo.html 是自成一体的深色应用页，它把自己的调色板写在页面内联
   <style> 的 :root 里（--bg #0e1016 / --panel #191d29 / --border #2a3143 /
   --text #e8ecf4 / --shadow）。那个 <style> 在**本文件之前**（各页的 <link> 是
   注入在 </head> 前的），于是本文件的 :root 与 html[data-theme='dark'] 把同名的
   5 个令牌顶掉了：
     · 深色下 --text 恰好接近（#e8f0ff ≈ #e8ecf4），看不出问题；
     · 浅色下 --text 变 #0a1222（深墨），而 geo 用 --bg-soft/--panel-2 画的深底
       没跟着变 —— 深字压深底 1.06:1，实测 74 个元素读不出来。
   修法：只在「有 #geobar」的页面上把这 5 个令牌还原成 geo 自己的值
   （#geobar 全站只有 geo.html 有；46 页里只有它和跳转桩 haoma.html 没有 .site-header）。
   :has() 基线是 Chrome/Edge 105+ / Safari 15.4+ / Firefox 121+，都支持；
   万一不支持就退回现状，不会比现在更差。**geo.html 一个字符都没改。** */
html:has(#geobar) {
  --bg: #0e1016;
  --panel: #191d29;
  --border: #2a3143;
  --text: #e8ecf4;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------- 11.2
   深色下「霓虹实心块 + 写死的白字」。
   style.css 里这 5 个组件都写着 background: var(--primary); color: #fff：
     .featured-flag / .featured-badge / .tab.active / .lib-num / .flow-num
   本文件把深色 --primary 从 #6366f1 换成霓虹青 #22d3ee（浅色是 #0e7490），
   白字压青底只剩 1.81:1（浅色下 --primary 是深青 #0e7490，白字 5.36:1，没问题）。
   扫描实测 6 处：index.html 3 个 .featured-flag、shubi.html 的 .featured-badge
   与 .tab.active、pdf-tools.html 的 .tab.active（.lib-num/.flow-num 是单字符数字，
   扫描器按"文本长度 > 1"跳过了它们，但同一个根因，一并修）。
   改法：只换**这几个组件上的文字色**，填充色一个没动 ——
   霓虹实心块 + 深墨字本来就是赛博朋克的标准做法。
   改前 #fff / 改后 #05070e：对 #22d3ee 实算 11.1:1。 */
html[data-theme='dark'] .featured-flag,
html[data-theme='dark'] .featured-badge,
html[data-theme='dark'] .tab.active,
html[data-theme='dark'] .lib-num,
html[data-theme='dark'] .flow-num {
  color: #05070e;
}

/* 「定制服务」卡那面旗的底是实心琥珀 #f59e0b（不是 --primary），
   它必须保留 style.css 给的深琥珀字 --on-warm（4.2:1），
   否则会被 11.2 那条盖掉。这里显式写回来。 */
html[data-theme='dark'] .featured-flag--service {
  color: var(--on-warm);
}

/* ---------------------------------------------------------------- 11.3
   深色「定制服务」卡的 CTA 文字。style.css 给的是深琥珀 #b45309，
   压在 tint-warm 深底（#241c0d→#2b2210，合成 rgb(40,31,15)）上只有 3.24:1，
   低于正文线 4.5（这条不是本次改版引入的：改版前 ≈3.02:1，反而略好了一点）。
   改法：把文字**调亮**到同色相的琥珀 #fbbf24 → 实算 9.73:1。只动明度。 */
html[data-theme='dark'] .featured-card--service .featured-cta {
  color: #fbbf24;
}

/* ---------------------------------------------------------------- 11.4
   深色下 .btn-primary:hover 的背景是 home-upgrade.css 给的 #6366f1（0,2,1），
   白字只有 4.47:1，差一点点到 4.5。同一色相压暗一档到 #5b52ea → 实算 5.47:1。
   悬停的"变亮"反馈仍由本文件 .btn-primary:hover 的 filter: brightness(1.08) 提供，
   不会被这条吃掉（filter 与 background 是两个属性，互不覆盖）。 */
html[data-theme='dark'] .btn-primary:hover {
  background: #5b52ea;
}