:root {
  --icon-record:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
  --icon-stop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='1'/%3E%3C/svg%3E");
  --icon-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4 21 12 7 20Z'/%3E%3C/svg%3E");
  --icon-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h5v16H5zM14 4h5v16h-5z'/%3E%3C/svg%3E");
  --icon-restart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9a8 8 0 1 1-1 7M5 3v6h6'/%3E%3C/svg%3E");
  --icon-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7'/%3E%3C/svg%3E");
  --icon-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 15v6h16v-6'/%3E%3C/svg%3E");
  --icon-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m10 8 4-4a4.2 4.2 0 0 1 6 6l-4 4M14 16l-4 4a4.2 4.2 0 0 1-6-6l4-4M8 16l8-8'/%3E%3C/svg%3E");
  --icon-pip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Crect x='12' y='11' width='7' height='6' rx='1' fill='black' stroke='none'/%3E%3C/svg%3E");
  --icon-plug:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v5M16 2v5M5 7h14M7 7v4a5 5 0 0 0 10 0V7M12 16v6'/%3E%3C/svg%3E");
  --icon-unplug:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v2M16 2v5M12 7h7M7 10v1a5 5 0 0 0 8 4M17 7v4M12 16v6M3 3l18 18'/%3E%3C/svg%3E");
  --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
  --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m5 5 14 14M19 5 5 19'/%3E%3C/svg%3E");
}
[data-control-icon=record] { --control-icon:var(--icon-record); }
[data-control-icon=stop] { --control-icon:var(--icon-stop); }
[data-control-icon=play] { --control-icon:var(--icon-play); }
[data-control-icon=pause] { --control-icon:var(--icon-pause); }
[data-control-icon=restart] { --control-icon:var(--icon-restart); }
[data-control-icon=trash] { --control-icon:var(--icon-trash); }
[data-control-icon=download] { --control-icon:var(--icon-download); }
[data-control-icon=link] { --control-icon:var(--icon-link); }
[data-control-icon=pip] { --control-icon:var(--icon-pip); }
[data-control-icon=plug] { --control-icon:var(--icon-plug); }
[data-control-icon=unplug] { --control-icon:var(--icon-unplug); }
[data-control-icon=plus] { --control-icon:var(--icon-plus); }
[data-control-icon=close] { --control-icon:var(--icon-close); }
html[data-theme] #connectionPage[data-record-booth] button[data-control-icon],
.recording-mini button[data-control-icon] {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:0!important;
}
html[data-theme] #connectionPage[data-record-booth] button[data-control-icon]>span { display:none; }
html[data-theme] #connectionPage[data-record-booth] button[data-control-icon]::before,
.recording-mini button[data-control-icon]::before {
  content:''; display:block; flex:0 0 var(--control-icon-size,20px);
  width:var(--control-icon-size,20px); height:var(--control-icon-size,20px);
  background:currentColor; mask:var(--control-icon) center/contain no-repeat; margin:0;
}
html[data-theme] #connectionPage[data-record-booth] button[data-control-icon]::after,
.recording-mini button[data-control-icon]::after {
  content:attr(data-control-label); font:600 var(--control-label-size,13px)/1.3 'Segoe UI','Yu Gothic UI',sans-serif; white-space:nowrap;
}
html[data-theme] #connectionPage[data-record-booth] button[data-control-label=''],
.recording-mini button[data-control-label=''] { gap:0; }
html[data-theme] #connectionPage[data-record-booth] button[data-control-icon][hidden] { display:none!important; }
html[data-theme] #connectionPage[data-record-booth] :is(#recordButton,#stopRecordButton,#newTakeButton) { --control-icon-size:25px; --control-label-size:19px; }
html[data-theme] #connectionPage[data-record-booth] :is(#playButton,#pauseButton) { --control-icon-size:26px; }
html[data-theme] #connectionPage[data-record-booth] #startButton { --control-label-size:11px; --control-icon-size:18px; gap:5px; }
html[data-theme] #connectionPage[data-record-booth] .take-actions button[data-control-icon] { justify-content:flex-start; }