:root {
  color-scheme: dark;
  --bg: #12151a; --panel: #1b1f27; --line: #2c323d; --text: #e6e9ef;
  --muted: #98a1b0; --accent: #4c9aff; --cell: #0b0e13;
  --send: #ff5468; --drop: #6fd39a; --none: #f2a33c;
  --rows: 4; --cols: 9;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; height: 100vh; overflow: hidden; background: var(--bg); color: var(--text);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button {
  font: inherit; font-weight: 600; cursor: pointer; padding: 3px 12px; border-radius: 6px;
  background: #232833; color: var(--text); border: 1px solid var(--line);
}
button:hover { border-color: var(--accent); }
.muted { color: var(--muted); }
.error { color: var(--send); min-height: 1.4em; }

#login {
  width: 300px; margin: 18vh auto 0; display: flex; flex-direction: column; gap: 10px;
  padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
#login h1 { margin: 0 0 6px; font-size: 16px; }
#login label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
#login input {
  font: inherit; padding: 5px 7px; border-radius: 4px;
  background: var(--cell); color: var(--text); border: 1px solid var(--line);
}

#app { height: 100vh; display: flex; flex-direction: column; }
header {
  display: flex; gap: 14px; align-items: center; flex: none;
  padding: 6px 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
header .title { font-weight: 600; }
.spacer { flex: 1; }
#status.down { color: var(--send); font-weight: 600; }
#practice-buttons { display: flex; gap: 6px; }
#start-test { background: var(--accent); color: #06101f; border-color: var(--accent); }
#practice-buttons button:disabled { opacity: .4; cursor: default; }
#blocked { flex: none; padding: 6px 14px; font-weight: 600; background: var(--accent); color: #06101f; cursor: pointer; }

#grid {
  flex: 1; min-height: 0; display: grid; gap: 3px; padding: 3px;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
}
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow: hidden; border-radius: 4px; background: var(--cell); border: 1px solid var(--line);
}
.tile.empty { border-style: dashed; border-color: #1e232c; }
/* Where the keys go. An outline, so the ring never moves the video under it. */
.tile.focus { outline: 3px solid var(--accent); outline-offset: -2px; }
.tile video {
  flex: 1; min-height: 0; width: 100%; background: #000; object-fit: contain;
  pointer-events: none; /* no right-click menu, no "save video as" */
}
.tile.black video, .tile.black .strip { visibility: hidden; }
.bar { flex: none; height: 5px; background: #000; }
.bar i { display: block; height: 100%; width: 100%; background: var(--accent); }
.strip {
  display: flex; gap: 6px; align-items: baseline; flex: none; padding: 1px 6px;
  font-size: 11px; white-space: nowrap; overflow: hidden;
  background: var(--panel); border-top: 1px solid var(--line);
}
.strip .id { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.tag { margin-left: auto; font-weight: 700; }
.tag.send { color: var(--send); }
.tag.drop { color: var(--drop); }
.tag.no_answer { color: var(--none); }
.note { color: var(--muted); }