/* ══════════ 区块样式 ══════════ */

/* ── 通用区块间距 ── */
.sec { padding:110px 0; content-visibility:auto; contain-intrinsic-size:auto 980px; }
.sec-alt { background:var(--bg-2); border-block:1px solid var(--panel-border); }
#quality { padding-bottom:72px; }
#mechanism { padding-top:82px; }

/* ══════════ 第二屏：来源选择 ══════════ */
.studio-layout {
  display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:start;
}
@media (max-width:960px){
  .studio-layout{grid-template-columns:1fr}
  .studio-layout .src-list{position:relative;top:auto}
}

.src-list { display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--nav-h) + 24px); }
.src-card {
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:24px 26px; cursor:pointer; transition:.25s; position:relative;
}
.src-card:hover { border-color:rgba(255,178,94,.35); transform:translateX(4px); }
.src-card.active { border-color:var(--orange); background:rgba(255,122,26,.07); box-shadow:0 0 30px rgba(255,122,26,.12); }
.src-card h3 { font-size:18.5px; font-weight:700; display:flex; align-items:center; gap:11px; padding-right:30px; }
.src-card .dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.src-card p { font-size:13.5px; color:var(--muted); margin-top:9px; letter-spacing:.03em; }
.src-card .check {
  position:absolute; top:14px; right:16px; width:22px; height:22px; border-radius:50%;
  background:var(--orange); color:#14100B; font-size:13px; font-weight:800;
  display:none; align-items:center; justify-content:center;
}
.src-card.active .check { display:flex; }

.src-subtypes { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.subtype-chip {
  font-size:12px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--panel-border);
  color:var(--muted); transition:.2s; cursor:pointer;
}
.subtype-chip.sel { background:rgba(255,122,26,.15); border-color:var(--orange); color:var(--cream); }

.viz-panel {
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--panel-border); border-radius:20px;
  min-height:520px; padding:28px; position:relative; overflow:hidden;
}
.viz-panel::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 70% 30%, rgba(255,122,26,.06), transparent 65%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:auto,44px 44px,44px 44px;
}
.viz-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; position:relative; }
.viz-title { font-size:17px; font-weight:700; }
.viz-badge {
  font-size:11.5px; padding:4px 12px; border-radius:999px; letter-spacing:.05em;
  background:rgba(79,216,232,.1); color:var(--cyan); border:1px solid rgba(79,216,232,.3);
}
.viz-canvas-wrap { position:relative; height:420px; }
.viz-canvas-wrap canvas { width:100%; height:100%; display:block; }
.composition-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; position:relative; }
.comp-tag { font-size:12.5px; padding:6px 13px; border-radius:999px; border:1px solid; }
.note-strip {
  margin-top:18px; padding:12px 16px; border-radius:12px; font-size:13px; line-height:1.7;
  background:rgba(79,216,232,.06); border-left:3px solid var(--cyan); color:#C9D2DA; position:relative;
}

/* ══════════ 第三屏：功能模块配置 ══════════ */
.engineering-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin-bottom:30px; }
.engineering-flow > i { color:#58616B; font-style:normal; font-size:18px; }
.flow-step { min-height:98px; padding:15px 16px; border:1px solid var(--panel-border); border-radius:15px; background:rgba(255,255,255,.025); color:var(--text); display:grid; grid-template-columns:30px 1fr; column-gap:10px; align-content:center; transition:.2s; cursor:pointer; font-family:inherit; text-align:left; }
.flow-step > span { grid-row:1/3; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.06); color:var(--muted); font-size:10px; font-weight:800; }
.flow-step b { font-size:13px; }
.flow-step small { color:var(--muted); font-size:10.5px; line-height:1.4; margin-top:3px; }
.flow-step.active { border-color:var(--orange); background:rgba(255,122,26,.075); box-shadow:0 0 24px rgba(255,122,26,.08); }
.flow-step.active > span { background:var(--orange); color:#170E06; }
.flow-step.done { border-color:rgba(126,217,87,.28); }
.flow-step.done > span { background:rgba(126,217,87,.15); color:#A9EF82; }
.flow-step:hover { transform:translateY(-2px); border-color:rgba(255,178,94,.45); background:rgba(255,255,255,.045); }
.flow-step:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.target-lab {
  margin-bottom:30px; padding:24px; border:1px solid var(--panel-border); border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 24px 80px rgba(0,0,0,.18);
}
.target-lab.compact { margin:0; padding:16px; border-radius:16px; box-shadow:none; }
.target-lab.compact .target-lab-head { margin-bottom:12px; }
.target-lab.compact .target-lab-head h3 { font-size:16px; }
.target-lab.compact .organ-targets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.target-lab.compact .organ-target { min-height:52px; padding:8px 9px; gap:7px; }
.target-lab.compact .organ-target span { width:25px; height:25px; font-size:14px; }
.target-lab.compact .organ-target b { font-size:10.8px; }
.target-lab.compact .target-context { grid-template-columns:1fr; gap:4px; margin-top:12px; padding-top:12px; }
.target-lab.compact .target-context strong { font-size:12px; }
.target-lab.compact .target-context p { font-size:11.2px; }
.target-lab-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.target-lab-head h3 { font-size:19px; margin-top:4px; }
.eyebrow { color:var(--cyan); font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; }
.evidence-badge { font-size:11.5px; color:#B9C6CF; border:1px solid rgba(79,216,232,.24); background:rgba(79,216,232,.06); padding:6px 10px; border-radius:999px; }
.organ-targets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.organ-target {
  min-height:68px; display:flex; align-items:center; gap:10px; padding:12px 14px; text-align:left; cursor:pointer;
  border-radius:14px; border:1px solid rgba(255,255,255,.075); background:rgba(4,8,14,.35); color:var(--muted);
  font-family:inherit; transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
}
.organ-target span { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:10px; color:var(--target-color); background:color-mix(in srgb,var(--target-color) 12%,transparent); font-size:17px; }
.organ-target b { font-size:12.5px; line-height:1.35; }
.organ-target:hover { transform:translateY(-2px); color:#fff; border-color:color-mix(in srgb,var(--target-color) 40%,transparent); }
.organ-target.active { color:#fff; border-color:var(--target-color); background:color-mix(in srgb,var(--target-color) 10%,rgba(8,12,18,.8)); box-shadow:0 0 28px color-mix(in srgb,var(--target-color) 16%,transparent); }
.target-context { display:grid; grid-template-columns:170px 1fr; gap:18px; align-items:start; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); }
.target-context strong { color:var(--cream); font-size:14px; }
.target-context p { color:var(--muted); font-size:12.8px; line-height:1.7; margin:0; }

.builder-grid { display:grid; grid-template-columns:430px minmax(0,1fr); gap:34px; align-items:start; }
@media (max-width:1020px){ .builder-grid{grid-template-columns:1fr} }

.module-tabs { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; scroll-margin-top:calc(var(--nav-h) + 22px); }
.mtab {
  flex:1; text-align:center; padding:13px 8px; border-radius:12px; cursor:pointer;
  background:var(--panel); border:1px solid var(--panel-border); color:var(--muted);
  font-size:14px; font-weight:600; transition:.2s; white-space:nowrap;
}
.mtab.active { color:#fff; background:rgba(255,122,26,.14); border-color:var(--orange); box-shadow:0 0 20px rgba(255,122,26,.15); }

/* 列表不再限高——由页面自然滚动，彻底杜绝滚动容器裁切文字 */
.module-list { display:flex; flex-direction:column; gap:14px; padding:6px 8px 6px 4px; }
.target-panel { display:flex; flex-direction:column; gap:18px; }
.target-panel[hidden], .module-list[hidden] { display:none !important; }
.common-payloads { padding:15px; border:1px solid rgba(79,216,232,.16); border-radius:15px; background:rgba(79,216,232,.035); }
.common-payload-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.common-payload-grid > div { padding:10px; border-radius:10px; background:#0A0F15; border:1px solid rgba(255,255,255,.065); }
.common-payload-grid b { display:block; color:#E4EAEE; font-size:11.5px; }
.common-payload-grid small { display:block; color:var(--muted); font-size:9.5px; line-height:1.45; margin-top:3px; }
.common-payload-grid em { display:block; color:var(--cyan); font-size:9px; font-style:normal; margin-top:5px; }
.peptide-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.peptide-panel-head span { font-size:13px; font-weight:750; color:var(--cream); }
.peptide-panel-head small { font-size:11.5px; color:var(--muted); }
.peptide-list { display:flex; flex-direction:column; gap:10px; }
.peptide-card {
  display:grid; gap:8px; padding:15px 16px; border:1px solid var(--panel-border); border-radius:15px;
  background:rgba(255,255,255,.025); cursor:pointer; transition:.2s; outline:none;
}
.peptide-card:hover,.peptide-card:focus-visible { border-color:rgba(79,216,232,.38); transform:translateY(-1px); }
.peptide-card.selected { border-color:var(--cyan); background:linear-gradient(135deg,rgba(79,216,232,.10),rgba(255,122,26,.035)); box-shadow:0 0 28px rgba(79,216,232,.09); }
.peptide-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.peptide-top b { font-size:14.5px; }
.peptide-top em { font-style:normal; font-size:10.5px; color:#9EEBD7; border:1px solid rgba(126,217,170,.25); border-radius:999px; padding:3px 8px; }
.peptide-card code { display:block; padding:8px 10px; border-radius:9px; background:#090E15; color:#C9F3FA; font-size:11.5px; letter-spacing:.055em; overflow-wrap:anywhere; white-space:normal; }
.peptide-target { color:#C8D0D7; font-size:12px; }
.peptide-card a { width:max-content; color:var(--amber); font-size:11px; text-decoration:none; }
.peptide-card a:hover { text-decoration:underline; }
.method-panel { padding:16px; border-radius:15px; background:rgba(255,255,255,.025); border:1px solid var(--panel-border); }
.method-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.method-chip { padding:8px 11px; border-radius:10px; border:1px solid var(--panel-border); background:#0C1118; color:var(--muted); cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:600; }
.method-chip.active { color:#fff; border-color:var(--method-color); background:color-mix(in srgb,var(--method-color) 12%,#0C1118); box-shadow:0 0 16px color-mix(in srgb,var(--method-color) 12%,transparent); }
.method-desc { font-size:12.2px; color:var(--muted); line-height:1.7; margin:12px 0 0; }
.external-panel { padding:16px; border-radius:15px; background:rgba(255,255,255,.025); border:1px solid var(--panel-border); }
.external-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.external-item { padding:11px; border-radius:11px; border:1px solid var(--panel-border); background:#0C1118; cursor:pointer; transition:.2s; }
.external-item b { display:block; color:#DCE2E7; font-size:11.5px; line-height:1.35; }
.external-item small { display:block; color:var(--muted); font-size:9.8px; line-height:1.45; margin-top:4px; }
.external-item.selected { border-color:var(--violet); background:rgba(176,124,255,.09); box-shadow:0 0 18px rgba(176,124,255,.08); }
.mod-item {
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  padding:18px 20px 16px; cursor:pointer; transition:.2s;
}
.mod-item:hover { border-color:rgba(255,178,94,.35); }
.mod-item.selected { border-color:var(--orange); background:rgba(255,122,26,.08); }
.mod-item h4 { font-size:15.5px; font-weight:650; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; line-height:1.5; margin:0; }
.mod-item h4 span { flex:1; min-width:0; overflow-wrap:anywhere; }
.mod-item h4 em { font-style:normal; font-size:11.5px; color:var(--amber); border:1px solid rgba(255,178,94,.35); padding:3px 11px; border-radius:99px; flex-shrink:0; white-space:nowrap; margin-top:1px; }
.mod-item p { display:block; font-size:13px; color:var(--muted); margin:9px 0 0; line-height:1.7; overflow-wrap:break-word; }

.build-stage {
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border:1px solid var(--panel-border); border-radius:22px; min-height:650px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
}
.stage-head { padding:20px 26px; border-bottom:1px solid var(--panel-border); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.stage-title { font-size:17px; font-weight:700; white-space:nowrap; }
.stage-meta { display:flex; gap:8px 24px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; align-items:center; }
.stage-meta b { color:var(--amber); font-weight:700; margin-left:7px; white-space:nowrap; }
#builderCanvasWrap { flex:1; position:relative; min-height:470px; overflow:hidden; background:radial-gradient(circle at 50% 48%,rgba(255,145,70,.07),transparent 44%),linear-gradient(145deg,#0A0F16,#080B10); }
#builderCanvas { width:100%; height:100%; display:block; }
.stage-actions { padding:20px 26px; border-top:1px solid var(--panel-border); display:flex; gap:16px; flex-wrap:wrap; align-items:center; row-gap:12px; }
.stage-hint { font-size:12.5px; color:var(--muted); margin-left:auto; white-space:nowrap; }

/* 已选方案摘要 chips */
.plan-chips { display:flex; gap:8px; flex-wrap:wrap; }
.plan-chip {
  font-size:12.5px; padding:5px 13px; border-radius:999px;
  background:rgba(255,122,26,.1); border:1px solid rgba(255,122,26,.4); color:var(--cream);
}
.live-dot { width:7px; height:7px; border-radius:50%; display:inline-block; background:#7ED957; box-shadow:0 0 12px rgba(126,217,87,.8); margin-right:5px; }
.vesicle-callouts { position:absolute; inset:0; pointer-events:none; }
.vc { position:absolute; width:190px; padding:10px 12px 10px 15px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(6,10,15,.78); backdrop-filter:blur(10px); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.vc::after { content:""; position:absolute; width:62px; height:1px; top:50%; background:linear-gradient(90deg,rgba(255,255,255,.32),transparent); }
.vc i { position:absolute; left:7px; top:15px; width:3px; height:26px; border-radius:2px; background:var(--cyan); }
.vc b { display:block; font-size:11.5px; color:#F2EEE8; }
.vc span { display:block; margin-top:3px; color:var(--muted); font-size:10.5px; line-height:1.45; }
.vc-surface { right:18px; top:24px; }.vc-surface::after { right:100%; transform:rotate(18deg); transform-origin:right; }
.vc-membrane { left:18px; top:64px; }.vc-membrane::after { left:100%; transform:rotate(16deg); transform-origin:left; }
.vc-membrane i { background:var(--orange); }
.vc-lumen { left:18px; bottom:34px; }.vc-lumen::after { left:100%; transform:rotate(-16deg); transform-origin:left; }
.vc-lumen i { background:var(--amber); }
.assembly-status { position:absolute; right:18px; bottom:30px; max-width:210px; padding:10px 13px; border-radius:12px; background:rgba(7,11,17,.82); border:1px solid rgba(176,124,255,.24); backdrop-filter:blur(10px); }
.assembly-status span { display:block; color:#C3A5FF; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.assembly-status b { display:block; color:#F3EEE8; font-size:12px; margin-top:4px; }
.btn-compact { padding:9px 13px; font-size:12px; }
.motion-toggle { border:0; background:none; color:var(--muted); font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; padding:8px 4px; }
.motion-toggle:hover { color:#fff; }
.stage-science-note { padding:11px 24px; color:#7F8993; font-size:10.8px; line-height:1.5; border-top:1px solid rgba(255,255,255,.055); background:rgba(0,0,0,.16); }

/* ══════════ 第四屏：RVG 机制动画 ══════════ */
.peptide-identity { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:11px 22px; align-items:center; margin:0 auto 24px; max-width:940px; padding:19px 22px; border:1px solid rgba(79,216,232,.16); border-radius:16px; background:linear-gradient(135deg,rgba(79,216,232,.055),rgba(126,217,87,.025)); }
.peptide-identity-main { display:flex; align-items:center; gap:10px; min-width:0; }
.peptide-name { color:#EAF8FA; font-size:15px; font-weight:800; line-height:1.4; }
.peptide-length { padding:3px 8px; border-radius:999px; background:rgba(79,216,232,.10); color:var(--cyan); font-size:10.5px; font-weight:700; line-height:1.4; }
.peptide-identity code { min-width:0; padding:9px 11px; border-radius:9px; background:#080D13; color:#C9F5FA; font-size:11.5px; line-height:1.45; letter-spacing:.05em; overflow-wrap:anywhere; white-space:normal; }
.peptide-label-switch { display:flex; align-items:center; gap:6px; }
.mech-label-btn { padding:8px 12px; border:1px solid var(--panel-border); border-radius:9px; background:#0B1118; color:var(--muted); font-family:inherit; font-size:11.5px; font-weight:650; line-height:1.35; cursor:pointer; }
.mech-label-btn.active { color:#fff; border-color:var(--cyan); background:rgba(79,216,232,.10); }
.mech-label-btn[data-label="fitc"].active { border-color:#72FF78; background:rgba(114,255,120,.10); color:#DFFFE2; }
.mech-label-light { width:10px; height:10px; border-radius:50%; background:#3C444C; transition:.2s; }
.mech-label-light.on { background:#72FF78; box-shadow:0 0 15px rgba(114,255,120,.95); }
.peptide-identity p { margin:0; color:#C4CCD2; font-size:11.5px; line-height:1.6; }
.peptide-identity small { color:#8B959F; font-size:10.5px; line-height:1.55; text-align:right; }
.mech-steps { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:34px; }
.mech-step-btn {
  padding:11px 22px; border-radius:999px; cursor:pointer;
  background:var(--panel); border:1px solid var(--panel-border); color:var(--muted);
  font-size:13px; font-weight:650; line-height:1.4; transition:.25s;
}
.mech-step-btn:hover { color:var(--text); border-color:rgba(255,178,95,.4); }
.mech-step-btn.active {
  color:#fff; background:linear-gradient(135deg,var(--orange),#FF5E00); border-color:transparent;
  box-shadow:0 4px 22px rgba(255,122,26,.4);
}
.mech-theater {
  border:1px solid var(--panel-border); border-radius:22px; overflow:hidden;
  background:radial-gradient(900px 500px at 50% 40%, #12161F, #0A0D12);
}
#mechCanvas { width:100%; height:520px; display:block; }
.mech-caption {
  padding:20px 30px; border-top:1px solid var(--panel-border);
  background:rgba(255,255,255,.02);
  min-height:96px;
}
.mech-caption h4 { font-size:15px; line-height:1.45; color:var(--orange-hi); margin-bottom:6px; }
.mech-caption p { font-size:13px; line-height:1.7; color:var(--muted); max-width:940px; }
.mech-progress { height:3px; background:rgba(255,255,255,.06); }
.mech-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--orange),var(--amber)); width:0%; transition:width .5s; }

/* 分子图例 */
.mol-legend { display:flex; gap:26px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.mol-legend span { font-size:12px; line-height:1.5; color:var(--muted); display:flex; align-items:center; gap:8px; }
.mol-legend i { width:14px; height:14px; border-radius:4px; display:inline-block; }

/* ══════════ 第五屏：功能验证 ══════════ */
.qc-workbench { margin-bottom:24px; padding:24px; border:1px solid rgba(255,178,94,.18); border-radius:22px; background:linear-gradient(145deg,rgba(255,122,26,.045),rgba(255,255,255,.018)); scroll-margin-top:calc(var(--nav-h) + 18px); }
.qc-lanes { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qc-lane { display:flex; gap:12px; padding:16px; border-radius:14px; border:1px solid var(--panel-border); background:rgba(6,10,15,.52); }
.qc-no { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:9px; color:#1A1006; background:var(--amber); font-size:10px; font-weight:850; }
.qc-lane b,.qc-methods b { font-size:12.5px; color:#ECE7E0; }
.qc-lane p,.qc-methods p { margin-top:5px; color:var(--muted); font-size:10.8px; line-height:1.6; }
.qc-methods { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.qc-methods > div { padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.065); background:#0A0F15; }
.tracking-workbench { margin-bottom:30px; padding:24px; border:1px solid var(--panel-border); border-radius:22px; background:linear-gradient(145deg,rgba(79,216,232,.045),rgba(176,124,255,.025)); }
.tracking-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.tracking-head h3 { font-size:19px; margin-top:4px; }
.tracking-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:16px; }
.tracking-card { padding:18px; border-radius:16px; background:rgba(5,9,15,.55); border:1px solid rgba(255,255,255,.075); }
.tracking-card-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.tracking-card-head small { display:block; color:var(--muted); font-size:10.5px; }
.tracking-card-head b { display:block; margin-top:2px; font-size:14px; }
.tracking-light { width:12px; height:12px; border-radius:50%; background:#3A414A; box-shadow:none; transition:.2s; }
.tracking-light.on,#fitcLight.on { background:#72FF78; box-shadow:0 0 16px rgba(114,255,120,.9); }
.peptide-tracking-card code { display:block; margin:13px 0 10px; padding:10px 12px; border-radius:10px; background:#080D13; color:#C9F5FA; font-size:11.5px; letter-spacing:.06em; overflow-wrap:anywhere; white-space:normal; }
.tracking-card p { color:var(--muted); font-size:11.5px; line-height:1.65; }
.label-toggle { margin-top:14px; display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border-radius:10px; border:1px solid var(--panel-border); background:#0B1118; color:#CBD3D9; font-family:inherit; font-size:11.5px; cursor:pointer; }
.label-toggle i { width:24px; height:13px; border-radius:99px; background:#343B44; position:relative; transition:.2s; }
.label-toggle i::after { content:""; position:absolute; width:9px; height:9px; left:2px; top:2px; border-radius:50%; background:#9AA3AF; transition:.2s; }
.label-toggle[aria-pressed="true"] { border-color:rgba(114,255,120,.45); color:#DFFFE2; }
.label-toggle[aria-pressed="true"] i { background:rgba(114,255,120,.32); }
.label-toggle[aria-pressed="true"] i::after { left:13px; background:#72FF78; box-shadow:0 0 8px #72FF78; }
.tracking-scenes { display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; }
.tracking-scene { padding:7px 10px; border-radius:9px; border:1px solid var(--panel-border); background:#0C1118; color:var(--muted); font-family:inherit; font-size:10.8px; cursor:pointer; }
.tracking-scene.active { border-color:var(--cyan); color:#E5FBFE; background:rgba(79,216,232,.09); }
.dye-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dye-option { min-width:112px; padding:9px 10px; border-radius:10px; border:1px solid var(--panel-border); background:#0A0F15; color:#CAD1D7; cursor:pointer; text-align:left; font-family:inherit; }
.dye-option b { display:flex; align-items:center; gap:7px; font-size:11.5px; }
.dye-option b i { width:8px; height:8px; border-radius:50%; background:var(--dye); box-shadow:0 0 9px var(--dye); }
.dye-option small { display:block; margin-top:3px; color:var(--muted); font-size:9.5px; }
.dye-option.active { border-color:var(--dye); background:color-mix(in srgb,var(--dye) 9%,#0A0F15); }
.tracking-path { margin-top:12px; color:#C9D2DA !important; }
.tracking-steps { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; padding:12px; border-radius:12px; background:rgba(255,255,255,.025); }
.tracking-steps span { display:flex; align-items:center; gap:6px; color:#B8C0C7; font-size:10.8px; }
.tracking-steps span b { width:20px; height:20px; display:grid; place-items:center; border-radius:7px; background:rgba(255,122,26,.13); color:var(--orange-hi); font-size:9px; }
.tracking-steps i { color:#626C76; font-style:normal; }
.tracking-warning { margin-top:14px; padding:11px 14px; border-left:3px solid var(--amber); border-radius:9px; background:rgba(255,178,94,.055); color:#CFC7BC; font-size:11.2px; line-height:1.65; }
.validation-plan { display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin:-8px 0 22px; padding:9px 14px; border-radius:12px; background:rgba(79,216,232,.055); border:1px solid rgba(79,216,232,.16); }
.validation-plan span { color:var(--muted); font-size:11px; }
.validation-plan b { color:#DDF8FC; font-size:12px; overflow-wrap:anywhere; }
.validation-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.vtab {
  padding:12px 24px; border-radius:12px; cursor:pointer; font-size:14.5px; font-weight:600;
  background:var(--panel); border:1px solid var(--panel-border); color:var(--muted); transition:.2s;
}
.vtab.active { color:#fff; background:rgba(255,122,26,.14); border-color:var(--orange); }
.val-panel {
  border:1px solid var(--panel-border); border-radius:20px; padding:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  display:none; animation:fadeIn .45s ease;
}
.val-panel.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(14px)} to{opacity:1} }
.val-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:start; }
@media (max-width:900px){ .val-grid{grid-template-columns:1fr} }
.timeline-slider { margin:18px 0 6px; }
input[type=range] { width:100%; accent-color:var(--orange); height:4px; }
.tl-labels { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:2px; }
.val-metrics { display:flex; flex-direction:column; gap:14px; }
.metric-card {
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.metric-card .lbl { font-size:13.5px; line-height:1.5; }
.metric-card .val { font-size:17px; font-weight:800; color:var(--amber); white-space:nowrap; }
.metric-note { font-size:12px; color:var(--muted); margin-top:6px; }

.data-source-switch { display:inline-flex; background:var(--panel); border:1px solid var(--panel-border); border-radius:999px; padding:4px; gap:4px; }
.dss-btn { padding:7px 16px; border-radius:999px; font-size:12.5px; border:none; background:none; color:var(--muted); cursor:pointer; font-family:inherit; transition:.2s; }
.dss-btn.active { background:rgba(255,122,26,.18); color:var(--cream); }
.disclaimer {
  margin-top:16px; padding:12px 16px; border-radius:12px; font-size:12.5px; line-height:1.7;
  background:rgba(255,122,26,.05); border-left:3px solid var(--orange); color:#CFC6B8;
}

/* 器官热图 */
.organ-map { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:22px; }
@media (max-width:760px){ .organ-map{grid-template-columns:repeat(3,1fr)} }
.organ-cell { text-align:center; cursor:pointer; }
.organ-box {
  aspect-ratio:1; border-radius:16px; border:1px solid color-mix(in srgb, var(--oc,#FFB25E) 30%, transparent);
  background:
    radial-gradient(80% 80% at 50% 42%, color-mix(in srgb, var(--oc,#FFB25E) 13%, transparent), transparent 70%),
    rgba(255,255,255,.02);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 calc(10px + var(--os,.5)*18px) color-mix(in srgb, var(--oc,#FFB25E) 26%, transparent),
             inset 0 0 24px color-mix(in srgb, var(--oc,#FFB25E) 9%, transparent);
  transition:.25s; overflow:hidden;
}
.organ-cell:hover .organ-box { transform:translateY(-4px); border-color:color-mix(in srgb, var(--oc,#FFB25E) 60%, transparent); }
.organ-box.sel { border-color:var(--oc,#FFB25E); box-shadow:0 0 24px color-mix(in srgb, var(--oc,#FFB25E) 45%, transparent); }
.organ-cell small { font-size:12.5px; color:var(--muted); display:block; margin-top:8px; letter-spacing:.1em; }
.organ-detail {
  margin-top:20px; padding:16px 20px; border-radius:14px;
  background:var(--panel); border:1px solid var(--panel-border); font-size:14px; min-height:64px;
}
.organ-detail b { color:var(--orange-hi); }

/* ══════════ 第六屏：文献证据 ══════════ */
.evidence-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.ev-card {
  background:var(--panel); border:1px solid var(--panel-border); border-radius:18px;
  padding:24px; transition:.25s; display:flex; flex-direction:column;
}
.ev-card:hover { border-color:rgba(255,178,94,.4); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.35); }
.ev-year { font-size:12px; letter-spacing:.15em; color:var(--orange); font-weight:700; }
.ev-card h4 { font-size:16.5px; margin:8px 0 8px; line-height:1.45; }
.ev-card p { font-size:13.5px; color:var(--muted); flex:1; }
.ev-journal { margin-top:14px; font-size:12.5px; color:var(--amber); font-style:italic; }
.ev-tagline { margin-top:6px; font-size:12px; color:var(--muted); }
.ev-source { margin-top:14px; width:max-content; color:var(--cyan); font-size:12px; text-decoration:none; }
.ev-source:hover { text-decoration:underline; }

.science-bounds { margin-top:56px; border:1px dashed rgba(255,178,94,.35); border-radius:20px; padding:30px 34px; background:rgba(255,122,26,.03); }
.science-bounds h3 { font-size:19px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.bounds-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px 28px; }
.bounds-grid li { list-style:none; font-size:13.5px; color:#C9C2B8; padding-left:26px; position:relative; margin-bottom:8px; line-height:1.65; }
.bounds-grid li::before { content:"✕"; position:absolute; left:0; color:#FF6B4A; font-weight:700; }

/* ══════════ 第七屏：需求生成表单 ══════════ */
.rfq-layout { display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
@media (max-width:1000px){ .rfq-layout{grid-template-columns:1fr} }
.rfq-form { display:flex; flex-direction:column; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-row{grid-template-columns:1fr} }
.field label { display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:#D8D2CA; }
.field input, .field select, .field textarea {
  width:100%; padding:12px 15px; border-radius:12px; font-size:14.5px; font-family:inherit;
  background:rgba(255,255,255,.04); border:1px solid var(--panel-border); color:var(--text);
  transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,122,26,.15);
}
.rfq-summary {
  position:sticky; top:calc(var(--nav-h) + 24px);
  background:linear-gradient(180deg,rgba(255,122,26,.08),rgba(255,122,26,.02));
  border:1px solid rgba(255,122,26,.3); border-radius:20px; padding:26px;
}
.rfq-summary h3 { font-size:17px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.sum-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.09); font-size:13.5px; }
.sum-row dt { color:var(--muted); }
.sum-row dd { text-align:right; font-weight:600; }
.rfq-summary .btn { width:100%; justify-content:center; margin-top:20px; }
.direct-contact { margin-top:18px; padding:14px; display:grid; grid-template-columns:1fr 96px; gap:10px 14px; align-items:center; border:1px solid rgba(255,178,94,.22); border-radius:14px; background:rgba(255,122,26,.045); }
.direct-contact b,.direct-contact span,.direct-contact a { display:block; }.direct-contact b{font-size:13px;color:var(--cream)}.direct-contact span{margin-top:4px;font-size:10.5px;color:var(--muted)}.direct-contact a{margin-top:3px;color:var(--orange-hi);font-size:15px;font-weight:800}.direct-contact img{grid-column:2;grid-row:1/3;width:96px;height:96px;object-fit:contain;border-radius:10px;background:#fff}.direct-contact small{grid-column:2;text-align:center;color:var(--muted);font-size:9.5px}
.rfq-success {
  display:none; text-align:center; padding:40px 20px;
}
.rfq-success.show { display:block; }
.rfq-success .big-check { font-size:52px; }
.rfq-success h3 { color:var(--orange-hi); margin:14px 0 8px; }
.rfq-success p { color:var(--muted); font-size:14px; }

/* ══════════ 页脚 ══════════ */
footer {
  border-top:1px solid var(--panel-border); background:#080A0F;
  padding:52px 0 36px; margin-top:0;
}
.footer-inner { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.footer-brand p { color:var(--muted); font-size:13.5px; max-width:360px; margin-top:10px; }
.footer-col h5 { font-size:14px; margin-bottom:12px; }
.footer-col a { display:block; color:var(--muted); text-decoration:none; font-size:13.5px; margin-bottom:8px; transition:.2s; }
.footer-col a:hover { color:var(--amber); }
.footer-base { margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }

/* 移动端适配 */
@media (max-width:640px){
  .sec { padding:72px 0; }
  .src-list { position:relative; top:auto; }
  #mechanism .sec-head h2 { font-size:24px; white-space:nowrap; }
  .src-card { padding:18px 16px; }
  .viz-panel { min-height:0; padding:16px; }
  .viz-canvas-wrap { height:240px; }
  #mechCanvas { height:380px; }
  .organ-targets { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .target-context { grid-template-columns:1fr; gap:6px; }
  .target-lab { padding:16px; }
  .target-lab-head { align-items:flex-start; flex-direction:column; }
  .builder-grid { gap:22px; }
  .build-stage { min-height:0; }
  #builderCanvasWrap { flex:none; min-height:340px; height:340px; }
  #builderCanvas { height:340px; }
  .vesicle-callouts { display:none; }
  .vc { width:150px; padding:8px 9px 8px 13px; }
  .vc::after { width:32px; }
  .vc-surface { right:8px; top:12px; }
  .vc-membrane { left:8px; top:54px; }
  .vc-lumen { left:8px; bottom:16px; }
  .assembly-status { right:8px; bottom:14px; max-width:160px; }
  .tracking-workbench { padding:16px; }
  .tracking-head { align-items:flex-start; flex-direction:column; }
  .tracking-grid { grid-template-columns:1fr; }
  .tracking-steps i { display:none; }
  .qc-workbench { padding:16px; }
  .qc-lanes,.qc-methods { grid-template-columns:1fr; }
  .peptide-identity { grid-template-columns:1fr; padding:14px; }
  .peptide-identity-main { flex-wrap:wrap; }
  .peptide-identity code { width:100%; }
  .peptide-identity small { text-align:left; }
}

@media (min-width:641px) and (max-width:900px){
  .qc-methods { grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .engineering-flow { grid-template-columns:1fr 1fr; }
  .engineering-flow > i { display:none; }
}

@media (min-width:641px) and (max-width:1020px){
  .organ-targets { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:640px){html[lang="en-US"] #mechanism .sec-head h2{white-space:normal;overflow-wrap:anywhere;line-height:1.25}}
