/*
 * AudioConvert 5.0 — unified design, 8 languages
 * Look inspired by the 4.9 editorial concept, rebuilt as a non-invasive layer.
 * IMPORTANT: no display:none, visibility:hidden, pointer-events, input positioning,
 *            or global control selectors. Original conversion markup remains intact.
 * Scope: body.acs-v50; no rules for global navigation, cookie banners, ads or footer.
 */
body.acs-v50 {
  --v50-surface: #122940;
  --v50-surface-2: #17334f;
  --v50-surface-deep: #0b1c31;
  --v50-border: rgba(120, 179, 226, .29);
  --v50-copy: #cee0f2;
  --v50-muted: #a8c3de;
  --v50-title: #f5faff;
  --v50-cyan: #76e0f2;
  --v50-blue: #92b4ff;
  --v50-radius: 21px;
}
/* These rules affect headings, not JavaScript-driven workbench behavior. */
body.acs-v50 :is(main, .hero, .content-section, .tool-shell, .av-tool, .editor) h1,
body.acs-v50 > h1 {
  color: var(--v50-title);
  font-size: clamp(1.95rem, 4.1vw, 3.35rem);
  line-height: 1.18;
  letter-spacing: -.028em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
body.acs-v50 .hero,
body.acs-v50 .av-intro {
  max-width: 1120px;
  margin-inline: auto;
}
body.acs-v50 .hero > p,
body.acs-v50 .av-intro {
  max-width: 76ch;
  line-height: 1.75;
  color: var(--v50-muted);
}
/* Workbench treatment: only existing top-level editor/converter surfaces.
 * Never change input display, upload overlay position, focus or progress mechanics. */
body.acs-v50 :is(section.editor, section.converter-card, section.av-card, main.wrap > section.converter, .tool-shell > section.converter-card),
body.acs-v50 :is(main.page, main.tool-shell, main.av-tool) > .converter-card {
  border: 1px solid var(--v50-border);
  border-radius: var(--v50-radius);
  background-color: var(--v50-surface);
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
  box-sizing: border-box;
}
body.acs-v50 :is(.editor, .converter-card, .converter, .av-card) :is(.dropzone, .acs-drop, .drop, .av-upload) {
  border-radius: 17px;
  border-color: rgba(102,209,244,.55);
  background-color: rgba(57,132,191,.075);
  box-sizing: border-box;
}
body.acs-v50 :is(.editor, .converter-card, .converter, .av-card) :is(.dropzone, .acs-drop, .drop, .av-upload):focus-within {
  outline: 2px solid rgba(119,222,246,.78);
  outline-offset: 3px;
}
body.acs-v50 :is(.editor, .converter-card, .converter, .av-card) :is(button, input[type="submit"], select, input[type="text"], input[type="number"]) {
  font-family: inherit;
  border-radius: 11px;
}
body.acs-v50 :is(.editor, .converter-card, .converter, .av-card) :is(button, a.btn, a.primary):focus-visible,
body.acs-v50 :is(.acs-pro-guide-v2, .acs-ai-guide, .acs-tool-depth, .acs-editorial-guide, .seo-content) a:focus-visible,
body.acs-v50 :is(.acs-pro-guide-v2, .acs-ai-guide, .acs-tool-depth, .acs-editorial-guide, .seo-content) summary:focus-visible {
  outline: 3px solid var(--v50-cyan);
  outline-offset: 3px;
}
/* Status / output panels retain their hidden and disabled states. */
body.acs-v50 :is(.result-panel, .progress-panel, .file-panel, .av-result, .acs-result) {
  border-radius: 15px;
  overflow-wrap: anywhere;
}
/* Reading surfaces: a single visual language without wrapping or hiding text. */
body.acs-v50 :is(section.seo-content, section.acs-ai-guide, section.acs-editorial-guide,
                    section.acs-tool-depth, section.acs-pro-guide-v2,
                    section.studio-guide, section.ac-unique-guide,
                    section.acs-unique-guide, section.acs-pro-guide) {
  box-sizing: border-box;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--v50-border);
  border-radius: 24px;
  background: linear-gradient(150deg, var(--v50-surface-2), var(--v50-surface-deep));
  color: var(--v50-copy);
  box-shadow: 0 16px 48px rgba(0,0,0,.13);
  overflow-wrap: anywhere;
}
body.acs-v50 section.info {
  box-sizing: border-box;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 19px;
  border: 1px solid var(--v50-border);
  background: linear-gradient(145deg, var(--v50-surface-2), var(--v50-surface-deep));
}
body.acs-v50 :is(.seo-content, .acs-editorial-guide, .acs-ai-guide, .acs-tool-depth, .acs-pro-guide-v2, .info) :is(h2, h3, h4) {
  color: var(--v50-title);
  line-height: 1.34;
  overflow-wrap: anywhere;
}
body.acs-v50 :is(.seo-content, .acs-editorial-guide, .acs-ai-guide, .acs-tool-depth, .acs-pro-guide-v2, .info) :is(p, li) {
  color: var(--v50-copy);
  line-height: 1.78;
  overflow-wrap: anywhere;
}
body.acs-v50 :is(.seo-content, .acs-editorial-guide, .acs-ai-guide, .acs-tool-depth, .acs-pro-guide-v2) a:not(.btn) {
  color: #8ddff7;
  text-underline-offset: 3px;
}
/* Existing 3-step and highlights from the V4.8/V4.9 concept. */
body.acs-v50 .acs-pro-guide-v2 .acs-pro-step-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
body.acs-v50 .acs-pro-guide-v2 .acs-pro-step {
  border: 1px solid rgba(130,178,230,.27);
  border-radius: 16px;
  background: var(--v50-surface-2);
  padding: 18px;
  min-width: 0;
}
body.acs-v50 .acs-pro-guide-v2 .acs-pro-step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg,var(--v50-cyan),var(--v50-blue));
  color: #082137;
  font-weight: 800;
}
body.acs-v50 .acs-pro-guide-v2 .acs-pro-highlights {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
body.acs-v50 .acs-pro-guide-v2 .acs-pro-highlight {
  padding: 19px;
  border-radius: 16px;
  border: 1px solid var(--v50-border);
  background: rgba(71,138,197,.10);
  min-width: 0;
}
body.acs-v50 .acs-pro-guide-v2 .acs-pro-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.acs-v50 .acs-pro-guide-v2 .acs-pro-menu a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--v50-border);
  background: rgba(35,75,112,.5);
  border-radius: 11px;
  padding: 9px 13px;
  color: var(--v50-title);
  text-decoration: none;
}
/* Optional native FAQ: only style preexisting details; never add JS accordions. */
body.acs-v50 :is(.acs-pro-faq, .acs-ai-guide, .acs-editorial-guide, .acs-tool-depth) details {
  border: 1px solid rgba(116,176,226,.3);
  border-radius: 13px;
  background: var(--v50-surface-deep);
  margin-block: 10px;
}
body.acs-v50 :is(.acs-pro-faq, .acs-ai-guide, .acs-editorial-guide, .acs-tool-depth) details > summary {
  cursor: pointer;
  padding: 14px 17px;
  color: var(--v50-title);
  font-weight: 700;
}
body.acs-v50 :is(.acs-pro-faq, .acs-ai-guide, .acs-editorial-guide, .acs-tool-depth) details > :not(summary) {
  margin-inline: 17px;
}
/* Existing editorial tiles/cards keep their content. */
body.acs-v50 :is(.acs-guide-mini, .acs-pro-chip, .acs-guide-card, .acs-cutter-card) {
  border-radius: 14px;
  border-color: var(--v50-border);
}
body.acs-v50 .acs-cutter-card-grid,
body.acs-v50 .acs-editorial-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
/* Related links: style existing lists only; never duplicate/reorder the links. */
body.acs-v50 :is(.acs-related-v1, .acs-related-bottom, .related) {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
body.acs-v50 :is(.tool-links, .seo-links, .acs-related-v1 .links) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.acs-v50 :is(.tool-links, .seo-links) a {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  min-height: 42px;
  border: 1px solid rgba(116,176,226,.32);
  border-radius: 11px;
  color: #c2e9ff;
  background: rgba(35,79,116,.52);
  text-decoration: none;
}
/* Long articles and tables: preserve semantic order. */
body.acs-v50 :is(.acs-pro-article, .acs-tool-depth, .acs-editorial-guide) table {
  display: block;
  width: 100%;
  overflow-x: auto;
  max-width: 100%;
}
body.acs-v50 :is(.acs-pro-article, .acs-tool-depth, .acs-editorial-guide) :target {
  scroll-margin-top: 115px;
}
@media (max-width: 800px) {
  body.acs-v50 .acs-pro-guide-v2 .acs-pro-step-grid,
  body.acs-v50 .acs-pro-guide-v2 .acs-pro-highlights,
  body.acs-v50 .acs-cutter-card-grid,
  body.acs-v50 .acs-editorial-grid {
    grid-template-columns: minmax(0,1fr);
  }
}
@media (max-width: 560px) {
  body.acs-v50 :is(section.seo-content, section.acs-ai-guide, section.acs-editorial-guide,
                      section.acs-tool-depth, section.acs-pro-guide-v2,
                      section.studio-guide, section.ac-unique-guide,
                      section.acs-unique-guide) {
    width: calc(100% - 24px);
    padding: 19px;
    border-radius: 18px;
  }
  body.acs-v50 :is(section.editor, section.converter-card, section.av-card) {
    max-width: calc(100% - 20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.acs-v50 :is(.tool-links, .seo-links) a { transition: none; }
}