/* On-air host screens (air.html / air2.html). */
.air-stage {
  position: fixed; inset: 0;
  background: transparent;
  overflow: hidden;
}
html.air-transparent, html.air-transparent body { background: transparent; }

.air-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.air-frame.on { opacity: 1; }
/* Fixed 1920×1080 canvases (graphics.html) letterbox-scaled to the viewport —
   at an exact 1920×1080 browser source the scale is 1 and coordinates hold. */
.air-frame.fixed {
  inset: auto; top: 50%; left: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--air-scale, 1));
}

/* Idle placeholder — deliberately empty markup, so this is invisible; kept
   because air.js fades it in/out as the cleared/keyed marker. */
.air-idle {
  position: absolute; inset: 0;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.air-idle.off { opacity: 0; }

/* Builder: on-air panel */
.air-now {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0;
  font-size: 13px; color: var(--muted);
}
.air-now .air-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
.air-now.live .air-dot { background: var(--red, #e10600); }
.air-now.live { color: inherit; }
.air-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.air-auth { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
.air-auth input {
  flex: 0 1 180px; min-width: 120px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: transparent; color: inherit;
  padding: 10px 12px; font-size: 14px;
}
.air-auth .air-auth-msg { align-self: center; font-size: 12.5px; color: var(--muted); }
.air-qc { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.air-qc-title {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.air-qc-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.air-qc-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.air-qc-time { flex: none; font-size: 12.5px; color: var(--muted); }