/* ============ 锋与天气 · 三维交互模拟 —— 深蓝科技风 ============ */
:root{
  --bg:#060f20;
  --panel:rgba(9,20,42,.86);
  --panel2:rgba(14,30,58,.72);
  --line:rgba(110,180,255,.18);
  --line2:rgba(110,180,255,.32);
  --ink:#e9f3ff;
  --dim:#93abce;
  --accent:#4fd1ff;
  --warm:#ff6b6b;
  --cold:#4da3ff;
  --gold:#ffd76a;
  --purple:#c07bff;
  --ok:#39d98a;
  font-size:15px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);user-select:none;
}
#app{position:fixed;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#gl:active{cursor:grabbing}
.hidden{display:none!important}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:rgba(110,180,255,.25);border-radius:3px}

/* ============ 顶部栏 ============ */
#topbar{
  position:absolute;top:0;left:0;right:0;height:54px;z-index:30;
  display:flex;align-items:center;gap:16px;padding:0 14px;
  background:linear-gradient(180deg,rgba(6,14,30,.92),rgba(6,14,30,.72) 70%,transparent);
  pointer-events:none;
}
#topbar>*{pointer-events:auto}
.tb-left{display:flex;align-items:center;gap:10px;min-width:300px}
.logo{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(135deg,#155a9e,#0b2c56);color:var(--accent);
  box-shadow:0 0 14px rgba(79,209,255,.35),inset 0 0 8px rgba(79,209,255,.2);
}
.tb-title b{display:block;font-size:16px;letter-spacing:.5px}
.tb-title span{display:block;font-size:10.5px;color:var(--dim);letter-spacing:2px;margin-top:1px}
.tb-center{flex:1;display:flex;justify-content:center;gap:6px}
.vt{
  padding:7px 15px;border-radius:18px;border:1px solid var(--line);color:var(--dim);
  background:var(--panel2);cursor:pointer;font-size:13px;transition:.18s;letter-spacing:1px;
}
.vt:hover{color:var(--ink);border-color:var(--line2)}
.vt.on{color:#04121f;background:linear-gradient(135deg,#59d6ff,#2f8fe0);border-color:transparent;font-weight:700;box-shadow:0 0 12px rgba(79,209,255,.45)}
.tb-right{display:flex;align-items:center;gap:8px;min-width:300px;justify-content:flex-end}
.badge-day,.badge-front{
  padding:6px 12px;border-radius:8px;font-size:12.5px;border:1px solid var(--line);
  background:var(--panel2);letter-spacing:.5px;white-space:nowrap;
}
.badge-front{color:var(--gold);font-weight:700;border-color:rgba(255,215,106,.35)}
.icon-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);cursor:pointer;font-size:15px;transition:.15s;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ============ 左右面板通用 ============ */
#leftNav,#rightPanel{
  position:absolute;top:62px;bottom:104px;z-index:25;width:250px;
  display:flex;flex-direction:column;pointer-events:none;
}
#leftNav{left:10px}
#rightPanel{right:10px;width:296px}
.nav-scroll{
  overflow-y:auto;overflow-x:hidden;pointer-events:auto;flex:1;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(0,0,0,.45);
  padding:6px 10px 12px;
}
.nav-sec{padding:10px 2px 4px;border-bottom:1px dashed rgba(110,180,255,.12)}
.nav-sec:last-child{border-bottom:none}
.nav-sec h3{
  font-size:12.5px;color:var(--accent);letter-spacing:1.5px;margin-bottom:9px;font-weight:700;
  display:flex;align-items:baseline;gap:6px;
}
.nav-sec h3 i{font-style:normal;font-size:11px;color:var(--gold)}
.h3-sub{font-size:10px;color:var(--dim);letter-spacing:0;font-weight:400;margin-left:auto}

/* 锋面类型卡片 */
.front-cards{display:flex;flex-direction:column;gap:7px}
.fc{
  display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;
  padding:8px 9px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);cursor:pointer;text-align:left;transition:.18s;gap:0 8px;
}
.fc:hover{border-color:var(--line2);transform:translateX(2px)}
.fc.on{border-color:var(--accent);background:linear-gradient(90deg,rgba(79,209,255,.16),rgba(14,30,58,.7));box-shadow:0 0 10px rgba(79,209,255,.25)}
.fc-sym{grid-row:1/3;font-size:15px;letter-spacing:-2px;text-align:center;font-weight:700}
.cold-sym{color:var(--cold)}.warm-sym{color:var(--warm)}.sta-sym{color:var(--gold)}.occ-sym{color:var(--purple)}
.cyc-sym{color:#ff7b52}.anti-sym{color:#5cc8ff}
.fc-divider{
  font-size:10px;color:var(--dim);text-align:center;letter-spacing:2px;margin:4px 0 2px;opacity:.75;
}
.fc-name{font-size:14.5px;font-weight:700;letter-spacing:2px}
.fc-desc{grid-column:2;font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.35}

/* 滑杆 */
.slider-row{margin-bottom:9px}
.slider-row label{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-bottom:4px}
.slider-row label b{color:var(--ink);font-size:12px}
input[type=range]{width:100%;height:4px;-webkit-appearance:none;appearance:none;border-radius:2px;
  background:linear-gradient(90deg,#2f8fe0,#123);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);
  border:2px solid #0a2a4a;box-shadow:0 0 8px rgba(79,209,255,.7);cursor:pointer;
}
.ghost-btn{
  width:100%;margin-top:2px;padding:7px 0;border-radius:8px;border:1px dashed var(--line2);
  background:transparent;color:var(--dim);cursor:pointer;font-size:12px;transition:.15s;letter-spacing:1px;
}
.ghost-btn:hover{color:var(--accent);border-color:var(--accent)}

/* 分段选择 */
.seg{display:flex;gap:4px}
.seg button{
  flex:1;padding:6px 0;font-size:11.5px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);cursor:pointer;transition:.15s;
}
.seg button.on{color:#04121f;background:linear-gradient(135deg,#59d6ff,#2f8fe0);font-weight:700;border-color:transparent}

/* 开关 */
.toggle-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12.5px;color:var(--dim)}
.tgl{
  width:36px;height:19px;border-radius:10px;border:1px solid var(--line2);background:#0a1c38;
  position:relative;cursor:pointer;transition:.2s;
}
.tgl i{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#5a7396;transition:.2s;
}
.tgl.on{background:linear-gradient(135deg,#2f8fe0,#59d6ff);border-color:transparent}
.tgl.on i{left:19px;background:#fff}

/* 图例 */
.legend{list-style:none}
.legend li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);margin-bottom:6px}
.lg-dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 6px currentColor}
.lg-sym{width:34px;text-align:center;flex:none;font-size:11px}

/* 锋面状态 */
.front-info .fi-row{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;color:var(--dim)}
.front-info .fi-row b{color:var(--ink);font-weight:600;text-align:right}
.front-info .fi-row b.hl{color:var(--gold)}

/* 城市卡片 */
.city-card{
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  padding:8px 9px 7px;margin-bottom:9px;
}
.cc-head{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.cc-ico{font-size:17px;filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}
.cc-name{font-size:13.5px;font-weight:700;letter-spacing:1.5px}
.cc-weather{margin-left:auto;font-size:11px;color:var(--gold);background:rgba(255,215,106,.1);
  border:1px solid rgba(255,215,106,.3);padding:2px 7px;border-radius:6px;white-space:nowrap}
.cc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:6px}
.cc-item{background:rgba(255,255,255,.045);border-radius:7px;padding:4px 6px;text-align:center}
.cc-item .k{font-size:9.5px;color:var(--dim);letter-spacing:1px}
.cc-item .v{font-size:13.5px;font-weight:700;margin-top:1px}
.cc-item .v small{font-size:9px;font-weight:400;color:var(--dim)}
.v-temp{color:var(--warm)}.v-press{color:var(--accent)}.v-wind{color:#9be8ff}
.cc-trend{font-size:9px;margin-left:2px}
.cc-chart{width:100%;height:60px;display:block;border-radius:6px;background:rgba(0,0,0,.25)}

/* 阶段 */
.phase-box{
  font-size:13px;line-height:1.6;padding:8px 10px;border-radius:9px;
  background:linear-gradient(90deg,rgba(255,215,106,.12),rgba(255,215,106,.02));
  border:1px solid rgba(255,215,106,.28);color:var(--gold);letter-spacing:.5px;min-height:40px;
}

/* ============ 画中画 ============ */
#pipFrame{
  position:absolute;right:318px;bottom:116px;width:360px;height:236px;z-index:24;
  border:1px solid var(--line2);border-radius:12px;pointer-events:none;
  box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.3);
  background:rgba(6,14,30,.5);
}
.pip-title{
  position:absolute;top:-1px;left:-1px;right:-1px;display:flex;align-items:center;
  padding:4px 8px;border-radius:11px 11px 0 0;
  background:linear-gradient(180deg,rgba(9,20,42,.95),rgba(9,20,42,.6));font-size:11.5px;
  color:var(--accent);letter-spacing:1px;pointer-events:auto;
}
.pip-title button{
  margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;
}
.pip-title button:hover{color:var(--warm)}

/* ============ 字幕 ============ */
#subtitle{
  position:absolute;left:50%;transform:translateX(-50%);bottom:112px;z-index:26;
  max-width:56%;padding:8px 18px;border-radius:20px;text-align:center;
  background:rgba(5,12,26,.78);border:1px solid var(--line);font-size:13.5px;line-height:1.55;
  color:#dff0ff;letter-spacing:.5px;backdrop-filter:blur(4px);
  box-shadow:0 4px 18px rgba(0,0,0,.4);transition:opacity .3s;
}

/* ============ 底部时间条 ============ */
#timeline{
  position:absolute;left:0;right:0;bottom:0;height:96px;z-index:30;
  display:flex;align-items:stretch;gap:12px;padding:10px 14px;
  background:linear-gradient(0deg,rgba(6,14,30,.95) 55%,transparent);
}
.tl-narr{
  width:26%;min-width:220px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:7px 12px;
}
.tl-narr-title{font-size:10px;color:var(--accent);letter-spacing:2px}
.tl-narr-text{
  font-size:12px;color:#cfe4ff;line-height:1.5;max-height:52px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.tl-main{
  flex:1;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;
  align-items:center;column-gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:6px 16px 8px;
}
.tl-phase{
  grid-column:1/4;font-size:11px;color:var(--gold);letter-spacing:1px;margin-bottom:2px;
}
.tl-controls{display:flex;align-items:center;gap:8px}
.tl-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--panel2);
  color:var(--ink);cursor:pointer;font-size:15px;transition:.15s;
}
.tl-btn.big{width:46px;height:46px;font-size:19px;background:linear-gradient(135deg,#59d6ff,#2f8fe0);color:#04121f;border:none;box-shadow:0 0 14px rgba(79,209,255,.5)}
.tl-btn:hover{transform:scale(1.07)}
.tl-speed{display:flex;gap:3px;margin-left:6px}
.tl-speed button{
  padding:4px 8px;font-size:11px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);cursor:pointer;
}
.tl-speed button.on{color:#04121f;background:#59d6ff;font-weight:700;border-color:transparent}
.tl-slider-wrap{position:relative;padding-top:6px}
#tlRange{width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,#1b3a66,#2f8fe0)}
.tl-ticks{position:absolute;left:0;right:0;top:22px;height:14px;pointer-events:none}
.tl-ticks span{
  position:absolute;transform:translateX(-50%);font-size:9.5px;color:var(--dim);top:0;
}
.tl-ticks span::before{
  content:"";position:absolute;left:50%;top:-9px;width:1px;height:6px;background:rgba(110,180,255,.4);
}
.tl-day{font-size:12px;color:var(--ink);white-space:nowrap;letter-spacing:1px}
.tl-right{width:170px;display:flex;align-items:center}
.tl-tip{font-size:10.5px;color:var(--dim);line-height:1.7;text-align:right;width:100%}

/* ============ toast ============ */
#toast{
  position:absolute;top:66px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:40;
  padding:9px 22px;border-radius:22px;background:rgba(9,24,48,.92);border:1px solid var(--line2);
  color:var(--ink);font-size:13.5px;letter-spacing:1px;opacity:0;pointer-events:none;transition:.3s;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 暗角（科技感氛围） */
#vignette{
  position:absolute;inset:0;z-index:15;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(2,6,14,.42) 100%);
}

/* ============ 启动画面 ============ */
#splash{
  position:absolute;inset:0;z-index:60;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 38%,rgba(21,68,128,.55),rgba(4,10,22,.97) 68%);
  backdrop-filter:blur(3px);
}
.splash-card{text-align:center;max-width:640px;padding:40px}
.splash-glyph{font-size:44px;letter-spacing:12px;margin-bottom:10px;filter:drop-shadow(0 0 14px rgba(120,200,255,.5))}
.splash-card h1{
  font-size:52px;letter-spacing:14px;text-indent:14px;font-weight:800;
  background:linear-gradient(135deg,#dff3ff 20%,#4fd1ff 60%,#2f8fe0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(79,209,255,.25);
}
.splash-card h2{font-size:15px;color:var(--dim);letter-spacing:6px;margin:10px 0 22px;text-indent:6px}
.splash-feat{font-size:12.5px;color:#b9d2f2;line-height:1.9;margin-bottom:28px;
  border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2);padding:12px 0}
#btnEnter{
  padding:13px 58px;font-size:17px;letter-spacing:6px;text-indent:6px;border-radius:28px;border:none;
  background:linear-gradient(135deg,#59d6ff,#2f7fd8);color:#03101e;font-weight:800;cursor:pointer;
  box-shadow:0 0 26px rgba(79,209,255,.55);transition:.2s;
}
#btnEnter:hover{transform:scale(1.05);box-shadow:0 0 36px rgba(79,209,255,.8)}
.splash-tip{margin-top:18px;font-size:11px;color:var(--dim)}

/* ============ 帮助 ============ */
#helpModal{
  position:absolute;inset:0;z-index:55;background:rgba(3,8,18,.7);display:grid;place-items:center;
  backdrop-filter:blur(3px);
}
.help-card{
  width:520px;max-width:92%;background:var(--panel);border:1px solid var(--line2);border-radius:16px;
  padding:24px 28px;box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.help-card h3{color:var(--accent);letter-spacing:4px;margin-bottom:14px;font-size:17px}
.help-card ul{list-style:none}
.help-card li{font-size:12.5px;color:#c9dcf5;line-height:1.9;margin-bottom:4px}
.help-card li b{color:var(--gold)}
.help-card button{
  margin-top:16px;width:100%;padding:10px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#59d6ff,#2f8fe0);color:#04121f;font-weight:700;font-size:14px;letter-spacing:3px;
}

/* ============ 大气环流实验室 ============ */
body.lab-mode #topbar, body.lab-mode #leftNav, body.lab-mode #rightPanel,
body.lab-mode #timeline, body.lab-mode #subtitle, body.lab-mode #pipFrame { display: none !important; }
#labRoot{position:absolute;inset:0;z-index:28;pointer-events:none}
#labRoot.hidden{display:none!important}
#labRoot>*{pointer-events:auto}
#labFade{pointer-events:none!important;position:absolute;inset:0;background:#04070f;opacity:0;transition:opacity .26s ease;z-index:5}

/* 顶栏 */
#labHeader{
  position:absolute;top:0;left:0;right:0;height:58px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  background:linear-gradient(180deg,rgba(3,8,20,.92),rgba(3,8,20,.55) 75%,transparent);
}
#labHeader::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(110,190,255,.55) 28%,rgba(110,190,255,.55) 72%,transparent);
}
.lab-title{display:flex;align-items:baseline;gap:14px}
.lab-title b{
  font-size:24px;letter-spacing:8px;color:#eaf6ff;
  text-shadow:0 0 18px rgba(90,180,255,.9),0 0 40px rgba(90,180,255,.4);
}
.lab-title span{
  font-size:11px;letter-spacing:4px;color:#6fb6ff;
  text-shadow:0 0 12px rgba(90,180,255,.7);
}
.lab-btns{display:flex;gap:8px}
.lab-btns button{
  padding:7px 16px;border-radius:9px;border:1px solid rgba(110,180,255,.3);
  background:rgba(9,22,44,.75);color:#cfe6ff;cursor:pointer;font-size:12.5px;letter-spacing:1px;transition:.15s;
}
.lab-btns button:hover{border-color:#4fd1ff;color:#4fd1ff;box-shadow:0 0 10px rgba(79,209,255,.35)}

/* 右侧知识点目录 */
#labCatalog{
  position:absolute;top:68px;right:12px;bottom:118px;width:238px;z-index:3;
  background:rgba(7,16,34,.88);border:1px solid rgba(110,180,255,.22);border-radius:14px;
  backdrop-filter:blur(8px);display:flex;flex-direction:column;transition:transform .3s ease;
}
#labCatalog.folded{transform:translateX(206px)}
.lc-head{
  display:flex;align-items:center;padding:10px 12px;font-size:12px;color:#4fd1ff;
  letter-spacing:2px;border-bottom:1px dashed rgba(110,180,255,.18);
}
.lc-head button{
  margin-left:auto;width:24px;height:24px;border-radius:6px;border:1px solid rgba(110,180,255,.3);
  background:none;color:#9db4d8;cursor:pointer;
}
.lc-list{overflow-y:auto;flex:1;padding:8px}
.lc-item{
  padding:9px 10px;border-radius:10px;border:1px solid transparent;cursor:pointer;margin-bottom:6px;
  display:grid;grid-template-columns:auto 1fr;gap:1px 8px;transition:.16s;
}
.lc-item:hover{background:rgba(79,209,255,.08)}
.lc-item.on{border-color:rgba(79,209,255,.45);background:linear-gradient(90deg,rgba(79,209,255,.16),rgba(9,22,44,.4))}
.lc-item i{grid-row:1/3;font-style:normal;font-size:11px;color:#ffd76a;padding-top:2px}
.lc-item b{font-size:13.5px;color:#eaf3ff;letter-spacing:.5px}
.lc-item span{grid-column:2;font-size:10px;color:#8fa9cc}

/* 底部控制栏 */
#labBottom{
  position:absolute;left:12px;right:12px;bottom:12px;height:88px;z-index:3;
  display:flex;align-items:center;gap:10px;padding:0 16px;
  background:rgba(7,16,34,.9);border:1px solid rgba(110,180,255,.22);border-radius:14px;
  backdrop-filter:blur(8px);
}
.lab-nav{
  padding:10px 18px;border-radius:10px;border:1px solid rgba(110,180,255,.3);
  background:rgba(14,30,58,.8);color:#cfe6ff;cursor:pointer;font-size:13px;letter-spacing:1px;transition:.15s;
}
.lab-nav:hover{border-color:#4fd1ff;color:#4fd1ff}
.lab-nav.primary{
  background:linear-gradient(135deg,#59d6ff,#2f7fd8);color:#04121f;font-weight:700;border:none;
  box-shadow:0 0 14px rgba(79,209,255,.45);
}
.lab-play{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;font-size:17px;
  background:linear-gradient(135deg,#59d6ff,#2f7fd8);color:#04121f;box-shadow:0 0 12px rgba(79,209,255,.5);
}
.lab-seg{display:flex;gap:4px;background:rgba(255,255,255,.04);padding:4px;border-radius:10px}
.lab-seg button{
  padding:7px 12px;border-radius:7px;border:none;background:transparent;color:#9db4d8;
  cursor:pointer;font-size:12px;transition:.14s;white-space:nowrap;
}
.lab-seg button:hover{color:#dff2ff}
.lab-seg button.on{background:linear-gradient(135deg,#59d6ff,#2f8fe0);color:#04121f;font-weight:700}
.lab-seg.disabled{opacity:.35;pointer-events:none}

/* 场景名 / 解说 / 提示 */
#labSceneName{
  position:absolute;left:50%;transform:translateX(-50%);bottom:116px;z-index:3;
  padding:8px 22px 8px 18px;border-radius:9px;font-size:15px;letter-spacing:3px;color:#eaf6ff;
  background:rgba(6,14,30,.82);border:1px solid rgba(110,180,255,.35);border-left:3px solid #4fd1ff;
  text-shadow:0 0 14px rgba(90,180,255,.8);white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
#labNarr{
  position:absolute;left:24px;bottom:112px;width:30%;min-width:260px;z-index:2;
  font-size:12px;line-height:1.65;color:#a8c4e6;
  background:rgba(6,14,30,.65);border:1px solid rgba(110,180,255,.18);border-radius:10px;padding:9px 12px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
#labHint{
  position:absolute;right:16px;bottom:2px;z-index:2;font-size:10px;letter-spacing:1px;color:rgba(140,175,215,.75);
}
#labHeat{
  position:absolute;left:24px;top:74px;z-index:3;width:210px;padding:10px 12px;
  background:rgba(7,16,34,.88);border:1px solid rgba(110,180,255,.22);border-radius:12px;
}
#labHeat b{font-size:12px;color:#4fd1ff;letter-spacing:1px}
.lh-bar{height:12px;border-radius:6px;margin:8px 0 4px;
  background:linear-gradient(90deg,#2850ff,#39d98a,#ffe066,#ff9d3c,#ff4040);}
.lh-lab{display:flex;justify-content:space-between;font-size:10px;color:#9db4d8}

/* 剖面图 & 图层控制（参考优化） */
#labSectionWrap{
  position:absolute;left:14px;bottom:214px;z-index:3;width:476px;
  background:rgba(6,14,30,.72);border:1px solid rgba(110,180,255,.25);border-radius:12px;
  overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4);
}
#labSectionWrap{cursor:grab}
#labSectionWrap:active{cursor:grabbing}
#labSectionWrap .ls-title{
  padding:6px 12px;font-size:11.5px;color:#4fd1ff;letter-spacing:2px;
  background:rgba(9,20,42,.85);border-bottom:1px solid rgba(110,180,255,.18);
  display:flex;align-items:center;
}
#labSectionWrap .ls-title i{
  margin-left:auto;font-style:normal;font-size:10px;color:#7d95b8;letter-spacing:1px;opacity:.8;
}
body.lab-mode #gl{cursor:grab}
body.lab-mode #gl:active{cursor:grabbing}
#labSection{display:block;width:100%;height:auto}
.lc-head2{
  padding:8px 12px 2px;font-size:10.5px;color:#ffd76a;letter-spacing:2px;
  border-top:1px dashed rgba(110,180,255,.18);margin-top:4px;
}
.lc-layers{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px 10px}
.lc-layers button{
  padding:4px 9px;font-size:11px;border-radius:7px;border:1px solid rgba(110,180,255,.25);
  background:rgba(14,30,58,.6);color:#8fa9cc;cursor:pointer;transition:.14s;
}
.lc-layers button:hover{color:#dff2ff;border-color:rgba(110,180,255,.5)}
.lc-layers button.on{color:#04121f;background:linear-gradient(135deg,#59d6ff,#2f8fe0);border-color:transparent;font-weight:700}

@media (max-width:1250px){
  #labSectionWrap{width:340px;bottom:214px}
}
#labAboutModal{position:absolute;inset:0;z-index:6;background:rgba(3,8,18,.72);display:grid;place-items:center}
.la-card{
  width:520px;max-width:92%;background:rgba(9,20,42,.97);border:1px solid rgba(110,180,255,.35);
  border-radius:16px;padding:24px 28px;box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.la-card h3{color:#4fd1ff;letter-spacing:3px;margin-bottom:12px;font-size:17px}
.la-card p{font-size:12.5px;color:#c9dcf5;line-height:1.9;margin-bottom:8px}
.la-card button{
  margin-top:10px;width:100%;padding:10px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#59d6ff,#2f8fe0);color:#04121f;font-weight:700;letter-spacing:3px;
}

@media (max-width:1250px){
  #labCatalog{width:200px;transform:translateX(168px)}
  #labCatalog.folded{transform:translateX(168px)}
  #labHeader .lab-title b{font-size:18px;letter-spacing:4px}
  #labBottom{flex-wrap:wrap;height:auto;padding:8px 12px;gap:6px}
  #labNarr{display:none}
}
@media (max-width:1250px){
  #pipFrame{width:280px;height:186px}
  :root{font-size:14px}
  #leftNav{width:226px}
  #rightPanel{width:266px}
  #pipFrame{right:288px}
}