:root{
  --bg:#f6f1e7; --card:#fffdf8; --ink:#1d2433; --muted:#6b6f7b; --line:#e4dccb;
  --azul:#1f4e8c; --azul-2:#e3ecf8; --terra:#c4553c; --terra-2:#fbe7e1; --verde:#2f7d5b; --verde-2:#e2f2ea;
  --amarelo:#a86b00; --amarelo-2:#fdf1d8;
  --raio:14px; --sombra:0 1px 2px rgba(29,36,51,.06),0 4px 14px rgba(29,36,51,.06);
  --nav-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#11151d; --card:#1a2030; --ink:#e9ebf1; --muted:#9aa0ae; --line:#2b3346;
    --azul:#86aef0; --azul-2:#1d2a44; --terra:#ef8a71; --terra-2:#3a2421; --verde:#6cc59b; --verde-2:#173126;
    --amarelo:#f0c36a; --amarelo-2:#3a2f17;
    --sombra:none; color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%; padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px)}
a{color:var(--azul)}
button{font:inherit;color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.05rem}
.muted{color:var(--muted)} .pequeno{font-size:.85rem}
.erro{color:var(--terra);font-weight:600}
main{max-width:720px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) 16px 16px}
.carregando{padding:40vh 0;text-align:center;color:var(--muted)}

/* cabeçalho de página */
.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:4px 0 14px}
.topo .eyebrow{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);font-weight:700}
.relogios{font-size:.82rem;color:var(--muted);text-align:right;white-space:nowrap}
.relogios b{color:var(--ink);font-variant-numeric:tabular-nums}

/* cartões */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:14px 16px;margin:0 0 12px;box-shadow:var(--sombra)}
.card h3{margin-bottom:.2em}
.card.destaque{border-color:var(--azul);background:linear-gradient(180deg,var(--azul-2),var(--card) 70%)}
.card.alerta{border-color:var(--terra);background:linear-gradient(180deg,var(--terra-2),var(--card) 70%)}
.contagem{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--azul)}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--azul-2);color:var(--azul);font-size:.8rem;font-weight:600;margin:2px 4px 2px 0}
.chip.terra{background:var(--terra-2);color:var(--terra)} .chip.verde{background:var(--verde-2);color:var(--verde)}

/* linha do tempo */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:0}
.tl .h{font-weight:700;font-variant-numeric:tabular-nums;color:var(--azul);font-size:.95rem}
.tl .custo{display:block;margin-top:4px;font-size:.82rem;color:var(--muted)}
.tl li.passou{opacity:.5}
.tl li.agora{background:var(--azul-2);margin:0 -16px;padding:10px 16px;border-radius:10px;border-top-color:transparent}
.tl li.agora .h::after{content:"próximo";display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--terra)}
.tl li.alerta .h{color:var(--terra)}
.tl p{margin:0}

/* conteúdo vindo do markdown */
.md p{margin:.4em 0} .md ul,.md ol{padding-left:1.2em;margin:.4em 0} .md li{margin:.2em 0}
.md blockquote{margin:.5em 0;padding:.5em .8em;border-left:3px solid var(--terra);background:var(--terra-2);border-radius:0 8px 8px 0}
.md blockquote p{margin:.2em 0}
.md table{border-collapse:collapse;width:100%;font-size:.88rem;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.md h3{margin-top:1em}
.doclink{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--azul-2);text-decoration:none;font-weight:600;font-size:.88rem;margin:2px 0}

/* listas de navegação */
.lista{list-style:none;padding:0;margin:0}
.lista a,.lista button.item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 8px;color:var(--ink);text-decoration:none;cursor:pointer}
.lista .seta{color:var(--muted)}
details.dia{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);margin:0 0 10px;box-shadow:var(--sombra)}
details.dia>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;justify-content:space-between;gap:10px;align-items:center}
details.dia>summary::-webkit-details-marker{display:none}
details.dia>summary .data{font-weight:800;color:var(--azul);font-variant-numeric:tabular-nums}
details.dia[open]>summary{border-bottom:1px solid var(--line)}
details.dia .corpo{padding:4px 16px 14px}
.hoje-marca{font-size:.7rem;background:var(--terra);color:#fff;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}

/* carteira */
.campos{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 0;font-size:.92rem}
.campos dt{color:var(--muted)} .campos dd{margin:0}
.campos strong{cursor:copy;background:var(--amarelo-2);padding:0 4px;border-radius:4px}
.docs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.btn-doc{border:1px solid var(--azul);background:transparent;color:var(--azul);border-radius:10px;padding:6px 12px;font-weight:600;cursor:pointer}

/* formulários e botões */
label{display:block;font-size:.85rem;color:var(--muted);margin:10px 0 4px}
label.check{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:.95rem}
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--azul)}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-primario{display:block;width:100%;margin-top:14px;padding:13px;border:0;border-radius:12px;background:var(--azul);color:#fff;font-weight:700;cursor:pointer}
@media (prefers-color-scheme:dark){.btn-primario{color:#0f1420}}
.btn-sec{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 12px;cursor:pointer}
.btn-mini{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px 6px}

/* gastos */
.barra{height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin:8px 0}
.barra>i{display:block;height:100%;background:var(--verde)}
.barra.estourou>i{background:var(--terra)}
.num{font-variant-numeric:tabular-nums}
.gasto{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.gasto:first-child{border-top:0}

/* checklist e desafios */
.check-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.check-item:first-child{border-top:0}
.check-item input{margin-top:2px;flex:none}
.check-item.feito .t{text-decoration:line-through;color:var(--muted)}

/* selos */
.selos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.selo{aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-size:.78rem;font-weight:700;cursor:pointer;background:transparent;color:var(--muted);padding:6px}
.selo.ok{border:3px double var(--terra);color:var(--terra);transform:rotate(-8deg);background:var(--terra-2)}
.selo small{font-weight:500;font-size:.68rem}

/* tabela de frases */
.frase{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-top:1px solid var(--line)}
.frase:first-child{border-top:0}
.frase b{font-size:1.02rem} .frase .pr{color:var(--terra);font-size:.88rem} .frase .sig{color:var(--muted);font-size:.9rem}

/* abas */
#abas{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:10}
#abas a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:600}
#abas a span{font-size:1.25rem;filter:grayscale(1);opacity:.75}
#abas a.ativa{color:var(--azul)} #abas a.ativa span{filter:none;opacity:1}

/* login */
#login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.login-box{width:100%;max-width:360px;text-align:center}
.login-box form{text-align:left;margin:18px 0}
.login-azulejo{width:84px;height:84px;margin:0 auto 14px;border-radius:18px;
  background:
   radial-gradient(circle at 50% 50%,var(--card) 0 18%,transparent 19%),
   conic-gradient(from 45deg,var(--azul) 0 25%,var(--card) 0 50%,var(--azul) 0 75%,var(--card) 0) 0 0/42px 42px;
  border:3px solid var(--azul)}

/* visor de PDF */
#visor{position:fixed;inset:0;background:#2a2f3a;z-index:30;display:flex;flex-direction:column}
.visor-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;background:#1b1f27;color:#fff}
.visor-topo strong{flex:1;text-align:center;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-topo button{background:#ffffff1f;border:0;color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
#visor-paginas{flex:1;overflow:auto;padding:10px;-webkit-overflow-scrolling:touch}
#visor-paginas canvas{display:block;width:100%;height:auto;margin:0 auto 10px;background:#fff;box-shadow:0 2px 10px #0006}

/* avisos */
.faixa{position:sticky;top:0;z-index:15;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:var(--azul);color:#fff}
.faixa button{background:#fff;color:#1f4e8c;border:0;border-radius:8px;padding:6px 12px;font-weight:700}
#aviso{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:9px 14px;border-radius:10px;font-size:.9rem;z-index:40;max-width:90vw}

.card.festa{border-color:var(--terra);background:linear-gradient(135deg,var(--terra-2),var(--amarelo-2));font-weight:700;font-size:1.05rem}
.card.festa p{margin:0}
.festa-txt{font-weight:700;color:var(--terra)}
