/* ===== CELLSCAPE v0.2 · Living Loop — 介面（克制語意，無裝飾性特效） ===== */
:root{
  --bg:#05080f; --panel:rgba(9,17,28,.86); --line:rgba(120,190,220,.18);
  --accent:#5ec9d8; --text:#d9e8ef; --dim:#7d97a8; --warn:#ffb454;
  --mono:"Cascadia Code",Consolas,monospace;
  --sans:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans)}
.mono{font-family:var(--mono)}
.small{font-size:11px}
.dim{color:var(--dim)}
.grow{flex:1}
#r3d{position:fixed;inset:0}
#r3d canvas{display:block}

/* 頂列 */
#topbar2{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:8px 14px;background:linear-gradient(180deg,rgba(4,8,15,.9),rgba(4,8,15,.4) 80%,transparent)}
.brand2{font-family:var(--mono);letter-spacing:.18em;font-weight:700;font-size:13px}
.brand2 em{font-style:normal;font-size:9px;letter-spacing:.3em;color:var(--dim);margin-left:6px}
.back{color:var(--dim);font-size:12px;text-decoration:none}
.back:hover{color:#fff}
.back.museum{font-size:11px;opacity:.7;margin-left:4px}
.badge{font-size:11px;padding:2px 9px;border-radius:10px;border:1px solid var(--line);color:var(--dim)}
.badge.b{color:#03141c;background:var(--accent);border-color:var(--accent)}
.badge.warn{color:#3a2a00;background:var(--warn);border-color:var(--warn)}
#worldClock{font-size:13px;color:var(--accent)}
.btn2{background:rgba(12,26,42,.7);border:1px solid var(--line);color:var(--text);font-size:12px;
  padding:4px 10px;border-radius:4px;cursor:pointer;font-family:var(--sans);letter-spacing:.05em}
.btn2:hover{border-color:rgba(120,190,220,.45)}
.btn2.on{background:var(--accent);color:#03141c;border-color:var(--accent)}
.btn2.tiny{font-size:11px;padding:3px 8px}
.btn2.icon{width:28px;text-align:center;padding:4px 0}
.btn2.file{position:relative;overflow:hidden;display:inline-flex;align-items:center}
.btn2.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.spd{padding:3px 8px;font-size:11px;color:var(--dim)}
.spd.on{background:var(--accent);color:#03141c;border-color:var(--accent)}

/* 面板 */
.panel2{position:fixed;z-index:15;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  backdrop-filter:blur(8px);padding:10px 12px}
.panel2.closed{opacity:0;pointer-events:none;transform:translateY(8px)}
.panel2 .ph{font-size:11px;letter-spacing:.14em;color:var(--dim);display:flex;justify-content:space-between;
  align-items:center;margin-bottom:8px}
.panel2 .ph .hint{font-size:10px;letter-spacing:0;opacity:.7}
.panel2 .x{background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer;line-height:1}
#evidencePanel{left:14px;top:56px;width:308px;max-height:52vh;display:flex;flex-direction:column}
#evidencePanel.closed{display:flex}
.evlist{overflow:auto;flex:1}
.evlist::-webkit-scrollbar{width:4px}
.evlist::-webkit-scrollbar-thumb{background:rgba(120,190,220,.25)}
.ev{font-size:11.5px;padding:5px 2px;border-bottom:1px solid rgba(120,190,220,.08);line-height:1.5}
.ev .tick{color:var(--accent);margin-right:4px}
.ev .src{float:right;color:var(--dim);font-size:10px}
.ev b{font-weight:500}
.ev .parents{color:var(--accent);cursor:pointer;border-bottom:1px dotted rgba(94,201,216,.5)}
.ev .parents:hover{color:#fff}
.ev.chain{border-left:2px solid var(--accent);padding-left:6px;background:rgba(94,201,216,.05)}
.pf{display:flex;gap:12px;padding-top:8px;border-top:1px solid rgba(120,190,220,.1);margin-top:6px}
.chk{font-size:11px;color:var(--dim);display:flex;gap:5px;align-items:center}
#inspector{right:14px;top:56px;width:264px}
#inspector .t{font-size:16px;font-weight:600;margin-bottom:2px}
.kv{display:flex;gap:10px;font-size:12px;padding:6px 0 0}
.kv i{font-style:normal;color:var(--dim);width:70px;flex:none}
.kv b{font-weight:500;color:var(--accent)}
.meter{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.meter.wide{height:8px}
.meter span{display:block;height:100%;background:linear-gradient(90deg,#8a4a2f,#ff5648);width:0;transition:width .4s}
.note{font-size:10px;color:var(--dim);margin-top:8px;line-height:1.6}
#paramPanel{left:14px;top:56px;transform:none;bottom:auto;width:min(320px,36vw);max-height:calc(100vh - 150px);overflow:auto}
#stockHud{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;
  pointer-events:none;font-size:12px;color:var(--dim);text-shadow:0 1px 8px #000}
#stockHud i{font-style:normal;margin-right:4px}
#stockHud b{color:var(--accent);margin-right:2px}
#stockHud .meter{width:120px;margin:0}
#stockHint{font-size:11px;letter-spacing:.04em;color:var(--accent)}
#paramPanel .prm{margin-bottom:7px}
#paramPanel label{font-size:12px;color:var(--text);display:flex;justify-content:space-between;margin-bottom:3px}
#paramPanel input[type=range]{width:100%;accent-color:var(--accent)}
#paramPanel .stat{display:flex;gap:14px;font-size:11px;color:var(--dim)}
#paramPanel .stat b{color:var(--accent);margin-right:10px}
#paramPanel .drugs label{font-size:11px;color:var(--dim);display:block;margin-bottom:4px}
#paramPanel .drugRow{display:flex;gap:6px;flex-wrap:wrap}

/* 底部：字幕 + 控制 */
#bottombar2{position:fixed;left:0;right:0;bottom:0;z-index:18;display:flex;flex-direction:column;gap:8px;
  padding:0 14px 12px;pointer-events:none}
#subtitle{min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:14px;letter-spacing:.06em;line-height:1.7;color:#eaf6fb;
  text-shadow:0 2px 8px rgba(0,0,0,.9);opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s;padding:0 8vw}
#subtitle.show{opacity:1;transform:translateY(0)}
#controls2{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;pointer-events:auto}

/* T-381：跟隨／導覽＝電影；實驗台留到探索模式 */
body.mode-tour #learnBtn,
body.mode-tour #drugPanel,
body.mode-tour #camOverview,
body.mode-tour #camLung,
body.mode-tour #camTissue,
body.mode-tour #evidenceToggle,
body.mode-tour #btnExport,
body.mode-tour #langToggle,
body.mode-tour .btn2.file,
body.mode-tour a.museum,
body.mode-tour #perfBadge,
body.mode-tour #tourNav{display:none !important}
body.mode-tour #subtitle{font-size:18px;min-height:52px;padding:0 12vw;letter-spacing:.04em}

/* 落地頁 */
#landing{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(5,8,15,.25),rgba(5,8,15,.88));
  transition:opacity .6s}
#landing.hidden{opacity:0;pointer-events:none}
#landing .card{text-align:center;max-width:560px;padding:0 20px}
#landing .t1{font-family:var(--mono);letter-spacing:.4em;font-size:18px;color:#eaf6fb;margin-bottom:14px}
#landing .t2{font-size:14px;line-height:1.9;color:var(--text);margin-bottom:26px}
#landing .t3{font-size:11px;color:var(--dim);line-height:1.9;margin-top:22px}
#followBtn{font-size:16px;padding:12px 30px;border-radius:6px;border:1px solid var(--accent);
  background:rgba(94,201,216,.12);color:#eaf6fb;cursor:pointer;letter-spacing:.14em;font-family:var(--sans)}
#followBtn:hover{background:var(--accent);color:#03141c;box-shadow:0 0 24px rgba(94,201,216,.35)}

/* 站點標籤（3D 投影） */
.stn-lbl{position:fixed;z-index:8;transform:translate(-50%,-100%);font-size:11px;letter-spacing:.08em;
  color:rgba(160,205,225,.85);text-shadow:0 1px 4px rgba(0,0,0,.9);pointer-events:none;white-space:nowrap}
.stn-lbl.follow{color:#fff;font-weight:600}

@media (max-width:760px){
  #topbar2{flex-wrap:wrap;row-gap:6px}
  .brand2 em{display:none}
  #evidencePanel{width:min(308px,calc(100vw - 24px));max-height:40vh}
  #inspector{width:min(264px,calc(100vw - 24px))}
  #subtitle{font-size:12.5px;padding:0 12px}
}
@media (max-height:500px){ /* 橫向矮幕：面板右靠，左側留給場景 */
  #evidencePanel{left:auto;right:14px;top:52px;width:min(308px,46vw);max-height:60vh}
  #paramPanel{left:auto;right:14px;transform:none;bottom:100px;width:min(360px,52vw)}
  #inspector{left:auto;right:14px;top:52px;width:min(264px,46vw)}
  #subtitle{font-size:12px}
}

/* ===== v0.3 Living Atlas（Gate A/B） ===== */
#inspector{width:min(318px,calc(100vw - 24px));max-height:76vh;overflow:auto}
#atlasSearch{width:100%;margin:8px 0 6px;padding:6px 8px;border-radius:8px;
  border:1px solid rgba(140,190,215,.35);background:rgba(8,22,32,.7);color:#dfeef7;font-size:12px}
.atabs{display:flex;gap:4px;margin:4px 0 8px;flex-wrap:wrap}
.atabs button{flex:1 1 auto;padding:5px 6px;font-size:12px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(140,190,215,.3);background:rgba(10,26,36,.65);color:#a9c6d8}
.atabs button.on{background:rgba(94,201,216,.22);color:#eaf7ff;border-color:rgba(94,201,216,.7)}
.abody{font-size:12.5px;line-height:1.55}
.abody h3{margin:4px 0 6px;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.chip{padding:3px 8px;font-size:11.5px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(140,190,215,.3);background:rgba(10,26,36,.6);color:#a9c6d8}
.chip.on{background:rgba(94,201,216,.25);color:#eaf7ff}
.cardHead .headline{margin:6px 0}
.kps{margin:4px 0 8px;padding-left:18px}
.kps li{margin:2px 0}
.qa{margin:10px 0;padding:8px 10px;border-left:2px solid rgba(94,201,216,.5);background:rgba(12,30,42,.5);border-radius:0 8px 8px 0}
.qa .q{font-weight:600;color:#cfe9f6}
.qa .a{margin-top:4px}
.claimLinks{margin-top:6px}
.claim{margin:6px 0;padding:6px 8px;border:1px solid rgba(140,190,215,.2);border-radius:8px;background:rgba(10,26,36,.45)}
.claim .meta{margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ctTag,.rsTag{font-size:10.5px;padding:1px 6px;border-radius:999px;border:1px solid rgba(160,190,210,.4)}
.ct-model_assumption{background:rgba(94,201,216,.15)}
.ct-biology_reference{background:rgba(242,193,78,.12)}
.rsTag{color:#ffd98a}
.capTag{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid rgba(160,190,210,.45);background:rgba(20,44,58,.7)}
.cap-dynamic{border-color:rgba(111,211,255,.7)}
.nowLine{margin:6px 0;padding:6px 8px;border-left:2px solid rgba(111,211,255,.55);background:rgba(12,30,42,.5);border-radius:0 6px 6px 0}
.kv{display:flex;justify-content:space-between;gap:8px;margin:3px 0}
.kv i{color:#9db8c9;font-style:normal}
.kv.ext{opacity:.92}
.missing{color:#ffcf7a}
.warn2{border-left:2px solid rgba(255,207,122,.7);padding-left:8px}
.srcChip{font-size:10.5px;padding:1px 6px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(140,190,215,.4);background:rgba(10,26,36,.55);color:#a9c6d8;text-decoration:none}
.srcChip:hover{color:#eaf7ff}
.srcRow{margin:6px 0;padding:6px 8px;border:1px solid rgba(140,190,215,.2);border-radius:8px}
.hit{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
.chartBox{margin:8px 0}
#loadChart{width:100%;height:96px;display:block}
.vc{margin:0 0 6px;color:#8fb0c3}
.ill svg{width:100%;height:auto}
.wide2{width:100%;margin-top:8px}
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(2,10,16,.72)}
.modal.hidden{display:none}
.modal .mbox{width:min(560px,calc(100vw - 28px));max-height:86vh;overflow:auto;
  background:linear-gradient(160deg,rgba(10,26,38,.98),rgba(6,16,24,.98));
  border:1px solid rgba(140,190,215,.35);border-radius:14px;padding:12px 14px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.modal svg{width:100%;height:auto}
/* T-299 C4：細胞內部示意（inside.js 自建 modal） */
.insideBody .insidePart{margin:7px 0;padding-bottom:6px;border-bottom:1px dashed rgba(140,190,215,.18)}
.insideBody .insidePart b{color:var(--accent)}
.insideBody svg .it{font-size:11px;fill:#cfe2ee}
.insideBody svg .it.warn{fill:#e8b06a}
.insideBody svg text{font-family:inherit}
details{margin:4px 0}
details summary{cursor:pointer}
@media (max-height:500px){ /* 矮幕：Atlas 面板同樣受限 */
  #inspector{width:min(318px,46vw);max-height:62vh}
}
@media (max-width:760px){
  #inspector{width:min(318px,calc(100vw - 24px))}
}
@media (max-height:500px){ /* 矮幕：按需開啟的檢閱面板蓋在環境參數面板之上（一次一個主要面板） */
  #inspector{z-index:26}
}
/* 檢閱或事件開啟時參數面板讓位（一次一個主要面板；桌面跟隨動線也適用） */
body.atlas-open #paramPanel, body.evidence-open #paramPanel{visibility:hidden;pointer-events:none}

/* 血紅素放大視角（T-321 刀 K1）：連續填充＝模型負載欄位，刻度不對應分子數目 */
.hemoBody h3{margin:0 0 6px;font-size:14px}
.hemoBar{position:relative;height:18px;border:1px solid rgba(140,160,180,.45);border-radius:3px;
  background:rgba(20,28,36,.6);overflow:hidden;margin:8px 0}
.hemoFill{height:100%;background:linear-gradient(90deg,#7a2020,#e06060)}
.hemoCeil{position:absolute;top:0;bottom:0;width:2px;background:#ffd27a}
.hemoRows{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12px;margin:6px 0}
.hemoRow{display:contents}
.hemoRow i{font-style:normal;color:rgba(190,205,220,.85)}
.hemoSpark{display:flex;align-items:flex-end;gap:1px;height:26px;margin:4px 0 8px}
.hemoSpark i{flex:1 1 auto;background:#6fd3ff;min-height:1px}
.hemoLayer{border-top:1px solid rgba(140,160,180,.2);padding:6px 0;font-size:12px}

/* 章節 B/C 學習控制器（T-321 刀 K2） */
.learnBody h3{margin:0 0 6px;font-size:14px}
.chapBlock{border-top:1px solid rgba(140,160,180,.2);padding:8px 0}
.gateList{list-style:none;margin:4px 0 0;padding:0;font-size:12px}
.gateList li{padding:2px 0}
.gateList .gateMet{color:#9df5c2}
.gateList .gateOpen{color:rgba(190,205,220,.75)}
.chapInput{width:100%;box-sizing:border-box;background:rgba(20,28,36,.7);color:inherit;
  border:1px solid rgba(140,160,180,.35);border-radius:3px;font:inherit;padding:4px;margin:4px 0}

/* U1 暖機標示、介入差異 Δ 與 A/B 同框差異（T-397） */
#warmChip{font-size:11px;padding:2px 8px;border-radius:10px;letter-spacing:.5px;
  color:#ffd9a0;background:rgba(255,180,80,.14);border:1px solid rgba(255,180,80,.45)}
#warmChip.stable{color:rgba(190,205,220,.65);background:rgba(120,150,175,.10);
  border-color:rgba(140,160,180,.25)}
#stockHud .delta{font-style:normal;font-size:11px;margin-left:4px;color:rgba(190,205,220,.85)}
#stockHud .delta.up{color:#9df5c2}
#stockHud .delta.down{color:#ffb0a0}
#branchDelta{font-size:12px;color:rgba(190,205,220,.85);text-align:center;padding:2px 0 0}
#immChip{font-size:11px;padding:2px 8px;border-radius:10px;letter-spacing:.5px;
  color:#e0c8ff;background:rgba(166,138,200,.16);border:1px solid rgba(166,138,200,.5)}

/* ===== U3 封面—內在質感收斂（T-402）：非凍結層樣式；不改 HUD 資訊內容與模型語義 ===== */
:root{
  --bg:#050814;
  --accent:#9be7ff;
  --line:rgba(155,231,255,.24);
  --panel:rgba(8,12,24,.72);
}
/* 氛圍層：畫布之上的暗角與上下漸層（pointer-events:none；不觸及 render.js） */
#atmos{position:fixed;inset:0;z-index:5;pointer-events:none;background:
  radial-gradient(120% 85% at 50% 40%, transparent 52%, rgba(2,5,12,.6) 100%),
  linear-gradient(180deg, rgba(5,8,20,.55) 0%, rgba(5,8,20,0) 16%, rgba(5,8,20,0) 74%, rgba(5,8,20,.6) 100%)}
/* HUD 玻璃化：大面積才用 blur，按鈕僅半透明＋邊框（避免逐幀多層模糊成本） */
#topbar2{background:linear-gradient(180deg,rgba(5,8,20,.85),rgba(5,8,20,.35) 78%,transparent)}
#bottombar2{background:linear-gradient(0deg,rgba(5,8,20,.85),rgba(5,8,20,.3) 82%,transparent);
  padding:10px 12px 12px}
.btn2{background:rgba(8,12,24,.6);border-color:rgba(155,231,255,.22);border-radius:6px}
.btn2:hover{border-color:rgba(155,231,255,.5)}
.panel2{background:var(--panel);backdrop-filter:blur(10px);border-radius:12px;
  border-color:rgba(155,231,255,.2)}
/* 品牌字對齊登陸頁語彙：無襯線、放寬字距 */
.brand2{font-family:var(--sans);font-weight:600;letter-spacing:.14em;font-size:14px;color:#eaf6fb}
/* 開場卡：登陸頁語彙（深海軍藍暈邊＋品牌漸層標題） */
#landing{background:radial-gradient(120% 100% at 50% 30%, rgba(5,8,20,.42), rgba(5,8,20,.88) 100%)}
#landing .t1{font-family:var(--sans);font-weight:600;letter-spacing:.34em;font-size:20px;
  background:linear-gradient(90deg,#f4f7ff 20%,#b9a6ff 72%,#9be7ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#followBtn{border-radius:6px;letter-spacing:.16em;border-color:rgba(155,231,255,.7)}
#followBtn:hover{box-shadow:0 0 28px rgba(155,231,255,.35)}