/* ============================================================================
   猎镰雷达 · 蚀刻皮肤 etch.css  ·  W1-r116（2026-09-21）
   ============================================================================
   这是什么：C 端「暗黑铜版蚀刻」设计语言的**唯一样式真源**（single source）。

   为什么要单独一个文件，而不是改 style.css：
     style.css（117 KB）是**全站共享**文件 —— 产品功能页（detective / smartradar /
     account / admin ...）全都挂在它上面。动它 = 全站同时改脸，风险不可控。
     所以原则是【零改共享文件】：新皮肤只做**加法**，通过「文档顺序」在同特异性
     下压过 style.css，而不是去打 !important 特异性军备竞赛。

   ⚠️ 加载顺序是这个文件的生命线：
     它必须在 style.css **之后**、且在 bigfoot.css / cop.css **之后**加载。
     原因：那两个文件里页脚与客服窗的颜色是硬编码的、不认 --bg/--txt 令牌，只有靠
     「同特异性下后加载者胜」才能压住（这一条是 r115 在 B 端页上实测出来的）。

   设计令牌来源：r113《首页视觉编排方案》（策凌）—— 7 栏非对称网格 / 禁均分模板 /
     禁任何 CSS 渐变 / 衬线题注 / 等宽数字 / 1px 硬线 / 零圆角零阴影。

   ⚠️ 本文件**只改视觉属性**，不碰布局属性：
     允许改 color / background / border / border-radius / box-shadow / font-* /
       letter-spacing / text-transform / backdrop-filter / opacity
     禁止改 display / grid-* / flex-* / width / height / padding / margin / position
     —— 布局零风险是这份皮肤能被安全推广到 27 个页面的前提。

   ══════════════════════════════════════════════════════════════════════════
   r116 实测记录：三处刻意偏离稿件的地方（都可测、可回溯，不是随手改的）
   ══════════════════════════════════════════════════════════════════════════
   【偏离 1】--dim：稿值 #555 在纯黑上只有 3.0:1（低于 WCAG AA 小字档 4.5）
              ⇒ 提到 #7a7a7a（5.4:1）。--sub 相应定为 #9a9a9a（7.0:1）。
   【偏离 2】--green：稿件是静态图，不需要涨跌色；真页的行情/状态要用，
              故保留一个与纯黑底兼容的绿 #3fb950。
   【偏离 3】红底承载文字时的**文字色**：稿里 .hero button 是「红底 + 白字」，
              但 #ff2d2d 配白字实测只有 3.71:1（< 4.5，不达标；同页基线里
              蓝底白字 3.68、绿底白字 2.13 是历史的同类问题）。
              ⇒ 红底改**黑字**（5.67:1），**红色令牌本身保持稿值 #ff2d2d 不动**。
              选「动文字色」而不是「动红色」的理由：红是稿的设计身份锚（--red
              是稿的 12 个令牌之一），文字色在稿里是硬编码的 #ffffff、不是令牌。
              附带好处：hover 由红底黑字 → 白底黑字，文字色不变、只有底色切换。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 令牌层：覆盖 style.css 的 :root ──────────────────────────────────────
   一处改，全站换肤 —— 这是本方案最大的杠杆：style.css 内部大量使用 var(--rad)
   / var(--shadow) / var(--bg)，所以在这里改值即可全局生效，不必逐组件覆盖。

   🔴 但「令牌层是杠杆」同时也意味着「令牌层是地雷」——实测 style.css 里
      var(--accent) 出现 50 次（16 次当背景、21 次当文字），var(--dim) 出现 107 次。
      把 --accent 从品牌蓝改成白色之后，凡是「拿 --accent 当背景、同时把文字写成
      白色」的组合都会变成【白底白字】——首页默认态只碰到 1 处，其余散落在
      detective / smartradar / account / watchlist / whales / market 上。
      ⇒ 处置分两手（缺一不可）：
         (a) 下面第 ⑮ 节把静态扫出来的危险组合逐个补上文字色；
         (b) 每页上线前跑「全元素对比度扫描」，用真实的渲染结果兜住静态扫不到的。
         这正是 r116 把「对比度扫描」定为硬闸、而不是可选项的原因。 */
:root{
  --bg:#000000;            /* 稿值：纯黑（原 #0b0e13 近黑） */
  --bg2:#0a0a0a;
  --panel:#0d0d0d;
  --panel2:#111111;
  --panel3:#181818;
  --line:#222222;          /* 稿值 */
  --line2:rgba(255,255,255,.30);
  --txt:#ffffff;           /* 稿值 */
  --dim:#7a7a7a;           /* 见【偏离 1】：从稿值 #555 提亮到 5.4:1 */
  --accent:#ffffff;        /* 蚀刻无彩色主色 ⇒ 主行动用白，强调用红 */
  --accent-2:#e6e6e6;
  --accent2:#ff2d2d;       /* 原琥珀 #f0b90b → 稿子的红 */
  --red:#ff2d2d;           /* 稿值：在 #000 上 5.25:1 ✅ */
  --green:#3fb950;         /* 见【偏离 2】 */
  --rad:0px;               /* 稿：零圆角（原 12px） */
  --rad-s:0px;             /* 稿：零圆角（原 8px） */
  --shadow:none;           /* 稿：零阴影（原 0 12px 32px） */
  --etch-sub:#9a9a9a;      /* 稿值：正文次级 */
  --etch-dim:#7a7a7a;      /* 见【偏离 1】 */
  --etch-fg-on-accent:#000000;  /* 见【偏离 3】：白底/红底上承载文字时的字色 */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --etch-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --etch-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
}

/* ── ② 纸纹：SVG 分形噪声，**不是渐变**（稿子的质感来源）────────────────────
   做成 html::after 而不是 body::before，因为全站 body::before 已被 style.css 占用。
   z-index 低于顶栏(100)与浮层，只压在内容之上；pointer-events:none 保证不挡点击。 */
html::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── ③ 排版语言：衬线标题 / 全大写正字距题注 / 等宽数字 ────────────────────
   这是「蚀刻味」最核心的三条，比配色更能决定像不像稿子。 */
.hero h1,
.prodzone-title,
.cw-title,
h1,h2,h3{
  font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
}
.hero h1{font-weight:400}

/* 小标签：全大写 + 正字距 + 次级灰 —— 稿子的「铜版题注」 */
.hero-badge,
.cw-title,.cw-sub,
.prod-tag,
.stat span,
.sf-note,.sf-tg-lb,
.hero-tg,
.ticker{
  letter-spacing:.15em;text-transform:uppercase;
}
.hero-badge{color:var(--etch-sub)}
.cw-sub{color:var(--etch-dim);text-transform:none;letter-spacing:.02em}
.hero-tg{color:var(--etch-sub);text-transform:none;letter-spacing:.01em}
/* .stat span 是数据条里四个数字下面那行 12px 小标签。它**正压在 band 底纹上**，
   而 style.css 给的是 var(--dim)=#7a7a7a —— 即使底纹已压到峰值 25，实测最坏
   对比度也只有 4.10:1（低于 AA 4.5）。故这里单独提到 --etch-sub(#9a9a9a)：
   对纯黑 7.46:1、对底纹峰值 6.25:1，两种情况下都稳过。
   注意这是**首页专属**的提升，不去动共享的 --dim 令牌（它被引用了 107 处）。 */
.stat span{color:var(--etch-sub)}

/* 数字：等宽 + 表格数字（稿子的「标本编号」感） */
.stat b,.prod-price,.case-big,.num,
.stat b,.stats b{
  font-family:var(--etch-mono);font-variant-numeric:tabular-nums;
}
.stat b{letter-spacing:-.02em}

/* ── ④ 顶栏：去掉毛玻璃，改 1px 硬线（稿子 header 是 solid + border-bottom）── */
.topnav{
  background:var(--bg);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line);
}
.tnav a{color:var(--etch-sub)}
.tnav a:hover{color:var(--txt);background:transparent}
.tnav a.on{color:var(--txt);font-weight:400}
.tnav a.on::after{background:var(--red)}
.brand-slogan,.brand em{color:var(--etch-dim)}
.brand{letter-spacing:.02em}

/* ── ⑤ Hero ─────────────────────────────────────────────────────────────── */
.hero-sub{color:var(--etch-sub)}
.hero-anchor{color:var(--etch-sub);text-transform:uppercase;letter-spacing:.15em}
.scanrow input{
  background:transparent;color:var(--txt);
  border-color:var(--line);
  font-family:var(--etch-mono);
}
.scanrow input::placeholder{color:var(--etch-dim)}
.ticker{color:var(--etch-dim)}
.ticker .dot{background:var(--red)}
.trust span,.trust em{color:var(--etch-dim)}

/* ── ⑥ 通用按钮：直角 + 硬线（原 --rad 12px 已被 --rad:0 覆盖，这里补边与色）── */
.btn{
  border-radius:0;
  box-shadow:none;
  font-family:var(--etch-sans);
  letter-spacing:.12em;text-transform:uppercase;
  font-weight:400;
}
.btn.primary{background:#ffffff;color:var(--etch-fg-on-accent,#000);border-color:var(--txt)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--txt)}
/* 主行动（扫描 / 进入产品）：稿是红底白字，见【偏离 3】红底黑字 5.67:1 */
.btn.scan,.btn.prod-enter{background:var(--red);color:var(--etch-fg-on-accent,#000);border-color:var(--red)}
.btn.scan:hover,.btn.prod-enter:hover{background:var(--fg,#fff);color:var(--bg);border-color:var(--fg,#fff)}

/* ── ⑦ 压平「彩色渐变按钮」────────────────────────────────────────────────
   蚀刻原则之一是【禁任何 CSS 渐变】。style.css 里有 5 处彩色渐变按钮：
     .btn.primary / .btn.primary:hover / .btn-sm.primary / .btn.success / .btn.success:hover
   ⚠️ 关键：这些选择器**只写了 background（渐变）、没有 background-color**，
      所以只写 background-image:none 会让按钮变【透明】—— 必须同时补回底色。
   保留不动的 3 类黑灰调渐变（它们本来就是灰阶，与蚀刻不冲突、且承担功能）：
     .hero::before 网格纹与顶部黑遮罩 · .locked-blur::after 内容遮罩 · .wh-sep 分隔线 */
.btn.primary,.btn.primary:hover,.btn-sm.primary,.btn-sm.primary:hover,
.btn.success,.btn.success:hover{background-image:none}
.btn.primary,.btn-sm.primary{background-color:#ffffff;color:var(--etch-fg-on-accent,#000)}
.btn.primary:hover,.btn-sm.primary:hover{background-color:#e6e6e6;color:var(--etch-fg-on-accent,#000)}
.btn.success{background-color:var(--green);color:var(--etch-fg-on-accent,#000)}
.btn.success:hover{background-color:#5cc96b;color:var(--etch-fg-on-accent,#000)}

/* ── ⑧ 产品区：卡片改「上下硬线分区」，去圆角去阴影 ──────────────────────── */
.prod-card{
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
}
.prod-tag{color:var(--red)}
.prod-desc{color:var(--etch-sub)}
.prod-sub{color:var(--etch-dim)}
.prod-price{color:var(--txt)}
.prod-svc li{color:var(--etch-sub);border-bottom:1px solid var(--line)}
.lax-sample-cta{border-radius:0}

/* ── ⑨ 案例墙 / 死亡档案区 ─────────────────────────────────────────────── */
.case{
  background:transparent;border:1px solid var(--line);border-radius:0;box-shadow:none;
}
.case-name{font-family:var(--serif);letter-spacing:-.01em}
.case-tag{letter-spacing:.16em;text-transform:uppercase}
.case-tag.bad{color:var(--red)}
.case-big{letter-spacing:-.02em}
.case p{color:var(--etch-sub)}
.hot-strip>*,.dz-cards>*{border-radius:0}
.hot-arrow{border-radius:0;background:transparent;color:var(--etch-sub)}

/* ── ⑩ 页脚：两套都在（body 内 .sitefoot + bigfoot.js 注入的 .bigfoot）────
   ⚠️ .bigfoot 的颜色硬编码在 bigfoot.css 里，不认令牌 ⇒ 必须显式压一次，
      靠的是本文件加载顺序在 bigfoot.css 之后（见文件头说明）。 */
.sitefoot{background:var(--bg);border-top:1px solid var(--line);color:var(--etch-dim)}
.sf-brand{font-family:var(--serif)}
.sf-nav a,.sf-tg a{color:var(--etch-dim)}
.sf-nav a:hover,.sf-tg a:hover{color:var(--txt)}
.sf-note{color:var(--etch-dim)}
.bigfoot{background:var(--bg);border-top:1px solid var(--line);color:var(--etch-dim)}
.bigfoot .bf-col h4,.bigfoot .bf-logo{color:var(--txt)}
.bigfoot .bf-col a{color:var(--etch-dim)}
.bigfoot .bf-col a:hover{color:var(--txt)}
.bigfoot .bf-c-key{color:var(--etch-dim)}
.bigfoot .bf-c-val{color:var(--txt)}
.bigfoot .bf-divi{border-top-color:var(--line)}
.bigfoot .bf-bot,.bigfoot .bf-copy,.bigfoot .bf-chainbox-l{color:var(--etch-dim)}
/* bigfoot.css 里 bf-chainbox-l / bf-copy 是硬编码 #6c7383，在纯黑上只有 4.09:1
   ⇒ 上面已统一到 --etch-dim(#7a7a7a, 5.4:1)。这一行是 r116 实测修掉的：
      基线（未换肤）时这三处对比度不达标，换肤后转达标。 */

/* ── ⑪ 浮层（AI 解读 / 报告视图 / 移动底栏）：去圆角去模糊 ────────────────── */
.ai-card,.report-view .rv-wrap,.rv-top{border-radius:0;box-shadow:none}
.ai-card{background:var(--bg2);border:1px solid var(--line)}
.ai-keyrow input{background:transparent;color:var(--txt);border-color:var(--line);border-radius:0}
.ai-head{color:var(--etch-sub)}
.ai-text{color:var(--etch-sub)}
.ai-layer{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.tabbar,.tabbar *{border-radius:0}
.tabbar{background:var(--bg) !important;border-top:1px solid var(--line);backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* ── ⑫ 内置浏览器兜底：TG / 微信 WebView 里全站有一条 `html.in-imwebview` 的
   深色 `!important` 兜底（防顶栏漏字）。它按的是旧底色，与本皮肤冲突 ⇒
   用**同等 !important + 更靠后的文档顺序**压回本皮肤的色。
   这是 r115 在 B 端页上踩过的坑：不打这一层，顶栏在 TG 里会露旧色。 */
html.in-imwebview .topnav,
html.in-imwebview .tabbar,
html.tg-ios .topnav,
html.tg-ios .tabbar{
  background:#000000 !important;
  border-bottom:1px solid #222222 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ── ⑬ 焦点可见性（无障碍）：纯黑底上必须有可见焦点环 ───────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:1px solid var(--red);outline-offset:2px;
}

/* ── ⑭ 客服悬浮窗（cop.css · V3.8）：它是全站唯一「自带彩色渐变」的组件 ────
   实测：cop.css 里有 3 处彩色渐变 —— FAB 本体（蓝）、cop-head（蓝）、
   cop-avatar（蓝→琥珀）。三者都是品牌蓝/琥珀，与蚀刻的「纯黑白灰 + 一个红」冲突，
   且是首页上最显眼的一块「旧皮肤残留」。
   ⚠️ cop.css 是共享文件（零改动），所以只能在这里覆盖；靠加载顺序取胜。
   注意 cop-panel / cop-input 用的是 var(--panel) / var(--bg2) / var(--line)
   —— 那些已经跟着令牌层自动变黑了，不必重复写。 */
.cop-fab{background:#ffffff;border-radius:0;box-shadow:none}
.cop-fab:hover{background:#e6e6e6;box-shadow:none;transform:none}
.cop-fab svg{fill:#000000}                       /* cop.css 写死 fill:#fff ⇒ 白底白图标 */
.cop-fab .cop-badge{background:var(--red);color:var(--etch-fg-on-accent,#000);border-radius:0}
.cop-pulse{border-radius:0;border-color:rgba(255,255,255,.35)}
.cop-panel{border-radius:0;box-shadow:none;background:var(--panel);border:1px solid var(--line)}
.cop-head{background:transparent;border-bottom:1px solid var(--line)}
.cop-avatar{background:#111111;border:1px solid var(--line);border-radius:0}
.cop-close{color:var(--etch-dim)}
.cop-close:hover{color:var(--txt)}
.cop-msg{border-radius:0}
/* 🔴 这两处是「白底白字」地雷：cop.css 用 background:var(--accent) 配 color:#fff，
   而本皮肤把 --accent 改成了 #ffffff ⇒ 消息气泡与发送键会变成白底白字、完全看不见。
   （首页默认态看不到，因为客服面板是关闭的 —— 属于「静态扫描 + 真机对比度扫描」
     双重兜底才抓得到的一类问题。） */
.cop-msg.user{background:#ffffff;color:var(--etch-fg-on-accent,#000)}
.cop-send{background:#ffffff;color:var(--etch-fg-on-accent,#000);border-radius:0}
.cop-send:hover{background:#e6e6e6}
.cop-quick button{border-radius:0;border:1px solid var(--line);background:transparent;color:var(--etch-sub)}
.cop-quick button:hover{border-color:var(--txt);background:transparent;color:var(--txt)}
.cop-input textarea{border-radius:0;background:transparent;border:1px solid var(--line);color:var(--txt)}
.cop-input textarea:focus{border-color:var(--txt)}
.cop-foot{color:var(--etch-dim)}

/* ── ⑮ 「--accent 当背景」的白色补丁（静态度量出来的危险组合）──────────────
   实测：style.css 里 var(--accent) 共 50 处 —— 16 处当背景、21 处当文字。
   本皮肤把 --accent 从品牌蓝 #3b82f6 改成白 #ffffff 之后：
     · 「当文字色」的 21 处：本站是纯黑底 ⇒ 白字 21:1 ✅ 无需处理
     · 「当背景」的 16 处：底色变白，凡是同规则里把文字写成 #fff 的，
       就变成【白底白字】。静态扫出的完整清单如下（4 条），逐条补字色：
         .avatar            color:#fff
         .btn-main          color:#fff          （.btn.scan 已在第 ⑥ 节处理）
         .mk-card .mkc-btn  color:#fff
     · 另有 5 处「--accent 当背景但没写 color」的（.as-btn.topup / .as-btn.cash
       / .wh-btn.primary / .wh-btn.cash / .wd-open .btn.primary）—— 它们靠继承，
       父级若是浅底就会继承到深字（恰好对），父级若是深底就会继承到白字（白底白字）
       ⇒ 一并钉死为深字，杜绝继承不确定性。
   ⚠️ 这张清单是**静态分析**结果，可能漏掉「运行时才生成的元素」。所以它只是第一道；
      真正的兜底是每页上线前跑的【全元素对比度扫描】——两者必须同时在场。 */
.avatar,
.btn-main,
.mk-card .mkc-btn,
.as-btn.topup,.as-btn.cash,
.wh-btn.primary,.wh-btn.cash,
.wd-open .btn.primary{
  color:var(--etch-fg-on-accent,#000);
}

/* ── ⑯ 尊重系统的「减少动效」偏好 ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
