@font-face {
  font-family: 'TextSist Manrope'; src: url('manrope-variable.ttf') format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
#recordingTools {
  --work-accent: #147b83; --work-hover: #0b666e; --work-button-ink: #ffffff;
  --work-tint: #eef8f8; --work-soft: #f3f7f8; --work-line: #dbe7ea;
  --work-ink: #23343f; --work-muted: #637780; --work-panel: #ffffff;
  --accent: var(--work-accent); --accent-text: var(--work-button-ink);
  --text: var(--work-ink); --muted: var(--work-muted); --line: var(--work-line);
  --panel: var(--work-panel); --panel-2: var(--work-soft);
  font-family: 'TextSist Manrope','Segoe UI',sans-serif;
}
:root[data-theme='dark'] #recordingTools {
  --work-accent: #74d9d5; --work-hover: #95e7e4; --work-button-ink: #122c30;
  --work-tint: #1b3035; --work-soft: #222d33; --work-line: #35474f;
  --work-ink: #eaf3f5; --work-muted: #a7bbc4; --work-panel: #192227;
}
.upload-card:has(#recordingTools) { background: var(--panel); border-color: var(--line); box-shadow: 0 8px 28px #23343f08; }
.upload-card:has(#recordingTools):focus-within { border-color: var(--line); box-shadow: 0 8px 28px #23343f08; }
#recordingTools, #recordingTools * { letter-spacing: 0; }
#recordingTools button, #recordingTools input, #recordingTools select, #recordingTools textarea { font-family: inherit; }
#recordingTools .tabs { position: relative; isolation: isolate; background: var(--work-soft); border-radius: 8px; gap: 4px; padding: 4px; margin-bottom: 28px; }
#recordingTools .tab {
  z-index: 1; display: flex; justify-content: center; align-items: center; gap: 8px;
  min-width: 0; min-height: 48px; padding: 12px 8px;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--work-muted);
  transition: color .2s ease;
}
#recordingTools .tab.active { color: var(--work-accent); background: transparent; border: 0; box-shadow: none; }
#recordingTools .tabs:not([data-recording-ready]) .tab.active { background: var(--work-panel); box-shadow: inset 0 0 0 1px var(--work-line); }
#recordingTools .tab:hover:not(:disabled) { color: var(--work-accent); }
#recordingTools .tab:focus:not(:focus-visible) { outline: none; }
#recordingTools .tab:focus-visible { outline: 2px solid var(--work-accent); outline-offset: 2px; }
#recordingTools .recording-tab-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; }
#recordingTools .recording-tab-short { display: none; }
#recordingTools #tabVideoLink[hidden] { display: none !important; }
#recordingTools .tab-indicator {
  display: block; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  border: 1px solid var(--work-line); border-radius: 6px; background: var(--work-panel);
  box-shadow: 0 2px 6px #23343f09;
  transition: transform .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .2s,opacity .15s;
}
#recordingTools .tab-content.active { animation: recording-surface-enter .3s ease-out both; }
#recordingTools #panelVideoLink form { padding: 8px 0 18px; gap: 22px; animation: none; }
#recordingTools #panelVideoLink h3 { font-size: 22px; line-height: 1.4; font-weight: 750; color: var(--work-ink); }
#recordingTools .video-link-heading { align-items: center; gap: 16px; }
#recordingTools .video-link-heading-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
#recordingTools .video-link-brand { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; background: #fff0f2; color: #c34e64; border-radius: 8px; }
:root[data-theme='dark'] #recordingTools .video-link-brand { background: #3a252e; color: #f39eae; }
#recordingTools .video-link-brand svg { display: block; width: 22px; height: 22px; }
#recordingTools .video-link-meta { font-size: 11px; gap: 10px; margin-top: 4px; color: var(--work-muted); }
#recordingTools .video-link-meta span+span { padding-left: 10px; }
#recordingTools .video-link-test { font-size: 10px; font-weight: 600; color: var(--work-accent); padding: 0; }
#recordingTools .video-link-entry { gap: 9px; margin-top: 4px; }
#recordingTools .video-link-entry>label { font-size: 12px; font-weight: 650; color: var(--work-muted); }
#recordingTools .video-link-url-field { position: relative; min-width: 0; }
#recordingTools .video-link-url-field>svg { position: absolute; left: 14px; top: 16px; width: 20px; height: 20px; color: var(--work-muted); pointer-events: none; }
#recordingTools #panelVideoLink input[type='url'] {
  height: 52px; padding: 12px 14px 12px 44px; border-radius: 8px;
  background: var(--work-soft); border-color: transparent; font-size: 14px; color: var(--work-ink);
}
#recordingTools #panelVideoLink input[type='url']::placeholder { color: var(--work-muted); opacity: .8; }
#recordingTools #panelVideoLink input[type='url']:hover:not(:disabled) { border-color: var(--work-line); }
#recordingTools #panelVideoLink input[type='url']:focus { background: var(--work-panel); border-color: var(--work-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--work-accent) 12%,transparent); }
#recordingTools #panelVideoLink .video-link-entry-row button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; border-radius: 8px; padding: 0 18px; font-size: 13px; font-weight: 700;
  background: var(--work-accent); color: var(--work-button-ink); border: 0;
  box-shadow: 0 3px 8px #147b8315;
  transition: background .2s,box-shadow .2s,transform .2s;
}
#recordingTools #panelVideoLink .video-link-entry-row button svg { display: block; width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; }
#recordingTools #panelVideoLink .video-link-entry-row button:hover:not(:disabled) { background: var(--work-hover); box-shadow: 0 5px 12px #147b8325; }
#recordingTools #panelVideoLink .video-link-entry-row button:hover:not(:disabled) svg { transform: translateX(3px); }
#recordingTools #panelVideoLink .video-link-entry-row button:active:not(:disabled) { transform: scale(.985); }
#recordingTools #contextCard { margin-top: 14px; border-color: var(--work-line); }
#recordingTools #contextCard summary { padding: 18px 0 8px; }
#recordingTools #contextCard .context-toggle-chip { color: var(--work-accent); background: var(--work-tint); }
#recordingTools #contextCard summary b { font-weight: 700; font-size: 13px; }
#recordingTools #contextCard summary small { font-size: 11px; }
#recordingTools .video-link-target { color: var(--work-accent); border-color: color-mix(in srgb,var(--work-accent) 40%,var(--work-line)); }
#recordingTools .video-link-wave i, #recordingTools .video-link-activity span { background: var(--work-accent); }
@media (max-width: 600px) {
  #recordingTools .tabs { margin-bottom: 22px; }
  #recordingTools .tab { gap: 6px; font-size: 11px; }
  #recordingTools .video-link-heading { align-items: flex-start; }
  #recordingTools .video-link-test { margin-left: 56px; }
  #recordingTools #panelVideoLink h3 { font-size: 19px; }
  #recordingTools #panelVideoLink input[type='url'] { font-size: 16px; }
}
@media (max-width: 480px) {
  #recordingTools .tab { flex-direction: column; gap: 5px; height: 60px; padding: 8px 4px; }
  #recordingTools .recording-tab-label { display: none; }
  #recordingTools .recording-tab-short { display: inline; }
}
@keyframes recording-surface-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #recordingTools .tab-indicator, #recordingTools .tab, #recordingTools #panelVideoLink .video-link-entry-row button, #recordingTools #panelVideoLink .video-link-entry-row button svg { transition: none; }
  #recordingTools .tab-content.active { animation: none; }
}