/* Power Move: tema claro minimalista (fundo branco, muito respiro, cor só para dar sentido). */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --card-2: #f5f5f7;
  --borda: #ececef;
  --texto: #111113;
  --suave: #6e6e76;
  --corpo: #e3262f;
  --alma: #1f8fc4;
  --espirito: #c98f00;
  --ok: #16a34a;
  --raio: 18px;
  /* Fonte do sistema Apple (SF Pro). Em outros aparelhos cai para a fonte nativa equivalente. */
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --fonte-num: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Display", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--texto); }
body {
  font-family: var(--fonte);
  font-size: 16px; line-height: 1.55; letter-spacing: -.01em;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
}
.marca { display: flex; align-items: center; gap: 8px; font-family: var(--fonte); font-weight: 500; font-size: 17px; letter-spacing: -.3px; }
.marca img { width: 28px; height: auto; }
.marca b { color: var(--alma); font-weight: 500; }
.sequencia { background: var(--card-2); padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }

.tela { max-width: 600px; margin: 0 auto; padding: 8px 20px 24px; }
h1 { font-size: 30px; margin: 8px 0 4px; font-weight: 600; letter-spacing: -.8px; line-height: 1.15; }
h2 { font-size: 19px; margin: 32px 0 12px; font-weight: 600; letter-spacing: -.4px; color: var(--texto); }
h3 { letter-spacing: -.2px; font-weight: 600; }
b, strong { font-weight: 600; }
.sub { color: var(--suave); margin: 0 0 20px; }

.card {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; margin-bottom: 12px;
}
a.card { transition: border-color .15s; }
a.card:hover { border-color: #d4d4d9; }
.card.destaque { background: var(--card-2); border-color: transparent; }
.rotulo { font-size: 13px; letter-spacing: -.1px; color: var(--suave); font-weight: 500; }
.versiculo { font-size: 20px; font-weight: 500; margin: 10px 0 4px; letter-spacing: -.2px; }
.ref { color: var(--espirito); font-weight: 600; font-size: 14px; }
.situacao { color: var(--suave); font-style: italic; margin: 14px 0 6px; }
.acao {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--card-2);
  border-left: 3px solid var(--espirito); font-weight: 500;
}
.card.destaque .acao { background: #fff; }
.acao b { display: block; font-size: 13px; color: var(--suave); margin-bottom: 2px; font-weight: 500; }

.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pilar-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: var(--card-2); border-radius: var(--raio); padding: 16px 6px;
  font-weight: 600; font-size: 14px;
}
.pilar-btn span { font-size: 24px; }
.pilar-btn small { color: var(--suave); font-weight: 500; font-size: 12px; }

.checkin-grupo { margin-bottom: 16px; }
.checkin-grupo h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--borda); background: #fff; color: var(--texto);
  padding: 8px 14px; border-radius: 999px; font-size: 14px;
}
.chip.on { background: var(--texto); border-color: var(--texto); color: #fff; font-weight: 600; }
.chip.on.alma { background: var(--alma); border-color: var(--alma); color: #fff; }

.trilha { display: block; }
.trilha .topo-trilha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.trilha h3 { margin: 0; font-size: 16px; font-weight: 600; }
.trilha p { margin: 4px 0 12px; color: var(--suave); font-size: 14px; }
.barra { height: 4px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; }
.tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--card-2); color: var(--suave); white-space: nowrap; }
.tag.prio { background: #e8f4fb; color: var(--alma); }

.licao-item { display: flex; align-items: center; gap: 14px; }
.licao-item .num {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--card-2); font-weight: 600; font-size: 14px; color: var(--suave);
}
.licao-item.feita .num { background: var(--ok); color: #fff; }
.licao-item h3 { margin: 0; font-size: 15px; font-weight: 600; }
.licao-item p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }

.texto-licao p { margin: 0 0 14px; }
.voltar { display: inline-block; color: var(--suave); margin-bottom: 8px; font-size: 14px; }
.btn {
  display: block; width: 100%; padding: 15px; border: 0; border-radius: 14px;
  background: var(--texto); color: #fff; font-weight: 500; font-size: 17px; letter-spacing: -.2px; margin-top: 16px; text-align: center;
}
.btn.sec { background: var(--card-2); color: var(--texto); }
.btn:disabled { opacity: .5; }

label.campo { display: block; margin-bottom: 16px; }
label.campo span { display: block; font-size: 13px; color: var(--suave); margin-bottom: 6px; font-weight: 500; }
input, select {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--borda);
  background: #fff; color: var(--texto); font: inherit; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus { outline: none; border-color: var(--texto); }
.aviso { font-size: 13px; color: var(--suave); }
.vazio { color: var(--suave); text-align: center; padding: 24px 0; }
details summary { list-style: none; }

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--borda);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.abas a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: #a1a1aa; padding: 2px 0; }
.abas a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.abas a.ativa { color: var(--texto); font-weight: 600; }

/* ---------- login ---------- */
body.sem-abas .abas, body.sem-abas #sequencia { display: none; }
.login { max-width: 400px; margin: 40px auto 0; text-align: center; }
.login .card { text-align: left; border: 0; padding: 0; margin-top: 28px; }
.login-icone { width: 64px; height: auto; margin: 8px auto 16px; display: block; }
.login-logo { width: min(260px, 72vw); height: auto; margin: 18px auto 22px; display: block; }
.login h1 b { color: var(--alma); }
.btn-link { background: none; border: 0; color: var(--suave); font: inherit; font-size: 14px; text-decoration: underline; padding: 12px 0 0; width: 100%; cursor: pointer; }
.destaque-teste { margin: 0 0 16px; padding: 10px 12px; background: #fff8e6; border-radius: 12px; color: #8a6100; text-align: center; font-size: 14px; }
.destaque-teste b { font-family: var(--fonte-num); font-weight: 500; font-size: 22px; letter-spacing: 4px; color: var(--texto); margin-left: 6px; }

/* ---------- equilíbrio ---------- */
.triangulo { display: block; width: 100%; max-width: 260px; margin: 0 auto; overflow: visible; }
.tri-grade { fill: none; stroke: var(--borda); stroke-width: 1; }
.tri-eixo { stroke: var(--borda); stroke-width: 1; }
.tri-valor { fill: rgba(17,17,19,.05); stroke: var(--texto); stroke-width: 1.2; stroke-linejoin: round; }
.tri-rot { font-size: 12px; font-weight: 500; font-family: var(--fonte); }
.eq-topo { text-align: center; padding-top: 24px; }
.eq-indice b { display: block; font-family: var(--fonte-num); font-size: 56px; font-weight: 300; letter-spacing: -2px; line-height: 1; margin-top: 8px; }
.eq-indice span { font-size: 13px; color: var(--suave); }
.eq-frase { color: var(--suave); margin: 12px auto 0; max-width: 340px; font-size: 15px; }
.eq-pilar { display: block; }
.eq-linha { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.eq-num { font-family: var(--fonte-num); font-size: 24px; font-weight: 400; letter-spacing: -.5px; }
.mapa { display: grid; gap: 3px; align-items: center; }
.mapa i { display: block; aspect-ratio: 1; border-radius: 4px; min-height: 6px; }
.mapa-rot { font-size: 12px; color: var(--suave); }
.mapa-dias { display: flex; justify-content: space-between; font-size: 11px; color: var(--suave); margin: 8px 0 0 67px; }
.humor { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 0; text-align: center; }
.humor span { font-size: 20px; display: block; color: #c4c4cc; }
.humor small { font-size: 10px; color: var(--suave); }
.eq-licoes { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.eq-licoes b { display: block; font-family: var(--fonte-num); font-size: 28px; font-weight: 300; }
.eq-licoes span { font-size: 12px; color: var(--suave); display: block; }
.eq-licoes small { font-size: 13px; font-weight: 500; }
.eq-mini { display: flex !important; align-items: center; gap: 14px; }
.eq-mini .triangulo { width: 96px; flex: none; margin: 0; }
.eq-mini-num { font-family: var(--fonte-num); font-size: 38px; font-weight: 300; letter-spacing: -1.2px; line-height: 1.1; }
.eq-mini-link { font-size: 14px; font-weight: 500; color: var(--alma); margin-top: 4px; }

/* ---------- metas e jornada ---------- */
.metas-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.metas-topo b { font-size: 17px; }
.metas-dias { text-align: center; background: var(--card-2); border-radius: 14px; padding: 6px 12px; font-size: 13px; color: var(--suave); line-height: 1.2; }
.metas-dias b { font-family: var(--fonte-num); font-size: 22px; font-weight: 400; color: var(--texto); }
.metas-dias small { display: block; font-size: 11px; }
.metas-grupo { margin-top: 14px; }
.metas-grupo h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.meta { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 0; color: var(--texto); }
.meta + .meta { border-top: 1px solid var(--borda); }
.meta .caixa { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.6px solid #c9c9d0; display: grid; place-items: center; }
.meta.ok .caixa { background: var(--cor); border-color: var(--cor); }
.meta.ok .caixa::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 600; }
.meta.ok .meta-txt { color: var(--suave); text-decoration: line-through; }
.meta .tag { margin-left: auto; }
.meta-humor .meta-txt { display: block; font-size: 15px; margin: 4px 0 8px; }
.meta-humor + .meta { border-top: 1px solid var(--borda); margin-top: 8px; }
.metas-status { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); font-size: 14px; color: var(--suave); }
.metas-status.ok { background: #ecfdf3; color: var(--ok); font-weight: 600; }
.eq-jornada { display: flex !important; flex-direction: column; gap: 2px; }
.eq-jornada span { font-size: 13px; color: var(--suave); }
.jornada-topo { text-align: center; position: relative; }
.anel { width: 140px; height: 140px; transform: rotate(-90deg); display: block; margin: 8px auto 0; }
.anel-fundo { fill: none; stroke: var(--card-2); stroke-width: 9; }
.anel-valor { fill: none; stroke: var(--texto); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .4s; }
.anel-centro { position: absolute; top: 52px; left: 0; right: 0; line-height: 1.2; }
.anel-centro span { font-size: 15px; font-weight: 500; color: var(--suave); display: block; letter-spacing: 1px; }
.anel-centro b { font-family: var(--fonte-num); font-size: 20px; font-weight: 400; }
.jornada-topo h3 { margin: 16px 0 4px; font-size: 20px; }
.nivel-topo { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.nivel-icone { font-size: 14px; font-weight: 500; color: var(--suave); font-family: var(--fonte); width: 44px; height: 44px; display: grid; place-items: center; background: var(--card-2); border-radius: 12px; }
.nivel.atual { border-color: var(--texto); }
.nivel.bloq { opacity: .55; }
.nivel-metas { display: grid; grid-template-columns: 74px 1fr; font-size: 14px; padding: 4px 0; }
.nivel-metas span { font-weight: 500; font-size: 14px; }
.nivel-metas ul { margin: 0; padding: 0; list-style: none; color: var(--suave); }
.nivel-metas li.nova { color: var(--texto); font-weight: 600; }
.nivel-metas li.nova::after { content: " · nova"; color: var(--suave); font-weight: 400; font-size: 12px; }

/* ---------- mural ---------- */
.mural-post h3 { margin: 6px 0 10px; font-size: 18px; letter-spacing: -.3px; }
.mural-topo { display: flex; justify-content: space-between; align-items: center; }
.tag.novo { background: var(--alma); color: #fff; }
.mural-video { position: relative; margin: 4px -18px 12px; background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.mural-video iframe, .mural-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.mural-msg p { margin: 0 0 10px; color: var(--texto); }
.mural-msg p:last-child { margin-bottom: 0; }
.mural-destaque { border-color: #dfe9f0; }
.mural-todos { display: block; text-align: right; font-size: 14px; color: var(--alma); margin: -4px 4px 12px; }
.mural-video.vertical { aspect-ratio: 4 / 5; background: #fff; }

/* ---------- instalar o app (js/instalar.js) ---------- */
.instalar-aviso {
  position: fixed; left: 12px; right: 12px; z-index: 30; max-width: 576px; margin: 0 auto;
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  background: #fff; border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 8px 30px rgba(17,17,19,.12);
  animation: instalar-sobe .35s ease-out;
}
body.sem-abas .instalar-aviso { bottom: calc(16px + env(safe-area-inset-bottom)); }
.instalar-aviso img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.instalar-txt { flex: 1; min-width: 0; line-height: 1.3; }
.instalar-txt b { display: block; font-weight: 600; font-size: 14px; }
.instalar-txt span { font-size: 13px; color: var(--suave); }
.instalar-sim { flex: none; border: 0; border-radius: 999px; background: var(--texto); color: #fff; padding: 8px 14px; font-size: 14px; font-weight: 500; }
.instalar-nao { flex: none; border: 0; background: none; color: #a1a1aa; font-size: 15px; padding: 6px; }
@keyframes instalar-sobe { from { transform: translateY(20px); opacity: 0; } }

.instalar-fundo {
  position: fixed; inset: 0; z-index: 40; background: rgba(17,17,19,.35);
  display: flex; align-items: flex-end; justify-content: center;
}
.instalar-folha {
  width: 100%; max-width: 480px; background: #fff; border-radius: 24px 24px 0 0; text-align: center;
  padding: 24px 22px calc(22px + env(safe-area-inset-bottom)); animation: instalar-sobe .3s ease-out;
}
.instalar-icone { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 4px 14px rgba(17,17,19,.12); }
.instalar-folha h2 { margin: 12px 0 4px; font-weight: 600; font-size: 21px; letter-spacing: -.4px; }
.instalar-folha .sub { margin: 0 0 8px; }
.instalar-passos { list-style: none; padding: 0; margin: 16px 0 0; text-align: left; }
.instalar-passos li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--borda); font-size: 15px; }
.instalar-passos .num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card-2);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.instalar-passos svg {
  width: 20px; height: 20px; vertical-align: -4px; margin-left: 2px;
  stroke: var(--alma); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- lembretes (js/lembretes.js) ---------- */
.lembrete-card { position: relative; }
.lembrete-fechar { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: #a1a1aa; font-size: 15px; padding: 6px; }
.lem-op { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda); font-size: 15px; cursor: pointer; }
.lem-op:first-of-type { margin-top: 10px; }
.lem-op input { width: 20px; height: 20px; flex: none; accent-color: var(--texto); -webkit-appearance: auto; appearance: auto; padding: 0; }
.lem-op small { display: block; color: var(--suave); font-size: 13px; }

/* ---------- água ---------- */
.agua-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agua-botoes { display: flex; gap: 8px; flex: none; }
.agua-botoes button { border: 0; border-radius: 999px; font-weight: 500; }
.agua-mais { background: var(--alma); color: #fff; padding: 9px 14px; font-size: 15px; }
.agua-menos { background: var(--card-2); color: var(--texto); width: 38px; height: 38px; font-size: 18px; }
.agua-menos:disabled { opacity: .4; }
.agua-copos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 14px; }
.agua-copos span { height: 26px; border-radius: 4px 4px 8px 8px; border: 1.5px solid #cfe6f2; background: #fff; }
.agua-copos span.cheio { background: linear-gradient(180deg, #7cc7ea, var(--alma)); border-color: var(--alma); }

/* ---------- meus lembretes ---------- */
.meus-lem { list-style: none; padding: 0; margin: 10px 0 0; }
.meus-lem li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--borda); }
.meus-lem li.off { opacity: .45; }
.ml-hora { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; flex: none; }
.ml-txt { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.ml-liga, .ml-apaga { flex: none; border: 0; background: var(--card-2); border-radius: 999px; font-size: 13px; padding: 6px 10px; color: var(--texto); }
.ml-apaga { color: #a1a1aa; padding: 6px 9px; }
.ml-form { margin-top: 14px; }

/* ---------- Início: Três Anéis ---------- */
.hoje-topo { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.hoje-topo h1 { margin: 0; }
.hoje-data { font-size: 14px; color: var(--suave); }

.aneis { display: flex; flex-direction: column; align-items: center; padding: 14px 0 6px; }
.aneis-roda { position: relative; width: min(223px, 61vw); aspect-ratio: 1; }
.aneis-roda svg { width: 100%; height: 100%; display: block; }
.anel3 { transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1); }
.anel3.fechado { animation: anel-fecha .9s ease-out 1.05s 1; }
@keyframes anel-fecha { 50% { filter: drop-shadow(0 0 8px currentColor) brightness(1.08); } }
.aneis-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22%; }
.aneis-num { font-family: var(--fonte-num); font-size: 34px; font-weight: 300; letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.aneis-num.completo { font-family: var(--fonte); font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
.aneis-rot { font-size: 13px; color: var(--suave); }
.aneis-legenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; margin-top: 16px; }
.leg { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 14px; }
.leg b { font-size: 15px; font-weight: 600; }
.leg span { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.leg-corpo b { color: #b41d25; } .leg-alma b { color: #166f99; } .leg-espirito b { color: #8a6300; }

.proximo { background: var(--texto); color: #fff; border-radius: 26px; padding: 20px; margin: 18px 0 12px; display: flex; flex-direction: column; gap: 14px; }
.proximo-rot { font-size: 13px; color: #a1a1aa; }
.proximo-txt { margin: -10px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.4px; line-height: 1.25; }
.proximo-acoes { display: flex; align-items: center; gap: 10px; }
.proximo-btn { flex: 1; display: block; text-align: center; border: 0; background: #fff; color: var(--texto); border-radius: 999px; padding: 13px 16px; font-weight: 600; font-size: 16px; }
.proximo-link { color: #d4d4d8; font-size: 15px; padding: 12px 8px; }
.proximo-humores { display: flex; flex-wrap: wrap; gap: 8px; }
.proximo-humor { border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; padding: 9px 13px; font-size: 14px; }
.proximo.feito { background: #f0f7fb; color: var(--texto); }
.proximo.feito .proximo-rot { color: #166f99; font-weight: 600; }
.proximo.feito .proximo-btn { background: var(--texto); color: #fff; }

.mini-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.mini { border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mini-rot { font-size: 13px; font-weight: 600; }
.mini-agua { background: #eef7fc; } .mini-agua .mini-rot { color: #166f99; }
.mini-num { font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
.mini-num small { font-size: 14px; font-weight: 400; color: #4b5563; }
.mini-copos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.mini-copos span { height: 6px; border-radius: 3px; background: #c9e4f2; }
.mini-copos span.cheio { background: var(--alma); }
.mini-agua-botoes { display: flex; gap: 6px; margin-top: 2px; }
.mini-agua-botoes button { border: 0; border-radius: 999px; font-weight: 500; }
.mini-agua-botoes .agua-mais { flex: 1; background: var(--alma); color: #fff; padding: 8px 0; font-size: 14px; }
.mini-agua-botoes .agua-menos { width: 34px; background: #fff; color: var(--texto); font-size: 16px; }
.mini-agua-botoes .agua-menos:disabled { opacity: .4; }
.mini-palavra { background: #fbf6ea; } .mini-palavra .mini-rot, .mini-ref { color: #8a6300; }
.mini-verso { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mini-ref { font-size: 12px; margin-top: auto; }
#metas, #palavra { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: reduce) { .anel3 { transition: none; } .anel3.fechado { animation: none; } }

/* ---------- desafios ---------- */
.desafio-emoji { font-size: 26px; line-height: 1; flex: none; }
.desafio-emoji.grande { font-size: 44px; }
.desafio-cta, .desafio-item { display: flex; gap: 14px; align-items: center; }
.desafio-item > div { flex: 1; min-width: 0; }
.desafio-status { flex: none; font-size: 12px; color: var(--suave); white-space: nowrap; }
.desafios-todos { display: block; text-align: right; font-size: 14px; color: var(--suave); margin: -6px 0 16px; }
.desafios-hoje-topo { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 8px; }
.desafio-mini { display: block; border-left: 3px solid var(--cor); }
.desafio-mini-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.desafio-dia { color: var(--suave); font-size: 13px; white-space: nowrap; }
.desafio-mini-txt { font-size: 14px; color: var(--suave); margin-top: 6px; }
.desafio-mini.feito .desafio-mini-txt { color: var(--ok); }
.desafio-barra { height: 6px; background: var(--card-2); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.desafio-barra span { display: block; height: 100%; background: var(--cor); border-radius: 99px; transition: width .4s ease; }
.desafio-barra.grande { height: 8px; margin: 0 0 6px; }
.desafio-cabeca { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.desafio-cabeca h1 { margin: 0 0 4px; }
.desafio-progresso { margin-bottom: 14px; }
.desafio-tarefa { border-top: 3px solid var(--cor); }
.desafio-ok { color: var(--ok); font-weight: 600; margin: 8px 0 0; }
.desafio-dias { list-style: none; padding: 0; margin: 0 0 8px; }
.desafio-dias li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 15px; color: var(--suave); }
.desafio-dias li.ok { color: var(--texto); }
.desafio-dias li.atual { color: var(--texto); font-weight: 600; }
.dd-num { width: 26px; height: 26px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; font-size: 12px; flex: none; }
.desafio-dias li.ok .dd-num { background: var(--ok); color: #fff; }
.desafio-dias li.atual .dd-num { background: var(--texto); color: #fff; }
.nota-escala { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin: 0 0 16px; }
.nota-escala label { position: relative; }
.nota-escala input { position: absolute; opacity: 0; inset: 0; }
.nota-escala span { display: block; text-align: center; padding: 8px 0; border-radius: 10px; background: var(--card-2); font-size: 14px; }
.nota-escala input:checked + span { background: var(--texto); color: #fff; font-weight: 600; }
.nota-escala input:focus-visible + span { outline: 2px solid var(--alma); }
.desafio-final { text-align: center; border-top: 3px solid var(--cor); }
.notas { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 12px 0 4px; }
.notas div { display: flex; flex-direction: column; }
.notas small { color: var(--suave); font-size: 12px; }
.notas b { font-family: var(--fonte-num); font-size: 32px; font-weight: 500; }
.selos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; margin-bottom: 16px; }
.selo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.selo span { width: 64px; height: 64px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; font-size: 30px; box-shadow: inset 0 0 0 3px #f3c94b; }
.selo small { font-size: 12px; color: var(--suave); line-height: 1.3; }
.selo.grande { margin: 4px auto 0; }
.selo.grande span { width: 88px; height: 88px; font-size: 42px; }
.comunidade-num { font-family: var(--fonte-num); font-size: 34px; font-weight: 500; letter-spacing: -.5px; }
.desafio-tarefa .meta { margin: 0 0 12px; }
.desafio-tarefa .meta.ok .meta-txt { text-decoration: none; color: var(--texto); }

/* ---------- atalhos do Início ---------- */
.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 18px; }
.atalho { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.atalho svg { width: 52px; height: 52px; padding: 14px; border-radius: 18px; background: var(--card-2); fill: none; stroke: var(--texto); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.atalho:active svg { transform: scale(.94); }

/* ---------- diário de energia ---------- */
.energia-card b { display: block; margin: 2px 0 10px; font-size: 17px; }
.energia-linha { display: grid; grid-template-columns: 96px 1fr 22px; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
.energia-linha output { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.energia-linha input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--card-2); outline: none; }
.energia-linha input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--cor); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.energia-linha input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--cor); }
.energia-card .btn { margin-top: 12px; }
.grafico-energia { width: 100%; height: auto; margin-top: 8px; }
.legenda-energia { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--suave); margin-top: 6px; }
.legenda-energia i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.energia-hoje-num, .energia-comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.energia-hoje-num div, .energia-comp div { display: flex; flex-direction: column; }
.energia-hoje-num small, .energia-comp small { color: var(--suave); font-size: 12px; }
.energia-hoje-num b { font-family: var(--fonte-num); font-size: 34px; font-weight: 300; }
.energia-comp b { font-family: var(--fonte-num); font-size: 20px; font-weight: 400; }
.energia-comp b span { color: var(--suave); font-size: 14px; }
.energia-comp em { font-style: normal; font-size: 13px; color: var(--suave); }
.energia-comp em.sobe { color: var(--ok); }
.energia-comp em.desce { color: var(--corpo); }

/* ---------- apoio de humor ---------- */
.apoio { display: flex; gap: 14px; align-items: center; background: #eef7fb; border-color: transparent; }
.apoio-icone svg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: #fff; fill: none; stroke: var(--alma); stroke-width: 1.8; stroke-linecap: round; }

/* ---------- respiração ---------- */
.respiro-palco { position: relative; height: 300px; display: grid; place-items: center; margin: 8px 0; }
.respiro-bola { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8fd0ec, var(--alma)); opacity: .85; transform: scale(1); transition: transform 4s ease-in-out; }
.respiro-bola.cresce { transform: scale(2.1); transition-duration: 4s; }
.respiro-bola.diminui { transform: scale(1); transition-duration: 6s; }
.respiro-bola.fim { transform: scale(1.4); background: radial-gradient(circle at 35% 35%, #86efac, var(--ok)); transition-duration: .8s; }
.respiro-txt { position: absolute; font-size: 20px; font-weight: 500; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.18); }
.respiro-tempo { text-align: center; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 22px; color: var(--suave); min-height: 32px; margin-bottom: 12px; }
.duas-op { display: flex; gap: 10px; margin-bottom: 12px; }
.duas-op .btn { flex: 1; }

/* ---------- modo foco ---------- */
.foco-roda { position: relative; width: 240px; margin: 12px auto 20px; }
.foco-roda svg { width: 100%; height: auto; display: block; }
.foco-fundo { fill: none; stroke: var(--card-2); stroke-width: 14; }
.foco-anel { fill: none; stroke: var(--texto); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.foco-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.foco-centro b { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 52px; font-weight: 300; letter-spacing: -1.5px; }
.foco-centro span { color: var(--suave); font-size: 14px; }

/* ---------- Palavra do dia: ouvir ---------- */
.palavra-topo { display: flex; justify-content: space-between; align-items: center; }
.ouvir { background: #fff; border: 0; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---------- recompra e recompensa ---------- */
.compra { border: 1.5px solid var(--texto); }
.compra-topo { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.compra-num { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--texto); color: #fff; display: grid; place-items: center; font-family: var(--fonte-num); font-size: 26px; font-weight: 500; }
.recompensa b { display: block; margin: 2px 0 6px; }
.cupom { width: 100%; border: 1.5px dashed var(--espirito); background: #fffaf0; border-radius: 14px; padding: 14px; font-family: var(--fonte-num); font-size: 24px; font-weight: 600; letter-spacing: 2px; color: var(--texto); }
.cupom small { display: block; font-family: var(--fonte); font-size: 12px; letter-spacing: 0; color: var(--suave); font-weight: 500; }
.perfil-mes { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.perfil-mes > span { color: var(--suave); font-size: 20px; }

/* ---------- relatório do mês ---------- */
.relatorio-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.relatorio-item { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.relatorio-item small { color: var(--suave); font-size: 13px; line-height: 1.3; }
.relatorio-item b { font-family: var(--fonte-num); font-size: 30px; font-weight: 300; letter-spacing: -.8px; }

/* ---------- comunidade ---------- */
.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 15px; }
.ranking li:last-child { border-bottom: 0; }
.ranking li.eu { font-weight: 600; }
.rk-pos { font-family: var(--fonte-num); color: var(--suave); text-align: center; }
.rk-dias { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.rk-seq { font-size: 13px; color: var(--suave); }
#form-vitoria textarea { width: 100%; border: 1px solid var(--borda); border-radius: 14px; padding: 12px; font: inherit; resize: vertical; }
.minhas-vitorias { list-style: none; padding: 0; margin: 12px 0 0; }
.minhas-vitorias li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.minhas-vitorias em { flex: none; font-style: normal; font-size: 12px; color: var(--suave); }
.minhas-vitorias em.aprovada { color: var(--ok); }
.vitoria p { margin: 0 0 6px; font-size: 16px; }

/* Clube PowerMind */
.compra-clube { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); color: var(--texto); text-decoration: none; font-size: 14px; }
.compra-clube span:last-child { color: var(--suave); }
.clube-selo { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--espirito); border: 1.2px solid var(--espirito); border-radius: 99px; padding: 4px 10px; margin-bottom: 10px; }
.clube-barra { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; margin: 10px 0 8px; }
.clube-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--espirito), #e0b23a); }
.clube-membro { display: block; color: var(--texto); text-decoration: none; border: 1.5px solid var(--espirito); }
.clube-membro b { font-size: 20px; letter-spacing: -.3px; }
.clube-hero { text-align: center; padding: 26px 20px 24px; border-radius: 24px; background: linear-gradient(180deg, #fffaf0, #ffffff); border: 1px solid #f1e3c4; margin-bottom: 14px; }
.clube-hero h1 { margin: 0 0 12px; }
.clube-hero p { color: var(--suave); margin: 10px 0 0; line-height: 1.5; }
.clube-hero p b { color: var(--texto); }
.clube-preco { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.clube-preco span { font-family: var(--fonte-num); font-size: 52px; font-weight: 600; letter-spacing: -1.5px; }
.clube-preco small { color: var(--suave); font-size: 15px; }
.clube-economia { display: inline-block; margin-top: 14px; background: var(--texto); color: #fff; border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 14px; }
.clube-lista { display: grid; gap: 14px; }
.clube-lista div { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--espirito); }
.clube-lista span { color: var(--suave); font-size: 14px; line-height: 1.45; }
.clube-meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }
.clube-meses span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px; background: var(--card-2); color: var(--suave); font-family: var(--fonte-num); font-weight: 600; font-size: 18px; }
.clube-meses .feito { background: #fdf3dc; color: var(--espirito); }
.clube-meses .agora { background: var(--espirito); color: #fff; }
.clube-membro .clube-selo { display: table; }

/* Prévia da arte do mês para os stories */
.story-previa { margin: 0 auto 14px; max-width: 300px; border-radius: 26px; overflow: hidden; box-shadow: 0 18px 50px rgba(17,17,19,.14); border: 1px solid var(--borda); background: #fff; }
.story-previa canvas { display: block; width: 100%; height: auto; }

/* Logo RM12 no topo (fundo transparente) */
.topo { justify-content: flex-end; min-height: 56px; }
.marca-rm12 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; opacity: .88; }
.marca-rm12 img { height: 14.25px; width: auto; display: block; }

/* Equilíbrio: três corpos que enchem (substituem o triângulo) */
.corpos { display: block; width: 100%; max-width: 300px; margin: 0 auto; overflow: visible; }
.corpo-vazio { fill: #ececef; }
.corpo-nome { font-size: 13px; font-weight: 600; font-family: var(--fonte); fill: var(--texto); }
.corpo-nota { font-size: 14px; font-weight: 600; font-family: var(--fonte-num); }
.eq-mini .corpos { width: 104px; flex: none; margin: 0; }

/* Ícones dos pilares (corpo, cérebro, espírito) */
.pilar-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: color-mix(in srgb, var(--cor, var(--texto)) 11%, #fff); color: var(--cor, var(--texto)); }
.pilar-ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pilar-btn .pilar-ico { margin-bottom: 4px; }
.pilar-titulo { display: flex; align-items: center; gap: 12px; }
.pilar-titulo .pilar-ico { width: 42px; height: 42px; border-radius: 13px; }

/* Ícones desenhados (substituem emojis) */
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.sequencia { display: inline-flex; align-items: center; gap: 4px; color: var(--texto); }
.sequencia .ic { color: #e3262f; width: 16px; height: 16px; }
.rotulo-ic { display: inline-flex; align-items: center; gap: 6px; }
.rotulo-ic .ic { width: 16px; height: 16px; }
.chip .ic, .proximo-humor .ic { width: 18px; height: 18px; margin-right: 6px; }
.chip, .proximo-humor { display: inline-flex; align-items: center; }
.desafio-emoji { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--cor, var(--espirito)) 12%, #fff); color: var(--cor, var(--espirito)); }
.desafio-emoji .ic { width: 24px; height: 24px; }
.desafio-emoji.grande { width: 72px; height: 72px; border-radius: 22px; }
.desafio-emoji.grande .ic { width: 38px; height: 38px; }
.selo span { color: #b8860b; }
.selo span .ic { width: 30px; height: 30px; }
.selo.grande span .ic { width: 42px; height: 42px; }
.rk-seq { display: inline-flex; align-items: center; gap: 3px; }
.rk-seq .ic { color: #e3262f; width: 14px; height: 14px; }
.humor span .ic { width: 20px; height: 20px; color: var(--alma); }

/* Início: "Comece um desafio" logo abaixo dos atalhos (fundo branco com contorno) */
.comece-desafio { background: #fff; color: var(--texto); border: 1.5px solid var(--texto); }
.comece-desafio { padding: 14px 16px; }
.comece-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.comece-topo b { font-size: 18px; letter-spacing: -.3px; }
.comece-topo a { font-size: 14px; font-weight: 600; color: var(--texto); text-decoration: none; white-space: nowrap; }
.comece-desafio > p { color: var(--suave); font-size: 13px; line-height: 1.4; margin: 2px 0 10px; }
.comece-sugestao { display: flex; align-items: center; gap: 10px; background: var(--card-2); border-radius: 14px; padding: 8px 10px; color: var(--texto); text-decoration: none; }
.comece-sugestao .desafio-emoji { width: 36px; height: 36px; border-radius: 11px; }
.comece-sugestao .desafio-emoji .ic { width: 20px; height: 20px; }
.comece-sugestao span:nth-child(2) { flex: 1; font-weight: 600; font-size: 15px; }
.comece-sugestao small { display: block; color: var(--suave); font-weight: 500; font-size: 12px; }
.comece-sugestao > span:last-child { color: var(--suave); }

/* Incentivo no card de água */
.mini-dica { display: block; font-size: 12.5px; line-height: 1.35; color: #1d6f96; margin: 8px 0 10px; font-weight: 500; }