html, body {
  margin: 0;
  background: #14161a;
  color: #cfd3da;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

#frame {
  max-width: 1000px;
  margin: 14px auto;
  background: linear-gradient(180deg, #3a3d42, #23252a 12%, #1b1d21);
  border-radius: 10px;
  padding: 8px 14px 12px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}

.bezel-top {
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: #8a8f98;
  padding: 3px 0 7px 0;
}

#help {
  text-align: center;
  font-size: 13px;
  color: #9aa0aa;
  padding-top: 8px;
}
#help a { color: #6ab0f3; }

#pfd-nxi {
  position: relative;
  width: 920px;
  height: 634px;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
  border: 2px solid #0a0a0a;
  border-radius: 4px;
}

#horizon-slot { position: absolute; inset: 0; }
#asi-slot  { position: absolute; left: 14px;  top: 80px; width: 122px; height: 420px; z-index: 5; }
#alt-slot  { position: absolute; right: 14px; top: 80px; width: 150px; height: 420px; z-index: 5; }
#status-slot {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: 14px; color: #0ff;
  background: rgba(0,0,0,.5); padding: 3px 0; z-index: 9;
  font-family: "Arial Narrow", Arial, sans-serif;
}

/* ---- 官方组件样式（NXi 的 CSS 不随 npm 分发，以下为自写的 G1000 风格皮肤）---- */
#pfd-nxi svg { overflow: visible; }
#pfd-nxi canvas { position: absolute; }

#pfd-nxi {
  font-family: "Arial Narrow", Arial, sans-serif;
  /* 组件内联样式引用的 NXi CSS 变量 */
  --attitude-aircraft-symbol-fill-light: #ffe402;
  --attitude-aircraft-symbol-fill-dark: #b89e00;
  --attitude-aircraft-symbol-single-cue-stroke: #000;
  --attitude-aircraft-symbol-single-cue-arrow-stroke-width: 1px;
  --attitude-aircraft-symbol-single-cue-bar-stroke-width: 1px;
  --flight-path-marker-stroke: #00e600;
  --flight-path-marker-stroke-width: 2px;
  --flight-path-marker-outline-stroke: #000;
  --flight-path-marker-outline-stroke-width: 4px;
  --digit-scroller-line-height: 30px;
  --digit-scroller-line-offset-y: 0px;
}

/* ---------- 姿态仪 ---------- */
.pitch-ladder-line { stroke: #fff; stroke-width: 2px; }
.pitch-ladder-text { fill: #fff; font-size: 20px; font-weight: bold; }
.pitch-ladder-chevron { fill: #ffe402; stroke: #000; stroke-width: 1px; }
.roll-scale-stroke { stroke: #fff; stroke-width: 2px; fill: none; }
.roll-scale-fill, .roll-scale-ref-pointer { fill: #fff; }
.roll-scale-ticks line { stroke: #fff; stroke-width: 2px; }
.roll-indicator-fill { fill: #fff; stroke: #000; stroke-width: 0.5px; }
.attitude-failure-box, .ahrs-align-msg { display: none; }

/* ---------- 数字滚轮 ---------- */
.digit-scroller { position: absolute; inset: 0; overflow: hidden; }
.digit-scroller div {
  color: #fff; font-size: 26px; font-weight: bold; text-align: center;
}
.digit-scroller-nan { color: #ffe402; }
.airspeed-ias-box-scrollers, .altimeter-indicatedalt-box-scrollers {
  display: flex;
}
.airspeed-ias-box-digit-container, .altimeter-indicatedalt-box-digit-container {
  position: relative; flex: 1; height: 100%;
}
.airspeed-ias-box-digit-bg, .altimeter-indicatedalt-box-digit-bg {
  position: absolute; inset: 0; background: #000;
}
/* 个位滚轮窗口略高（露出相邻数字），符合真实 G1000 视觉 */
.airspeed-ias-box-ones, .altimeter-indicatedalt-box-tens { overflow: hidden; }

/* ---------- 空速表 ---------- */
.airspeed { position: absolute; inset: 0; }
.airspeed-tape-container {
  position: absolute; left: 0; right: 0; top: 26px; bottom: 26px;
  background: rgba(0,0,0,0.45); border: 1px solid #555;
}
.airspeed-tape-window { position: absolute; inset: 0; }
.airspeed-tape-tick { stroke: #fff; stroke-width: 2px; }
.airspeed-tape-tick-major-container { right: 8px; width: 16px; }
.airspeed-tape-tick-minor-container { right: 8px; width: 9px; }
.airspeed-tape-label {
  color: #fff; font-size: 22px; font-weight: bold; white-space: nowrap;
}
.airspeed-tape-label-container { right: 30px; width: 58px; }
.airspeed-tape-color-range { right: 0; width: 6px; }
.airspeed-tape-color-range-white  { background: #fff; }
.airspeed-tape-color-range-green  { background: #00e600; }
.airspeed-tape-color-range-yellow { background: #ffff00; }
.airspeed-tape-color-range-barber-pole {
  background: repeating-linear-gradient(135deg, #f00 0 6px, #fff 6px 12px);
}
.airspeed-trend { right: -5px; width: 5px; background: #d800ff; }
.airspeed-ias-box {
  position: absolute; left: 4%; right: -10px; top: 50%;
  height: 64px; transform: translateY(-50%);
}
.airspeed-ias-box-bg { width: 100%; height: 100%; }
.airspeed-ias-box-bg path { fill: #000; stroke: #fff; stroke-width: 1.5px; }
.airspeed-top-container, .airspeed-bottom-container {
  position: absolute; left: 0; right: 0; height: 24px;
  background: rgba(0,0,0,0.6); border: 1px solid #555;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5px; box-sizing: border-box;
}
.airspeed-top-container { top: 0; }
.airspeed-bottom-container { bottom: 0; }
.airspeed-tas-display { display: flex; width: 100%; justify-content: space-between; }
.airspeed-tas-display-title { color: #9aa0aa; font-size: 15px; }
.airspeed-tas-display-value { color: #fff; font-size: 17px; font-weight: bold; }
.airspeed-refspeed-container { color: #00ffff; font-size: 16px; }
.airspeed-refspeed-bug-icon path { fill: #00ffff; }
.airspeed-protection-text { color: #ffff00; font-size: 14px; }

/* ---------- 高度表 ---------- */
.altimeter { position: absolute; inset: 0; }
.altimeter-tape-container {
  position: absolute; left: 0; right: 0; top: 26px; bottom: 26px;
  background: rgba(0,0,0,0.45); border: 1px solid #555;
}
.altimeter-tape-window { position: absolute; inset: 0; }
.altimeter-tape-tick { stroke: #fff; stroke-width: 2px; }
.altimeter-tape-tick-major-container { left: 8px; width: 14px; }
.altimeter-tape-tick-minor-container { left: 8px; width: 8px; }
.altimeter-tape-label {
  color: #fff; font-size: 19px; font-weight: bold; white-space: nowrap;
}
.altimeter-tape-label-container { left: 26px; width: 66px; }
.altimeter-tape-label-hundreds { font-size: 19px; }
.altimeter-tape-label-tens { font-size: 15px; }
.altimeter-trend { left: -5px; width: 5px; background: #d800ff; }
.altimeter-indicatedalt-box {
  position: absolute; left: -10px; right: 4%; top: 50%;
  height: 64px; transform: translateY(-50%);
}
.altimeter-indicatedalt-box-bg { width: 100%; height: 100%; }
.altimeter-indicatedalt-box-bg path { fill: #000; stroke: #fff; stroke-width: 1.5px; }
.altimeter-indicatedalt-box .digit-scroller-digit { font-size: 24px; }
.altimeter-indicatedalt-box-tens .digit-scroller-digit { font-size: 19px; }
.altimeter-top-container, .altimeter-bottom-container {
  position: absolute; left: 0; right: 0; height: 24px;
  background: rgba(0,0,0,0.6); border: 1px solid #555;
  display: flex; align-items: center; justify-content: center;
}
.altimeter-top-container { top: 0; }
.altimeter-bottom-container { bottom: 0; }
.altimeter-selectedalt-container { color: #00ffff; font-size: 18px; font-weight: bold; display: flex; align-items: center; gap: 3px; }
.altimeter-selectedalt-icon path, .altimeter-selectedalt-bug-icon path { fill: #00ffff; }
.altimeter-selectedalt-bug { position: absolute; }
.altimeter-baro-container { color: #00ffff; font-size: 16px; }
.altimeter-ground-line {
  background: repeating-linear-gradient(45deg, #7c4e00 0 8px, #3a2500 8px 16px);
}
.altimeter-minimums-bug { display: none; }

/* ---------- 通用 ---------- */
.failed-box, .failure-box { display: none; }
.numberunit-unit-small, .numberunit-unit-big { font-size: 0.75em; }