/* site.css —— 酶-化学混合合成规划平台：首页与工作台共用版式。颜色只走 var(--vx-*)；化学/酶/未知三态用 --k-* 局部变量。 */
:root{--k-chem:var(--vx-brand);--k-enz:var(--vx-ok);--k-unk:var(--vx-muted);--plate:#fff;--shadow:0 1px 2px rgba(20,30,50,.06),0 8px 24px rgba(20,30,50,.06)}
:root[data-theme="dark"]{--plate:#f4f6f9;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--vx-paper);color:var(--vx-ink);font-family:var(--vx-font,-apple-system,"PingFang SC","Helvetica Neue",sans-serif);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--vx-brand);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.28}
h2{font-size:24px}h3{font-size:17px}h4{font-size:14px}
code,.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.9em}
:focus-visible{outline:2px solid var(--vx-brand);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.muted{color:var(--vx-muted)}.small{font-size:13px}.nowrap{white-space:nowrap}
/* 顶栏与横幅 */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:0 24px;height:54px;background:color-mix(in srgb,var(--vx-paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--vx-line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:16px;color:var(--vx-ink);text-decoration:none;white-space:nowrap}
.brand svg{width:28px;height:28px}
.topbar nav{display:flex;gap:2px;margin-left:8px;overflow-x:auto}
.topbar nav a{padding:6px 11px;border-radius:8px;color:var(--vx-muted);text-decoration:none;font-size:14px;white-space:nowrap}
.topbar nav a:hover{color:var(--vx-ink);background:var(--vx-brand-soft)}
.topbar nav a.on{color:var(--vx-brand);background:var(--vx-brand-soft);font-weight:600}
.tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.tbtn,.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--vx-line);border-radius:9px;background:var(--vx-paper);color:var(--vx-ink);font:inherit;font-size:14px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.tbtn:hover,.btn:hover{border-color:var(--vx-brand);background:var(--vx-brand-soft)}
.btn.primary{background:var(--vx-brand);border-color:var(--vx-brand);color:#fff}
.btn.primary:hover{filter:brightness(1.08);background:var(--vx-brand)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.tbtn[aria-pressed="true"]{background:var(--vx-brand-soft);border-color:var(--vx-brand)}
.banner{background:var(--vx-brand-soft);border-bottom:1px solid var(--vx-line);text-align:center;font-size:13px;padding:5px 12px;color:var(--vx-ink);letter-spacing:.02em}
.banner b{font-weight:600}
.contact{border-bottom:1px solid var(--vx-line);background:var(--vx-panel)}
.contact-in{max-width:1240px;margin:0 auto;padding:9px 24px;font-size:14px;display:flex;gap:12px;flex-wrap:wrap}
/* 容器 */
main{max-width:1320px;margin:0 auto;padding:26px 24px 80px}
.sec{max-width:1240px;margin:0 auto;padding:56px 24px 8px}
.sec>.sub{color:var(--vx-muted);max-width:820px;margin:8px 0 22px}
.card{background:var(--vx-paper);border:1px solid var(--vx-line);border-radius:14px;padding:18px 20px}
.card.plate{box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pagehead p{margin:4px 0 0;color:var(--vx-muted);max-width:760px}
/* 标签 */
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:999px;border:1px solid var(--vx-line);font-size:12.5px;line-height:1.7;background:var(--vx-panel);color:var(--vx-ink);white-space:nowrap}
.chip.demo{border-color:var(--vx-warn);color:var(--vx-warn);background:transparent}
.chip.pre{border-color:var(--vx-brand);color:var(--vx-brand);background:transparent}
.chip.live{border-color:var(--vx-ok);color:var(--vx-ok);background:transparent}
.chip.chem{border-color:var(--k-chem);color:var(--k-chem);background:transparent}
.chip.enz{border-color:var(--k-enz);color:var(--k-enz);background:transparent}
.chip.unk{border-color:var(--k-unk);color:var(--k-unk);border-style:dashed;background:transparent}
.chip.lv-full_text{background:var(--vx-ok);border-color:var(--vx-ok);color:#fff}
.chip.lv-abstract{background:var(--vx-brand);border-color:var(--vx-brand);color:#fff}
.chip.lv-secondary,.chip.lv-mixed{background:transparent;border-color:var(--vx-warn);color:var(--vx-warn)}
.chip.lv-pending{background:transparent;border-style:dashed;border-color:var(--vx-muted);color:var(--vx-muted)}
.chip.ev-E1{background:var(--vx-ok);border-color:var(--vx-ok);color:#fff}
.chip.ev-E2{background:var(--vx-brand);border-color:var(--vx-brand);color:#fff}
.chip.ev-E3{background:transparent;border-color:var(--vx-warn);color:var(--vx-warn)}
.chip.ev-E0{background:transparent;border-style:dashed;color:var(--vx-muted)}
.chip.yes{border-color:var(--vx-ok);color:var(--vx-ok);background:transparent}
.chip.no{border-color:var(--vx-line);color:var(--vx-ink);background:transparent}
.chip.q{border-style:dashed;color:var(--vx-muted);background:transparent}
/* 表单与表格 */
input[type=text],input[type=search],textarea,select{font:inherit;font-size:14px;padding:8px 11px;border:1px solid var(--vx-line);border-radius:9px;background:var(--vx-paper);color:var(--vx-ink);max-width:100%}
textarea{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:13px}
input:focus,textarea:focus,select:focus{border-color:var(--vx-brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--vx-brand) 22%,transparent)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--vx-line);text-align:left;vertical-align:top}
.tbl th{font-weight:600;color:var(--vx-muted);font-size:12.5px;position:sticky;top:54px;background:var(--vx-paper)}
.tbl tr:hover td{background:var(--vx-panel)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
details{border:1px solid var(--vx-line);border-radius:10px;padding:8px 14px;background:var(--vx-paper)}
details>summary{cursor:pointer;font-weight:600;font-size:14px}
details[open]>summary{margin-bottom:8px}
/* 提示条与错误态 */
.alert{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--vx-line);border-left-width:4px;border-radius:10px;padding:11px 15px;margin:10px 0;font-size:14px;background:var(--vx-panel)}
.alert b{white-space:nowrap}
.alert.err{border-left-color:#C0392B;background:color-mix(in srgb,#C0392B 8%,var(--vx-paper))}
.alert.warn{border-left-color:var(--vx-accent);background:color-mix(in srgb,var(--vx-accent) 9%,var(--vx-paper))}
.alert.info{border-left-color:var(--vx-brand);background:var(--vx-brand-soft)}
.alert.fatal{position:sticky;top:60px;z-index:20;border-left-color:#C0392B;font-size:15px}
.empty{padding:26px;text-align:center;color:var(--vx-muted);border:1px dashed var(--vx-line);border-radius:12px;font-size:14px}
.skeleton{height:90px;border-radius:12px;background:linear-gradient(100deg,var(--vx-panel) 30%,var(--vx-line) 50%,var(--vx-panel) 70%);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
html.paused .skeleton{animation:none}
/* 路线图 */
.rg-wrap{overflow:auto;border:1px solid var(--vx-line);border-radius:14px;background:var(--vx-panel);position:relative}
.rg{display:block}
.rg .plate{fill:var(--plate);stroke:var(--vx-line);stroke-width:1}
.rg .mol .plate{rx:10}
.rg .mol.target .plate{stroke:var(--vx-ink);stroke-width:1.8}
.rg .mol.sel .plate,.rg .rxn.sel .pill{stroke:var(--vx-accent);stroke-width:2.4}
.rg .cap{font-size:11.5px;fill:var(--vx-muted)}
.rg .cap.ok{fill:var(--vx-ok)}.rg .cap.no{fill:var(--vx-warn)}
.rg .pill{fill:var(--vx-paper);stroke-width:1.6}
.rg .rxn.chemical .pill{stroke:var(--k-chem)}.rg .rxn.enzymatic .pill{stroke:var(--k-enz)}.rg .rxn.unknown .pill{stroke:var(--k-unk);stroke-dasharray:4 3}
.rg .rxn text{font-size:12px;fill:var(--vx-ink);font-weight:600}
.rg .rxn text.sub{font-size:10.5px;font-weight:400;fill:var(--vx-muted)}
.rg .rxn.chemical .ico{stroke:var(--k-chem);fill:none}.rg .rxn.enzymatic .ico{stroke:var(--k-enz);fill:none}.rg .rxn.unknown .ico{stroke:var(--k-unk);fill:none}
.rg .edge{fill:none;stroke-linecap:round}
.rg .edge.chemical{stroke:var(--k-chem);stroke-width:2}
.rg .edge.enzymatic.o{stroke:var(--k-enz);stroke-width:6}
.rg .edge.enzymatic.i{stroke:var(--vx-panel);stroke-width:2}
.rg .edge.unknown{stroke:var(--k-unk);stroke-width:2;stroke-dasharray:5 4}
.rg .node,.rg .edgeg{cursor:default}
.rg .rxn,.rg .mol{cursor:pointer}
.rg .rxn:hover .pill{filter:brightness(.96)}
.rg [data-layer]{opacity:0}
.rg.done [data-layer],.rg.static [data-layer]{opacity:1}
.rg [data-layer].in{opacity:1;transition:opacity .35s ease-out}
.rg .edge.draw{stroke-dasharray:1;stroke-dashoffset:1}
.rg .edge.draw.in{stroke-dashoffset:0;transition:stroke-dashoffset .4s ease-out}
.rg.static .edge.draw,.rg.done .edge.draw{stroke-dasharray:none;stroke-dashoffset:0}
.rg.static .edge.unknown,.rg.done .edge.unknown{stroke-dasharray:5 4}
.rg .dim{opacity:.28!important;transition:opacity .5s}
@keyframes pulse{0%,100%{stroke-width:1.6}50%{stroke-width:4.5}}
.rg .rxn.pulse .pill{animation:pulse .7s ease-in-out 2}
html.paused .rg *{animation:none!important;transition:none!important}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--vx-muted);align-items:center}
.legend svg{vertical-align:middle}
/* 步骤卡与抽屉 */
.stepcard{border:1px solid var(--vx-line);border-radius:12px;background:var(--vx-paper);padding:14px 16px;animation:cardin .25s ease-out}
@keyframes cardin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html.paused .stepcard{animation:none}
.stepcard h4{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.kv{display:grid;grid-template-columns:104px 1fr;gap:5px 12px;font-size:13.5px}
.kv dt{color:var(--vx-muted)}.kv dd{margin:0}
.stepcard .basis{animation:cardin .25s ease-out}
.wl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.wl li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:13px;padding:5px 8px;border-radius:8px;background:var(--vx-panel)}
.wl .st{width:16px;height:16px;border-radius:50%;border:1.6px solid var(--vx-muted);display:inline-block;margin-top:3px}
.wl .known .st{background:var(--vx-ok);border-color:var(--vx-ok)}
.wl .na .st{border-style:dotted;opacity:.6}
.wl .unknown .st{border-style:dashed}
.notcomp{text-decoration:line-through;color:var(--vx-muted);text-decoration-color:var(--vx-warn)}
/* 规划器 */
.plan-in{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}
.preview{height:180px;border:1px solid var(--vx-line);border-radius:12px;background:var(--plate);display:flex;align-items:center;justify-content:center;font-size:13px;color:#667}
.preview img{max-width:100%;max-height:100%}
.examples{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.examples button{font:inherit;font-size:13px;padding:4px 11px;border-radius:999px;border:1px solid var(--vx-line);background:var(--vx-paper);cursor:pointer;color:var(--vx-ink)}
.examples button:hover{border-color:var(--vx-brand);background:var(--vx-brand-soft)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.colhead{display:flex;align-items:baseline;gap:10px;padding:0 4px 8px;border-bottom:3px solid var(--vx-line);margin-bottom:12px}
.colhead.chem{border-color:var(--k-chem)}.colhead.enz{border-color:var(--k-enz)}.colhead.hyb{border-image:linear-gradient(90deg,var(--k-chem),var(--k-enz)) 1}
.colhead .cnt{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.rcard{border:1px solid var(--vx-line);border-radius:14px;background:var(--vx-paper);padding:12px;margin-bottom:12px;box-shadow:var(--shadow)}
.rcard .mini{height:132px;overflow:hidden;border-radius:10px;background:var(--vx-panel);position:relative}
.rcard .meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 6px}
.basisbar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;margin:6px 0}
.basisbar i{display:block;height:100%}
.basisbar .lit{background:var(--vx-ok)}.basisbar .rule{background:var(--vx-brand)}.basisbar .none{background:var(--vx-line)}
.seg{display:inline-flex;gap:3px;vertical-align:middle}
.seg i{display:inline-block;width:14px;height:14px;border:1.6px solid;background:var(--vx-paper)}
.seg i.chemical{border-color:var(--k-chem);border-radius:2px}
.seg i.enzymatic{border-color:var(--k-enz);background:var(--k-enz);border-radius:50%}
.seg i.unknown{border-color:var(--k-unk);border-style:dashed;border-radius:2px;transform:rotate(45deg) scale(.82)}
/* 案例卡 */
.casecard{display:grid;grid-template-columns:132px 1fr;gap:12px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.casecard:hover{transform:translateY(-2px);border-color:var(--vx-brand);box-shadow:var(--shadow)}
html.paused .casecard{transition:none}
.casecard .thumb{background:var(--plate);border-radius:10px;height:104px;display:flex;align-items:center;justify-content:center;color:#778;font-size:12px}
.casecard .thumb img{max-width:100%;max-height:100%}
.casecard h3{font-size:15.5px;margin-bottom:4px}
.tabs{display:inline-flex;border:1px solid var(--vx-line);border-radius:10px;overflow:hidden}
.tabs button{font:inherit;font-size:13.5px;padding:6px 14px;border:0;background:var(--vx-paper);color:var(--vx-muted);cursor:pointer}
.tabs button.on{background:var(--vx-brand);color:#fff}
.molview{height:260px;border:1px solid var(--vx-line);border-radius:12px;background:var(--vx-panel);position:relative}
.molview canvas{width:100%;height:100%;display:block}
/* 首页 */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--vx-line)}
.hero-in{max-width:1240px;margin:0 auto;padding:60px 24px 54px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.hero h1{font-size:44px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--vx-ok)}
.hero .lead{font-size:17px;color:var(--vx-muted);max-width:640px;margin:16px 0 22px}
.hero-mol{margin:0;position:relative;background:var(--vx-panel);border:1px solid var(--vx-line);border-radius:20px;padding:10px;box-shadow:var(--shadow)}
.hero-mol canvas{width:100%;height:330px;display:block}
.hero-mol figcaption{font-size:12.5px;color:var(--vx-muted);padding:4px 10px 6px}
.hero-mol .demo-tag{position:absolute;top:14px;left:14px}
.compare-row{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:stretch;margin-bottom:14px}
.compare-row .lab{display:flex;flex-direction:column;gap:6px;justify-content:center}
.compare-row .lab .big{font-size:20px;font-weight:650}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{border:1px solid var(--vx-line);border-radius:14px;padding:16px 18px;background:var(--vx-paper)}
.kpi .n{font-size:38px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .l{font-size:13px;color:var(--vx-muted);margin-top:4px}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.status-tbl td:first-child{white-space:nowrap;font-weight:600}
footer.site{max-width:1240px;margin:40px auto 0;padding:24px;border-top:1px solid var(--vx-line);color:var(--vx-muted);font-size:13px}
@media (max-width:1100px){.cols3,.g3,.g4,.tri{grid-template-columns:1fr}.hero-in{grid-template-columns:1fr}.plan-in{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.compare-row{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
.lit-quote{font-style:normal;border-left:2px solid var(--line,#8884);padding-left:6px;overflow-wrap:anywhere}
@media (max-width:700px){.topbar{padding:0 12px;gap:8px}.topbar nav{flex:1 1 0;min-width:0;margin-left:0}.tb-right{flex:none}.tbl{display:block;max-width:100%;overflow-x:auto}.tbl th{position:static}.card{min-width:0}}
@media (max-width:520px){.topbar{flex-wrap:wrap;height:auto;min-height:54px;padding:6px 12px}.topbar nav{display:none}.tb-right{margin-left:auto}.tbtn{padding:6px 10px;font-size:13px}}
.tbtn,.btn{white-space:nowrap}.tb-right{flex:none}.topbar nav{min-width:0}