:root {
  color-scheme: dark;
  --face-width: min(96vw, 1080px);
  --green: #21ff70;
  --led-highlight: #c4ffd7;
  --led-mid: #00bb48;
  --led-shadow: #006826;
  --led-glow: #0f6;
  --led-glow-soft: #00d94d99;
  --led-off-highlight: #0b522d;
  --led-off-mid: #032112;
  --led-off-shadow: #010b06;
  --glow: .82;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 28px 14px;
  color: #d9dddf;
  background: radial-gradient(circle at 50% 18%, #353a3f, #17191c 38%, #08090a);
  font-family: Inter, system-ui, sans-serif;
}

.page { display: grid; justify-items: center; gap: 18px; width: 100%; margin: auto; }

body.presentation-mode { display: grid; place-items: center; }
body.presentation-mode .page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 56px); }
body.presentation-mode .help-bar, body.presentation-mode .settings { display: none; }

.radio {
  position: relative;
  width: var(--face-width);
  height: calc(var(--face-width) * 5 / 18);
  overflow: hidden;
  border: 2px solid #3b3e41;
  border-radius: calc(var(--face-width) * .01);
  background: linear-gradient(155deg, #25282b, #101113 45%, #1a1c1e);
  box-shadow: 0 25px 55px #000b, inset 0 1px #656a6d;
}

.display-shell {
  position: absolute;
  top: 8%; left: 5.5556%;
  width: 88.8889%;
  aspect-ratio: 5 / 1;
  overflow: hidden;
  border: 1px solid #050606;
  border-radius: calc(var(--face-width) * .005);
  background: linear-gradient(120deg, #07100b, #020503 52%, #07110b);
  box-shadow: inset 0 0 20px #000;
}

.matrix {
  display: grid;
  width: 100%; height: 100%;
  grid-template-columns: repeat(40, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  place-items: center;
}

.pixel {
  width: 68%; max-height: 68%; aspect-ratio: 1;
  border-radius: 50%;
  opacity: .7;
  background: radial-gradient(circle at 36% 34%, var(--led-off-highlight), var(--led-off-mid) 65%, var(--led-off-shadow));
}

.pixel.on {
  opacity: var(--glow);
  background: radial-gradient(circle at 35% 30%, var(--led-highlight), var(--green) 24%, var(--led-mid) 65%, var(--led-shadow));
  box-shadow: 0 0 7px var(--led-glow), 0 0 14px var(--led-glow-soft);
}

.controls {
  position: absolute;
  top: 76%; left: 16%;
  display: flex;
  width: 68%; height: 24%;
  align-items: flex-start;
  justify-content: space-between;
}

.controls button {
  display: grid;
  width: calc(var(--face-width) * .030556);
  padding: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #060708;
  border-radius: 50%;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  background: radial-gradient(circle at 37% 28%, #2e3133, #151719 58%, #070809);
  box-shadow: 0 4px 3px #000, inset 0 1px #666;
  transition: transform .08s, box-shadow .08s;
}

.controls button span {
  position: relative;
  top: calc(var(--face-width) * .03225);
  color: #c9ccce;
  font-size: calc(var(--face-width) * .01389);
  line-height: 1;
}

.controls button:focus-visible { outline: 2px solid #66ff9b; outline-offset: 3px; }
.controls button.pressed, .controls button:active { transform: translateY(calc(var(--face-width) * .003)); box-shadow: 0 calc(var(--face-width) * .001) calc(var(--face-width) * .001) #000; }

.aux-port {
  position: absolute;
  top: 76%; left: 5%;
  display: grid;
  width: 7%;
  justify-items: center;
  gap: calc(var(--face-width) * .00445);
  color: #aeb6ba;
  font-size: calc(var(--face-width) * .0105);
  line-height: 1;
}

.aux-socket {
  width: calc(var(--face-width) * .035);
  aspect-ratio: 1;
  border: 1px solid #030405;
  border-radius: 50%;
  background: radial-gradient(circle, #010202 0 22%, #202427 25% 38%, #07090a 41% 63%, #34383a 66% 72%, #111315 75%);
  box-shadow: inset 0 0 3px #000, 0 1px 1px #555;
}

.brand {
  position: absolute;
  top: 80%; right: 3%;
  width: 11%;
  color: #aeb6ba;
  font-family: Orbitron, "Arial Narrow", sans-serif;
  font-size: calc(var(--face-width) * .02);
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: 1;
  text-align: center;
  opacity: .82;
}

.help-bar, .settings {
  width: min(var(--face-width), 96vw);
  border: 1px solid #34383b;
  border-radius: 12px;
  background: #111418dd;
}

.help-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: #aeb6ba;
  font-size: 14px;
}

.help-bar strong { color: #7dffac; white-space: nowrap; }
kbd { padding: 2px 7px; border: 1px solid #454a4e; border-radius: 5px; background: #22262a; }

.settings { overflow: hidden; }
.settings summary { padding: 14px 16px; cursor: pointer; font-weight: 650; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px 18px; padding: 2px 16px 17px; }
.settings label { display: grid; gap: 7px; color: #adb5b9; font-size: 13px; }
.settings input, .settings select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #40464a; border-radius: 8px; color: #eef2f3; background: #202428; font: inherit; }
.settings p { grid-column: 1 / -1; margin: 0; color: #849095; font-size: 12px; }
.settings-actions { display: flex; gap: 10px; align-items: center; align-self: end; }
.settings-actions button { min-height: 40px; padding: 8px 12px; border: 1px solid #2c7045; border-radius: 8px; color: #dfffea; cursor: pointer; background: #183824; font: inherit; font-weight: 650; }
.settings-actions button:hover { background: #205032; }
.settings-actions span { color: #7dffac; font-size: 12px; }

.stream-settings { grid-column: 1 / -1; padding-bottom: 2px; border-bottom: 1px solid #303538; }
.stream-settings h2 { margin: 0 0 12px; font-size: 16px; }
.stream-form { display: grid; grid-template-columns: 1fr 2fr 130px auto auto; gap: 10px; align-items: end; }
.stream-form button, .stream-list button { min-height: 40px; padding: 8px 12px; border: 1px solid #2c7045; border-radius: 8px; color: #dfffea; cursor: pointer; background: #183824; font: inherit; font-weight: 650; }
.stream-form button:hover, .stream-list button:hover { background: #205032; }
.stream-form .secondary-action { border-color: #50575b; color: #d9dddf; background: #292e31; }
.stream-form .secondary-action:hover { background: #383f43; }
.stream-note { margin: 10px 0 !important; }
.stream-list { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.stream-list li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid #343a3e; border-radius: 8px; background: #181c1f; font-size: 13px; }
.stream-list li.active { border-color: #2c7045; box-shadow: inset 3px 0 #21ff70; }
.stream-list .stream-meta { display: grid; gap: 2px; min-width: 0; }
.stream-list .stream-meta strong, .stream-list .stream-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-list .stream-meta span { color: #91999d; font-size: 12px; }
.stream-list .remove-stream { border-color: #653238; color: #ffdadd; background: #3a1c20; }
.stream-list .remove-stream:hover { background: #57252d; }

@media (max-width: 720px) {
  body { padding: 16px 8px; }
  .help-bar { display: grid; justify-content: start; }
  .settings-grid { grid-template-columns: 1fr; }
  .stream-form { grid-template-columns: 1fr; }
  .stream-list li { grid-template-columns: 1fr auto auto; }
}