:root{
  --panel: #1b2027;
  --panel-2: #21272f;
  --panel-inset: #10141a;
  --bezel: #0a0d11;
  --hairline: #34404a;
  --text-dim: #8b98a5;
  --ecam-green: #35d16a;
  --ecam-amber: #f2a93b;
  --ecam-red: #ff4d4f;
  --ecam-cyan: #35c6f0;
  --ecam-white: #eef2f5;
  --n1-color: #35c6f0;
  --n2-color: #f2a93b;
  --flame: #ff8a3d;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-digital: 'Share Tech Mono', monospace;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:#05070a;
  color:var(--ecam-white);
  font-family:var(--font-display);
}

.cockpit{
  max-width:1180px;
  margin:0 auto;
  padding:14px 16px 40px;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:6px 4px 14px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:16px;
}
.topbar__type{
  font-size:26px;
  font-weight:700;
  letter-spacing:0.5px;
  color:var(--ecam-white);
  margin-right:10px;
}
.topbar__sub{
  font-size:15px;
  color:var(--text-dim);
}
.topbar__clock{
  font-family:var(--font-digital);
  font-size:18px;
  color:var(--ecam-green);
  letter-spacing:1px;
}

/* ---------- Engine view (cutaway + fan front) ---------- */
.engine-view{
  display:grid;
  grid-template-columns: 1fr 230px;
  gap:16px;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:14px;
  margin-bottom:16px;
}
.engine-view__frame{position:relative;}
.engine-view__svg{width:100%; height:auto; display:block;}
.engine-view__legend{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:13px;
  color:var(--text-dim);
}
.legend-item{display:flex; align-items:center; gap:6px;}
.swatch{width:10px; height:10px; border-radius:2px; display:inline-block;}
.swatch--n1{background:var(--n1-color);}
.swatch--n2{background:var(--n2-color);}
.swatch--flame{background:var(--flame);}

.fan-face{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--hairline);
  padding-left:14px;
}
.fan-face__svg{width:100%; max-width:200px; height:auto;}
.fan-face__label{
  font-size:12px;
  color:var(--text-dim);
  margin-top:4px;
  text-align:center;
}

/* ---------- ECAM ---------- */
.ecam{
  display:grid;
  grid-template-columns: 1fr 220px 1fr;
  gap:12px;
  background:var(--panel-inset);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:16px;
  margin-bottom:16px;
}
.ecam__engine{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:5px;
  padding:10px;
  position:relative;
}
.ecam__engnum{
  position:absolute;
  top:8px;
  right:12px;
  font-family:var(--font-digital);
  font-size:22px;
  color:var(--text-dim);
}
.gauge-row{
  display:flex;
  gap:10px;
  justify-content:center;
}
.gauge{
  width:130px;
  text-align:center;
}
.gauge__svg{width:100%; height:auto;}
.gauge__label{
  font-size:13px;
  color:var(--text-dim);
  margin-top:-6px;
}
.gauge__label .unit{color:var(--text-dim); font-size:11px;}

.digital-row{
  display:flex;
  gap:8px;
  margin-top:10px;
  justify-content:center;
}
.digital-row--small{margin-top:6px;}
.digital-box{
  background:var(--bezel);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:5px 8px;
  flex:1;
  display:flex;
  align-items:baseline;
  gap:5px;
  justify-content:center;
  font-family:var(--font-digital);
}
.digital-box--sm{padding:4px 5px; flex-direction:column; gap:1px;}
.digital-box__label{
  font-size:10px;
  color:var(--text-dim);
  font-family:var(--font-display);
  letter-spacing:0.5px;
}
.digital-box__val{
  font-size:16px;
  color:var(--ecam-green);
}
.digital-box--sm .digital-box__val{font-size:14px;}
.digital-box__unit{font-size:10px; color:var(--text-dim);}

.ecam__center{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.apu-status{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:5px;
  padding:10px;
  text-align:center;
}
.apu-status__title{
  font-size:14px;
  color:var(--text-dim);
  margin-bottom:6px;
}
.apu-status__row{
  font-family:var(--font-digital);
  display:flex;
  justify-content:space-between;
  font-size:15px;
  color:var(--ecam-cyan);
  padding:2px 4px;
}
.apu-status__row .unit{color:var(--text-dim); font-size:11px;}
.apu-avail{
  margin-top:8px;
  font-size:13px;
  letter-spacing:1px;
  padding:4px;
  border-radius:3px;
  color:#3a4149;
  background:transparent;
  border:1px solid var(--hairline);
}
.apu-avail.is-avail{
  color:#04220f;
  background:var(--ecam-green);
  border-color:var(--ecam-green);
}
.memo-panel{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:5px;
  padding:10px;
  flex:1;
  min-height:120px;
}
.memo-panel__title{
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:6px;
}
#memoList{
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-digital);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#memoList li.amber{color:var(--ecam-amber);}
#memoList li.green{color:var(--ecam-green);}
#memoList li.cyan{color:var(--ecam-cyan);}

/* ---------- Overhead panel ---------- */
.overhead{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:16px;
  margin-bottom:16px;
}
.panel-block{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:5px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.panel-block--wide{flex:1; min-width:280px;}
.panel-block__title{
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--text-dim);
  align-self:flex-start;
}

.switch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:#2a3138;
  border:1px solid #3d4652;
  border-radius:4px;
  padding:8px 12px;
  cursor:pointer;
  width:120px;
  font-family:var(--font-display);
}
.switch:focus-visible{outline:2px solid var(--ecam-cyan); outline-offset:2px;}
.switch__placard{
  font-size:12px;
  letter-spacing:0.5px;
  color:#dfe6ec;
  text-transform:uppercase;
}
.switch__light{
  width:14px; height:14px; border-radius:3px;
  background:#12161b;
  border:1px solid #000;
}
.switch[data-state="on"] .switch__light{
  background:var(--ecam-green);
  box-shadow:0 0 6px var(--ecam-green);
}
.switch--brake[data-state="on"] .switch__light{
  background:var(--ecam-amber);
  box-shadow:0 0 6px var(--ecam-amber);
}
.switch--push[data-state="running"] .switch__light--start{
  background:var(--ecam-amber);
  box-shadow:0 0 6px var(--ecam-amber);
  animation:blink 1s infinite;
}
.switch--push[data-state="done"] .switch__light--start{
  background:var(--ecam-green);
  box-shadow:0 0 6px var(--ecam-green);
}
@keyframes blink{ 50%{opacity:0.25;} }

.switch--guarded[data-state="on"]{
  border-color:var(--ecam-green);
}

.eng-masters{display:flex; gap:10px;}

.mode-selector{
  display:flex;
  gap:4px;
  background:#12161b;
  border-radius:20px;
  padding:4px;
}
.mode-selector__opt{
  border:none;
  background:transparent;
  color:var(--text-dim);
  padding:6px 12px;
  border-radius:16px;
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:0.5px;
  cursor:pointer;
}
.mode-selector__opt--active{
  background:var(--ecam-cyan);
  color:#08202a;
  font-weight:600;
}

/* ---------- Pedestal / throttles ---------- */
.pedestal{
  display:flex;
  gap:24px;
  justify-content:center;
  align-items:flex-end;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:20px;
}
.throttle-unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.throttle-unit__scale{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:10px;
  color:var(--text-dim);
  height:220px;
  text-align:right;
}
.throttle-unit{position:relative;}
.throttle-unit__track{
  position:relative;
  width:46px;
  height:220px;
  background:var(--bezel);
  border:1px solid var(--hairline);
  border-radius:6px;
}
.throttle-unit__fill{
  position:absolute;
  bottom:0; left:0; right:0;
  background:linear-gradient(180deg, var(--ecam-cyan), #0d5d73);
  border-radius:0 0 6px 6px;
  height:0%;
  opacity:0.35;
}
.throttle-unit__handle{
  position:absolute;
  left:50%;
  bottom:0%;
  transform:translate(-50%, 50%);
  width:40px;
  height:26px;
  background:#3a4149;
  border:1px solid #060708;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-digital);
  color:var(--ecam-white);
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.throttle-unit__handle:active{cursor:grabbing;}

.pedestal__center{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.reset-btn{
  background:#2a3138;
  border:1px solid #3d4652;
  color:var(--ecam-white);
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:0.5px;
  padding:8px 10px;
  border-radius:4px;
  cursor:pointer;
}
.reset-btn:hover{border-color:var(--ecam-red);}

.footer-note{
  text-align:center;
  color:var(--text-dim);
  font-size:11px;
  margin-top:18px;
}

@media (max-width: 860px){
  .engine-view{grid-template-columns:1fr;}
  .ecam{grid-template-columns:1fr;}
  .fan-face{border-left:none; border-top:1px solid var(--hairline); padding-left:0; padding-top:10px;}
  .pedestal{flex-direction:column;}
}