/* ── 查询页 ─────────────────────────────────────────────────────────── */
.qbox{display:flex;align-items:center;gap:10px;margin-top:11px;padding:9px 13px;
      border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--hair)}
.qbox:focus-within{border-color:var(--pagec);box-shadow:0 0 0 3px color-mix(in srgb,var(--pagec) 14%,transparent)}
.qbox .ic{font-size:17px;color:var(--sub);line-height:1}
.qbox input{flex:1;min-width:0;font:inherit;font-size:13px;border:none;outline:none;
            background:transparent;color:var(--deep)}
.qbox input::placeholder{color:var(--hair)}
.qbox .cnt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
           font-weight:700;color:var(--sub);white-space:nowrap}
.qfacets{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.qfacets .lb{font-size:11.5px;font-weight:600;color:var(--sub)}
.qfacet{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 11px;
        font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--line);
        background:var(--bg);color:var(--sub)}
.qfacet b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;opacity:.72}
.qfacet:hover{border-color:currentColor}
.qfacet.on{color:#fff;border-color:transparent}
.qfacet.on b{opacity:.85}
.qaz{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.qaz .lb{font-size:11.5px;font-weight:600;color:var(--sub)}
.qaz button{font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
       font-size:10.5px;font-weight:700;cursor:pointer;
       color:var(--sub);background:var(--bg);border:1px solid var(--line);border-radius:5px;
       padding:2px 7px}
.qaz button:hover{border-color:var(--pagec);color:var(--pagec)}
.qaz button.on{background:var(--pagec);border-color:var(--pagec);color:#fff}
/* 禁用组分链接云 —— 红系，与矩阵里「禁用」的唯一红保持同一套语义 */
.bang{display:flex;flex-wrap:wrap;gap:6px}
.bang a{font-size:12px;line-height:1.6;color:#B91C1C;background:#FEF2F2;
        border:1px solid #FECACA;border-radius:7px;padding:5px 10px;text-decoration:none}
.bang a:hover{background:#FEE2E2;border-color:#F87171}
.qtable{width:100%;border-collapse:collapse;font-size:11.5px}
.qtable th{background:var(--bg);text-align:left;font-size:11.5px;font-weight:700;color:var(--sub);
           padding:7px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.qtable td{padding:7px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
.qtable tbody tr:nth-child(even){background:var(--bg)}
.qtable tbody tr:hover{background:var(--soft)}
.qtable .nm{font-size:13px;font-weight:700;color:var(--brand);text-decoration:none}
.qtable .nm:hover{text-decoration:underline}
.qtable .en{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
            color:var(--pagec);letter-spacing:.03em}
.qtable .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right;
             white-space:nowrap}
.qtable .num.hi{font-weight:700;color:var(--deep)}
.qwrap{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.qempty{padding:26px 14px;text-align:center;color:var(--sub);font-size:12.5px}
.qpager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
        padding:11px 0 2px}
.qpager a,.qpager span{font-size:12px;font-weight:500;color:var(--sub);text-decoration:none;
        border:1px solid var(--line);border-radius:7px;padding:5px 11px;background:var(--surface)}
.qpager a:hover{border-color:var(--pagec);color:var(--pagec)}
.qpager .cur{background:var(--pagec);border-color:var(--pagec);color:#fff;font-weight:700}
.qpager .gap{border:none;background:none}
.qnav{display:flex;flex-direction:column;gap:2px;background:var(--surface);
      border:1px solid var(--line);border-left:2px solid var(--c,var(--brand));
      border-radius:9px;padding:9px 11px;text-decoration:none}
.qnav b{font-size:12.5px;font-weight:700;color:var(--c,var(--brand))}
.qnav span{font-size:11px;line-height:1.55;color:var(--sub)}
/* ── 窄屏：表格转卡片 ────────────────────────────────────────────────
   ⛔ 桌面保持表格：一行 6 个字段，卡片要么堆两行要么砍字段，密度只会更低，
      DOM 也更多。只有窄屏才该换 —— 那里横向放不下 6 列。
   ⛔ 转卡片后不再藏列（.hide-s）：竖着排空间够，藏了反而信息更少。
      改成藏「—」那些空值（.dash），否则一张卡里半数行都是破折号。
   实现走 CSS 的 display:block + td::before（标签由 nth-child 给），
   不额外产出一套卡片 DOM —— 同一份 HTML 两种排布，字节零增加。 */
@media(max-width:760px){
  .qbox .cnt{display:none}
  .qwrap{border:none;border-radius:0}
  /* ⛔ 全站 table 有 min-width:640px（宽表横向滚动用的），转卡片后必须清掉，
     否则单元格宽 610px 被 .qwrap 的 overflow:hidden 裁掉 ——
     标签看得见、右对齐的值全被切到可视区外（2026-07-28 实测）。 */
  .qtable{min-width:0}
  .qwrap{overflow:visible}
  .qtable,.qtable tbody,.qtable tr,.qtable td{display:block;width:auto}
  .qtable thead{display:none}
  .qtable tbody tr{background:var(--surface);border:1px solid var(--line);
                   border-radius:var(--r-md);padding:12px 14px;margin-bottom:9px}
  .qtable tbody tr:nth-child(even){background:var(--surface)}
  .qtable td{padding:0;border:none;display:flex;align-items:baseline;
             justify-content:space-between;gap:14px;font-size:12.5px;line-height:2}
  .qtable td::before{color:var(--sub);font-size:11.5px;flex:none}
  .qtable td:first-child{display:block;margin-bottom:5px}
  .qtable td:first-child::before{content:none}
  .qtable td.hide-s{display:flex}
  .qtable td.dash{display:none}
  .qtable .num{text-align:right}
  /* 「全部成分」被折成「全部成 / 分」很难看 —— 标题本身不换行，
     英文副标与副说明可以换 */
  .blk-h{flex-wrap:wrap}
  .blk-h>:first-child{white-space:nowrap}
}
@media(max-width:760px){
  body.p-ing .qtable td:nth-child(2)::before{content:"功能"}
  body.p-ing .qtable td:nth-child(3)::before{content:"法规"}
  body.p-ing .qtable td:nth-child(4)::before{content:"毒理"}
  body.p-ing .qtable td:nth-child(5)::before{content:"文献"}
  body.p-ing .qtable td:nth-child(6)::before{content:"备案频次"}
  body.p-eff .qtable td:nth-child(2)::before{content:"功效方向"}
  body.p-eff .qtable td:nth-child(3)::before{content:"公开文献"}
  body.p-eff .qtable td:nth-child(4)::before{content:"人体临床"}
  body.p-eff .qtable td:nth-child(5)::before{content:"年份跨度"}
  body.p-tox .qtable td:nth-child(2)::before{content:"毒理研究记录"}
  body.p-tox .qtable td:nth-child(3)::before{content:"覆盖终点"}
  body.p-tox .qtable td:nth-child(4)::before{content:"安全性文献"}
}