/* Natto — recursos e telas: fundo dinâmico, menu do computador, importar, parcelas, topo do celular, guia, ajuda, previsão, céu, relógio, faturas, aceite */
/* ---------- Fundo dinâmico ---------- */
#fundo-dinamico{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000;pointer-events:none}
#fundo-dinamico video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
#fundo-dinamico video.on{opacity:1}
#fundo-dinamico .fd-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 35%,rgba(0,0,0,.6) 100%)}
html[data-modo="l"] #fundo-dinamico .fd-veu{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.35) 35%,rgba(255,255,255,.6) 100%)}
html[data-fundo-temp="quente"] #fundo-dinamico .fd-veu{box-shadow:inset 0 0 0 100vmax rgba(255,120,30,.10)}
html[data-fundo-temp="frio"] #fundo-dinamico .fd-veu{box-shadow:inset 0 0 0 100vmax rgba(60,140,255,.12)}
html[data-fundo="1"],html[data-fundo="1"] body{background:transparent!important}
html[data-fundo="1"] .card{backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
html[data-fundo="1"] .topo{text-shadow:0 1px 8px rgba(0,0,0,.35)}
.fd-status{margin-top:10px;font-size:13px;color:var(--texto2)}
.agora{margin-top:4px;font-size:13px;color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agora b{color:var(--texto);font-variant-numeric:tabular-nums}
html[data-fundo="1"] .topo{background:color-mix(in srgb,var(--bg) 45%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none}

/* Computador: cartões da mesma linha com a mesma altura, sem buracos */
@media (min-width:900px){ .pagina{align-items:stretch;grid-auto-flow:row} .pagina>.card{height:100%} }

/* ---------- Computador ≥1024px: menu lateral ---------- */
.so-pc{display:none!important}
@media (min-width:1024px){
  #tela-app{padding-left:232px}
  .abas{left:12px;right:auto;top:12px;bottom:12px;width:208px;max-width:none;margin:0;flex-direction:column;justify-content:flex-start;gap:4px;padding:16px 10px;border-radius:20px}
  .abas .so-pc{display:flex!important}
  .abas-logo{align-items:center;gap:10px;padding:4px 10px 18px;font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--texto)}
  .abas-logo .logo-tema{width:34px;height:34px;flex:none;box-shadow:0 0 18px color-mix(in srgb,var(--brilho) 40%,transparent)}
  .abas button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;font-size:14px;padding:11px 14px;border-radius:12px}
  .abas button:hover{background:color-mix(in srgb,var(--destaque) 9%,transparent);color:var(--texto)}
  .abas .abas-cfg{margin-top:auto}
  #btn-config{display:none}
}

/* ---------- Computador ≥1024px: topo limpo + "Fale ou digite" no topo ---------- */
@media (min-width:1024px){
  .topo{align-items:center;padding-top:18px;padding-bottom:16px;background:transparent;box-shadow:none;border-bottom:1px solid var(--borda)}
  .topo .selo{display:block;font-size:10.5px;opacity:.85;margin-bottom:2px}
  .titulo{font-size:30px;margin-top:0;letter-spacing:-.01em}
  .sub0,.agora{display:inline;font-size:13px;margin:0}
  .sub0::after{content:" · ";color:var(--texto2)}
  .topo-txt{display:block;line-height:1.5}
  .topo-txt .titulo{display:block}
  #falar-barra{position:fixed;bottom:18px;top:auto;left:232px;right:0;width:min(620px,calc(100% - 296px));max-width:none;margin:0 auto;padding:7px 7px 7px 8px;gap:8px;border-radius:999px;background:color-mix(in srgb,var(--card-solido) 80%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 0 1px var(--borda),0 12px 34px rgba(0,0,0,.35)}
  .frase input{background:transparent;border:0}
  .topo-ctl{align-self:center}
  .frase input{box-shadow:none;border-radius:999px;padding-left:18px}
  .mic{width:44px;height:44px;box-shadow:0 0 0 3px color-mix(in srgb,var(--destaque) 18%,transparent)}
  .mic svg{width:20px;height:20px}
  main{padding-top:20px;padding-bottom:110px}
}
/* Topo como cartão arredondado, no mesmo padrão dos outros (≥1024px) */
@media (min-width:1024px){
  .topo,html[data-fundo="1"] .topo{position:relative;top:auto;margin:12px 32px 0;max-width:none;border:0;border-radius:var(--raio);background:color-mix(in srgb,var(--card-solido) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--borda);padding:16px 24px}
}

/* Importar extrato */
.imp-info{font-size:13px;color:var(--texto2)}
.imp-lista{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow:auto;margin:0 -4px;padding:0 4px}
.imp-linha{display:grid;grid-template-columns:auto 42px 1fr auto auto;align-items:center;gap:8px;padding:8px 6px;border-radius:10px;font-size:13px}
.imp-linha:hover{background:color-mix(in srgb,var(--destaque) 7%,transparent)}
.imp-linha.rep{opacity:.55}
.imp-d{color:var(--texto2);font-variant-numeric:tabular-nums}
.imp-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-t small{color:var(--texto2);font-size:11px}
.imp-linha select{font-size:12px;padding:4px 6px;max-width:130px}
.imp-ent{font-size:12px;color:var(--texto2)}
.imp-v{font-variant-numeric:tabular-nums;text-align:right}.imp-v.pos{color:#4ade80}
@media (min-width:700px){.modal{align-items:center}.modal-box:has(.imp-lista){max-width:720px;border-radius:24px}}
@media (max-width:520px){.imp-linha{grid-template-columns:auto 38px 1fr auto;}.imp-linha select{grid-column:3;max-width:none}.imp-linha .imp-ent{grid-column:3}.imp-v{grid-row:1;grid-column:4}}
/* Computador: gráficos não esticam nem aumentam a letra em cartões largos */
@media (min-width:1024px){ .pagina>.cheio .graf svg{max-height:240px} }
/* Limites: degradê verde→vermelho até o limite; excedente vermelho */
.bc-fill.lim{background:linear-gradient(90deg,#22c55e 0%,#eab308 60%,#ef4444 100%);background-repeat:no-repeat}
.bc-fundo:has(.lim-marca){position:relative;overflow:visible}
.lim-marca{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--texto);border-radius:2px;opacity:.85}
/* Botões de opção (trocar gráficos/layout/tema): selecionado em degradê do tema */
.seg{background:linear-gradient(90deg,color-mix(in srgb,var(--destaque) 14%,var(--suave)),color-mix(in srgb,var(--brilho) 14%,var(--suave)))}
.seg button.sel,.chips button.sel{background:linear-gradient(135deg,var(--destaque),var(--brilho));color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--brilho) 35%,transparent)}
.seg button:not(.sel):hover{color:var(--texto)}

/* Parcelas */
.parc{display:flex;flex-direction:column;gap:10px}
.parc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.parc-top small{display:block;margin-top:2px}
.parc-n{font-size:22px;font-weight:800;color:var(--destaque);font-variant-numeric:tabular-nums}
.parc-bolas{display:flex;flex-wrap:wrap;gap:5px}
.parc-bolas i{width:14px;height:14px;border-radius:50%;background:var(--suave)}
.parc-bolas i.paga{background:linear-gradient(135deg,var(--destaque),var(--brilho))}
.parc-bolas i.agora{box-shadow:0 0 0 2px var(--card-solido),0 0 0 4px var(--destaque)}
.parc-quit{display:grid;gap:12px;margin-top:12px}
@media (min-width:900px){.parc-quit{grid-template-columns:1fr 1fr}}
details.card summary{cursor:pointer}
@media (min-width:1024px){
  .sub0::after{content:none}
  .topo-ctl .agora{display:block;text-align:right;margin-top:2px}
}
.mic{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Celular: barra de baixo com 6 abas; "Mais" guarda Anual, Parcelas e Combustível */
@media (min-width:1024px){ .so-cel{display:none!important} }
.mais-lista{display:flex;flex-direction:column;gap:8px}
.mais-op{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--borda);background:transparent;color:var(--texto);text-align:left;cursor:pointer}
.mais-op svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--destaque);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mais-op span{display:flex;flex-direction:column;gap:2px}.mais-op small{color:var(--texto2);font-size:12.5px}
/* Celular com fundo dinâmico: topo mais sólido para o slogan e o título ficarem legíveis */
@media (max-width:1023px){
  html[data-fundo="1"] .topo{background:color-mix(in srgb,var(--bg) 82%,transparent);box-shadow:0 10px 18px -8px color-mix(in srgb,var(--bg) 80%,transparent)}
  html[data-fundo="1"] .topo .selo{color:color-mix(in srgb,var(--texto) 70%,transparent)}
}
@media (max-width:1023px){
  .abas [data-aba="inicio"]{order:1}.abas [data-aba="agenda"]{order:2}.abas [data-aba="combustivel"]{order:3}
  .abas [data-aba="pagamentos"]{order:4}.abas #btn-mais{order:5}.abas [data-aba="perfil"]{order:6}
}
.parc-achou{border:1px solid color-mix(in srgb,var(--destaque) 45%,transparent)}
.parc-achou .btn{margin-top:10px}

/* Lista de opções (Configurações) — estilo limpo, linhas finas */
.opcoes{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--borda) inset;margin-top:4px}
.opcoes button{display:flex;align-items:center;gap:10px;width:100%;padding:15px 16px;background:none;border:0;border-bottom:1px solid var(--borda);color:var(--texto);font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:background .15s}
.opcoes button:last-child{border-bottom:0}
.opcoes button[hidden]{display:none}
.opcoes button span{flex:1}
.opcoes button small{font-size:13px;opacity:.55;font-weight:400}
.opcoes button::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.35;flex:none}
.opcoes button:hover{background:rgba(255,255,255,.04)}
.opcoes button:active{background:rgba(255,255,255,.08)}

/* Galeria de fundos (Configurações) */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
@media (min-width:1024px){.galeria{grid-template-columns:repeat(5,1fr)}}
.galeria button{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:#111;cursor:pointer;box-shadow:0 0 0 1px var(--borda)}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.galeria button:hover img{transform:scale(1.05)}
.galeria span{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));text-align:left}
.galeria button.sel{box-shadow:0 0 0 2px var(--destaque)}
.galeria button.sel::after{content:'✓';position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--destaque);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}

/* Categorias: toque para ver e corrigir os lançamentos */
.tile-cat{width:100%;padding:8px;margin:-8px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;align-items:center}
.tile-cat:hover{background:rgba(255,255,255,.05)}
.tile-cat .lapis{margin-left:auto;flex:none;opacity:.45;display:grid;place-items:center}
.tile-cat .lapis svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lista-cat{max-height:55vh;overflow:auto;margin:10px 0}

/* Minhas categorias */
.mc-linha{display:flex;align-items:center;border-bottom:1px solid var(--borda)}
.mc-linha .ic{width:30px;height:30px;margin-left:14px;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px var(--borda) inset}
.mc-linha .ic svg,.mc-x svg,.mc-icones svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opcoes .mc-linha button{border-bottom:0}
.opcoes .mc-linha button small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.opcoes .mc-x{width:auto;padding:15px 16px;opacity:.55}
.opcoes .mc-x::after{display:none}
.opcoes .mc-nova span{color:var(--destaque);font-weight:600}
.mc-icones{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
.mc-icones button{aspect-ratio:1;border-radius:12px;border:0;background:rgba(255,255,255,.05);color:var(--texto);display:grid;place-items:center;cursor:pointer}
.mc-icones button.sel{box-shadow:0 0 0 2px var(--destaque);background:rgba(255,255,255,.1)}
.mc-linha.oculta{opacity:.45}

/* Topo no celular: faixa única, sólida, sem degradê cinza→preto */
@media (max-width:1023px){
  html,html[data-fundo="1"]{background:var(--bg)!important}
  .topo,html[data-fundo="1"] .topo{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:none;border-bottom:1px solid var(--borda);text-shadow:none}
  .topo .selo,html[data-fundo="1"] .topo .selo{color:var(--texto);opacity:1;font-size:13px;font-weight:800;letter-spacing:.28em;line-height:1;text-shadow:none;-webkit-font-smoothing:antialiased;white-space:nowrap}
  .agora{white-space:normal}
}
@media (max-width:520px){
  .selo-mais{display:none}
  #sel-mes{max-width:none}
}

/* Topo do celular: logo Natto em destaque + letreiro passando (data, hora, clima, gasto) */
.letreiro,.selo-ic{display:none}
@media (max-width:1023px){
  .topo{flex-wrap:wrap;align-items:center;row-gap:10px}
  .topo .titulo,.topo .sub0,.topo .agora{display:none}
  .topo .selo,html[data-fundo="1"] .topo .selo{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:.22em;font-weight:800}
  .selo-ic{display:block;width:34px;height:34px;border-radius:10px}
  .letreiro{display:block;flex-basis:100%;overflow:hidden;border-top:1px solid var(--borda);padding-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .letreiro-trilho{display:flex;width:max-content;animation:letreiro 32s linear infinite;font-size:13px;color:var(--texto2);white-space:nowrap}
  .letreiro-trilho b{color:var(--texto);font-variant-numeric:tabular-nums}
  .letreiro-trilho i{font-style:normal;margin:0 14px;opacity:.5}
}
@keyframes letreiro{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.letreiro-trilho{animation-duration:90s}}

/* Tela "Instalar na tela de início" */
.inst-abas{display:flex;gap:6px;margin:12px 0;padding:4px;border-radius:14px;background:rgba(255,255,255,.06)}
.inst-abas button{flex:1;padding:9px;border:0;border-radius:10px;background:none;color:var(--texto2);font:inherit;font-weight:600;cursor:pointer}
.inst-abas button.on{background:var(--destaque);color:#fff}
.inst-passo{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--borda)}
.inst-passo:last-child{border-bottom:0}
.inst-img{flex:none}
.inst-passo h4{font-size:15px;margin:4px 0 2px}
.inst-passo p{font-size:13.5px;color:var(--texto2);line-height:1.45}
.inst-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--destaque);color:#fff;font-size:12px}

.inst-destaque{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;font:inherit;color:#fff;border:0;background:linear-gradient(135deg,var(--destaque),color-mix(in srgb,var(--destaque) 55%,#000))!important;box-shadow:0 8px 24px -10px var(--destaque)}
.inst-destaque.ok{background:color-mix(in srgb,var(--destaque) 18%,transparent)!important;color:var(--texto);box-shadow:none}
.inst-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);flex:none}
.inst-tx{flex:1;display:flex;flex-direction:column;gap:2px}.inst-tx b{font-size:16px}.inst-tx small{font-size:13px;opacity:.85}
.inst-seta{font-size:26px;opacity:.8}
.gal-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--borda);background:rgba(255,255,255,.04);color:var(--texto);font:inherit;font-size:14px;cursor:pointer}
.gal-toggle span:last-child{color:var(--destaque);font-weight:600}

/* Celular: slogan numa linha própria, embaixo do Natto, alinhado com as letras */
.selo-mais i{font-style:normal}
.slogan{display:none}
@media (max-width:1023px){
  .slogan{display:block;flex-basis:100%;margin:-9px 0 0 0;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--texto2);opacity:.85}
}

/* Botão "Baixar app" no topo */
.icone-btn.baixar{width:auto;padding:0 10px;gap:5px;display:flex;align-items:center;color:var(--destaque);border-color:color-mix(in srgb,var(--destaque) 55%,transparent);font-size:12px;font-weight:600;animation:baixarBrilho 2.4s ease-in-out infinite}
.icone-btn.baixar[hidden]{display:none}
@keyframes baixarBrilho{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--destaque) 45%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
/* Guia do primeiro acesso */
.guia{position:fixed;inset:0;z-index:40;animation:guiaEntra .3s ease}
.guia.sai{opacity:0;transition:opacity .25s}
.guia-furo{position:fixed;box-shadow:0 0 0 9999px rgba(0,0,0,.62),0 0 22px 4px color-mix(in srgb,var(--destaque) 60%,transparent);border:2px solid var(--destaque);transition:all .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.guia-furo.pulsa{animation:guiaPulsa 1.6s ease-in-out infinite}
@keyframes guiaPulsa{0%,100%{outline:0 solid color-mix(in srgb,var(--destaque) 50%,transparent)}50%{outline:8px solid transparent}}
.guia-card{position:fixed;left:16px;right:16px;max-width:420px;margin:0 auto;background:var(--card-solido);border:1px solid var(--borda);border-radius:20px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.guia-card.entra{animation:guiaCard .35s cubic-bezier(.2,.8,.2,1)}
.guia-card h4{font-size:18px;margin:8px 0 6px}.guia-card p{color:var(--texto2);line-height:1.45;margin:0 0 14px}
.guia-pontos{display:flex;gap:5px}.guia-pontos i{width:6px;height:6px;border-radius:3px;background:var(--borda);transition:all .3s}.guia-pontos i.on{width:18px;background:var(--destaque)}
.guia-bts{display:flex;gap:10px}.guia-bts .btn{flex:1}
@keyframes guiaEntra{from{opacity:0}}@keyframes guiaCard{from{opacity:0;transform:translateY(12px) scale(.97)}}
/* Página Ajuda */
.aj-bts{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.aj-bts .btn{flex:1;min-width:140px}
.aj-busca{width:100%;margin-top:4px}
.aj-sec summary{cursor:pointer;padding:2px 0}
.aj-item{padding:10px 0;border-top:1px solid var(--borda)}.aj-item:first-of-type{margin-top:8px}.aj-item p{color:var(--texto2);margin:3px 0 0;line-height:1.4}
.aj-item{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--borda);color:inherit;font:inherit;cursor:pointer;position:relative;padding-right:22px}
.aj-item:active{background:var(--suave)}.aj-seta{position:absolute;right:4px;top:12px;color:var(--texto2)}
.aj-item[data-ajabre] p{display:none}.aj-item[data-ajabre].aberto p{display:block}.aj-item[data-ajabre].aberto .aj-seta{transform:rotate(90deg)}
.aj-item small{display:block;color:var(--destaque);margin-top:2px}
/* Item apresentado no guia: fica nítido e iluminado acima do escurecido */
.guia-alvo{filter:brightness(1.35) saturate(1.2);opacity:1!important}
/* ⚙️: quadros que abrem com um toque */
.card.dobra>h3{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin:0;user-select:none}
.card.dobra>h3:after{content:"›";font-size:22px;line-height:1;color:var(--texto2);transition:transform .25s}
.card.dobra.aberto>h3:after{transform:rotate(90deg)}
.card.dobra:not(.aberto)>:not(h3){display:none!important}
.card.dobra.aberto>h3{margin-bottom:6px}
.ass-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--borda)}
.ass-linha div{display:flex;flex-direction:column}.ass-linha small{color:var(--texto2);font-size:12.5px}
.ass-linha.fim{opacity:.55}

.ordem-cat{display:flex;gap:6px;overflow-x:auto;margin:8px 0 12px;scrollbar-width:none}
.ordem-cat::-webkit-scrollbar{display:none}
.ordem-cat button{flex:none;padding:7px 12px;border-radius:999px;border:1px solid var(--borda);background:none;color:var(--texto2);font:inherit;font-size:13px;cursor:pointer}
.ordem-cat button.on{background:var(--destaque);border-color:var(--destaque);color:#fff}

/* "assist" pequeno junto do Natto */
.selo-txt{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.selo .assist{font-size:.42em;font-weight:600;letter-spacing:.18em;opacity:.55;text-transform:lowercase;margin-top:3px}
.login-assist{font-size:11px;font-weight:500;letter-spacing:.6em;margin:6px 0 0 .6em;opacity:.55}
/* Celular: Natto no tamanho original; o logo cresce e vai do topo do N até a base do assist */
@media (max-width:1023px){
  .topo .selo,html[data-fundo="1"] .topo .selo{align-items:center;gap:11px}
  .selo-ic{width:42px;height:42px;margin:-2px 0} /* a imagem tem uma borda transparente: 42 = 38 visíveis */
  .topo .selo-txt{height:38px;justify-content:space-between;gap:0}
  .topo .neon-n,.topo .selo .assist{line-height:.727;margin:0}
  .topo .selo .assist{font-size:11px;padding-left:.06em}
  .topo .neon-n{margin-top:3px}
}

/* Previsão do tempo (tela cheia) */
#previsao{position:fixed;inset:0;z-index:200;overflow-y:auto;color:#fff;font-family:Inter,system-ui,sans-serif;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 24px);-webkit-overflow-scrolling:touch}
#previsao[hidden]{display:none}
.pv-fechar{position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:14px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:16px;z-index:2}
.pv-corpo{max-width:560px;margin:0 auto}
.pv-aviso{margin-top:40vh;text-align:center;opacity:.9}
.pv-topo{text-align:center;margin:28px 0 22px;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.pv-topo small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.pv-topo h2{font-size:32px;font-weight:500;margin:2px 0 0}
.pv-temp{font-size:88px;font-weight:200;line-height:1;margin:2px 0 4px 18px}
.pv-topo p{margin:2px 0;font-size:18px;font-weight:500}
.pv-card{background:rgba(20,30,50,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;padding:12px 14px;margin-bottom:12px}
.pv-card h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin:0 0 8px;font-weight:600}
.pv-horas{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.pv-h{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:52px;font-size:15px}
.pv-sol{min-width:92px}.pv-sol b:last-child{font-size:13px;white-space:nowrap}
.pv-ic{font-size:24px;line-height:1}
.pv-h small,.pv-dic small{color:#8fd3ff;font-size:12px;font-weight:600}
.pv-d{display:grid;grid-template-columns:52px 44px 34px 1fr 38px;align-items:center;gap:8px;padding:10px 0;border-top:1px solid rgba(255,255,255,.15);font-size:17px}
.pv-d:first-of-type{border-top:0}
.pv-dic{display:flex;flex-direction:column;align-items:center;font-size:20px;line-height:1.1}
.pv-min{opacity:.6;text-align:right}.pv-max{text-align:right}
.pv-barra{position:relative;height:5px;border-radius:3px;background:rgba(0,0,0,.25)}
.pv-barra i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#8fd3c8,#f5c84b,#f08a3c)}
.pv-barra .pv-ponto{width:7px;height:7px;top:-1px;margin-left:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.pv-fonte{text-align:center;font-size:11px;opacity:.6}

/* Céu animado (Dinâmico com tempo) */
#fundo-dinamico .fd-ceu{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
#fundo-dinamico .fd-ceu.on{opacity:1}
#fundo-dinamico.ceu .fd-veu{background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.12) 35%,rgba(0,0,0,.40) 100%)}
html[data-modo="l"] #fundo-dinamico.ceu .fd-veu{background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.12) 35%,rgba(255,255,255,.40) 100%)}

/* Céu animado também atrás da previsão; gotinhas no "vidro" dos cartões quando chove */
#previsao .fd-ceu{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .8s ease}
#previsao .fd-ceu.on{opacity:1}
#previsao .pv-corpo,#previsao .pv-fechar{position:relative;z-index:1}
#previsao .pv-fechar{position:fixed}
#previsao.molhado .pv-card{background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.35) 0 1.5px,transparent 2.5px),radial-gradient(circle at 63% 9%,rgba(255,255,255,.3) 0 1px,transparent 2px),radial-gradient(circle at 86% 41%,rgba(255,255,255,.35) 0 2px,transparent 3px),radial-gradient(circle at 34% 57%,rgba(255,255,255,.25) 0 1px,transparent 2px),radial-gradient(circle at 74% 78%,rgba(255,255,255,.3) 0 1.5px,transparent 2.5px),radial-gradient(circle at 21% 88%,rgba(255,255,255,.3) 0 1px,transparent 2px);background-size:140px 120px}
#previsao .pv-vidro{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
#previsao.molhado .pv-card{background-image:none}

/* Relógio: hora grande + Timer, Cronômetro e Alarme */
.rl-hora{font-size:54px;font-weight:300;text-align:center;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:4px}
.rl-data{text-align:center;font-size:13px;opacity:.7;margin-bottom:14px}
.rl-abas{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:rgba(127,127,127,.15);margin-bottom:14px}
.rl-abas button{border:0;background:none;color:inherit;padding:9px 0;border-radius:9px;font:inherit;font-size:14px;font-weight:600;opacity:.7}
.rl-abas button.sel{background:var(--cartao,rgba(255,255,255,.12));opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.rl-visor{font-size:44px;font-weight:300;text-align:center;font-variant-numeric:tabular-nums;margin:4px 0 12px}
.rl-rapidos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rl-rapidos .btn{padding:10px 0}
.rl-livre{display:flex;gap:8px;margin-top:10px;align-items:stretch}.rl-livre input{flex:1;min-width:0;font-size:16px}
.rl-livre .btn{flex:none;width:auto;margin:0;padding:0 22px}
.rl-livre input[type=time]{font-size:30px;font-weight:300;text-align:center;padding:8px 10px;min-height:58px;font-variant-numeric:tabular-nums}
.rl-acoes{display:flex;gap:8px;justify-content:center}
.rl-voltas,.rl-alarmes{list-style:none;padding:0;margin:12px 0 0;max-height:180px;overflow-y:auto}
.rl-voltas li,.rl-alarmes li{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-top:1px solid rgba(127,127,127,.2);font-variant-numeric:tabular-nums}
.rl-alarmes b{font-size:26px;font-weight:400}.rl-alarmes li.off b{opacity:.4}
.rl-alarmes span{display:flex;gap:6px}.rl-alarmes .btn{padding:6px 10px;font-size:13px}
.rl-nota{text-align:center;margin:12px 0 0;font-size:12px}

/* Botão verde "Adicionar receita" na barra de falar */
.btn-receita{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(135deg,#16a34a,#4ade80);color:#fff;display:grid;place-items:center;position:relative;cursor:pointer;box-shadow:0 0 0 4px rgba(34,197,94,.25),0 8px 24px rgba(74,222,128,.45)}
.btn-receita:active{transform:scale(.94)}
.btn-receita{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none} /* segurar = microfone */
.btn-receita.ouvindo{animation:pulsaVerde 1.1s infinite}
@keyframes pulsaVerde{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}100%{box-shadow:0 0 0 22px transparent}}
@media (min-width:1024px){.btn-receita{width:44px;height:44px;box-shadow:0 0 0 3px rgba(34,197,94,.18)}.btn-receita svg{top:5px}.btn-receita b{bottom:6px}}
.btn-receita svg{width:17px;height:17px;position:absolute;top:8px}
.btn-receita b{font-size:12px;font-weight:800;position:absolute;bottom:9px;letter-spacing:.02em}
.rc-origens{margin-top:6px}.rc-origens .btn{width:auto;padding:7px 12px;font-size:13px;margin:0}
.rc-origens .btn.sel{background:#16a34a;color:#fff;border-color:transparent}

/* Letreiro arrastável: o movimento é feito pelo app */
.letreiro{touch-action:pan-y}
.letreiro-trilho.js{animation:none!important;will-change:transform}

/* Computador: o mesmo letreiro do celular embaixo do título (hora/clima saem do canto, pois já passam nele) */
@media (min-width:1024px){
  .topo{flex-wrap:wrap;row-gap:12px}
  .topo .agora,.topo .sub0{display:none!important}
  .letreiro{display:block;flex-basis:100%;overflow:hidden;border-top:1px solid var(--borda);padding-top:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .letreiro-trilho{display:flex;width:max-content;font-size:14px;color:var(--texto2);white-space:nowrap}
  .letreiro-trilho b{color:var(--texto);font-variant-numeric:tabular-nums}
  .letreiro-trilho i{font-style:normal;margin:0 16px;opacity:.5}
}
.pv-aviso p{margin:0 0 14px;line-height:1.5}.pv-aviso .btn{width:auto;padding:12px 22px}

/* Aparelho leve (Android/pouca memória): sem desfoque de vidro, que pesa muito */
html[data-leve="1"] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.letreiro-trilho .m-sobe{color:#22c55e;font-weight:700}.letreiro-trilho .m-desce{color:#ef4444;font-weight:700}

/* Detalhes: gráfico do mês e cotações */
[data-pag="inicio"] .card{cursor:default}
.dt-abas{margin:4px 0 12px}
.dt-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.dt-resumo div{background:rgba(127,127,127,.12);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dt-resumo small{font-size:11px;opacity:.7}.dt-resumo b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-graf{width:100%;height:auto;display:block}
.dt-eixo{font-size:10px;fill:currentColor;opacity:.6}
.dt-nota{text-align:center;font-size:12px;margin:8px 0 0}
.mk-preco{font-size:38px;font-weight:300;text-align:center;font-variant-numeric:tabular-nums}.mk-preco small{font-size:14px;opacity:.6}
.mk-var{text-align:center;margin:0 0 12px;font-size:14px}
.m-sobe{color:#22c55e;font-weight:700}.m-desce{color:#ef4444;font-weight:700}
.orc-barra{height:10px;border-radius:6px;background:rgba(127,127,127,.2);overflow:hidden;margin:10px 0 6px}.orc-barra i{display:block;height:100%;border-radius:6px}.orc-barra.fina{height:6px;margin:6px 0 10px}

/* Faturas dos cartões */
.fat-linha{padding:10px 0;border-top:1px solid rgba(127,127,127,.2)}.fat-linha:first-of-type{border-top:0}
.fat-top{display:flex;justify-content:space-between;align-items:center;font-size:16px}.fat-top span{font-weight:700;font-variant-numeric:tabular-nums}
.fat-rod{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fat-pagar{width:auto;padding:8px 14px;font-size:13px;margin:0;background:linear-gradient(135deg,#16a34a,#4ade80)}
.fat-card>.btn{margin-top:10px}
.ct-nome{display:flex;align-items:center;gap:8px}.ct-nome i{width:12px;height:12px;border-radius:4px;flex:none}
.ct-bancos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.ct-bancos button{display:flex;align-items:center;gap:6px;padding:9px 8px;border-radius:10px;border:1px solid rgba(127,127,127,.3);background:none;color:inherit;font:inherit;font-size:13px;text-align:left}
.ct-bancos button i{width:12px;height:12px;border-radius:4px;flex:none}.ct-bancos button.sel{border-color:var(--destaque,#7c3aed);background:rgba(124,58,237,.15);font-weight:700}
.ct-linhas .btn{width:auto;padding:7px 11px;font-size:13px;margin:0}.ct-linhas .btn.sel{background:var(--destaque,#7c3aed);color:#fff}
.ct-linhas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.ct-cartao{border:2px solid transparent;border-radius:12px;padding:0;background:none;cursor:pointer}.ct-cartao.sel{border-color:var(--destaque,#7c3aed);box-shadow:0 0 0 2px rgba(124,58,237,.3)}
.mc{position:relative;display:block;aspect-ratio:1.586;border-radius:10px;color:#fff;text-align:left;padding:7px 9px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.mc small{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.mc i{position:absolute;left:9px;top:42%;width:20px;height:15px;border-radius:3px;background:linear-gradient(135deg,#d8c27a,#a88b3a)}
.mc b{position:absolute;left:9px;right:8px;bottom:7px;font-size:11px;line-height:1.15;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ct-nome i.mc-ic{width:26px;height:17px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.mc.claro{color:#1f2937}.mc.claro b{text-shadow:none}
.fat-linha{cursor:pointer}.fat-mover{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}.fat-mover .btn,.fat-desf{width:auto;padding:5px 10px;font-size:12px;margin:0}
.fat-venc{font-size:11px;font-weight:500;opacity:.75;margin-left:6px}.ct-edit{display:block!important}.ct-edit-l{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* modal sempre dentro da área visível (teclado aberto no iPhone) */
.modal{top:var(--vvt,0);bottom:auto;height:var(--vvh,100dvh)}
.modal-box{max-height:calc(var(--vvh,100dvh) - 16px);overscroll-behavior:contain}
#balao .acoes button.cancelar{color:#f87171;border-color:rgba(248,113,113,.5)}
/* Aceite dos Termos na entrada */
.aceite{border:1px solid rgba(127,127,127,.3);border-radius:18px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:12px}
.aceite-top{display:flex;gap:12px;align-items:flex-start}.aceite-top b{display:block;font-size:16px}.aceite-top small{display:block;opacity:.7;font-size:13px;margin-top:2px;line-height:1.4}
.aceite-ic{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(127,127,127,.18);display:grid;place-items:center}
.aceite-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}.aceite-check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--destaque,#38bdf8)}
.aceite-check a{color:inherit;text-decoration:underline}
#btn-google:disabled,#form-email button:disabled{opacity:.4;cursor:not-allowed}
.aceite{background:rgba(10,14,24,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Compra parcelada na lista: total, quantas faltam e quanto falta para quitar */
.li-txt .parc-info{display:block;color:var(--destaque);font-weight:600;margin-top:2px}
.card.parc{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}