/* CR400AF 中国标准动车组 —— 运行界面
   设计坐标 = 参考图自身像素坐标 (1074x768)，由 .cra 整体映射到 1024x768。
   参考图为 1024x768 设计横向拉伸到 1074，故 sx=1024/1074、sy=1 即为还原。
   元素位置全部由 JS 以参考图像素给出，本文件只负责外观。 */

.cra {
  width: 1074px;
  height: 768px;
  transform-origin: 0 0;
  transform: scale(0.9534451, 1);
  background: #000;
  font-family: var(--font-hei);
  color: #fff;
  overflow: hidden;
}

.cra .tx { text-align: left; }
.cra .lat { font-family: Arial, Helvetica, "Segoe UI", sans-serif; }

/* ---------------- 顶栏 ---------------- */
.cra-tsep { background: #8b8d93; }
.cra-date  { color: #ffffff; }
.cra-time  { color: #00ff00; }
.cra-speed { color: #ffffff; }
.cra-unit  { color: #ffffff; }
.cra-brkl  { color: #ffff00; }
.cra-brkv  { color: #ffffff; }
.cra-brkji { color: #e6e6e6; }
.cra-warn svg { display: block; }

/* ---------------- 左侧 网压 ---------------- */
.cra-lt  { color: #ffffff; }
.cra-lg-bar {
  background: #000;
  border: 2px solid #8d8d8d;
  box-sizing: border-box;
}
.cra-lg-fill { background: linear-gradient(90deg, #043077 0%, #2064f1 100%); }
.cra-lg-mark { background: #ffffff; }
.cra-lg-tick { background: #949494; }
.cra-lg-red  { background: #b50000; }
.cra-lg-grn  { background: #018403; }
.cra-lg-lab  { color: #ffffff; }

/* ---------------- 中部 ---------------- */
.cra-no  { color: #ffffff; }
.cra-cat { background: #a4a6a3; }
.cra-car { color: #ffffff; }
.cra-pan svg { display: block; }

.cra-bar {
  background: #000;
  border: 2px solid #8d8f8d;
  box-sizing: border-box;
}
.cra-bar .fill { background: linear-gradient(90deg, #03307a 0%, #1f64f1 100%); }
.cra-bar .cap  { background: #f200f2; }
.cra-btick { background: #8d8d8d; }
.cra-bconn { background: #8d8d8d; }
.cra-bbase { background: #8b8b8b; }
.cra-blab  { color: #ffffff; }
.cra-plab  { color: #ffffff; }

/* ---------------- 右侧 网流 ---------------- */
.cra-rt { color: #ffffff; }
.cra-rg-bar {
  background: #000;
  border: 2px solid #8d8d8d;
  box-sizing: border-box;
}
.cra-rg-fill { background: linear-gradient(90deg, #043077 0%, #2064f1 100%); }
.cra-rg-tick { background: #949494; }
.cra-rg-lab  { color: #ffffff; }

/* ---------------- 底部图标位 ---------------- */
.cra-ibox { overflow: hidden; }
.cra-ibox .band { height: 3px; }
.cra-ibox .diag { height: 5px; width: 100px; }
.cra-ibox .ch { font-family: var(--font-hei); text-align: center; }
.cra-gtri svg, .cra-key svg { display: block; }

/* ---------------- 底部按钮条 ---------------- */
.cra-btn { background: #000; }
.cra-btn .bev {
  left: -4px; top: 0;
  background: linear-gradient(#101010 0%, #3d3d3d 8%, #8f8f8f 18%, #7e7e7e 38%, #1a1a1a 82%, #020202 100%);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.cra-btn .le { background: #2d2d2d; }
.cra-btn .bot { background: #4d4d4d; }
.cra-btn .lb { color: #d5d5d5; text-align: center; }