/* ============================================================
 * 三川易亨数字孪生 · 深色科技风样式
 * 主色：青 #00e5ff；热 #ff5252；冷 #448aff；钱 #ffd740
 * 字体：系统栈（严禁外部字体 CDN）
 * ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a0f1a;
  --bg2: #101828;
  --bg3: #16202f;
  --line: #22314a;
  --txt: #d7e3f4;
  --txt-dim: #7d8da6;
  --cyan: #00e5ff;
  --hot: #ff5252;
  --cold: #448aff;
  --gold: #ffd740;
  --green: #39d97e;
  --red: #ff5252;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  overflow-x: hidden;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;              /* 首屏精确分配高度，屏外内容下滚 */
}

/* ---------- 顶部标题栏 ---------- */
#topbar {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: linear-gradient(90deg, #0d1526, #101c33 60%, #0d1526);
  border-bottom: 1px solid var(--line);
}
#topbar .title { display: flex; align-items: baseline; gap: 10px; }
#topbar .logo { color: var(--cyan); font-size: 18px; text-shadow: 0 0 8px var(--cyan); }
#topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: 1px; }
#topbar .subtitle { color: var(--txt-dim); font-size: 12px; }
.scheme-now { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cyan); }
.badge-rec {
  background: linear-gradient(90deg, #ffd740, #ffab00);
  color: #3a2c00; font-weight: 700; font-size: 12px;
  padding: 2px 8px; border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 215, 64, .5);
}

/* ---------- 首屏主区（66% 屏高）：3D 画布（60%宽）+ 右侧联动数据列 ---------- */
#stage {
  flex: 0 0 66%;
  min-height: 0;
  display: flex;
}
#viewport-wrap { flex: 0 0 60%; position: relative; border-right: 1px solid var(--line); min-width: 0; }
#viewport { width: 100%; height: 100%; }
#viewport canvas { display: block; }

/* 3D 画布左上浮动操作工具条（楼宇/季节/工况） */
#vpTools {
  position: absolute; top: 8px; left: 8px; z-index: 8;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: rgba(8, 16, 30, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 229, 255, .3);
  border-radius: 8px;
  padding: 4px 8px;
}
#vpTools button { font-size: 11px !important; padding: 2px 8px !important; }

/* 右侧联动数据列（实时工况 + 钱流仪表，首屏常驻、精确分配高度） */
#hud {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  background: rgba(13, 20, 36, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#hud .card { margin-bottom: 0; flex: 0 0 auto; }
#hud .card.glow-card { flex: 1 1 auto; min-height: 0; }

/* ---------- 首屏联动图表横排条（四张联动小图） ---------- */
#live-charts {
  flex: 1 1 auto;
  min-height: 170px;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg2);
  border-top: 1px solid var(--line);
}
#live-charts .chart-box { flex: 1 1 0; min-width: 0; }
#live-charts .chart-box canvas { width: 100%; height: calc(100% - 22px); min-height: 0; display: block; }

/* ---------- 屏外下滚内容 ---------- */
#below {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--bg2);
}
#below-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 12px;
}
@media (max-width: 1100px) {
  #below-cards { grid-template-columns: 1fr; }
}
.chart-card canvas { width: 100%; height: 220px; display: block; }
.below-footer {
  padding: 10px 14px 16px;
  color: var(--txt-dim); font-size: 12px; line-height: 1.8;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

#panel {
  background: rgba(13, 20, 36, .82);
}
#panel::-webkit-scrollbar { width: 6px; }
#panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.card-title {
  font-size: 13px; font-weight: 600; color: var(--cyan);
  margin-bottom: 8px; letter-spacing: 1px;
}
.card-title.foldable { cursor: pointer; user-select: none; }
.unit-hint { color: var(--txt-dim); font-weight: 400; font-size: 11px; }

/* ---------- 方案卡片 ---------- */
.scheme-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.scheme-item:hover { border-color: var(--cyan); }
.scheme-item.on { border-color: var(--cyan); background: rgba(0, 229, 255, .07); box-shadow: 0 0 8px rgba(0,229,255,.15) inset; }
.scheme-item .s-head { display: flex; align-items: center; gap: 6px; }
.scheme-item .s-id { font-weight: 700; color: var(--cyan); }
.scheme-item .s-name { flex: 1; font-size: 12px; }
.scheme-item .s-badge { color: #3a2c00; background: var(--gold); border-radius: 8px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
.scheme-item .s-badge.gray { background: #5a6a82; color: #dfe8f5; }
.scheme-item .s-nums { display: flex; gap: 12px; margin-top: 5px; color: var(--txt-dim); font-size: 11px; }
.scheme-item .s-nums b { color: var(--txt); font-weight: 600; }
.scheme-item .s-nums .pb-good { color: var(--green); font-weight: 700; }

/* ---------- 控件 ---------- */
.ctl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ctl-label { width: 34px; color: var(--txt-dim); flex: none; }
.btn-group { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-group button, .toggle, .wide-btn {
  background: #0d1626;
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.btn-group button:hover, .toggle:hover, .wide-btn:hover { border-color: var(--cyan); }
.btn-group button.on { background: rgba(0,229,255,.15); border-color: var(--cyan); color: var(--cyan); }
.toggle.warn { background: rgba(255,82,82,.15); border-color: var(--hot); color: var(--hot); }
.wide-btn { width: 100%; }

/* ---------- 工况表 ---------- */
#statusTable { width: 100%; border-collapse: collapse; }
#statusTable td { padding: 4px 4px; border-bottom: 1px solid rgba(34,49,74,.6); vertical-align: middle; }
#statusTable td:first-child { color: var(--txt-dim); width: 96px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 9px; font-weight: 700; color: #0a0f1a; }
.strategy { color: var(--cyan); font-size: 12px; line-height: 1.5; }
.soc-bar {
  display: inline-block; width: 90px; height: 10px;
  background: #0d1626; border: 1px solid var(--line); border-radius: 5px;
  overflow: hidden; margin-right: 6px; vertical-align: middle;
}
#stSocFill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cold), var(--hot)); transition: width .3s; }

/* ---------- 钱流仪表 ---------- */
.money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.money-item { background: #0d1626; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.m-label { color: var(--txt-dim); font-size: 11px; }
.m-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 1px; }
.m-value.cost { color: var(--hot); }
.m-value.income { color: var(--green); }
.m-value.profit { color: var(--gold); }
.m-unit { color: var(--txt-dim); font-size: 10px; }
.saving {
  margin-top: 8px; text-align: center; font-size: 16px; font-weight: 700;
  color: var(--green); background: rgba(57,217,126,.1);
  border: 1px solid rgba(57,217,126,.4); border-radius: 6px; padding: 6px;
  text-shadow: 0 0 12px rgba(57,217,126,.6);
}
.saving.negative { color: var(--hot); border-color: rgba(255,82,82,.4); background: rgba(255,82,82,.08); text-shadow: none; }

/* ---------- 推荐结论 ---------- */
#recBody h3 { color: var(--gold); font-size: 13px; margin-bottom: 6px; }
#recBody ul { list-style: none; margin-bottom: 8px; }
#recBody li { padding: 3px 0 3px 16px; position: relative; line-height: 1.5; color: var(--txt); font-size: 12px; }
#recBody li::before { content: '▸'; position: absolute; left: 0; color: var(--cyan); }
#recBody li.dead { color: #ffb1b1; }
#recBody li.dead::before { content: '⚠'; color: var(--hot); }

/* ---------- 图表盒通用样式 ---------- */
.chart-box {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.chart-title { color: var(--cyan); font-size: 11.5px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-box canvas { flex: 1; width: 100%; min-height: 0; }

/* ---------- 浮动元素 ---------- */
#tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(10, 18, 32, .92);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.6;
  max-width: 260px;
  z-index: 10;
  box-shadow: 0 0 14px rgba(0,229,255,.3);
}
#tooltip .tt-name { color: var(--cyan); font-weight: 700; margin-bottom: 2px; }
#tooltip .tt-row { color: var(--txt); }
#tooltip .tt-row b { color: var(--gold); font-weight: 600; }
.hidden { display: none !important; }

#season-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(10,18,32,.85); border: 1px solid var(--gold);
  color: var(--gold); border-radius: 6px; padding: 6px 14px; z-index: 9; font-size: 13px;
}
#season-end {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(10,18,32,.95); border: 1px solid var(--cyan);
  border-radius: 10px; padding: 18px 26px; z-index: 11; text-align: center;
  box-shadow: 0 0 30px rgba(0,229,255,.35); line-height: 1.9; font-size: 14px;
}
#season-end .se-title { color: var(--cyan); font-size: 16px; font-weight: 700; }
#season-end button {
  margin-top: 8px; background: rgba(0,229,255,.15); color: var(--cyan);
  border: 1px solid var(--cyan); border-radius: 5px; padding: 4px 16px; cursor: pointer; font-family: inherit;
}

/* ============================================================
 * 炫酷升级追加样式：毛玻璃 / 发光 / 开场 / 电影模式 / 全年收益结构
 * ============================================================ */

/* ---------- 开场动画遮罩 ---------- */
#intro {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at center, #0d1830 0%, #05080f 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  opacity: 1; transition: opacity 1.2s ease;
  pointer-events: none;
}
#intro.fade { opacity: 0; }
#intro .intro-title {
  font-size: 42px; font-weight: 700; letter-spacing: 6px; color: #eaf4ff;
  text-shadow: 0 0 24px #00e5ff, 0 0 60px rgba(0,229,255,.5);
  animation: introIn 1.4s ease both;
}
#intro .intro-sub {
  font-size: 15px; color: #7d8da6; letter-spacing: 3px;
  animation: introIn 1.4s .3s ease both;
}
@keyframes introIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 毛玻璃面板 + 发光卡片 ---------- */
#panel {
  background: rgba(13, 20, 36, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card {
  background: rgba(18, 28, 48, .66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.glow-card {
  border-color: rgba(0, 229, 255, .45);
  box-shadow: 0 0 14px rgba(0, 229, 255, .12), inset 0 0 18px rgba(0, 229, 255, .04);
}

/* ---------- 顶栏电影模式按钮 ---------- */
#cineBtn {
  background: rgba(0, 229, 255, .1);
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, .5);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
#cineBtn:hover { background: rgba(0, 229, 255, .22); box-shadow: 0 0 12px rgba(0,229,255,.4); }

/* ---------- 当前方案卡 ---------- */
.sc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sc-head .s-id { font-size: 18px; font-weight: 800; color: var(--cyan); text-shadow: 0 0 10px rgba(0,229,255,.6); }
.sc-head .s-name { flex: 1; font-size: 13px; font-weight: 600; }
.sc-head .s-badge {
  color: #3a2c00; background: linear-gradient(90deg, #ffd740, #ffab00);
  border-radius: 9px; padding: 2px 8px; font-size: 11px; font-weight: 700;
  box-shadow: 0 0 10px rgba(255,215,64,.5);
}
.s-nums { display: flex; gap: 14px; color: var(--txt-dim); font-size: 12px; margin-bottom: 6px; }
.s-nums b { color: var(--txt); }
.s-nums .pb-good { color: var(--green); font-weight: 700; }
.s-desc { font-size: 11.5px; line-height: 1.6; color: var(--txt-dim); margin-bottom: 6px; }
.s-baseline {
  font-size: 11px; color: #b8c6dc;
  border-top: 1px dashed var(--line); padding-top: 6px; line-height: 1.5;
}

/* ---------- 全年收益结构（供暖 / 供冷净收益构成） ---------- */
.yv-stack {
  display: flex; height: 26px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); margin-bottom: 8px;
}
.yv-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #06101f;
  white-space: nowrap; overflow: hidden;
}
.yv-seg.heat { background: linear-gradient(90deg, #e8a13a, #ffc35c); }

.yv-seg.ops { background: linear-gradient(90deg, #7d8da6, #9fb0c8); }
.yv-legend .dot.ops { background: #8b9cb5; }
.yv-seg.cool { background: linear-gradient(90deg, #2ea44f, #39d97e); box-shadow: 0 0 10px rgba(57,217,126,.45); }
.yv-legend {
  display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: center;
  font-size: 11.5px; color: var(--txt); margin-bottom: 6px;
}
.yv-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.yv-legend .dot.heat { background: #e8a13a; }
.yv-legend .dot.cool { background: #39d97e; }
.yv-total { margin-left: auto; color: var(--txt-dim); }
.yv-total b { color: var(--green); font-size: 13px; }
.yv-note { font-size: 11px; color: var(--txt-dim); line-height: 1.6; border-top: 1px dashed var(--line); padding-top: 6px; }

/* ---------- 工况表新增行 ---------- */
.balance { font-size: 11px; color: var(--green); line-height: 1.5; }

/* ---------- 图表注释 ---------- */
.cost-note {
  font-size: 10px; color: var(--txt-dim); line-height: 1.4;
  padding: 1px 2px 0; flex: none;
  max-height: 28px; overflow: hidden;
}

/* ---------- 电影模式 ---------- */
body.cinematic #hud, body.cinematic #live-charts, body.cinematic #below { display: none; }
body.cinematic #stage { flex: 1 1 auto; }
body.cinematic #viewport-wrap { flex: 1 1 100%; border-right: none; }

/* ---------- 低高度屏幕压缩（1366×768 首屏同见 工况+钱流+四图） ---------- */
@media (max-height: 820px) {
  .card { padding: 6px 9px; margin-bottom: 0; }
  .card-title { margin-bottom: 4px; font-size: 11.5px; }
  #statusTable td { padding: 1.5px 4px; font-size: 10.5px; }
  #statusTable .strategy, #statusTable .balance { font-size: 10px; line-height: 1.35; }
  .soc-bar { width: 64px; height: 8px; }
  .chip { padding: 0 6px; }
  .money-grid { gap: 4px; }
  .money-item { padding: 3px 7px; }
  .m-label { font-size: 10px; }
  .m-value { font-size: 13px; margin: 0; }
  .saving { font-size: 11px; padding: 3px; margin-top: 5px; }
  .ctl-row { margin-bottom: 5px; }
  #hud { gap: 6px; padding: 6px; }
  #live-charts { min-height: 160px; }
}

/* ---------- tooltip 发光卡片 ---------- */
#tooltip {
  background: rgba(8, 18, 36, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 229, 255, .8);
  box-shadow: 0 0 18px rgba(0, 229, 255, .45), inset 0 0 12px rgba(0, 229, 255, .08);
  border-radius: 8px;
}

/* ============================================================
 * 全方案恢复追加样式：方案详情覆盖层 / 对比总览 / 详情按钮
 * ============================================================ */

/* ---------- 覆盖层 ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 8, 16, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
#overlayCard {
  width: min(1180px, 92vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: rgba(13, 22, 40, .95);
  border: 1px solid rgba(0, 229, 255, .5);
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(0, 229, 255, .25);
  overflow: hidden;
}
#overlayHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(0,229,255,.08), transparent);
}
#overlayTitle { font-size: 17px; font-weight: 700; color: var(--cyan); letter-spacing: 1px; }
#overlayClose {
  background: rgba(255,82,82,.12); color: #ffb1b1;
  border: 1px solid rgba(255,82,82,.5); border-radius: 6px;
  padding: 4px 14px; cursor: pointer; font-family: inherit; font-size: 12px;
}
#overlayClose:hover { background: rgba(255,82,82,.25); }
#overlayBody { overflow-y: auto; padding: 16px 18px 22px; }
#overlayBody::-webkit-scrollbar { width: 6px; }
#overlayBody::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ---------- 详情表格 ---------- */
.dt-desc { font-size: 13px; line-height: 1.7; color: var(--txt); margin-bottom: 6px; }
.dt-note { font-size: 11.5px; color: var(--gold); line-height: 1.6; margin: 4px 0; }
.dt-sec {
  font-size: 14px; font-weight: 700; color: var(--cyan);
  margin: 18px 0 8px; padding-left: 10px;
  border-left: 3px solid var(--cyan);
  text-shadow: 0 0 10px rgba(0,229,255,.4);
}
.dt-title { font-size: 12.5px; font-weight: 600; color: #9fc0e8; margin: 10px 0 5px; }
.dt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
table.dt { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
table.dt th {
  text-align: left; color: var(--cyan); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid rgba(0,229,255,.35);
  background: rgba(0,229,255,.05);
}
table.dt td { padding: 5px 8px; border-bottom: 1px solid rgba(34,49,74,.55); vertical-align: top; line-height: 1.5; }
table.dt tr:hover td { background: rgba(0,229,255,.04); }
.dt-list { margin: 4px 0 4px 20px; font-size: 12.5px; line-height: 1.8; color: var(--txt); }
.dt-list li::marker { color: var(--cyan); }

/* ---------- 对比总览表 ---------- */
.ov-table td:first-child { color: var(--cyan); font-weight: 600; white-space: nowrap; }
.ov-table th:nth-child(2), .ov-table td:nth-child(2) {
  background: rgba(0,229,255,.07);
  box-shadow: inset 1px 0 0 rgba(0,229,255,.25), inset -1px 0 0 rgba(0,229,255,.25);
}

/* ---------- 按钮 ---------- */
.detail-btn {
  margin-left: auto; flex: none;
  background: rgba(0,229,255,.1); color: var(--cyan);
  border: 1px solid rgba(0,229,255,.45); border-radius: 5px;
  padding: 2px 10px; font-size: 11px; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.detail-btn:hover { background: rgba(0,229,255,.22); box-shadow: 0 0 8px rgba(0,229,255,.35); }
.mini-btn {
  float: right;
  background: rgba(255,215,64,.1); color: var(--gold);
  border: 1px solid rgba(255,215,64,.45); border-radius: 5px;
  padding: 2px 10px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 400;
}
.mini-btn:hover { background: rgba(255,215,64,.22); box-shadow: 0 0 8px rgba(255,215,64,.3); }

/* ---------- 方案卡片（恢复 v1 样式补充） ---------- */
.scheme-item .s-nums { align-items: center; }

/* ============================================================
 * 真实气象驱动 · 方案模拟运行验证页（validate.html）样式
 * ============================================================ */

body.vpage { overflow: auto; }
#vmain { padding: 12px 16px 30px; max-width: 1560px; margin: 0 auto; }

.badge-src {
  background: rgba(0, 229, 255, .1);
  border: 1px solid rgba(0, 229, 255, .45);
  color: var(--cyan); border-radius: 10px; padding: 3px 10px; font-size: 12px;
}
.nav-link {
  color: var(--gold); text-decoration: none; font-size: 13px;
  border: 1px solid rgba(255, 215, 64, .5); border-radius: 6px; padding: 4px 12px;
  transition: all .15s;
}
.nav-link:hover { background: rgba(255, 215, 64, .15); box-shadow: 0 0 10px rgba(255,215,64,.35); }

.v-ctl { margin-bottom: 14px; }
.v-weather-info { margin-left: auto; color: var(--gold); font-size: 12px; }
.v-sec-title {
  font-size: 15px; font-weight: 700; color: var(--cyan);
  margin: 16px 0 10px; letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(0,229,255,.4);
}
.v-sec-sub { font-size: 11.5px; color: var(--txt-dim); font-weight: 400; margin-left: 10px; }

/* ---------- 结论卡片 ---------- */
.verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px;
}
.verdict {
  display: flex; gap: 10px;
  background: rgba(18, 28, 48, .66);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(57, 217, 126, .4);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 0 14px rgba(57, 217, 126, .08);
}
.verdict.warn { border-color: rgba(255, 82, 82, .5); box-shadow: 0 0 14px rgba(255,82,82,.1); }
.verdict .v-mark {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  background: rgba(57, 217, 126, .15); color: var(--green);
  border: 1px solid var(--green);
  text-shadow: 0 0 8px rgba(57,217,126,.7);
}
.verdict.warn .v-mark { background: rgba(255,82,82,.15); color: var(--red); border-color: var(--red); }
.verdict .v-title { font-size: 13px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.verdict .v-nums { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.verdict .v-actual { font-size: 20px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.verdict.warn .v-actual { color: var(--red); }
.verdict .v-target { font-size: 11.5px; color: var(--txt-dim); }
.verdict .v-note { font-size: 11.5px; color: var(--txt-dim); line-height: 1.6; }

/* ---------- 金色价值卡 ---------- */
.gold-card {
  margin-top: 12px;
  border: 1px solid rgba(255, 215, 64, .55) !important;
  background: linear-gradient(135deg, rgba(255, 215, 64, .08), rgba(18, 28, 48, .7) 40%) !important;
  box-shadow: 0 0 24px rgba(255, 215, 64, .12), inset 0 0 30px rgba(255, 215, 64, .04);
}
.gold-title {
  font-size: 17px; font-weight: 800; color: var(--gold);
  letter-spacing: 1px; margin-bottom: 12px;
  text-shadow: 0 0 16px rgba(255, 215, 64, .5);
}
.gold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 10px 22px; }
.gold-item .g-h { font-size: 13px; font-weight: 700; color: #ffe9a0; margin-bottom: 4px; }
.gold-item .g-p { font-size: 12px; color: var(--txt); line-height: 1.75; }

/* ---------- 图表区 ---------- */
#chartsV {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
}
#chartsV .chart-box { min-width: 0; height: 260px; }
#chartsV .chart-box.v-wide { grid-column: span 2; }
#chartsV canvas { width: 100%; height: calc(100% - 24px); display: block; }
#vtip {
  position: absolute; z-index: 20; pointer-events: none;
  background: rgba(8, 18, 36, .9);
  border: 1px solid rgba(0, 229, 255, .7);
  border-radius: 8px; padding: 8px 12px;
  font-size: 12px; line-height: 1.7;
  box-shadow: 0 0 16px rgba(0, 229, 255, .35);
  min-width: 220px;
}
#vtip .tt-name { color: var(--cyan); font-weight: 700; }
#vtip .tt-row b { color: var(--gold); font-weight: 600; }

/* ---------- 数据表 ---------- */
.v-table-wrap { max-height: 420px; overflow-y: auto; padding: 0 !important; }
.v-table-wrap::-webkit-scrollbar { width: 6px; }
.v-table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#vTable { width: 100%; border-collapse: collapse; font-size: 12px; }
#vTable th {
  position: sticky; top: 0; z-index: 2;
  background: #101a2e; color: var(--cyan);
  text-align: left; padding: 8px 10px; font-weight: 600;
  border-bottom: 1px solid rgba(0,229,255,.35);
}
#vTable td { padding: 5px 10px; border-bottom: 1px solid rgba(34,49,74,.5); font-variant-numeric: tabular-nums; }
#vTable tr:hover td { background: rgba(0,229,255,.05); }
#vTable tr.row-hot td { background: rgba(255, 82, 82, .1); color: #ffd7d7; }
#vTable td.pos { color: var(--green); }
#vTable td.neg { color: var(--red); }

/* ---------- 方法论 ---------- */
.v-footer { margin-top: 16px; }
.v-footer ul { margin-left: 18px; font-size: 12px; color: var(--txt-dim); line-height: 1.9; }
.v-footer li::marker { color: var(--cyan); }

@media (max-width: 1100px) {
  #chartsV { grid-template-columns: 1fr; }
  #chartsV .chart-box.v-wide { grid-column: span 1; }
}

/* ============================================================
 * 优越性解读板块：逻辑链总起卡 + 解读卡
 * ============================================================ */

.sup-chain {
  border-color: rgba(255, 215, 64, .55) !important;
  background: linear-gradient(135deg, rgba(255, 215, 64, .07), rgba(18, 28, 48, .7) 45%) !important;
  box-shadow: 0 0 26px rgba(255, 215, 64, .12);
  margin-bottom: 12px;
}
.sup-chain-title {
  font-size: 17px; font-weight: 800; color: var(--gold);
  letter-spacing: 1px; margin-bottom: 14px;
  text-shadow: 0 0 16px rgba(255, 215, 64, .5);
}
.chain {
  display: flex; align-items: stretch; gap: 8px;
  flex-wrap: wrap;
}
.chain-node {
  flex: 1 1 200px;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(10, 18, 34, .8);
}
.chain-node b { font-size: 13.5px; line-height: 1.5; }
.chain-node span { font-size: 11.5px; color: var(--txt-dim); line-height: 1.6; }
.cn-cyan { border: 1px solid rgba(0, 229, 255, .6); box-shadow: 0 0 16px rgba(0, 229, 255, .18); }
.cn-cyan b { color: var(--cyan); text-shadow: 0 0 10px rgba(0,229,255,.5); }
.cn-gold, .cn-gold2 { border: 1px solid rgba(255, 215, 64, .55); box-shadow: 0 0 16px rgba(255, 215, 64, .15); }
.cn-gold b, .cn-gold2 b { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,64,.5); }
.cn-green { border: 1px solid rgba(57, 217, 126, .6); box-shadow: 0 0 18px rgba(57, 217, 126, .2); }
.cn-green b { color: var(--green); text-shadow: 0 0 10px rgba(57,217,126,.5); font-size: 16px; }
.chain-x, .chain-arrow {
  align-self: center; flex: none;
  font-size: 22px; font-weight: 800; color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 215, 64, .7);
  padding: 0 2px;
}
.chain-arrow { color: var(--cyan); text-shadow: 0 0 12px rgba(0, 229, 255, .7); }

.sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sup-card .sup-h {
  font-size: 13.5px; font-weight: 700; color: var(--gold);
  margin-bottom: 8px; letter-spacing: .5px;
}
.sup-card .sup-h.cy { color: var(--cyan); }
.sup-card .sup-h.gd { color: var(--gold); }
.sup-card .sup-h.gn { color: var(--green); }
.sup-card .g-p { font-size: 12px; color: var(--txt); line-height: 1.8; margin-bottom: 8px; }
.sup-card .g-p b { color: #ffe9a0; }
.sup-card .g-p .hl-g { color: var(--green); }
.sup-card .g-p .hl-r { color: var(--red); }

@media (max-width: 1100px) {
  .sup-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * 加载屏 / 顶栏 transport / 电影模式数据雨
 * ============================================================ */

/* ---------- 加载屏 ---------- */
#loading {
  position: fixed; inset: 0; z-index: 120;
  background: #05080f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  opacity: 1; transition: opacity 1s ease;
}
#loading.fade { opacity: 0; pointer-events: none; }
.ld-title {
  font-size: 30px; font-weight: 700; letter-spacing: 8px; color: #eaf4ff;
  text-shadow: 0 0 22px #00e5ff;
}
.ld-title span { color: var(--cyan); }
.ld-bar {
  width: 300px; height: 4px; border-radius: 2px;
  background: rgba(0, 229, 255, .15);
  overflow: hidden;
}
#ldFill {
  width: 8%; height: 100%;
  background: linear-gradient(90deg, #00e5ff, #7df9ff);
  box-shadow: 0 0 12px rgba(0, 229, 255, .8);
  border-radius: 2px;
  transition: width .6s ease;
}
.ld-sub { font-size: 12px; color: var(--txt-dim); letter-spacing: 2px; }

/* ---------- 底部播放控制条（3D 视口底部：播放/倍速/重置 + 可拖动进度条） ---------- */
#tpBar {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 8;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 229, 255, .4);
  border-radius: 22px;
  background: rgba(8, 18, 36, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 14px rgba(0, 229, 255, .15);
}
.tp-btn {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(0, 229, 255, .12);
  color: var(--cyan); border: 1px solid rgba(0, 229, 255, .55);
  font-size: 14px; cursor: pointer; font-family: inherit;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.tp-btn:hover { background: rgba(0, 229, 255, .28); box-shadow: 0 0 10px rgba(0,229,255,.5); }
.tp-speed { flex: none; }
.tp-speed button { border-radius: 12px !important; padding: 3px 10px !important; }
.tp-time {
  min-width: 150px; flex: none;
  color: var(--gold);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(255, 215, 64, .4);
  text-align: center;
}
#tpProg {
  flex: 1 1 auto; min-width: 60px; height: 4px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, rgba(0,229,255,.55), rgba(0,229,255,.18));
  border-radius: 2px; outline: none;
}
#tpProg::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cyan); border: 2px solid #06101f;
  box-shadow: 0 0 8px rgba(0,229,255,.8); cursor: grab;
}
#tpProg::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan); border: 2px solid #06101f;
  box-shadow: 0 0 8px rgba(0,229,255,.8); cursor: grab;
}

/* ---------- 电影模式数据雨 ---------- */
#rain {
  position: fixed; inset: 0; z-index: 40;
  width: 100vw; height: 100vh;
  pointer-events: none;
  display: none;
  opacity: 0.9;                /* 低透明度，不遮 3D */
}
body.cinematic #rain { display: block; }
body.cinematic #topbar { opacity: 0.25; }

/* ---------- 窄屏适配（1366×768） ---------- */
@media (max-width: 1400px) {
  #topbar h1 { font-size: 14px; }
  #topbar .subtitle { display: none; }
  .tp-time { min-width: 120px; font-size: 11px; }
  #nowSchemeBadge { display: none; }
  .money-grid { grid-template-columns: 1fr 1fr; }
}

/* 低高度屏幕进一步压缩（保证 1366×768 首屏完整） */
@media (max-height: 820px) {
  .unit-hint { display: none; }
  .m-unit { display: none; }
}

/* ---------- 电影模式沉浸 HUD ---------- */
#cineHud { display: none; }
body.cinematic #cineHud { display: block; }

#cineBadge {
  position: fixed; top: 64px; right: 18px; z-index: 45;
  display: flex; align-items: center; gap: 10px;
}
#cineSpeed {
  font-size: 20px; font-weight: 800; color: #3a2c00;
  background: linear-gradient(90deg, #ffd740, #ffab00);
  border-radius: 10px; padding: 3px 12px;
  box-shadow: 0 0 16px rgba(255, 215, 64, .6);
}
#cineClock {
  font-size: 14px; color: var(--cyan); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(0, 229, 255, .6);
  background: rgba(8, 16, 30, .55);
  border: 1px solid rgba(0, 229, 255, .4);
  border-radius: 10px; padding: 4px 12px;
  backdrop-filter: blur(6px);
}

#cineKpi {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 45;
  display: flex; align-items: stretch;
  padding: 9px 14px;
  background: rgba(8, 16, 30, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 229, 255, .35);
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(0, 229, 255, .18);
  max-width: 96vw;
}
.ck {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 13px;
  border-right: 1px solid rgba(34, 49, 74, .7);
  white-space: nowrap;
}
.ck:last-child { border-right: none; }
.ck-l { font-size: 10px; color: var(--txt-dim); margin-bottom: 2px; }
.ck-v {
  font-size: 16px; font-weight: 700; color: var(--cyan);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(0, 229, 255, .4);
}
.ck-v.gold { color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 64, .4); }
@media (max-width: 1100px) {
  .ck { padding: 0 8px; }
  .ck-v { font-size: 13px; }
}

/* ---------- 电影模式倍速切换器 ---------- */
#cineSpeedGroup { display: flex; gap: 4px; }
#cineSpeedGroup button {
  background: rgba(255, 215, 64, .10);
  color: var(--gold);
  border: 1px solid rgba(255, 215, 64, .5);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
#cineSpeedGroup button:hover { box-shadow: 0 0 10px rgba(255, 215, 64, .5); }
#cineSpeedGroup button.on {
  background: linear-gradient(90deg, #ffd740, #ffab00);
  color: #3a2c00;
  box-shadow: 0 0 16px rgba(255, 215, 64, .65);
}

/* 电影模式下隐藏画布浮动工具条（沉浸 HUD 已含全部数据） */
body.cinematic #vpTools { display: none; }