/* Page head with search（浅色，和导航区分开） */
.page-head{background:var(--bg);padding:40px 0 18px}
.page-head .crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.page-head .crumb a:hover{color:var(--teal)}
.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.page-head h1{font-size:34px;font-weight:600;letter-spacing:1px;color:var(--navy);line-height:1.2}
.page-head p{color:var(--muted);font-size:14.5px;margin-top:8px}
.search{display:flex;align-items:center;width:min(520px,100%);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 18px;box-shadow:0 4px 16px rgba(11,26,42,.05);transition:.15s}
.search:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(15,118,110,.10)}
.search svg{flex:none;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;outline:0;padding:0 12px;height:42px;font-size:15px;color:var(--ink);font-family:inherit;background:none}
.search button{background:var(--navy);color:#fff;height:42px;padding:0 22px;border-radius:999px;font-weight:500;font-size:14px}
.search button:hover{background:var(--teal)}
.hot{margin-top:10px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:flex-end}
.hot button{font-size:13px;color:var(--muted)}
.hot button:hover{color:var(--teal)}

/* 筛选条：分类标签 + 系统胶囊 + 物种分段 */
.filterbar{position:sticky;top:68px;z-index:20;background:rgba(246,244,239,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.cat-tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cat-tabs::-webkit-scrollbar,.sys-row::-webkit-scrollbar{display:none}
.cat-tabs button{position:relative;padding:14px 0 13px;font-size:15px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
.cat-tabs button sup{font-size:11px;color:#9aa3ab;font-weight:400}
.cat-tabs button:hover{color:var(--ink)}
.cat-tabs button.on{color:var(--navy);font-weight:600}
.cat-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal);border-radius:2px}
.cat-tabs .dot{width:7px;height:7px;border-radius:50%}
.sub{display:flex;align-items:center;gap:20px;padding:12px 0}
.sys-row{display:flex;gap:8px;overflow-x:auto;flex:1;scrollbar-width:none}
.pill{white-space:nowrap;height:32px;padding:0 14px;border-radius:999px;font-size:13.5px;color:#3a4651;background:transparent;border:1px solid transparent;transition:.12s}
.pill:hover{background:#fff;border-color:var(--line)}
.pill.on{background:var(--navy);color:#fff}
.pill i{font-style:normal;opacity:.55;margin-left:4px;font-size:12px}
.seg{display:inline-flex;background:#ebe8e1;border-radius:999px;padding:3px;flex:none}
.seg button{height:28px;padding:0 14px;border-radius:999px;font-size:13px;color:var(--muted)}
.seg button.on{background:#fff;color:var(--navy);font-weight:500;box-shadow:0 1px 3px rgba(11,26,42,.12)}
.seg-label{font-size:12.5px;color:var(--muted);flex:none}

.layout{padding-top:22px;padding-bottom:64px}
.sys-row{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:24px}
.result-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13.5px;color:var(--muted)}
.result-line b{color:var(--ink);font-weight:600}
.result-line button{color:var(--teal);font-size:13px}
.help{margin-top:28px;background:var(--navy);color:#fff;border-radius:18px;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.help b{font-size:17px;font-weight:600}
.help p{font-size:13.5px;opacity:.7;margin-top:4px}
.help .btn{background:var(--teal-2);color:var(--navy);height:44px;padding:0 24px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.18s;cursor:pointer}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,26,42,.10);border-color:#cfd8d6}
.card .img{aspect-ratio:4/3;background:linear-gradient(160deg,#f3f6f6,#e8eeee);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.card .img img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.ph svg{opacity:.55}
.tag{position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px}
.tag.tumor{background:var(--tumor-soft);color:var(--tumor)}
.tag.normal{background:var(--normal-soft);color:var(--normal)}
.tag.support{background:var(--support-soft);color:var(--support)}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card .sys{font-size:12px;color:var(--muted)}
.card h3{font-size:16px;font-weight:600;line-height:1.45;margin:3px 0 2px}
.card .en{font-size:12px;color:var(--muted);line-height:1.4}
.skus{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 14px}
.sku{font-family:var(--mono);font-weight:500;letter-spacing:.2px;font-size:12px;background:var(--bg);border-radius:6px;padding:2px 7px;color:#33414d}
.card .acts{margin-top:auto;display:flex;gap:8px}
.card .acts .btn{height:34px;font-size:13px;padding:0 14px;flex:1}
.empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted)}

/* Detail */
.detail{display:none;padding-top:28px;padding-bottom:64px}
body.show-detail .catalog{display:none}
body.show-detail .detail{display:block}
.back{font-size:13.5px;color:var(--muted);margin-bottom:18px;display:inline-flex;gap:6px}
.back:hover{color:var(--teal)}
.d-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px}
.d-img{background:linear-gradient(160deg,#f3f6f6,#e6eded);border-radius:16px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.d-img img{width:80%;mix-blend-mode:multiply}
.d-info .tag{position:static;display:inline-block}
.d-info h2{font-size:28px;font-weight:600;margin:10px 0 2px;line-height:1.3}
.d-info .en{color:var(--muted);font-size:14px}
.d-info .lead{margin:18px 0;font-size:14.5px;color:#3a4651}
.vt{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px}
.vt th{text-align:left;font-weight:500;color:var(--muted);font-size:12.5px;padding:8px 12px;border-bottom:1px solid var(--line)}
.vt td{padding:12px;border-bottom:1px solid var(--line)}
.vt td:first-child{font-family:var(--mono);font-weight:600}
.vt tr.sel td{background:var(--teal-soft)}
.vt input{accent-color:var(--teal)}
.d-acts{display:flex;gap:10px;flex-wrap:wrap}
.d-acts .btn{height:46px;padding:0 24px;font-size:15px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.fact{background:var(--bg);border-radius:10px;padding:12px}
.fact small{display:block;color:var(--muted);font-size:12px}
.fact b{font-size:14px}
.ro{font-size:12px;color:var(--muted);margin-top:16px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:36px 0 0;overflow-x:auto}
.tabs button{padding:12px 18px;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--ink);font-weight:600;border-color:var(--teal)}
.panel{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;padding:28px 32px;min-height:180px}
.panel h4{font-size:15px;margin-bottom:10px}
.panel ul{padding-left:18px;color:#3a4651;font-size:14px}
.panel li{margin:4px 0}
.todo{display:inline-block;font-size:11px;background:#fff6db;color:#8a6100;border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:2px}
.doc{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;font-size:14px}
.doc span{color:var(--muted);font-size:12.5px}
.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wf{border:1px solid var(--line);border-radius:12px;padding:14px;font-size:13px;position:relative}
.wf small{color:var(--teal);font-family:var(--mono);font-weight:600}
.wf b{display:block;font-size:14px;margin:2px 0}
.wf.cur{border-color:var(--teal);background:var(--teal-soft)}
h3.sec{font-size:18px;margin:40px 0 16px}

/* Mobile filter sheet */
@media (max-width:900px){
  .wrap{padding:0 18px}
  .page-head{padding:24px 0 14px}
  .page-head h1{font-size:26px}
  .hot{justify-content:flex-start}
  .filterbar{top:68px}
  .cat-tabs{gap:22px}
  .sub{flex-direction:column;align-items:stretch;gap:10px}
  .sub .seg-wrap{display:flex;align-items:center;gap:10px}
  .help{padding:20px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card .body{padding:12px}
  .card h3{font-size:14.5px}
  .card .en,.card .acts .btn-ghost{display:none}
  .skus{margin:8px 0 10px}
  .d-top{grid-template-columns:1fr;padding:18px;gap:20px}
  .d-info h2{font-size:22px}
  .facts{grid-template-columns:1fr 1fr 1fr}
  .workflow{grid-template-columns:1fr 1fr}
  .panel{padding:20px}
  .d-acts{position:sticky;bottom:0;background:#fff;padding:12px 0;margin:0 -18px -18px;padding:12px 18px;border-top:1px solid var(--line);border-radius:0 0 20px 20px}
  .d-acts .btn{flex:1;padding:0 10px}
}