/* Sonai — marca do brand kit: fundo preto, neon azul elétrico,
   detalhe amarelo neon manuscrito ("by A.I. Pro Music"). */
:root {
  --bg: #000000;
  --panel: #0a0f16;
  --panel-2: #0d141d;
  --line: #1c2a3a;
  --text: #eaf4ff;
  --muted: #8fa8bf;
  --blue: #35a7ff;
  --blue-core: #7cc6ff;
  --blue-deep: #0b5fd7;
  --yellow: #ffe93c;
  --danger: #ff6b81;
  --ok: #3ddc97;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* glows de fundo, como nos stills do brand kit */
.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.glow-a { width: 560px; height: 560px; background: rgba(11, 95, 215, .35); top: -180px; left: -120px; }
.glow-b { width: 480px; height: 480px; background: rgba(53, 167, 255, .18); bottom: -200px; right: -100px; }

.topbar, main, footer { position: relative; z-index: 1; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  max-width: 980px;
  margin: 0 auto;
}

.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* logotipo em texto, espelhando o still oficial: letras bold arredondadas
   com núcleo branco-azulado e halo neon azul elétrico */
.logo {
  font-weight: 800;
  font-style: italic;
  font-size: 44px;
  letter-spacing: .5px;
  color: var(--blue-core);
  text-shadow:
    0 0 4px rgba(255, 255, 255, .85),
    0 0 14px var(--blue),
    0 0 34px var(--blue),
    0 0 64px var(--blue-deep);
}
.logo-small { font-size: 22px; }

/* detalhe manuscrito amarelo neon */
.tagline {
  font-family: "Caveat", cursive;
  font-size: 26px;
  color: #fff;
}
.tagline strong {
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 233, 60, .9), 0 0 22px rgba(255, 200, 20, .65);
}
.tagline-small { font-size: 19px; }

.session { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.balance {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
}
.balance b { color: var(--blue-core); }
.user-email { color: var(--muted); font-size: 14px; }

main { max-width: 980px; margin: 0 auto; padding: 8px 20px 40px; }

.card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: 0 18px 50px rgba(0, 60, 140, .25);
}
.auth-card { max-width: 520px; margin: 5vh auto 22px; }
.auth-card h1 { font-size: 30px; line-height: 1.2; margin: 0 0 8px; }
.card h2 { margin: 0 0 16px; font-size: 21px; }
.neon { color: var(--blue-core); text-shadow: 0 0 12px var(--blue), 0 0 30px var(--blue-deep); }
.muted { color: var(--muted); }
.fineprint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 16px; }
.hint { color: var(--muted); font-size: 12px; font-weight: 400; }

.tabs { display: flex; gap: 8px; margin: 18px 0; }
.tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tab.active { color: var(--text); border-color: var(--blue); box-shadow: 0 0 14px rgba(53, 167, 255, .35) inset; }

label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
input, textarea, select {
  width: 100%;
  margin-top: 6px;
  background: #05090f;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-weight: 400;
  padding: 11px 12px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(53, 167, 255, .22);
}
textarea { resize: vertical; }

.row { display: flex; gap: 16px; }
.row > label { flex: 1; }
.row-end { align-items: flex-end; }
.switch-line { display: flex; align-items: center; gap: 10px; font-weight: 600; padding-bottom: 10px; }
.switch-line input { width: auto; margin: 0; accent-color: var(--blue); transform: scale(1.25); }

.segmented { display: inline-flex; background: #05090f; border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.seg {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 8px 20px; border-radius: 999px; cursor: pointer;
}
.seg.active { background: var(--blue-deep); color: #fff; box-shadow: 0 0 16px rgba(53, 167, 255, .5); }

.btn {
  font: inherit; font-weight: 700; cursor: pointer;
  border-radius: 10px; padding: 11px 20px; border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  color: #fff;
  box-shadow: 0 0 18px rgba(53, 167, 255, .45);
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:disabled { opacity: .55; cursor: wait; }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); padding: 8px 14px; }
.btn-ghost:hover { color: var(--text); border-color: var(--blue); }
.btn-block { width: 100%; }

.form-msg { min-height: 20px; font-size: 14px; margin: 10px 0 0; }
.form-msg.error { color: var(--danger); }
.form-msg.ok { color: var(--ok); }

.create-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.cost { color: var(--muted); font-size: 14px; }
.cost b { color: var(--yellow); text-shadow: 0 0 10px rgba(255, 233, 60, .5); }

.lib-head { display: flex; align-items: center; justify-content: space-between; }
.lib-head h2 { margin: 0; }
.library { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }

.track-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: #05090f;
}
.track-item h3 { margin: 0 0 4px; font-size: 16px; }
.track-meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.badge {
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 11.5px;
}
.badge.status-success { color: var(--ok); border-color: var(--ok); }
.badge.status-fail { color: var(--danger); border-color: var(--danger); }
.badge.status-generating, .badge.status-waiting, .badge.status-queuing, .badge.status-queued { color: var(--blue-core); border-color: var(--blue); }
.version { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 12px; }
.version:first-of-type { border-top: 0; padding-top: 2px; margin-top: 4px; }
.version-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
audio { width: 100%; height: 40px; }
.spin { display: inline-block; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

footer {
  max-width: 980px; margin: 0 auto; padding: 10px 28px 34px;
  display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 14px;
}

@media (max-width: 640px) {
  .logo { font-size: 34px; }
  .tagline { font-size: 21px; }
  .row { flex-direction: column; gap: 0; }
  .topbar { padding: 16px; }
  .card { padding: 20px; }
}