/* ==========================================================
   VERSO — Design Tokens (paleta clara · sálvia + creme + lilás)
   Tipografia: Playfair Display + Inter Light.
   Para mudar branding, edite só as variáveis em :root.
   ========================================================== */

:root {
  /* FUNDOS */
  --bg:           #F4EFE6;   /* areia principal — um pouco mais quente */
  --bg-soft:      #FAF7F2;   /* creme mais claro */
  --bg-card:      #FFFFFF;   /* cards brancos */
  --bg-elev:      #FBF8F3;   /* elevação leve */
  --bg-dark:      #263628;   /* sálvia escuro — modo dark / hero accent */

  /* CORES DE MARCA */
  --sage:         #263628;   /* verde sálvia escuro — texto + base */
  --sage-mid:     #4A5947;   /* sálvia médio */
  --sage-soft:    #B5BFA3;   /* sálvia muito claro */
  --sage-tint:    #E5EBDC;   /* tom suave de fundo verde */

  --mauve:        #B5859D;   /* lilás-rosé — emoção */
  --mauve-deep:   #8B5A6B;   /* mauve escuro — ênfase */
  --mauve-soft:   #EFDDE5;   /* lilás muito claro */

  --terracotta:   #C46A47;   /* alertas/calorosos */
  --oat:          #C8A965;   /* dourado-areia */

  /* TEXTO */
  --ink:          #263628;
  --ink-mid:      #5A6358;
  --ink-mute:     #8B9082;
  --ink-soft:     #B5B8AE;

  /* LINHAS */
  --line:         #DCD3C3;
  --line-soft:    #E9E2D4;
  --line-strong:  #B8AE9D;

  /* SCALE */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 100px;

  --shadow-soft: 0 2px 12px rgba(38,54,40,.06);
  --shadow-mid:  0 8px 28px rgba(38,54,40,.10);
  --shadow-card: 0 12px 40px -8px rgba(38,54,40,.12);

  /* TIPOGRAFIA */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* APP MOBILE */
  --app-max-width: 480px;
  --bottom-nav-h: 68px;
}

/* ==========================================================
   RESET
   ========================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; border: none; background: transparent; }
input, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.serif { font-family: var(--font-serif); font-weight: 400; }

/* ==========================================================
   APP CONTAINER (mobile-first, max 480px centered)
   ========================================================== */
.app {
  max-width: var(--app-max-width);
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background: var(--bg);
}

/* (Phone frame movido pro final do arquivo pra não ser sobrescrito) */

/* ==========================================================
   APP TOP BAR
   ========================================================== */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
}
.logo {
  display: inline-flex;
  align-items: center;
}
.logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.bar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  color: var(--ink-mid);
  font-size: 11px;
  letter-spacing: .05em;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.bar-pill:hover { color: var(--mauve-deep); border-color: var(--mauve); }
.bar-pill svg { width: 12px; height: 12px; }

/* ==========================================================
   BOTTOM NAV (4 abas fixas)
   ========================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--bottom-nav-h);
  background: var(--bg-card);
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0 12px;
  z-index: 50;
  box-shadow: 0 -2px 16px rgba(38,54,40,.04);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  color: var(--ink-mute);
  font-size: 10px;
  letter-spacing: .05em;
  font-weight: 500;
  transition: color .2s;
}
.nav-item.active { color: var(--sage); }
.nav-item svg { width: 22px; height: 22px; stroke-width: 1.5; }
.nav-item.active svg { stroke-width: 2; }

/* ==========================================================
   PAGE (cada aba é uma .page)
   ========================================================== */
.page {
  display: none;
  padding: 0 20px 100px;
  animation: page-fade .3s ease both;
}
.page.active { display: block; }

@keyframes page-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   HOME — MINIMALISTA
   ========================================================== */
.home-greet {
  margin: 12px 0 28px;
}
.home-greet h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--sage);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.home-greet h1 em {
  font-style: italic;
  color: var(--mauve-deep);
}

.home-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.home-card-label {
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.home-card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--sage);
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.home-card-text {
  color: var(--ink-mid);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

/* Índice card especial */
.home-index {
  background: var(--sage);
  color: #FFF;
  border-radius: var(--r-lg);
  padding: 24px 22px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.home-index::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(181,133,157,.25) 0%, transparent 70%);
  pointer-events: none;
}
.home-index .ring { width: 70px; height: 70px; flex-shrink: 0; position: relative; }
.home-index .ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.home-index .ring .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 500;
}
.home-index .ring .num small { font-size: 9px; opacity: .7; }
.home-index .label {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 4px;
}
.home-index .title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
}
.home-index .sub { font-size: 12px; opacity: .75; margin-top: 4px; }

/* Botão diário noturno */
.night-cta {
  background: var(--mauve-soft);
  border: 1px solid var(--mauve);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  width: 100%;
  text-align: left;
  transition: all .2s;
}
.night-cta:hover { background: #E5C9D5; }
.night-cta-content {
  flex: 1;
}
.night-cta-label {
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}
.night-cta-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--sage);
  font-weight: 500;
  letter-spacing: -.01em;
}
.night-cta-arrow {
  color: var(--mauve-deep);
  font-size: 22px;
  flex-shrink: 0;
}

/* ==========================================================
   FLOW (Daily / Night) — full-screen 1 ação por tela
   ========================================================== */
.flow {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.flow.active { display: flex; }

.flow-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  flex-shrink: 0;
}
.flow-back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mid);
  transition: background .2s;
}
.flow-back:hover { background: var(--bg-card); }
.flow-back svg { width: 18px; height: 18px; }
.flow-back:disabled { opacity: 0; pointer-events: none; }

.flow-progress {
  display: flex; gap: 6px;
  flex: 1;
  margin: 0 20px;
}
.flow-dot {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 100px;
  transition: background .3s;
}
.flow-dot.done { background: var(--sage); }
.flow-dot.active { background: var(--mauve); }

.flow-skip {
  font-size: 12px;
  color: var(--ink-mute);
  padding: 8px 4px;
  letter-spacing: .04em;
}
.flow-skip:hover { color: var(--ink-mid); }

.flow-step {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 20px 24px 40px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  animation: step-fade .35s ease both;
}
.flow-step.active { display: flex; }

@keyframes step-fade {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.step-eyebrow {
  color: var(--mauve-deep);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}

.step-question {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--sage);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.step-question em { font-style: italic; color: var(--mauve-deep); }

.step-help {
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 32px;
}

/* ==========================================================
   STEP CHOICES (botões grandes, 1 toca = avança)
   ========================================================== */
.choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.choice {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  color: var(--sage);
  font-weight: 400;
  transition: all .2s;
  width: 100%;
}
.choice:hover { border-color: var(--mauve); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.choice:active { transform: scale(.98); }
.choice .ico {
  font-size: 22px;
  width: 36px; height: 36px;
  background: var(--bg-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.choice:hover .ico { background: var(--mauve-soft); }
.choice.selected {
  background: var(--mauve-soft);
  border-color: var(--mauve);
  color: var(--sage);
}
.choice.selected .ico { background: var(--bg-card); }

/* ==========================================================
   WRITE TOGGLE (opção "escrever em vez disso" nas escolhas)
   ========================================================== */
.write-toggle {
  margin: 18px auto 0;
  background: transparent;
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 400;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: all .2s;
}
.write-toggle:hover {
  color: var(--mauve-deep);
  text-decoration-color: var(--mauve);
}

/* Versão DESTACADA — pra hora de escrever a missão própria */
.write-toggle-strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 18px 20px;
  width: 100%;
  background: var(--bg-card);
  border: 1.5px dashed var(--mauve);
  border-radius: var(--r-md);
  color: var(--mauve-deep);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .25s;
}
.write-toggle-strong:hover {
  background: var(--mauve-soft);
  border-style: solid;
  text-decoration: none;
  transform: translateY(-1px);
}
.write-toggle-strong svg { width: 18px; height: 18px; flex-shrink: 0; }
.write-toggle-strong strong {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.01em;
}
.write-toggle-strong .write-toggle-sub {
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-left: 6px;
  font-style: normal;
}
.write-toggle-strong .toggle-show {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.flow-step.extra-open .write-toggle-strong {
  background: var(--sage-tint);
  border-style: solid;
  border-color: var(--sage-soft);
  color: var(--sage);
}
.flow-step.extra-open .write-toggle-strong .toggle-back {
  font-size: 13px;
  color: var(--sage);
  text-decoration: none;
}
.write-mode {
  display: none;
  flex-direction: column;
  flex: 1;
  animation: step-fade .3s ease both;
}
.flow-step.writing .choices { display: none; }
.flow-step.writing .write-mode { display: flex; }
.flow-step [data-show-when-writing] { display: none; }
.flow-step.writing [data-show-when-writing] { display: block; }

/* Pattern: ícones FIRST + textarea opcional (não substitui, complementa) */
.extra-write {
  display: none;
  flex-direction: column;
  margin-top: 12px;
  animation: step-fade .25s ease both;
}
.flow-step.extra-open .extra-write { display: flex; }

/* Icons grid 4 colunas em flow */
.flow-step .icons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
/* Estilos GLOBAIS pro icon-btn — funciona em flow-step E no diário */
.icon-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 86px;
  color: var(--ink-mid);
  position: relative;
  cursor: pointer;
  transition: all .2s;
}
.icon-btn:hover {
  border-color: var(--mauve);
  background: var(--bg-elev);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(38,54,40,.06);
}
.icon-btn:active { transform: scale(.97); }
.icon-btn .emoji { font-size: 26px; transition: transform .2s; }
.icon-btn .label {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: var(--ink-mid);
}
/* Indicador "+" → "✓" pra deixar claro que é interativo */
.icon-btn::after {
  content: '+';
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  transition: all .2s;
  line-height: 1;
}
.icon-btn:hover::after {
  border-color: var(--mauve);
  color: var(--mauve-deep);
}
.icon-btn.active {
  background: var(--mauve-soft);
  border-color: var(--mauve);
  color: var(--sage);
}
.icon-btn.active .emoji { transform: scale(1.1); }
.icon-btn.active .label { color: var(--sage); }
.icon-btn.active::after {
  content: '✓';
  background: var(--mauve);
  color: white;
  border-color: var(--mauve);
}
.flow-step .write-toggle .toggle-back { display: none; }
.flow-step.writing .write-toggle .toggle-write { display: none; }
.flow-step.writing .write-toggle .toggle-back { display: inline; }

/* ==========================================================
   STEP INPUT (onboarding: nome / números)
   ========================================================== */
.step-input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
.step-input:focus { border-color: var(--mauve); }
.step-input::placeholder {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 18px;
}
.step-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.step-input-unit {
  position: absolute;
  right: 22px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink-mute);
  pointer-events: none;
  font-weight: 400;
}
.step-input.with-unit { padding-right: 70px; }

.step-skip {
  margin: 16px auto 0;
  background: transparent;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 400;
  padding: 8px 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
  display: block;
}
.step-skip:hover { color: var(--ink-mid); text-decoration-color: var(--ink-mid); }

/* Welcome / closing onboarding (poético) */
.onboarding-welcome {
  text-align: center;
  padding: 20px 20px 20px;
}
.onboarding-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  color: var(--mauve-deep);
  line-height: 1.35;
  letter-spacing: -.015em;
  max-width: 20ch;
  margin: 0 auto 40px;
}
.onboarding-welcome h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--sage);
  letter-spacing: 0;
  margin-bottom: 20px;
  line-height: 1.2;
  text-decoration: none;
}
.onboarding-welcome p {
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 32ch;
  margin: 0 auto 14px;
}
.welcome-final-greeting {
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  font-style: italic;
  color: var(--sage) !important;
  margin-top: 28px !important;
  letter-spacing: -.01em;
}

/* ==========================================================
   STEP TEXT INPUT (desabafo)
   ========================================================== */
.step-textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  resize: none;
  line-height: 1.6;
  min-height: 200px;
  outline: none;
  transition: border-color .2s;
}
.step-textarea:focus { border-color: var(--mauve); }
.step-textarea::placeholder { color: var(--ink-soft); font-style: italic; }

.step-textarea-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  color: var(--ink-mute);
  font-size: 11px;
}
.step-audio-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 500;
  transition: all .2s;
}
.step-audio-btn:hover { border-color: var(--mauve); color: var(--mauve-deep); }
.step-audio-btn svg { width: 14px; height: 14px; }
.step-audio-btn.recording {
  background: #C44747;
  color: white;
  border-color: #C44747;
  animation: pulse-rec 1.4s infinite;
}
.step-audio-btn.recording:hover { color: white; }
.step-audio-btn.recorded {
  background: var(--sage-tint);
  color: var(--sage);
  border-color: var(--sage-soft);
}
.step-audio-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
@keyframes pulse-rec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,71,71,.5); }
  50% { box-shadow: 0 0 0 10px rgba(196,71,71,0); }
}
.audio-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  color: var(--ink-mid);
  font-size: 11px;
  font-weight: 500;
}
.audio-timer-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C44747;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.audio-status {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  animation: fade-in .3s ease both;
}
.audio-status[data-kind="info"] {
  background: var(--mauve-soft);
  color: var(--mauve-deep);
}
.audio-status[data-kind="success"] {
  background: var(--sage-tint);
  color: var(--sage);
}
.audio-status[data-kind="error"] {
  background: rgba(196,71,71,.12);
  color: #C44747;
}

/* ==========================================================
   AUTH SCREEN — login / signup
   ========================================================== */
.auth-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.auth-screen.open { display: flex; }

.auth-glow {
  position: absolute;
  top: 20%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(181,133,157,.18) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}

.auth-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 1;
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.auth-logo-img {
  height: 110px;
  width: auto;
  object-fit: contain;
  filter: contrast(1.15) brightness(0.95);
}

.auth-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 4px;
  font-style: italic;
}
.auth-sub {
  text-align: center;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 300;
  margin-bottom: 24px;
  letter-spacing: .02em;
}

.auth-google-btn {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
  cursor: pointer;
}
.auth-google-btn:hover { background: var(--bg-soft); border-color: var(--line-strong); }
.auth-google-btn:disabled { opacity: .5; cursor: not-allowed; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-form input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.auth-form input:focus { border-color: var(--mauve); background: var(--bg-card); }
.auth-form input::placeholder { color: var(--ink-soft); }

.auth-password-wrap {
  position: relative;
}
.auth-password-wrap input { padding-right: 50px; }
.auth-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.auth-password-toggle:hover { color: var(--mauve-deep); background: var(--bg-soft); }
.auth-password-toggle svg { width: 18px; height: 18px; }
.auth-password-toggle .ico-hide { display: none; }
.auth-password-toggle.shown .ico-show { display: none; }
.auth-password-toggle.shown .ico-hide { display: block; }

.auth-submit {
  background: var(--sage);
  color: white;
  border: none;
  border-radius: var(--r-pill);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all .2s;
  margin-top: 6px;
}
.auth-submit:hover { background: #1A2618; transform: translateY(-1px); }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.auth-submit.loading { opacity: .6; cursor: wait; }

.auth-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: rgba(196,71,71,.1);
  border: 1px solid rgba(196,71,71,.3);
  border-radius: var(--r-sm);
  color: #C44747;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.auth-toggle {
  text-align: center;
  margin-top: 18px;
  color: var(--ink-mid);
  font-size: 13px;
}
.auth-toggle button {
  background: transparent;
  border: none;
  color: var(--mauve-deep);
  font-size: 13px;
  font-weight: 500;
  margin-left: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-toggle button:hover { color: var(--sage); }

.auth-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-mid);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
}
.auth-privacy svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--sage-mid); }
.auth-privacy strong { color: var(--sage); font-weight: 600; }

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mid);
  cursor: pointer;
}
.auth-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--mauve-deep);
  cursor: pointer;
}
.auth-link {
  background: transparent;
  border: none;
  color: var(--mauve-deep);
  font-size: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}
.auth-link:hover { color: var(--sage); }

/* ==========================================================
   POLICY MODAL — Termos / Privacidade
   ========================================================== */
.modal.modal-policy {
  max-width: 580px !important;
  max-height: 86vh !important;
  padding: 28px 28px 24px !important;
  overflow-y: auto;
}
.policy-content { color: var(--ink); }
.policy-content h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
.policy-content h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--sage);
  margin-top: 24px;
  margin-bottom: 8px;
}
.policy-content p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 300;
}
.policy-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 12px;
}
.policy-content ul li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  padding-left: 14px;
  position: relative;
  margin-bottom: 4px;
  font-weight: 300;
}
.policy-content ul li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--mauve-deep);
  font-weight: 700;
}
.policy-content strong { color: var(--sage); font-weight: 600; }
.policy-content a {
  color: var(--mauve-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy-content em {
  font-style: italic;
  color: var(--mauve-deep);
}
.policy-meta {
  color: var(--ink-mute) !important;
  font-size: 11px !important;
  letter-spacing: .05em;
  margin-bottom: 18px !important;
}
.policy-warning {
  background: var(--mauve-soft);
  border-left: 3px solid var(--mauve);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 14px 0 18px;
}
.policy-warning strong {
  display: block;
  color: var(--mauve-deep);
  font-size: 13px;
  margin-bottom: 6px;
}
.policy-warning p,
.policy-warning ul li {
  font-size: 12px !important;
  line-height: 1.5;
  margin-bottom: 6px;
}
.policy-final {
  text-align: center;
  font-style: italic;
  color: var(--mauve-deep);
  font-size: 14px !important;
  font-family: var(--font-serif);
  margin-top: 24px !important;
}

/* ==========================================================
   PRIVACY BANNER — reforço visível "Nem nossa equipe vê"
   ========================================================== */
.privacy-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--sage-tint);
  border: 1px solid var(--sage-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 14px 0;
  color: var(--sage);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
}
.privacy-banner svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--sage-mid);
}
.privacy-banner strong {
  color: var(--sage);
  font-weight: 600;
}

/* ==========================================================
   STEP REFRAMING (motor invisível)
   ========================================================== */
.thought-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  margin-bottom: 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--sage);
  line-height: 1.5;
  text-align: center;
}
.reframe-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.reframe-opt {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--sage);
  transition: all .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.reframe-opt .ico {
  font-size: 20px;
  color: var(--mauve-deep);
}
.reframe-opt .reframe-sub {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 400;
  font-style: italic;
  margin-top: 2px;
}
.reframe-opt:hover { border-color: var(--mauve); }
.reframe-opt:hover .reframe-sub { color: var(--ink-mid); }
.reframe-opt.selected {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.reframe-opt.selected .reframe-sub { color: var(--mauve-deep); }

.reframe-response {
  margin-top: 24px;
  padding: 22px 20px;
  background: var(--sage-tint);
  border-radius: var(--r-md);
  animation: step-fade .4s ease both;
}
.reframe-response-label {
  color: var(--sage-mid);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.reframe-response-text {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--sage);
  line-height: 1.5;
}

/* Padrão de pensamento que aparece */
.reframe-distortion {
  background: var(--sage-tint);
  border-left: 3px solid var(--sage-mid);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 16px;
  margin-top: 18px;
  animation: fade-in .4s ease both;
}
.reframe-distortion .distortion-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--sage-mid);
  font-weight: 600;
  background: rgba(38,54,40,.06);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}
.reframe-distortion .distortion-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--sage);
  font-weight: 600;
  margin-bottom: 4px;
}
.reframe-distortion .distortion-help {
  font-size: 13px;
  color: var(--ink-mid);
  font-weight: 300;
  line-height: 1.5;
  font-style: italic;
}

/* Pergunta de evidência — olhar real */
.reframe-evidence {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  animation: fade-in .4s ease both;
}
.reframe-evidence .evidence-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 600;
  background: var(--mauve-soft);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}

/* ==========================================================
   STEP MISSION (lista de hábitos)
   ========================================================== */
.mission-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mission-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--sage);
  text-align: left;
  width: 100%;
  transition: all .2s;
}
.mission-item:hover { border-color: var(--sage-soft); }
.mission-item.selected {
  background: var(--sage-tint);
  border-color: var(--sage-mid);
}
.mission-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.mission-item.selected .mission-check {
  background: var(--sage);
  border-color: var(--sage);
  color: #FFF;
}
.mission-item.selected .mission-check::after { content: '✓'; font-size: 12px; }
.mission-ico { font-size: 18px; width: 32px; }

/* ==========================================================
   STEP REWARD (tela de progresso)
   ========================================================== */
.reward-tile {
  background: var(--sage);
  color: #FFF;
  border-radius: var(--r-xl);
  padding: 32px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reward-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% -10%, rgba(181,133,157,.3) 0%, transparent 60%);
  pointer-events: none;
}
.reward-tile-label {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 16px;
}
.reward-tile-num {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.reward-tile-text {
  font-size: 14px;
  opacity: .85;
  margin-bottom: 24px;
  line-height: 1.5;
}
.reward-tile-bar {
  height: 6px;
  background: rgba(255,255,255,.15);
  border-radius: 100px;
  margin-bottom: 24px;
  overflow: hidden;
}
.reward-tile-bar-fill {
  height: 100%;
  background: var(--mauve);
  border-radius: 100px;
  transition: width .8s;
}
.reward-tile-foot {
  display: flex; justify-content: space-between;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .7;
}

/* ==========================================================
   STEP ENCERRAMENTO (poética)
   ========================================================== */
.closing {
  text-align: center;
  padding: 40px 20px;
}
.closing-text {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--sage);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 32px;
  letter-spacing: -.01em;
}
.closing-text em { color: var(--mauve-deep); }

/* Carta especial do Dia 21 — antes da Fase 2 */
.closing.letter {
  text-align: left;
  padding: 32px 24px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--mauve);
  box-shadow: var(--shadow-soft);
  max-width: 480px;
  margin: 0 auto;
}
.closing.letter .closing-letter-label {
  display: block;
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.closing.letter .closing-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.65;
  color: var(--sage);
  text-align: left;
  font-weight: 400;
}
.closing.letter .closing-text em {
  font-style: italic;
  color: var(--mauve-deep);
  font-weight: 500;
}
.closing.letter .closing-letter-sign {
  display: block;
  margin-top: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--mauve-deep);
  font-size: 14px;
  text-align: right;
}

/* ==========================================================
   FLOW BOTTOM CTA (botão fixo)
   ========================================================== */
.flow-cta-wrap {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 30%);
  padding: 20px 24px 28px;
  margin-top: auto;
}
.flow-cta {
  width: 100%;
  background: var(--sage);
  color: #FFF;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 18px;
  border-radius: var(--r-pill);
  transition: all .2s;
  box-shadow: var(--shadow-mid);
}
.flow-cta:hover { background: #1A2618; }
.flow-cta:disabled {
  background: var(--line);
  color: var(--ink-mute);
  cursor: not-allowed;
  box-shadow: none;
}

/* ==========================================================
   MODAL — base reutilizável
   ========================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(38,54,40,.5);
  backdrop-filter: blur(6px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  z-index: 101;
  background: var(--bg-soft);
  border-radius: var(--r-xl);
  padding: 36px 28px 28px;
  width: calc(100% - 40px);
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(38,54,40,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.modal.open {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: all;
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mid);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.modal-close:hover { background: var(--ink-mid); color: var(--bg); border-color: var(--ink-mid); }

/* MANIFESTO MODAL */
.manifesto-modal-head { text-align: center; margin-bottom: 24px; }
.manifesto-modal-head .label {
  display: inline-block;
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.manifesto-modal-head h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.01em;
}
.manifesto-modal-body {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--sage);
  font-weight: 400;
}
.manifesto-modal-body p { margin-bottom: 1.1em; }
.manifesto-modal-body p.muted { color: var(--ink-mid); font-weight: 400; }
.manifesto-modal-body em { font-style: italic; color: var(--mauve-deep); font-weight: 500; }
.manifesto-modal-divider {
  width: 40px; height: 1px;
  background: var(--mauve);
  margin: 22px auto;
  opacity: .8;
}
.manifesto-modal-final {
  text-align: center;
  font-style: italic;
  color: var(--mauve-deep);
  font-size: 18px;
  margin-top: 8px;
  font-weight: 500;
  font-family: var(--font-serif);
}
.manifesto-modal-foot {
  margin-top: 28px;
  text-align: center;
}
.manifesto-modal-foot button {
  background: var(--sage);
  color: #FFF;
  border: none;
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .2s;
}
.manifesto-modal-foot button:hover { background: #1A2618; }

/* Manifesto wide (com 2 fases) */
.modal.modal-wide { max-width: 540px; }

.manifesto-phases {
  margin-top: 28px;
  padding: 24px 4px 4px;
  border-top: 1px solid var(--line);
}
.manifesto-phases-label {
  text-align: center;
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.manifesto-phases-title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.01em;
  margin-bottom: 22px;
}
.manifesto-phases-title em { font-style: italic; color: var(--mauve-deep); }

.manifesto-phase {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 22px 20px;
  margin-bottom: 12px;
  position: relative;
  border-left: 3px solid var(--mauve);
}
.manifesto-phase.phase-2 {
  background: var(--sage);
  color: #FFF;
  border-left-color: var(--mauve);
}
.manifesto-phase-num {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: var(--mauve);
  line-height: 1;
}
.manifesto-phase-days {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 6px;
}
.manifesto-phase.phase-2 .manifesto-phase-days { color: var(--mauve); }
.manifesto-phase h4 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.manifesto-phase.phase-2 h4 { color: #FFF; }
.manifesto-phase p {
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 300;
  margin-bottom: 12px;
}
.manifesto-phase.phase-2 p { color: rgba(255,255,255,.78); }
.manifesto-phase-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.manifesto-phase-list li {
  font-size: 12px;
  color: var(--ink-mid);
  padding: 4px 0 4px 16px;
  position: relative;
  font-weight: 400;
  line-height: 1.5;
}
.manifesto-phase-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--mauve-deep);
  font-weight: 700;
}
.manifesto-phase.phase-2 .manifesto-phase-list li { color: rgba(255,255,255,.78); }
.manifesto-phase.phase-2 .manifesto-phase-list li::before { color: var(--mauve); }

.manifesto-phases-note {
  text-align: center;
  margin-top: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--mauve-deep);
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================
   MORNING RITUAL — afirmação personalizada por dor principal
   ========================================================== */
.weekly-reflection {
  background: linear-gradient(160deg, var(--sage-tint) 0%, var(--mauve-soft) 100%);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  margin-bottom: 14px;
  border-left: 3px solid var(--mauve);
}
.weekly-reflection-head { margin-bottom: 14px; }
.weekly-reflection-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 600;
  margin-bottom: 8px;
}
.weekly-reflection-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--sage);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.weekly-reflection-title em { font-style: italic; color: var(--mauve-deep); }
.weekly-reflection-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.weekly-reflection-list li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--sage);
  line-height: 1.5;
  padding: 6px 0 6px 18px;
  position: relative;
}
.weekly-reflection-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--mauve-deep);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
.weekly-reflection-list li strong {
  color: var(--mauve-deep);
  font-style: normal;
  font-weight: 600;
}
.weekly-reflection-final {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sage);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(38,54,40,.08);
}

.morning-ritual {
  background: linear-gradient(135deg, var(--sage) 0%, var(--bg-dark) 100%);
  color: #FFF;
  border-radius: var(--r-lg);
  padding: 28px 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.morning-ritual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, rgba(181,133,157,.35) 0%, transparent 60%);
  pointer-events: none;
}
.morning-ritual-label {
  color: var(--mauve);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
  position: relative;
}
.morning-ritual.inner-child {
  background: linear-gradient(135deg, #6B4D5E 0%, #2A1F26 100%);
}
.morning-ritual.inner-child .morning-ritual-label {
  color: #E8C9D6;
}
.morning-ritual-affirmation {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 18px;
  font-style: italic;
  position: relative;
}
.morning-ritual-mantra {
  background: rgba(255,255,255,.08);
  border-left: 2px solid var(--mauve);
  padding: 14px 16px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 14px;
  position: relative;
}
.morning-ritual-mantra-label {
  color: var(--mauve);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.morning-ritual-mantra-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}
.morning-ritual-instruction {
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 14px;
  position: relative;
}
.morning-ritual-actions {
  display: flex;
  gap: 8px;
  position: relative;
}
.morning-ritual-actions button {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .2s;
  border: none;
}
.morning-ritual-done {
  background: var(--mauve);
  color: #FFF;
}
.morning-ritual-done:hover { background: var(--mauve-deep); }
.morning-ritual-skip {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.morning-ritual-skip:hover { background: rgba(255,255,255,.18); }
.morning-ritual.completed {
  background: var(--sage-tint);
  color: var(--sage);
}
.morning-ritual.completed::after { display: none; }
.morning-ritual.completed .morning-ritual-label,
.morning-ritual.completed .morning-ritual-mantra-label { color: var(--sage-mid); }
.morning-ritual.completed .morning-ritual-mantra {
  background: rgba(38,54,40,.06);
  border-left-color: var(--sage-mid);
}
.morning-ritual.completed .morning-ritual-instruction { color: var(--ink-mid); }
.morning-ritual.completed .morning-ritual-actions { display: none; }
.morning-ritual-completed-mark {
  display: none;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sage-mid);
  font-size: 13px;
}
.morning-ritual.completed .morning-ritual-completed-mark { display: block; }


/* ==========================================================
   DIÁRIO — página + form de novo registro
   ========================================================== */
.diario-head { margin: 8px 0 16px; }
.diario-title {
  font-family: var(--font-serif);
  font-size: 32px; font-weight: 400;
  color: var(--sage); letter-spacing: -.02em;
  margin-bottom: 8px;
}
.diario-sub {
  color: var(--ink-mid); font-size: 14px; font-weight: 300;
  line-height: 1.6; max-width: 36ch;
  margin-bottom: 8px;
}

/* Sub-abas Íntimas */
.intimas-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: 20px;
}
.intimas-tab {
  flex: 1;
  padding: 10px 8px;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  transition: all .2s;
  white-space: nowrap;
}
.intimas-tab.active {
  background: var(--mauve-deep);
  color: white;
}
.intimas-panel[hidden] { display: none; }

/* Eu que me reconheço */
.self-recognition-section { padding: 8px 0; }
.self-recognition-title {
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 400;
  color: var(--sage);
  margin-bottom: 8px;
}
.self-recognition-sub {
  color: var(--ink-mid); font-size: 14px; font-weight: 300;
  line-height: 1.6; max-width: 36ch;
  margin-bottom: 16px;
}
.self-recognition-phrase {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: var(--mauve-deep);
  text-align: center;
  margin: 0 0 16px;
}
.self-recognition-phrase:empty { display: none; }
.self-recognition-photo { margin-bottom: 16px; }
.self-recognition-img-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--sage-soft);
}
.self-recognition-img-wrap img {
  width: 100%;
  display: block;
  border-radius: var(--r-md);
}
.self-recognition-date {
  position: absolute;
  bottom: 8px; right: 10px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}
.self-recognition-empty {
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  aspect-ratio: 3 / 4;
  max-width: 280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  opacity: .3;
}
.self-recognition-upload-btn {
  display: flex;
  justify-content: center;
  cursor: pointer;
  background: var(--mauve);
  color: white;
  border: none;
  border-radius: var(--r-pill);
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  transition: all .25s;
  width: 100%;
}
.self-recognition-upload-btn:hover {
  background: var(--mauve-deep);
  transform: translateY(-1px);
}

.diario-new-btn {
  width: 100%;
  background: var(--bg-card);
  border: 1.5px dashed var(--mauve);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--mauve-deep);
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 500;
  margin-bottom: 24px;
  transition: all .25s;
}
.diario-new-btn:hover { background: var(--mauve-soft); border-style: solid; transform: translateY(-1px); }
.diario-new-btn svg { width: 18px; height: 18px; }

.diario-list { display: flex; flex-direction: column; gap: 10px; }
.diario-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: all .2s;
  text-align: left; width: 100%;
}
.diario-card:hover { border-color: var(--mauve); transform: translateX(2px); }
.diario-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.diario-card-date {
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mauve-deep); font-weight: 500;
}
.diario-card-emotions { display: flex; gap: 4px; font-size: 14px; }
.diario-card-voice {
  font-family: var(--font-serif); font-style: italic;
  color: var(--sage); font-size: 15px; line-height: 1.4;
  margin-bottom: 6px;
}
.diario-card-trigger {
  color: var(--ink-mid); font-size: 13px; line-height: 1.4; font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.diario-form {
  position: fixed; inset: 0;
  background: var(--bg-soft); z-index: 200;
  display: none; flex-direction: column; overflow-y: auto;
}
.diario-form.open { display: flex; }
.diario-form-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 5;
}
.diario-form-title {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 500;
  color: var(--sage); letter-spacing: -.01em;
}
.diario-form-save {
  background: var(--sage); color: white;
  padding: 8px 18px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; letter-spacing: .03em;
  transition: all .2s;
}
.diario-form-save:disabled {
  background: var(--line); color: var(--ink-mute); cursor: not-allowed;
}
.diario-form-save.danger {
  background: transparent; color: var(--terracotta);
  border: 1px solid var(--terracotta);
}
.diario-form-save.danger:hover { background: var(--terracotta); color: white; }
.diario-form-body { padding: 24px 24px 60px; max-width: 480px; margin: 0 auto; width: 100%; }
.diario-section { margin-bottom: 32px; }
.diario-section-title {
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 500;
  color: var(--sage); letter-spacing: -.01em;
  margin-bottom: 6px;
}
.diario-section-help {
  color: var(--ink-mid); font-size: 13px; font-weight: 300;
  line-height: 1.5; margin-bottom: 14px;
}
.diario-optional {
  font-size: 12px; color: var(--ink-mute); font-weight: 400;
  margin-left: 4px; font-style: italic;
}
.diario-meta-label {
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--mauve-deep); font-weight: 500;
}
.diario-meta-time {
  font-family: var(--font-serif); font-style: italic;
  color: var(--sage); font-size: 16px; margin-top: 6px;
}
.diario-textarea { font-size: 16px; min-height: 110px; }
.diary-voice-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.diary-voice-chip {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; color: var(--mauve-deep);
  transition: all .2s;
}
.diary-voice-chip:hover { border-color: var(--mauve); background: var(--mauve-soft); }
.diary-voice-chip:active { transform: scale(.96); }

/* Seções profundas — olhar de fora + compaixão */
.diario-tcc-section {
  background: var(--sage-tint);
  border-left: 3px solid var(--sage-mid);
  padding: 18px 16px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: 28px;
}
.diario-tcc-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--sage-mid);
  font-weight: 600;
  background: rgba(38,54,40,.06);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 10px;
}
.diario-tcc-section .diario-section-title {
  font-size: 19px;
  margin-bottom: 4px;
}
.diary-dispute-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.diary-dispute-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
}
.diary-dispute-btn:hover {
  border-color: var(--sage-mid);
  transform: translateY(-1px);
}
.diary-dispute-btn .ico {
  font-size: 22px;
  width: 36px;
  height: 36px;
  background: var(--bg-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.diary-dispute-btn strong {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--sage);
  font-weight: 500;
  display: block;
}
.diary-dispute-btn .sub {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
  margin-top: 2px;
  display: block;
}
.diary-dispute-btn.selected {
  background: var(--sage);
  border-color: var(--sage);
}
.diary-dispute-btn.selected .ico {
  background: rgba(255,255,255,.15);
  filter: brightness(1.5) saturate(0);
}
.diary-dispute-btn.selected strong { color: #FFF; }
.diary-dispute-btn.selected .sub { color: rgba(255,255,255,.7); }
.diario-safety {
  display: flex; align-items: center; gap: 8px;
  background: var(--mauve-soft);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--mauve-deep);
  font-size: 12px; font-weight: 400; line-height: 1.4;
  margin-top: 24px;
}
.diario-safety svg { width: 14px; height: 14px; flex-shrink: 0; }

.diario-view-block { margin-bottom: 28px; }
.diario-view-block .label {
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--mauve-deep); font-weight: 500;
  margin-bottom: 8px; display: block;
}
.diario-view-block .voice-quote {
  font-family: var(--font-serif); font-style: italic;
  color: var(--sage); font-size: 18px; line-height: 1.4;
  padding: 14px 18px;
  background: var(--mauve-soft);
  border-radius: var(--r-md);
  border-left: 3px solid var(--mauve);
}
.diario-view-block .text-block {
  color: var(--ink); font-size: 15px; line-height: 1.6; font-weight: 300;
  white-space: pre-wrap;
}
.diario-view-block .emotions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.diario-view-block .emotion-pill {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 13px; color: var(--ink-mid);
  display: inline-flex; align-items: center; gap: 5px;
}

.diario-empty p { font-family: var(--font-serif); }

/* ==========================================================
   AFTERNOON PULSE (notificação na Home)
   ========================================================== */
.afternoon-pulse {
  background: linear-gradient(135deg, var(--mauve-soft) 0%, var(--sage-tint) 100%);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
  border-left: 3px solid var(--mauve);
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px;
  transition: all .2s;
}
.afternoon-pulse[hidden] { display: none; }
.afternoon-pulse:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.afternoon-pulse-ico { font-size: 26px; flex-shrink: 0; }
.afternoon-pulse-content { flex: 1; }
.afternoon-pulse-label {
  color: var(--mauve-deep);
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 4px;
}
.afternoon-pulse-title {
  font-family: var(--font-serif);
  font-size: 16px; color: var(--sage); font-weight: 500;
}
.afternoon-pulse-arrow {
  color: var(--mauve-deep); font-size: 18px;
}

.pulse-modal {
  position: fixed; inset: 0;
  background: rgba(38,54,40,.5);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: flex-end; justify-content: center;
}
.pulse-modal.open { display: flex; animation: fade-in .25s ease both; }
.pulse-modal-card {
  background: var(--bg-soft);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-width: 480px;
  padding: 32px 24px 24px;
  animation: slide-up .3s cubic-bezier(.4,0,.2,1) both;
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.pulse-modal h3 {
  font-family: var(--font-serif);
  font-size: 22px; color: var(--sage); font-weight: 500;
  letter-spacing: -.01em; margin-bottom: 6px;
}
.pulse-modal p {
  color: var(--ink-mid); font-size: 13px; margin-bottom: 16px; font-weight: 300;
}
.pulse-options {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.pulse-opt {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12px; color: var(--sage); font-weight: 500;
  transition: all .2s;
}
.pulse-opt:hover { border-color: var(--mauve); }
.pulse-opt.selected {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.pulse-opt .ico { font-size: 22px; }
.pulse-talk-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 4px 0 10px;
  padding: 14px;
  background: var(--sage-tint);
  border: 1px solid var(--sage-soft);
  border-radius: var(--r-md);
  color: var(--sage);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: all .2s;
}
.pulse-talk-link:hover { background: var(--sage); color: white; border-color: var(--sage); }
.pulse-talk-link svg { width: 14px; height: 14px; }

.pulse-modal-actions {
  display: flex; gap: 10px; margin-top: 12px;
}
.pulse-modal-actions button {
  flex: 1;
  padding: 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .2s;
}
.pulse-modal-skip {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--line);
}
.pulse-modal-confirm {
  background: var(--sage);
  color: white;
}
.pulse-modal-confirm:disabled {
  background: var(--line); color: var(--ink-mute); cursor: not-allowed;
}

/* ==========================================================
   DAY 22 COUNTDOWN (substitui o "Próxima recompensa")
   ========================================================== */
.day22-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line-soft);
}
.day22-card-label {
  color: var(--mauve-deep);
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 10px;
}
.day22-card-num {
  font-family: var(--font-serif);
  font-size: 38px; color: var(--sage); font-weight: 400;
  line-height: 1; margin-bottom: 4px;
}
.day22-card-num em {
  font-style: italic; color: var(--mauve-deep);
  font-size: 22px; margin-left: 6px;
}
.day22-card-text {
  color: var(--ink-mid); font-size: 13px; font-weight: 300;
  margin-bottom: 14px; line-height: 1.5;
}
.day22-card-bar {
  height: 6px; background: var(--mauve-soft);
  border-radius: 100px; overflow: hidden; margin-bottom: 8px;
}
.day22-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mauve), var(--mauve-deep));
  border-radius: 100px;
  transition: width .8s;
}
.day22-card-foot {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-mute);
  font-weight: 500; letter-spacing: .05em;
}
.day22-early-btn {
  margin-top: 14px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--mauve);
  border-radius: var(--r-pill);
  padding: 10px 14px;
  color: var(--mauve-deep);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: all .2s;
}
.day22-early-btn:hover {
  background: var(--mauve-soft);
  border-style: solid;
}
.day22-early-btn[hidden] { display: none; }

/* ==========================================================
   VERSÃO PAGE — dashboard diário com metas + %
   ========================================================== */
.versao-head {
  text-align: center;
  margin: 8px 0 20px;
}
.versao-eyebrow {
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
}
.versao-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--sage);
  letter-spacing: -.02em;
  margin: 6px 0 18px;
}
.versao-title em { font-style: italic; color: var(--mauve-deep); }

.versao-score-wrap {
  background: var(--sage);
  color: #FFF;
  border-radius: var(--r-lg);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
}
.versao-score-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, rgba(181,133,157,.4) 0%, transparent 60%);
  pointer-events: none;
}
.versao-score-num {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.03em;
  margin-bottom: 6px;
  position: relative;
}
.versao-score-num small {
  font-size: 22px;
  opacity: .75;
  margin-left: 4px;
}
.versao-score-text {
  font-size: 13px;
  opacity: .85;
  font-weight: 300;
  line-height: 1.5;
  position: relative;
}

.versao-phase-banner {
  background: var(--mauve-soft);
  color: var(--sage);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  margin: 18px 0;
  border-left: 3px solid var(--mauve);
}
.versao-phase-banner strong { color: var(--mauve-deep); font-weight: 600; }
.versao-phase-banner em { font-style: italic; color: var(--mauve-deep); }

.versao-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
  transition: border-color .3s ease;
  border: 1.5px solid transparent;
}
.versao-card-emphasis {
  border-color: var(--mauve-soft);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--mauve-soft);
}
.versao-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.versao-card-label {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--sage);
  font-weight: 500;
  letter-spacing: -.01em;
  display: block;
  margin-bottom: 2px;
}
.versao-card-goal {
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: .03em;
  font-weight: 500;
}
.versao-card-add {
  background: var(--mauve);
  color: #FFF;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .2s;
  flex-shrink: 0;
}
.versao-card-add:hover { background: var(--mauve-deep); }

.versao-card-body { }
.versao-card-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.versao-card-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 100px;
  overflow: hidden;
}
.versao-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mauve), var(--sage));
  border-radius: 100px;
  transition: width .5s;
}
.versao-card-stat {
  font-family: var(--font-serif);
  color: var(--sage);
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.versao-card-current { font-size: 22px; }
.versao-card-unit {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 400;
  font-family: var(--font-sans);
  margin-left: 2px;
}

.versao-card-cups {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.water-cup {
  flex: 1;
  height: 18px;
  background: var(--bg-soft);
  border-radius: 4px;
  border: 1px solid var(--line);
  transition: all .2s;
}
.water-cup.filled {
  background: var(--mauve);
  border-color: var(--mauve-deep);
}

.versao-meals-row {
  display: flex;
  gap: 6px;
}
.versao-meal-btn {
  flex: 1;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-mid);
  font-weight: 500;
  transition: all .2s;
}
.versao-meal-btn .ico { font-size: 18px; }
.versao-meal-btn:hover { border-color: var(--mauve); }
.versao-meal-btn.done {
  background: var(--mauve-soft);
  border-color: var(--mauve);
  color: var(--mauve-deep);
}

.versao-training-buttons {
  display: flex;
  gap: 8px;
}
.versao-training-btn {
  flex: 1;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 8px;
  font-size: 13px;
  color: var(--ink-mid);
  font-weight: 500;
  transition: all .2s;
}
.versao-training-btn.active {
  background: var(--mauve-soft);
  border-color: var(--mauve);
  color: var(--sage);
}

/* Card atingiu meta */
.versao-card.goal-reached {
  border-left: 3px solid var(--mauve-deep);
}
.versao-card.goal-reached .versao-card-bar-fill {
  background: var(--mauve-deep);
}
.versao-card-nudge {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--mauve-deep);
  margin-top: 2px;
}

/* Botão criar meta pessoal */
.versao-add-goal-btn {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1.5px dashed var(--mauve);
  border-radius: var(--r-md);
  color: var(--mauve-deep);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  cursor: pointer;
  transition: all .2s;
}
.versao-add-goal-btn:hover {
  background: var(--mauve-soft);
  border-style: solid;
}

/* Remover meta pessoal */
.versao-card-remove {
  background: none;
  border: none;
  color: var(--sage-mid);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all .2s;
}
.versao-card-remove:hover {
  color: var(--mauve-deep);
  background: rgba(181,133,157,.12);
}

/* Resumo semanal */
.versao-weekly-summary {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 18px;
  margin-top: 16px;
}
.versao-weekly-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sage-mid);
  font-weight: 600;
}
.versao-weekly-phrase {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--sage);
  font-style: italic;
  margin: 6px 0 14px;
}
.weekly-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.weekly-bar-label {
  font-size: 12px;
  color: var(--sage);
  min-width: 90px;
}
.weekly-bar-track {
  flex: 1;
  height: 6px;
  background: var(--mauve-soft);
  border-radius: 3px;
  overflow: hidden;
}
.weekly-bar-fill {
  height: 100%;
  background: var(--mauve-deep);
  border-radius: 3px;
  transition: width .4s ease;
}
.weekly-bar-num {
  font-size: 12px;
  color: var(--mauve-deep);
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

.versao-personalize-cta {
  width: 100%;
  background: var(--bg-card);
  border: 1.5px dashed var(--mauve);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  margin-top: 12px;
  transition: all .25s;
}
.versao-personalize-cta:hover { background: var(--mauve-soft); border-style: solid; }
.versao-personalize-label {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--sage);
  font-weight: 500;
  margin-bottom: 2px;
}
.versao-personalize-text {
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 300;
}

.pulse-options-stacked {
  flex-direction: column;
}

/* ==========================================================
   SELOS PAGE — status, tier, conquistas, parceiros plus
   ========================================================== */
.selos-head {
  text-align: center;
  margin: 8px 0 24px;
}
.selos-eyebrow {
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
}
.selos-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--sage);
  letter-spacing: -.02em;
  margin-top: 6px;
  line-height: 1.1;
}
.selos-title em { font-style: italic; color: var(--mauve-deep); }

.selo-tier {
  background: var(--sage);
  color: #FFF;
  border-radius: var(--r-lg);
  padding: 22px 20px;
  margin-bottom: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.selo-tier::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, rgba(181,133,157,.4) 0%, transparent 60%);
  pointer-events: none;
}
.selo-tier-badge {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 2px solid var(--mauve);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.tier-ico { font-size: 30px; }
.selo-tier-content { flex: 1; position: relative; }
.selo-tier-label {
  color: var(--mauve);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
}
.selo-tier-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 4px 0 8px;
}
.selo-tier-text {
  font-size: 12px;
  opacity: .8;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 12px;
}
.selo-tier-bar {
  height: 5px;
  background: rgba(255,255,255,.15);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 6px;
}
.selo-tier-bar-fill {
  height: 100%;
  background: var(--mauve);
  border-radius: 100px;
  transition: width .8s;
}
.selo-tier-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .7;
  font-weight: 500;
}

.selos-section { margin-bottom: 24px; }
.selos-section-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.01em;
  margin-bottom: 12px;
}

.selos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.selo-item {
  aspect-ratio: 1;
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  position: relative;
}
.selo-item.unlocked {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.selo-item .ico {
  font-size: 28px;
  filter: grayscale(0);
}
.selo-item .name {
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--sage);
  font-weight: 500;
  line-height: 1.2;
}
.selos-grid.locked .selo-item {
  background: var(--bg-soft);
  opacity: .65;
}
.selos-grid.locked .selo-item .ico { filter: grayscale(1); opacity: .6; }
.selos-grid.locked .selo-item .name { color: var(--ink-mute); }
.selo-item .req {
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: .04em;
  font-weight: 400;
}

.selos-partners {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  border: 1px solid var(--line-soft);
  position: relative;
  margin-top: 8px;
}
.selos-partners-label {
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}
.selos-partners-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.01em;
  margin-bottom: 10px;
  line-height: 1.25;
}
.selos-partners-title em { font-style: italic; color: var(--mauve-deep); }
.selos-partners-text {
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 14px;
}
.selos-partners-text strong { color: var(--sage); font-weight: 500; }
.selos-partners-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  padding: 10px 14px;
  border-radius: var(--r-pill);
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
}
.selos-partners-lock { font-size: 14px; }

.selos-partners-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.tier-row {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all .2s;
}
.tier-row.unlocked {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.tier-row-icon {
  font-size: 22px;
  flex-shrink: 0;
  filter: grayscale(.8);
  opacity: .6;
}
.tier-row.unlocked .tier-row-icon {
  filter: none;
  opacity: 1;
}
.tier-row-content { flex: 1; }
.tier-row-name {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--sage);
  font-weight: 500;
}
.tier-row-when {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .08em;
  margin-top: 2px;
  font-weight: 500;
}
.tier-row-status {
  font-size: 14px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.tier-row.unlocked .tier-row-status { color: var(--mauve-deep); }

/* ==========================================================
   PROFILE PAGE
   ========================================================== */
.profile-head {
  text-align: center;
  margin: 16px 0 28px;
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--mauve-soft);
  border: 2px solid var(--mauve);
  color: var(--mauve-deep);
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  letter-spacing: -.02em;
}
.profile-name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--sage);
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
.profile-subtitle {
  color: var(--mauve-deep);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
.profile-stat {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 16px 8px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.profile-stat-num {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 4px;
}
.profile-stat-label {
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .08em;
  font-weight: 500;
  line-height: 1.3;
}

.profile-section { margin-bottom: 24px; }
.profile-section-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.profile-optional {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 400;
  font-style: italic;
}
.profile-section-help {
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 300;
  margin-bottom: 12px;
  line-height: 1.5;
}
.profile-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
.profile-weight-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.weight-num {
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--sage);
  font-weight: 400;
  line-height: 1;
}
.weight-num small {
  font-size: 16px;
  color: var(--ink-mute);
  font-weight: 300;
}
.weight-meta {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .08em;
  margin-top: 6px;
  font-weight: 500;
}
.weight-initial {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-mid);
  font-weight: 400;
}
.weight-initial .initial-label {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.weight-initial strong {
  color: var(--sage);
  font-weight: 500;
  font-family: var(--font-serif);
}
.weight-initial .initial-date {
  color: var(--ink-mute);
  font-size: 11px;
}

.mirror-measures-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  letter-spacing: .03em;
}
.mirror-measures-meta strong {
  color: var(--mauve-deep);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 4px;
}
.profile-btn-add {
  background: var(--mauve);
  color: white;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .2s;
}
.profile-btn-add:hover { background: var(--mauve-deep); }

.weight-history {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.weight-history-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}
.weight-history-item .date {
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: .05em;
}
.weight-history-item .value {
  color: var(--sage);
  font-weight: 500;
  font-family: var(--font-serif);
}

.measurements-display { margin-bottom: 14px; }
.measurements-empty {
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 12px 0;
}
.measurements-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.measure-pill {
  background: var(--bg-soft);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.measure-pill .label {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.measure-pill .value {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--sage);
  font-weight: 500;
  margin-top: 2px;
}
.measure-pill .value small { font-size: 12px; color: var(--ink-mute); font-weight: 300; }
.measurements-date {
  text-align: right;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-mute);
  margin-top: 6px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.photo-slot {
  aspect-ratio: 3 / 4;
  background: var(--bg-card);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .2s;
}
.photo-slot:hover { border-color: var(--mauve); border-style: solid; }
.photo-slot.has-photo { border-style: solid; border-color: var(--sage-soft); padding: 0; }
.photo-slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
}
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-mute);
}
.photo-ico {
  font-size: 24px;
  font-weight: 300;
  color: var(--mauve-deep);
}
.photo-label {
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 500;
}

.profile-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-tag {
  background: var(--mauve-soft);
  color: var(--mauve-deep);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  border: 1px solid var(--mauve);
}
.profile-tag.empty {
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
}

.profile-account-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-soft);
}
.profile-account-info { flex: 1; min-width: 0; }
.profile-account-label {
  display: block;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 4px;
}
.profile-account-email {
  font-size: 13px;
  color: var(--sage);
  font-weight: 500;
  word-break: break-all;
}
.profile-account-logout {
  background: transparent;
  color: var(--terracotta);
  border: 1px solid var(--terracotta);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  flex-shrink: 0;
  transition: all .2s;
}
.profile-account-logout:hover { background: var(--terracotta); color: white; }

.lgpd-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.lgpd-actions-label {
  display: block;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 4px;
}
.lgpd-btn {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: all .2s;
}
.lgpd-btn:hover { border-color: var(--mauve); color: var(--mauve-deep); }
.lgpd-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lgpd-btn-danger {
  color: var(--terracotta);
  border-color: rgba(196,106,71,.3);
}
.lgpd-btn-danger:hover {
  background: rgba(196,106,71,.08);
  border-color: var(--terracotta);
  color: var(--terracotta);
}

.measurements-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.measure-input-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
}
.measure-input-row label {
  font-size: 13px;
  color: var(--ink-mid);
  font-weight: 500;
}
.measure-input-row .step-input {
  font-size: 16px;
  padding: 12px 16px;
}
.measure-input-row .step-input-unit {
  font-size: 13px;
  right: 16px;
}

/* ==========================================================
   ESPELHO — comparação fotos + gráfico peso + medidas
   ========================================================== */
.mirror-section-label {
  display: block;
  color: var(--mauve-deep);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 6px;
}

.mirror-photos { padding: 16px; }
.mirror-phrase {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px; line-height: 1.5;
  color: var(--mauve-deep);
  text-align: center;
  margin: 0 0 14px;
}
.mirror-phrase:empty { display: none; }
.mirror-photo-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: 14px;
}
.mirror-photo-tab {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-pill);
  transition: all .2s;
}
.mirror-photo-tab.active {
  background: var(--sage);
  color: white;
}

.mirror-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.mirror-photo-side {
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mirror-photo-side.has-img {
  border: 1px solid var(--sage-soft);
  border-style: solid;
  padding: 0;
}
.mirror-photo-side img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mirror-photo-tag {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(38,54,40,.85);
  color: #FFF;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 100px;
  font-weight: 600;
  z-index: 1;
}
.mirror-photo-tag.now { background: var(--mauve-deep); }
.mirror-photo-date {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(255,255,255,.9);
  color: var(--ink-mid);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: .04em;
  z-index: 1;
}
.mirror-photo-empty {
  color: var(--ink-mute);
  font-size: 11px;
  font-style: italic;
  padding: 0 12px;
  text-align: center;
}
.mirror-photo-update {
  width: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-top: 4px;
}

.mirror-weight { padding: 18px 20px; }
.mirror-weight-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.mirror-weight .weight-num {
  font-size: 32px;
  margin-top: 2px;
}
.mirror-weight .weight-num small { font-size: 14px; }
.mirror-weight-delta-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.mirror-delta {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-mid);
}
.mirror-delta.good { color: var(--sage); }
.mirror-delta.up { color: var(--terracotta); }

.mirror-chart {
  margin: 12px 0;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 14px 12px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mirror-weight-svg {
  width: 100%;
  height: 100px;
  display: block;
}
.mirror-empty {
  color: var(--ink-mute);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  margin: 0;
}

.mirror-measures { padding: 18px 20px; }
.mirror-measures-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.mirror-measures-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mirror-measure-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}
.mirror-measure-row .name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--sage);
  font-weight: 500;
}
.mirror-measure-row .progression {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-mid);
}
.mirror-measure-row .initial { color: var(--ink-mute); }
.mirror-measure-row .arrow { color: var(--ink-soft); font-size: 11px; }
.mirror-measure-row .current {
  color: var(--sage);
  font-weight: 500;
  font-family: var(--font-serif);
}
.mirror-measure-row .delta {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--bg-card);
  color: var(--ink-mid);
}
.mirror-measure-row .delta.good {
  background: var(--sage-tint);
  color: var(--sage);
}
.mirror-measure-row .delta.up {
  background: rgba(196,106,71,.12);
  color: var(--terracotta);
}

/* ==========================================================
   STATES "EM BREVE" (Community/Rewards/Profile placeholders)
   ========================================================== */
.coming-soon {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-mid);
}
.coming-soon-ico {
  font-size: 36px;
  margin-bottom: 18px;
}
.coming-soon h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--sage);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.coming-soon p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  max-width: 36ch;
  margin: 0 auto;
}

/* ==========================================================
   DESKTOP "PHONE FRAME" — TELAS ≥ 720px
   Todos elementos fullscreen são CONFINADOS às mesmas
   dimensões da moldura usando inset com cálculo de centro.
   ========================================================== */
@media (min-width: 720px) {
  html {
    background: linear-gradient(135deg, #1a221c 0%, #2a3128 100%) !important;
  }
  body {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    overflow-x: hidden !important;
  }

  /* Todos elementos fullscreen ficam DENTRO de uma área 420×(vh-60) centralizada.
     IMPORTANTE: NÃO uso `inset: auto` aqui porque ele é shorthand
     que reseta top/right/bottom/left. */
  .app,
  .auth-screen,
  .flow,
  .diario-form,
  .modal-backdrop,
  .pulse-modal {
    position: fixed !important;
    top: 30px !important;
    bottom: 30px !important;
    left: calc(50vw - 210px) !important;
    right: calc(50vw - 210px) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 44px !important;
  }

  /* Limita altura máxima absoluta */
  .app { max-height: calc(100vh - 60px) !important; }

  /* App: visual da moldura (mesma sombra aplicada em auth/flow/diário pra
     manterem a "cara de celular" quando ativos) */
  .app,
  .auth-screen.open,
  .flow.active,
  .diario-form.open,
  .pulse-modal.open {
    background: var(--bg) !important;
    box-shadow:
      0 0 0 12px #1a1a1a,
      0 0 0 14px #2a2a2a,
      0 30px 80px rgba(0,0,0,.6) !important;
  }
  .app {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1;
  }

  /* QUANDO QUALQUER overlay fullscreen está aberto → esconde a .app
     (evita "duas telas" sobrepostas) */
  body:has(.auth-screen.open) .app,
  body:has(.flow.active) .app,
  body:has(.diario-form.open) .app,
  body:has(.pulse-modal.open) .app,
  body:has(.modal-backdrop.open) .app {
    display: none !important;
  }

  /* Notch */
  .app::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 28px;
    background: #1a1a1a;
    border-radius: 0 0 18px 18px;
    z-index: 200;
    pointer-events: none;
  }

  .app-bar { padding-top: 36px !important; flex-shrink: 0; }

  /* Bottom nav presa na base da moldura (dentro do .app) */
  .bottom-nav {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 0 32px 32px !important;
    z-index: 50;
  }

  /* Auth/Flow/Diário — overlay sobre a moldura */
  .auth-screen,
  .flow,
  .diario-form {
    overflow-y: auto !important;
  }
  .auth-screen { z-index: 400; }
  .flow { z-index: 250; }
  .diario-form { z-index: 250; }

  /* Pulse modal & backdrop */
  .modal-backdrop { z-index: 350; }
  .pulse-modal { z-index: 360; overflow: hidden !important; }

  /* Modal centrado */
  .modal {
    max-width: 380px !important;
    z-index: 355 !important;
  }

}

/* ============================================================
   4 EIXOS — "você vs você" (Conquistas tab)
   ============================================================ */
.axes-block {
  margin: 0 0 22px;
  padding: 22px 18px 18px;
  background: linear-gradient(135deg, var(--sage-tint) 0%, var(--mauve-soft) 100%);
  border-radius: var(--r-lg, 14px);
  border: 1px solid rgba(75, 89, 71, .08);
}
.axes-head { margin-bottom: 14px; }
.axes-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 4px;
}
.axes-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  margin: 0;
}
.axes-title em {
  font-style: italic;
  color: var(--mauve-deep);
}
.axes-grid { display: grid; gap: 10px; }
.axis-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(75, 89, 71, .08);
}
.axis-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.axis-ico { font-size: 22px; line-height: 1; }
.axis-meta { flex: 1; display: flex; flex-direction: column; }
.axis-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sage);
}
.axis-desc {
  font-size: 11px;
  color: var(--sage-mid);
  opacity: .8;
}
.axis-arrow {
  font-size: 18px;
  font-weight: 700;
  width: 24px;
  text-align: center;
}
.axis-arrow.up { color: #5B8C5A; }
.axis-arrow.down { color: var(--mauve); opacity: .6; }
.axis-arrow.eq { color: var(--sage-soft); }
.axis-bar {
  height: 6px;
  background: var(--sage-tint);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.axis-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sage-soft) 0%, var(--mauve) 100%);
  border-radius: 3px;
  transition: width .6s ease;
}
.axis-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.axis-score {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--sage);
}
.axis-score small {
  font-size: 11px;
  color: var(--sage-mid);
  opacity: .6;
}
.axis-phrase {
  font-size: 11px;
  color: var(--sage-mid);
  text-align: right;
  font-style: italic;
  line-height: 1.3;
  flex: 1;
}
.axis-percentile {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(181, 133, 157, .3);
  font-size: 11px;
  color: var(--mauve-deep);
  font-weight: 500;
}
.axes-footnote {
  margin-top: 12px;
  font-size: 10px;
  color: var(--sage-mid);
  opacity: .65;
  text-align: center;
  font-style: italic;
}

/* ============================================================
   CUIDADO — recursos sempre presentes, nunca disparados
   ============================================================ */
.profile-care {
  background: var(--sage-tint);
  border-radius: var(--r-lg, 14px);
  padding: 18px;
  border: 1px solid rgba(75, 89, 71, .08);
}
.care-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.care-link {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  border: 1px solid rgba(75, 89, 71, .08);
  transition: transform .15s ease, border-color .15s ease;
}
.care-link:hover {
  transform: translateY(-1px);
  border-color: var(--mauve);
}
.care-link-num {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--mauve-deep);
  min-width: 48px;
  text-align: center;
}
.care-link-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.care-link-meta strong {
  font-size: 14px;
  color: var(--sage);
  font-weight: 600;
}
.care-link-meta small {
  font-size: 11px;
  color: var(--sage-mid);
  opacity: .75;
}

/* Sussurro de cuidado na Reflexão Semanal — discreto, sem alarme */
.weekly-whisper {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(181, 133, 157, .35);
  font-size: 11px;
  color: var(--mauve-deep);
  opacity: .85;
  line-height: 1.5;
}
.weekly-whisper em { font-style: italic; }

/* Linha de cuidado inline no Voice Diary — discreta, mauve suave */
.diary-care-whisper {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--mauve-soft);
  border-left: 2px solid var(--mauve);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mauve-deep);
}
.diary-care-whisper em { font-style: italic; }
.diary-care-whisper a {
  color: var(--mauve-deep);
  font-weight: 600;
  text-decoration: underline;
}

/* Badge "chave protegida" no Perfil */
.key-backup-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--sage-tint);
  border-radius: 10px;
  border: 1px solid rgba(75, 89, 71, .12);
}
.key-backup-ico { font-size: 18px; line-height: 1; }
.key-backup-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sage);
}
.key-backup-text strong { color: var(--sage); font-weight: 600; }

/* ============================================================
   LEMBRETES — toggle de Web Push no Perfil
   ============================================================ */
.notif-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 14px;
  border: 1px solid rgba(75, 89, 71, .1);
  margin-top: 8px;
}
.notif-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.notif-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--sage);
}
.notif-help {
  font-size: 11px;
  color: var(--sage-mid);
  line-height: 1.4;
  opacity: .85;
}
.notif-toggle {
  background: var(--mauve);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.notif-toggle:hover { background: var(--mauve-deep); }
.notif-toggle:disabled { opacity: .5; cursor: wait; }
.notif-ios-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--sage-mid);
  opacity: .8;
  line-height: 1.4;
}

/* ============================================================
   ESTADO EMOCIONAL RÁPIDO (Home) — 1 toque adapta o tom
   ============================================================ */
.mood-quick {
  margin: 14px 0 18px;
  padding: 16px 14px 14px;
  background: #fff;
  border-radius: var(--r-lg, 14px);
  border: 1px solid rgba(75, 89, 71, .08);
}
.mood-quick-label {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 12px;
  text-align: center;
}
.mood-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mood-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px 10px;
  background: var(--sage-tint);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .2s ease;
}
.mood-quick-btn:hover {
  transform: translateY(-1px);
  border-color: var(--mauve);
}
.mood-quick-btn .ico { font-size: 22px; line-height: 1; }
.mood-quick-btn .lbl {
  font-size: 11px;
  color: var(--sage);
  font-weight: 500;
}
.mood-quick-btn.selected {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.mood-quick-btn.selected .lbl { color: var(--mauve-deep); font-weight: 600; }
.mood-quick-feedback {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--sage-mid);
  line-height: 1.4;
}

/* ============================================================
   MODO DIFÍCIL — quando mood = "dificil"
   Tom geral fica mais respirado, paleta menos contrastante
   ============================================================ */
body.hard-day-active {
  background: linear-gradient(180deg, var(--mauve-soft) 0%, var(--sage-tint) 100%);
}
body.hard-day-active .home-greet h1,
body.hard-day-active .home-greet h1 em {
  color: var(--mauve-deep);
}
body.hard-day-active .home-index {
  filter: saturate(.7);
  opacity: .85;
}
body.hard-day-active .night-cta {
  background: rgba(255,255,255,.6);
  color: var(--sage);
  border: 1px solid rgba(181, 133, 157, .25);
}

.hard-day {
  margin: 14px 0 20px;
  padding: 22px 18px 18px;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--mauve-soft) 100%);
  border-radius: var(--r-lg, 14px);
  border: 1px solid rgba(181, 133, 157, .25);
  box-shadow: 0 1px 3px rgba(75, 89, 71, .04);
}
.hard-day-head { margin-bottom: 16px; }
.hard-day-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 6px;
}
.hard-day-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 6px;
  line-height: 1.2;
}
.hard-day-title em {
  font-style: italic;
  color: var(--mauve-deep);
}
.hard-day-sub {
  font-size: 13px;
  color: var(--sage-mid);
  line-height: 1.5;
  margin: 0;
}
.hard-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.hard-day-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(75, 89, 71, .08);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .2s ease;
}
.hard-day-item:hover {
  transform: translateY(-1px);
  border-color: var(--mauve);
}
.hard-day-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--sage-soft);
  border-radius: 6px;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.hard-day-item input[type="checkbox"]:checked {
  background: var(--mauve);
  border-color: var(--mauve);
}
.hard-day-item input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.hard-day-item .ico { font-size: 22px; line-height: 1; }
.hard-day-item .lbl {
  font-size: 14px;
  color: var(--sage);
  flex: 1;
}
.hard-day-item:has(input:checked) {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.hard-day-item:has(input:checked) .lbl {
  color: var(--mauve-deep);
  font-weight: 500;
}
.hard-day-foot {
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--mauve-deep);
  line-height: 1.5;
  background: rgba(255,255,255,.55);
  border-radius: 8px;
}

/* ============================================================
   SAUDAÇÃO VIVA + Anti-Abandono
   ============================================================ */
.home-subgreet {
  margin: 8px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--mauve-deep);
  line-height: 1.5;
}

.welcome-back {
  margin: 14px 0 18px;
  padding: 18px 18px 14px;
  background: linear-gradient(135deg, var(--mauve-soft) 0%, var(--sage-tint) 100%);
  border-radius: var(--r-lg, 14px);
  border: 1px solid rgba(181, 133, 157, .22);
  position: relative;
}
.welcome-back-eyebrow {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 8px;
}
.welcome-back-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 10px;
  line-height: 1.3;
}
.welcome-back-memory {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .55);
  border-left: 2px solid var(--mauve);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: var(--sage-mid);
  line-height: 1.5;
}
.welcome-back-memory em {
  font-style: italic;
  color: var(--mauve-deep);
}
.welcome-back-dismiss {
  display: block;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(75, 89, 71, .15);
  color: var(--sage-mid);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
}
.welcome-back-dismiss:hover { background: rgba(255, 255, 255, .5); }

/* ============================================================
   CONVITE ÀS NOTAS — modal acolhedor em noites pesadas
   ============================================================ */
.intimate-offer-modal {
  position: fixed;
  inset: 0;
  background: rgba(38, 54, 40, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.intimate-offer-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.intimate-offer-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, #fff 0%, var(--mauve-soft) 100%);
  border-radius: var(--r-lg, 14px) var(--r-lg, 14px) 0 0;
  padding: 26px 22px 22px;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.intimate-offer-modal.open .intimate-offer-card {
  transform: translateY(0);
}
.intimate-offer-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 6px;
}
.intimate-offer-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 8px;
  line-height: 1.3;
}
.intimate-offer-title em {
  font-style: italic;
  color: var(--mauve-deep);
}
.intimate-offer-sub {
  font-size: 13px;
  color: var(--sage-mid);
  line-height: 1.5;
  margin: 0 0 18px;
}
.intimate-offer-actions {
  display: flex;
  gap: 10px;
}
.intimate-offer-skip {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(75, 89, 71, .2);
  color: var(--sage-mid);
  border-radius: 999px;
  padding: 12px;
  font-size: 13px;
  cursor: pointer;
}
.intimate-offer-go {
  flex: 1.3;
  background: var(--mauve);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.intimate-offer-go:hover { background: var(--mauve-deep); }

/* ============================================================
   PULSO VERSO — círculo respirante (substitui número 82/100)
   ============================================================ */
.pulse-ring {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pulse-core {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mauve);
  position: relative;
  z-index: 2;
  animation: pulseBreath 5s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(181, 133, 157, .55);
}
.pulse-aura {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(181, 133, 157, .3);
  animation: pulseAura 5s ease-in-out infinite;
}
.pulse-aura::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(181, 133, 157, .14);
  animation: pulseAuraOuter 5s ease-in-out infinite;
}
@keyframes pulseBreath {
  0%, 100% { transform: scale(.92); opacity: .85; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes pulseAura {
  0%, 100% { transform: scale(.95); opacity: .55; }
  50%      { transform: scale(1.12); opacity: .85; }
}
@keyframes pulseAuraOuter {
  0%, 100% { transform: scale(.92); opacity: .35; }
  50%      { transform: scale(1.18); opacity: .6; }
}

/* No Modo Difícil, pulso fica mais devagar */
body.hard-day-active .pulse-core { animation-duration: 8s; }
body.hard-day-active .pulse-aura { animation-duration: 8s; }
body.hard-day-active .pulse-aura::after { animation-duration: 8s; }

/* Subtitle minimalista na Versão */
.versao-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--sage-mid);
  font-style: italic;
  line-height: 1.5;
}

/* ============================================================
   HÁBITOS ATÔMICOS — micro-cuidados na aba Versão
   ============================================================ */
.atomic-habits {
  margin: 16px 0 22px;
  padding: 18px 16px 14px;
  background: linear-gradient(135deg, var(--sage-tint) 0%, #fff 100%);
  border-radius: var(--r-lg, 14px);
  border: 1px solid rgba(75, 89, 71, .08);
}
.atomic-habits-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.atomic-habits-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 4px;
}
.atomic-habits-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  margin: 0;
}
.atomic-habits-title em { font-style: italic; color: var(--mauve-deep); }
.atomic-habits-edit {
  background: transparent;
  border: none;
  color: var(--sage-mid);
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.atomic-habits-edit:hover { background: rgba(75, 89, 71, .08); }
.atomic-streak {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(181, 133, 157, .15);
  border-radius: 8px;
  font-size: 12px;
  color: var(--mauve-deep);
  font-weight: 600;
  text-align: center;
}
.atomic-streak.returned {
  background: rgba(181, 133, 157, .22);
  font-style: italic;
}
.atomic-habits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atomic-habit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  background: #fff;
  border: 1px solid rgba(75, 89, 71, .1);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
}
.atomic-habit-item:hover { border-color: var(--mauve); transform: translateY(-1px); }
.atomic-habit-item.done {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.atomic-habit-check {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--sage-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: transparent;
  flex-shrink: 0;
  transition: all .15s ease;
}
.atomic-habit-item.done .atomic-habit-check {
  background: var(--mauve);
  border-color: var(--mauve);
  color: #fff;
}
.atomic-habit-ico { font-size: 22px; line-height: 1; flex-shrink: 0; }
.atomic-habit-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.atomic-habit-meta strong {
  font-size: 13px;
  color: var(--sage);
  font-weight: 600;
}
.atomic-habit-meta small {
  font-size: 11px;
  color: var(--sage-mid);
  opacity: .8;
}
.atomic-habit-item.done .atomic-habit-meta strong { color: var(--mauve-deep); }

.atomic-habits-empty {
  text-align: center;
  font-size: 13px;
  color: var(--sage-mid);
  margin: 0;
  padding: 16px 0 8px;
}
.atomic-habits-setup-btn {
  display: block;
  margin: 10px auto 0;
  padding: 10px 22px;
  background: var(--mauve);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.atomic-habits-setup-btn:hover { background: var(--mauve-deep); }

/* Catálogo no modal */
.habit-catalog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid rgba(75, 89, 71, .1);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.habit-catalog-item.selected {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}
.habit-catalog-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sage-soft);
  border-radius: 5px;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.habit-catalog-item input[type="checkbox"]:checked {
  background: var(--mauve);
  border-color: var(--mauve);
}
.habit-catalog-item input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.habit-catalog-item .ico { font-size: 20px; flex-shrink: 0; }
.habit-catalog-item .meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.habit-catalog-item .meta strong { font-size: 13px; color: var(--sage); }
.habit-catalog-item .meta small { font-size: 11px; color: var(--sage-mid); opacity: .8; }

/* ============================================================
   QUIZ DE ARQUÉTIPO — 6 perguntas + resultado celebrado
   ============================================================ */
.archetype-quiz-modal,
.archetype-result-modal {
  position: fixed;
  inset: 0;
  background: rgba(38, 54, 40, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 96;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  padding: 20px;
}
.archetype-quiz-modal.open,
.archetype-result-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.archetype-quiz-card,
.archetype-result-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(160deg, #fff 0%, var(--sage-tint) 100%);
  border-radius: var(--r-lg, 14px);
  padding: 26px 22px 22px;
  max-height: 88vh;
  overflow-y: auto;
}
.archetype-quiz-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 12px;
}
.archetype-quiz-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--sage);
  line-height: 1.3;
  margin: 0 0 18px;
}
.archetype-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.archetype-quiz-opt {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(75, 89, 71, .1);
  border-radius: 10px;
  padding: 14px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sage);
  cursor: pointer;
  transition: all .15s ease;
}
.archetype-quiz-opt:hover {
  border-color: var(--mauve);
  background: var(--mauve-soft);
  transform: translateY(-1px);
}
.archetype-quiz-skip {
  display: block;
  margin: 18px auto 0;
  background: transparent;
  border: none;
  color: var(--sage-mid);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

/* Resultado do quiz */
.archetype-result-card {
  text-align: center;
  background: linear-gradient(160deg, var(--mauve-soft) 0%, var(--sage-tint) 100%);
}
.archetype-result-ico {
  font-size: 48px;
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.archetype-result-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  font-weight: 500;
  margin-bottom: 6px;
}
.archetype-result-name {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 8px;
  line-height: 1.2;
}
.archetype-result-phrase {
  font-style: italic;
  font-size: 14px;
  color: var(--mauve-deep);
  margin: 0 0 14px;
}
.archetype-result-voice {
  font-size: 13px;
  color: var(--sage-mid);
  line-height: 1.6;
  margin: 0 0 20px;
}
.archetype-result-confirm {
  display: block;
  width: 100%;
  background: var(--mauve);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background .2s ease;
}
.archetype-result-confirm:hover { background: var(--mauve-deep); }
.archetype-result-foot {
  font-size: 11px;
  color: var(--sage-mid);
  margin: 0;
  font-style: italic;
}

/* Display no Perfil */
.archetype-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.archetype-display-empty {
  font-size: 13px;
  color: var(--sage-mid);
  line-height: 1.5;
  margin: 0;
}
.archetype-display-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: linear-gradient(135deg, var(--mauve-soft) 0%, #fff 100%);
  border-radius: 10px;
  border: 1px solid rgba(181, 133, 157, .25);
}
.archetype-display-ico { font-size: 26px; line-height: 1; }
.archetype-display-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.archetype-display-meta strong {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--sage);
  font-weight: 500;
}
.archetype-display-meta small {
  font-size: 11px;
  color: var(--mauve-deep);
  font-style: italic;
}
.archetype-display-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(181, 133, 157, .35);
  color: var(--mauve-deep);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.archetype-display-btn:hover { background: var(--mauve-soft); }

/* ============================================================
   CERIMÔNIA DO MÊS — primeiros 3 dias do mês
   ============================================================ */
.month-ceremony {
  margin: 14px 0 20px;
  padding: 22px 20px 18px;
  background: linear-gradient(135deg, #FFFCEF 0%, var(--mauve-soft) 100%);
  border-radius: var(--r-lg, 14px);
  border: 1px solid rgba(201, 169, 97, .25);
  position: relative;
  overflow: hidden;
}
.month-ceremony::before {
  content: '✨';
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 22px;
  opacity: .55;
}
.month-ceremony-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #B4924F;
  font-weight: 500;
  margin-bottom: 6px;
}
.month-ceremony-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 14px;
  line-height: 1.2;
  text-transform: capitalize;
}
.month-ceremony-title em {
  font-style: italic;
  color: #B4924F;
}
.month-ceremony-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.month-ceremony-list li {
  font-size: 13px;
  color: var(--sage);
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
}
.month-ceremony-list li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--mauve-deep);
  font-weight: 700;
}
.month-ceremony-list strong {
  color: var(--mauve-deep);
  font-weight: 600;
}
.month-ceremony-word {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .55);
  border-left: 2px solid #C9A961;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--sage);
}
.month-ceremony-word em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  color: #B4924F;
}
.month-ceremony-final {
  margin: 0 0 14px;
  font-size: 13px;
  font-style: italic;
  color: var(--sage-mid);
  line-height: 1.5;
}
.month-ceremony-dismiss {
  background: transparent;
  border: 1px solid rgba(75, 89, 71, .18);
  color: var(--sage-mid);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
  display: block;
}
.month-ceremony-dismiss:hover { background: rgba(255, 255, 255, .5); }

/* ============================================================
   ASSINATURA — Sua jornada Verso
   ============================================================ */
.subscription-card {
  background: linear-gradient(160deg, #fff 0%, var(--sage-tint) 100%);
  border-radius: var(--r-lg, 14px);
  padding: 20px 18px 18px;
  border: 1px solid rgba(75, 89, 71, .1);
  margin-top: 10px;
}
.subscription-headline {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 8px;
  line-height: 1.3;
}
.subscription-headline strong {
  font-weight: 600;
  color: var(--mauve-deep);
}
.subscription-sub {
  font-size: 12px;
  color: var(--sage-mid);
  line-height: 1.5;
  margin: 0 0 16px;
}
.subscription-cta {
  display: block;
  width: 100%;
  background: var(--mauve);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background .2s ease;
}
.subscription-cta:hover { background: var(--mauve-deep); }
.subscription-cta:disabled { opacity: .55; cursor: wait; }
.subscription-foot {
  font-size: 11px;
  font-style: italic;
  color: var(--sage-mid);
  margin: 0;
  text-align: center;
}
.subscription-status-label {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 8px;
}
.subscription-status-detail {
  font-size: 13px;
  color: var(--sage-mid);
  line-height: 1.5;
  margin: 0 0 16px;
}
.subscription-pause,
.subscription-resume {
  background: transparent;
  border: 1px solid rgba(75, 89, 71, .25);
  color: var(--sage-mid);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.subscription-pause:hover { background: rgba(75, 89, 71, .06); }
.subscription-resume {
  border-color: var(--mauve);
  color: var(--mauve-deep);
}
.subscription-resume:hover { background: var(--mauve-soft); }

/* Modal de pausa elegante */
.pause-modal {
  position: fixed;
  inset: 0;
  background: rgba(38, 54, 40, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 97;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  padding: 20px;
}
.pause-modal.open { opacity: 1; pointer-events: auto; }
.pause-modal-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, #fff 0%, var(--sage-tint) 100%);
  border-radius: var(--r-lg, 14px);
  padding: 26px 22px 22px;
}
.pause-modal-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  margin: 0 0 12px;
  line-height: 1.3;
}
.pause-modal-text {
  font-size: 13px;
  color: var(--sage-mid);
  line-height: 1.6;
  margin: 0 0 20px;
}
.pause-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pause-modal-keep {
  background: var(--mauve);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pause-modal-keep:hover { background: var(--mauve-deep); }
.pause-modal-confirm, .pause-modal-next {
  background: transparent;
  border: none;
  color: var(--sage-mid);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px;
}

/* Pause steps */
.pause-step { display: none; }
.pause-step.active { display: block; }

.pause-modal-memory {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mauve);
  line-height: 1.5;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(139,90,100,.06);
  border-radius: 10px;
}

.pause-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.pause-reason {
  background: #fff;
  border: 1px solid var(--sage-tint);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--sage);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.pause-reason:hover, .pause-reason.selected {
  border-color: var(--mauve);
  background: rgba(139,90,100,.04);
}

.pause-modal-farewell {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mauve-deep);
  margin: 16px 0 20px;
  line-height: 1.5;
}

.pause-modal-foot {
  font-size: 11px;
  color: var(--sage-mid);
  text-align: center;
  margin: 12px 0 0;
}

/* ── Night vent offer ── */
.night-vent-offer {
  margin-top: 28px;
  text-align: center;
  animation: fadeSlideUp .4s ease both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.night-vent-text {
  font-family: 'Playfair Display', serif;
  font-size: 16px; line-height: 1.6;
  color: var(--ink);
  margin: 0 0 20px;
}
.night-vent-text span {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-mute);
  font-style: normal;
}
.night-vent-actions {
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
}
.night-vent-diary {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  color: #fff;
  background: var(--mauve);
  border: none; border-radius: var(--r-pill);
  padding: 14px 32px; width: 100%;
  cursor: pointer;
  transition: background .2s ease;
}
.night-vent-diary:hover { background: var(--mauve-deep); }
.night-vent-continue {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 400;
  color: var(--ink-mute);
  background: transparent;
  border: none; padding: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Tela contextual — time slots ── */
.time-hidden {
  display: none !important;
}

.missed-checkin {
  text-align: center;
  padding: 20px 16px;
  margin-top: 8px;
}
.missed-checkin-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.missed-checkin-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--mauve);
  background: transparent;
  border: 1px solid var(--mauve-soft);
  border-radius: var(--r-pill);
  padding: 10px 24px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.missed-checkin-btn:hover {
  background: var(--mauve-soft);
  border-color: var(--mauve);
}

/* ── Stripe Welcome Modal ── */
.stripe-welcome-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(38,54,40,.45);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.stripe-welcome-modal.open { opacity: 1; pointer-events: auto; }

.stripe-welcome-card {
  background: var(--bg-soft);
  border-radius: var(--r-xl);
  padding: 40px 32px 36px;
  max-width: 380px; width: 90%;
  text-align: center;
  box-shadow: var(--shadow-card);
  animation: stripeCardIn .5s ease both;
}
@keyframes stripeCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.stripe-welcome-eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 12px;
}

.stripe-welcome-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 600;
  color: var(--sage);
  margin: 0 0 16px;
}

.stripe-welcome-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.7;
  color: var(--ink-mid);
  margin: 0 0 20px;
}

.stripe-welcome-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px; line-height: 1.6;
  color: var(--mauve-deep);
  padding: 16px 20px;
  background: var(--mauve-soft);
  border-radius: var(--r-md);
  margin: 0 0 20px;
}
.stripe-welcome-quote:empty { display: none; }

.stripe-welcome-detail {
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 24px;
}

.stripe-welcome-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 500;
  color: #fff;
  background: var(--mauve);
  border: none; border-radius: var(--r-pill);
  padding: 14px 48px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.stripe-welcome-cta:hover { background: var(--mauve-deep); }
.stripe-welcome-cta:active { transform: scale(.97); }

/* Install prompt — pill discreta acima do nav */
.install-prompt {
  display: none;
  position: fixed;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 6px 6px 14px;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  z-index: 80;
  white-space: nowrap;
  animation: installSlideUp .3s ease;
}
.install-prompt.visible { display: flex; }
@keyframes installSlideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.install-prompt-label {
  font-size: 12px;
  color: var(--ink-mid);
}
.install-prompt-btn {
  background: var(--mauve-deep);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.install-prompt-close {
  background: none;
  border: none;
  color: var(--ink-mute);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

/* Consent checkboxes */
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--sage);
  cursor: pointer;
  line-height: 1.4;
}
.consent-check input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--mauve-deep);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}