/* ====== BUTTONS ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.btn--primary {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #1a1408;
  box-shadow: 0 2px 12px rgba(214,178,92,.25);
}
.btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 20px rgba(214,178,92,.40);
  transform: translateY(-1px);
}

.btn--ghost {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--border-gold);
  background: var(--bg-3);
  color: var(--gold-light);
}

.btn--outline-gold {
  background: transparent;
  border: 1px solid var(--border-gold-strong);
  color: var(--gold-light);
}
.btn--outline-gold:hover {
  background: var(--gold-glow);
  box-shadow: var(--shadow-gold);
}

.btn--lg { padding: var(--space-4) var(--space-8); font-size: 16px; border-radius: var(--radius-lg); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 13px; }
.btn--block { width: 100%; }

/* ====== CARDS ====== */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--t-normal) var(--ease);
}
.card--hover:hover {
  transform: translateY(-3px);
  border-color: var(--border-gold);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), var(--shadow-gold);
}
.card--gold {
  border-color: var(--border-gold-strong);
  background: linear-gradient(180deg, rgba(214,178,92,.06), var(--bg-2));
}

/* ====== INPUTS ====== */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.input, .select, .textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 14px;
  transition: all var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--border-gold-strong);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ====== TYPOGRAPHY ====== */
.h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; letter-spacing: -.02em; }
.h3 { font-size: 20px; font-weight: 700; }
.text-gold { color: var(--gold-light); }
.text-gradient {
  background: linear-gradient(100deg, #fff 0%, var(--gold-light) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* ====== BADGE / CHIP ====== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--border-gold); color: var(--gold-light); }
.chip.active {
  background: var(--gold-glow);
  border-color: var(--border-gold-strong);
  color: var(--gold-light);
}

/* ====== ОБЩИЕ КОМПОНЕНТЫ ГЕНЕРАЦИИ (studio/covers/lyrics/clips) ====== */
.generate-footer{
  margin-top:var(--space-6);
  padding:var(--space-5);
  background:rgba(13,13,13,.95);
  border:1px solid var(--border-gold);
  border-radius:var(--radius-xl);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  box-shadow:0 10px 40px rgba(0,0,0,.6),var(--shadow-gold);
}
.generate-footer__cost{display:flex;align-items:center;gap:var(--space-3)}
.generate-footer__cost-icon{
  width:40px;height:40px;border-radius:50%;
  background:var(--gold-glow);border:1px solid var(--border-gold);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.generate-footer__cost-icon svg{width:18px;height:18px;stroke:var(--gold-light);fill:none;stroke-width:1.7}
.generate-footer__cost-text{display:flex;flex-direction:column;gap:2px}
.generate-footer__cost-amount{font-size:16px;font-weight:700;color:var(--text)}
.generate-footer__cost-label{font-size:11px;color:var(--text-secondary)}
.btn-generate{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-8);
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  color:#1a1408;border:0;border-radius:var(--radius-lg);
  font-size:15px;font-weight:800;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 4px 20px rgba(214,178,92,.35);
  transition:all var(--t-fast) var(--ease);text-transform:uppercase;
}
.btn-generate:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(214,178,92,.55)}
.btn-generate:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-generate svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.style-chip{
  padding:var(--space-3);background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-md);font-size:13px;color:var(--text-secondary);
  cursor:pointer;text-align:center;transition:all var(--t-fast) var(--ease);
}
.style-chip:hover{border-color:var(--border-gold);color:var(--gold-light)}
.style-chip.active{background:var(--gold-glow);border-color:var(--border-gold-strong);color:var(--gold-light)}
.format-chip{
  padding:var(--space-2) var(--space-4);background:var(--bg-2);border:1px solid var(--border);
  border-radius:999px;font-size:12px;color:var(--text-secondary);cursor:pointer;
}
.format-chip.active{background:var(--gold-glow);border-color:var(--border-gold);color:var(--gold-light)}
.style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.format-grid{display:flex;gap:var(--space-2)}
.loading-overlay{
  position:fixed;inset:0;background:rgba(5,5,5,.88);backdrop-filter:blur(16px);
  z-index:500;display:none;align-items:center;justify-content:center;padding:var(--space-5);
}
.loading-overlay.open{display:flex}
.loading-box{
  max-width:520px;width:100%;padding:var(--space-10) var(--space-8);
  background:var(--bg-2);border:1px solid var(--border-gold);border-radius:var(--radius-xl);
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.7),var(--shadow-gold);
}
.loading-box__title{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-3)}
.loading-box__title-big{font-size:22px;font-weight:800;margin-bottom:var(--space-8);background:linear-gradient(100deg,#fff,var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.loading-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin-bottom:var(--space-8)}
.loading-wave span{width:4px;height:100%;background:linear-gradient(180deg,var(--gold-light),var(--gold));border-radius:2px;animation:wavePulse 1.2s ease-in-out infinite}
.loading-wave span:nth-child(2){animation-delay:.1s}.loading-wave span:nth-child(3){animation-delay:.2s}
.loading-wave span:nth-child(4){animation-delay:.3s}.loading-wave span:nth-child(5){animation-delay:.4s}
.loading-wave span:nth-child(6){animation-delay:.5s}.loading-wave span:nth-child(7){animation-delay:.6s}
@keyframes wavePulse{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.loading-stages{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);text-align:left;margin-bottom:var(--space-6)}
.loading-stages li{display:flex;align-items:center;gap:var(--space-3);font-size:13px;color:var(--text-muted);padding:var(--space-2) 0}
.loading-stages li.active{color:var(--gold-light)}
.loading-stages li.done{color:var(--text-secondary)}
.loading-stages li .dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex:none}
.loading-stages li.active .dot{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse 1.2s ease-in-out infinite}
.loading-stages li.done .dot{background:var(--gold-dark)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.loading-box__hint{font-size:12px;color:var(--text-muted);margin-top:var(--space-3)}
@media(max-width:640px){
  .generate-footer{flex-direction:column;align-items:stretch;text-align:center}
  .generate-footer__cost{justify-content:center}
  .btn-generate{width:100%;justify-content:center}
  .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ====== ELEGANT WAVEFORM (профессиональный эквалайзер) ====== */
.track__wave,
.track-row__wave {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  height: 34px;
}
.track__wave span,
.track-row__wave span {
  flex: 0 0 3px !important;
  width: 3px !important;
  max-width: 3px !important;
  min-width: 3px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg, rgba(232,207,142,.85), rgba(214,178,92,.28)) !important;
  box-shadow: 0 0 6px rgba(214,178,92,.10);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.track:hover .track__wave span,
.track-row:hover .track-row__wave span {
  background: linear-gradient(180deg, var(--gold-light), rgba(214,178,92,.55)) !important;
  box-shadow: 0 0 9px rgba(214,178,92,.35);
}
/* при воспроизведении — ярче */
.track--playing .track__wave span,
.track-row--playing .track-row__wave span {
  background: linear-gradient(180deg, #fff, var(--gold)) !important;
  box-shadow: 0 0 12px rgba(214,178,92,.55);
}

/* =========================================================
   SONARO — REAL-TIME PREMIUM AUDIO VISUALIZER
   ========================================================= */

.track__wave,
.track-row__wave {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3px !important;
  height: 38px !important;
  min-height: 38px;
  overflow: hidden;
  padding: 3px 0;
}

/* Individual spectrum bars */
.track__wave span,
.track-row__wave span {
  position: relative;
  display: block !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 2px !important;
  max-width: 4px !important;
  height: 100% !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 247, 218, .98) 0%,
      rgba(232, 207, 142, .96) 28%,
      rgba(214, 178, 92, .72) 70%,
      rgba(214, 178, 92, .30) 100%
    ) !important;

  opacity: calc(.30 + var(--sono-level, .16) * .70) !important;

  transform:
    scaleY(
      max(.08, var(--sono-level, .16))
    );

  transform-origin: center center;

  box-shadow:
    0 0 calc(2px + var(--sono-glow, .12) * 8px)
    rgba(214, 178, 92, var(--sono-glow, .12));

  transition:
    transform 90ms linear,
    opacity 180ms ease,
    box-shadow 180ms ease,
    background 220ms ease;

  will-change: transform, opacity;
}

/* Fine highlight at the upper edge */
.track__wave span::after,
.track-row__wave span::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: 0;
  height: 22%;
  min-height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  opacity: calc(.18 + var(--sono-level, .16) * .65);
  pointer-events: none;
}

/* Active / playing state */
.track--playing .track__wave span,
.track-row--playing .track-row__wave span {
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      var(--gold-light) 24%,
      var(--gold) 68%,
      rgba(214, 178, 92, .42) 100%
    ) !important;

  box-shadow:
    0 0 calc(4px + var(--sono-glow, .12) * 11px)
    rgba(214, 178, 92, calc(.20 + var(--sono-glow, .12) * .75));
}

/* Hover — subtle premium lift */
.track:hover .track__wave span,
.track-row:hover .track-row__wave span {
  opacity: calc(.40 + var(--sono-level, .16) * .60) !important;
}

/* When playback stops, bars settle elegantly */
.track__wave span,
.track-row__wave span {
  transition:
    transform 260ms cubic-bezier(.22,.61,.36,1),
    opacity 260ms ease,
    box-shadow 260ms ease;
}

/* Do not animate when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .track__wave span,
  .track-row__wave span {
    transition: none !important;
  }
}

/* Compact mobile presentation */
@media (max-width: 900px) {
  .track__wave {
    height: 32px !important;
    min-height: 32px;
  }
}

/* SONARO — Premium audio waveform */

.track-row__wave,
.track__wave {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 88px !important;
  min-width: 88px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.track-row__wave span,
.track__wave span {
  display: block !important;
  flex: 0 0 2px !important;
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;
  height: 100% !important;
  min-height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 99px !important;
  background: linear-gradient(
    180deg,
    rgba(246, 226, 168, .88),
    rgba(214, 178, 92, .55)
  ) !important;
  opacity: .38 !important;
  transform-origin: center center !important;
  box-shadow: 0 0 5px rgba(214,178,92,.08) !important;
  transition:
    transform 120ms ease-out,
    opacity 180ms ease,
    box-shadow 180ms ease !important;
}

.track-row--playing .track-row__wave span,
.track--playing .track__wave span {
  opacity: .82 !important;
  box-shadow: 0 0 7px rgba(214,178,92,.16) !important;
}

@media (max-width: 900px) {
  .track-row__wave,
  .track__wave {
    display: flex !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  .track-row__wave span,
  .track__wave span {
    flex-basis: 1.5px !important;
    width: 1.5px !important;
    min-width: 1.5px !important;
    max-width: 1.5px !important;
  }
}


/* SONARO — WOW Spectrum Equalizer */

.track-row__wave,
.track__wave {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  width: 96px !important;
  min-width: 96px !important;
  height: 34px !important;
  min-height: 34px !important;

  padding: 2px 0 !important;
  overflow: visible !important;

  filter: drop-shadow(0 0 5px rgba(214,178,92,.12));
}

.track-row__wave::before,
.track__wave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(214,178,92,.16),
    rgba(246,226,168,.28),
    rgba(214,178,92,.16),
    transparent
  );

  opacity: .65;
  pointer-events: none;
}

.track-row__wave span,
.track__wave span {
  position: relative !important;

  display: block !important;

  flex: 0 0 2px !important;
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;

  height: 100% !important;
  min-height: 3px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,248,220,1) 0%,
      rgba(246,226,168,.98) 22%,
      rgba(214,178,92,.90) 55%,
      rgba(170,126,42,.55) 100%
    ) !important;

  opacity: .34 !important;

  transform:
    scaleY(max(.07, var(--sono-level, .16))) !important;

  transform-origin: center center !important;

  box-shadow:
    0 0 3px rgba(246,226,168,.18),
    0 0 8px rgba(214,178,92,.08) !important;

  transition:
    transform 70ms linear,
    opacity 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease !important;

  will-change: transform, opacity;
}

/* Активный спектр */

.track-row--playing .track-row__wave,
.track--playing .track__wave {
  filter:
    drop-shadow(0 0 5px rgba(214,178,92,.22))
    drop-shadow(0 0 12px rgba(214,178,92,.08));
}

.track-row--playing .track-row__wave span,
.track--playing .track__wave span {
  opacity:
    calc(.58 + var(--sono-level, .16) * .42) !important;

  box-shadow:
    0 0 4px rgba(255,244,205,.55),
    0 0 9px rgba(214,178,92,.34),
    0 0 18px rgba(214,178,92,.12) !important;

  filter:
    brightness(calc(1 + var(--sono-level, .16) * .65)) !important;
}

/* Центральные полосы ярче */

.track-row--playing .track-row__wave span:nth-child(6),
.track-row--playing .track-row__wave span:nth-child(7),
.track-row--playing .track-row__wave span:nth-child(8),
.track-row--playing .track-row__wave span:nth-child(9),
.track--playing .track__wave span:nth-child(6),
.track--playing .track__wave span:nth-child(7),
.track--playing .track__wave span:nth-child(8),
.track--playing .track__wave span:nth-child(9) {
  filter: brightness(1.18) !important;
}

/* Тонкая "искра" на самых высоких пиках */

.track-row--playing .track-row__wave span::after,
.track--playing .track__wave span::after {
  content: "";
  position: absolute;

  left: 50%;
  top: 0;

  width: 2px;
  height: 3px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: rgba(255,250,228,.95);

  box-shadow:
    0 0 5px rgba(246,226,168,.75),
    0 0 10px rgba(214,178,92,.35);

  opacity: calc(.15 + var(--sono-level, .16) * .85);
}

/* Когда трек не играет — спокойный premium standby */

.track-row:not(.track-row--playing) .track-row__wave span,
.track:not(.track--playing) .track__wave span {
  transform: scaleY(.12) !important;
  opacity: .24 !important;
  box-shadow: none !important;
}

/* Mobile */

@media (max-width: 900px) {
  .track-row__wave,
  .track__wave {
    width: 70px !important;
    min-width: 70px !important;
    height: 28px !important;
    min-height: 28px !important;
    gap: 1.5px !important;
  }

  .track-row__wave span,
  .track__wave span {
    flex-basis: 1.5px !important;
    width: 1.5px !important;
    min-width: 1.5px !important;
    max-width: 1.5px !important;
  }
}


/* ====== SZ-STATES: унифицированные состояния генераторов ====== */
.sz-state {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  animation: szStateFadeIn 0.3s ease;
}

@keyframes szStateFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sz-state--empty {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-6);
}

.sz-state--loading {
  background: rgba(232, 196, 118, 0.05);
  border: 1px solid rgba(232, 196, 118, 0.2);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sz-state--loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(232, 196, 118, 0.3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: szStateSpin 0.8s linear infinite;
}

@keyframes szStateSpin {
  to { transform: rotate(360deg); }
}

.sz-state--success {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #86efac;
}

.sz-state--error {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fca5a5;
}

.sz-state--info {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #93c5fd;
}

.btn__ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  margin-right: var(--space-2);
}

.btn-generate .btn__ic {
  fill: currentColor;
  stroke: none;
}