/* Shared Mediatavio component language for every tool page. */
:root {
  --mtv-violet: #6957d5;
  --mtv-violet-deep: #5140b4;
  --mtv-lime: #b8ef75;
  --mtv-ink: #17202b;
  --mtv-line: #dfe5e8;
  --mtv-motion: cubic-bezier(.2,.75,.25,1);
}
body[data-tool-theme] {
  --tool-accent: var(--mtv-violet) !important;
  --green: var(--mtv-lime) !important;
  --green-dark: #eff8e5 !important;
  --coral: var(--mtv-violet) !important;
  --blue: var(--mtv-violet) !important;
  --purple: var(--mtv-violet) !important;
  --cyan: #8bcf42 !important;
  --focus: var(--mtv-violet) !important;
}

main :is(button, a.button, .button, .btn, .download-button, .convert-button, .primary-button, .secondary-button, .icon-button, .cancel-button, .format-button, .control-button) {
  border-radius: 10px !important;
  transition: color .18s var(--mtv-motion), background-color .18s var(--mtv-motion),
    border-color .18s var(--mtv-motion), box-shadow .22s var(--mtv-motion),
    transform .22s var(--mtv-motion) !important;
}
main button:not(.drop-zone) {
  border: 1px solid #dcd7f4 !important;
  border-radius: 10px !important;
  background: #f3f1fc !important;
  color: #44378f !important;
}
main .hero-link, main a.button, main .button, main .btn, main .download {
  border: 1px solid var(--mtv-violet) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--mtv-violet), var(--mtv-violet-deep)) !important;
  color: #fff !important;
}
main .hero-link span { color: var(--mtv-lime) !important; }
main button[aria-pressed="true"]:not(.vcard) {
  border-color: var(--mtv-violet) !important;
  background: var(--mtv-violet) !important;
  color: #fff !important;
}
main :is(button, a.button, .button, .btn, .download-button, .convert-button, .primary-button, .secondary-button, .icon-button, .cancel-button, .format-button, .control-button):not(:disabled):not([aria-disabled="true"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgb(81 64 180 / 14%);
}
main :is(button, a.button, .button, .btn, .download-button, .convert-button, .primary-button, .secondary-button, .icon-button, .cancel-button, .format-button, .control-button):not(:disabled):active {
  transform: translateY(0) scale(.985);
}
main :is(button, a.button, .button, .btn, .download-button, .convert-button, .primary-button, .secondary-button, .icon-button, .cancel-button, .format-button, .control-button):focus-visible {
  outline: 3px solid rgb(105 87 213 / 30%) !important;
  outline-offset: 3px;
}
main :is(.download-button, .convert-button, .primary-button, .btn-primary, .btn-go, .btn-play, .btn-start, #submit, #export, #convertButton, #downloadButton, #go, #dl, #play, #transcribe, #detect) {
  border: 1px solid var(--mtv-violet) !important;
  background: linear-gradient(135deg, var(--mtv-violet), var(--mtv-violet-deep)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 5px 12px rgb(23 32 43 / 10%);
}
main :is(.download-button, .convert-button, .primary-button, .btn-primary, .btn-go, .btn-play, .btn-start, #submit, #export, #convertButton, #downloadButton, #go, #dl, #play, #transcribe, #detect):not(:disabled):hover {
  border-color: var(--mtv-violet-deep) !important;
  background: var(--mtv-violet-deep) !important;
  box-shadow: 0 9px 22px rgb(81 64 180 / 24%);
}
main :is(.icon-button, .secondary-button, .cancel-button, .format-button, .control-button, .btn-secondary) {
  border: 1px solid var(--mtv-line) !important;
  background: #f3f1fc !important;
  color: #44378f !important;
  font-weight: 650;
}
main :is(.mini, .chip, .wave-play-button, .mic-toggle, .mic-cancel, .slot-mic, .retry, .view-button) {
  border-color: #dcd7f4 !important;
  background: #f3f1fc !important;
  color: #5140b4 !important;
}
main :is(.mini, .chip, .wave-play-button, .mic-toggle, .mic-cancel, .slot-mic, .retry, .view-button)[aria-pressed="true"],
main :is(.mini, .chip, .wave-play-button, .mic-toggle, .mic-cancel, .slot-mic, .retry, .view-button).active {
  border-color: var(--mtv-violet) !important;
  background: var(--mtv-violet) !important;
  color: #fff !important;
}
main :is(.icon-button, .secondary-button, .cancel-button, .format-button, .control-button, .btn-secondary):not(:disabled):hover {
  border-color: #c5bdf1 !important;
  background: #eae6fb !important;
}
main :is(button, .download-button, .convert-button, .primary-button):disabled {
  box-shadow: none !important;
  transform: none !important;
  filter: saturate(.55);
}

main .drop-zone {
  position: relative;
  overflow: hidden;
  border: 1.5px dashed #b9b2e9 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #fff 10%, #f7f5ff 72%, #f1f9e9) !important;
  color: var(--mtv-ink) !important;
  transition: border-color .2s var(--mtv-motion), background .2s var(--mtv-motion),
    box-shadow .25s var(--mtv-motion), transform .25s var(--mtv-motion) !important;
}
main .drop-zone::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgb(184 239 117 / 15%) 48%, transparent 72%);
  transform: translateX(-100%);
}
main .drop-zone:hover, main .drop-zone.dragging, main .drop-zone:focus-visible {
  border-color: var(--mtv-violet) !important;
  background: linear-gradient(135deg, #fff 4%, #f0edff 72%, #f1f9e9) !important;
  box-shadow: 0 12px 30px rgb(81 64 180 / 10%), inset 0 0 0 1px rgb(105 87 213 / 8%);
  transform: translateY(-2px);
}
main .drop-zone:hover::after, main .drop-zone.dragging::after { opacity: 1; animation: mtv-drop-sweep 1.1s var(--mtv-motion) both; }
main .drop-zone strong { color: var(--mtv-ink) !important; }
main .drop-zone > span:not(.upload-icon) { color: #66717d !important; }
main .upload-icon, main .file-icon {
  position: relative;
  display: grid !important;
  place-items: center;
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px;
  border: 1px solid #d9d2f8 !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #eeeaff, #f6f4ff) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 6px 16px rgb(81 64 180 / 10%);
  animation: mtv-icon-arrive .55s var(--mtv-motion) both;
}
main .upload-icon::before {
  width: 25px;
  height: 25px;
  content: "";
  background: var(--mtv-violet);
  -webkit-mask: 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 16V4m0 0L7 9m5-5 5 5'/%3E%3Cpath d='M5 14v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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 16V4m0 0L7 9m5-5 5 5'/%3E%3Cpath d='M5 14v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
main .file-icon::before {
  width: 22px;
  height: 22px;
  content: "";
  background: var(--mtv-violet);
  -webkit-mask: 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='M4 10v4m4-8v12m4-15v18m4-14v10m4-7v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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='M4 10v4m4-8v12m4-15v18m4-14v10m4-7v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
main .drop-zone:hover .upload-icon, main .drop-zone.dragging .upload-icon { animation: mtv-icon-bob .8s var(--mtv-motion) infinite alternate; }

main :is(.workspace-band, .tool-shell, .effect-shell, .editor-shell, .upload-card, .panel, .result-panel, .waveform-player) {
  --tool-accent: var(--mtv-violet);
}
main :is(.card-icon, .file-icon, .upload-icon, .step, .step .n, .wave-icon, .tool-icon) {
  --tool-accent: var(--mtv-violet);
}
main .card-icon { border-color: #e2ddfa; background: #f0edff; color: #5140b4; }
main .card-icon.lime { border-color: #e0efcf; background: #eff8e5; color: #4f7b2b; }
main .card-icon.coral, main .card-icon.blue, main .card-icon.violet { background: #f0edff; color: #5140b4; }
main :is(.notice, .notice-banner, .site-banner, .callout, .tool-notice, .info-banner, .note:not(.err):not(.error)) {
  border-color: #ded8f6 !important;
  background: linear-gradient(110deg, #f4f1ff, #f8faf5) !important;
  color: #4f5662;
}
main :is(.notice, .notice-banner, .site-banner, .callout, .tool-notice, .info-banner, .note:not(.err):not(.error)) :is(strong, b, .icon) { color: #5140b4; }
main :is(.success-banner, .success-notice, .ready-banner) {
  border-color: #dcebc9 !important;
  background: linear-gradient(110deg, #f0f8e8, #f8faf5) !important;
  color: #466b28;
}
main :is(input[type="range"], input[type="checkbox"]), main progress { accent-color: var(--mtv-violet); }
main :is(.progress-track, progress) { accent-color: var(--mtv-violet); }
main :is(.progress-track > span, .progress-fill, progress::-webkit-progress-value) {
  background: linear-gradient(90deg, var(--mtv-violet), #9d8cf4 56%, var(--mtv-lime)) !important;
}
main :is(.is-processing, .processing, [aria-busy="true"]) { --tool-accent: var(--mtv-violet); }
main :is(#status.is-processing, .status.is-processing, .processing-status) {
  border-color: #d9d2f8 !important;
  color: #5140b4 !important;
  background: #f7f5ff !important;
}
main :is(#status.is-processing::before, .editor-shell #status.is-processing:before) {
  border-color: #d9d2f8 !important;
  border-top-color: var(--mtv-violet) !important;
  animation: mtv-loader 1.05s var(--mtv-motion) infinite !important;
}
main :is(.waveform-track, .waveform-player, .audio-comparison) { border-color: #e4e0f4; }
main :is(.waveform-track canvas, .editor-wave) { color: var(--mtv-violet) !important; }
main :is(.waveform-player, .file-row, .result-panel) { transition: box-shadow .25s var(--mtv-motion), border-color .25s var(--mtv-motion); }
main :is(.waveform-player, .file-row, .result-panel):hover { border-color: #d5cff2; box-shadow: 0 10px 26px rgb(81 64 180 / 7%); }
main :is(.effect-faq, .faq-band, .faq-section, #faq) h2 { color: var(--mtv-ink); }
main :is(.effect-faq, .faq-band, .faq-section, #faq) details {
  border-color: #e4e0f1 !important;
  transition: border-color .2s var(--mtv-motion), background-color .2s var(--mtv-motion), padding .2s var(--mtv-motion);
}
main :is(.effect-faq, .faq-band, .faq-section, #faq) details[open] {
  border-color: #cfc7f2 !important;
  background: linear-gradient(100deg, rgb(243 241 252 / 78%), transparent 80%);
}
main :is(.effect-faq, .faq-band, .faq-section, #faq) summary { transition: color .18s var(--mtv-motion); }
main :is(.effect-faq, .faq-band, .faq-section, #faq) summary:hover { color: var(--mtv-violet-deep); }
.hub-brand .brand-mark { background: var(--mtv-violet); box-shadow: 0 5px 14px rgb(81 64 180 / 18%); transition: transform .25s var(--mtv-motion), box-shadow .25s var(--mtv-motion); }
.hub-brand:hover .brand-mark { transform: rotate(0) scale(1.06); box-shadow: 0 8px 20px rgb(81 64 180 / 25%); }
.hub-header nav .home-tools-toggle, .hub-header .mobile-menu, .hub-header .mobile-tools-toggle {
  border: 1px solid #e2def6 !important;
  border-radius: 10px !important;
  background: #f5f3ff !important;
  color: #44378f !important;
  transition: transform .2s var(--mtv-motion), box-shadow .2s var(--mtv-motion), background .2s var(--mtv-motion) !important;
}
.hub-header nav .home-tools-toggle:hover, .hub-header .mobile-menu:hover, .hub-header .mobile-tools-toggle:hover {
  transform: translateY(-1px);
  background: #ece8ff !important;
  box-shadow: 0 6px 16px rgb(81 64 180 / 12%);
}
main :is(.progress-track i.indeterminate, .progress-track .indeterminate) { animation: mtv-progress 1.35s ease-in-out infinite alternate !important; }
main .is-active::before { animation: mtv-loader 1.05s var(--mtv-motion) infinite !important; }
main .spin { border-color: #d9d2f8 !important; border-top-color: var(--mtv-violet) !important; animation: mtv-loader 1.05s var(--mtv-motion) infinite !important; }
main .rec-dot.recording, main .recording .rec-dot { background: #ee6374 !important; animation: mtv-record-pulse 1.1s ease-in-out infinite !important; }
main .btn-rec.recording .rec-dot { animation: mtv-record-pulse 1.1s ease-in-out infinite !important; }

/* Keep the site-wide controls and notices aligned with the favicon palette. */
.tool-switch a:hover,
.tool-switch a[aria-current="page"] {
  border-color: #6957d5 !important;
  color: #5140b4 !important;
  background: #f0edff !important;
}
.tool-switch a:focus-visible { outline-color: #6957d5 !important; }
body[data-tool-theme] .nav-action,
body[data-tool-theme] .upload-cta {
  border-color: #6957d5 !important;
  background: linear-gradient(135deg, #6957d5, #5140b4) !important;
  color: #fff !important;
}
body[data-tool-theme] .nav-action:hover,
body[data-tool-theme] .upload-cta:hover { background: #5140b4 !important; }
body[data-tool-theme] .segmented button.active,
body[data-tool-theme] .compare-switch button.active,
body[data-tool-theme] .wave-play-button.is-playing,
body[data-tool-theme] .chip[aria-pressed="true"] {
  border-color: #6957d5 !important;
  background: #6957d5 !important;
  color: #fff !important;
}
.hub-header nav a[href="/youtube-to-mp3/"],
.hub-header nav a.home-youtube-link[aria-current="page"] {
  border: 1px solid #6957d5 !important;
  background: linear-gradient(135deg, #6957d5, #5140b4) !important;
  color: #fff !important;
}
.hub-header nav a[href="/youtube-to-mp3/"]:hover,
.hub-header nav a.home-youtube-link[aria-current="page"]:hover { background: #5140b4 !important; }
.hub-header .mobile-menu { cursor: pointer; }
main :is(.toast, .tooltip, .popover) {
  border: 1px solid #dcd7f4 !important;
  border-radius: 10px !important;
  background: #f3f1fc !important;
  color: #44378f !important;
}
main :is(.notice, .notice-banner, .site-banner, .callout, .tool-notice, .info-banner, .success-banner, .success-notice, .ready-banner) a {
  color: #5140b4 !important;
  text-decoration-color: #b8ef75 !important;
  text-underline-offset: 3px;
}
main :is(.accordion-trigger, .faq-toggle, .faq-link):focus-visible {
  outline: 3px solid rgb(105 87 213 / 30%) !important;
  outline-offset: 3px;
}
.bookmark-cta button {
  border-color: #dcd7f4 !important;
  border-radius: 10px !important;
  background: #f3f1fc !important;
  color: #44378f !important;
}
#status:not(.error):not([hidden]) {
  border: 1px solid #ded8f6 !important;
  border-radius: 12px !important;
  background: linear-gradient(110deg, #f4f1ff, #f8faf5) !important;
  padding: 16px !important;
}

@keyframes mtv-drop-sweep { to { transform: translateX(100%); } }
@keyframes mtv-icon-arrive { from { opacity: 0; transform: translateY(7px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mtv-icon-bob { to { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 10px 22px rgb(81 64 180 / 20%); } }
@keyframes mtv-loader { 0% { transform: rotate(0) scale(.9); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(.9); } }
@keyframes mtv-progress { from { transform: translateX(-18%); opacity: .65; } to { transform: translateX(18%); opacity: 1; } }
@keyframes mtv-record-pulse { 50% { box-shadow: 0 0 0 6px rgb(238 99 116 / 18%); transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  main *, main *::before, main *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Processing feedback: five sound bars and a measured, segmented timeline. */
body main :is(#status.is-processing,.status.is-processing,.processing-status){border-radius:14px!important;border-color:#dfd2ef!important;background:#faf7ff!important;color:#72529e!important;box-shadow:0 5px 20px #8b6bc712!important}
body main :is(#status.is-processing,.editor-shell #status.is-processing,.asr-actions button.is-active)::before,body main .spin{content:"";display:inline-block;width:28px;height:20px;flex:0 0 28px;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;background:linear-gradient(#8b6bc7 0 0) 0 50%/4px 35%,linear-gradient(#ab8dd6 0 0) 6px 50%/4px 70%,linear-gradient(#8b6bc7 0 0) 12px 50%/4px 100%,linear-gradient(#ab8dd6 0 0) 18px 50%/4px 65%,linear-gradient(#8b6bc7 0 0) 24px 50%/4px 30%;background-repeat:no-repeat;animation:mtv-wave-columns 1.2s ease-in-out infinite!important}
body main #status.is-processing{padding:14px 18px 14px 60px!important;min-height:48px;font-size:14px;line-height:1.6}
body main #status.is-processing::before{position:absolute;left:18px!important;top:calc(50% - 10px);margin:0}
body[data-tool-theme] main :is(.progress-track,.bar-outer,.model-progress){height:9px!important;border:0;border-radius:4px!important;overflow:hidden;background:repeating-linear-gradient(90deg,#eee7f6 0 6px,transparent 6px 9px)!important}
body[data-tool-theme] main :is(.progress-track>i,.progress-track>span,.bar-inner,.progress-fill,.model-progress>i){height:100%;border-radius:0!important;background:repeating-linear-gradient(90deg,#9877cc 0 6px,transparent 6px 9px)!important;transform:none!important;animation:none!important;transition:width .3s ease}
body[data-tool-theme] main .progress-track .indeterminate{background:repeating-linear-gradient(90deg,#8b6bc7 0 6px,#d9c9ed 6px 9px)!important;animation:mtv-wave-travel 1.4s linear infinite!important}
body main progress{appearance:none;display:block;overflow:hidden;width:100%;height:9px!important;border:0;border-radius:4px!important;background:repeating-linear-gradient(90deg,#eee7f6 0 6px,transparent 6px 9px);accent-color:#9877cc}
body main progress::-webkit-progress-bar{background:repeating-linear-gradient(90deg,#eee7f6 0 6px,transparent 6px 9px)}
body main progress::-webkit-progress-value{border-radius:0;background:repeating-linear-gradient(90deg,#9877cc 0 6px,transparent 6px 9px)!important;transition:width .3s ease}
body main progress::-moz-progress-bar{border-radius:0;background:repeating-linear-gradient(90deg,#9877cc 0 6px,transparent 6px 9px)!important}
body main progress:indeterminate{background:repeating-linear-gradient(90deg,#9877cc 0 6px,#eee7f6 6px 9px);animation:mtv-wave-travel 1.4s linear infinite!important}
body main progress:indeterminate::-webkit-progress-bar{background:transparent}
body main progress:indeterminate::-moz-progress-bar{background:transparent!important}
@keyframes mtv-wave-columns{0%,100%{background-size:4px 35%,4px 70%,4px 100%,4px 65%,4px 30%}50%{background-size:4px 85%,4px 40%,4px 55%,4px 95%,4px 60%}}
@keyframes mtv-wave-travel{to{background-position:36px 0}}
@media(prefers-reduced-motion:reduce){body main :is(#status.is-processing,.editor-shell #status.is-processing,.asr-actions button.is-active)::before,body main :is(.spin,progress:indeterminate),body[data-tool-theme] main .progress-track .indeterminate{animation:none!important}body main progress::-webkit-progress-value{transition:none}}

/* Shared footer contact link. */
body footer .footer-contact{color:#8b6bc7;overflow-wrap:anywhere;text-underline-offset:3px}body footer .footer-contact:hover{color:#7656a5;text-decoration:underline}body .hub-footer nav{flex-wrap:wrap;row-gap:10px}

/* Public account terms are readable before a conversion is started. */
.tool-account-note{max-width:760px;margin:12px auto 18px;padding:0 12px;color:#a089b3;font-size:11px;line-height:1.75;text-align:center;font-weight:400}.tool-account-note a{color:#9472b0;text-decoration:underline;text-underline-offset:3px}