/* ============================================================
   天问一号火星着陆过程虚拟仿真平台 · 火星工程/科学仪器式视觉
   版本：v1（封面重构 · 双区任务台 · 毛玻璃入口 · 着陆器占位）
   ============================================================ */
:root{
  /* 火星工程色板 */
  --bg:#0d1117;          /* 深炭空间底 */
  --space:#0a0e14;       /* 更深的空间背景 */
  --panel:#141b24;       /* 面板 */
  --panel2:#1a232e;      /* 二级面板 */
  --text:#e8e6e1;        /* 暖灰白阅读面 */
  --muted:#9aa3ad;       /* 次级文字 */
  --line:#2a3542;        /* 细边线 */
  --rust:#c55c2b;        /* 氧化铁红 · 主导识别色 */
  --rust-deep:#8a3a1a;   /* 深锈红 */
  --sand:#d9a05b;        /* 砂岩橙 · 辅助 */
  --dust:#a98a6a;        /* 尘土褐 */
  --good:#6fbf73;
  --warn:#e0a24a;
  --danger:#d9605f;

  /* frostpane 毛玻璃变量（火星主题覆写） */
  --fp-glass-bg: rgba(197,92,43,.14);
  --fp-glass-highlight: rgba(255,214,180,.55);
  --fp-glass-blur: 14px;
  --fp-glass-saturate: 150%;
  --fp-glass-brightness: 1.08;
  --fp-glass-border-radius: 14px;
  --fp-glass-border-radius-small: 8px;
  --fp-glass-shadow-color-primary: rgba(0,0,0,.45);
  --fp-glass-shadow-color-secondary: rgba(0,0,0,.28);
  --fp-glass-shadow-offset-y: 10px;
  --fp-glass-shadow-blur-primary: 22px;
  --fp-glass-shadow-blur-secondary: 44px;
  --fp-glass-inset-highlight-offset: 1px;
  --fp-glass-inset-highlight-blur: 0;
  --fp-glass-inset-glow-blur: 8px;
  --fp-content-text:#f2ede6;
  --fp-content-text-secondary:rgba(242,237,230,.85);
  --fp-content-text-muted:rgba(13,17,23,.72);

  /* 字体体系（本机字体，离线可用） */
  --font-cn:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-en:"DIN Next LT Pro","DIN Alternate","Bahnschrift",system-ui,sans-serif;
  --font-mono:"Cascadia Mono","Consolas",ui-monospace,monospace;
}

html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-cn);overflow:hidden;}
*{box-sizing:border-box}
button{font-family:inherit}

/* 视图路由控制 */
.view-container { display: none; width: 100vw; height: 100vh; }
.view-active { display: flex; }

/* ============================================================
   封面任务台（本轮重构核心）
   ============================================================ */
#cover-view{
  flex-direction: column;
  background:
    radial-gradient(1200px 620px at 78% 12%, rgba(197,92,43,.16) 0%, rgba(197,92,43,0) 55%),
    radial-gradient(900px 520px at 18% 86%, rgba(217,160,91,.10) 0%, rgba(217,160,91,0) 60%),
    linear-gradient(160deg, #0a0e14 0%, #0d1117 42%, #120d0a 100%);
  position: relative;
}

/* 顶部系统条 */
.cover-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; border-bottom:1px solid rgba(154,163,173,.14);
  flex-shrink:0; z-index:20;
}
.cover-brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--rust);box-shadow:0 0 12px rgba(197,92,43,.8);flex-shrink:0;}
.brand-name{font-family:var(--font-en);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cover-actions{display:flex; gap:6px; flex-shrink:0;}
.cover-link{
  background:transparent;border:1px solid transparent;color:var(--muted);
  font-size:12.5px;padding:7px 12px;border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s;
}
.cover-link:hover{color:var(--text);border-color:rgba(154,163,173,.3);}
.cover-link:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}

/* 双区舞台 */
.cover-stage{
  flex:1; display:grid; grid-template-columns:45% 55%; gap:18px;
  padding:22px 26px 14px; min-height:0; z-index:10;
}

/* 分区公共 */
.cover-zone{
  position:relative; border-radius:10px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(154,163,173,.16);
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end;
  transition:border-color .25s, transform .25s, box-shadow .25s;
  outline:none;
}
.cover-zone:hover, .cover-zone:focus-visible{
  border-color:rgba(197,92,43,.65);
  transform:translateY(-2px);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}
.cover-zone:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}

/* 左区：物理实验（暖灰实验室氛围） */
.zone-lab{
  background:
    radial-gradient(560px 420px at 50% 100%, rgba(217,160,91,.16) 0%, rgba(217,160,91,0) 62%),
    linear-gradient(180deg, #121821 0%, #0d1117 100%);
}
/* 右区：工程拓展（锈红火星氛围，主视觉） */
.zone-eng{
  background:
    radial-gradient(720px 520px at 50% 108%, rgba(197,92,43,.28) 0%, rgba(197,92,43,0) 62%),
    radial-gradient(480px 300px at 74% 6%, rgba(224,162,74,.18) 0%, rgba(224,162,74,0) 55%),
    linear-gradient(180deg, #14100c 0%, #0c0f14 100%);
}

/* 分区动画区 */
.zone-anim{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; position:relative; padding:12px 8px 4px;}

/* 实验室落体动画 */
.lab-svg{width:min(64%,320px); height:auto; max-height:100%; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));}
.tube-label{font-family:var(--font-cn);font-size:12px;fill:var(--muted);letter-spacing:.12em;}
.tube{transition:opacity .4s;}

/* 落体动画：只播一次，两次管径对照（真空加速 / 空气收尾） */
.zone-lab .ball{animation-duration:4.6s; animation-timing-function:linear; animation-iteration-count:1; animation-fill-mode:forwards;}
.zone-lab .ball-vac{animation-name:vacFall; animation-timing-function:cubic-bezier(.3,.05,.7,.4);}
.zone-lab .ball-air{animation-name:airFall; animation-timing-function:cubic-bezier(.45,.03,.8,.55);}
@keyframes vacFall{
  0%{transform:translateY(0);} 100%{transform:translateY(196px);}
}
@keyframes airFall{
  0%{transform:translateY(0);}
  55%{transform:translateY(158px);}
  78%{transform:translateY(190px);}
  100%{transform:translateY(196px);}
}
.zone-lab .trace{stroke:var(--sand);stroke-opacity:.5;stroke-width:1.6;stroke-dasharray:3 6;fill:none;opacity:0;animation:labTraceIn .9s ease .2s 1 forwards;}
@keyframes labTraceIn{to{opacity:1;}}

/* 着陆器占位与开伞后反向点火流程动画（只播一次） */
.lander-svg{width:min(58%,300px); height:auto; max-height:100%;}

/* 反向点火：尾焰喷出→下落→触地→扬尘→熄灭（单次） */
.zone-eng .plume{transform-origin:top center; opacity:0;}
.zone-eng .lander-body{animation:engBody 5.6s cubic-bezier(.4,.05,.75,.35) 1 forwards;}
.zone-eng .leg{animation:engLeg 5.6s cubic-bezier(.4,.05,.75,.35) 1 forwards;}
.zone-eng .dust{opacity:0;}
.zone-eng .parachute-puff{opacity:0; transform-origin:top center;}

@keyframes engBody{
  0%{transform:translateY(-96px);}
  34%{transform:translateY(-96px);}
  58%{transform:translateY(-26px);}
  74%{transform:translateY(-8px);}
  84%{transform:translateY(0);}
  100%{transform:translateY(0);}
}
@keyframes engLeg{
  0%{transform:translateY(-96px);}
  34%{transform:translateY(-96px);}
  58%{transform:translateY(-26px);}
  74%{transform:translateY(-8px);}
  84%{transform:translateY(0);}
  100%{transform:translateY(0);}
}
/* 尾焰时序：下落期间点亮，触地后熄灭 */
.zone-eng .plume-l{animation:plumeL 5.6s linear 1 forwards;}
.zone-eng .plume-r{animation:plumeR 5.6s linear 1 forwards;}
@keyframes plumeL{
  0%,36%{opacity:0; transform:scaleY(.35);}
  44%{opacity:1; transform:scaleY(1);}
  74%{opacity:1; transform:scaleY(1);}
  86%{opacity:0; transform:scaleY(.5);}
  100%{opacity:0; transform:scaleY(.5);}
}
@keyframes plumeR{
  0%,36%{opacity:0; transform:scaleY(.35);}
  44%{opacity:1; transform:scaleY(1);}
  74%{opacity:1; transform:scaleY(1);}
  86%{opacity:0; transform:scaleY(.5);}
  100%{opacity:0; transform:scaleY(.5);}
}
/* 触地扬尘：84% 后出现一次 */
.zone-eng .dust{animation:dustPuff .9s ease 4.55s 1 forwards;}
@keyframes dustPuff{
  0%{opacity:0; transform:scale(.6);}
  40%{opacity:1; transform:scale(1.15);}
  100%{opacity:0; transform:scale(1.5);}
}
/* 抛离伞残影：动画后期淡出 */
.zone-eng .parachute-puff{animation:puffOut 5.6s linear 1 forwards;}
@keyframes puffOut{
  0%,30%{opacity:.9;}
  40%{opacity:.5;}
  52%{opacity:0;}
  100%{opacity:0;}
}

/* 毛玻璃按钮（frostpane .glass 覆写 + 定制） */
.zone-glass{
  margin:10px 14px 16px; position:relative; z-index:5;
  --fp-glass-border-radius:12px;
  --fp-glass-bg: rgba(197,92,43,.16);
  --fp-glass-highlight: rgba(255,220,185,.5);
  --fp-glass-blur:16px;
  transition:transform .25s;
}
.zone-eng .zone-glass{--fp-glass-bg: rgba(197,92,43,.22);}
.zone-lab .zone-glass{--fp-glass-bg: rgba(217,160,91,.16);}
.cover-zone:hover .zone-glass{transform:translateY(-1px);}

.cover-cta{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  width:100%; text-align:left;
  background:transparent; border:none; cursor:pointer; padding:14px 18px;
}
.cta-title{font-size:16px; font-weight:700; color:var(--text); letter-spacing:.02em;}
.cta-sub{font-size:12px; color:rgba(242,237,230,.72); letter-spacing:.04em;}

/* 底部 */
.cover-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 26px 16px; border-top:1px solid rgba(154,163,173,.1); flex-shrink:0; z-index:10;
}
.cover-slogan{
  font-family:var(--font-en); font-size:17px; font-weight:600; letter-spacing:.14em; color:var(--text);
}
.cover-meta{font-size:11px; color:var(--muted); letter-spacing:.03em;}


/* 共享元素转场飞行层 */
#fly-layer{position:fixed; inset:0; pointer-events:none; z-index:999; display:none;}
#fly-layer .fly-lander{position:absolute; width:220px; will-change:transform;}

/* 重播按钮 */
.replay-btn{
  position:absolute; left:10px; top:8px; z-index:8;
  font-size:10.5px; letter-spacing:.06em; color:rgba(242,237,230,.62);
  background:rgba(10,14,20,.45); border:1px solid rgba(154,163,173,.25);
  border-radius:5px; padding:4px 9px; cursor:pointer; transition:color .2s,border-color .2s;
  backdrop-filter:blur(4px);
}
.replay-btn:hover{color:var(--text); border-color:rgba(197,92,43,.55);}

/* 封面离场（物理实验侧） */
.cover-leaving{transition:opacity .15s ease; opacity:0;}

/* 轻量 toast */
#cover-toast{
  position:fixed; left:50%; bottom:64px; transform:translateX(-50%) translateY(12px);
  z-index:1200; max-width:78vw;
  background:rgba(20,27,36,.92); color:var(--text); font-size:12.5px; letter-spacing:.03em;
  border:1px solid rgba(197,92,43,.4); border-radius:8px; padding:10px 16px;
  box-shadow:0 12px 34px rgba(0,0,0,.5); opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s; backdrop-filter:blur(8px);
}
#cover-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* 减少动态效果 */

/* ===== 手机端专属 UI（桌面端隐藏） ===== */
.mobile-overlay,
.mobile-bottom-bar,
.mobile-panel-close{
  display: none;
}
@media (prefers-reduced-motion: reduce){
  .zone-lab .ball, .zone-lab .trace,
  .zone-eng .plume, .zone-eng .lander-body, .zone-eng .leg,
  .zone-eng .dust, .zone-eng .parachute-puff{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
  }
  .zone-eng .lander-body, .zone-eng .leg{transform:none !important;}
  .zone-eng .dust, .zone-eng .plume, .zone-eng .parachute-puff{opacity:0 !important;}
}

/* ============================================================
   基础实验室视图
   ============================================================ */
#lab-view {
  align-items: center; justify-content: center;
  background: radial-gradient(1200px 700px at 50% 50%, #121821 0%, var(--bg) 100%);
}
.lab-content {
  background:#0d1117; border:1px solid rgba(217,160,91,.3); border-radius:10px;
  width:100%; max-width:1120px; height:85vh; display:flex; flex-direction:column;
  box-shadow:0 25px 80px rgba(0,0,0,.6);
}
.lab-header {
  padding:16px 20px; border-bottom:1px solid rgba(217,160,91,.18);
  display:flex; justify-content:space-between; align-items:center;
}
.lab-header h3 { margin:0; color:var(--text); font-size:17px; letter-spacing:.01em; }
.lab-body {
  display:grid; grid-template-columns: 320px 1fr; gap:16px; padding:16px; flex:1; min-height:0;
}
.lab-body .left { padding-right: 8px; background: transparent; border: none; box-shadow: none; overflow-y: auto; }
.lab-canvas-box {
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; min-height:0;
}
.lab-canvas-box canvas {
  width:100%; height:100%; background:#0a0e14; border-radius:10px;
  border:1px solid rgba(154,163,173,.12); display:block;
}

/* ============================================================
   工程主界面（三栏：操作模块 / 3D 视口 / 数据中心，左右毛玻璃）
   ============================================================ */
.app{
  grid-template-columns:300px 1fr 300px; gap:12px; height:100vh; padding:12px;
  background: radial-gradient(1200px 700px at 20% 15%, #16100b 0%, var(--bg) 55%);
}
/* 活动时真正启用 grid（覆盖 .view-active 的 flex）；子项可滚动/填满 */
.app.view-active{ display:grid; }
.app.view-active > *{ min-height:0; min-width:0; }
.app-2col{ grid-template-columns:300px 1fr; }

/* 毛玻璃覆写：左右栏（frostpane .glass 语义化到工程界面） */
.mars-left, .mars-right{
  --fp-glass-bg: rgba(26,35,46,.62);
  --fp-glass-highlight: rgba(255,214,180,.16);
  --fp-glass-blur: 16px;
  --fp-glass-saturate: 130%;
  --fp-glass-brightness: 1.04;
  --fp-glass-border-radius: 12px;
  display:block !important;
  gap:0 !important;
  overflow-y:auto;
}
.mars-left .group, .mars-right .group{background:rgba(10,14,20,.38);}
.mars-right h2{font-size:17px;color:var(--text);margin:2px 0 10px;}
.mars-right .controls{margin-top:auto;padding-top:8px;}

.left{
  background:linear-gradient(180deg,var(--panel),#0c0f14);
  border:1px solid rgba(197,92,43,.18); border-radius:10px; padding:14px;
  overflow-y:auto; overflow-x:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.left::-webkit-scrollbar { width: 6px; }
.left::-webkit-scrollbar-thumb { background: rgba(197,92,43,.25); border-radius: 3px; }

/* 中间：3D 视口 */
.center{ display:flex; flex-direction:column; gap:12px; min-width:0; height:100%; }

.viewer3d{
  position:relative; flex:1; min-height:0; overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 40%, #131a24, #0d1117 70%);
  border:1px solid rgba(197,92,43,.16); border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.viewer3d canvas{display:block;outline:none;position:absolute;inset:0;}
.viewer-phase{
  position:absolute; left:14px; top:12px; z-index:3;
  font-size:12px; color:var(--sand); letter-spacing:.1em;
  background:rgba(13,17,23,.66); border:1px solid rgba(217,160,91,.32);
  border-radius:6px; padding:6px 12px; backdrop-filter:blur(8px);
  pointer-events:none;
}
.viewer-views{
  position:absolute; right:14px; top:12px; z-index:3;
  display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end;
  padding:6px; background:rgba(18,14,10,.72); border:1px solid rgba(217,160,91,.28);
  border-radius:10px; backdrop-filter:blur(12px); max-width:62%;
}
.viewer-views button{
  font:inherit; font-size:12px; color:var(--ink,#e8e6e1); cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:8px;
  padding:7px 12px; min-height:36px; transition:all .18s;
}
.viewer-views button:hover{background:rgba(217,160,91,.14);border-color:rgba(217,160,91,.35);}
.viewer-views button.active{background:linear-gradient(145deg,rgba(197,92,43,.9),rgba(217,160,91,.75));border-color:rgba(255,224,178,.5);color:#14100c;font-weight:600;}
.viewer-err{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
  max-width:70%; text-align:center; font-size:13px; line-height:1.7; color:#e0a28a;
  background:rgba(13,17,23,.85); border:1px solid rgba(217,95,95,.4); border-radius:10px;
  padding:18px 22px;
}


.right{ display:flex; flex-direction:column; gap:12px; min-width:0; height:100%; }

.header{
  background:linear-gradient(180deg,rgba(26,35,46,.96),rgba(13,17,23,.94));
  border:1px solid rgba(197,92,43,.16); border-radius:10px;
  padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.22); flex-shrink:0;
}
.title{font-size:19px;font-weight:700;letter-spacing:.02em}
.subtitle{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
.status{font-size:13px;color:var(--muted);text-align:right}
.status strong{color:var(--text)}
.topRight { display: flex; align-items: center; }

.sceneWrap{
  background:linear-gradient(180deg,var(--panel2),#0a0e14);
  border:1px solid rgba(197,92,43,.14); border-radius:10px; padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.18); min-width:0;
  display:flex; flex-direction:column; gap:12px; flex:1; min-height:0;
}

.sceneBar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; flex-shrink:0;}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:7px 10px;border-radius:6px;background:rgba(197,92,43,.08);
  border:1px solid rgba(197,92,43,.16);font-size:12px;color:#f0e4d6;
}

.canvasBox{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; flex:1; min-height:0; }
.sim-column { display: flex; flex-direction: column; gap: 12px; min-height: 0; height: 100%; }

#scene{
  flex: 1; width:100%; min-height: 300px;
  background:linear-gradient(180deg,#02040a 0%,#0a0e14 55%,#14100c 100%);
  border-radius:10px;border:1px solid rgba(154,163,173,.1); display:block;
}

.traj-box {
  flex-shrink: 0; height: 200px; background: rgba(10,14,20,.8);
  border: 1px solid rgba(197,92,43,.12); border-radius: 10px; padding: 8px;
  display: flex; flex-direction: column;
}
.traj-box h4 { margin: 0 0 6px; font-size: 13px; color: #efe3d4; font-weight: 650; }
.traj-box canvas { flex: 1; width: 100%; height: 0; border-radius: 8px; background: linear-gradient(180deg,#05080d 0%,#121821 100%); display: block; }

.charts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3, minmax(160px, 1fr));
  gap:12px; height:100%; min-height:0; overflow-y:auto; padding-right:6px;
}
.charts::-webkit-scrollbar { width: 6px; }
.charts::-webkit-scrollbar-thumb { background: rgba(197,92,43,.25); border-radius: 3px; }

.chart{ background:rgba(10,14,20,.8); border:1px solid rgba(197,92,43,.12); border-radius:10px; padding:8px; display:flex; flex-direction:column; min-height:0; }
.chart h4{ margin:0 0 6px; font-size:13px; color:#efe3d4; font-weight:650; }
.chart canvas{ width:100%; flex:1; height:0; display:block; background:linear-gradient(180deg,#0a0e14 0%,#0c1016 100%); border-radius:8px; }

/* UI 控件 */
.left h2{margin:2px 0 8px;font-size:17px;color:var(--text);}
.group{ background:rgba(154,163,173,.035); border:1px solid rgba(154,163,173,.09); border-radius:10px; padding:10px; margin-bottom:10px; }
.group-title{font-size:13px;font-weight:700;margin:0 0 8px;color:#efe3d4}
.row{ display:grid; grid-template-columns: 1fr 88px; gap:8px; align-items:center; margin-bottom:10px; }
.row:last-child{margin-bottom:0}
.label{ display:flex;justify-content:space-between;gap:8px; font-size:12px;color:#e0d6c8;margin-bottom:6px; }
.label span:last-child{color:var(--sand); font-family:var(--font-mono);}
input[type="range"]{width:100%; cursor:pointer; accent-color:var(--rust);}
input[type="number"], select{
  width:100%; border-radius:8px; border:1px solid rgba(197,92,43,.2);
  background:#0a0e14; color:var(--text); padding:9px 10px;font-size:13px;outline:none;
  font-family:var(--font-mono);
}
input[type="number"]:focus, select:focus{border-color:var(--rust);}
input[type="checkbox"]{transform:scale(1.1);accent-color:var(--rust)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
button{ border:none;border-radius:8px;padding:10px 12px;color:#fff;font-weight:650;cursor:pointer;font-size:13px; }
.btn-start{background:linear-gradient(180deg,#5d9c66,#3f7a4a)}
.btn-pause{background:linear-gradient(180deg,#5a6f87,#47586d)}
.btn-reset{background:linear-gradient(180deg,#8a5a3a,#6b4226)}
.btn-demo{background:linear-gradient(180deg,#d9a05b,#b07830)}
.btn-export{background:linear-gradient(180deg,#4a5d72,#34465a)}
/* 工程拓展（#mars-view）按钮统一火星主题：主操作铁锈红橙，次要中性深灰，辅助描边 */
#mars-view .btn-start{background:linear-gradient(180deg,#e06a3e,#c14e28);box-shadow:0 2px 10px rgba(193,78,40,.35);}
#mars-view .btn-pause{background:linear-gradient(180deg,#5d5853,#45403b);}
#mars-view .btn-reset{background:linear-gradient(180deg,#4a4641,#33302b);}
#mars-view .btn-demo{background:rgba(217,160,91,.12);border:1px solid rgba(217,160,91,.65);color:#e8b46d;box-shadow:none;}
#mars-view .btn-export{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);box-shadow:none;}
#mars-view .btn-start:hover{filter:brightness(1.08);}
.mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}

.stat{ background:rgba(197,92,43,.05); border:1px solid rgba(197,92,43,.1); border-radius:10px;padding:8px 10px; }
.stat .k{font-size:11px;color:var(--muted)}
.stat .v{font-size:16px;font-weight:700;margin-top:2px;font-family:var(--font-mono)}

.footerHint{font-size:12px;color:var(--muted);margin-top:8px}
.phaseTag{ font-size:12px;padding:6px 10px;border-radius:6px;background:rgba(111,191,115,.12);border:1px solid rgba(111,191,115,.18) }
.bottom-notes { margin-top:auto; padding-top:15px; font-size:11.5px; color:rgba(154,163,173,.5); line-height:1.6; text-align:left; background:transparent; }
.btn-return { background:rgba(154,163,173,.1); border:1px solid rgba(154,163,173,.22); font-size:12px; padding:6px 12px; transition:.2s; }
.btn-return:hover { background:rgba(154,163,173,.2); }

/* ============================================================
   数据中心页：全程遥测 + 气动衍生图谱
   ============================================================ */
.dc-section{ margin-bottom:14px; }
.dc-section-title{
  font-size:13px; font-weight:700; color:#efe3d4; margin:0 0 8px;
  padding-left:8px; border-left:3px solid var(--rust);
}
.dc-grid{ display:grid; gap:10px; }
.dc-grid-tele{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.dc-grid-tele .chart:first-child{ grid-row:span 2; }
.dc-grid-deriv{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.dc-grid-adv{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.dc-grid .chart{ min-height:170px; }
.chart-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.chart-head span{ font-style:italic; font-size:11px; color:rgba(154,163,173,.6); white-space:nowrap; }
.chart-head h4{ margin:0; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px){
  .cover-stage{grid-template-columns:1fr 1.25fr; gap:14px; padding:16px 18px 12px;}
  .cover-foot{flex-direction:column; align-items:flex-start; gap:6px; padding:10px 18px 14px;}
  /* 三栏在 <1024 即切单栏（原断点 820 太窄，829px 会拥挤） */
  .app{grid-template-columns:1fr; grid-template-rows:auto auto auto; height:auto; min-height:100vh; padding:10px;}
  .app .mars-left{max-height:44vh;}
  .center{height:62vh;min-height:420px;}
  .viewer3d{min-height:400px;}
  .dc-grid-tele,.dc-grid-deriv,.dc-grid-adv{grid-template-columns:1fr;}
  .header{flex-wrap:wrap;}
}

@media (max-width: 820px){
  #cover-view{overflow-y:auto;}
  .cover-stage{grid-template-columns:1fr; grid-template-rows:auto auto; gap:14px; padding:16px 16px 12px;}
  .cover-zone{min-height:300px;}
  .cover-topbar{padding:12px 16px;}
  .brand-name{max-width:52vw;}
  .cover-actions .cover-link{padding:12px 12px; font-size:13px; min-height:44px;}
  .replay-btn{padding:10px 12px; min-height:44px; font-size:11.5px;}
  .cover-slogan{font-size:15px;}
  .cover-meta{font-size:10px;}
  .cta-sub{font-size:12px;}


  .app{grid-template-columns:1fr; grid-template-rows:auto auto auto; height:auto; min-height:100vh; padding:10px;}
  .app .mars-left{max-height:44vh;}
  .center{height:62vh;min-height:420px;}
  .viewer3d{min-height:400px;}
  .mars-right{max-height:none;}
  .dc-grid-tele{grid-template-columns:1fr;}
  .dc-grid-tele .chart:first-child{grid-row:auto;}
  .dc-grid-deriv{grid-template-columns:1fr;}
  .dc-grid-adv{grid-template-columns:1fr;}
  .lab-body{grid-template-columns:1fr;}
  .lab-canvas-box{grid-template-columns:1fr 1fr;}
  .header{flex-wrap:wrap;}
}

@media (max-width: 520px){
  .cover-stage{padding:10px 10px 8px;}
  .cover-zone{min-height:250px;}
  .zone-glass{margin:8px 10px 12px;}
  .cta-title{font-size:14px;}
  .cta-sub{font-size:11px;}
  .lab-canvas-box{grid-template-columns:1fr;}
  .brand-name{display:none;}
  .cover-actions{gap:2px;}
}

/* ============================================================
   视觉统一 v2 · 对齐封面页（暖黑毛玻璃 + 火星橙黄光晕）
   ============================================================ */
:root{
  --bg:#0c0a08;
  --panel:#161310;
  --panel2:#1b1713;
}
.app{
  background:
    radial-gradient(1100px 650px at 82% 6%, rgba(197,92,43,.13) 0%, rgba(197,92,43,0) 56%),
    radial-gradient(900px 600px at 10% 94%, rgba(217,160,91,.09) 0%, rgba(217,160,91,0) 60%),
    linear-gradient(160deg,#0a0807 0%,#0c0a08 50%,#100b08 100%);
}

/* 毛玻璃左右栏：暖黑 + 细浅色边框 */
.mars-left,.mars-right{
  --fp-glass-bg: rgba(20,17,14,.66);
  --fp-glass-highlight: rgba(255,235,210,.13);
  --fp-glass-blur:18px;
  --fp-glass-saturate:125%;
  --fp-glass-brightness:1.03;
  border:1px solid rgba(255,255,255,.07);
}
.mars-left .group,.mars-right .group{
  background:rgba(255,220,180,.045);
  border:1px solid rgba(255,255,255,.05);
}

/* 顶部 / 场景 / 视口容器统一 */
.header{
  background:linear-gradient(180deg,rgba(28,23,18,.9),rgba(16,13,10,.9));
  border:1px solid rgba(255,255,255,.07);
}
.sceneWrap{
  background:linear-gradient(180deg,rgba(24,20,16,.5),rgba(14,11,9,.5));
  border:1px solid rgba(255,255,255,.06);
}
.viewer3d{
  background:radial-gradient(120% 120% at 50% 35%,#1a1510,#0c0a08 72%);
  border:1px solid rgba(255,255,255,.07);
}

/* 数据中心左栏：毛玻璃化（覆盖 .left 渐变） */
#data-view > .left{
  background:rgba(20,17,14,.66);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  border:1px solid rgba(255,255,255,.07);
}
/* 数据中心图表卡片 */
.dc-section .chart{
  background:rgba(20,17,14,.55);
  border:1px solid rgba(255,255,255,.06);
}

/* 按钮：封面页深色半透明风格 */
.btn-return{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#f0e8df; border-radius:9px;
}
.btn-return:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);}

/* ============================================================
   手机窄屏适配（<=480px）· 电脑端优先，手机端为辅
   目标：390px 宽度下可读、可点、无意外横向溢出
   ============================================================ */
@media (max-width: 480px){
  /* 全局按钮触控高度 >= 44px */
  button, .btn-start, .btn-pause, .btn-reset, .btn-demo, .btn-export, .btn-return{
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* 工程界面：单栏堆叠，降低各区块高度避免页面过长 */
  .app{
    padding: 8px;
    gap: 8px;
  }
  .app .mars-left{
    max-height: none;
  }
  .center{
    height: auto;
    min-height: 0;
    gap: 8px;
  }
  .viewer3d{
    min-height: 320px;
    height: 48vh;
    flex: none;
  }

  /* 顶部 header：允许换行，缩小标题 */
  .header{
    padding: 10px 12px;
    gap: 8px;
  }
  .title{
    font-size: 15px;
  }
  .subtitle{
    font-size: 11px;
  }
  .topRight{
    width: 100%;
    justify-content: space-between;
  }
  .status{
    font-size: 12px;
    text-align: left;
  }

  /* 3D 视角按钮：移到视口底部，宽度更大，避免遮挡画面 */
  .viewer-views{
    position: absolute;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    max-width: none;
    justify-content: center;
    padding: 5px;
  }
  .viewer-views button{
    padding: 6px 10px;
    font-size: 11px;
    min-height: 36px;
  }
  .viewer-phase{
    left: 10px;
    top: 10px;
    font-size: 11px;
    padding: 5px 10px;
  }

  /* 参数行：number 输入框略缩窄，给滑块更多空间 */
  .row{
    grid-template-columns: 1fr 76px;
    gap: 6px;
  }
  input[type="number"], select{
    padding: 8px;
    font-size: 12px;
  }

  /* 数据中心 stat 网格：保持两列，但缩小内边距 */
  .mini{
    gap: 6px;
  }
  .stat{
    padding: 7px 8px;
  }
  .stat .v{
    font-size: 14px;
  }

  /* 左栏操作按钮：全宽排列 */
  .sidebar-actions .controls{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sidebar-actions .controls button{
    width: 100%;
  }

  /* 实验室：canvas 单列，高度适中 */
  .lab-canvas-box{
    height: auto;
    min-height: 0;
    gap: 10px;
  }
  .lab-canvas-box canvas{
    height: 280px;
  }
  .lab-body{
    padding: 10px;
    gap: 10px;
  }
  .lab-header{
    padding: 12px 14px;
  }
  .lab-header h3{
    font-size: 14px;
  }

  /* 封面：紧凑布局，减小卡片高度让"进入"按钮可见 */
  .tw-cover-head .sub{
    font-size: 13px;
  }
  .tw-glass-panel h2{
    font-size: 16px;
  }
  .tw-cover{
    gap: 12px;
    padding: 0 12px;
  }
  .tw-cover-side{
    min-height: 320px !important;
  }
  .tw-cover-side .stage{
    max-height: 200px;
  }
  .tw-cover-side video{
    max-height: 200px;
    object-fit: cover;
  }
  .tw-cover-shell{
    padding-top: 10px;
  }

  /* 数据中心页：左右栏全宽 */
  .app-2col{
    grid-template-columns: 1fr;
  }
  .app-2col > .left{
    width: 100% !important;
  }
  .charts{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
}
/* ===== 手机端工程页：全屏 3D + 抽屉面板 ===== */
@media (max-width: 520px){
  /* 工程视图：全屏，无 padding */
  #mars-view.app{
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
  }

  /* 中间 3D 区域占满全屏 */
  #mars-view .center{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100% !important;
    width: 100%;
    z-index: 1;
    gap: 0;
  }
  #mars-view .sceneWrap{
    flex: 1;
    height: 100%;
  }
  #mars-view .viewer3d{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* 隐藏顶部标题栏（手机端不需要） */
  #mars-view .header{
    display: none !important;
  }
  #mars-view .sceneBar{
    display: none !important;
  }

  /* 左面板：从左边滑出的抽屉 */
  #mars-view .mars-left{
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 85vw;
    max-width: 340px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    margin: 0;
    border-radius: 0;
  }
  #mars-view.left-open .mars-left{
    transform: translateX(0);
  }

  /* 右面板：从右边滑出的抽屉 */
  #mars-view .mars-right{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 85vw;
    max-width: 340px;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    margin: 0;
    border-radius: 0;
  }
  #mars-view.right-open .mars-right{
    transform: translateX(0);
  }

  /* 遮罩层 */
  .mobile-overlay{
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  #mars-view.left-open .mobile-overlay,
  #mars-view.right-open .mobile-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* 底部工具栏 */
  .mobile-bottom-bar{
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 800;
    background: rgba(20, 12, 8, 0.85);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(224,162,74,0.2);
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .mbb-btn{
    flex: 1;
    min-height: 46px;
    border: 1px solid rgba(224,162,74,0.3);
    background: rgba(224,162,74,0.08);
    color: #e0a28a;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
  }
  .mbb-btn.mbb-primary{
    background: linear-gradient(135deg, #c85a2a, #e07a3a);
    border-color: #e07a3a;
    color: #fff;
  }

  /* 面板关闭按钮 */
  .mobile-panel-close{
    display: none;
    position: fixed;
    top: 10px; left: calc(85vw - 40px);
    z-index: 1100;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    border: none;
    align-items: center;
    justify-content: center;
  }
  .mobile-panel-close.mobile-close-right{
    left: auto;
    right: calc(85vw - 40px);
  }
  #mars-view.left-open #mobileCloseLeft{
    display: flex;
  }
  #mars-view.right-open #mobileCloseRight{
    display: flex;
  }

  /* 3D 视角按钮：浮在底部工具栏上方 */
  .viewer-views{
    bottom: 70px !important;
  }
  .viewer-views button{
    padding: 5px 8px;
    font-size: 10px;
    min-height: 32px;
  }

  /* 面板内部：确保内容可滚动 */
  .mars-left .sidebar-scroll,
  .mars-right{
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-actions{
    position: sticky;
    bottom: 0;
    background: rgba(20,12,8,0.95);
    padding: 10px;
  }
}