/**
 * theme.css — 全局暖调统一层（补丁层，不改动原有 styles.css）
 * ------------------------------------------------------------------
 * 背景：原工程界面（三栏主控台 / 数据中心）沿用了冷色调令牌
 *   --bg:#0d1117  --space:#0a0e14  --panel:#141b24  --line:#2a3542  --muted:#9aa3ad
 * 而封面页与三维场景是火星锈红／砂岩暖色，两套色系不一致。
 * 用户确认："可以统一全局配色，暖调挺好的" → 把剩余冷色令牌整体暖化，
 * 与封面、三维场景归入同一体系（氧化铁红 + 砂岩褐）。
 *
 * 用法：在 styles.css 之后加载即可（同特异性、后者胜出）。
 */
:root {
  /* 底与面板：暖黑褐，替换原冷灰蓝 */
  --bg: #100c0a;
  --space: #0b0806;
  --panel: #1a1512;
  --panel2: #221b16;

  /* 文字：暖白 / 砂灰，替换原冷灰 */
  --text: #f2e9de;
  --muted: #b09b86;

  /* 边线：棕调，替换原蓝调 #2a3542 */
  --line: #3a2e25;

  /* 主色系保持（已是暖色），仅微调以统一 */
  --rust: #c55c2b;
  --rust-deep: #8a3a1a;
  --sand: #d9a05b;
  --dust: #a98a6a;

  /* 毛玻璃层同步暖化（原 rgba(26,35,46,.62) 偏蓝） */
  --fp-glass-bg: rgba(197, 92, 43, .14);
  --fp-glass-highlight: rgba(255, 214, 180, .55);
  --fp-content-text: #f6efe6;
  --fp-content-text-secondary: rgba(246, 239, 230, .85);
  --fp-content-text-muted: rgba(16, 12, 10, .72);
}

/* 左右毛玻璃栏：原来是蓝色玻璃，改为暖锈玻璃 */
.mars-left,
.mars-right {
  --fp-glass-bg: rgba(38, 28, 22, .62);
  --fp-glass-highlight: rgba(255, 214, 180, .22);
}

/* 面板内分组底色：原 rgba(10,14,20,.38) 偏蓝 → 暖褐 */
.mars-left .group,
.mars-right .group {
  background: rgba(30, 22, 17, .42);
}

/* 画布底色：原 #0a0e14 冷黑 → 暖黑 */
.lab-canvas-box canvas {
  background: #0f0b08;
  border-color: rgba(176, 155, 134, .14);
}

/* 通用细边框与分隔：统一为暖棕 */
hr,
.sep,
.divider {
  border-color: var(--line);
}

/* ============================================================
   收尾修复：布局、滚动与技术面板排版
   本层只处理已审查到的可达性问题，不改变封面结构、视频或模型资产。
   ============================================================ */

/* 顶栏仅属于封面。以类选择器控制，避免工程视图留下固定占位。 */
.tw-topbar { display: none; }
.cover-on .tw-topbar { display: flex; }

/*
  基础实验：Canvas 的 intrinsic 600px 高度曾参与自动网格行的最小尺寸，
  继而把 85vh 面板撑出视口。固定可用轨道并让左侧参数列独立滚动。
*/
.lab-content {
  width: min(1120px, calc(100vw - 32px));
  height: min(85vh, calc(100vh - 32px));
  min-height: 0;
  overflow: hidden;
}

.lab-body {
  min-height: 0;
  overflow: hidden;
}

.lab-canvas-box {
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.lab-canvas-box canvas {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
}

/* 工程三栏：中栏可以收缩；参数与遥测超过可用高度时在各自侧栏滚动。 */
.app > * {
  min-width: 0;
  min-height: 0;
}

.header,
.topRight,
.viewer-views {
  min-width: 0;
}

.topRight {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.topRight .btn-return {
  margin-right: 0 !important;
  white-space: nowrap;
}

.viewer-views {
  max-width: calc(100% - 28px);
}

@media (min-width: 1025px) {
  .app:not(.app-2col) {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 300px);
    overflow: hidden;
  }

  .app:not(.app-2col) > .mars-left,
  .app:not(.app-2col) > .mars-right {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 单栏模式由工作区承接滚动，避免 html/body 的全局 overflow:hidden 阻断访问。 */
@media (max-width: 1024px) {
  .app.view-active {
    height: 100vh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
  }
}

@media (max-width: 820px) {
  .lab-content {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
  }

  .lab-body { overflow: visible; }

  .lab-canvas-box {
    height: 440px;
    min-height: 440px;
  }
}

/* 图表和数值采用同一暖黑内嵌面，避免冷蓝底色与单位换行造成阅读断裂。 */
.chart,
.traj-box {
  background: rgba(31, 23, 17, .82);
  border-color: rgba(217, 160, 91, .16);
}

.chart canvas,
.traj-box canvas {
  background: linear-gradient(180deg, #120e0b 0%, #1b120d 100%);
}

.chart h4,
.traj-box h4,
.dc-section-title,
.group-title {
  color: #f2e9de;
}

.chart-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.chart-head span {
  white-space: normal;
  line-height: 1.35;
  color: rgba(217, 196, 170, .78);
}

.stat .v,
.label span:last-child,
input[type="number"],
select,
.chart-head span {
  font-variant-numeric: tabular-nums;
}

.stat .v {
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.02em;
  white-space: nowrap;
}

button.btn-start,
button.btn-pause,
button.btn-reset,
button.btn-demo,
button.btn-export,
button.btn-return {
  min-height: 36px;
  line-height: 1.2;
  border-radius: 8px;
}

button.btn-pause,
button.btn-export {
  background: linear-gradient(180deg, #5a4a3e, #40332c);
}

button.btn-reset {
  background: linear-gradient(180deg, #76503a, #523526);
}

/* Keep the glass shell stationary; only its parameter content scrolls. */
.app:not(.app-2col) > .mars-left {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
}
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 14px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(197,92,43,.45) transparent;
}
.sidebar-actions {
  flex: 0 0 auto;
  width: 100%;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,225,193,.1);
  background: rgba(33,24,19,.42);
}
.sidebar-actions .controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
  margin: 0;
}
.sidebar-actions button { grid-column: span 2; padding-inline: 4px; min-height: 38px; }
.sidebar-actions .btn-demo, .sidebar-actions .btn-export { grid-column: span 3; }
@media (max-width: 1024px) {
  .app:not(.app-2col) > .mars-left { height: 420px; max-height: 55vh; min-height: 340px; }
}