/* ==========================================================================
   SimMSX 第四工具品牌导航占位 —— 增量样式
   站点：msxai.cn（V1.3.0 导航 msxd 体系 / 移动 mmg 体系 / /apps/ 软件矩阵）
   日期：2026-10-27   作者：CodeMSX前端工程师-OJ（fe-oj）

   设计纪律：
   · 只做增量。不覆盖、不改写任何既有选择器，不碰 Blocks 页、不碰页眉页脚结构。
   · 导航第 4 项（桌面 .msxd-sim / 移动 .mmg-sim）结构完全同构于 3DMSX，
     样式全继承，这里一个字都不加。
   · 唯一的颜色新增：卡片主题色复用 v31 在册八色 sensing#4FA3BC，不自造色。
   · 测评橙项按老田指定固定亲子橙 #E57026（不随冷蓝主题变），这是全文件唯一
     刻意脱离主题变量的地方，已在下方注明。
   ========================================================================== */

/* ---------- 1. /apps/ 第 4 张卡：SimMSX 主题色（复用 v31 sensing#4FA3BC） ---------- */

.engine.e-sim .no span,
.engine.e-sim h3 .cn {
  color: #4FA3BC;
}

.engine.e-sim .h5-keys.c-sim i {
  color: #2A7E92;
  background: #E8F5F8;
  border-color: #CDE8EF;
}

.engine.e-sim .h5-last.c-sim i {
  color: #2A7E92;
  background-color: #E8F5F8;
  background-image: none;
  border-color: #CDE8EF;
}

/* 未上线 CTA：不可点、置灰、零额外提示文字（不写「敬请期待」）。
   pointer-events:none 让整卡该按钮彻底短路，不依赖 JS。 */
.engine.e-sim .go-btn.go-soon,
.go-btn.go-soon {
  background: #D8DEE7;
  color: #FFFFFF;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

.engine.e-sim .go-btn.go-soon svg,
.go-btn.go-soon svg {
  opacity: .9;
}

/* ---------- 2. /apps/ 第 4 张卡：右侧动态窗（纯 CSS，无外部资源、无 JS） ---------- */

.engine.e-sim .win-body.sim-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sim-ui {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.sim-params {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 0 0 42%;
}

.sim-p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  background: #F2F7F9;
  font-size: 12px;
  line-height: 1.2;
}

.sim-p span {
  color: #7A8798;
}

.sim-p b {
  color: #2A7E92;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sim-canvas {
  position: relative;
  flex: 1 1 auto;
  border-radius: 10px;
  background:
    radial-gradient(circle at 78% 22%, rgba(79, 163, 188, .16), transparent 58%),
    linear-gradient(180deg, #F7FBFD, #EEF6F9);
  overflow: hidden;
}

.sim-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sim-track {
  stroke: #4FA3BC;
  stroke-dasharray: 5 4;
  opacity: .85;
}

.sim-dot {
  fill: #E57026;
  animation: simPulse 1.8s ease-in-out infinite;
}

@keyframes simPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.sim-hint {
  position: absolute;
  left: 9px;
  bottom: 7px;
  font-size: 11px;
  color: #7A8798;
  letter-spacing: .02em;
}

.sim-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #E6EFF3;
  font-size: 12px;
}

.sim-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5D6B7A;
}

.sim-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4FA3BC;
  box-shadow: 0 0 0 3px rgba(79, 163, 188, .18);
}

.sim-bar b {
  color: #2A7E92;
  font-weight: 600;
  white-space: nowrap;
}

/* 窄屏：参数面板与轨迹上下排，避免挤压 */
@media (max-width: 720px) {
  .sim-ui {
    flex-direction: column;
  }
  .sim-params {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding-right: 0;
  }
  .sim-p {
    flex: 1 1 calc(50% - 6px);
    padding-right: 12px;
  }
  .sim-canvas {
    min-height: 96px;
  }

  /* 真机 390 实测：Brick Construction / Electronics / Robotics 在卡片两列胶囊里被截断。
     窄屏下允许换行并略缩字号，宁可两行也不截字。 */
  .engine.e-sim .h5-keys.c-sim i {
    font-size: 11.5px;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }
}

/* ---------- 2.5 SimMSX 下拉的双行排版修正 ----------
   现网可点项（Blocks 图形编程）是「英文 + 中文小字同行」，靠既有 .msxd_row 布局撑开；
   但 .msxd_soon 灰项原本只有单行名称，塞入 .msxd_cn 后两项会被 flex 挤压重叠
   （真机截图 2026-10-27 02 号图实测：Aerospace 与「航空航天」紧贴、Brick Construction 溢出裁切）。
   修法：只对 .msxd-sim 这一个下拉生效——内容不收缩 + 面板按内容加宽，不动其他三个工具的下拉。 */

.msxd-sim .msxd_pop {
  min-width: 226px;
  max-width: calc(100vw - 24px);
}

.msxd-sim .msxd_pop .msxd_row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.msxd-sim .msxd_pop .msxd_row .msxd_n {
  flex: 0 0 auto;
}

.msxd-sim .msxd_pop .msxd_row .msxd_cn {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: .8;
}

/* 移动端同理：<em> 中文小字不换行、不被压扁 */
.mmg-sim .mmg_b .mmsub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.mmg-sim .mmg_b .mmsub em {
  flex: 0 0 auto;
  font-style: normal;
  opacity: .8;
}

/* ---------- 3. 测评橙项：仿真能力测评固定亲子橙 #E57026 ----------
   刻意脱离 --msx-primary：冷蓝主题下其余三枚测评会随主题转 #1C3055，
   而老田 2026-10-26 令明确要求「仿真能力测评（橙，固定亲子橙 #E57026，置末）」。
   影响面仅限带 .msxd_assess-sim / .mmsub_assess-sim 的这一个节点。 */

.msxd_row.msxd_assess.msxd_assess-sim .msxd_n,
.mmsub.mmsub_assess.mmsub_assess-sim {
  color: #E57026;
}

/* 置灰子项：鼠标形态与非交互语义对齐（视觉仍由既有 .msxd_soon/.mmsub_soon 决定） */
.msxd_row.msxd_soon[aria-disabled="true"],
.mmsub.mmsub_soon[aria-disabled="true"] {
  cursor: not-allowed;
}

/* SimMSX 六方向：下拉里的可点项是 <a>，去掉默认链接样式、保持原 flex 排版 */
.msxd_pop a.msxd_row{text-decoration:none;color:inherit;cursor:pointer}
.mmg_b a.mmsub{text-decoration:none;color:inherit;cursor:pointer}

/* ==========================================================================
   v1.4.2  2026-10-30  /apps/ 第 4 卡（SimMSX）视觉补全 + 动态升级
   背景：SimMSX 已上线（/sim/ 9 案例 + 返回入口修复完毕），但本文件 v1.0 只覆盖
   导航下拉与胶囊配色，第 4 卡三处仍缺样式：
     ① .info::before 左侧 5px 深色竖条无 background（第 1/2/3 卡都有）
     ② .c-sim .go-btn 无 background（HTML 已去掉 go-soon，按钮白字透明底=消失）
     ③ .c-sim i 无 :hover（其余三卡都有）
   纪律不变：只做增量，全部规则带 .e-sim / .c-sim 作用域，不碰其他三卡与导航。
   配色沿用 v31 在册 sensing#4FA3BC，深阶 #2A6E80 由其同色系压暗，不自造新色。
   ========================================================================== */

/* ---------- 4.1 左侧深色竖条（对齐第 1/2/3 卡结构） ---------- */
.engine.e-sim .info::before {
  background: linear-gradient(180deg, #4FA3BC 0%, #2A6E80 100%);
}

/* ---------- 4.2 主 CTA「进入平台」实心渐变（替代 go-soon 置灰态） ---------- */
.engine .v140last.c-sim .go-btn {
  background: linear-gradient(135deg, #4FA3BC, #2A6E80);
  box-shadow: 0 14px 30px -14px rgba(42,126,146,.7);
}
.engine .v140last.c-sim .go-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(42,126,146,.38);
}
.engine .v140last.c-sim .go-btn:hover svg { transform: translateX(3px); }

/* 基础 CSS 末行统一写了 transition:none 关掉了全部过渡，这里只给第 4 卡重新打开 */
.engine .v140keys.c-sim i,
.engine .v140last.c-sim i {
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background-color .22s ease,
              color .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.engine .v140last.c-sim .go-btn {
  transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease, box-shadow .22s ease;
}
.engine .v140last.c-sim .go-btn svg { transition: transform .22s ease; }

/* ---------- 4.3 六方向胶囊 hover：升底、上浮、描边发光 ---------- */
.engine .v140keys.c-sim i:hover,
.engine .v140last.c-sim i:hover {
  background: #2A7E92;
  color: #FFFFFF;
  border-color: #2A7E92;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -6px rgba(42,126,146,.45);
}
.engine .v140keys.c-sim i:active,
.engine .v140last.c-sim i:active {
  transform: translateY(-1px) scale(.985);
  box-shadow: 0 4px 10px -4px rgba(42,126,146,.4);
}

/* ---------- 4.4 右侧仿真窗：网格 / 光晕 / 轨迹生长 / 三粒子 / 扫描 / 状态脉冲 ---------- */

/* 坐标网格：淡青虚线，整体做呼吸 */
.engine.e-sim .sim-grid-lines line {
  stroke: #4FA3BC;
  stroke-width: .8;
  stroke-dasharray: 2 3;
  stroke-opacity: .14;
  animation: simGridBreath 3.6s ease-in-out infinite;
}
@keyframes simGridBreath {
  0%, 100% { stroke-opacity: .10; }
  50%      { stroke-opacity: .24; }
}

/* 轨迹下方光晕层 */
.engine.e-sim .sim-track-glow {
  opacity: .18;
  filter: blur(3px);
  animation: simGlowPulse 2.6s ease-in-out infinite;
}
@keyframes simGlowPulse {
  0%, 100% { opacity: .14; }
  50%      { opacity: .32; }
}

/* 主轨迹：覆盖 v1.0 的静态虚线，改成 pathLength=100 归一化的「画出来→擦掉」循环 */
.engine.e-sim .sim-track {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  opacity: 1;
  animation: simDraw 3.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes simDraw {
  0%   { stroke-dashoffset: 100; }
  70%  { stroke-dashoffset: 0; }
  88%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}

/* 三粒子：橙主粒子 + 两个青蓝跟随粒子，沿同一路径循环 */
.engine.e-sim .sim-dot {
  fill: #E57026;
  filter: drop-shadow(0 0 3px rgba(229,112,38,.75));
  animation: simPulse 1.8s ease-in-out infinite;
}
.engine.e-sim .sim-dot2 {
  fill: #4FA3BC;
  filter: drop-shadow(0 0 3px rgba(79,163,188,.7));
  animation-delay: -.6s;
}
.engine.e-sim .sim-dot3 {
  fill: #9FE4F5;
  filter: drop-shadow(0 0 3px rgba(159,228,245,.7));
  animation-delay: -1.2s;
}

/* 斜向扫描光带，给窗面加「正在运算」的质感 */
.engine.e-sim .sim-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 18%, rgba(79,163,188,.10) 42%,
    rgba(166,232,247,.24) 50%,
    rgba(79,163,188,.10) 58%, transparent 82%);
  background-size: 260% 100%;
  animation: simScanSweep 4.4s linear infinite;
}
@keyframes simScanSweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

/* 底栏状态灯脉冲 */
.engine.e-sim .sim-state i {
  animation: simStatePulse 1.6s ease-in-out infinite;
}
@keyframes simStatePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(79,163,188,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(79,163,188,.06); }
}

/* 参数数值：等宽数字 + 变化时不抖版 */
.engine.e-sim .sim-p b {
  font-variant-numeric: tabular-nums;
}

/* ---------- 4.5 尊重系统「减少动态」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .engine.e-sim .sim-grid-lines line,
  .engine.e-sim .sim-track-glow,
  .engine.e-sim .sim-track,
  .engine.e-sim .sim-dot,
  .engine.e-sim .sim-scan,
  .engine.e-sim .sim-state i {
    animation: none;
  }
  .engine.e-sim .sim-track { stroke-dashoffset: 0; }
}

/* ---------- 4.6 窄屏：扫描与光晕降级，胶囊 hover 改成轻量反馈 ---------- */
@media (max-width: 720px) {
  .engine.e-sim .sim-scan { display: none; }
  .engine.e-sim .sim-track-glow { opacity: .12; animation: none; }
  .engine .v140keys.c-sim i:hover,
  .engine .v140last.c-sim i:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(42,126,146,.4);
  }
}

/* ---------- 4.7 仿真窗深色化：对齐第 3 卡「浅卡片嵌深色渲染区」的视觉结构 ----------
   第 3 卡是浅色卡片里嵌一块深色 3D 渲染图，第 4 卡原来整块窗面是浅青，
   在浅卡片上几乎浮不起来。这里把 .sim-canvas 做成深色仿真仪表面，
   左侧参数卡与底栏保持浅色，形成「控制面板 + 深色视窗」的真实软件布局。
   配色仍锁在 sensing#4FA3BC 体系内，深底取同色相压暗，不引入新色。 */
.engine.e-sim .sim-canvas {
  background:
    radial-gradient(circle at 78% 16%, rgba(79,163,188,.30), transparent 62%),
    radial-gradient(circle at 12% 96%, rgba(42,110,128,.22), transparent 58%),
    linear-gradient(158deg, #0C1F2E 0%, #133247 54%, #0A1826 100%);
  box-shadow:
    inset 0 0 0 1px rgba(79,163,188,.22),
    inset 0 10px 28px -10px rgba(0,0,0,.72);
}

/* 深底上的网格要提亮，原 .14 淡青在白底可见、在深底全糊 */
.engine.e-sim .sim-grid-lines line {
  stroke: rgba(126,214,240,.30);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  stroke-opacity: 1;
  animation: simGridBreath2 3.6s ease-in-out infinite;
}
@keyframes simGridBreath2 {
  0%, 100% { stroke: rgba(126,214,240,.20); }
  50%      { stroke: rgba(150,228,250,.46); }
}

/* 起点 / 终点标记：双环呼吸，交代「从哪出发、到哪收敛」 */
.engine.e-sim .sim-node {
  fill: none;
  stroke: #4FA3BC;
  stroke-width: 1.4;
  opacity: .55;
  animation: simNodePulse 2.6s ease-in-out infinite;
}
.engine.e-sim .sim-node-s2,
.engine.e-sim .sim-node-e2 {
  stroke-width: .9;
  animation-delay: -1.3s;
}
.engine.e-sim .sim-node-e1,
.engine.e-sim .sim-node-e2 {
  stroke: #A6E8F7;
}
@keyframes simNodePulse {
  0%, 100% { opacity: .28; stroke-width: 1.0; }
  50%      { opacity: .85; stroke-width: 2.2; }
}

/* 深底上轨迹加发光，粒子才「跳」得出来 */
.engine.e-sim .sim-track {
  filter: drop-shadow(0 0 4px rgba(79,163,188,.85));
}
.engine.e-sim .sim-track-glow {
  opacity: .26;
  filter: blur(2px);
}

/* hint 文字在深底上换浅青 */
.engine.e-sim .sim-hint {
  left: 50%;
  right: auto;
  bottom: 7px;
  transform: translateX(-50%);
  color: #8FB4C8;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 窗面四角加一组仪表角标，强化「仿真软件视窗」的实感 */
.engine.e-sim .sim-canvas::before,
.engine.e-sim .sim-canvas::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(126,214,240,.42);
  pointer-events: none;
}
.engine.e-sim .sim-canvas::before {
  top: 7px; left: 7px;
  border-right: none; border-bottom: none;
  border-radius: 4px 0 0 0;
}
.engine.e-sim .sim-canvas::after {
  bottom: 7px; right: 7px;
  border-left: none; border-top: none;
  border-radius: 0 0 4px 0;
}

@media (max-width: 720px) {
  .engine.e-sim .sim-canvas::before,
  .engine.e-sim .sim-canvas::after { display: none; }
}

/* 窄屏视窗只有 96px 高，hint 会压住轨迹，给一层半透明底条让它浮起来 */
@media (max-width: 720px) {
  .engine.e-sim .sim-hint {
    font-size: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(6, 22, 34, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    bottom: 5px;
  }
}