/* O arranjo das telas (Início e as outras). As classes od- vêm do design
   system (od.css) e as cores só dos tokens (tokens.css). 03/11/2026: o visual
   novo, limpo, de banco digital (sem teclas, sem cenários). */
body { margin: 0; background-color: var(--ground); background-image: var(--spotlight); background-repeat: no-repeat; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tl-tela { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; box-sizing: border-box; background: transparent; color: var(--ink); font-family: var(--font-texto); }
.tl-corpo { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
.tl-nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; box-sizing: border-box; padding-bottom: max(6px, env(safe-area-inset-bottom)); z-index: 5; }
.tl-nav a { position: relative; }
.tl-nav__ico { width: 24px; height: 24px; flex: none; }
.tl-nav a > span:not([class]) { max-width: 100%; }
.tl-nav__sep { display: none; }
.tl-nav__marca { display: none; }

.tl-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 52px; }
.tl-topo .od-titulo--m { font-size: 26px; letter-spacing: -0.025em; }
.tl-secao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.tl-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tl-marca .od-titulo { font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.tl-topo__dir { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.tl-foto { display: block; object-fit: cover; border-radius: 50%; flex: none; }
.tl-dupla { display: inline-flex; flex: none; }
.tl-dupla .tl-foto { border-radius: 50%; box-shadow: 0 0 0 2px var(--ground); }
.tl-dupla .tl-foto + .tl-foto { margin-left: -10px; }

.tl-moeda { padding: 3px; gap: 2px; }
.tl-moeda button { height: 34px; min-height: 34px; padding: 0 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.tl-conferir { height: 42px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--surface); border-color: var(--line); }
.tl-conferir i { width: 7px; height: 7px; border-radius: 50%; background: var(--res); }

/* --tl-ela: o tom da parte dela/dele dentro de uma barra de duas cores */
.tl-tela { --tl-vazio: var(--surface-3); --tl-mix: 55%; }
[data-theme="amanhecer"] .tl-tela { --tl-mix: 45%; }
.tl-tela .od-cartao { padding: 18px; gap: 10px; --tl-ela: color-mix(in srgb, var(--cor, var(--ink)) var(--tl-mix, 55%), var(--surface)); }
.tl-tela .od-pote { border-top: 1px solid var(--line); }
.tl-tela .od-embarque__corpo, .tl-tela .od-embarque__lado { padding: 18px; }
.tl-tela .od-barcode i.futuro { background: var(--tl-vazio); }
.tl-tela .od-btn--pequeno { height: 42px; min-height: 42px; }
a.od-cartao:hover, .tl-cartao-link:hover { background: var(--surface-2); border-color: var(--line-strong); }

/* Na mão: o saldo grande, os dois por baixo, a barra de quem é */
.tl-namao { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-namao__esq { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-namao__esq .od-num--xl { font-size: 44px; }
.tl-namao__gente { display: flex; flex-direction: column; gap: 10px; flex: none; }
.tl-namao__pessoa { display: flex; align-items: center; gap: 10px; }
.tl-namao__pessoa .tl-foto { border-radius: 50%; }
.tl-namao__pessoa b { display: block; font: 600 15px/1.1 var(--font-num); font-variant-numeric: tabular-nums; }
.tl-namao__pessoa span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tl-namao + .tl-div__barra { margin-top: 6px; }

/* de quem é o dinheiro dentro do pote */
.tl-div { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.tl-div__barra { display: flex; gap: 3px; height: 8px; }
.tl-div__barra i { border-radius: 999px; background: var(--cor); }
.tl-div__barra i.tl-div__ela { background: var(--tl-ela); }
.tl-div__lados { display: flex; flex-direction: column; gap: 10px; }
.tl-div__lado { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.tl-div__lado .tl-foto { border-radius: 50%; }
.tl-div__lado b { font: 600 14px var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-div__lado em { font-style: normal; color: var(--muted); margin-left: auto; padding-left: 4px; font-variant-numeric: tabular-nums; }

/* a meta do cofrim (barra contínua; já não é código de barras) */
.tl-meta { height: 8px; gap: 2px; }
.tl-meta i { background: var(--res); border-radius: 999px; }
.tl-meta i.tl-meta__ela { background: var(--tl-ela); }
.tl-meta__linha { display: flex; align-items: center; gap: 10px; }
.tl-meta__linha .tl-meta { flex: 1 1 auto; }
.tl-meta__pc { font: 600 14px var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; }

.tl-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.tl-par .od-num--l { font-size: 24px; }
.tl-entre { flex-direction: row; align-items: center; gap: 12px; }
.tl-frase { font: 500 15px/1.45 var(--font-texto); margin-top: 2px; color: var(--ink); }
.tl-frase b { font: 600 15px var(--font-texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-mais { font: 500 12px var(--font-mono); color: var(--muted); white-space: nowrap; transition: color 140ms ease; }
a.od-cartao:hover .tl-mais, .tl-mais:hover { color: var(--ink); }
.tl-cartao-link, .tl-bybit { color: var(--ink); }
.tl-bybit__num { display: flex; align-items: baseline; gap: 10px; }
.tl-leg { display: inline-block; width: 14px; height: 0; vertical-align: middle; margin-right: 5px; border-top: 2px solid var(--ink); }
.tl-leg--c { border-top: 2px dashed var(--muted); }
.tl-aconferir { color: var(--muted); font-weight: 600; }
.tl-receber { flex-direction: row; align-items: center; gap: 12px; color: var(--ink); }
.tl-receber__txt { flex: 1 1 auto; font-size: 14px; color: var(--ink-2); }
.tl-receber__txt b { color: var(--ink); font-weight: 600; }
.tl-nota { margin: 4px 4px 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.tl-icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.tl-aviso { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* A lista "Mais" (como umas definições): um cartão, uma linha por atalho */
.tl-mais-lista { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sombra); overflow: hidden; }
.tl-mais-item { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; min-height: 64px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink); }
.tl-mais-item + .tl-mais-item { box-shadow: inset 0 1px 0 var(--line); }
.tl-mais-item > svg:first-child { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.tl-mais-item > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tl-mais-item b { font: 500 15px/1.3 var(--font-texto); }
.tl-mais-item .od-legenda-txt { font-size: 13px; }
.tl-mais-item > svg:last-child { width: 20px; height: 20px; color: var(--muted); }
.tl-tela .tl-mais-item.od-cartao { padding: 12px 16px; gap: 14px; }
.tl-mais-item:hover { background: var(--surface-2); }

/* + Lançar: a folha sobe de baixo */
.tl-dialogo { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 480px; max-height: 92dvh; background: transparent; color: var(--ink); }
.tl-dialogo::backdrop { background: color-mix(in srgb, var(--contorno) 55%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tl-folha { max-width: none; padding-bottom: max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
.tl-seg { align-self: stretch; }
.tl-seg button { flex: 1 1 0; }
.tl-teclado { max-width: none; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chip { position: relative; padding: 0 6px 0 14px; }
.tl-chip input, .tl-chip select { border: 0; background: transparent; color: var(--ink); font: 600 14px var(--font-texto); height: 34px; max-width: 160px; }
.tl-chips .od-chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.tl-dica { margin-top: -6px; }
.tl-rapidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: -4px; }
.tl-rapidas .od-chip { justify-content: center; height: 44px; padding: 0 6px; font-size: 13px; border-radius: var(--radius-md); }
.tl-rapidas .tl-icone, .od-cat .tl-icone { width: 20px; height: 20px; }
.od-btn:disabled { opacity: .45; cursor: default; }
.tl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-aviso-baixo { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: calc(100% - 32px); max-width: 448px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--radius-md); background: var(--ink); color: var(--ground); font: 500 14px var(--font-texto); box-shadow: var(--sombra-alta); z-index: 20; }
.tl-aviso-baixo button { margin-left: auto; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ground) 14%, transparent); color: var(--ground); font: 600 14px var(--font-texto); cursor: pointer; }

/* Mês */
.tl-compara { margin: 0; font-size: 14px; }
.tl-compara span { color: var(--muted); font-weight: 400; }
.tl-ano { font: 500 14px var(--font-texto); color: var(--muted); }
.tl-fecho__pessoa { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl-fecho__pessoa > div { display: grid; gap: 2px; min-width: 0; }
.tl-fecho__pessoa .tl-foto { border-radius: 50%; }
.tl-fecho__falta { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink); }
.tl-fecho__falta li + li { margin-top: 2px; }
.tl-fecho .od-btn { margin: 10px 0 4px; }
.tl-fecho-lembrete { width: 100%; text-align: left; font: inherit; cursor: pointer; border: 0; color: var(--ink); }
.tl-dia + .tl-dia { margin-top: 8px; }
.tl-dia__topo { display: flex; justify-content: space-between; padding: 10px 0 4px; font: 600 13px var(--font-texto); color: var(--muted); }
.od-lanc__ic .tl-icone { width: 20px; height: 20px; }
.od-pizza { justify-content: center; }
.od-pizza .od-legenda { width: 100%; }
.od-btn--icone:disabled { opacity: .3; }

/* Entre vocês */
.tl-entre-topo { align-items: center; text-align: center; gap: 12px; }
.tl-entre-topo .tl-frase { font-size: 17px; }
.tl-frase--m { font-size: 15px; margin: 0; }

/* Crypto */
.tl-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.tl-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-plano { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.tl-plano__t { font: 600 15px var(--font-texto); }
.tl-plano__v { font-size: 13px; color: var(--muted); }
.tl-plano__v b { color: var(--ink); font-weight: 600; }

/* Planejamento (a capa e a linha do tempo de antes; sem cenário colorido) */
.tl-cena { position: relative; overflow: hidden; height: 150px; display: flex; align-items: flex-end; border-radius: var(--radius-lg); background: var(--surface); }
.tl-cena svg { display: block; width: 100%; height: 100%; }
.tl-cena__selo { position: absolute; left: 12px; top: 12px; display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ground) 80%, transparent); font: 600 13px var(--font-texto); color: var(--ink); }
.tl-rotulo-solto { margin-top: 6px; }
.tl-tempo { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 22px; }
.tl-tempo::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; border-left: 2px solid var(--line); }
.tl-tempo__base { position: relative; }
.tl-tempo__ponto { position: absolute; left: -22px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-primary); box-shadow: 0 0 0 3px var(--ground); }
.tl-tempo__base--ideia .tl-tempo__ponto { background: var(--ground); border: 2px dashed var(--line-strong); width: 10px; height: 10px; }
.tl-base--ideia { background: transparent; border: 1.5px dashed var(--line-strong); box-shadow: none !important; }
.tl-base--ideia .od-titulo { color: var(--muted); }

/* login, contas, sair */
.tl-login { align-items: center; text-align: center; gap: 16px; margin-top: 12vh; }
.tl-login .tl-foto { border-radius: 50%; }
.tl-login__form { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.tl-login__msg { margin: 0; font-size: 13px; color: var(--ink-2); }
.tl-login__msg--erro { color: var(--neg); font-weight: 600; }
.tl-conta { color: var(--ink); }
.tl-conta .tl-foto { border-radius: 50%; }
.tl-conv { display: block; font: 500 12px/1.2 var(--font-texto); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; margin-top: 4px; }
.tl-sair { align-self: center; margin-top: 8px; }

/* a abertura (novo-abertura.js): no design do app (04/11/2026), sem cenário. O fundo
   da tela, o número grande, o arco de raios na tinta, o de hoje e o avião na cor da ação,
   o sol num tom suave dela e os fins de semana numa pílula. */
.ab { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background-color: var(--ground); background-image: var(--spotlight); background-repeat: no-repeat; color: var(--ink); overflow: hidden; transition: opacity .5s ease; cursor: default; }
.ab.saindo { opacity: 0; pointer-events: none; }
.ab-miolo { position: relative; margin-top: -6vh; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; text-align: center; }
.ab-num { font: 500 88px/1 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; margin-top: 8px; background: linear-gradient(180deg, var(--ink) 32%, var(--muted) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ab-titulo { font: 500 15px var(--font-texto); color: var(--muted); }
.ab-arco { position: relative; width: min(300px, 86vw); margin-top: 20px; }
.ab-arco > svg:first-child { display: block; width: 100%; }
.ab-raio { stroke: var(--line-strong); stroke-width: 1.6; stroke-linecap: round; }
.ab-raio.on { stroke: var(--ink); }
.ab-raio.hoje { stroke: var(--accent); stroke-width: 2.4; }
.ab-sol { fill: var(--accent-soft); }
.ab-horizonte { stroke: var(--line-strong); stroke-width: 1.5; }
.ab-aviao { position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ab-fds { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); font: 500 12px var(--font-mono); color: var(--ink-2); }
.ab-fds:empty { display: none; }
.ab-nota { font-size: 13px; color: var(--muted); min-height: 16px; }

/* Agente (a conversa) */
.tl-nav__badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); font: 600 11px/16px var(--font-mono); text-align: center; }
.tl-conversa { display: flex; flex-direction: column; gap: 12px; }
.tl-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.tl-msg .tl-foto { border-radius: 50%; }
.tl-msg--minha { align-self: flex-end; flex-direction: row-reverse; }
.tl-msg__agente { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-soft); color: var(--accent); }
.tl-msg__agente .tl-icone { width: 16px; height: 16px; }
.tl-msg__bolha { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface); box-shadow: var(--sombra); min-width: 0; }
.tl-msg--minha .tl-msg__bolha { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-ink); border-radius: 14px 14px 4px 14px; }
.tl-msg--minha .tl-msg__bolha p, .tl-msg--minha .tl-msg__topo b, .tl-msg--minha .tl-msg__anexo, .tl-msg--minha .tl-msg__pra { color: var(--ui-primary-ink); }
.tl-msg--minha .tl-msg__topo { color: color-mix(in srgb, var(--ui-primary-ink) 78%, transparent); }
.tl-msg__topo { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.tl-msg__topo b { color: var(--ink); font-weight: 600; }
.tl-msg__pra { color: var(--ink-2); font-weight: 600; }
.tl-msg__bolha p { margin: 0; font: 15px/1.45 var(--font-texto); color: var(--ink); overflow-wrap: anywhere; }
.tl-msg__anexo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.tl-msg__anexo .tl-icone { width: 16px; height: 16px; }
.tl-msg__proposta { display: flex; gap: 8px; justify-content: flex-end; }
.tl-escrever { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 8px; padding: 8px 0; background: var(--ground); }
.tl-escrever__caixa { flex: 1 1 auto; height: auto !important; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-md); }
.tl-escrever__caixa textarea { width: 100%; border: 0; background: transparent; color: var(--ink); font: 16px/1.4 var(--font-texto); resize: none; outline: none; }
.tl-anexar { cursor: pointer; flex: none; }

/* ---------- Desktop (1024 px ou mais) ----------
   O mesmo app: o dock vira a barra lateral e o Início vira um painel em
   grelha de 12 colunas com as mesmas cartas. Abaixo disto nada muda. */
@media (max-width: 1023.98px) { .tl-so-largo { display: none !important; } }
@media (min-width: 1024px) {
  .tl-so-estreito { display: none !important; }
  .tl-tela { max-width: none; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .tl-tela:has(.tl-nav[hidden]) { display: block; max-width: 480px; } /* login: como no telemóvel */
  .tl-corpo { grid-column: 2; grid-row: 1; width: 100%; max-width: 760px; box-sizing: border-box; margin: 0 auto; padding: 28px 32px 48px; gap: 16px; align-self: start; }
  .tl-corpo--painel { max-width: 1240px; }

  .tl-nav { grid-column: 1; grid-row: 1; position: sticky; top: 0; left: auto; bottom: auto; transform: none; width: auto; max-width: none; height: 100dvh;
    flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 0; border-right: 1px solid var(--line); overflow-y: auto; }
  .tl-nav a { flex: none; min-height: 40px; height: 40px; flex-direction: row; justify-content: flex-start; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--radius-btn); background: transparent; box-shadow: none; color: var(--muted); font: 500 13.5px/1 var(--font-texto); transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
  .tl-nav a:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
  .tl-nav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); border-color: var(--line); box-shadow: none; font-weight: 500; }
  .tl-nav__ico { width: 18px; height: 18px; }
  .tl-nav__marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; font: 600 15.5px var(--font-texto); letter-spacing: -0.02em; color: var(--ink); }
  .tl-nav__marca .tl-foto { border-radius: 50%; border: 1px solid var(--line-strong); }
  .tl-nav__sep { display: block; height: 1px; margin: 10px 8px; background: var(--line); }
  .tl-nav a.od-nav__lancar { flex: none; order: 20; margin-top: 12px; height: 42px; justify-content: center; gap: 10px; border-radius: var(--radius-btn); border-color: var(--ui-primary); background: var(--ui-primary); color: var(--ui-primary-ink); }
  .tl-nav kbd { display: inline-block; margin-left: auto; font: 500 11px var(--font-mono); padding: 1px 6px; border: 1px solid currentColor; border-radius: 5px; opacity: .7; }
  .tl-nav__badge { position: static; margin-left: auto; }

  /* o Início em grelha: as cartas do telemóvel, outro arranjo */
  .tl-corpo--painel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; align-content: start; }
  .tl-corpo--painel > * { grid-column: 1 / -1; order: 9; }
  .tl-corpo--painel > .tl-topo { order: 0; justify-content: flex-end; }
  .tl-corpo--painel > .tl-topo .tl-marca { display: none; } /* a marca já está na barra */
  .tl-corpo--painel > .tl-par { display: contents; }
  .tl-corpo--painel > a[href="#na_mao"] { grid-column: span 4; order: 1; }
  .tl-corpo--painel > .tl-par > * { grid-column: span 4; order: 1; }
  .tl-corpo--painel > .od-embarque { grid-column: span 5; order: 2; }
  .tl-corpo--painel > .tl-entre { grid-column: span 4; order: 2; }
  .tl-corpo--painel > .tl-receber { grid-column: span 3; order: 2; }
  .tl-corpo--painel > .tl-entre:not(:has(~ .tl-receber)) { grid-column: span 7; }
  .tl-corpo--painel > .tl-bybit { grid-column: span 6; order: 3; }
  .tl-corpo--painel > .tl-cartao-link { grid-column: span 6; order: 3; }
  .tl-corpo--painel .od-num--xl { font-size: 52px; }
  .tl-corpo--painel > .tl-sair { justify-self: center; }
  .tl-corpo--painel .od-cartao { padding: 22px; }

  /* + Lançar: abre como painel à direita, com a tela à vista */
  .tl-dialogo { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; max-width: 440px; }
  .tl-dialogo .tl-folha { height: 100%; box-sizing: border-box; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
  .tl-aviso-baixo { bottom: 24px; left: calc(50% + 124px); }
  .tl-escrever { bottom: 0; }
}

/* ---------- Movimentos: a tabela para gerir ---------- */
.tl-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-filtro select { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font: 500 13px var(--font-texto); max-width: 190px; cursor: pointer; }
.tl-filtro--on select { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.tl-busca { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface-2); transition: border-color 140ms ease; }
.tl-busca:hover { border-color: var(--line-strong); }
.tl-busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 14px var(--font-texto); outline: none; }
.tl-busca input::placeholder { color: var(--muted); }
.tl-busca:focus-within { border-color: var(--focus); outline: none; }
.tl-busca kbd, .tl-mov kbd { font: 500 11px var(--font-mono); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); }
.tl-mov__mes { font: 600 15px var(--font-texto); min-width: 128px; text-align: center; }
.tl-mov { display: grid; gap: 16px; align-items: start; }
.tl-mov__lista { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-tabela { overflow-x: auto; }
.tl-tabela table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tl-tabela th { text-align: left; font: 500 12px var(--font-texto); color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tl-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tl-tabela tbody tr { cursor: pointer; }
.tl-tabela tbody tr:hover td { background: var(--surface-2); }
.tl-tabela tr.tl-sel td { background: var(--ui-primary-soft); }
.tl-tabela tr.tl-aberta td { background: var(--surface-2); }
.tl-tabela tr.tl-aberta td:first-child { box-shadow: inset 3px 0 0 var(--ui-primary); }
.tl-tabela .od-estado { height: 22px; font-size: 12px; }
.tl-v { text-align: right !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-v--pos { color: var(--pos); }
.tl-cinza { color: var(--muted); }
.tl-cxa { width: 30px; padding: 0 !important; }
.tl-cx { display: grid; place-items: center; width: 30px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tl-cx::before { content: ""; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--line-campo); border-radius: 6px; }
.tl-cx[aria-checked="true"]::before { background: var(--ui-primary); border-color: var(--ui-primary); box-shadow: inset 0 0 0 3px var(--surface); }
.tl-cx:focus-visible, .tl-abrir:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tl-desc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tl-abrir { padding: 0; border: 0; background: transparent; color: inherit; font: 500 14px var(--font-texto); cursor: pointer; text-align: left; }
.tl-quem { display: inline-flex; align-items: center; gap: 6px; }
.tl-quem .tl-foto { border-radius: 50%; }
.tl-quem .tl-dupla .tl-foto + .tl-foto { margin-left: -8px; }
.tl-cadeado { margin-left: 4px; font-size: 12px; }
.tl-vazio { text-align: center; color: var(--muted); padding: 24px !important; }
.tl-soma { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; font-size: 13px; color: var(--muted); }
.tl-soma b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-painel { gap: 12px; }
.tl-painel .od-campo { min-width: 0; }
.tl-painel .od-campo__caixa { box-sizing: border-box; width: 100%; }
.tl-painel__dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tl-painel__pe { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-painel__pe .od-btn { flex: 1 1 auto; }
.tl-fixo { font: 500 14px var(--font-texto); color: var(--ink-2); padding: 10px 0; }
.tl-trancado { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--pos-soft); font-size: 13px; color: var(--ink); }
.tl-trancado span { flex: 1; }
.tl-massa { display: flex; flex-direction: column; gap: 8px; }
.tl-massa .od-btn { justify-content: flex-start; }
.tl-massa__escolha { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-2); }
@media (min-width: 1024px) {
  .tl-corpo--largo { max-width: 1240px; }
  .tl-mov--painel { grid-template-columns: minmax(0, 1fr) 340px; }
  .tl-mov__painel { position: sticky; top: 24px; }
  .tl-mes-dias { display: none; }
  .tl-nav__conta { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--res) 30%, transparent); background: var(--res-soft); color: var(--res); font: 600 11px/18px var(--font-mono); text-align: center; }
}
@media (max-width: 1023.98px) {
  .tl-nav__conta:not([hidden]) { position: absolute; top: 6px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--res); font-size: 0; }
}

/* ---------- Contas: o saldo do banco ao lado do que o app calcula ---------- */
.tl-contas td { vertical-align: middle; padding: 10px 8px; }
.tl-contas td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tl-contas td b { font-weight: 600; }
.tl-contas tbody tr { cursor: default; }
.tl-saldo { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 12px; background: var(--surface-2); }
.tl-saldo span { color: var(--muted); font: 600 13px var(--font-texto); }
.tl-saldo input { width: 110px; border: 0; background: transparent; color: var(--ink); font: 600 15px var(--font-num); text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.tl-saldo:focus-within { border-color: var(--focus); }
.tl-dif { color: var(--neg); font-weight: 600; }
.tl-bate { color: var(--pos); font-weight: 600; }
.tl-link { color: var(--muted); font: 500 12px var(--font-mono); text-decoration: none; transition: color 140ms ease; }
.tl-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tl-contas__mais { align-self: flex-start; }

/* ---------- Desktop: duas colunas e o Planejamento na horizontal ---------- */
@media (min-width: 1024px) {
  .tl-corpo:has(> .tl-duas) { max-width: 1100px; }
  .tl-duas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
  .tl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .tl-duas > .tl-col:first-child { position: sticky; top: 24px; }

  .tl-corpo--odisseia { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-content: start; }
  .tl-corpo--odisseia > * { grid-column: 1 / -1; }
  .tl-corpo--odisseia > .tl-cena { grid-column: 1; height: 220px; }
  .tl-corpo--odisseia > .tl-cena + .od-cartao { grid-column: 2; justify-content: center; }
  .tl-corpo--odisseia .tl-tempo { flex-direction: row; align-items: flex-start; overflow-x: auto; gap: 16px; padding: 22px 0 10px; scroll-snap-type: x proximity; }
  .tl-corpo--odisseia .tl-tempo::before { left: 0; right: 0; top: 6px; bottom: auto; border-left: 0; border-top: 2px solid var(--line); }
  .tl-corpo--odisseia .tl-tempo__base { flex: 0 0 300px; scroll-snap-align: start; }
  .tl-corpo--odisseia .tl-tempo__ponto { left: 16px; top: -22px; }
}

/* Agente: cartões que ele desenha (OpenUI, novo-ui.js) */
.tl-msg__ui { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.tl-ui { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); box-shadow: none; min-width: 0; color: var(--ink); }
.tl-ui .od-lanc { padding: 8px 0; }
.tl-ui .od-lanc:last-child { border-bottom: 0; }
.tl-ui .od-lanc__ic { background: var(--surface); }
.tl-ui .od-lanc__meta .od-estado { height: 20px; padding: 0 8px; margin-left: 4px; }
.tl-ui .od-grafico { gap: 10px; }
.tl-ui .od-legenda { min-width: 0; width: 100%; }
.tl-ui--nota { margin: 0; }

/* O aviso das prestações: tons neutros, com uma borda para se ver */
.tl-prestacao { border: 1px solid var(--line-strong); box-shadow: none; color: var(--ink); }
.tl-prestacao .tl-frase b { white-space: nowrap; }
.tl-ligacao { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 0; padding: 0; }
.tl-ligacoes { margin-top: 16px; }
@media (min-width: 1024px) { .tl-corpo--painel > .tl-prestacao { order: 1; } }

/* ---------- Bancos: uma carta por ligação, as contas dela por baixo ---------- */
.tl-banco { display: flex; flex-direction: column; gap: 10px; }
.tl-banco--atencao { border-color: color-mix(in srgb, var(--res) 50%, var(--line)); box-shadow: none; }
.tl-banco__topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.tl-banco__topo .od-lanc__nome { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-banco__linhas { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-2); }
.tl-banco__linhas b { color: var(--ink); white-space: nowrap; font-weight: 600; }
.tl-banco__erro { color: var(--neg); overflow-wrap: anywhere; }
.tl-banco__acao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-banco__contas { border-top: 1px solid var(--line); padding-top: 4px; }
.tl-banco__conta { grid-template-columns: minmax(0, 1fr) auto; }
.tl-banco__conta:last-child { padding-bottom: 0; }
.tl-banco__conta .od-lanc__meta b { color: var(--ink-2); font-weight: 600; }
.tl-banco__conta .od-estado { height: 20px; padding: 0 8px; margin-right: 4px; }
.tl-banco__grupo { margin: 12px 4px 0; }
.tl-banco__ler { align-self: flex-start; margin-top: 4px; }

/* ---------- Contas: por pote, de onde vem cada número, cartões no telemóvel ---------- */
.tl-contas .tl-grupo th { padding: 18px 8px 8px; border-bottom: 1px solid var(--line-strong); color: var(--ink); font: 600 14px var(--font-texto); }
.tl-contas .tl-grupo th span { margin-left: 8px; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.tl-fonte { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 500; white-space: normal; }
.tl-fonte i { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); flex: 0 0 auto; }
.tl-fonte--vivo { color: var(--ink); }
.tl-contas__resumo { margin: -4px 4px 8px; }
.tl-contas__todas { display: inline-block; margin-top: 12px; font-size: 14px; }
@media (max-width: 1023.98px) {
  .tl-tabela:has(.tl-contas) { overflow: visible; }
  .tl-contas, .tl-contas tbody, .tl-contas tr, .tl-contas td, .tl-contas th { display: block; width: auto; }
  .tl-contas thead { display: none; }
  .tl-contas .tl-grupo th { padding: 20px 4px 8px; border: 0; }
  .tl-contas tr:not(.tl-grupo) { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sombra); }
  .tl-contas td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; white-space: normal; text-align: right; }
  .tl-contas td::before { content: attr(data-r); color: var(--muted); font-size: 12px; text-align: left; flex: 0 0 auto; }
  .tl-contas td[data-r="Conta"] { display: block; text-align: left; padding-bottom: 8px; }
  .tl-contas td[data-r="Conta"]::before { content: none; }
  .tl-contas td:empty, .tl-contas td:not([data-r]):has(button[hidden]) { display: none; }
  .tl-contas td:not([data-r]) { justify-content: flex-end; }
  .tl-contas__valor { font-size: 16px; font-weight: 600; }
  .tl-contas td small { margin-top: 0; }
}

/* A aba Bancos simplificada (05/11/2026): um cartão por banco que abre as contas. */
.tl-banco > summary { list-style: none; cursor: pointer; grid-template-columns: minmax(0, 1fr) auto; padding: 0; }
.tl-banco > summary::-webkit-details-marker { display: none; }
.tl-banco > summary .od-lanc__nome { display: flex; align-items: center; gap: 8px; }
.tl-banco > summary .od-lanc__valor { font-size: 17px; }
.tl-banco__fatura { color: var(--neg); }
.tl-banco__aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.tl-banco__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 4px 0; }
.tl-banco:not([open]) { gap: 0; }
.tl-banco__todas { display: block; margin: 16px 4px 0; }

/* As contas, lista simples (05/11/2026) */
.tl-contas__quem { margin: 0 0 12px; align-self: flex-start; }
.tl-pote-lista { display: flex; flex-direction: column; gap: 2px; }
.tl-pote-lista .od-cartao__topo b { font: 600 16px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.tl-conta.od-lanc, .tl-conta > summary.od-lanc { grid-template-columns: minmax(0, 1fr) auto; text-decoration: none; color: inherit; }
.tl-conta > summary { list-style: none; cursor: pointer; }
.tl-conta > summary::-webkit-details-marker { display: none; }
.tl-conta--mao > summary .od-lanc__valor::after { content: " ›"; color: var(--muted); font-weight: 500; }
.tl-conta__escrever { display: flex; gap: 10px; align-items: center; padding: 4px 0 12px; }
.tl-conta__escrever .tl-saldo { flex: 1; }
/* As telas Na mão e Cofrim (05/11/2026): cada conta numa linha só, com a foto de quem é */
.tl-conta--foto.od-lanc { grid-template-columns: auto minmax(0, 1fr) auto; }
.tl-pote-contas { display: flex; flex-direction: column; gap: 2px; }
.tl-pote-contas > .od-rotulo { margin-bottom: 4px; }
.tl-pote-contas > .tl-contas__mais { margin-top: 6px; }
.tl-pote-contas > .tl-contas__todas { align-self: flex-start; }
.tl-pote-topo .tl-div__lado { font-size: 14px; }
a.tl-conta:hover .od-lanc__nome { text-decoration: underline; text-underline-offset: 3px; }

/* Redesenho do Início (05/11/2026): os avisos num cartão só, o a receber dentro do Na mão,
   o vermelho só no que está atrasado. */
.tl-precisa { display: flex; flex-direction: column; gap: 0; border-color: var(--line-strong); box-shadow: none; }
.tl-precisa > .od-cartao { background: none; box-shadow: none; border: 0; padding: 12px 0 0; margin: 0; border-radius: 0; }
.tl-precisa > .od-cartao + .od-cartao { border-top: 1px solid var(--line); margin-top: 12px; }
.tl-precisa > .od-cartao .od-rotulo { font-size: 13px; }
.tl-namao__receber { display: block; margin-top: 6px; font: 600 13px/1.3 var(--font-texto); color: var(--pos); }
.tl-atrasado { color: var(--neg); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) { .tl-corpo--painel > .tl-precisa { order: 0; } .tl-corpo--painel > .tl-entre { grid-column: span 7; } }
.tl-precisa .od-legenda-txt + .od-legenda-txt { display: none; } /* no cartão junto, só a primeira linha de cada aviso */

/* O bento da Bybit (05/11/2026): por baixo do embarque e do Entre vocês, a largura toda. */
.tl-bybit--grande { display: flex; flex-direction: column; gap: 12px; }
.tl-bybit__corpo { display: grid; gap: 16px; }
.tl-bybit__graf { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-bybit__num { flex-wrap: wrap; }
.tl-bybit__num .tl-pos { color: var(--pos); font: 600 14px var(--font-num); }
.tl-bybit__num .tl-neg { color: var(--neg); font: 600 14px var(--font-num); }
.tl-bybit__lista { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-bybit__movs { list-style: none; margin: 0; padding: 0; }
.tl-bybit__movs li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.tl-bybit__movs li:first-child { border-top: 0; }
.tl-bybit__movs li span { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bybit__movs li b { font: 600 14px var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 1024px) {
  .tl-corpo--painel > .tl-bybit--grande { grid-column: 1 / -1; order: 3; }
  .tl-bybit__corpo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

/* Entre vocês, cartão que abre no Início (05/11/2026). */
.tl-entre--abre { display: block; }
.tl-entre--abre > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.tl-entre--abre > summary::-webkit-details-marker { display: none; }
.tl-entre__seta { white-space: nowrap; }
.tl-entre__det { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tl-entre__det > .od-cartao { background: none; box-shadow: none; border: 0; padding: 0; border-radius: 0; }
@media (min-width: 1024px) { .tl-corpo--painel > .tl-entre--abre[open] { grid-column: 1 / -1; } }

/* O Agente no desktop (05/11/2026): a conversa ocupa a área toda (não uma coluna de 760 px ao meio),
   rola por dentro, e a caixa de escrever fica sempre no fundo da janela. */
@media (min-width: 1024px) {
  .tl-corpo:has(> #conversa) { max-width: none; height: 100dvh; padding: 24px 40px 0; display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
  .tl-corpo:has(> #conversa) > .tl-topo { flex: none; }
  .tl-corpo:has(> #conversa) > #conversa { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 16px 0; scrollbar-width: thin; }
  .tl-corpo:has(> #conversa) .tl-msg { max-width: min(72%, 820px); }
  .tl-corpo:has(> #conversa) > .tl-nota { flex: none; margin: 0; }
  .tl-corpo:has(> #conversa) > .tl-escrever { position: static; flex: none; padding: 8px 0 24px; }
}
@media (min-width: 1600px) { .tl-corpo:has(> #conversa) { padding-left: 64px; padding-right: 64px; } }

/* O agente a pensar (05/11/2026): três pontos enquanto a resposta não chega. */
.tl-pensar { display: inline-flex; gap: 5px; padding: 6px 2px; }
.tl-pensar i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: tl-pensar 1.2s infinite ease-in-out; }
.tl-pensar i:nth-child(2) { animation-delay: .15s; }
.tl-pensar i:nth-child(3) { animation-delay: .3s; }
@keyframes tl-pensar { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tl-pensar i { animation: none; opacity: .6; } }

/* O recado na abertura (05/11/2026): um bilhete vermelho com coração, por baixo da contagem. */
.ab-recado { position: absolute; left: 50%; bottom: max(40px, 8vh); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--neg) 14%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neg) 45%, transparent);
  color: var(--ink); text-align: left; animation: ab-recado .5s ease both; }
.ab-recado[hidden] { display: none; }
.ab-recado__ico { width: 24px; height: 24px; flex: none; fill: var(--neg); stroke: var(--neg); stroke-width: 1.5; }
.ab-recado__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ab-recado__txt span { font: 600 15px/1.35 var(--font-texto); overflow-wrap: anywhere; }
.ab-recado__txt small { font: 500 12px var(--font-texto); color: var(--neg); }
.ab-recado .tl-foto { border-radius: 50%; flex: none; }
@keyframes ab-recado { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .ab-recado { animation: none; } }
/* o coração do topo do Início e a folha de escrever */
.tl-recado-btn { color: var(--neg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-btn); width: 40px; height: 40px; padding: 0; }
.tl-recado-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.tl-recado { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 20px; }
.tl-recado__topo { display: flex; align-items: center; justify-content: space-between; }
.tl-recado__topo b { font: 600 18px var(--font-texto); }
.tl-recado textarea { width: 100%; box-sizing: border-box; min-height: 112px; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--surface-2);
  color: var(--ink); font: 17px/1.45 var(--font-texto); resize: none; outline: none; }
.tl-recado textarea:focus { box-shadow: inset 0 0 0 1.5px var(--ui-primary); }
.tl-recado__vezes { display: flex; }
.tl-recado__vezes label { flex: 1; cursor: pointer; }
.tl-recado__vezes input { position: absolute; opacity: 0; pointer-events: none; }
.tl-recado__vezes span { display: grid; place-items: center; height: 40px; border-radius: 999px; font: 600 14px var(--font-texto); color: var(--muted); }
.tl-recado__vezes input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--sombra); }
.tl-recado__vezes input:focus-visible + span { outline: 2px solid var(--ui-primary); }
.tl-recado__dica { text-align: center; }
.tl-recado__mandados summary { cursor: pointer; font: 600 14px var(--font-texto); color: var(--ink-2); padding: 4px 0; }
.tl-recado__mandados ul { list-style: none; margin: 4px 0 0; padding: 0; }
.tl-recado__mandados li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.tl-recado__mandados li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-recado__mandados li b { font: 500 15px/1.35 var(--font-texto); overflow-wrap: anywhere; }
.tl-recado__mandados li small { font-size: 12px; color: var(--muted); }
.tl-marca .tl-recado-btn { margin-left: 2px; }
@media (min-width: 1024px) {
  /* no desktop a marca está na barra: do topo do Início fica só o coração dos recados */
  .tl-corpo--painel > .tl-topo .tl-marca { display: flex; margin-right: auto; }
  .tl-corpo--painel > .tl-topo .tl-marca > :not(.tl-recado-btn) { display: none; }
}

/* Desktop (05/11/2026): o cartão de embarque vive no fundo da barra lateral, em destaque (claro sobre o
   escuro: as cores da tinta e do fundo trocadas), e no Início a Crypto sobe e o Entre vocês fica por baixo,
   à largura toda, com o botão de abrir. */
@media (min-width: 1024px) {
  .tl-nav__embarque { margin-top: auto; padding-top: 16px; }
  .tl-nav__embarque .od-embarque { background: var(--ink); color: var(--ground); border-color: var(--ink); box-shadow: none; border-radius: 14px; }
  .tl-nav__embarque .od-embarque .od-rotulo, .tl-nav__embarque .od-embarque .od-legenda-txt { color: color-mix(in srgb, var(--ground) 65%, transparent); }
  .tl-nav__embarque .od-embarque__corpo { padding: 14px 12px 14px 14px; gap: 6px; }
  .tl-nav__embarque .od-embarque__lado { padding: 12px 10px; min-width: 64px; }
  .tl-nav__embarque .od-embarque__rota { gap: 6px; }
  .tl-nav__embarque .od-embarque__rota .od-num--l { font: 600 18px/1 var(--font-mono); letter-spacing: -0.02em; }
  .tl-nav__embarque .od-embarque__lado .od-num--xl { font-size: 28px; }
  .tl-nav__embarque .od-embarque__picote { border-left: 1px dashed color-mix(in srgb, var(--ground) 30%, transparent); }
  .tl-nav__embarque .od-barcode i { background: var(--ground); }
  .tl-nav__embarque .od-barcode i.futuro { background: color-mix(in srgb, var(--ground) 30%, transparent); }
  .tl-nav__embarque .tl-icone { color: var(--ground); }
  .tl-corpo--painel > .od-embarque { display: none; }
  .tl-corpo--painel > .tl-bybit--grande { order: 2; }
  .tl-corpo--painel > .tl-entre, .tl-corpo--painel > .tl-entre:not(:has(~ .tl-receber)) { grid-column: 1 / -1; order: 3; }
}
@media (min-width: 1024px) {
  /* Todas as telas com a mesma largura e encostadas à barra lateral (antes umas ocupavam a área toda e
     outras ficavam numa coluna de 760 px ao meio, e o olho saltava de tela para tela). */
  .tl-corpo { max-width: 1080px; margin: 0; }
  .tl-corpo--painel, .tl-corpo--largo { max-width: 1240px; }
}
@media (min-width: 1024px) {
  .tl-nav__embarque .od-rotulo { font-family: var(--font-texto); font-size: 11px; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-nav__embarque .od-embarque__lado .od-legenda-txt { font-size: 11px; white-space: nowrap; }
}

/* A conta (05/11/2026): a foto e o nome por baixo do embarque (desktop) e no fim do Mais (telemóvel),
   com o tema, mudar a senha e sair. */
.tl-conta { position: relative; margin-top: 10px; }
.tl-conta__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-btn); background: transparent;
  color: var(--ink); font: 500 13.5px var(--font-texto); cursor: pointer; text-align: left; transition: background-color 140ms ease, border-color 140ms ease; }
.tl-conta__btn:hover, .tl-conta__btn[aria-expanded="true"] { background: var(--surface); border-color: var(--line); }
.tl-conta__btn .tl-foto { border-radius: 50%; }
.tl-conta__btn span { flex: 1; }
.tl-conta__seta { transform: rotate(-90deg); color: var(--muted); transition: transform .15s; }
.tl-conta__btn[aria-expanded="true"] .tl-conta__seta { transform: rotate(90deg); }
.tl-conta-menu { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--sombra-alta); }
.tl-conta-menu[hidden] { display: none; }
.tl-conta > .tl-conta-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; }
.tl-conta-menu__tema { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; font: 500 14px var(--font-texto); color: var(--ink-2); }
.tl-conta-menu__tema .od-seg button { padding: 0 12px; min-height: 32px; }
.tl-conta-menu__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font: 500 14px var(--font-texto); cursor: pointer; text-align: left; }
.tl-conta-menu__item:hover { background: var(--surface-2); }
.tl-conta-menu__item--sair { color: var(--neg); }
.tl-conta-mais { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tl-conta-mais__topo { display: flex; align-items: center; gap: 12px; font: 600 17px var(--font-texto); }
.tl-conta-mais__topo .tl-foto { border-radius: 50%; }
.tl-conta-mais .tl-conta-menu { padding: 0; background: none; box-shadow: none; }

/* Contas a pagar: de onde vem o que vence (07/11/2026, design critique dos bentos) */
.tl-dev__partes { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 12px; }
.tl-dev__parte { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.tl-dev__parte b { font: 600 14px/1.2 var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

/* Reserva: No banco × Cripto, o nome por cima do valor (07/11/2026) */
.tl-res__lado { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.tl-res__lado > span { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.tl-res__lado > em { justify-self: start; }
/* No cartão da Reserva os dois lados ficam lado a lado, por baixo da meta (12/11/2026) */
.tl-res__lados { margin-top: auto; padding-top: 12px; }
@media (min-width: 1024px) {
  .tl-res__lados { flex-direction: row; gap: 16px; }
  .tl-res__lados > .tl-res__lado { flex: 1 1 0; min-width: 0; }
}

/* A meta da Reserva: € 5 mil até o embarque (12/11/2026, a pedido do Vitu) */
/* (tl-alvo: o nome tl-meta já é a barra antiga das linhas 67–72) */
.tl-alvo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; flex: none; }
.tl-alvo > * { flex: none; }
.tl-alvo__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-2); }
.tl-alvo__topo b { font: 600 14px/1.2 var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.tl-alvo__barra { height: 8px; border-radius: 999px; background: var(--res-soft); overflow: hidden; }
.tl-alvo__barra i { display: block; height: 100%; border-radius: 999px; background: var(--res); }
.tl-pote-topo .tl-alvo { margin-top: 12px; }
/* O cartão de embarque em destaque também no telemóvel (07/11/2026, a pedido do Vitu): claro sobre o escuro, como na barra do desktop */
.tl-corpo > .od-embarque { background: var(--ink); color: var(--ground); box-shadow: none; }
.tl-corpo > .od-embarque .od-rotulo, .tl-corpo > .od-embarque .od-legenda-txt { color: color-mix(in srgb, var(--ground) 65%, transparent); }
.tl-corpo > .od-embarque .od-embarque__picote { border-left: 1px dashed color-mix(in srgb, var(--ground) 30%, transparent); }
.tl-corpo > .od-embarque .od-barcode i { background: var(--ground); }
.tl-corpo > .od-embarque .od-barcode i.futuro { background: color-mix(in srgb, var(--ground) 30%, transparent); }
.tl-corpo > .od-embarque .tl-icone { color: var(--ground); }