:root {
  --primary: #5a4fcf;
  --on-primary: #f4f1fb;
  --accent: #f2a94e;
  --on-accent: #241b2f;
  --ink: #241b2f;
  --surface: #f4f1fb;
  --mint: #2fa98c;
}

.text-on-primary { color: var(--on-primary); }
.text-accent-strong { color: color-mix(in oklch, var(--accent) 70%, var(--ink)); }

#dropzone.drag-over {
  border-color: var(--primary);
  background-color: color-mix(in oklch, var(--primary) 10%, white);
  transform: scale(1.01);
}

#dropzone {
  will-change: transform;
}

/* --- Пошаговый прогресс --- */
.step {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.step .step-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 30%, white);
  flex-shrink: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.step.active {
  opacity: 1;
}
.step.active .step-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 25%, transparent);
  animation: pulse-dot 1.1s ease-in-out infinite;
}
.step.done {
  opacity: 0.8;
}
.step.done .step-dot {
  background: var(--mint);
  animation: none;
  box-shadow: none;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* --- Плавное раскрытие результата --- */
#result-box {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#result-box.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Кудрявая волна (Signature) --- */
.curl-waveform svg path {
  stroke: var(--primary);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.4s ease-out;
}
.curl-waveform.drawn svg path {
  stroke-dashoffset: 0;
}

@media (max-width: 767px) {
  .curl-waveform {
    height: 64px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #result-box, .step, .step .step-dot, .curl-waveform svg path, #dropzone {
    transition: none !important;
    animation: none !important;
  }
  .curl-waveform svg path { stroke-dashoffset: 0; }
}

/* --- Индикатор записи с микрофона --- */
#rec-indicator.flex {
  display: flex;
}
.rec-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
  animation: pulse-rec 1s ease-in-out infinite;
}
@keyframes pulse-rec {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none; }
}

@media (max-width: 767px) {
  #record-box {
    padding: 0.85rem 1rem;
  }
  #record-box #rec-hint {
    max-width: none;
    width: 100%;
  }
}

details[open] #features-details-summary-icon {
  transform: rotate(180deg);
}

#features-grid > div {
  background: color-mix(in oklch, var(--primary) 6%, white);
  border-radius: 0.9rem;
  padding: 0.6rem 0.9rem;
}