/* Musicalize.ai — global styles */

:root {
  --ink-900: #101012;
  --ink-850: #161618;
  --ink-800: #1c1c1f;
  --ink-700: #26262a;
  color-scheme: dark;
}

html, body { background: #101012; }
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tipografia editorial */
.font-display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.italic-serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }

/* Scrollbar fina */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* Hero — frase gigante */
.hero-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.hero-headline em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Input principal — caixa branca minimalista (estética Suno) */
.prompt-box {
  background: #fafaf9;
  color: #0a0a0b;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 24px 60px -20px rgba(255, 180, 140, 0.18),
    0 8px 24px -6px rgba(0,0,0,0.5);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.prompt-box:focus-within {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 28px 70px -18px rgba(255, 180, 140, 0.28),
    0 10px 30px -6px rgba(0,0,0,0.6);
}
.prompt-box textarea {
  background: transparent;
  outline: none;
  resize: none;
  width: 100%;
  color: #0a0a0b;
  font: 400 15px/1.55 'Inter', sans-serif;
}
.prompt-box textarea::placeholder { color: #6b6b6b; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; }
.btn-white { background: #fafaf9; color: #0a0a0b; padding: 10px 20px; font-size: 14px; }
.btn-white:hover { background: #ffffff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fafaf9; padding: 10px 20px; font-size: 14px; border: 1px solid rgba(255,255,255,0.10); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.20); }
.btn-link { background: transparent; color: rgba(250,250,249,0.75); padding: 8px 14px; font-size: 14px; }
.btn-link:hover { color: #fafaf9; }

/* Aurora fotográfica (substitui imagem Suno) — gradiente radial sóbrio */
.aurora {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 28%, rgba(255, 180, 140, 0.20) 0%, rgba(255, 120, 90, 0.08) 35%, transparent 70%),
    radial-gradient(45% 35% at 78% 70%, rgba(180, 120, 220, 0.14) 0%, transparent 65%),
    radial-gradient(40% 30% at 18% 75%, rgba(120, 160, 220, 0.10) 0%, transparent 60%);
  mix-blend-mode: screen;
  filter: blur(40px) saturate(110%);
  opacity: 0.95;
}
.aurora-grain::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
}
.fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(to bottom, transparent 0%, #101012 85%);
  pointer-events: none;
}
.fade-top {
  position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(to top, transparent 0%, #101012 90%);
  pointer-events: none;
}

/* Capa flutuante (decorativa) */
.float-cover {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  filter: blur(1.1px) brightness(0.55) saturate(110%);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
}

/* Carrossel infinito */
.marquee-track { display: flex; width: max-content; gap: 20px; will-change: transform; }
.marquee-track > * { flex: 0 0 auto; }
.marquee-pause:hover .marquee-track { animation-play-state: paused; }

/* Card de música minimalista */
.track-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #161618;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.track-card:hover { transform: translateY(-2px); }
.track-card .cover {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
}
.track-card:hover .cover { transform: scale(1.03); filter: brightness(0.9); }
.track-card .play-pill {
  position: absolute;
  bottom: 10px; left: 10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0; transform: translateY(6px);
  transition: all 0.3s ease;
}
.track-card:hover .play-pill { opacity: 1; transform: translateY(0); }

/* Linhas finíssimas */
.hairline { border-color: rgba(255,255,255,0.06); }
.hairline-strong { border-color: rgba(255,255,255,0.10); }

/* Sidebar app */
.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  color: rgba(250,250,249,0.65);
  font-size: 14px; font-weight: 500;
  transition: all 0.18s ease;
}
.sidebar-link:hover { background: rgba(255,255,255,0.04); color: #fafaf9; }
.sidebar-link.active { background: rgba(255,255,255,0.06); color: #fafaf9; }

/* Player */
.player-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 72px;
  background: rgba(16,16,18,0.85);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 40;
}

/* Animações leves */
.anim-fade-up { animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.anim-fade-up.delay-1 { animation-delay: 0.12s; }
.anim-fade-up.delay-2 { animation-delay: 0.24s; }
.anim-fade-up.delay-3 { animation-delay: 0.36s; }
.anim-fade-up.delay-4 { animation-delay: 0.48s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-fade { animation: fadeOnly 1.4s ease both; }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* Marquee animations */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-rev {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.animate-marquee { animation: marquee 60s linear infinite; }
.animate-marquee-rev { animation: marquee-rev 60s linear infinite; }
.animate-marquee-fast { animation: marquee 40s linear infinite; }

/* Foco acessível */
:focus-visible { outline: 2px solid rgba(250,250,249,0.55); outline-offset: 2px; border-radius: 4px; }

/* Wordmark */
.wordmark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Inputs do modo personalizado / letra */
.custom-input {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fafaf9;
  padding: 12px 14px;
  font: 400 14px/1.55 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.custom-input:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}
.custom-input::placeholder { color: rgba(250,250,249,0.35); }
textarea.custom-input { resize: vertical; min-height: 80px; }
select.custom-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Range slider customizado (modo personalizado / letra própria) */
.custom-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, rgba(250,250,249,0.85) 0%, rgba(250,250,249,0.85) var(--val, 35%), rgba(255,255,255,0.10) var(--val, 35%), rgba(255,255,255,0.10) 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fafaf9;
  border: 2px solid #0a0a0b;
  cursor: grab;
  transition: transform 0.15s ease;
}
.custom-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.custom-range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fafaf9;
  border: 2px solid #0a0a0b;
  cursor: grab;
}

/* Tabs simples */
.tab {
  padding: 10px 16px;
  font-size: 13.5px;
  color: rgba(250,250,249,0.55);
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}
.tab:hover { color: #fafaf9; }
.tab.active { color: #fafaf9; border-color: #fafaf9; }

/* Badges discretos */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.badge-soft { background: rgba(255,255,255,0.06); color: rgba(250,250,249,0.75); }
.badge-amber { background: rgba(251, 191, 36, 0.10); color: rgba(251, 191, 36, 0.95); }
.badge-rose { background: rgba(251, 113, 133, 0.10); color: rgba(251, 113, 133, 0.95); }

/* Tile de conquista */
.achievement-tile {
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.015);
}
.achievement-tile.unlocked { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
.achievement-tile.unlocked:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); }
.achievement-tile.locked { opacity: 0.55; }
.achievement-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  display: grid; place-items: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  color: rgba(250,250,249,0.85);
}
.achievement-tile.unlocked .achievement-icon {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 113, 133, 0.18));
  color: #fafaf9;
}

/* Plano destacado */
.plan-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 28px;
  transition: all 0.3s ease;
}
.plan-card:hover { border-color: rgba(255,255,255,0.18); }
.plan-card.highlight {
  border-color: rgba(255,255,255,0.30);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow: 0 30px 80px -30px rgba(255, 180, 140, 0.18);
}

/* Estatísticas grandes (números) */
.stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-num em {
  font-style: italic;
  color: rgba(250,250,249,0.6);
}


/* ============================================================
   WIZARD — fluxo guiado por categoria
   ============================================================ */
.wizard-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: #fafaf9;
  font: 400 28px/1.3 'Inter', sans-serif;
  letter-spacing: -0.02em;
  padding: 14px 0;
  outline: none;
  transition: border-color 0.25s ease;
}
.wizard-input:focus { border-bottom-color: rgba(255,255,255,0.55); }
.wizard-input::placeholder { color: rgba(250,250,249,0.30); font-weight: 300; }

.wizard-textarea {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #fafaf9;
  padding: 18px 20px;
  font: 400 15.5px/1.65 'Inter', sans-serif;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.wizard-textarea:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}
.wizard-textarea::placeholder { color: rgba(250,250,249,0.30); }

.wizard-card {
  position: relative;
  text-align: left;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s ease;
  cursor: pointer;
}
.wizard-card:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.18); }
.wizard-card.is-selected {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20), 0 12px 40px -10px rgba(255,180,140,0.15);
}

.wizard-orb {
  position: relative;
  isolation: isolate;
  padding: 16px 26px;
  border-radius: 999px;
  font: 500 14.5px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.78);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.25s ease;
  cursor: pointer;
}
.wizard-orb .orb-glow {
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: radial-gradient(60% 80% at 50% 50%, rgba(251,191,36,0.18), rgba(251,113,133,0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.wizard-orb:hover { color: #fafaf9; border-color: rgba(255,255,255,0.20); }
.wizard-orb:hover .orb-glow { opacity: 0.55; }
.wizard-orb.is-selected {
  color: #0a0a0b;
  background: #fafaf9;
  border-color: #fafaf9;
}
.wizard-orb.is-selected .orb-glow { opacity: 0; }

.wizard-tag {
  padding: 9px 16px;
  border-radius: 999px;
  font: 500 13px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.75);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 0.2s ease;
  cursor: pointer;
}
.wizard-tag:hover { border-color: rgba(255,255,255,0.25); color: #fafaf9; }
.wizard-tag.is-selected {
  color: #0a0a0b;
  background: #fafaf9;
  border-color: #fafaf9;
}

.wizard-step-wrapper { animation: wizardStepIn 0.45s cubic-bezier(0.16,1,0.3,1) both; }
.wizard-fade-in { animation: wizardStepIn 0.55s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes wizardStepIn { from { opacity: 0; transform: translateY(14px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* ============================================================
   WIZARD IMERSIVO — fullscreen + aurora dinâmica + números grandes
   ============================================================ */
.wizard-immersive {
  position: relative;
  min-height: calc(100vh - 64px - 72px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}
.wizard-aurora {
  position: absolute; inset: -20% -10% -20% -10%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(80px) saturate(120%);
  background:
    radial-gradient(45% 38% at 22% 18%, var(--aurora-a, rgba(245,158,11,0.30)), transparent 70%),
    radial-gradient(40% 36% at 78% 28%, var(--aurora-b, rgba(180,83,9,0.22)), transparent 72%),
    radial-gradient(55% 45% at 52% 92%, var(--aurora-c, rgba(120,53,15,0.18)), transparent 70%);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate(0%, 0%) scale(1); }
  50%  { transform: translate(-3%, 2%) scale(1.06); }
  100% { transform: translate(2%, -2%) scale(1.02); }
}
/* Aurora por categoria — paleta puxada do duotone da cover */
.wizard-immersive.cover-homenagem  { --aurora-a: rgba(245,158,11,0.35); --aurora-b: rgba(180,83,9,0.26); --aurora-c: rgba(120,53,15,0.20); }
.wizard-immersive.cover-declaracao { --aurora-a: rgba(251,113,133,0.30); --aurora-b: rgba(190,24,93,0.25); --aurora-c: rgba(131,24,67,0.22); }
.wizard-immersive.cover-religiosa  { --aurora-a: rgba(192,132,252,0.30); --aurora-b: rgba(126,34,206,0.25); --aurora-c: rgba(76,29,149,0.22); }
.wizard-immersive.cover-politica   { --aurora-a: rgba(52,211,153,0.30); --aurora-b: rgba(4,120,87,0.25); --aurora-c: rgba(6,78,59,0.22); }
.wizard-immersive.cover-jingle     { --aurora-a: rgba(96,165,250,0.30); --aurora-b: rgba(37,99,235,0.25); --aurora-c: rgba(30,58,138,0.22); }
.wizard-immersive.cover-zoeira     { --aurora-a: rgba(253,224,71,0.32); --aurora-b: rgba(202,138,4,0.26); --aurora-c: rgba(113,63,18,0.22); }
.wizard-immersive.cover-historia   { --aurora-a: rgba(214,211,209,0.22); --aurora-b: rgba(120,113,108,0.22); --aurora-c: rgba(41,37,36,0.30); }
.wizard-immersive.cover-criadores  { --aurora-a: rgba(232,121,249,0.30); --aurora-b: rgba(162,28,175,0.25); --aurora-c: rgba(88,28,135,0.22); }
.wizard-immersive.cover-hino       { --aurora-a: rgba(251,146,60,0.32); --aurora-b: rgba(194,65,12,0.26); --aurora-c: rgba(124,45,18,0.22); }

.wizard-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px 14px;
  gap: 16px;
}
.wizard-crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(250,250,249,0.55);
}
.wizard-progress-meta {
  font-size: 12px; letter-spacing: 0.06em;
  color: rgba(250,250,249,0.85);
  display: inline-flex; gap: 6px;
}
.wizard-progress-bar {
  position: relative; z-index: 2;
  height: 1.5px; background: rgba(255,255,255,0.06);
  margin: 0 32px;
}
.wizard-progress-bar > div {
  height: 100%;
  background: rgba(250,250,249,0.85);
  transition: width 0.55s cubic-bezier(0.16,1,0.3,1);
}

.wizard-stage {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 40px 32px 60px;
}
.wizard-form { width: 100%; max-width: 980px; margin: 0 auto; }

.wizard-step-immersive,
.wizard-finish {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wizard-step-num {
  font-size: 13px; letter-spacing: 0.10em;
  color: rgba(250,250,249,0.40);
  display: inline-flex; gap: 4px;
  margin-bottom: 18px;
}
.wizard-step-num .num-current { color: rgba(250,250,249,0.85); }
.wizard-step-num .num-sep { color: rgba(250,250,249,0.20); }

/* Tipografia gigante das perguntas dentro do step imersivo */
.wizard-step-immersive .hero-headline,
.wizard-finish .hero-headline {
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.wizard-step-immersive header { margin-bottom: 36px; }

.wizard-footer {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px 26px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(to top, rgba(10,10,11,0.80), transparent);
  backdrop-filter: blur(8px);
}

@media (max-width: 640px) {
  .wizard-header { padding: 16px 20px 10px; }
  .wizard-progress-bar { margin: 0 20px; }
  .wizard-stage { padding: 28px 20px 80px; align-items: flex-start; }
  .wizard-footer { padding: 14px 20px 20px; }
}

/* Pulse loader */
.dot-pulse { display: inline-flex; gap: 6px; align-items: center; }
.dot-pulse span { width: 6px; height: 6px; border-radius: 50%; background: rgba(250,250,249,0.65); animation: dotPulse 1.2s infinite ease-in-out; }
.dot-pulse span:nth-child(2) { animation-delay: 0.15s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.30s; }
@keyframes dotPulse { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1); } }

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   CANVAS PLAYER
   ============================================================ */
.canvas-stage {
  min-height: calc(100vh - 64px - 72px);
  position: relative;
  background: #0a0a0b;
}
.canvas-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(255, 180, 140, 0.20), transparent 70%),
    radial-gradient(50% 40% at 80% 60%, rgba(180, 120, 220, 0.16), transparent 65%),
    radial-gradient(70% 50% at 50% 100%, rgba(120, 160, 220, 0.14), transparent 70%);
  filter: blur(50px) saturate(110%);
  animation: canvasFlow 18s ease-in-out infinite alternate;
}
@keyframes canvasFlow {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.05); }
}
.canvas-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: overlay;
}

/* Mídia do usuário */
.canvas-user-video,
.canvas-user-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.45) saturate(120%);
  z-index: 0;
  pointer-events: none;
}
.canvas-user-image { background-size: cover; background-position: center; }

/* Capa */
.canvas-cover-wrap {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.7), 0 20px 40px -10px rgba(0,0,0,0.5);
}
.canvas-cover-wrap:hover { transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1.015); }
.canvas-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.canvas-cover-glow {
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 40%, rgba(255,180,140,0.18));
  z-index: -1;
  filter: blur(20px);
  opacity: 0.6;
}

/* Waveform */
.canvas-waveform {
  display: flex; align-items: center; gap: 2px;
  height: 38px;
  padding: 0 1px;
}
.canvas-waveform .bar {
  flex: 1;
  background: rgba(250,250,249,0.55);
  border-radius: 1px;
  height: var(--h, 30%);
  transform-origin: center;
  animation: barPulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.05s);
}
@keyframes barPulse {
  0%, 100% { transform: scaleY(0.7); opacity: 0.45; }
  50% { transform: scaleY(1.1); opacity: 0.85; }
}

/* Lyrics teleprompter */
.canvas-lyrics {
  font: 400 17px/1.7 'Inter', sans-serif;
  color: rgba(250,250,249,0.55);
  white-space: pre-line;
  max-height: 280px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-right: 4px;
  mask-image: linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
}
.canvas-lyrics .line { transition: all 0.4s ease; padding: 2px 0; }
.canvas-lyrics .line.active { color: #fafaf9; transform: scale(1.02); transform-origin: left; }
.canvas-lyrics .line.dim { opacity: 0.45; filter: blur(0.5px); }
.canvas-lyrics .line.tag { color: rgba(251,191,36,0.65); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.04em; }

/* Watermark */
.canvas-watermark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(40px, 8vw, 84px);
  letter-spacing: 0.06em;
  color: rgba(250,250,249,0.10);
  pointer-events: none;
  text-transform: uppercase;
  z-index: 5;
}

/* Versão A/B chip */
.canvas-version-chip {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  font: 500 13px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.75);
  cursor: pointer;
  transition: all 0.2s ease;
}
.canvas-version-chip:hover { border-color: rgba(255,255,255,0.25); color: #fafaf9; }
.canvas-version-chip.is-active {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.40);
  color: #fafaf9;
}

/* btn disabled */
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; }

/* ==========================================================
   LANDING — Hero accent, social-proof badge, álbum cards,
   pílulas de estilos, cards de idioma.
   ========================================================== */

/* Destaque editorial em rose para palavras com <em class="hero-accent"> */
.hero-headline em.hero-accent,
em.hero-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #fb7185;              /* rose-400 — acento principal da marca */
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, #fda4af 0%, #fb7185 55%, #f43f5e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Social-proof badge */
.social-proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(6px);
  font: 400 12.5px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.65);
}
.social-proof-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}
.social-proof-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #101012;
  margin-left: -7px;
  display: inline-block;
  background: #1c1c1f;
}
.social-proof-avatar:first-child { margin-left: 0; }
.social-proof-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-proof-text { display: inline-flex; gap: 4px; }
.social-proof-dot { color: rgba(250,250,249,0.30); margin: 0 1px; }
.social-proof-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================
   CAPAS AUTORAIS — Apple Music style
   Composição abstrata gerada + duotone gradient sutil + grão.
   Sem texto sobreposto (o nome da categoria fica no tile-meta).
   ========================================================== */

.cover-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #0c0a09;
  isolation: isolate;
}
.cover-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  filter: contrast(1.02) brightness(0.96);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1),
              filter 0.6s ease;
}
.cover-art:hover .cover-photo {
  transform: scale(1.04);
  filter: contrast(1.06) brightness(1.0);
}

/* Duotone via blend — sutil, apenas reforça a tinta da categoria */
.cover-duotone {
  position: absolute; inset: 0;
  z-index: 2;
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
}

/* Vinheta levíssima — apenas para profundidade */
.cover-vignette {
  position: absolute; inset: 0;
  z-index: 3;
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0,0,0,0.30) 100%);
  pointer-events: none;
}

/* Grão de filme sutil (SVG noise inline) */
.cover-grain {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* Hairline interna sutil */
.cover-art::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 6;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

/* === Tintas duotone por categoria === */
.cover-homenagem  .cover-duotone { background: linear-gradient(160deg, #78350f 0%, #b45309 50%, #f59e0b 100%); }
.cover-declaracao .cover-duotone { background: linear-gradient(160deg, #500724 0%, #be185d 50%, #fb7185 100%); }
.cover-religiosa  .cover-duotone { background: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #c084fc 100%); }
.cover-politica   .cover-duotone { background: linear-gradient(160deg, #022c22 0%, #047857 50%, #34d399 100%); }
.cover-jingle     .cover-duotone { background: linear-gradient(160deg, #172554 0%, #1d4ed8 50%, #60a5fa 100%); }
.cover-zoeira     .cover-duotone { background: linear-gradient(160deg, #713f12 0%, #ca8a04 50%, #fde047 100%); }
.cover-historia   .cover-duotone { background: linear-gradient(160deg, #292524 0%, #57534e 50%, #d6d3d1 100%); }
.cover-criadores  .cover-duotone { background: linear-gradient(160deg, #581c87 0%, #a21caf 50%, #e879f9 100%); }
.cover-hino       .cover-duotone { background: linear-gradient(160deg, #7c2d12 0%, #c2410c 50%, #fb923c 100%); }

/* ==========================================================
   GRID DE CATEGORIAS — uniforme, sem hero
   ========================================================== */
.album-gallery { width: 100%; }
.album-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 14px;
}
@media (min-width: 720px) {
  .album-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 18px;
  }
}
@media (min-width: 1024px) {
  .album-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 22px;
  }
}

.album-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  outline: none;
}
.album-tile .cover-art {
  border-radius: 18px;
  box-shadow:
    0 22px 44px -22px rgba(0,0,0,0.85),
    0 6px 16px -8px rgba(0,0,0,0.55);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
}
.album-tile:hover .cover-art {
  transform: translateY(-4px);
  box-shadow:
    0 32px 60px -22px rgba(0,0,0,0.95),
    0 12px 28px -10px rgba(0,0,0,0.65);
}

.album-tile-meta {
  padding: 14px 4px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.album-tile-tagline {
  font: 400 12.5px/1.4 'Inter', sans-serif;
  color: rgba(250,250,249,0.55);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.album-tile-arrow {
  font: 400 14px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.30);
  transition: color 0.3s ease, transform 0.3s ease;
}
.album-tile:hover .album-tile-arrow {
  color: #fb7185;
  transform: translateX(3px);
}

/* CTA "Ver todas as categorias" */
.gallery-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  font: 500 13.5px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.92);
  text-decoration: none;
  transition: all 0.3s ease;
}
.gallery-more:hover {
  border-color: rgba(251,113,133,0.45);
  background: rgba(251,113,133,0.06);
  color: #fb7185;
}
.gallery-more-arrow {
  transition: transform 0.3s ease;
}
.gallery-more:hover .gallery-more-arrow { transform: translateX(4px); }

/* ==================== STYLE PILLS (50+ estilos) ==================== */
.style-pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  font: 400 13px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.80);
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: default;
}
.style-pill:hover {
  border-color: rgba(255,255,255,0.22);
  color: #fafaf9;
  background: rgba(255,255,255,0.045);
}
.style-pill-accent {
  border-color: rgba(251,113,133,0.40);
  color: #fda4af;
  background: rgba(251,113,133,0.06);
}
.style-pill-accent:hover {
  border-color: rgba(251,113,133,0.65);
  color: #fb7185;
  background: rgba(251,113,133,0.10);
}
.style-pill-more {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(250,250,249,0.45);
  border-style: dashed;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ==================== IDIOMAS — WORD MORPH ==================== */
.lang-morph-stage {
  position: relative;
  margin-top: 56px;
  min-height: 360px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(251,113,133,0.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0)),
    #0f0f12;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 60px 28px 48px;
}
/* Variação minimalista — sem lateral list, palavra ocupa todo o palco */
.lang-morph-stage-minimal {
  grid-template-columns: 1fr !important;
  text-align: center;
  padding: 80px 28px 64px;
  min-height: 380px;
}
@media (min-width: 900px) {
  .lang-morph-stage-minimal {
    padding: 100px 56px 80px;
    min-height: 440px;
  }
}

.lang-morph-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(251,113,133,0.10), transparent 70%);
}

/* Palco da palavra centralizada */
.lang-morph-word-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.lang-morph-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: italic 400 clamp(64px, 13vw, 160px)/1 'Instrument Serif', serif;
  letter-spacing: -0.025em;
  color: #fafaf9;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  filter: blur(8px);
  transition:
    opacity 0.7s cubic-bezier(0.22,1,0.36,1),
    transform 0.7s cubic-bezier(0.22,1,0.36,1),
    filter 0.7s cubic-bezier(0.22,1,0.36,1);
  text-shadow: 0 18px 50px rgba(251,113,133,0.18);
  white-space: nowrap;
}
.lang-morph-word.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Meta com bandeira pequena (18px) e label */
.lang-morph-meta {
  position: relative;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
}
.lang-morph-meta-item {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1) 0.08s,
              transform 0.5s cubic-bezier(0.22,1,0.36,1) 0.08s;
  pointer-events: none;
  white-space: nowrap;
}
.lang-morph-meta-item.is-active {
  opacity: 1;
  transform: translateY(0);
}
.lang-morph-label {
  font: 500 13px/1 'Inter', sans-serif;
  color: rgba(250,250,249,0.92);
  letter-spacing: -0.005em;
}
.lang-morph-dot {
  font-size: 11px;
  color: rgba(250,250,249,0.30);
}
.lang-morph-sub {
  font: 400 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.10em;
  color: rgba(250,250,249,0.50);
  text-transform: uppercase;
}

/* Cursor underscore piscando ao lado da palavra (variação minimalista) */
.lang-morph-cursor {
  display: inline-block;
  margin-left: 0.12em;
  font: italic 400 clamp(64px, 13vw, 160px)/1 'Instrument Serif', serif;
  color: #fb7185;
  opacity: 0.85;
  animation: langMorphCursorBlink 1.2s steps(2, jump-none) infinite;
  text-shadow: 0 12px 38px rgba(251,113,133,0.35);
  vertical-align: baseline;
  position: relative;
  top: -0.04em;
}
@keyframes langMorphCursorBlink {
  0%, 49% { opacity: 0.92; }
  50%, 100% { opacity: 0; }
}

/* === Humor groups (em /explorar — aba "Por humor") =================== */
.humor-group {
  position: relative;
}
.humor-group::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 8% 0%, var(--humor-accent, rgba(251,113,133,0.10)), transparent 70%);
  opacity: 0.6;
}
.humor-group > * { position: relative; }

.humor-group.humor-sky    { --humor-accent: rgba(56,189,248,0.14);  --humor-chip-color: #7dd3fc; --humor-chip-border: rgba(125,211,252,0.32); --humor-chip-bg: rgba(56,189,248,0.06); }
.humor-group.humor-amber  { --humor-accent: rgba(251,191,36,0.14);  --humor-chip-color: #fcd34d; --humor-chip-border: rgba(252,211,77,0.32);  --humor-chip-bg: rgba(251,191,36,0.06); }
.humor-group.humor-rose   { --humor-accent: rgba(251,113,133,0.14); --humor-chip-color: #fda4af; --humor-chip-border: rgba(253,164,175,0.32); --humor-chip-bg: rgba(251,113,133,0.06); }
.humor-group.humor-orange { --humor-accent: rgba(251,146,60,0.16);  --humor-chip-color: #fdba74; --humor-chip-border: rgba(253,186,116,0.34); --humor-chip-bg: rgba(251,146,60,0.06); }

.humor-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--humor-chip-border, rgba(255,255,255,0.10));
  background: var(--humor-chip-bg, rgba(255,255,255,0.02));
  font: 500 13px/1 'Inter', sans-serif;
  letter-spacing: -0.005em;
  color: var(--humor-chip-color, #fafaf9);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              border-color 0.25s ease,
              background 0.25s ease,
              color 0.25s ease;
  white-space: nowrap;
}
.humor-chip:hover {
  transform: translateY(-1px);
  border-color: var(--humor-chip-color, rgba(255,255,255,0.30));
  background: rgba(255,255,255,0.04);
  color: #fafaf9;
}
.humor-chip:active { transform: translateY(0); }

/* Bandeira small (18px) usada no word-morph */
.flag-wrap.flag-small {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,0.45))
    drop-shadow(0 1px 2px rgba(0,0,0,0.30));
}
.flag-wrap.flag-small .flag-svg {
  width: 22px;
  height: 16px;
}
.flag-wrap.flag-small::after {
  border-radius: 4px;
}

/* ==================== BOTÃO + Criar música (rose com GLOW) ==================== */
.btn-create-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  color: #fff;
  font: 500 13.5px/1 'Inter', sans-serif;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 0 0 1px rgba(251,113,133,0.35),
    0 8px 24px -6px rgba(251,113,133,0.55),
    0 0 38px -4px rgba(251,113,133,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.btn-create-glow:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(251,113,133,0.50),
    0 12px 32px -6px rgba(251,113,133,0.70),
    0 0 56px -2px rgba(251,113,133,0.70),
    inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn-create-glow:active {
  transform: translateY(0);
}
.btn-create-glow .btn-create-plus {
  font: italic 400 17px/1 'Instrument Serif', serif;
  margin-right: 1px;
  margin-top: -1px;
}
.btn-create-glow.btn-create-glow-lg {
  padding: 13px 22px;
  font-size: 14.5px;
}

/* Bandeira estilo emoji iOS */
.flag-wrap {
  width: 56px;
  height: 40px;
  border-radius: 9px;
  position: relative;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.55))
    drop-shadow(0 2px 4px rgba(0,0,0,0.40));
}
.flag-svg {
  display: block;
  width: 56px;
  height: 40px;
}
.flag-wrap::after {
  /* leve "wave" simulado por sombra suave de canto */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0) 30%,
    rgba(0,0,0,0.18) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.lang-card:hover .flag-wrap {
  transform: translateY(-1px) rotate(-1.5deg);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

/* ==================== EXPLORAR — TABS ==================== */
.explorar-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 14px 18px;
  font: 500 13.5px/1 'Inter', sans-serif;
  letter-spacing: -0.005em;
  color: rgba(250,250,249,0.55);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.explorar-tab:hover {
  color: rgba(250,250,249,0.85);
}
.explorar-tab.is-active {
  color: #fafaf9;
  border-bottom-color: #fb7185;
}

/* ==================== EXPLORAR — IDIOMAS CARDS ==================== */
.explorar-lang-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.explorar-lang-card:hover {
  border-color: rgba(251,113,133,0.40);
  background: rgba(251,113,133,0.04);
  transform: translateY(-1px);
}
.explorar-lang-flag {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.40));
}

/* ==================== STUDIO — SUNO FEATURES GRID ==================== */
.suno-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  .suno-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .suno-features-grid { grid-template-columns: repeat(4, 1fr); }
}

.suno-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0)), #131316;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.suno-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.suno-feature:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.suno-feature:hover::before { opacity: 1; }

.suno-feature-rose::before    { background: radial-gradient(120% 120% at 0% 0%, rgba(251,113,133,0.14), transparent 60%); }
.suno-feature-amber::before   { background: radial-gradient(120% 120% at 0% 0%, rgba(251,191,36,0.12), transparent 60%); }
.suno-feature-emerald::before { background: radial-gradient(120% 120% at 0% 0%, rgba(52,211,153,0.12), transparent 60%); }
.suno-feature-blue::before    { background: radial-gradient(120% 120% at 0% 0%, rgba(96,165,250,0.12), transparent 60%); }
.suno-feature-fuchsia::before { background: radial-gradient(120% 120% at 0% 0%, rgba(232,121,249,0.12), transparent 60%); }
.suno-feature-violet::before  { background: radial-gradient(120% 120% at 0% 0%, rgba(192,132,252,0.12), transparent 60%); }
.suno-feature-orange::before  { background: radial-gradient(120% 120% at 0% 0%, rgba(249,115,22,0.12), transparent 60%); }

.suno-feature-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 18px;
  flex-shrink: 0;
}
.suno-feature-text {
  position: relative;
  flex: 1;
  min-width: 0;
}
.suno-feature-title {
  font: 500 13.5px/1.2 'Inter', sans-serif;
  color: #fafaf9;
  letter-spacing: -0.005em;
  margin: 0;
}
.suno-feature-desc {
  font: 400 11.5px/1.4 'Inter', sans-serif;
  color: rgba(250,250,249,0.50);
  margin: 3px 0 0;
}
.suno-feature-arrow {
  position: relative;
  color: rgba(250,250,249,0.30);
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}
.suno-feature:hover .suno-feature-arrow {
  color: #fb7185;
  transform: translateX(2px);
}

/* ==================== STUDIO — MY SONGS GRID ==================== */
.my-songs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .my-songs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .my-songs-grid { grid-template-columns: repeat(3, 1fr); }
}

.my-song-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.018);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.my-song-card:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
}

.my-song-cover {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.my-song-cover img {
  display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.my-song-card:hover .my-song-cover img {
  transform: scale(1.06);
}
.my-song-play {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fb7185;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -4px rgba(251,113,133,0.55);
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.my-song-card:hover .my-song-play {
  opacity: 1;
  transform: translateY(0);
}

.my-song-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-song-text {
  min-width: 0;
}
.my-song-title {
  font: 500 14px/1.2 'Inter', sans-serif;
  color: #fafaf9;
  letter-spacing: -0.005em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-song-sub {
  font: 400 11.5px/1.3 'Inter', sans-serif;
  color: rgba(250,250,249,0.50);
  margin: 3px 0 0;
}

/* Apenas 3 ações: ▶ tocar · 🎬 canvas · ⋯ menu */
.my-song-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.my-song-action {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  color: rgba(250,250,249,0.65);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.my-song-action:hover {
  background: rgba(251,113,133,0.10);
  border-color: rgba(251,113,133,0.28);
  color: #fb7185;
  transform: translateY(-1px);
}
.my-song-menu-toggle.is-open {
  background: rgba(251,113,133,0.10);
  border-color: rgba(251,113,133,0.30);
  color: #fb7185;
}

/* Dropdown ⋯ */
.my-song-card { position: relative; }
.my-song-menu {
  position: absolute;
  right: 12px;
  bottom: 56px;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  background: rgba(20,18,18,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: menuPop 0.18s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes menuPop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.my-song-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(250,250,249,0.85);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.my-song-menu-item span { font-size: 14px; width: 18px; display: inline-flex; justify-content: center; }
.my-song-menu-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fafaf9;
}
.my-song-menu-sep {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 6px;
}
.my-song-menu-danger { color: rgba(252,165,165,0.92); }
.my-song-menu-danger:hover {
  background: rgba(220,38,38,0.14);
  color: #fca5a5;
}

/* Estado tocando — pulsa o cover */
.my-song-card.is-playing .my-song-cover img {
  animation: songPulse 0.8s ease-in-out 2 alternate;
}
@keyframes songPulse {
  from { filter: brightness(1) saturate(1); }
  to   { filter: brightness(1.12) saturate(1.15); }
}

/* Empty state */
.my-songs-empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.015);
}

/* Toast de feedback */
.studio-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(20,18,18,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fafaf9;
  font-size: 13px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.40);
  animation: toastUp 0.32s cubic-bezier(0.16,1,0.3,1) both;
  max-width: 90vw;
}
.studio-toast.is-error { border-color: rgba(252,165,165,0.30); color: #fecaca; }
.studio-toast.is-ok    { border-color: rgba(251,113,133,0.30); }
@keyframes toastUp {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Suno feature em breve */
.suno-feature-soon {
  font-size: 10.5px;
  color: rgba(250,250,249,0.40);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ==================== STUDIO — CATEGORY STRIP ==================== */
.cat-strip-tile {
  flex-shrink: 0;
  width: 200px;
  display: block;
  transition: transform 0.3s ease;
}
.cat-strip-tile:hover { transform: translateY(-2px); }
.cat-strip-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
}
.cat-strip-cover .cover-art {
  width: 100%;
  height: 100%;
}
.cat-strip-meta {
  padding: 10px 4px 0;
}
.cat-strip-name {
  font: 500 13.5px/1.2 'Inter', sans-serif;
  color: #fafaf9;
  margin: 0;
  letter-spacing: -0.005em;
}
.cat-strip-tagline {
  font: 400 11.5px/1.3 'Inter', sans-serif;
  color: rgba(250,250,249,0.50);
  margin: 3px 0 0;
}