#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  min-height: 100dvh;
  width: 100%;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.screen-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size:var(--step-xs); letter-spacing:.09em; color:var(--color-sun); text-transform:uppercase; }
/* grid-auto-flow:column + grid-auto-columns:1fr em vez de repeat(4,1fr) fixo:
   esse nav tinha 4 botoes quando o layout foi escrito: ao entrar o 5o (Loja),
   o numero fixo de colunas sobrava um botao sozinho, quebrando pra uma
   segunda linha desalinhada. Com auto-flow a quantidade de colunas segue a
   quantidade de botoes que existir, sem precisar lembrar de atualizar aqui
   de novo se um 6o item aparecer no futuro. */
.bottom-nav { position:sticky; bottom:12px; z-index:10; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin-top:var(--space-6); padding:8px; background:rgba(10,43,41,.92); backdrop-filter:blur(12px); border:1px solid rgba(234,246,243,.12); border-radius:var(--radius-lg); }
.bottom-nav button { min-width:0; padding:10px 4px; border-radius:12px; color:var(--text-on-dark-dim); background:transparent; font-size:.75rem; }
.bottom-nav button.is-active { color:var(--text-on-dark); background:rgba(234,246,243,.1); }
.bottom-nav button { position:relative; }
.nav-badge { position:absolute; top:2px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--color-coral); color:#fff; font-size:.62rem; line-height:16px; font-weight:700; }
.history-list { display:flex; flex-direction:column; gap:8px; margin-bottom:var(--space-6); }
.history-day { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px; border-radius:var(--radius-md); background:rgba(234,246,243,.07); color:var(--text-on-dark); text-align:left; }
.history-day span { display:flex; flex-direction:column; gap:4px; }
.history-day small { color:var(--text-on-dark-dim); }
.history-summary, .pacus-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:var(--space-5) 0; }
.history-summary > div, .pacus-stats > div { display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:var(--radius-md); background:rgba(234,246,243,.07); }
.history-summary span, .pacus-stats span { font-size:.75rem; color:var(--text-on-dark-dim); }
.task-history { display:flex; flex-direction:column; gap:6px; }
.history-task { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:12px; border-radius:12px; background:rgba(234,246,243,.06); }
.history-task.pending { opacity:.7; }
.points-hero { display:flex; flex-direction:column; align-items:center; padding:28px; margin-bottom:var(--space-6); border-radius:var(--radius-lg); background:rgba(255,200,87,.1); }
.points-hero strong { font:600 3rem var(--font-display); color:var(--color-sun); }
.points-hero span { color:var(--text-on-dark-dim); }
.points-hero small { margin-top:8px; }

/* Autonomia e planejamento (2026-09-10, ver docs/ESTADO_ATUAL.md), item 2:
   lembrete gentil, nunca um bloqueio -- por isso fica acima do game-timer, não
   dentro dele nem desabilitando nenhum botão. */
.minimum-goal-nudge { margin:0 0 var(--space-3); padding:var(--space-3); border-radius:var(--radius-md,12px); background:rgba(255,200,87,.1); color:var(--text-on-dark-dim); font-size:var(--step-sm); }
.minimum-goal-nudge strong { color:var(--color-sun); }

/* Autonomia e planejamento (2026-09-10, ver docs/ESTADO_ATUAL.md), item 6. */
.autonomy-report { margin-bottom:var(--space-6); padding:var(--space-4); border-radius:var(--radius-lg); background:rgba(234,246,243,.06); }
.autonomy-report h2 { margin-top:0; }
.autonomy-report__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.autonomy-report__list li { display:flex; align-items:center; gap:8px; font-size:var(--step-sm); }
.autonomy-report__trend { margin:var(--space-3) 0 0; color:var(--text-on-dark-dim); font-size:var(--step-xs,.8rem); font-style:italic; }
@media (max-width:360px) { .bottom-nav button { font-size:.68rem; } .history-summary, .pacus-stats { grid-template-columns:1fr; } }