.recorder-widget {
  position: absolute;
  z-index: 35;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: calc(100% - 24px);
  color: #fff4d5;
  font: 13px/1.4 "Segoe UI", Tahoma, sans-serif;
  text-align: left;
  color-scheme: dark;
}
.recorder-widget [hidden] { display: none !important; }
.recorder-widget[data-opened="true"] { top: 12px; }
.stage-wrap .recorder-widget { bottom: 76px; }
.recorder-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.recorder-widget button, .recorder-widget a.recorder-view {
  min-width: 0;
  border: 1px solid #ab9060;
  border-radius: 7px;
  background: #132e38;
  color: #fff4d5;
  padding: 8px 11px;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 2px 12px #0004;
  text-decoration: none;
  cursor: pointer;
}
.recorder-widget button:hover, .recorder-widget a.recorder-view:hover { background: #224552; border-color: #f1d18a; }
.recorder-widget button:disabled { opacity: .6; cursor: default; }
.recorder-widget :focus-visible { outline: 3px solid #f1d18a; outline-offset: 3px; }
.recorder-widget [data-gamepad-focus="true"] { outline: 3px solid #f1d18a; outline-offset: 3px; }
.recorder-toggle::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #ec826f; }
.recorder-widget[data-state="recording"] .recorder-toggle { background: #651f24; border-color: #f18d83; }
.recorder-widget[data-state="recording"] .recorder-toggle::before { border-radius: 1px; background: #fff; }
.recorder-widget[data-state="error"] .recorder-toggle { border-color: #f18d83; }
.recorder-compact-mic { padding: 5px 7px; border-radius: 5px; background: #0b2635ed; font-size: 11px; }
.recorder-widget[data-microphone-state="muted"] .recorder-compact-mic,
.recorder-widget[data-microphone-state="unavailable"] .recorder-compact-mic { color: #ffd18a; }
.recorder-level { width: 48px; height: 10px; }
.recorder-panel {
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 0;
  width: min(398px, calc(100vw - 48px));
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 7px;
  padding: 14px;
  border: 1px solid #b7975e;
  border-radius: 10px;
  background: #102a35f5;
  box-shadow: 0 12px 32px #0008;
}
.recorder-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recorder-heading strong { font-size: 16px; }
.recorder-widget .recorder-close { padding: 5px 8px; font-size: 12px; }
.recorder-guide { margin: 11px 0; color: #dae4df; }
.recorder-mic-choice { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.recorder-mic-choice input { width: 17px; height: 17px; margin: 0; accent-color: #edc974; }
.recorder-device { width: 100%; margin-top: 8px; padding: 7px 8px; border: 1px solid #819289; border-radius: 5px; background: #142c37; color: #fff4d5; font: inherit; }
.recorder-choice { display: block; margin: 9px 0; font-weight: 700; }
.recorder-capture-note, .recorder-format-note, .recorder-sharing-status { margin: 8px 0; font-size: 11px; color: #c4d2cb; overflow-wrap: anywhere; }
.recorder-widget .recorder-enable-sharing, .recorder-widget .recorder-disconnect { margin: 5px 4px 6px 0; font-size: 12px; }
.recorder-progress-box { margin: 11px 0; }
.recorder-progress-label { margin: 0 0 5px; font-size: 12px; overflow-wrap: anywhere; }
.recorder-progress { display: block; width: 100%; height: 9px; accent-color: #f1d18a; }
.recorder-preview { display: block; width: 100%; max-height: 200px; margin: 11px 0; aspect-ratio: 8 / 5; background: #000; border-radius: 6px; object-fit: contain; }
.recorder-status { margin: 12px 0 5px; font-weight: 650; overflow-wrap: anywhere; }
.recorder-widget[data-state="error"] .recorder-status { color: #ffbbad; }
.recorder-widget[data-state="saved"] .recorder-status { color: #b3e6b7; }
.recorder-mic-status, .recorder-folder { margin: 7px 0; color: #c4d2cb; font-size: 11px; overflow-wrap: anywhere; }
.recorder-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
@media (max-width: 600px) {
  .recorder-widget { right: 8px; bottom: 8px; max-width: calc(100% - 16px); }
  .recorder-widget[data-opened="true"] { top: 8px; }
  .stage-wrap .recorder-widget { bottom: 68px; }
  .recorder-panel { width: min(362px, calc(100vw - 32px)); padding: 11px; }
  .recorder-bar { gap: 5px; }
  .recorder-widget button { padding: 7px 9px; font-size: 12px; }
  .recorder-compact-mic { font-size: 10px; }
}