/* Minha Canção — camada complementar.
   Usa exatamente os tokens do design original (--surface, --gradient-primary, --shadow-glow...). */

.mc-wrap { position: relative; min-height: 100vh; }

/* ---------- Botão WhatsApp ---------- */
.mc-btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #05210f;
  background-image: linear-gradient(120deg, #25D366, #1ebe5a 55%, #0f9d47);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -20px rgb(37 211 102 / .55);
  transition: transform .25s, filter .25s;
}
.mc-btn-wa:hover { transform: translateY(-2px); filter: brightness(1.06); }
.mc-btn-wa[aria-disabled="true"],
.mc-btn-wa:disabled { opacity: .4; pointer-events: none; filter: grayscale(.6); }
.mc-btn-wa.mc-block { width: 100%; }

/* ---------- Botões utilitários ---------- */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  transition: border-color .25s, background .25s, transform .2s;
  cursor: pointer;
}
.mc-btn:hover { border-color: color-mix(in oklab, var(--primary) 45%, transparent); transform: translateY(-1px); }
.mc-btn:disabled { opacity: .4; pointer-events: none; }
.mc-btn-sm { padding: .55rem 1rem; font-size: .8rem; }
.mc-btn-danger { border-color: color-mix(in oklab, var(--destructive) 45%, transparent); color: var(--destructive); }

/* ---------- Cartões e blocos ---------- */
.mc-card {
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 1.75rem;
}
.mc-note {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  font-size: .85rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 45%, transparent);
  color: var(--muted-foreground);
}
.mc-note-gold { border-color: color-mix(in oklab, var(--gold) 35%, transparent); background: color-mix(in oklab, var(--gold) 10%, transparent); }
.mc-note-ok { border-color: color-mix(in oklab, #25D366 40%, transparent); background: color-mix(in oklab, #25D366 10%, transparent); }
.mc-note-bad { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); background: color-mix(in oklab, var(--destructive) 10%, transparent); }

/* ---------- Letra ---------- */
.mc-lyrics {
  white-space: pre-wrap;
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: .005em;
  color: var(--foreground);
}
.mc-lyrics-editor {
  width: 100%;
  min-height: 26rem;
  resize: vertical;
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.9;
  outline: none;
  transition: border-color .25s;
}
.mc-lyrics-editor:focus { border-color: color-mix(in oklab, var(--primary) 70%, transparent); }

.mc-input, .mc-textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  color: var(--foreground);
  font-size: .95rem;
  outline: none;
  transition: border-color .25s;
}
.mc-textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.mc-input:focus, .mc-textarea:focus { border-color: color-mix(in oklab, var(--primary) 70%, transparent); }
.mc-input::placeholder, .mc-textarea::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }

/* ---------- Selo / etiquetas ---------- */
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .72rem;
  color: var(--muted-foreground);
}
.mc-chip-ok { border-color: color-mix(in oklab, #25D366 45%, transparent); color: #4ade80; }
.mc-chip-warn { border-color: color-mix(in oklab, var(--gold) 45%, transparent); color: var(--gold); }
.mc-chip-bad { border-color: color-mix(in oklab, var(--destructive) 45%, transparent); color: var(--destructive); }

/* ---------- Passos do funil ---------- */
.mc-steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .72rem; color: var(--muted-foreground); }
.mc-step { display: inline-flex; align-items: center; gap: .4rem; }
.mc-step-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--border); }
.mc-step-active .mc-step-dot { background-image: var(--gradient-primary); }
.mc-step-active { color: var(--foreground); }

/* ---------- Loader ---------- */
.mc-loader { display: grid; place-items: center; gap: 1.5rem; padding: 4rem 1rem; text-align: center; }
.mc-spinner {
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 3px solid var(--border);
  border-top-color: oklch(72% .2 20);
  animation: mc-spin .9s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

.mc-hidden { display: none !important; }
.mc-fade-in { animation: mc-fade .5s ease both; }
@keyframes mc-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Toast ---------- */
.mc-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem);
  z-index: 90; padding: .8rem 1.3rem; border-radius: 999px; font-size: .85rem;
  background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  border: 1px solid var(--border); color: var(--foreground);
  box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.mc-toast.mc-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Ajustes móveis ---------- */
@media (max-width: 640px) {
  .mc-btn-wa { width: 100%; padding: 1rem 1.25rem; }
  .mc-lyrics { font-size: .95rem; line-height: 1.85; }
}