:root {
  --bg: #050403;
  --panel: rgba(12, 10, 8, 0.88);
  --line: rgba(201, 163, 90, 0.28);
  --text: #efe6d4;
  --muted: #a89880;
  --gold: #c9a35a;
  --red: #c0392b;
  --green: #2ecc71;
  --yellow: #e3ba1f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Cairo, "IBM Plex Mono", sans-serif; }
#view { display: block; width: 100%; height: 100%; }
.hmi-top {
  position: absolute; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(5,4,3,.85), transparent);
  font-family: "IBM Plex Mono", monospace;
  pointer-events: none;
}
.hmi-top .tag { color: var(--gold); border: 1px solid var(--line); padding: 4px 10px; }
.hmi-top .langs { display: flex; gap: 10px; pointer-events: auto; }
.hmi-top a { color: var(--muted); text-decoration: none; }
.hmi-panel {
  position: absolute; top: 64px; right: 16px;
  width: min(340px, calc(100% - 24px));
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px;
  backdrop-filter: blur(8px);
}
html[dir="ltr"] .hmi-panel { right: auto; left: 16px; }
.eyebrow { color: var(--gold); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; margin: 0; }
h1 { font-size: 1.35rem; margin: 6px 0 8px; }
.lede, .hint, .inspect, .fault { color: var(--muted); font-size: .86rem; }
.status-row { display: flex; gap: 10px; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--muted); }
.led { width: 10px; height: 10px; border-radius: 50%; background: #333; display: inline-block; box-shadow: 0 0 0 1px #111; }
.led.on-y { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.led.on-g { background: var(--green); box-shadow: 0 0 8px var(--green); }
.led.on-r { background: var(--red); box-shadow: 0 0 8px var(--red); }
.state { font-family: "IBM Plex Mono", monospace; font-size: 1.1rem; color: var(--gold); margin: 10px 0; }
.fault { min-height: 1.2em; color: var(--red); }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
dt { color: var(--muted); font-size: .72rem; }
dd { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 1.1rem; }
.cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); background: #12100c; color: var(--text); padding: 10px;
}
button:hover { border-color: var(--gold); color: var(--gold); }
.estop { background: #3a1010; color: #ffd0d0; border-color: var(--red); grid-column: 1 / -1; }
.door { display: flex; gap: 8px; align-items: center; margin-top: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .hmi-panel { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-height: 46vh; overflow: auto; }
}