/* Converter polish (Claude BFD92, 9 Oct 2026): Image Converter, PDF Converter and Audio Converter brought onto the same
   calm look as Image Compressor / Image Studio. White primary buttons, the engine's soft violet for anything selected,
   neutral panels (no mint), small uppercase section titles, 3-across centred format tiles. Loaded after each tool's CSS. */
.mx.cv, .mx.ac, .mx.pc { --btn: #e7e7ea; }
.cv .mx-logo-ic { color: #22d3ee; }
.cv .mx-sub { display: none; }

/* Panel tabs and section titles */
.cv .mx-tabs [aria-selected="true"] { color: #fff; background: rgba(255,255,255,.08); }
.cv .mx-side { background: #08080c; }
.cv .mx-side h2, .cv .mx-side .mx-sec > h3:first-child, .cv .cv-left h2, .cv .cv-left h3 { margin: 0 0 12px; color: #8a8d9b; font: 800 10.5px Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.cv .ac-guide h2, .cv .pc-guide h2 { color: #f4f4f5; font: 700 15px Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.cv .ac-guide h3, .cv .pc-guide h3 { color: #e4e4e7; font: 700 12.5px Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }

/* Format tiles: three across, centred, like Image Compressor's quick picks */
.cv .cv-formats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cv .cv-formats button { align-items: center; justify-content: center; gap: 2px; min-height: 0; padding: 11px 4px; text-align: center; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.02); }
.cv .cv-formats button b { font-size: 13.5px; letter-spacing: .01em; }
.cv .cv-formats button small { color: #71717a; font-size: 10px; line-height: 1.3; }
.cv .cv-formats button:hover { border-color: rgba(255,255,255,.18); }
.cv .cv-formats button[aria-pressed="true"] { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.08); box-shadow: none; }
.cv .cv-formats button[aria-pressed="true"] small { color: #a1a1aa; }

/* Quality presets and small pickers */
.cv .cv-presets button, .ac .ac-presets button { border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.02); color: #d4d4d8; font-weight: 700; }
.cv .cv-presets button:hover, .ac .ac-presets button:hover { color: #fff; border-color: rgba(255,255,255,.18); }
.ac .ac-presets button[aria-pressed="true"], .cv .cv-presets button[aria-pressed="true"] { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.08); color: #fff; }
.cv .cv-view button[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.1); }
.cv .mx-fx input, .cv .cv-check input, .ac .ac-check input, .ac progress, .pc progress { accent-color: #22d3ee; }
.cv select, .cv .cv-text input, .pc-pager input { border-color: rgba(255,255,255,.1) !important; border-radius: 10px !important; background: rgba(255,255,255,.03) !important; }
.cv select:focus-visible, .cv .cv-text input:focus-visible { outline: 0; border-color: rgba(255,255,255,.42) !important; }

/* Text, links, notes */
.cv .cv-output b { color: #fff; }
.cv .cv-link { color: #a1a1aa; }
.cv a.cv-link:hover { color: #fff; }
.cv .ac-guide a, .cv .pc-guide a { color: #22d3ee; }
.cv :is(button,input,a,select):focus-visible { outline: 2px solid rgba(255,255,255,.56); outline-offset: 3px; }

/* Privacy note and empty-state badge: quiet grey, not green */
.cv .cv-privacy { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); color: #a1a1aa; }
.cv .cv-privacy svg { color: #a1a1aa; }
.cv .cv-badge { border-color: rgba(255,255,255,.12); color: #a1a1aa; }
.cv .mx-empty b { font-size: 22px; }

/* Results: the same green-outline pill as Image Compressor, on a neutral card */
.ac-result, .pc-result { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); text-align: center; }
.ac-result b, .pc-result b { display: table; margin: 0 auto 8px; padding: 6px 14px; border: 1.5px solid #4ade80; border-radius: 999px; background: #000; color: #4ade80; font: 800 12.5px Inter, system-ui, sans-serif; }
.ac-result p, .pc-result p { color: #a1a1aa; }

/* Audio: waveform, player and progress on neutral glass */
.ac .mx-board { background: #0b0b10; border: 1px solid rgba(255,255,255,.08); }
.ac-player { border: 1px solid rgba(255,255,255,.08); background: rgba(10,10,15,.9); }
.ac-player small { color: #8a8a94; }
.ac-working { border: 1px solid rgba(255,255,255,.1); background: rgba(10,10,15,.94); color: #d4d4d8; }

/* PDF password: asked in place on the stage, not in a pop-up */
.pc-password { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px; background: rgba(8,8,12,.92); }
.pc-password[hidden] { display: none; }
.pc-password form { display: grid; justify-items: center; gap: 12px; width: min(380px, 100%); padding: 28px 24px 24px; border-radius: 22px; text-align: center;
  background: #0d0d14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.9); }
.pc-password svg { width: 34px; height: 34px; fill: none; stroke: #22d3ee; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-password h2 { margin: 0; color: #fff; font: 800 18px Inter, system-ui, sans-serif; }
.pc-password p { margin: 0; color: #a1a1aa; font-size: 13px; line-height: 1.55; }
.pc-password input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(0,0,0,.35); color: #fff; font: 600 15px Inter, system-ui, sans-serif; text-align: center; }
.pc-password input:focus-visible { outline: 0; border-color: rgba(255,255,255,.49); }
.pc-password form > div { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.pc-password form > div > * { flex: 1; justify-content: center; height: 40px; }