:root {
  --ui-bg: #08090c;
  --ui-surface: #111217;
  --ui-surface-2: #15171d;
  --ui-surface-3: #1d1f27;
  --ui-border: #272a33;
  --ui-border-strong: #3b3f4b;
  --ui-text: #ffffff;
  --ui-muted: #8d929f;
  --ui-muted-2: #676c79;
  --ui-accent: #8e98ff;
  --ui-accent-soft: #e5e8ff;
  --ui-hover-bg: #111827;
  --ui-hover-bg-strong: #172238;
  --ui-hover-border: #344563;
  --ui-hover-text: #aebfe5;
  --ui-hover-shadow: 0 14px 34px rgba(2, 7, 18, 0.4), 0 0 0 1px rgba(67, 89, 133, 0.14);
  --ui-danger: #ff929f;
  --ui-radius: 22px;
  --ui-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  color-scheme: dark;
  background: var(--ui-bg);
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ui-text);
  background: radial-gradient(circle at 50% -12%, rgba(91, 108, 255, 0.17), transparent 38rem), var(--ui-bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body::before,
body::after { display: none !important; content: none !important; }

button,
input,
select,
textarea { font: inherit; }

button { min-height: 44px; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: 0.45; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

[hidden],
.hidden { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 30000;
  transform: translateY(-150%);
  padding: 10px 14px;
  color: #0b0c0f;
  background: #fff;
  border-radius: 10px;
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.cs-header {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  right: auto;
  left: auto;
  transform: none;
  z-index: 10050;
  width: min(700px, 100%);
  min-height: 60px;
  display: block;
  flex: 0 0 auto;
  margin: 0 auto;
  padding: 8px 10px;
  color: #eef0ff;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36), inset 0 0 32px rgba(77, 102, 255, 0.055);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.cs-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr);
  align-items: center;
  gap: 12px;
}

.cs-brand {
  grid-column: 2;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#langSelector {
  grid-column: 1;
  justify-self: start;
  width: auto;
  max-width: 155px;
  min-height: 42px;
  margin: 0;
  padding: 0 34px 0 12px;
  color: #d8dbe5;
  background-color: rgba(11, 12, 17, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}

.cs-title {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  text-shadow: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.45px;
  cursor: pointer;
  -webkit-text-fill-color: currentColor;
}

.new-design-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  color: #b9c7e6;
  background: rgba(38, 57, 87, 0.72);
  border: 1px solid rgba(113, 133, 170, 0.42);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cs-burger,
.cs-nav-close {
  width: auto;
  min-width: 44px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  color: #fff;
  background: rgba(11, 12, 17, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}

.cs-burger {
  grid-column: 3;
  justify-self: end;
  width: max-content;
  min-width: 0;
  max-width: 112px;
  padding-inline: 13px;
}

.cs-burger:hover,
.cs-nav-close:hover {
  color: #fff;
  background: var(--ui-hover-bg-strong);
  border-color: var(--ui-hover-border);
  box-shadow: var(--ui-hover-shadow);
  transform: none;
}

/* Complete production menu, with the redesign styling */
.cs-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 90100;
  width: min(460px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #f5f6fa;
  background: #0d0e12;
  border: 0;
  border-left: 1px solid var(--ui-border);
  border-radius: 0;
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
  transform: none;
}

.cs-nav-scroll { flex: 1; padding: max(24px, env(safe-area-inset-top)) 22px 92px; overflow-y: auto; }

.cs-block {
  margin: 0 0 14px;
  padding: 18px;
  color: #f6f7fb;
  background: linear-gradient(145deg, var(--ui-surface-2), #0f1015);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  box-shadow: none;
}

.cs-block h2 { margin: 0 0 10px; color: #fff; font-size: 17px; letter-spacing: -0.35px; }
.cs-block p,
.cs-block li,
.cs-block summary { color: #a5a9b5; font-size: 13px; line-height: 1.55; }
.cs-block a { color: #ccd1ff; }

.cs-nav-close {
  position: absolute;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 18px;
  width: calc(100% - 36px);
  color: #0c0d10;
  background: #fff;
  font-weight: 700;
}
.cs-nav-close:hover { color: #0c0d10; background: var(--ui-accent-soft); }

#csNav .cs-nav-close {
  color: #0c0d10 !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}

.cs-nav-scroll {
  scrollbar-color: #353846 transparent;
  scrollbar-width: thin;
}

.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 90000;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Application screens */
.app-shell {
  position: relative;
  right: auto;
  left: auto;
  width: min(1440px, 100%);
  flex: 1 0 auto;
  display: block;
  margin: 0 auto;
  padding: 0;
}

.app-screen { width: 100%; min-height: clamp(610px, calc(100dvh - 175px), 900px); }

.start-screen,
.source-screen { display: grid; place-items: center; padding: 54px 24px 34px; }

.start-content { width: min(880px, 100%); text-align: center; }

.start-title {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: clamp(-2.8px, -0.05em, -1.7px);
}

.start-title strong {
  color: #fff;
  background: linear-gradient(90deg, #fff 15%, #b9c0ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 720;
}

.start-brand-line {
  display: block;
  white-space: nowrap;
}

#introText {
  width: min(690px, 100%);
  margin: 0 auto 42px;
  padding: 0;
  color: #969ba8;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
}

.source-choices {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}

.source-card {
  position: relative;
  width: 100%;
  min-height: 214px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0;
  padding: 28px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  background: linear-gradient(145deg, #15171d, #0f1015);
  border: 1px solid #24262e;
  border-radius: 24px;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.source-card::before {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 190px;
  height: 190px;
  content: "";
  background: rgba(96, 113, 255, 0.14);
  border-radius: 50%;
  filter: blur(15px);
  transition: transform 0.25s ease, background 0.25s ease;
}

.source-card:hover { transform: translateY(-3px); color: #fff; background: linear-gradient(145deg, #172033, #0e1420); border-color: var(--ui-hover-border); box-shadow: var(--ui-hover-shadow); }
button.source-card:hover::before { transform: scale(1.18); background: rgba(43, 64, 105, 0.3); }

.source-icon {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #20222a;
  border: 1px solid #30323b;
  border-radius: 14px;
  font-size: 16px;
}

.source-title { position: relative; z-index: 1; margin: 0 0 7px; font-size: 24px; font-weight: 680; line-height: 1.1; letter-spacing: -0.75px; }
.source-description { position: relative; z-index: 1; color: #858996; font-size: 14px; }
.source-arrow { position: absolute; right: 25px; bottom: 27px; color: #8e93a1; font-size: 22px; }

/* Source screens */
.source-screen { position: relative; }

.back-button {
  position: absolute;
  top: 38px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  color: #aaaeb8;
  background: #121318;
  border: 1px solid #272a32;
  border-radius: 12px;
  box-shadow: none;
  font-size: 13px;
  width: auto !important;
  max-width: max-content !important;
  right: auto !important;
}
.back-button:hover { color: #fff; background: #191b21; border-color: #3a3d47; transform: none; }

.source-content { width: min(680px, 100%); text-align: center; }
.source-mode-panel { width: 100%; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }

.eyebrow,
.panel-eyebrow { margin: 0 0 11px; color: #777c89; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 1.55px; }

.source-content h2 { margin: 0; color: #fff; font-size: clamp(38px, 5vw, 58px); font-weight: 560; line-height: 1.06; letter-spacing: -2.2px; }

.help-text {
  width: min(620px, 100%);
  margin: 0 auto 18px !important;
  padding: 12px 14px;
  color: #d9dcef;
  background: #171923;
  border: 1px solid #34384a;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
}

#ytMaintenance {
  width: min(620px, 100%);
  margin: 0 auto 18px !important;
  padding: 12px 15px !important;
  color: #ffe0a3 !important;
  background: rgba(217, 164, 65, 0.1) !important;
  border: 1px solid rgba(217, 164, 65, 0.5) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.youtube-input {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 38px 0 0;
  padding: 7px;
  background: #111217;
  border: 1px solid #24262d;
  border-radius: 18px;
}

#youtube-mode .youtube-input #url {
  width: 100%;
  min-width: 0;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  display: block;
  margin: 0;
  padding: 0 17px;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  outline: none;
}
.youtube-input #url::placeholder { color: #575b67; }

#youtube-mode .youtube-input #convertBtn {
  width: auto;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 23px;
  color: #0d0e11;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}
#convertBtn:hover:not(:disabled) { color: #0d0e11; background: var(--ui-accent-soft); transform: none; }
#convertBtn img { width: 18px; height: 18px; margin-right: 7px; object-fit: contain; filter: brightness(0); }

.file-drop {
  width: 100%;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 38px 0 0;
  padding: 28px;
  color: #fff;
  background: #111217;
  border: 1px dashed #393c46;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.file-drop:hover { background: #15161c; border-color: #686d7b; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.file-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 3px; color: #fff; background: #20222a; border: 1px solid #30323b; border-radius: 15px; }
.file-drop strong { font-size: 16px; }
.file-drop > span:not(.file-icon) { color: #737884; font-size: 13px; }
.file-drop strong,
.file-drop > span:not(.file-icon) { display: block; width: 100%; text-align: center; }
.file-drop .selected-file-name { max-width: 100%; overflow: hidden; color: #adb2c0; text-overflow: ellipsis; white-space: nowrap; }

/* Editor */
.editor-screen { padding: 44px 0 34px; }

.editor-layout {
  width: 100%;
  min-height: clamp(620px, calc(100dvh - 185px), 850px);
  display: grid;
  grid-template-columns: 190px minmax(0, 820px) 190px;
  grid-template-areas: "source editor presets" ". export .";
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 22px 60px;
  margin: 0;
}

.editor-content { grid-area: editor; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.editor-heading { width: 100%; }
.editor-heading .eyebrow { margin-bottom: 9px; }

.editor-heading h2 {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(25px, 2.45vw, 36px);
  font-weight: 570;
  line-height: 1.1;
  letter-spacing: -1.1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-source { margin: 9px 0 0; color: #6f7480; font-size: 13px; }

.audio-player {
  width: 100%;
  margin: 26px 0 0;
  padding: 14px;
  background: linear-gradient(145deg, #15171d, #0f1015);
  border: 1px solid #24262e;
  border-radius: 22px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.waveform-wrap { min-height: 98px; display: flex; align-items: center; gap: 15px; }

#mainToggleBtn.play-button {
  flex: 0 0 50px;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  color: transparent;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-size: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

#mainToggleBtn.play-button:hover:not(:disabled) { transform: scale(1.04); background: var(--ui-accent-soft); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
#mainToggleBtn.play-button img { width: 18px !important; height: 18px !important; margin: 0 !important; object-fit: contain; filter: brightness(0); }

.waveform-main { min-width: 0; flex: 1; }

#waveform {
  width: 100%;
  min-height: 64px;
  margin: 0 !important;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
#waveform > div,
#waveform wave { max-width: 100% !important; }

#progressSlider {
  width: 100%;
  height: 4px;
  display: block !important;
  margin: 3px 0 0 !important;
  padding: 0;
  background: #202c42;
  border: 0;
  box-shadow: 0 0 0 1px rgba(68, 89, 126, 0.24), 0 0 12px rgba(31, 48, 77, 0.5);
}

.waveform-time {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 0 !important;
  color: #727784;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.waveform-time img { display: none !important; }

.audio-settings { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }

.setting {
  min-width: 0;
  padding: 19px;
  background: linear-gradient(145deg, #15171d, #101116);
  border: 1px solid #24262e;
  border-radius: 19px;
  text-align: left;
}

.setting-header {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 18px !important;
  color: #fff;
  font-size: 13px;
  font-weight: 630;
  line-height: 1.2;
}

.setting-header span {
  min-width: 44px;
  padding: 5px 8px;
  color: #bcc0cb;
  background: #20222a;
  border: 1px solid #2c2e37;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 550;
  text-align: center;
  white-space: nowrap;
}

#speed,
#bass,
#reverb,
#progressSlider { appearance: none; -webkit-appearance: none; outline: none; background: #2b2d36; border: 0; border-radius: 999px; }

#speed,
#bass,
#reverb { width: 100%; height: 5px; display: block !important; margin: 0 !important; }

#speed::-webkit-slider-thumb,
#bass::-webkit-slider-thumb,
#reverb::-webkit-slider-thumb,
#progressSlider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

#speed::-moz-range-thumb,
#bass::-moz-range-thumb,
#reverb::-moz-range-thumb,
#progressSlider::-moz-range-thumb { width: 16px; height: 16px; background: #fff; border: 0; border-radius: 50%; }

.side-panel {
  width: 190px;
  padding: 17px;
  background: linear-gradient(145deg, #15171d, #101116);
  border: 1px solid #24262e;
  border-radius: 22px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.source-panel { grid-area: source; }
.preset-panel { grid-area: presets; display: block; margin: 0; }
.side-panel-header { margin: 0 0 13px; text-align: center; }
.side-panel-header .panel-eyebrow { display: block; margin: 0; }
.side-panel-header h3 { margin: 0; color: #7a7f8c; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 1.4px; }

.source-panel-list,
.presets-list { display: flex; flex-direction: column; gap: 7px; }

.source-panel-button,
.preset-btn {
  width: 100%;
  min-height: 44px;
  margin: 0;
  color: #fff;
  background: #111217;
  border: 1px solid #282a32;
  border-radius: 13px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.source-panel-button { min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; }

.source-panel-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #cbd0ff;
  background: rgba(112, 125, 255, 0.12);
  border: 1px solid rgba(143, 154, 255, 0.22);
  border-radius: 11px;
}

.source-panel-button:hover,
.preset-btn:hover,
.preset-btn.active,
.preset-btn[aria-pressed="true"] { color: #fff; background: var(--ui-hover-bg-strong); border-color: var(--ui-hover-border); box-shadow: var(--ui-hover-shadow); transform: translateY(-1px); }

@media (min-width: 1181px) {
  .source-panel { transform: translateY(57px); }
}

/* Export area: production download mechanism unchanged */
.export-section {
  grid-area: export;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-self: center;
  margin: 0;
}

.export-format { display: flex; align-items: center; gap: 8px; padding: 6px 7px 6px 14px; background: #111217; border: 1px solid #24262d; border-radius: 15px; }
.export-label { color: #737884; font-size: 11px; white-space: nowrap; }
.download-menu { position: relative; display: block; margin: 0; }
#downloadFormatBtn { display: none !important; }

#downloadDropdown {
  position: static;
  width: auto;
  min-width: 0;
  display: flex !important;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  visibility: visible !important;
  opacity: 1 !important;
  clip: auto !important;
  transform: none !important;
  pointer-events: auto !important;
}
#downloadDropdown li { display: block !important; margin: 0; padding: 0; }

.format-btn {
  min-width: 48px;
  min-height: 36px;
  margin: 0;
  padding: 0 11px;
  color: #858a96;
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 680;
}

#downloadDropdown li[aria-selected="true"] .format-btn { color: #0c0d10; background: #fff; box-shadow: none; transform: none; }
.format-btn:hover { color: #fff; background: var(--ui-hover-bg-strong); border-color: var(--ui-hover-border); box-shadow: none; transform: none; }

#downloadMainBtn {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0 20px;
  color: #0b0c0f;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
#downloadMainBtn:hover:not(:disabled) { color: #fff; background: var(--ui-hover-bg-strong); box-shadow: var(--ui-hover-shadow); transform: translateY(-1px); }

/* Footer */
.cs-footer {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0 auto;
  padding: 16px 18px;
  color: #616672;
  background: transparent;
  border: 0;
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.cs-footer::after { grid-column: 3; content: ""; }

.cs-footer #copyright.footer-copy {
  position: static;
  inset: auto;
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #626772;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  opacity: 1;
  transform: none;
}

.footer-links {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  line-height: 1;
}

.cs-footer a,
.footer-separator {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  line-height: 1;
}

.cs-footer a { padding: 0 4px; color: #777c88; text-decoration: none; text-shadow: none; }
.cs-footer a:hover { color: var(--ui-hover-text); background: rgba(35, 50, 81, 0.36); text-shadow: none; box-shadow: none; }
.cs-footer .footer-separator { padding: 0; color: #353b49; font-size: 11px; font-weight: 600; opacity: 1; }

@media (min-width: 1024px) {
  .cs-footer {
    position: fixed;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cs-footer::after { display: none; }

  .cs-footer #copyright.footer-copy {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
  }

  .footer-links {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 36px);
    flex-wrap: nowrap;
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }
}

/* Neutralise les reflets roses hérités de l'ancienne interface au survol. */
button.cs-burger:hover::before,
button.cs-nav-close:hover::before,
button.back-button:hover::before,
button.source-panel-button:hover::before,
button.preset-btn:hover::before,
button.format-btn:hover::before,
button#convertBtn:hover::before,
button#downloadMainBtn:hover::before,
button#mainToggleBtn:hover::before {
  background: none;
  box-shadow: none;
  opacity: 0;
}

button.preset-btn:hover::after { opacity: 0; }

button.cs-burger:hover:not(:disabled),
button.cs-nav-close:hover:not(:disabled),
button.back-button:hover:not(:disabled),
button.source-panel-button:hover:not(:disabled),
button.preset-btn:hover:not(:disabled),
button#convertBtn:hover:not(:disabled),
button#mainToggleBtn:hover:not(:disabled),
button#downloadMainBtn:hover:not(:disabled) {
  color: #fff;
  background: var(--ui-hover-bg-strong);
  border-color: var(--ui-hover-border);
  box-shadow: var(--ui-hover-shadow);
}

button.source-card:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(145deg, #172033, #0e1420);
  border-color: var(--ui-hover-border);
  box-shadow: var(--ui-hover-shadow);
}

.file-drop:hover {
  background: var(--ui-hover-bg);
  border-color: var(--ui-hover-border);
  box-shadow: var(--ui-hover-shadow);
}

/* Rattache visuellement le retour au formulaire sur les grands écrans. */
@media (min-width: 901px) {
  .source-content { transform: translateY(-32px); }

  .back-button {
    left: max(24px, calc(50% - 340px));
  }
}

/* Consent */
.consent {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: auto;
  z-index: 15000;
  width: min(440px, calc(100% - 32px));
  margin: 0;
  padding: 18px;
  color: #eceef4;
  background: rgba(17, 18, 23, 0.98);
  border: 1px solid var(--ui-border);
  border-radius: 17px;
  box-shadow: var(--ui-shadow);
  transform: none;
}

.consent p { margin: 0 0 14px; color: #a3a7b2; font-size: 12px; line-height: 1.55; }
.consent a { color: #cbd0ff; }
.consent .actions { display: flex; justify-content: flex-end; gap: 8px; }

.consent .btn {
  min-height: 42px;
  margin: 0;
  padding: 0 14px;
  color: #fff;
  background: #1b1d24;
  border: 1px solid #30333d;
  border-radius: 11px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
}
.consent .btn.primary { color: #0b0c0f; background: #fff; border-color: #fff; }

/* Production loader, constrained to a centered card */
#loaderOverlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(48, 63, 132, 0.26), transparent 30rem),
    radial-gradient(circle at 90% 90%, rgba(57, 42, 105, 0.2), transparent 32rem),
    #08090c;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#loaderOverlay[hidden],
#loaderOverlay[data-state="hidden"] { display: none !important; }

.loader-mesh,
.loader-accent,
.loader-rail { position: absolute; pointer-events: none; }

.loader-rail { display: none !important; }

html.is-loading #download { visibility: hidden !important; }

.loader-mesh {
  inset: 0;
  opacity: 0.16;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
}

.loader-accent { width: 300px; height: 300px; border-radius: 50%; filter: blur(80px); opacity: 0.22; }
.loader-accent.a { top: -100px; left: -80px; background: #6270ff; }
.loader-accent.b { right: -100px; bottom: -110px; background: #a75cff; }

.loader-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "brand dots eta"
    "title title title"
    "meter meter meter"
    "pills pills pills";
  align-items: center;
  gap: 0;
  width: min(520px, 100%);
  margin: 0;
  padding: clamp(28px, 4vw, 38px);
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, #171921, #0f1015);
  border: 1px solid #2b2e38;
  border-radius: 25px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.loader-dots {
  position: static;
  inset: auto;
  grid-area: dots;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 34px;
  margin: 0;
}
.loader-dots span { width: 4px; height: 12px; background: linear-gradient(#bec5ff, #6d78ff); border-radius: 99px; animation: ui-loader-wave 0.75s ease-in-out infinite alternate; }
.loader-dots span:nth-child(2) { animation-delay: -0.25s; }
.loader-dots span:nth-child(3) { animation-delay: -0.5s; }

@keyframes ui-loader-wave { to { height: 34px; } }

.loader-chip-row,
.loader-meter-meta,
.loader-pills { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.loader-chip-row { display: contents; }
.loader-chip-row .loader-chip:first-child { grid-area: brand; justify-self: start; }
.loader-chip-row .loader-chip:last-child { grid-area: eta; justify-self: end; }

.loader-chip,
.loader-pill { padding: 6px 9px; color: #cbd0ff; background: #20222a; border: 1px solid #30333d; border-radius: 999px; font-size: 10px; }
.loader-chip.ghost,
.loader-pill.ghost { color: #777c88; }

.loader-title-block { position: relative; z-index: 1; grid-area: title; width: 100%; margin: 26px 0 24px; text-align: center; }
.loader-kicker { margin: 0 0 8px; color: #7f88dd; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.loader-title { display: block; width: 100%; color: #fff; font-size: 25px; font-weight: 680; line-height: 1.15; letter-spacing: -0.8px; text-align: center; }
.loader-sub { min-height: 20px; margin: 9px 0 0; color: #9297a5; font-size: 13px; }

.loader-meter { position: relative; z-index: 1; grid-area: meter; width: 100%; }
.loader-meter-track { position: relative; height: 5px; overflow: hidden; background: #292c35; border-radius: 999px; }
.loader-meter-bar { width: 0; height: 100%; background: linear-gradient(90deg, #6d75ff, #b3bbff); border-radius: inherit; }
.loader-meter-sheen { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: translateX(-100%); animation: ui-loader-sheen 1.4s linear infinite; }
@keyframes ui-loader-sheen { to { transform: translateX(100%); } }
.loader-meter-meta { margin-top: 8px; color: #696e7b; font-size: 10px; }
.loader-pills { position: relative; z-index: 1; grid-area: pills; width: 100%; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* Tablet */
@media (max-width: 1180px) {
  .editor-layout {
    grid-template-columns: minmax(0, 820px) 190px;
    grid-template-areas: "editor presets" "source presets" "export presets";
    gap: 18px;
    padding: 0 18px;
  }

  .source-panel { width: 100%; padding: 12px; }
  .source-panel .side-panel-header { margin-bottom: 9px; }
  .source-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-panel-button { min-height: 58px; flex-direction: row; padding: 8px 12px; }
}

@media (max-width: 900px) {
  body { padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
  .app-screen { min-height: auto; }
  .start-screen,
  .source-screen { min-height: calc(100dvh - 155px); padding: 46px 8px 28px; }
  .editor-screen { padding-top: 38px; }

  .editor-layout {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "editor" "source" "presets" "export";
    align-content: start;
    gap: 14px;
    padding: 0;
  }

  .editor-content,
  .source-panel,
  .preset-panel,
  .export-section { width: min(760px, 100%); justify-self: center; }

  .preset-panel { padding: 12px; }
  .presets-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .preset-btn { min-height: 48px; }
  .export-section { margin-top: 4px; }

  .cs-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 15px 10px 0;
  }

  .cs-footer::after { display: none; }
  .cs-footer #copyright.footer-copy { grid-column: 1; justify-self: center; text-align: center; white-space: normal; }
  .footer-links { grid-column: 1; flex-wrap: wrap; gap: 2px 6px; }
}

/* Mobile */
@media (max-width: 650px) {
  body { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .cs-header { top: max(6px, env(safe-area-inset-top)); min-height: 54px; padding: 6px; border-radius: 14px; }
  .cs-header,
  .app-shell,
  footer { width: 100% !important; max-width: 100% !important; }
  .cs-actions { grid-template-columns: 78px minmax(0, 1fr) 44px; gap: 6px; }

  #langSelector { width: 78px; min-height: 42px; padding: 0 20px 0 7px; color: #fff; font-size: 11px; }
  #langSelector option { color: #fff; font-size: 14px; }
  .cs-brand { flex-direction: column; gap: 2px; }
  .cs-title { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .new-design-pill { padding: 2px 6px; font-size: 7px; letter-spacing: 0.03em; }
  .cs-burger {
    position: static !important;
    inset: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 42px;
    padding: 0;
    transform: translateX(-8px) !important;
  }

  .cs-burger-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  .start-screen,
  .source-screen { min-height: calc(100dvh - 112px); padding: 34px 0 24px; }
  .start-title { margin-bottom: 14px; font-size: clamp(34px, 11vw, 46px); letter-spacing: -1.7px; }
  #introText { margin-bottom: 26px; padding: 0 5px; font-size: 13px; line-height: 1.58; }
  .source-choices { gap: 9px; }
  .source-card { min-height: 168px; padding: 18px; border-radius: 18px; }
  .source-icon { top: 16px; left: 16px; width: 39px; height: 39px; border-radius: 11px; }
  .source-title { padding-right: 18px; font-size: 18px; letter-spacing: -0.45px; }
  .source-description { max-width: 90%; font-size: 11px; }
  .source-arrow { right: 16px; bottom: 18px; font-size: 18px; }

  .back-button { top: 18px; left: 0; min-height: 40px; padding: 0 12px; font-size: 12px; }
  .source-content h2 { font-size: 38px; letter-spacing: -1.7px; }
  .youtube-input { grid-template-columns: 1fr; margin-top: 28px; padding: 6px; }
  #youtube-mode .youtube-input #convertBtn { width: 100%; }
  .file-drop { min-height: 210px; margin-top: 28px; padding: 22px; border-radius: 20px; }

  .editor-screen { padding: 30px 0 20px; }
  .editor-heading h2 { font-size: 28px; }
  .audio-player { margin-top: 18px; padding: 11px; border-radius: 18px; }
  .waveform-wrap { min-height: 88px; gap: 10px; }
  #mainToggleBtn.play-button { flex-basis: 46px; width: 46px; min-width: 46px; height: 46px; min-height: 46px; }
  #waveform { min-height: 58px; }

  .audio-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .setting { padding: 12px 9px; border-radius: 14px; }

  .setting-header {
    min-height: 45px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 11px !important;
    font-size: 10px;
  }

  .setting-header span { min-width: 0; padding: 3px 6px; font-size: 9px; }
  .side-panel { border-radius: 17px; }
  .source-panel-list { gap: 6px; }
  .source-panel-button { min-height: 54px; padding: 7px 9px; font-size: 10px; }
  .source-panel-icon { width: 31px; height: 31px; }
  .presets-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preset-btn { min-height: 44px; padding: 8px; font-size: 10px; }
  .export-section { gap: 9px; }
  .export-format { max-width: 100%; padding-left: 10px; }
  .format-btn { min-width: 44px; padding: 0 8px; }

  footer { padding-top: 16px; gap: 5px 8px; font-size: 10px; }
  .consent { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 15px; }
  .loader-card { padding: 25px 20px; border-radius: 20px; }
  .loader-pills .ghost:last-child { display: none; }
}

@media (max-width: 390px) {
  .source-card { min-height: 158px; padding: 15px; }
  .source-title { font-size: 16px; }
  .source-description { font-size: 10px; }
  .source-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Écran éditeur sur mobile — passe du 22 août 2026.

   Objectif : tout tient sur une hauteur d'écran, sans défilement, et les
   curseurs sont assez larges pour être attrapés au pouce.

   Ce bloc est volontairement en fin de fichier et strictement sous 650px :
   les mises en page bureau et tablette ne sont pas touchées.

   L'ordre visuel diffère de l'ordre du HTML. Plutôt que de déplacer des
   balises — ce qui aurait changé le bureau — .editor-content passe en
   display:contents et ses enfants rejoignent la colonne du parent, où
   `order` les replace : titre, lecteur, préréglages, réglages, source,
   export.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 650px) {
  body { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .editor-screen { padding: 12px 0 6px; }

  .editor-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .editor-content { display: contents; }

  .editor-heading { order: 1; width: 100%; text-align: left; }
  .audio-player   { order: 2; margin-top: 0; }
  .preset-panel   { order: 3; }
  .audio-settings { order: 4; width: 100%; }
  .source-panel   { order: 5; }
  .export-section { order: 6; margin-top: 0; }

  /* En-tête : le surtitre « Audio chargé » n'apporte rien quand le morceau
     est nommé juste en dessous. Il reste affiché en cas d'échec, où il porte
     le message « Audio non chargé ». */
  .editor-heading .eyebrow { display: none; }
  .editor-heading.is-error .eyebrow { display: block; margin-bottom: 4px; }
  .editor-heading.is-error h2 { display: none; }

  .editor-heading h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.4px;
  }

  .editor-heading .audio-source { margin: 3px 0 0; font-size: 12px; }

  .audio-player { padding: 10px; border-radius: 16px; }
  .audio-player #progressSlider { margin-top: 11px !important; }
  .waveform-wrap { min-height: 68px; gap: 10px; }
  #mainToggleBtn.play-button { flex-basis: 52px; width: 52px; min-width: 52px; height: 52px; min-height: 52px; }
  #waveform { min-height: 42px; }

  .preset-panel { padding: 10px; }
  .preset-panel .side-panel-header { margin-bottom: 7px; }
  .presets-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  /* convertislowed.css impose `.preset-panel .preset-btn { min-width:160px }`,
     hérité du défilement horizontal d'origine. Dans une colonne de 110px les
     boutons débordaient. On reprend le même sélecteur pour égaler sa
     spécificité, la règle la plus tardive l'emporte alors. */
  .preset-panel .preset-btn {
    min-width: 0;
    min-height: 40px;
    padding: 5px 3px;
    font-size: 9.5px;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }

  /* Réglages : une ligne par réglage — icône, intitulé, curseur, valeur.
     .setting-header passe en display:contents pour que son texte et sa pastille
     deviennent des cellules de la grille ; `order` glisse le curseur entre les
     deux. Le texte nu forme une cellule anonyme, qui garde l'ordre 0. */
  .audio-settings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
    padding: 10px;
    background: linear-gradient(145deg, #15171d, #101116);
    border: 1px solid #24262e;
    border-radius: 17px;
  }

  .audio-settings .setting {
    display: grid;
    grid-template-columns: 30px auto minmax(0, 1fr) 54px;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .audio-settings .setting::before {
    content: '';
    width: 30px;
    height: 30px;
    border: 1px solid #2b2e38;
    border-radius: 9px;
    background-color: #191b22;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
  }

  .audio-settings .setting:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='2'/%3E%3Cpath d='m13.5 11.5 4-4'/%3E%3Cpath d='M4 19a9 9 0 1 1 16 0'/%3E%3C/svg%3E");
  }

  .audio-settings .setting:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 21V3M12 21V3M19 21V3'/%3E%3Ccircle cx='5' cy='9' r='2'/%3E%3Ccircle cx='12' cy='15' r='2'/%3E%3Ccircle cx='19' cy='7' r='2'/%3E%3C/svg%3E");
  }

  .audio-settings .setting:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M7.8 16.2a6 6 0 0 1 0-8.4M16.2 7.8a6 6 0 0 1 0 8.4'/%3E%3Cpath d='M4.9 19.1a10 10 0 0 1 0-14.2M19.1 4.9a10 10 0 0 1 0 14.2'/%3E%3C/svg%3E");
  }

  .audio-settings .setting-header {
    display: contents !important;
    margin: 0 !important;
    min-height: 0;
    font-size: 13px;
    font-weight: 600;
  }

  .audio-settings .setting-header span {
    order: 3;
    justify-self: end;
    min-width: 54px;
    padding: 5px 0;
    font-size: 11px;
    text-align: center;
  }

  .audio-settings .setting input[type='range'] { order: 2; width: 100%; margin: 0; }

  /* Cible tactile : la piste reste fine, mais la zone attrapable et la
     pastille grossissent pour être maniables au pouce.

     Les règles de base ciblent #speed, #bass et #reverb par identifiant. Un
     sélecteur de classe ne pouvait pas les battre — d'où les identifiants
     repris ici. */
  /* L'input lui-même devient la zone tactile : 38px de haut, fond transparent.
     La piste visible est reportée sur ::-webkit-slider-runnable-track, sinon
     le fond de l'input s'étirait en grosse pilule sur toute la hauteur. */
  #speed,
  #bass,
  #reverb {
    height: 38px !important;
    background: transparent !important;
    touch-action: pan-y;
  }

  #speed::-webkit-slider-runnable-track,
  #bass::-webkit-slider-runnable-track,
  #reverb::-webkit-slider-runnable-track {
    height: 5px;
    background: #2b2d36;
    border-radius: 999px;
  }

  #speed::-moz-range-track,
  #bass::-moz-range-track,
  #reverb::-moz-range-track {
    height: 5px;
    background: #2b2d36;
    border-radius: 999px;
  }

  /* La marge négative recentre la pastille sur une piste de 5px. */
  #speed::-webkit-slider-thumb,
  #bass::-webkit-slider-thumb,
  #reverb::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: -11.5px;
  }

  #speed::-moz-range-thumb,
  #bass::-moz-range-thumb,
  #reverb::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* Le sélecteur de langue devient un carré de la taille du bouton de menu, et
     n'affiche que le drapeau. Les deux colonnes latérales sont alors de largeur
     égale, donc la colonne centrale est vraiment centrée : le titre l'est aussi,
     sans avoir à le sortir du flux.

     Le libellé de la langue n'est pas retiré du HTML — il reste lisible dans la
     liste déroulante et pour les lecteurs d'écran. Il est simplement débordé
     hors du cadre : le drapeau étant le premier caractère, seul lui reste
     visible. Le retrait à gauche le recentre dans le carré. */
  .cs-actions { grid-template-columns: 44px minmax(0, 1fr) 44px; }

  #langSelector {
    width: 44px;
    min-width: 44px;
    overflow: hidden;
    padding: 0 0 0 11px;
    font-size: 17px;
    text-align: left;
    text-overflow: clip;
    white-space: nowrap;
    /* Repousse le nom de la langue hors du cadre, où il est rogné. On agit sur
       l'espace entre les mots et non entre les lettres : un drapeau est un
       couple de caractères, et un letter-spacing le disloquerait en deux
       lettres. */
    word-spacing: 60px;
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
  }
  /* Le burger portait une marge droite négative de 15px et un décalage par
     transform, qui le sortaient de la grille. Une fois les deux annulés, il
     s'aligne sur le bord de la grille — soit 7px du bord de l'en-tête, la même
     marge que le sélecteur de langue à gauche. */
  .cs-burger {
    justify-self: end;
    transform: none !important;
    margin-right: 0 !important;
  }

  .source-panel { padding: 10px; }
  .source-panel .side-panel-header { margin-bottom: 7px; }

  /* YouTube d'abord : c'est le mode le plus demandé. L'ordre du HTML reste
     inchangé pour le bureau, seul l'affichage est inversé ici. */
  .source-panel-list [data-source-switch='youtube'] { order: 1; }
  .source-panel-list [data-source-switch='local'] { order: 2; }
  .source-panel-button { min-height: 44px; padding: 5px 9px; font-size: 11px; }
  .source-panel-icon { width: 28px; height: 28px; }

  /* Format et téléchargement sur une seule ligne. */
  /* Le format prend la place qui reste, le bouton garde de quoi afficher
     « Télécharger MP3 » en entier — c'est l'action principale de l'écran. */
  .export-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 140px);
    align-items: center;
    gap: 8px;
  }

  .export-section #downloadMainBtn { white-space: nowrap; }

  /* Le groupe de formats garde des largeurs fixes venues du bureau : sans
     ces contraintes il sortait de sa colonne et passait sous le bouton. */
  .export-section .export-format,
  .export-section .download-menu,
  .export-section #downloadDropdown,
  .export-section #downloadMainBtn { min-width: 0; max-width: 100%; }

  .export-section .download-menu,
  .export-section #downloadDropdown { width: 100%; }
  /* Les formats se resserrent contre l'intitulé « Format » — la place gagnée
     à gauche sert à les écarter les uns des autres. `.download-menu` porte un
     retrait interne de 19,5px hérité du bureau (padding-inline sur la gouttière
     de page) : c'est lui qui éloignait les boutons de l'intitulé. */
  .export-section .export-format { gap: 6px; padding: 5px 6px 5px 9px; }
  .export-section .download-menu { padding: 0 !important; }
  .export-section .export-label { padding-right: 0; }

  /* Sélecteur par identifiant : le remplissage vertical du bouton vient d'une
     règle en rem qu'un sélecteur de classe ne parvenait pas à écraser, d'où une
     pastille aussi haute que la ligne entière. */
  #downloadDropdown {
    gap: 12px;
    align-items: center;
  }

  #downloadDropdown .format-btn {
    min-height: 28px;
    height: 28px;
    padding: 0 7px !important;
  }
  /* Les éléments flex du menu sont les <li>, pas les boutons qu'ils
     contiennent : c'est sur eux qu'il faut autoriser le rétrécissement. */
  .export-section #downloadDropdown li,
  .export-section .format-btn { flex: 1 1 0; min-width: 0; }
  .export-section #downloadMainBtn { min-height: 48px; padding: 0 12px; font-size: 13px; }
  .export-section .format-btn { min-width: 0; font-size: 11px; }
  .export-section .export-label { font-size: 10px; }

  footer { padding-top: 10px; font-size: 10px; }

  /* Écran de chargement : la rangée du haut penchait à gauche, la pastille de
     marque étant bien plus large que celle du pourcentage. Les deux sont
     ramenées à un gabarit voisin, et le rythme vertical est desserré. */
  .loader-card { padding: 26px 18px 22px; }

  /* Les deux pastilles du haut sont retirées. La marque était bien plus large
     que le pourcentage, ce qui faisait pencher la rangée à gauche, et le
     pourcentage doublait celui affiché sous la barre de progression. Seul
     l'indicateur animé reste, seul au centre de sa rangée. */
  .loader-chip-row .loader-chip { display: none; }

  .loader-dots { width: 40px; height: 28px; gap: 5px; }
  .loader-dots span { height: 9px; }

  .loader-title-block { margin: 24px 0 22px; }
  .loader-kicker { margin-bottom: 10px; font-size: 9px; letter-spacing: 1.6px; }
  .loader-title { font-size: 21px; letter-spacing: -0.5px; }
  .loader-sub { min-height: 0; margin-top: 10px; font-size: 12px; }

  .loader-meter-meta { margin-top: 10px; font-size: 9px; }
  .loader-pills { gap: 8px; margin-top: 20px; }
  .loader-pill { padding: 6px 11px; font-size: 9.5px; }
}