*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#07131c;
  color:#eef7ff;
}
.app{
  width:min(980px,94vw);
  margin:24px auto;
}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
h1{margin:0;font-size:32px}
.panel{
  background:#0b1d29;
  border:1px solid #223744;
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
h2{margin:0 0 12px;font-size:18px;color:#d9f0ff}
.badge{
  padding:8px 14px;
  border-radius:999px;
  font-weight:bold;
}
.connected{background:#1f7a3c;color:#fff}
.disconnected{background:#713232;color:#fff}
.buttonRow,.buttonGrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.buttonGrid button{flex:1;min-width:140px}
button{
  border:none;
  border-radius:12px;
  padding:14px 18px;
  font-size:17px;
  font-weight:bold;
  background:#2eb6ff;
  color:#031018;
  cursor:pointer;
}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.45;cursor:not-allowed}
button.secondary{background:#9eb3c2;color:#07131c}
button.launch{background:#7cff3a;color:#07131c}
button.stop{background:#ff5252;color:#fff}
label{
  display:block;
  margin:14px 0;
  font-weight:bold;
}
input[type="range"]{
  width:100%;
  margin-top:8px;
}
input[type="number"]{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #223744;
  background:#07131c;
  color:#eef7ff;
  font-size:16px;
}
.pidGrid,.telemetryGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.telemetryGrid div{
  background:#07131c;
  border:1px solid #223744;
  border-radius:12px;
  padding:12px;
}
.telemetryGrid span{
  display:block;
  color:#9eb3c2;
  font-size:13px;
  margin-bottom:6px;
}
.telemetryGrid strong{font-size:20px}
#log{
  height:220px;
  overflow:auto;
  background:#03090d;
  border-radius:10px;
  padding:12px;
  color:#c9f7ff;
  white-space:pre-wrap;
}
@media(max-width:650px){
  h1{font-size:24px}
  button{width:100%;font-size:19px;padding:18px}
  .pidGrid,.telemetryGrid{grid-template-columns:1fr}
}