.test-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}

.controls {
  position: sticky; top: 47px; z-index: 29;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line);
}
.controls .sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; }
.controls .group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.controls .label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.cockpit { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 14px; align-items: start; }
@media (min-width: 1100px) { .cockpit { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.frame-head { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

.scaler { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.scaler > iframe { border: 0; display: block; transform-origin: top left; }

.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.phone .frame-head { display: flex; align-items: center; gap: 6px; }
.phone .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.runner { display: flex; align-items: center; gap: 8px; }
.runner.on { color: var(--good); font-weight: 700; }

.member-warning {
  margin: 0; padding: 10px 14px;
  background: #fdeaea; color: #a52a2a; border-bottom: 1px solid #f0b4b4;
  font-size: .85rem; font-weight: 600;
}