#videoStage .media-grid-toolbar {
  position: relative;
  z-index: 5;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  color: var(--text, #eef4ff);
}
#videoStage .media-grid-toolbar > strong { font-size: 13px; }
#videoStage [data-grid-count] { margin-left: 8px; font-weight: 400; opacity: .75; white-space: nowrap; }
#videoStage .media-grid-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#videoStage .media-grid-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--line, #34465c);
  border-radius: 7px;
  color: inherit;
  background: var(--panel, #111b29);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#videoStage .media-grid-toolbar button:hover { filter: brightness(1.2); }
#videoStage .media-grid-toolbar button:focus-visible,
#videoStage .media-grid-source:focus-within { outline: 2px solid var(--accent, #6faeff); outline-offset: 2px; }
#videoStage .media-grid-toolbar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
#videoStage .media-grid-toolbar b { font-weight: 600; }
#videoStage [hidden] { display: none !important; }
#videoStage .media-grid-picker {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 8px);
  width: min(380px, 100%);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line, #34465c);
  border-radius: 10px;
  background: var(--panel, #111b29);
  box-shadow: 0 12px 40px #0008;
}
#videoStage .media-grid-picker-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
#videoStage .media-grid-picker-heading strong { font-size: 13px; }
#videoStage .media-grid-source { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1px solid var(--line, #34465c); cursor: pointer; }
#videoStage .media-grid-source input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent, #6faeff); }
#videoStage .media-grid-source span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
#videoStage .media-grid-picker p { margin: 10px 0 0; font-size: 11px; opacity: .75; }
#videoStage:not(:fullscreen) .media-grid-picker { position: static; flex: 1 0 100%; width: 100%; max-height: 220px; box-sizing: border-box; }
#videoStage .media-grid-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 100px; padding: 20px; text-align: center; color: inherit; }
#videoStage > .video-tile[data-grid-hidden="true"] { display: none !important; }
#videoStage .media-tile-grid { top: auto; bottom: 10px; right: 10px; }
#videoStage .video-tile > span { max-width: calc(100% - 65px); }
#videoStage:fullscreen {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--media-grid-columns, 2), minmax(0, 1fr)) !important;
  grid-template-rows: max-content repeat(var(--media-grid-rows, 1), minmax(0, 1fr)) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #060a10 !important;
  color: #eef4ff !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  --panel: #111b29;
  --line: #34465c;
  --text: #eef4ff;
}
#videoStage:fullscreen::backdrop { background: #060a10; }
#videoStage:fullscreen::before,
#videoStage:fullscreen::after { display: none !important; }
#videoStage:fullscreen .media-grid-toolbar { padding: 0 0 4px; }
#videoStage:fullscreen .media-grid-toolbar > strong { font: 600 15px system-ui, sans-serif; }
#videoStage:fullscreen .media-grid-toolbar button {
  position: relative !important;
  color: #eef4ff !important;
  background: #111b29 !important;
  border: 1px solid #34465c !important;
  border-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  clip-path: none !important;
  font-family: system-ui, sans-serif !important;
  font-size: 14px;
}
#videoStage:fullscreen .media-grid-toolbar button::before,
#videoStage:fullscreen .media-grid-toolbar button::after { display: none !important; }
#videoStage:fullscreen > .video-tile {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 1px solid #34465c !important;
  border-image: none !important;
  background: #000 !important;
}
#videoStage:fullscreen > .video-tile video { object-fit: contain !important; }
#videoStage:fullscreen .media-tile-action {
  z-index: 4;
  opacity: 1 !important;
  color: #fff !important;
  background: #111b29e8 !important;
  border: 1px solid #63758c !important;
  border-image: none !important;
  box-shadow: none !important;
  clip-path: none !important;
}
#videoStage:fullscreen .media-tile-action::before,
#videoStage:fullscreen .media-tile-action::after { display: none !important; }
#videoStage:fullscreen .media-tile-action svg { stroke: #fff !important; }
#videoStage:fullscreen .media-tile-grid { display: none !important; }
#videoStage:fullscreen > .video-tile > span { max-width: calc(100% - 20px); }
#videoStage:fullscreen .media-grid-empty { grid-row: 2 / -1; }
@media (max-width: 600px) {
  #videoStage .media-grid-toolbar { align-items: flex-start; }
  #videoStage .media-grid-actions { width: 100%; }
  #videoStage .media-grid-actions button { flex: 1; padding: 7px 9px; }
}