@font-face {
  font-family: "Lora";
  src: url("fontes/Lora.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --fundo: #1B1622;
  --fundo-2: #241D2E;
  --cartao: #2A2235;
  --texto: #EFE8F4;
  --suave: #B3A8BF;
  --linha: rgba(156, 138, 224, 0.22);
  --rosa: #E891B5;
  --lilas: #9C8AE0;
  --azul: #7FB7EA;
  --dourado: #D9B86C;
  --gradiente: linear-gradient(135deg, var(--rosa), var(--lilas) 55%, var(--azul));
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --fundo: #FBF6FA;
    --fundo-2: #F4ECF6;
    --cartao: #FFFFFF;
    --texto: #2B2433;
    --suave: #6F6479;
    --linha: rgba(156, 138, 224, 0.28);
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --fundo: #FBF6FA;
  --fundo-2: #F4ECF6;
  --cartao: #FFFFFF;
  --texto: #2B2433;
  --suave: #6F6479;
  --linha: rgba(156, 138, 224, 0.28);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; border-radius: 8px; }
svg { width: 24px; height: 24px; fill: currentColor; }
[hidden] { display: none !important; }

/* ---------- Memória ---------- */
.memoria {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background:
    radial-gradient(ellipse 70% 45% at 50% 28%, rgba(232, 145, 181, 0.22), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 85%, rgba(127, 183, 234, 0.12), transparent 70%),
    var(--fundo);
  padding: calc(env(safe-area-inset-top) + 28px) 28px calc(env(safe-area-inset-bottom) + 32px);
}
.memoria-corpo {
  max-width: 420px; margin: 0 auto; text-align: center;
  animation: aparecer 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .memoria-corpo { animation: none; } }
.memoria-intro { margin: 0 0 20px; color: var(--rosa); font-family: var(--serif); font-style: italic; font-size: 17px; }
.arco {
  margin: 0 auto; width: min(68vw, 300px); aspect-ratio: 1 / 1.35;
  border-radius: 999px 999px 26px 26px; overflow: hidden;
  border: 6px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 46px rgba(232, 145, 181, 0.45), 0 26px 70px rgba(156, 138, 224, 0.35);
}
:root[data-tema="escuro"] .arco, :root:not([data-tema]) .arco { border-color: rgba(255, 255, 255, 0.2); }
.arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.memoria-nome {
  margin: 30px 0 16px; font-family: var(--serif); font-weight: 600; font-size: 33px; line-height: 1.15;
}
.memoria-nome span { display: block; font-weight: 400; font-size: 21px; margin-top: 4px; }
.memoria-data { margin: 4px 0; color: var(--suave); font-size: 15px; display: flex; justify-content: center; align-items: center; gap: 9px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ponto.nasc { background: var(--rosa); }
.ponto.part { background: var(--lilas); }
.memoria-dia {
  display: inline-block; margin: 18px 0 0; padding: 10px 18px; border-radius: 999px;
  background: rgba(232, 145, 181, 0.18); font-weight: 600;
}
.coracao { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 18px; color: var(--dourado); }
.coracao i { width: 64px; height: 1px; background: currentColor; opacity: .6; }
.coracao svg { width: 16px; height: 16px; }
.frase { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.6; }
.referencia { margin: 8px 0 34px; color: var(--suave); font-size: 13px; }
.botao-principal {
  background: var(--lilas); color: #fff; font-weight: 600; font-size: 16px;
  padding: 15px 44px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(156, 138, 224, 0.4);
}

/* ---------- App ---------- */
.app { min-height: 100%; padding-bottom: calc(env(safe-area-inset-bottom) + 150px); }
.topo {
  position: sticky; top: 0; z-index: 5; background: var(--fundo);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 6px 20px;
}
.marca { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.topo-accoes { display: flex; }
.icone-botao { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--texto); }
.icone-botao.grande svg { width: 34px; height: 34px; }
.icone-botao.medio svg { width: 36px; height: 36px; }
#abrir-memoria { color: var(--rosa); }

.separadores {
  position: sticky; top: calc(env(safe-area-inset-top) + 60px); z-index: 4; background: var(--fundo);
  display: flex; gap: 6px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none;
}
.separadores button {
  padding: 8px 16px; border-radius: 999px; color: var(--suave); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.separadores button[aria-selected="true"] { background: var(--cartao); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }

.conteudo { padding: 0 8px; }
.pesquisa {
  display: block; width: calc(100% - 16px); margin: 2px 8px 10px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto); font-size: 16px;
}
.lista { list-style: none; margin: 0; padding: 0; }
.faixa {
  display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px;
  padding: 8px; border-radius: 14px;
}
.faixa:active { background: var(--fundo-2); }
.faixa .miniatura { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; background: var(--gradiente); }
.faixa .texto { min-width: 0; }
.faixa b, .faixa small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa b { font-weight: 600; }
.faixa small { color: var(--suave); font-size: 13px; }
.faixa.actual b { color: var(--rosa); }
.faixa .fav { color: var(--rosa); width: 14px; height: 14px; margin-right: 2px; }
.faixa .opcoes { width: 40px; height: 40px; display: grid; place-items: center; color: var(--suave); }

.grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 4px 8px 16px; }
.album { text-align: left; }
.album img { width: 100%; aspect-ratio: 1; border-radius: 16px; object-fit: cover; background: var(--gradiente); display: block; }
.album b, .album small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album b { margin-top: 8px; font-weight: 600; }
.album small { color: var(--suave); font-size: 13px; }

.grupo-cabecalho { display: flex; gap: 16px; align-items: center; padding: 6px 8px 14px; }
.grupo-cabecalho img { width: 92px; height: 92px; border-radius: 16px; object-fit: cover; background: var(--gradiente); }
.grupo-cabecalho h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.grupo-cabecalho p { margin: 0 0 10px; color: var(--suave); font-size: 14px; }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--suave); padding: 4px 8px 10px; font-weight: 600; }
.voltar svg { width: 20px; height: 20px; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pilula { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; background: var(--lilas); color: #fff; }
.pilula.contorno { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }

.vazio { text-align: center; padding: 56px 28px; color: var(--suave); }
.vazio h2 { color: var(--texto); font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 18px 0 8px; }
.vazio .circulo { width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; background: var(--gradiente); display: grid; place-items: center; color: #fff; }
.vazio .circulo svg { width: 44px; height: 44px; }
.vazio p { max-width: 34ch; margin: 0 auto; }

.adicionar {
  position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 92px); z-index: 6;
  display: flex; align-items: center; gap: 6px; padding: 13px 20px 13px 16px; border-radius: 999px;
  background: var(--lilas); color: #fff; font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.app.sem-mini .adicionar { bottom: calc(env(safe-area-inset-bottom) + 22px); }

.mini {
  position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); z-index: 7;
  display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 8px;
  background: var(--cartao); border-radius: 18px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--linha);
  overflow: hidden;
}
.mini-progresso { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.mini-progresso i { display: block; height: 100%; width: 0; background: var(--rosa); }
.mini-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.mini-info img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--gradiente); flex: none; }
.mini-info span { min-width: 0; }
.mini-info b, .mini-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info small { color: var(--suave); font-size: 13px; }
#mini-tocar { color: var(--lilas); }

/* ---------- Folhas ---------- */
.folha {
  position: fixed; inset: 0; z-index: 20; background: var(--fundo);
  animation: subir .35s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .folha { animation: none; } }

.tocar {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 6px) 24px calc(env(safe-area-inset-bottom) + 18px);
  background: linear-gradient(180deg, rgba(156, 138, 224, 0.28), transparent 60%), var(--fundo);
}
.tocar-topo { width: 100%; display: flex; align-items: center; justify-content: space-between; color: var(--suave); font-size: 14px; font-weight: 600; }
.tocar-topo .icone-botao svg { width: 30px; height: 30px; }
.tocar-capa {
  width: min(100%, 42vh, 380px); aspect-ratio: 1; margin: auto 0; border-radius: 26px; object-fit: cover;
  background: var(--gradiente); box-shadow: 0 24px 60px rgba(156, 138, 224, 0.35);
}
.tocar-titulos { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tocar-titulos div { flex: 1; min-width: 0; }
.tocar-titulos h2 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tocar-titulos p { margin: 4px 0 0; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tocar-fav { color: var(--rosa); }
#tocar-fav svg { width: 28px; height: 28px; }

.barra { width: 100%; margin: 20px 0 4px; -webkit-appearance: none; appearance: none; height: 28px; background: transparent; }
.barra::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--rosa) var(--p, 0%), rgba(156, 138, 224, 0.3) var(--p, 0%)); }
.barra::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--rosa); }
.barra::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(156, 138, 224, 0.3); }
.barra::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--rosa); }
.barra::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--rosa); }
.tempos { width: 100%; display: flex; justify-content: space-between; color: var(--suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.controlos { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.controlos .icone-botao { color: var(--texto); }
.controlos .activo { color: var(--rosa); }
.controlos .inactivo { color: var(--suave); }
.tocar-pausa {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--gradiente); box-shadow: 0 10px 28px rgba(232, 145, 181, 0.45);
}
.tocar-pausa svg { width: 40px; height: 40px; }

.veu { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.45); }
.painel {
  inset: auto 0 0 0; z-index: 31; max-height: 82vh; overflow-y: auto;
  background: var(--cartao); border-radius: 22px 22px 0 0;
  padding: 10px 8px calc(env(safe-area-inset-bottom) + 14px);
}
.painel::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--linha); margin: 0 auto 10px; }
.painel h3 { margin: 4px 14px 10px; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.painel .accao { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 14px; text-align: left; border-radius: 12px; }
.painel .accao:active { background: var(--fundo-2); }
.painel .accao svg { color: var(--lilas); flex: none; }
.painel .accao.perigo svg, .painel .accao.perigo { color: #E57373; }
.painel .nota { color: var(--suave); font-size: 14px; margin: 6px 14px 12px; }
.painel .sobre { padding: 6px 14px 4px; }
.painel .sobre p { margin: 6px 0; color: var(--suave); font-size: 14px; }
.painel .sobre a { color: var(--texto); font-weight: 600; text-decoration: none; display: block; padding: 6px 0; }
.painel .sobre .dedicatoria { font-family: var(--serif); font-style: italic; color: var(--texto); font-size: 16px; line-height: 1.6; }

.aviso {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 160px); z-index: 60; transform: translateX(-50%);
  background: var(--texto); color: var(--fundo); padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  max-width: calc(100% - 40px); text-align: center;
}