:root{
  --bg:#0c0f14;
  --panel:#0f1620;
  --stroke:#2a3544;
  --text:#d8dde6;
  --muted:#94a3b8;

  /* Airbus-ish palette */
  --green:#37ff5a;
  --cyan:#46d6ff;
  --amber:#ffbf3a;
  --red:#ff4b4b;
  --white:#ecffef;
}

html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--stroke);
}
.title{font-weight:800;letter-spacing:.5px}
.conn{color:var(--muted);font-size:12px}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  padding:12px;
}
.panel{
  background:linear-gradient(180deg,#101b27,#0c121b);
  border:1px solid var(--stroke);
  border-radius:12px;
  overflow:hidden;
}
.panel > header{
  padding:8px 10px;
  border-bottom:1px solid var(--stroke);
  font-weight:700;
  color:var(--muted);
  letter-spacing:.6px;
  font-size:12px;
}
.panel canvas{display:block;width:100%;height:auto;background:#03070c}
.panel.wide{grid-column:1 / -1}

.signal{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding:10px;
}
textarea{
  width:100%;height:120px;background:#0b111a;color:var(--text);
  border:1px solid var(--stroke);border-radius:10px;padding:8px;
}
button{
  margin-top:8px;
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--stroke);
  background:#14202e;color:var(--text);
}
.status{
  grid-column:1 / -1;
  background:#0b0e12;border:1px solid var(--stroke);
  border-radius:10px;padding:10px;white-space:pre-wrap;
}

.mcduWrap{padding:12px}
.mcdu{
  position:relative;
  background:linear-gradient(180deg,#2a2f38,#1b2028);
  border:2px solid #3a4452;
  border-radius:16px;
  padding:12px;
}
.mcduBrand{font-weight:800;color:#9aa7b9;font-size:12px;letter-spacing:1px;margin-bottom:8px}

.lskCol{
  position:absolute;top:44px;bottom:230px;
  width:88px;display:flex;flex-direction:column;justify-content:space-between;
}
.lskCol.left{left:10px}
.lskCol.right{right:10px}
.lsk{
  height:40px;border-radius:10px;
  background:linear-gradient(180deg,#303745,#252c37);
  border:1px solid #465266;
  color:#cfd6e2;font-weight:800;
}
.mcduScreenFrame{
  margin:0 110px;
  border:2px solid #3d4655;border-radius:12px;
  padding:10px;background:#0b1118;
}
#mcdu{width:100%;height:auto;background:#051409;border-radius:8px;image-rendering:pixelated}

.keys{
  margin:12px 110px 0 110px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
.key{
  border-radius:12px;
  background:linear-gradient(180deg,#3a404a,#2b313a);
  border:1px solid #4a5566;
  color:#e7e7e7;
  font-weight:900;
  padding:12px 6px;
}
.key.func{background:linear-gradient(180deg,#3c4b60,#2a3444)}
.key.warn{background:linear-gradient(180deg,#4a3b2b,#33271d)}

/* ---- Scale whole cockpit to 50% ---- */
:root{ --scale: 0.5; }

.topbar,
.grid{
  transform: scale(var(--scale));
  transform-origin: top left;
}

/* 缩放后可视区域会变大，为了不被裁掉，把逻辑宽度放大到 1/scale */
.topbar{ width: calc(100% / var(--scale)); }
.grid{ width: calc(100% / var(--scale)); }