/* 设计 token 逐字对齐产品页 components/inci/InciDetailContent.tsx。
   ⛔ --surface 必须定义：早先漏了它，而 .blk/.mat-card/.ad/.tile 全用 background:var(--surface)，
      未定义的自定义属性 = 该声明作废 = 卡片背景透明，白卡全部消失在灰底上（"画面难看"主因之一）。 */
/* ⛔ --faint 原为 #94a3b8，在白底上只有 2.56:1，远低于 WCAG AA 4.5:1 ——
   而它承载的恰恰是 INCI 名 / EINECS / 数据更新于 / 英文副标 这些**字段标签**，
   读者（注册专员、采购）核对出处时最需要看清的就是它们（UX 评审实测 22 处不达标）。
   提到 #64748b（4.76:1 ✓）；纯装饰用途（1px 描边、图例小方块）另给 --hair。 */
:root{--ink:#1e293b;--deep:#0f172a;--sub:#64748b;--faint:#64748b;--hair:#94a3b8;
      --line:#e6ebf2;--brand:#2563eb;--soft:#eff6ff;--bg:#f8fafc;--paper:#f6f8fb;
      --surface:#ffffff;--danger:#dc2626;--ok:#16a34a;--warn:#d97706;
      /* 三档圆角：药丸 / 子块 / 卡片。原先 10 个不同圆角值＝没有层级 */
      --r-sm:6px;--r-md:10px;--r-lg:14px;--wrap-pad:20px;
      /* 页型主色：三类页面各自贯穿全页，不只是区块顶条 */
      --pagec:#2563eb}
body.p-tox{--pagec:#dc2626}
body.p-eff{--pagec:#16a34a}
/* 三级层次：L1 卡片唯一有高度；L2 子块去边框改浅底（后退一层）；L3 药丸 */
.blk,.hero,.sidecard,.ad-card,.ad-side,.mat-card{
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 14px -6px rgba(15,23,42,.10)}
.facts li,.statrow div,.imp,.kv{box-shadow:none}
*{box-sizing:border-box}
/* ⛔ 字号基线必须对齐设计稿（seoinci.pen）：正文 12.5 / 区块标题 15 / 副标 11.5 / 元信息 11。
   早先 body 15px、lead 17px、h1 32px —— 每一级都比设计稿大一号，
   叠加后整页密度完全走样（用户 2026-07-27：「这和设计稿差的也太远了」）。 */
/* ── v2「实验记录纸」底：极淡基线网格，一眼是记录纸不是后台 ──
   ⛔ 纯 CSS 渐变，零外部资源；网格透明度压到 3% 以下，不干扰阅读。 */
body{margin:0;font-family:Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
     color:var(--ink);line-height:1.7;font-size:12.5px;
     background:
       linear-gradient(90deg,rgba(37,99,235,.028) 1px,transparent 1px) 0 0/26px 100%,
       linear-gradient(rgba(15,23,42,.026) 1px,transparent 1px) 0 0/100% 26px,
       var(--paper)}
/* 标识符统一等宽 + 表格数字对齐 —— 读者天天看 COA/MSDS，这是他们的母语视觉 */
.mono,.kv span,.hero-en,.mx .c,td.num,.lbl span,.blk-h .no,.sidecard .r b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
a{color:var(--brand)}
/* ── 双栏布局：内容区 + 280px 右侧栏 ─────────────────────────
   ⛔ ≤980px 降级为侧栏下移，**不用 display:none** —— 隐藏内容对爬虫是负面信号 */
.cols{display:flex;gap:26px;align-items:flex-start}
.main{flex:1;min-width:0}
.side{width:280px;flex:none;position:sticky;top:16px;display:flex;
      flex-direction:column;gap:12px}
@media(max-width:980px){
  /* ⛔⛔ align-items 必须一并覆盖：.cols 在桌面是 align-items:flex-start，
     换成纵向主轴后交叉轴变横向，flex-start 让子项按 max-content 收缩而不是撑满 →
     .main 被表格的 min-width(600/640px) 顶出容器 →
     390px 设备上 documentElement.scrollWidth=690，整页横向溢出 77%
     （UX 评审 2026-07-28 实测，五个页面全中）。.main 再补一条 width 双保险。 */
  .cols{flex-direction:column;align-items:stretch}
  .side{width:100%;position:static}
  .main{width:100%}
}

/* ── 广告位 ───────────────────────────────────────────────────
   ⛔ 顶部横幅限高 90px（Google Page Layout 算法打击首屏广告占比过高）
   ⛔ 预留 min-height 防联盟广告异步加载造成 CLS */
.ad{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.ad-top{max-height:90px;min-height:64px;margin:14px 0 4px;
        display:flex;align-items:center;text-decoration:none;overflow:hidden}
/* ⛔ 改客户端渲染后内容被包进 .ad-top-in，而 gap 原本写在外层 .ad-top 上 —— 
   内层没有 flex/gap，标题·描述·CTA 会挤成一行没有间隔的连排文字
   （2026-07-28 用户截图："配方合规一键扫描上传配方，41 地区…免费试用 →"）。
   ⛔ 0818：CTA 文案已由「免费试用」改为「预约演示」——pricing.html 明写"不设免费额度，也不设免费试用期"，知识站再喊免费试用就是自相矛盾。
   （三个库的**查询**确实免费无需注册，那几处"免费查询"是事实，保留。）*/
.ad-top-in{display:flex;align-items:center;gap:14px;width:100%;padding:13px 18px;
           text-decoration:none}
.ad-top.own{background:linear-gradient(90deg,#eff6ff,#fff)}
.ad-top:hover{border-color:var(--brand)}
.ad-top .ad-t{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.ad-top .ad-d{font-size:13px;color:var(--sub);flex:1;min-width:0;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.ad-top .ad-c{font-size:13.5px;font-weight:600;color:var(--brand);white-space:nowrap}
/* ⛔ 两张自家卡改客户端渲染后必须预留高度，否则填进去时页面往下跳 = CLS */
.ad-card-ph{min-height:118px;border:1px solid var(--line);border-radius:10px;
            background:var(--surface)}
.ad-card-ph:empty{background:var(--surface)}
.ad-card{display:block;position:relative;border:1px solid var(--line);border-radius:10px;
         background:var(--surface);padding:14px 16px;text-decoration:none;transition:.15s}
.ad-card:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(29,78,216,.08)}
.ad-card-in{display:block;width:100%;text-align:left;background:none;border:none;
            padding:0;font:inherit;cursor:pointer;text-decoration:none;color:inherit}
.ad-card .ad-t{font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:5px}
.ad-card .ad-d{font-size:12.5px;color:var(--sub);line-height:1.6;margin-bottom:9px}
.ad-card .ad-c{font-size:13px;font-weight:600;color:var(--brand)}
.ad-side{min-height:250px;display:flex;align-items:center;justify-content:center}
.ad-ph{font-size:12px;color:#cbd5e1}
/* ── 侧栏 300×250 轮播（自家特色功能 + 招租）───────────────────────── */
.adr{position:relative;height:250px;border:1px solid var(--line);border-radius:var(--r-lg);
     background:var(--surface);overflow:hidden}
.adr-s{position:absolute;inset:0;font:inherit;color:inherit;display:flex;flex-direction:column;gap:6px;
       padding:18px 18px 26px;text-align:left;text-decoration:none;cursor:pointer;
       background:var(--surface);border:none;
       background-size:cover;background-position:center;
       opacity:0;visibility:hidden;transition:opacity .45s}
/* 带背景照片的卡：深色渐变压一层，文字转白 —— 手法与营销站几个 section 一致
   （linear-gradient(rgba(10,15,30,.7)…) + url(...)），保证任何照片下都读得清 */
.adr-s.shot .adr-t{color:#fff}
.adr-s.shot .adr-d{color:rgba(255,255,255,.82)}
.adr-s.shot .adr-k{color:#fff;background:rgba(255,255,255,.18);
                   backdrop-filter:blur(2px)}
.adr-s.shot .adr-go{color:#fff}
.adr-s.shot:hover .adr-go{text-decoration:underline}
.adr-s.on{opacity:1;visibility:visible}
.adr-k{align-self:flex-start;font-size:10.5px;font-weight:700;color:var(--c,#2563EB);
       background:color-mix(in srgb,var(--c,#2563EB) 10%,#fff);border-radius:999px;padding:2px 9px}
.adr-t{font-size:16px;font-weight:700;color:var(--deep);line-height:1.4;margin-top:2px}
.adr-d{font-size:12px;line-height:1.75;color:var(--sub)}
.adr-go{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--c,#2563EB)}
/* 招租卡：虚线 + 中性色，一眼区分于自家功能卡 */
.adr-rent{--c:#64748B;background:var(--bg);border:1px dashed var(--hair);border-radius:var(--r-lg)}
.adr-rent .adr-t{color:#475569}
.adr-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:5px}
.adr-dots button{width:6px;height:6px;padding:0;border:none;border-radius:999px;
                 background:#CBD5E1;cursor:pointer;transition:.2s}
.adr-dots button.on{width:16px;background:var(--brand)}
/* ⛔ 设了「减少动效」就不自动轮播，只保留点选 —— 自动轮播是前庭不适的常见诱因 */
@media(prefers-reduced-motion:reduce){.adr-s{transition:none}}

/* 招租弹框 */
.rent-mask{display:none;position:fixed;inset:0;z-index:400;background:rgba(15,23,42,.5);
           align-items:center;justify-content:center;padding:20px}
.rent-mask.on{display:flex}
.rent-box{width:100%;max-width:420px;background:#fff;border-radius:var(--r-lg);
          box-shadow:0 24px 60px -20px rgba(15,23,42,.45);overflow:hidden}
.rent-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
         padding:14px 18px;border-bottom:1px solid var(--line)}
.rent-hd b{font-size:15px;font-weight:700;color:var(--deep)}
.rent-hd .x{border:none;background:none;font-size:16px;color:var(--sub);cursor:pointer;
            line-height:1;padding:2px 4px}
.rent-bd{padding:16px 18px 18px}
.rent-r{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
        padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--sub)}
.rent-r b{font-weight:700;color:var(--deep);text-align:right}
.rent-ct{margin-top:14px;padding:13px 15px;background:var(--bg);border:1px solid var(--line);
         border-radius:var(--r-md)}
.rent-ct-h{font-size:11.5px;font-weight:700;color:var(--sub);margin-bottom:5px}
.rent-ct a{font-size:14px;font-weight:700;color:var(--brand);text-decoration:none}
.rent-wx{margin-top:5px;font-size:12.5px;color:var(--sub)}

.ad-tag{position:absolute;top:6px;right:8px;font-size:10px;color:#94a3b8;
        background:#f1f5f9;border-radius:3px;padding:1px 5px;line-height:1.5}
/* --wrap-pad 单一真相源：吸顶页签靠负 margin 做通栏，写死 -20px 会在
   ≤760px（padding 收到 14px）时两侧各多出 6px，整页横向溢出 6px。 */
.wrap{max-width:1240px;margin:0 auto;padding:20px var(--wrap-pad) 64px}
/* ── 菜单头：逐条对齐 www.incilabs.cn 的 shared-nav.js + 其内联 CSS ── */
.top{display:flex;align-items:center;gap:16px;padding:14px 0;
     border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.nav-logo{display:inline-flex;align-items:center;gap:9px;line-height:1;text-decoration:none}
.nav-logo-ico{width:24px;height:24px;flex:none}
.nav-logo-t{display:inline-flex;flex-direction:column;line-height:1.05}
.nav-logo-n{font-size:21px;font-weight:700;letter-spacing:.5px}
.nav-logo-n .i{color:#0B5FFF}
.nav-logo-n .l{color:#1E1B4B}
.nav-logo-s{font-size:10.5px;color:#64748B;letter-spacing:2.5px;font-weight:500;margin-top:2px}
.nav-right{display:flex;align-items:center;gap:26px;margin-left:auto;flex-wrap:wrap}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{font-size:14px;color:#6B7280;font-weight:500;white-space:nowrap;text-decoration:none}
.nav-links a:hover{color:#0B5FFF}
.nav-links a.active{color:#0B5FFF;font-weight:600}
/* 分组下拉 —— 与营销站 shared-nav.css 同一套观感，这边纯 CSS :hover 实现 */
.nav-links button{font:inherit;font-size:14px;line-height:1;color:#6B7280;font-weight:500;
  white-space:nowrap;background:none;border:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center}
.nav-links button:hover{color:#0B5FFF}
/* 顶级里的「组名 · 当前子页」：组名降一档当上下文，子页名保持高亮 */
.nav-links .grp{font-style:normal;font-weight:500;color:#93B4FF}
.nav-links .sep{font-style:normal;margin:0 5px;color:#CBD5E1;font-weight:400}
.nav-sub a.active b{color:#0B5FFF}
.nav-links .caret{display:inline-block;width:0;height:0;margin-left:5px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.55;transition:transform .15s}
.has-sub{position:relative}
.has-sub:hover .caret{transform:rotate(180deg);opacity:.9}
.nav-sub{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;
  margin-top:14px;min-width:264px;padding:7px;list-style:none;background:#fff;
  border:1px solid #E5E7EB;border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(11,18,32,.22);z-index:120}
/* 顶部透明带接上 14px 空隙，否则鼠标斜着下移时 hover 断掉、下拉闪没 */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub:hover .nav-sub{display:block}
.nav-sub li{margin:0}
.nav-sub a,.nav-sub .soon{display:block;padding:9px 12px;border-radius:8px;
  text-decoration:none;white-space:normal}
.nav-sub a:hover{background:#F5F8FF}
.nav-sub b{display:block;font-size:13.5px;font-weight:600;color:#1E1B4B;line-height:1.5}
.nav-sub span{display:block;font-size:11.5px;color:#94A3B8;line-height:1.55;margin-top:1px}
.nav-sub em{font-style:normal;margin-left:6px;font-size:10px;font-weight:600;
  color:#94A3B8;background:#F1F5F9;border-radius:999px;padding:1px 6px}
.nav-sub .soon{cursor:default}
.nav-sub .soon b{color:#94A3B8;font-weight:500}
.nav-cta-wrap{display:flex;gap:12px;align-items:center}
.nav-cta{background:#0B5FFF;color:#fff;padding:8px 20px;border-radius:8px;
         font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav-cta:hover{filter:brightness(1.08)}
@media(max-width:860px){.nav-links{gap:16px}.nav-right{gap:14px}}
.crumb{font-size:11.5px;color:var(--sub);margin-bottom:10px}
.crumb a{color:var(--sub)}
h1{font-size:22px;line-height:1.25;margin:0 0 4px;letter-spacing:-.02em}
.subline{font-size:12px;color:var(--sub);margin:0 0 14px}
.lead{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
      border-radius:10px;padding:14px 16px;margin:0 0 12px;font-size:13px;line-height:1.7}
.lead.ban{border-left-color:var(--danger)}
.lead .meta{font-size:11px;color:var(--faint);margin-top:6px}
h2{font-size:15px;margin:26px 0 10px;letter-spacing:-.01em;scroll-margin-top:16px}
h2 .n{color:var(--faint);font-weight:500;font-size:11.5px;margin-left:8px}
.toc{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px}
.toc a{font-size:12.5px;text-decoration:none;background:#fff;border:1px solid var(--line);
       border-radius:999px;padding:4px 12px;color:var(--sub)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.facts li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12.5px;word-break:break-word}
.facts b{display:block;color:var(--faint);font-weight:500;font-size:10.5px;margin-bottom:2px}
.stat{background:transparent;border:none;border-radius:0;padding:0}
.stat .big{font-size:32px;font-weight:800;color:var(--brand);letter-spacing:-.02em;line-height:1.15}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px;
         border-top:1px solid var(--line);padding-top:10px}
.statrow div{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.statrow div b{display:block;font-size:11px;color:var(--sub);font-weight:500}
.statrow div span{font-size:16px;font-weight:700}
/* ⛔ 宽表在窄屏靠横滑，但边缘不给提示用户根本不知道右边还有列
   （三氯生矩阵 10 列，390px 屏只看得到 1.5 列）。纯 CSS 滚动阴影，无 JS 无外部资源。 */
.tw,.mx{background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) 0 0,
    linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.16),transparent) 0 0,
    radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.16),transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.tw table td:first-child,.tw table th:first-child{min-width:92px}
.tw table td:nth-child(5),.tw table th:nth-child(5){min-width:88px}
table{border-collapse:collapse;width:100%;font-size:11.5px;min-width:640px}
th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
      line-height:1.55}
th{background:#f8fafc;font-weight:600;white-space:nowrap;font-size:10.5px;color:var(--sub)}
tr:last-child td{border-bottom:none}
tr.cn td{background:var(--soft)}
td.num{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.ban{color:var(--danger);font-weight:700}
.src{color:var(--sub);font-size:11px;line-height:1.65}
.locked{background:#f8fafc;border:1px dashed var(--line);border-radius:9px;padding:11px 13px;margin-top:10px;font-size:11.5px;color:var(--sub)}
.locked b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips span,.chips a{background:#f1f5f9;border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--ink);text-decoration:none}
.chips a:hover{background:var(--soft);color:var(--brand)}
.chips.inline{margin:0;gap:5px}
.chips.inline span{background:var(--soft);color:#1e3a8a;font-size:12.5px;padding:2px 9px}
.chips.inline .cnt{background:transparent;color:var(--faint);padding:2px 0 2px 4px}
.more{color:var(--faint)}
ul.b{margin:0;padding-left:20px}
ul.b li{margin-bottom:6px}
.card{background:transparent;border:none;border-radius:0;padding:0}
.card h3{font-size:13px;margin:12px 0 4px;font-weight:700}
.card h3:first-child{margin-top:0}
.card p{margin:0 0 12px;color:#334155;font-size:11.5px;line-height:1.75}
/* FAQ 每问一张软卡 + 左侧细竖线 + Q 前缀（设计稿 PLM1.pen）——
   早先是裸 h3+p 平铺，一屏三四问粘成一坨，扫不出问题边界。 */
.card.faq h3{background:var(--bg);border:1px solid var(--line);border-left:2px solid var(--c);
             border-radius:10px 10px 0 0;margin:14px 0 0;padding:11px 13px 6px;
             font-size:13.5px;font-weight:700;line-height:1.5;color:var(--deep)}
.card.faq h3:first-child{margin-top:0}
.card.faq h3::before{content:"Q";display:inline-block;margin-right:8px;font-weight:800;
                     color:var(--c);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.card.faq p{background:var(--bg);border:1px solid var(--line);border-top:none;
            border-left:2px solid var(--c);border-radius:0 0 10px 10px;
            margin:0 0 2px;padding:0 13px 11px;font-size:12.5px;color:#475569}
.ev{background:var(--bg);border:1px solid var(--line);border-left:2px solid var(--c);
    border-radius:10px;padding:12px 14px;margin-bottom:8px}
/* ⛔ 英文原题必须比中译大：这是可引用、可核验的原始标题，中译只是辅助。
   早先 .t 12.5px 而 .tcn 13.5px，主次是反的（UX 核对 2026-07-28）。 */
.ev .t{font-weight:600;font-size:14px;margin-bottom:4px;line-height:1.5}
.ev .m{font-size:11px;color:var(--faint);display:flex;flex-wrap:wrap;gap:9px;align-items:center}
/* ── 可采购原料（首屏醒目位）────────────────────────────────── */
.mat{margin:22px 0 6px}
.mat-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.mat-hd h2{margin:0}
.mat-sub{font-size:13px;color:var(--sub)}
/* ⛔ 固定 4 列（而非 auto-fill）：用户要求原料**最多占 2 行**，
   auto-fill 下列数随容器宽度浮动，「2 行」就不是一个确定的张数。4 列 × 2 行 = 8 张。 */
.mat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1080px){.mat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mat-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
          padding:12px;display:flex;flex-direction:column;gap:3px;transition:.15s}
.mat-card:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(29,78,216,.08)}
.mat-name{font-weight:700;font-size:13px;color:var(--ink);line-height:1.4}
.mat-inci{font-size:11px;color:#334155;line-height:1.55;margin-top:1px}
.mat-vendor{font-size:12px;color:var(--cyan,#0891b2);font-weight:600;line-height:1.5}
.mat-meta{font-size:11px;color:var(--sub);line-height:1.5}
.mat-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.mat-tag{font-style:normal;font-size:10.5px;color:var(--sub);background:#f8fafc;
         border:1px solid var(--line);border-radius:5px;padding:1px 7px;line-height:1.6}
/* ⛔ margin-top:auto —— 没有供应商/规格的卡片会矮一截，按钮跟着上浮，
   一行里几个按钮不在同一水平线上（设计稿是齐底的）。 */
.mat-act{display:flex;gap:7px;margin-top:auto;padding-top:9px}
.mat-act button{flex:1;font:inherit;font-size:12.5px;padding:6px 0;border-radius:7px;
                cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
                transition:.12s}
.mat-act .btn-cart:hover{border-color:var(--brand);color:var(--brand)}
/* ⛔ 「已在购物车」必须一眼可辨：早先两态都是白底灰字的描边按钮，
   加没加进车看不出来（用户 2026-07-27）。已加入 = 绿底实心 + ✓，
   同时整张卡片描边转绿 + 淡绿底，扫一眼就知道选了哪几款。 */
.mat-act .btn-cart.on{background:#DCFCE7;border-color:#16A34A;color:#15803D;font-weight:700}
.mat-act .btn-cart.on:hover{background:#BBF7D0;border-color:#15803D;color:#14532D}
.mat-card.in-cart{border-color:#16A34A;background:#F6FEF9;
                  box-shadow:0 0 0 1px rgba(22,163,74,.18)}
.mat-card.in-cart .mat-name::before{content:"✓ ";color:#16A34A;font-weight:800}
/* ⛔ 引导条**中性底 + 品牌蓝按钮**，不跟页型色走：
   跟 --cbg 会让毒理页（红）的"加入购物车"引导条变成一条粉红警示条，
   语义完全拧了；跟品牌蓝铺满又会和原料区自己的青色竖轴打架。
   中性底谁都不冲突，蓝只留给唯一那颗 CTA。 */
.mat-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
         flex-wrap:wrap;margin-top:12px;padding:10px 14px;background:var(--bg);
         border:1px solid var(--line);
         border-radius:9px;font-size:12.5px;color:var(--ink)}
.mat-bar.mat-top{margin:0 0 11px}
.mat-hint{font-size:12px;font-weight:600;color:var(--deep)}
.mat-bar #cartN{font-size:12px;color:var(--sub)}
.mat-more{display:block;width:100%;margin-top:11px;font:inherit;font-size:12.5px;
          font-weight:600;padding:9px 0;cursor:pointer;border-radius:9px;
          background:var(--bg);color:var(--brand);border:1px solid var(--line)}
.mat-more:hover{background:var(--soft);border-color:var(--brand)}
.mat-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-primary{font:inherit;font-size:12.5px;font-weight:700;padding:7px 16px;border:none;
             border-radius:8px;background:var(--c,var(--brand));color:#fff;cursor:pointer}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{font:inherit;font-size:13.5px;font-weight:600;padding:7px 16px;cursor:pointer;
           border-radius:8px;background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn-ghost:hover{background:var(--soft)}
.join{background:linear-gradient(180deg,#f8fafc,#fff);border:1px dashed var(--line);
      border-radius:12px;padding:20px 22px}
.join h2{margin:0 0 8px}
.join p{margin:0 0 14px;font-size:14px;line-height:1.7;color:#334155}
@media(max-width:640px){.mat-grid{grid-template-columns:1fr}}
h3.sub2{font-size:13px;margin:15px 0 7px;color:var(--sub);font-weight:600}
.xref{background:var(--soft);border:1px solid var(--line);border-radius:10px;
      padding:13px 16px;font-size:14px;color:var(--ink);margin:18px 0}
.xref a{font-weight:600;white-space:nowrap}
/* ── 区块标题：竖色条 + 中英双语 + 主题色下划线 ── */
h2.sec-h{display:flex;align-items:center;gap:9px;position:relative;
         margin:26px 0 12px;padding:0 0 8px 12px;font-size:16px;font-weight:700;
         color:var(--ink);border-bottom:1px solid var(--line)}
h2.sec-h::before{content:"";position:absolute;left:0;top:2px;
                 width:3px;height:16px;background:var(--c);border-radius:2px}
h2.sec-h::after{content:"";position:absolute;left:0;bottom:-1px;
                width:56px;height:2px;background:var(--c)}
h2.sec-h .n{font-size:12px;font-weight:600;color:var(--c);background:transparent;padding:0}
h2.sec-h em{font-style:normal;font-size:11.5px;font-weight:400;color:#94A3B8;
            letter-spacing:.02em}

/* ── 区块卡：顶部主题色条是层次感的来源（对齐产品页 InciDetailContent）── */
/* ⛔ 区块卡改**左侧竖轴**：顶部 3px 条滚动两秒就看不见了，撑不起页型识别；
   左轴在整个区块高度上一直可见（UX 评审 2026-07-28）。 */
.blk{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c);
     border-radius:var(--r-lg);overflow:hidden;margin:0 0 11px}
.blk-bar{display:none}
.blk-in{padding:15px 18px 17px}
.blk-h{display:flex;align-items:center;gap:9px;margin:0 0 11px;font-size:17px;
       font-weight:700;color:var(--deep)}
.blk-h .n{font-size:11px;font-weight:700;color:var(--c);background:var(--cbg);
          border-radius:var(--r-sm);padding:1px 7px;line-height:1.7}
/* mono 区块序号：右对齐、页型色半透明 —— 扫读锚点 + 编辑气质 */
.blk-h .no{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.16em;
           color:var(--c);opacity:.45}
.blk-en{font-size:12px;font-weight:400;color:var(--sub);letter-spacing:.02em}
.blk-h .sub{font-size:12px;font-weight:400;color:var(--sub)}

/* 药丸标签：浅底 + 同色系深字（不是灰底） */
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;
      font-size:11.5px;font-weight:600;line-height:1.5}
.pill.b{background:#EFF6FF;color:#1D4ED8}
.pill.g{background:#DCFCE7;color:#15803D}
.pill.o{background:#FFEDD5;color:#9A3412}
.pill.r{background:#FEE2E2;color:#B91C1C}
.pill.p{background:#F5F3FF;color:#7C3AED}
.pill.s{background:#F1F5F9;color:#64748B}

/* 表格：色块矩阵风格 */
.tw table th{background:#F8FAFC;color:#64748B;font-size:11px;font-weight:600;
             letter-spacing:.02em}
.tw table td{font-size:12.5px}
.cell-lim{display:block;background:#2563EB;color:#fff;border-radius:4px;
          padding:3px 0;text-align:center;font-weight:700;font-size:11.5px}
.cell-ok{display:block;background:#F0FDF4;color:#16A34A;border-radius:4px;
         padding:3px 0;text-align:center;font-weight:700}
.cell-ban{display:block;background:#FEE2E2;color:#B91C1C;border-radius:4px;
          padding:3px 0;text-align:center;font-weight:700;font-size:11.5px}

/* 琥珀警示框 */
.note-amber{background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;
            padding:10px 12px;margin:10px 0}
.note-amber .t{font-size:11.5px;font-weight:700;color:#92400E;margin-bottom:4px}
.note-amber .d{font-size:11px;line-height:1.6;color:#B45309}

/* 图例 */
.legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:9px;
        font-size:10.5px;color:#64748B}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}

.tiles{display:flex;flex-wrap:wrap;gap:10px}
.tiles .tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;
             padding:12px 16px;min-width:104px;text-align:center}
.tiles .tile b{display:block;font-size:24px;font-weight:800;color:var(--brand);
               letter-spacing:-.02em;line-height:1.2}
.tiles .tile span{font-size:12.5px;color:var(--sub)}
h3.grp i{font-style:normal;font-weight:600;color:var(--sub)}
h3.grp{font-size:13.5px;margin:20px 0 9px;padding-left:10px;border-left:3px solid var(--brand);
       color:var(--ink)}
.ev .tcn{font-size:11.5px;color:var(--sub);margin-top:2px;line-height:1.6}
h1 small{font-size:16px;font-weight:500;color:var(--sub)}
.ev .why{flex-basis:100%;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);
         color:#475569;line-height:1.6}
.tag{border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600}
.tag.support{background:#ecfdf5;color:var(--ok)}
/* 结论标签按**语义**上色，不按 verdict 原值 —— 同一个 verdict 在功效/安全两个
   维度含义相反（safety 的 support = 证实有风险）。
   warn=需注意 / ok=正面 / caution=条件依赖 / neutral=中性（不带倾向）。 */
.tag.warn{background:#fef2f2;color:#b91c1c}
.tag.ok{background:#ecfdf5;color:#047857}
.tag.caution{background:#fffbeb;color:#b45309}
.tag.neutral{background:#f1f5f9;color:var(--sub)}
h3.grp.warn{border-left-color:#dc2626}
h3.grp.ok{border-left-color:#047857}
h3.grp.caution{border-left-color:#b45309}
h3.grp.neutral{border-left-color:#94a3b8}
.tag.mixed{background:#fffbeb;color:var(--warn)}
.tag.mechanism_only{background:#f1f5f9;color:var(--sub)}
.cta{display:block;background:var(--brand);color:#fff;text-decoration:none;padding:16px 20px;
     border-radius:12px;margin:34px 0 0;font-weight:600}
.cta small{display:block;font-weight:400;opacity:.85;margin-top:4px;font-size:13px}
/* 页底「数据说明」：设计稿是中性灰卡带标题，不是琥珀警示框 ——
   琥珀是页面里"这条要当心"的专用色（共现警示、杂质提示），
   页底那段是常规说明，用同一个色等于把警示色说贬值了。 */
.disc{margin-top:24px;padding:14px 18px;background:var(--soft);border:1px solid var(--line);
      border-radius:var(--r-lg);font-size:11.5px;line-height:1.75;color:var(--sub)}
.disc::before{content:"数据说明";display:block;font-size:12.5px;font-weight:700;
              color:var(--deep);margin-bottom:5px}
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--sub);font-size:13px}
.foot a{color:var(--sub)}
.idx{columns:3;column-gap:24px}
.idx a{display:block;padding:3px 0;font-size:14px;text-decoration:none;break-inside:avoid}
.idx .f{color:var(--faint);font-size:12px}

/* ══════════════════════════════════════════════════════════════════════
   以下为「对齐产品页」视觉层（设计稿：seoinci.pen · 成分页 · 对齐产品设计）。
   每条都能在 components/inci/InciDetailContent.tsx 找到对应实现，不是自创。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 顶部信息条 —— 产品页 header：名称 + 状态药丸 + CAS/EC 方块 + CN 状态卡 */
.hero{background:var(--surface);border:1px solid var(--line);
      border-left:3px solid var(--pagec);border-radius:var(--r-lg);
      overflow:hidden;margin:0 0 11px}
.hero-bar{display:none}
.hero-in{padding:16px 20px}
.hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-name{display:flex;flex-direction:column;gap:5px}
.hero-top h1{font-size:28px;font-weight:800;margin:0;line-height:1.15;
             letter-spacing:-.025em;color:var(--deep)}
/* 页型横杠：H1 下方一道主色，滚动前就把"这是哪类页"钉住 */
.hero-rule{display:block;width:56px;height:3px;border-radius:2px;background:var(--pagec)}
.verdict{margin-left:auto;border:1px solid;border-radius:9px;padding:8px 13px;min-width:190px}
.verdict b{display:block;font-size:12.5px;font-weight:700;line-height:1.5}
.verdict b i{font-size:10px;font-weight:700;letter-spacing:.1em;opacity:.75;font-style:normal}
.verdict span{font-size:10.5px;opacity:.85;
              font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hero-ids{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
.hero-en{font-size:12.5px;color:var(--pagec);letter-spacing:.05em;font-weight:600}
.kv{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
    background:#f8fafc;border-radius:var(--r-sm);padding:4px 9px}
.kv b{font-size:10.5px;font-weight:600;color:var(--sub);line-height:1.4}
.kv span{font-size:12px;font-weight:700;color:var(--deep)}
.hero-desc{margin:11px 0 0;font-size:13px;line-height:1.8;color:#334155;max-width:82ch}
.hero-lead{margin:7px 0 0;font-size:13px;line-height:1.75;color:#475569;max-width:82ch}
.hero .lbls{margin-top:9px}
.hero-meta{margin:6px 0 0;font-size:11.5px;color:var(--sub)}
.hero-link{margin-left:auto;flex:none;background:var(--soft);border:1px solid #bfdbfe;
           border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;
           color:var(--brand);text-decoration:none;white-space:nowrap}
.hero-link:hover{background:#dbeafe}

/* ② 页签栏 —— 产品页 QUICK_NAV：每个药丸取所属区块主题色 */
/* ⛔ 单行 + 吸顶 + 中性底：11 枚各自硬编码配色的彩色药丸平铺、桌面换 2 行、
   移动端 5 行 —— 那是撒纸屑不是导航。只有当前项用页型色（UX 评审 2026-07-28）。 */
.navpills{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;
          position:sticky;top:0;z-index:20;padding:8px var(--wrap-pad);
          margin:0 calc(-1 * var(--wrap-pad)) 11px;
          background:rgba(246,248,251,.93);backdrop-filter:blur(8px);
          border-bottom:1px solid var(--line);scrollbar-width:none}
.navpills::-webkit-scrollbar{display:none}
.navpills a{flex:none;font-size:12.5px;font-weight:500;text-decoration:none;
            border-radius:999px;padding:5px 13px;line-height:1.5;white-space:nowrap;
            background:var(--surface);border:1px solid var(--line);color:var(--sub)}
.navpills a:hover{border-color:var(--pagec);color:var(--pagec)}
.navpills a.cur{background:var(--pagec);border-color:var(--pagec);color:#fff;font-weight:600}

/* ③ 区块卡计数徽章 */
.blk-h .n{font-size:11px;font-weight:700;color:var(--c);background:var(--cbg);
          border-radius:5px;padding:1px 7px;line-height:1.6}
.blk-h .sub{font-size:11.5px;font-weight:400;color:var(--sub)}
.blk p:last-child,.blk ul:last-child,.blk div:last-child{margin-bottom:0}
.blk .src{font-size:11px;line-height:1.6}

/* ④ 多国标签名徽章 —— 产品页「标准标签名」 */
.lbls{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
/* 多国标签名 = 深色「印章」区码 + 浅底名字（设计稿 PLM1.pen）。
   早先整枚淡蓝、区码也是蓝字，五枚排开像五个链接按钮，扫不出"哪国叫什么"。 */
.lbl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 8px 3px 3px;
     border-radius:6px;background:#f8fafc;border:1px solid var(--line)}
.lbl i{font-style:normal;font-weight:800;color:#fff;background:var(--deep);font-size:10px;
       letter-spacing:.04em;border-radius:4px;padding:2px 6px;line-height:1.5}
.lbl span{color:#334155}
.lbl.same i+i{margin-left:-3px}
/* 与 hero 同名的地区折成一枚：只列地区码 + 「同 INCI / 中文名」 */
.lbl.same{background:#f8fafc;border-color:var(--line)}
.lbl.same i{color:var(--sub);margin-right:2px}
.lbl.same span{color:var(--sub)}

/* ⑤ 功效关联指数 —— 产品页橙色描边容器 + 分档药丸 */
.lift{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
      border:1px solid #fdba74;background:#fffbeb;border-radius:8px;padding:5px 10px}
.lift em{font-style:normal;font-size:11px;font-weight:600;color:#9a3412}
.lift b{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;
        background:#ffedd5;color:#9a3412}
.lift b.hi{background:#fee2e2;color:#b91c1c}
.lift b.lo{background:#dcfce7;color:#15803d}

/* ⑥ 浓度矩阵 —— 产品页热力色块（配色逐字取自 components/inci/heat-scale.ts） */
.mx{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.mx table{width:100%;border-collapse:separate;border-spacing:2px;min-width:600px;
          font-size:11.5px;margin:0}
.mx th{background:transparent;border:none;color:var(--sub);font-size:10.5px;font-weight:600;
       padding:5px 4px;text-align:center;white-space:nowrap}
.mx th.rowh{text-align:left;padding-left:10px;color:#475569;min-width:82px;font-weight:500;
            font-size:12px}
.mx th .rc{display:block;font-style:normal;font-size:9.5px;letter-spacing:.1em;
           color:var(--hair);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mx td{padding:0;border:none}
.mx .c{display:block;border-radius:var(--r-sm);text-align:center;padding:6px 5px;
       white-space:nowrap;font-weight:700;font-size:11.5px;min-width:78px}
.mx .c sup{font-size:8.5px;font-weight:400;opacity:.75;margin-right:2px;
           vertical-align:middle;font-family:Inter,sans-serif}
/* ⛔ 比例条：早先限值格一律同一个蓝方块，甘油值域 15%→99.4% 实测只用了 2 个色阶，
   ≤15% 和 ≤99.4% 长得一模一样，图例却写着「由严到宽」（UX 评审 2026-07-28）。
   现在填充宽度 ∝ 限值本身，不读数字也能判断松紧。 */
.mx .c.lim{position:relative;display:flex;align-items:center;justify-content:space-between;
           gap:5px;background:#eff6ff;color:#1e3a8a;overflow:hidden;padding:6px 8px}
.mx .c.lim::before{content:"";position:absolute;inset:0 auto 0 0;
                   width:max(4px,calc(var(--pct,0)*1%));background:#2563eb;opacity:.20}
.mx .c.lim > *{position:relative}
.mx .c.ban{background:#dc2626;color:#fff}
.mx .c.part{background:#dc2626;color:#fff;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.34) 0 3px,transparent 3px 7px)}
.mx .c.ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.mx .c.none{background:#fff;color:#cbd5e1;border:1px solid var(--line);font-weight:400}
/* 整列无数据 → 一格合并带，替代满屏破折号 */
.mx td.nreg{padding:0 2px}
.mx td.nreg span{display:flex;align-items:center;justify-content:center;height:100%;
  min-height:60px;border:1px dashed var(--line);border-radius:var(--r-md);background:#fff;
  color:var(--hair);font-size:11px;line-height:1.6;text-align:center;white-space:normal}
.mx tbody tr:nth-child(odd) th.rowh{background:#f8fafc}

/* ⑦ 图例（热力档 + 来源角标） */
.hleg{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:10px;
      font-size:12px;color:var(--sub)}
.hleg i.sw{display:inline-block;width:14px;height:12px;border-radius:3px;margin-right:6px;
           vertical-align:-2px}
.hleg i.sw.lim{background:linear-gradient(90deg,#2563eb 55%,#eff6ff 55%)}
.hleg i.sw.ban{background:#dc2626}
.hleg i.sw.ok{background:#f0fdf4;border:1px solid #bbf7d0}
.hleg i.sw.none{background:#fff;border:1px solid var(--line)}

/* ⑧ 地区状态药丸（各地区合规一览） */
.rchips{display:flex;flex-wrap:wrap;gap:6px}
.rchips span{border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600;line-height:1.5}

/* ⑨ 终点 / KPI 卡 —— 产品页毒理 KPI 网格 */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.kpi{border:1px solid;border-radius:9px;padding:8px 11px}
.kpi b{display:block;font-size:10.5px;font-weight:500;color:var(--sub);line-height:1.4}
.kpi span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
          font-size:12.5px;font-weight:700;margin-top:3px}
.kpi.good{background:#f0fdf4;border-color:#bbf7d0}.kpi.good span{color:#16a34a}
.kpi.bad{background:#fef2f2;border-color:#fecaca}.kpi.bad span{color:#dc2626}
.kpi.mid{background:#fffbeb;border-color:#fde68a}.kpi.mid span{color:#d97706}
.kpi.neu{background:#eff6ff;border-color:#bfdbfe}.kpi.neu span{color:#2563eb}

/* ⑩ 进度条（功效共现 / 分布） */
.bar{height:7px;border-radius:999px;background:#e2e8f0;overflow:hidden;flex:1;min-width:60px}
.bar i{display:block;height:100%;border-radius:999px}
.erow{display:flex;align-items:center;gap:10px;padding:4px 0}
.erow .nm{width:88px;flex:none;font-size:12px;font-weight:600;color:var(--ink)}
.erow .v{flex:none;text-align:right;font-size:11.5px;
         font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.erow .v.c{width:74px;color:var(--sub)}
.erow .v.p{width:52px;font-weight:700;color:var(--ink)}
.erow .v.l{width:64px;font-weight:700;color:#ea580c}

/* ⑪ 杂质卡片 —— 产品页杂质 chips */
.imps{display:flex;flex-wrap:wrap;gap:7px}
.imp{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:6px 10px;
     display:inline-flex;align-items:center;gap:7px;font-size:12px}
.imp b{font-weight:600;color:var(--ink)}
.imp span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
          color:var(--danger);font-size:11.5px}
.imp em{font-style:normal;color:var(--faint);font-size:10.5px}

/* ⑫ 配伍禁忌卡 —— 产品页「配伍注意」 */
.sevrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.sev{border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;line-height:1.5}
.sev.critical{background:#dc2626;color:#fff}
.sev.high{background:#fed7aa;color:#9a3412}
.sev.moderate{background:#fef3c7;color:#b45309}
.sev.low{background:#f1f5f9;color:#64748b}
.sev.informational{background:#f1f5f9;color:#94a3b8}
.rule{border:1px solid #fed7aa;border-radius:9px;padding:10px 12px;background:var(--surface)}
.rule+.rule{margin-top:8px}
.rule .hd{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:5px}
.rule .ty{background:#f5f5f4;color:#78716c;border-radius:5px;padding:2px 8px;font-size:10.5px}
.rule .pt{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:5px;
          padding:2px 8px;font-size:10.5px;font-weight:600}
.rule .sm{font-size:11.5px;line-height:1.65;color:#44403c;margin:0}
.rule .rec{font-size:11.5px;line-height:1.65;color:#059669;margin:5px 0 0}

/* ⑬ 内链条（毒理详情等跨页跳转） */
.xref{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
      background:var(--soft);border:1px solid #bfdbfe;border-radius:9px;padding:10px 13px;
      font-size:12.5px;color:#1e3a8a;margin:0}

/* ── 数据中心 /data/ ─────────────────────────────────────────────────── */
.hubg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:900px){.hubg{grid-template-columns:1fr}}
.hubc{display:flex;flex-direction:column;gap:7px;background:var(--surface);
      border:1px solid var(--line);border-top:3px solid var(--c);border-radius:var(--r-md);
      padding:14px 15px;text-decoration:none;transition:.15s}
.hubc:hover{border-color:var(--c);box-shadow:0 4px 16px -6px rgba(15,23,42,.2)}
/* 即将推出：虚线 + 降饱和，一眼看出「这个还点不了」，但内容照读 */
.hubc.soon{background:var(--bg);border-style:dashed;border-top-style:solid;
           border-top-color:color-mix(in srgb,var(--c) 45%,#fff);cursor:default}
.hubc.soon:hover{border-color:var(--line);border-top-color:color-mix(in srgb,var(--c) 45%,#fff);
                 box-shadow:none}
.hubc.soon .hd b{color:var(--sub)}
.hubc.soon .st{color:var(--hair)}
.hubc.soon .go{color:var(--hair);font-weight:600}
.hubc .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hubc .hd b{font-size:16px;font-weight:700;color:var(--deep)}
.hubc .hd i{font-style:normal;font-size:10.5px;font-weight:600;border-radius:999px;
            padding:2px 8px}
.hubc .st{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
          font-weight:700;color:var(--c)}
.hubc .ds{font-size:12px;line-height:1.7;color:var(--sub)}
.hubc .go{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:700;color:var(--c)}
.hubq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
@media(max-width:900px){.hubq{grid-template-columns:1fr}}
.hubqi{display:flex;flex-direction:column;gap:6px;background:var(--bg);
       border:1px solid var(--line);border-left:3px solid var(--c);border-radius:var(--r-md);
       padding:12px 14px;text-decoration:none}
.hubqi:hover{background:var(--soft)}
.hubqi b{font-size:13px;font-weight:600;line-height:1.6;color:var(--deep)}
.hubqi span{font-size:12px;font-weight:700;color:var(--c)}
.rulec{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
       padding:12px 14px;margin-bottom:8px}
.rulec b{display:flex;align-items:baseline;gap:9px;font-size:13.5px;font-weight:700;
         color:var(--deep)}
.rulec b i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
           font-size:11.5px;color:var(--pagec);opacity:.55}
.rulec p{margin:5px 0 0 26px;font-size:12.5px;line-height:1.75;color:#475569}

/* ⑬b 功效方向卡（成分页 → 证据页的站内互链）*/
.effg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media(max-width:760px){.effg{grid-template-columns:1fr}}
.effc{display:flex;flex-direction:column;gap:7px;background:var(--surface);
      border:1px solid var(--line);border-left:3px solid var(--c);border-radius:10px;
      padding:12px 14px;text-decoration:none;transition:.15s}
.effc:hover{border-color:var(--c);box-shadow:0 2px 10px rgba(15,23,42,.07)}
.effc .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.effc .hd b{font-size:15px;font-weight:700;color:var(--deep)}
.effc .hd i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--brand)}
/* ⛔ 独立类，不要复用 .kv —— .kv 是 hero 里 CAS/EINECS 芯片的样式，
   自带 1px 边框 + #f8fafc 底 + 圆角，套在卡片里会平白多出一个方块。 */
.effc .efm{display:flex;gap:16px}
.effc .efm span{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--sub)}
.effc .efm b{font-size:14px;font-weight:700;color:var(--deep);
            font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ⑭ 证据等级卡（五色圆点）—— 功效证据页 LEVEL_META 配色 */
.lvls{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
.lvl{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c);
     border-radius:10px;padding:11px 13px}
.lvl .r{display:flex;align-items:center;justify-content:space-between}
.lvl .d{color:var(--c);font-size:11px;line-height:1}
.lvl .v{font-size:21px;font-weight:800;color:var(--deep);line-height:1.1}
.lvl .t{font-size:12px;font-weight:600;color:var(--ink);margin-top:3px}
.lvl .s{font-size:10.5px;color:var(--faint)}

/* ⑮ 结论分布堆叠条 */
.stack{display:flex;height:7px;border-radius:999px;overflow:hidden;background:#f1f5f9;margin:7px 0 4px}
.stack i{display:block;height:100%}

/* ⑯ 侧栏事实卡（⛔ 不放安全评分——本站不下安全性结论，见 DISCLAIMER） */
.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.sidecard h3{font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 9px}
.sidecard .r{display:flex;align-items:center;justify-content:space-between;gap:10px;
             font-size:12px;color:var(--sub);padding:3.5px 0}
.sidecard .r b{font-size:12.5px;font-weight:700}
.sidecard .li{font-size:10.5px;line-height:1.7;color:var(--sub)}
.sidecard .up{font-size:10px;color:var(--faint);margin-top:7px}

/* ⑰ 原料卡收敛：正文里最多 2 行（4×2＝8 张），其余进「更多」弹框。
   ⛔ 弹框内容是**真实 HTML**（不是 JS 拼的），爬虫照样能读到全部原料名与供应商。 */
.mat-modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;
           justify-content:center;background:rgba(15,23,42,.45);padding:20px}
.mat-modal.on{display:flex}
.mat-modal-in{background:var(--surface);border-radius:14px;width:min(1040px,100%);
              max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
              box-shadow:0 24px 60px rgba(15,23,42,.25)}
.mat-modal-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;
              border-bottom:1px solid var(--line)}
.mat-modal-hd b{font-size:15px;color:var(--ink)}
.mat-modal-hd .x{margin-left:auto;cursor:pointer;border:none;background:none;
                 font-size:20px;line-height:1;color:var(--faint)}
.mat-modal-bd{overflow-y:auto;padding:16px 18px}
.mat-modal-bd .mat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.mat-modal-bd .mat-grid{grid-template-columns:1fr}}

/* ⑱ 询价 / 入驻表单弹框 */
.inq-in{width:min(460px,100%)}
/* ⛔ 表单体必须自己能滚 + 按钮钉底：.mat-modal-in 是 overflow:hidden，
   表单一长（购物车里几项原料就够）「提交/取消」整排被裁在可视区外，
   用户根本点不到（2026-07-28 实测截图）。 */
.inq-bd{padding:16px 18px 0;display:flex;flex-direction:column;gap:11px;
        overflow-y:auto;min-height:0}
.inq-act{position:sticky;bottom:0;background:var(--surface);padding:12px 0 16px;
         margin-top:4px;border-top:1px solid var(--line)}
.inq-bd label{display:flex;flex-direction:column;gap:4px;font-size:12px;
              font-weight:600;color:var(--ink)}
.inq-bd label i{font-style:normal;color:var(--danger)}
.inq-bd input,.inq-bd textarea{font:inherit;font-size:12.5px;font-weight:400;
    padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--ink);
    background:#fff;resize:vertical}
.inq-bd input:focus,.inq-bd textarea:focus{outline:none;border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.inq-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:520px){.inq-row{grid-template-columns:1fr}}
.inq-tip{margin:-4px 0 0;font-size:10.5px;color:var(--faint)}
.inq-items{background:var(--soft);border:1px solid #bfdbfe;border-radius:8px;
           padding:9px 11px;font-size:11.5px;color:#1e3a8a;line-height:1.6}
.inq-items-hd{font-weight:700;margin-bottom:7px}
.inq-items-hd span{font-weight:400;color:#3b6bb5;margin-left:6px;font-size:10.5px}
.inq-item{display:grid;grid-template-columns:1fr 62px 58px 22px;gap:6px;
          align-items:center;padding:5px 0;border-top:1px solid #cfe0f8}
.inq-item:first-child{border-top:none}
.inq-item-n{min-width:0}
.inq-item-n b{display:block;font-size:11.5px;color:var(--ink);font-weight:600;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq-item-n span{display:block;font-size:10px;color:var(--sub);
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq-item .inq-qty,.inq-item .inq-unit{font:inherit;font-size:11.5px;padding:4px 6px;
    border:1px solid #bfdbfe;border-radius:6px;background:#fff;width:100%}
.inq-del{border:none;background:none;cursor:pointer;color:var(--faint);font-size:12px;
         line-height:1;padding:2px}
.inq-del:hover{color:var(--danger)}
.inq-empty{background:#f8fafc;border:1px dashed var(--line);border-radius:8px;
           padding:9px 11px;font-size:11px;color:var(--sub);line-height:1.6}
.inq-act{display:flex;justify-content:flex-end;gap:9px}
/* 蜜罐：视觉与读屏都隐藏，但机器人会照填 —— 不能用 display:none（部分脚本会跳过） */
.inq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.mat-more[open]>summary{color:var(--sub)}

@media(max-width:760px){:root{--wrap-pad:14px}
  .idx{columns:1}h1{font-size:25px}.wrap{padding:14px var(--wrap-pad) 48px}
  .hero-t h1{font-size:19px}.erow .nm{width:64px}}