:root{
  --peach:#FFD3AC;
  --coral:#FFB5AB;
  --terracota:#E39A7B;
  --dourado:#DBB06B;
  --lilas:#B29BCB;
  --paper:#FFFBF6;
  --card:#FFFFFF;
  --ink:#4A3327;
  --ink-suave:#8A6F5E;
  --linha:rgba(74,51,39,0.10);
  --linha-forte:rgba(74,51,39,0.22);
  --radius:18px;
  --sombra:0 4px 20px rgba(227,154,123,0.18);
  --font-titulo:'Fraunces', Georgia, serif;
  --font-corpo:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* cor de cada tela — a paleta inteira gira por tela, não fica travada numa cor só */
  --acento-tela: var(--terracota);
  --acento-tela-suave: var(--coral);
  --acento-tela-texto: #5A3624;
}
body[data-pagina="hoje"]{ --acento-tela: var(--terracota); --acento-tela-suave: var(--coral); --acento-tela-texto: #5A3624; }
body[data-pagina="trilha"]{ --acento-tela: var(--coral); --acento-tela-suave: var(--peach); --acento-tela-texto: #6B2F28; }
body[data-pagina="memorias"]{ --acento-tela: var(--dourado); --acento-tela-suave: var(--peach); --acento-tela-texto: #5A4620; }
body[data-pagina="lembretes"]{ --acento-tela: var(--peach); --acento-tela-suave: var(--dourado); --acento-tela-texto: #5A4620; }
body[data-pagina="pilares"]{ --acento-tela: var(--lilas); --acento-tela-suave: var(--peach); --acento-tela-texto: #453A57; }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-corpo);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* telas principais ganham o fundo colorido tipo moldura */
body[data-pagina="hoje"],
body[data-pagina="trilha"],
body[data-pagina="memorias"],
body[data-pagina="lembretes"],
body[data-pagina="pilares"]{
  background:var(--acento-tela);
}
main{max-width:480px;margin:0 auto;padding:1.75rem 1.25rem 6rem;}
img{max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-titulo);margin:0;font-weight:600;}

.topo{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.4rem;}
.topo .voltar{font-size:1.3rem;text-decoration:none;color:var(--acento-tela-texto);}
.topo h1{font-size:1.4rem;color:var(--acento-tela-texto);}

.texto-suave{color:var(--acento-tela-texto);opacity:0.8;font-size:0.92rem;line-height:1.55;margin:0.3rem 0 1.5rem;}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--sombra);
  padding:1.4rem;
  margin-bottom:1.1rem;
}

.hero-pergunta{
  background:var(--card);
  border-radius:24px;
  padding:1.8rem 1.5rem;
  margin-bottom:1.3rem;
  color:var(--ink);
  box-shadow:var(--sombra);
}
.hero-pergunta .rotulo{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--acento-tela);margin-bottom:0.5rem;}
.hero-pergunta h2{font-size:1.5rem;line-height:1.3;margin-bottom:0.3rem;}

textarea,input[type=text]{
  width:100%;
  padding:0.85rem 1rem;
  border-radius:14px;
  border:1px solid var(--linha-forte);
  font-family:var(--font-corpo);
  font-size:0.95rem;
  background:var(--paper);
  color:var(--ink);
  resize:vertical;
}
textarea{min-height:110px;}
label{display:block;font-size:0.82rem;font-weight:600;color:var(--ink-suave);margin:0 0 0.4rem;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  width:100%;padding:0.9rem;border-radius:999px;border:none;
  font-family:var(--font-corpo);font-size:0.95rem;font-weight:700;
  cursor:pointer;text-decoration:none;
}
.btn-principal{background:var(--acento-tela);color:#fff;}
.btn-secundario{background:var(--card);color:var(--acento-tela);border:1.5px solid var(--acento-tela);}
.btn-texto{background:none;color:var(--ink-suave);font-weight:600;padding:0.5rem;}

.toggle-compartilhar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--paper);border:1px solid var(--linha);border-radius:14px;
  padding:0.85rem 1rem;margin:0.9rem 0;
}
.toggle-compartilhar span{font-size:0.88rem;font-weight:600;}
.switch{position:relative;width:44px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .track{position:absolute;inset:0;background:var(--linha-forte);border-radius:999px;transition:background .2s;cursor:pointer;}
.switch .track:before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s;}
.switch input:checked + .track{background:var(--acento-tela);}
.switch input:checked + .track:before{transform:translateX(18px);}

.tabs-baixo{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--card);border-top:1px solid var(--linha);
  display:flex;padding:0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  z-index:40;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:0.2rem;
  text-decoration:none;color:var(--ink-suave);font-size:0.68rem;font-weight:600;
  padding:0.4rem 0.2rem;
}
.tab-item.ativo{color:var(--acento-tela);}
.tab-item svg{width:22px;height:22px;}

.mensagem-trilha{
  display:flex;flex-direction:column;gap:0.3rem;
  max-width:82%;padding:0.85rem 1.05rem;border-radius:16px;margin-bottom:0.7rem;
}
.mensagem-trilha.minha{background:var(--card);box-shadow:var(--sombra);margin-left:auto;border-bottom-right-radius:4px;}
.mensagem-trilha.minha .tecnica{color:var(--acento-tela);}
.mensagem-trilha.parceiro{background:var(--card);box-shadow:var(--sombra);margin-right:auto;border-bottom-left-radius:4px;}
.mensagem-trilha.parceiro .tecnica{color:var(--ink-suave);}
.mensagem-trilha .tecnica{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
.mensagem-trilha .data{font-size:0.68rem;color:var(--ink-suave);opacity:0.75;margin-top:0.1rem;}

.entrada-memoria{padding:0.9rem 0;border-bottom:1px solid var(--linha);}
.entrada-memoria:last-child{border-bottom:none;}
.entrada-memoria .data{font-size:0.72rem;font-weight:700;color:var(--acento-tela);text-transform:uppercase;letter-spacing:0.03em;}
.entrada-memoria p{margin:0.3rem 0 0;font-size:0.92rem;line-height:1.5;}
.entrada-memoria .badge{display:inline-block;font-size:0.68rem;font-weight:700;background:var(--acento-tela);color:#fff;padding:0.15rem 0.5rem;border-radius:999px;margin-left:0.4rem;}

.vazio{text-align:center;color:var(--ink-suave);padding:2.5rem 1rem;font-size:0.9rem;}

.abertura{text-align:center;padding:2rem 0 1.5rem;}
.abertura h1{font-size:1.7rem;margin-bottom:0.5rem;}
.marca{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:1.5rem;}
.marca-logo{width:28px;height:28px;border-radius:8px;display:block;flex-shrink:0;}
.marca span{font-family:var(--font-titulo);font-size:1.1rem;font-weight:600;color:var(--terracota);}

.link-convite-box{
  background:var(--paper);border:1.5px dashed var(--linha-forte);border-radius:14px;
  padding:0.9rem 1rem;font-size:0.85rem;word-break:break-all;margin:0.8rem 0;
  color:var(--ink-suave);
}

.field-error{color:#B5482F;font-size:0.8rem;margin-top:0.4rem;display:none;}
.field-error.show{display:block;}