/* ============================================================
   AudioMaker — тема «Космос / Sci-Fi»
   Все цвета через CSS-переменные — меняйте их здесь.
   ============================================================ */

:root {
  /* Фон */
  --bg-0: #050a1f;              /* глубокий космический синий */
  --bg-1: #0b0c10;              /* почти чёрный */
  --bg-2: #1f2833;              /* стальной синий */

  /* Текст */
  --text: #e8f1ff;
  --text-soft: #c3d4ea;
  --muted: #7d8fa8;

  /* Акценты */
  --neon-cyan: #00d9ff;
  --neon-blue: #4d9fff;
  --neon-purple: #a855f7;
  --neon-green: #22ff88;
  --danger: #ff5470;

  /* Стекло */
  --glass-bg: rgba(13, 22, 48, 0.55);
  --glass-bg-strong: rgba(10, 18, 42, 0.75);
  --glass-border: rgba(77, 159, 255, 0.35);
  --glass-border-strong: rgba(0, 217, 255, 0.6);

  /* Прочее */
  --radius: 16px;
  --shadow-neon-cyan: 0 0 12px rgba(0, 217, 255, 0.55);
  --shadow-neon-purple: 0 0 12px rgba(168, 85, 247, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Космический фон: звёзды
   ============================================================ */

.space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 15%, rgba(77, 159, 255, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 82% 28%, rgba(168, 85, 247, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 55% 85%, rgba(0, 217, 255, 0.10) 0%, transparent 45%);
}

.stars {
  position: absolute;
  border-radius: 50%;
  background: transparent;
}

.stars-lg {
  width: 3px;
  height: 3px;
  top: 0;
  left: 0;
  box-shadow: 66.81vw 14.09vh rgba(255,255,255,.9), 12.55vw 52.28vh rgba(255,255,255,.9), 16.84vw 26.26vh rgba(255,255,255,.9), 72.44vw 51.29vh rgba(255,255,255,.9), 17.37vw 76.13vh rgba(255,255,255,.9), 23.46vw 25.73vh rgba(255,255,255,.9), 50.56vw 32.02vh rgba(255,255,255,.9), 38.1vw 26.02vh rgba(255,255,255,.9), 51.75vw 3.53vh rgba(255,255,255,.9), 81.41vw 57.72vh rgba(255,255,255,.9), 39.75vw 15.22vh rgba(255,255,255,.9), 9.01vw 70.52vh rgba(255,255,255,.9), 81.62vw 54vh rgba(255,255,255,.9), 4.41vw 71.12vh rgba(255,255,255,.9), 14.78vw 90.62vh rgba(255,255,255,.9), 69.26vw 51.64vh rgba(255,255,255,.9), 18.64vw 4.15vh rgba(255,255,255,.9), 30.82vw 58.32vh rgba(255,255,255,.9), 82.11vw 0.4vh rgba(255,255,255,.9), 53.57vw 80.52vh rgba(255,255,255,.9), 74.84vw 38.46vh rgba(255,255,255,.9), 14.91vw 2.63vh rgba(255,255,255,.9), 5.1vw 78.16vh rgba(255,255,255,.9), 62.65vw 11.52vh rgba(255,255,255,.9), 25vw 77.24vh rgba(255,255,255,.9), 28.96vw 64.81vh rgba(255,255,255,.9), 14.36vw 4.45vh rgba(255,255,255,.9), 60.46vw 51.59vh rgba(255,255,255,.9), 5.08vw 42.04vh rgba(255,255,255,.9), 70.66vw 62.85vh rgba(255,255,255,.9), 21.84vw 1.33vh rgba(255,255,255,.9), 36.52vw 26.74vh rgba(255,255,255,.9), 6.87vw 71.82vh rgba(255,255,255,.9), 7.09vw 46.41vh rgba(255,255,255,.9), 1.2vw 79.78vh rgba(255,255,255,.9), 43.92vw 51.35vh rgba(255,255,255,.9), 49.96vw 0.9vh rgba(255,255,255,.9), 82.88vw 1.29vh rgba(255,255,255,.9), 0.31vw 6.38vh rgba(255,255,255,.9), 65.41vw 3.45vh rgba(255,255,255,.9), 91.35vw 92.9vh rgba(255,255,255,.9), 46.12vw 37.53vh rgba(255,255,255,.9), 61.66vw 4.44vh rgba(255,255,255,.9), 37.28vw 14.19vh rgba(255,255,255,.9), 43.7vw 79.23vh rgba(255,255,255,.9), 53.24vw 40.07vh rgba(255,255,255,.9), 29.74vw 90.73vh rgba(255,255,255,.9), 58.67vw 73.51vh rgba(255,255,255,.9), 1.94vw 88.17vh rgba(255,255,255,.9), 95.77vw 33.28vh rgba(255,255,255,.9), 71.07vw 16.24vh rgba(255,255,255,.9), 10.31vw 45.22vh rgba(255,255,255,.9), 33.32vw 77.61vh rgba(255,255,255,.9), 14.85vw 13.47vh rgba(255,255,255,.9), 21.57vw 59.17vh rgba(255,255,255,.9), 51.28vw 98.7vh rgba(255,255,255,.9), 76.62vw 67.2vh rgba(255,255,255,.9), 71.49vw 28.95vh rgba(255,255,255,.9), 55.21vw 98.98vh rgba(255,255,255,.9), 65.08vw 2.42vh rgba(255,255,255,.9), 34.54vw 92.91vh rgba(255,255,255,.9), 2.71vw 21.97vh rgba(255,255,255,.9), 26.54vw 3.85vh rgba(255,255,255,.9), 21.61vw 59.23vh rgba(255,255,255,.9), 42.22vw 9.37vh rgba(255,255,255,.9), 99.35vw 12.14vh rgba(255,255,255,.9), 10.61vw 32.13vh rgba(255,255,255,.9), 32.38vw 75.12vh rgba(255,255,255,.9), 82.58vw 0.9vh rgba(255,255,255,.9), 4.21vw 84.05vh rgba(255,255,255,.9);
  animation: twinkle-lg 4s ease-in-out infinite alternate;
}

.stars-md {
  width: 2px;
  height: 2px;
  top: 0;
  left: 0;
  box-shadow: 89.59vw 23.81vh rgba(160,220,255,.8), 92.62vw 84.53vh rgba(160,220,255,.8), 27.94vw 54.53vh rgba(160,220,255,.8), 63.45vw 62.53vh rgba(160,220,255,.8), 19.23vw 29.73vh rgba(160,220,255,.8), 18.3vw 2.96vh rgba(160,220,255,.8), 23.08vw 93.35vh rgba(160,220,255,.8), 98.74vw 78.16vh rgba(160,220,255,.8), 13.52vw 88.34vh rgba(160,220,255,.8), 18.67vw 29.48vh rgba(160,220,255,.8), 56vw 55.62vh rgba(160,220,255,.8), 71.25vw 12.19vh rgba(160,220,255,.8), 59.82vw 39.14vh rgba(160,220,255,.8), 88.09vw 44.49vh rgba(160,220,255,.8), 34.82vw 96.38vh rgba(160,220,255,.8), 46.36vw 54.3vh rgba(160,220,255,.8), 94.77vw 81.03vh rgba(160,220,255,.8), 12.83vw 10.73vh rgba(160,220,255,.8), 0.28vw 18.19vh rgba(160,220,255,.8), 94.03vw 72.01vh rgba(160,220,255,.8), 40.4vw 59.08vh rgba(160,220,255,.8), 40vw 12.49vh rgba(160,220,255,.8), 91.07vw 96.39vh rgba(160,220,255,.8), 89.05vw 17.26vh rgba(160,220,255,.8), 33.39vw 54.22vh rgba(160,220,255,.8), 61.59vw 94.24vh rgba(160,220,255,.8), 82.23vw 74.73vh rgba(160,220,255,.8), 28.05vw 33.97vh rgba(160,220,255,.8), 52.56vw 80.43vh rgba(160,220,255,.8), 24.71vw 88.8vh rgba(160,220,255,.8), 66.44vw 18.96vh rgba(160,220,255,.8), 27.71vw 22.85vh rgba(160,220,255,.8), 83.36vw 64vh rgba(160,220,255,.8), 8.18vw 42.05vh rgba(160,220,255,.8), 80.51vw 88.01vh rgba(160,220,255,.8), 77.88vw 95.34vh rgba(160,220,255,.8), 94.31vw 46.66vh rgba(160,220,255,.8), 89.08vw 96.92vh rgba(160,220,255,.8), 15.62vw 58.75vh rgba(160,220,255,.8), 21.12vw 63.43vh rgba(160,220,255,.8), 50.09vw 70.83vh rgba(160,220,255,.8), 11.1vw 80.6vh rgba(160,220,255,.8), 34.79vw 52.12vh rgba(160,220,255,.8), 72.07vw 20.04vh rgba(160,220,255,.8), 52.98vw 78.86vh rgba(160,220,255,.8);
  animation: twinkle-md 3s ease-in-out infinite alternate;
}

.stars-sm {
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
  box-shadow: 58.17vw 19.86vh rgba(255,255,255,.6), 93.47vw 5.23vh rgba(255,255,255,.6), 5.57vw 21.44vh rgba(255,255,255,.6), 31.37vw 17.15vh rgba(255,255,255,.6), 29.13vw 27.07vh rgba(255,255,255,.6), 88.21vw 47vh rgba(255,255,255,.6), 36.75vw 45.38vh rgba(255,255,255,.6), 76.34vw 66.26vh rgba(255,255,255,.6), 99.93vw 35.57vh rgba(255,255,255,.6), 85.66vw 31.13vh rgba(255,255,255,.6), 18.35vw 93.81vh rgba(255,255,255,.6), 59.31vw 61.28vh rgba(255,255,255,.6), 38.71vw 95.61vh rgba(255,255,255,.6), 7.85vw 47.11vh rgba(255,255,255,.6), 88.06vw 31.24vh rgba(255,255,255,.6), 91.93vw 88.14vh rgba(255,255,255,.6), 89.07vw 1.65vh rgba(255,255,255,.6), 29.84vw 58.02vh rgba(255,255,255,.6), 1.86vw 89.08vh rgba(255,255,255,.6), 41.09vw 67.63vh rgba(255,255,255,.6), 65.55vw 98.47vh rgba(255,255,255,.6), 29.62vw 94.06vh rgba(255,255,255,.6), 75.22vw 3.09vh rgba(255,255,255,.6), 34.08vw 65.72vh rgba(255,255,255,.6), 4.26vw 68.53vh rgba(255,255,255,.6), 52.19vw 36.5vh rgba(255,255,255,.6), 34.39vw 21.85vh rgba(255,255,255,.6), 60.51vw 64.37vh rgba(255,255,255,.6), 60.55vw 32.19vh rgba(255,255,255,.6), 66.52vw 9.96vh rgba(255,255,255,.6);
  animation: twinkle-sm 2.5s ease-in-out infinite alternate;
}

@keyframes twinkle-lg {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
@keyframes twinkle-md {
  from { opacity: 0.5; }
  to   { opacity: 0.95; }
}
@keyframes twinkle-sm {
  from { opacity: 0.45; }
  to   { opacity: 0.9; }
}

/* ============================================================
   Стекло (Glassmorphism)
   ============================================================ */

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Контейнер / хедер
   ============================================================ */

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header {
  text-align: center;
  padding: 44px 0 8px;
}

.logo {
  margin: 0;
  font-size: clamp(38px, 7vw, 58px);
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--neon-cyan) 0%, var(--neon-blue) 40%, var(--neon-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: neon-flow 6s ease-in-out infinite, neon-pulse 3.5s ease-in-out infinite;
  text-shadow: 0 0 18px rgba(0, 217, 255, 0.65), 0 0 42px rgba(168, 85, 247, 0.55);
}

.logo-sm {
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 2px;
  animation-duration: 4s;
}

.subtitle {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: clamp(14px, 2.4vw, 17px);
  letter-spacing: 0.5px;
}

@keyframes neon-flow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes neon-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.5)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.9)) drop-shadow(0 0 34px rgba(168, 85, 247, 0.8));
  }
}

main.container {
  flex: 1;
}

/* ============================================================
   Карточка загрузки
   ============================================================ */

.upload-card {
  padding: 24px;
  margin: 28px 0 32px;
}

.dropzone {
  border: 2px dashed var(--neon-cyan);
  border-radius: var(--radius);
  padding: 40px 16px;
  text-align: center;
  transition: border-color .2s, background .2s, box-shadow .2s;
  cursor: pointer;
}

.dropzone.dragover {
  border-color: var(--neon-purple);
  background: rgba(168, 85, 247, 0.08);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.35);
}

.dz-text {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}

.dz-or {
  color: var(--muted);
  margin: 0 0 14px;
}

.dz-hint {
  color: var(--muted);
  font-size: 13px;
  margin: 14px 0 0;
}

/* ============================================================
   Кнопки
   ============================================================ */

.btn {
  display: inline-block;
  border: none;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: transform .15s, box-shadow .2s, background .2s, filter .2s;
  color: var(--text);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* «Выбрать файлы» — неоновая фиолетово-голубая */
.btn-primary {
  background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(77, 159, 255, 0.45);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.8), 0 0 46px rgba(0, 217, 255, 0.5);
  transform: translateY(-1px);
}

/* «Загрузить» — ярко-зелёная в тёмном стиле */
.btn-success {
  background: linear-gradient(135deg, #12b76a 0%, var(--neon-green) 100%);
  color: #03140c;
  box-shadow: 0 0 12px rgba(34, 255, 136, 0.35);
}
.btn-success:hover:not(:disabled) {
  box-shadow: 0 0 24px rgba(34, 255, 136, 0.75);
  transform: translateY(-1px);
}

/* «Очистить» — тёмно-серая полупрозрачная */
.btn-secondary {
  background: rgba(80, 92, 115, 0.35);
  border: 1px solid rgba(150, 165, 190, 0.3);
  color: var(--text-soft);
}
.btn-secondary:hover {
  background: rgba(80, 92, 115, 0.55);
}

/* Кнопки в карточках задач */
.btn-download {
  background: linear-gradient(135deg, #12b76a 0%, var(--neon-green) 100%);
  color: #03140c;
  box-shadow: 0 0 8px rgba(34, 255, 136, 0.3);
}
.btn-download:hover {
  box-shadow: 0 0 16px rgba(34, 255, 136, 0.7);
}

.btn-cancel {
  background: rgba(255, 170, 60, 0.15);
  border: 1px solid rgba(255, 170, 60, 0.4);
  color: #ffd28a;
}
.btn-cancel:hover {
  background: rgba(255, 170, 60, 0.28);
}

.btn-delete {
  background: rgba(255, 84, 112, 0.15);
  border: 1px solid rgba(255, 84, 112, 0.4);
  color: #ff9fb0;
}
.btn-delete:hover {
  background: rgba(255, 84, 112, 0.28);
}

.btn-download.hidden,
.btn-cancel.hidden,
.btn-delete.hidden {
  display: none;
}

/* ============================================================
   Выбранные файлы
   ============================================================ */

.selected-files {
  margin-top: 16px;
}

.sel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  background: rgba(13, 22, 48, 0.35);
}

.sel-name {
  font-weight: 600;
  word-break: break-all;
  color: var(--text);
}

.sel-size {
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   Выбор голоса
   ============================================================ */

.voice-selector {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.voice-label {
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.voice-control {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 300px;
  display: flex;
  align-items: center;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}

.voice-control:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.35);
}

.voice-icon {
  color: var(--neon-cyan);
  margin-left: 12px;
  flex-shrink: 0;
  pointer-events: none;
}

.voice-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  padding: 11px 8px;
  width: 100%;
  cursor: pointer;
}

.voice-select option {
  background: var(--bg-1);
  color: var(--text);
}

.voice-chevron {
  color: var(--muted);
  margin-right: 12px;
  flex-shrink: 0;
  pointer-events: none;
}

.upload-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

.upload-actions[hidden] {
  display: none;
}

/* ============================================================
   Анимация запуска: ракета летит от планеты к планете
   Показывается, пока кнопка «Загрузить» в состоянии disabled
   (JS ставит disabled на время отправки файлов).
   ============================================================ */

.rocket-scene {
  display: none;
  position: relative;
  margin-top: 20px;
  height: 170px;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 217, 255, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(5, 10, 31, 0.7) 0%, rgba(10, 18, 42, 0.4) 100%);
}

.upload-actions:has(#upload-btn:disabled) + .rocket-scene {
  display: block;
}

.planet {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  z-index: 2;
}

.planet-a {
  left: 10%;
  top: 62%;
  background: radial-gradient(circle at 32% 30%, #ff9d5c 0%, #c25e2a 45%, #5c1f08 100%);
  box-shadow: 0 0 22px rgba(255, 120, 60, 0.55);
}

.planet-b {
  right: 8%;
  top: 16%;
  background: radial-gradient(circle at 32% 30%, #8fe3ff 0%, #2f7ad0 50%, #0c2a5e 100%);
  box-shadow: 0 0 22px rgba(80, 180, 255, 0.6);
}

.planet-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  transform: rotate(-18deg) scaleX(1.35) scaleY(0.7);
}

.flight-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rocket {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  top: 8%;
  left: 6%;
  animation: rocket-flight 4.2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}

.rocket-body {
  width: 44px;
  height: 44px;
  display: block;
}

.rocket-flame {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 14px;
  height: 26px;
  margin-left: -7px;
  border-radius: 40% 40% 60% 60%;
  background: linear-gradient(180deg, #fff7d6 0%, #ffcf3f 45%, #ff7a18 100%);
  animation: flame-flicker 0.28s ease-in-out infinite alternate;
  transform-origin: top center;
}

@keyframes rocket-flight {
  0% {
    transform: translate(0, 0) rotate(18deg);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  35% {
    transform: translate(150px, -22px) rotate(10deg);
  }
  65% {
    transform: translate(300px, 4px) rotate(3deg);
  }
  94% {
    opacity: 1;
  }
  100% {
    transform: translate(470px, -10px) rotate(-14deg);
    opacity: 0;
  }
}

@keyframes flame-flicker {
  from {
    transform: scaleY(0.8) scaleX(1);
    opacity: 0.85;
  }
  to {
    transform: scaleY(1.35) scaleX(0.75);
    opacity: 1;
  }
}

.rocket-label {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--neon-cyan);
  font-size: 14px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0, 217, 255, 0.7);
  animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ============================================================
   Задачи
   ============================================================ */

.jobs-section {
  margin-bottom: 48px;
}

.jobs-section h2 {
  margin: 0 0 20px;
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty {
  color: rgba(125, 143, 168, 0.6);
  text-align: center;
  padding: 34px 0;
}

.job-card {
  padding: 18px;
}

.job-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.job-title {
  min-width: 0;
}

.job-filename {
  font-weight: 600;
  word-break: break-all;
  color: var(--text);
}

.job-speaker {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 217, 255, 0.4);
  background: rgba(0, 217, 255, 0.08);
}

.job-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.job-actions .btn {
  padding: 7px 12px;
  font-size: 13px;
}

.job-stage {
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.job-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar {
  position: relative;
  flex: 1;
  height: 10px;
  background: rgba(125, 143, 168, 0.25);
  border-radius: 999px;
  border: 1px solid rgba(0, 217, 255, 0.15);
}

.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
  border-radius: 999px;
  transition: width .4s;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.55);
}

.progress-ship {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 22px;
  width: auto;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.6));
  pointer-events: none;
  transition: left .4s ease;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
  border-radius: 999px;
  transition: width .4s;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.55);
}

.progress-label {
  min-width: 48px;
  text-align: right;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.job-error {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 84, 112, 0.12);
  border: 1px solid rgba(255, 84, 112, 0.4);
  color: #ff9fb0;
  border-radius: 8px;
  font-size: 14px;
  display: none;
  word-break: break-word;
}

.job-card.status-failed .job-error { display: block; }
.job-card.status-failed .progress-fill { background: var(--danger); box-shadow: 0 0 10px rgba(255, 84, 112, 0.6); }

.job-card.status-completed .progress-fill { background: var(--neon-green); box-shadow: 0 0 10px rgba(34, 255, 136, 0.6); }
.job-card.status-completed .progress-label { color: var(--neon-green); }

.job-card.status-cancelled .progress-fill { background: #8b99ad; box-shadow: none; }

/* ============================================================
   Футер
   ============================================================ */

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--glass-border);
  background: rgba(5, 10, 31, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 22px 0;
  margin-top: auto;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(55, 174, 226, 0.18);
  border: 1px solid rgba(55, 174, 226, 0.5);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s, background .2s;
}

.tg-link:hover {
  background: rgba(55, 174, 226, 0.35);
  box-shadow: 0 0 16px rgba(55, 174, 226, 0.7);
  transform: translateY(-2px);
}

.tg-link svg {
  display: block;
}

.footer-text {
  color: var(--text-soft);
  font-size: 14px;
}

/* ============================================================
   Адаптивность
   ============================================================ */

@media (max-width: 600px) {
  .upload-card {
    padding: 18px;
  }

  .dropzone {
    padding: 28px 12px;
  }

  .dz-text {
    font-size: 17px;
  }

  .upload-actions {
    flex-direction: column;
  }

  .voice-selector {
    flex-direction: column;
    align-items: stretch;
  }

  .voice-control {
    max-width: none;
  }

  .upload-actions .btn {
    width: 100%;
  }

  .job-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .rocket-scene {
    height: 130px;
  }

  .rocket {
    width: 36px;
    height: 36px;
  }

  .rocket-body {
    width: 36px;
    height: 36px;
  }

  .planet {
    width: 40px;
    height: 40px;
  }

  .planet-ring {
    inset: -6px;
  }

  @keyframes rocket-flight {
    0% {
      transform: translate(0, 0) rotate(18deg);
      opacity: 0;
    }
    6% {
      opacity: 1;
    }
    35% {
      transform: translate(90px, -16px) rotate(10deg);
    }
    65% {
      transform: translate(180px, 4px) rotate(3deg);
    }
    94% {
      opacity: 1;
    }
    100% {
      transform: translate(270px, -8px) rotate(-14deg);
      opacity: 0;
    }
  }
}