/**
 * screens.css — CSS das telas convertidas pro SPA (item 16 do PENDENCIAS.md).
 * Carregado uma vez só, em app.html, pra sessão inteira. Antes cada `<style>`
 * vivia dentro do próprio HTML da tela (uma tela = um <head> = um escopo); no
 * SPA várias telas compartilham o MESMO <head>, então nome de classe repetido
 * entre telas diferentes agora colide de verdade.
 *
 * ⚠️ Ao converter a próxima tela: confira se algum seletor daqui já existe
 * com outro significado. `.bar` já colidiu QUATRO vezes (transacoes = barra de
 * busca; cartoes → .limbar; faturas → .fatbar; objetivos → .goalbar) — todas
 * são "barra de progresso", cada uma com altura/cor diferente. Checado de novo
 * nesta leva: `meta.html` NÃO tem barra (usa gráfico SVG, `.chart`) e
 * `plano.html`/`recorrentes.html` têm um `.bar2` que é layout flex genérico,
 * não barra de progresso — falsa aparência pelo nome. Se uma PRÓXIMA tela
 * ainda assim trouxer uma barra de progresso de verdade, é sinal de sobra:
 * nesse ponto vale extrair um `.progressbar` em app.css em vez de inventar mais
 * um nome — não faça isso sozinho, é decisão de design, não conserto mecânico.
 * `.menu` (o menu de contexto ⋮) é IDÊNTICO em transacoes.html e cartoes.html —
 * por isso ficou só uma vez, na seção de transações; cartões reusa a mesma
 * regra em vez de duplicar. Mesma coisa com `.top` (contas/objetivos/
 * investimentos, idêntico) e `.note` (objetivos/investimentos, idêntico) e
 * `.sec-t` (contas/objetivos — só o margin-top divergia em 2px, imperceptível;
 * unificado no valor de contas em vez de virar mais um nome).
 * `.legend` colidiu entre investimentos.html e meta.html (regras diferentes) —
 * a de meta virou `.mtlegend`.
 *
 * **4ª leva:** o aviso acima se confirmou. `.bar2` de recorrentes.html colidia
 * de verdade com o de plano.html (gap 22px × 12px, e só o de recorrentes tem
 * `.tot`/`.tot b`) — virou `.rectot`. `.tick` também colidia (28px × 30px, e só
 * o de recorrentes tem `:hover` e `.on{cursor:default}` — essa diferença é
 * FUNCIONAL: no recorrente, uma vez efetivado não dá mais pra clicar; no
 * plano, dá pra desmarcar. Juntar teria roubado esse afordance) — virou
 * `.rtick`. Já `.r` (a linha-base de plano/recorrentes) ficou compartilhado:
 * gap 13px×12px e padding "12px 15px"×"11px 14px" — 1px de diferença,
 * imperceptível, mesmo critério do `.sec-t`. `.r.done` já era idêntico nos
 * dois; `.r.off` (só recorrentes) e `.r.sug` (só plano) são modificadores
 * aditivos, sem conflito — os dois convivem na mesma seção.
 *
 * QUASE colidiu por PARECER igual: `.seg` de novo.html parecia idêntico ao
 * `.seg` de meta.html (já no ar, testado) — só de olhada rápida. Comparando
 * de verdade, meta tem `margin-bottom:8px` que falta no de novo, e o campo
 * seguinte de meta DEPENDE dessa margem. Como meta já está em produção,
 * mexer nela pra "unificar" seria arriscar uma tela que já funciona por uma
 * tela nova — o de novo virou `.seg2`. Lição: "parece igual" não é "é
 * igual" — sempre compare char a char, não de memória.
 *
 * **5ª leva:** `.bar` colidiu uma QUINTA vez — admin.html também tem barra de
 * progresso (uso do agente de IA por usuário, 7px, verde/âmbar/vermelho).
 * Mesmo padrão das quatro anteriores: renomeada pra `.usebar` em vez de
 * reusar `.bar` (que já é a barra de busca de transacoes.html). analise.html
 * não trouxe CSS próprio — o componente `Analise.mount` cuida de tudo, nada
 * pra migrar aqui.
 *
 * **6ª leva — achado maior: `.note` (bare, sem modificador) já colidia
 * silenciosamente havia DUAS levas, sem ninguém notar.** objetivos.html (2ª
 * leva) definia `.note{background:#eef4ff...}` solto, sem escopo — igual a
 * TODA colisão anterior, exceto que `.note` também é classe BASE de
 * `app.css` (usada por toda tela pra avisos, com modificadores `.info/.warn/
 * .err/.ok`). Como a regra de objetivos tinha a MESMA especificidade (uma
 * classe só) e carregava DEPOIS (screens.css vem depois de app.css em
 * app.html), ela vencia a cascata pra QUALQUER `<div class="note">` sem
 * modificador — não só em objetivos/investimentos.html, que é onde a cor
 * azul fazia sentido. Isso só virou visível nesta leva porque
 * compartilhado.html é a primeira tela convertida que usa `class="note"`
 * BARE esperando o padrão de app.css (sem cor) — ela teria herdado o azul de
 * objetivos calado. **Corrigido renomeando pra `.onote`** (objetivos +
 * investimentos, que já compartilhavam a regra) — libera `.note` bare pro
 * padrão de app.css, que é o que compartilhado.html (e o access.html de uma
 * leva futura) esperam. Lição: uma classe que também existe em app.css é
 * candidata a colisão mesmo sem "parecer" nome de tela — checar contra
 * app.css também, não só contra as outras telas já convertidas.
 *
 * **7ª leva:** `.btn-danger` era o MESMO tipo de colisão que `.note` — bare,
 * sem escopo, definido em TRÊS telas diferentes (admin.html, já shipado na
 * 5ª leva; access.html e profile.html, ambas nesta leva), cada uma com
 * padding/font-size/estados diferentes. Mantive o de admin.js como está (já
 * em produção) e dei nome próprio pros outros dois: `.accdanger` e
 * `.profdanger` — só profile.html tinha estados `:disabled`, então não dava
 * pra unificar com nenhum dos outros dois sem perder isso. `.r` colidiu de
 * novo — access.html trouxe um `.r` em BLOCO (header `.hd` + `.shareBox`
 * embaixo), estruturalmente diferente do `.r` linha-única de plano/
 * recorrentes E do `.shr` linha-única de compartilhado — virou `.accr`.
 * `.bar` colidiu pela SEXTA vez — a barra de uso do agente em profile.html
 * (9px), diferente das cinco variantes anteriores inclusive do `.usebar` de
 * admin.html (7px, mesmo tema "uso do agente", medida diferente) — virou
 * `.agbar`. Caso limpo desta leva: `.ag-top` de profile.html é IDÊNTICO ao
 * de admin.html — dedupe sem rename.
 *
 * `.top`/`.pgrid`/`.pj`/`.new`/`.r` colidiram de novo (a 3ª, 2ª, e mais uma
 * vez cada uma respectivamente) — índex.html trouxe `.top`/`.pgrid`/`.pj`
 * quase idênticos por nome mas diferentes por regra a projetos.html (que
 * entrou na MESMA leva) e ao `.top` já compartilhado; viraram `.gtop`/
 * `.gpgrid`/`.gpj` do lado do index (projetos.html manteve o nome canônico,
 * é a dona "de direito" de `.pj`/`.pgrid`). projetos.html também trouxe
 * `.new`, diferente do `.new` de cartoes.html (fundo transparente lá,
 * `var(--surface)` aqui) — virou `.pjnew`. compartilhado.html trouxe `.r`,
 * diferente do `.r` de plano/recorrentes.html — virou `.shr`. `.rad` foi o
 * primeiro caso de dedupe limpo desta leva: IDÊNTICO ao já compartilhado
 * (cartoes.html), só ganhando um modificador aditivo (`.rad.wrap`), sem
 * precisar renomear nada.
 */

/* ---------- dashboard.html ---------- */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.charts{grid-template-columns:1fr}}
.chart-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut{position:relative;width:210px;height:210px;flex-shrink:0}
.donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut .mid .v{font-size:17px;font-weight:800;letter-spacing:-.02em}
.donut .mid .t{font-size:11px;color:var(--muted)}
.leg{flex:1;min-width:150px;display:flex;flex-direction:column;gap:6px}
.leg .li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.leg .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.leg .nm{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg .vv{font-weight:700;font-size:12px}
.perf{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:700;font-size:14px;margin-bottom:22px}
.setup{text-align:left;max-width:660px;margin:0 auto;padding:6px 2px}
.setup h2{font-size:20px;font-weight:800;color:var(--text);margin:2px 0 4px}
.setup .lead{color:var(--muted);font-size:13.5px;margin-bottom:6px}
.step{display:flex;gap:14px;padding:16px 2px;border-top:1px solid var(--border)}
.step .mk{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;border:2px solid var(--border);color:var(--muted);background:var(--surface)}
.step .mk svg{width:17px;height:17px}
.step.done .mk{background:var(--green);border-color:var(--green);color:#fff}
.step.now .mk{border-color:var(--primary);color:var(--primary)}
.step.block{opacity:.55}
.step .bd{flex:1;min-width:0}
.step .st{font-weight:700;font-size:14.5px;color:var(--text)}
.step.done .st{color:var(--muted)}
.step .sd{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.step .warn{color:var(--amber);font-weight:600}
.step .acts{margin-top:11px;display:flex;gap:10px;flex-wrap:wrap}
.step .acts .btn{padding:8px 16px;font-size:13px}
.tag-opc{font-size:10.5px;font-weight:700;color:var(--muted);border:1px solid var(--border);
  border-radius:20px;padding:1px 8px;margin-left:7px;vertical-align:middle;letter-spacing:.02em}

/* ---------- transacoes.html ---------- */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.bar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.srch{background:#fff;border:none;box-shadow:var(--shadow);border-radius:22px;padding:10px 16px;font-size:14px;font-family:inherit;width:210px}
.srch:focus{outline:2px solid var(--primary-soft)}
.fat-row td{background:#faf8ff}
.lbl-fat{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.sem-cat{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:#8a5a00;
  background:#fff8e8;border:1px dashed #f0dfae;border-radius:12px;padding:3px 10px;cursor:help}
.acts{position:relative}
.acts button{background:none;border:none;color:var(--faint);cursor:pointer;font-size:17px;padding:2px 6px;border-radius:6px}
.acts button:hover{color:var(--primary);background:var(--surface-2)}
.menu{position:absolute;right:0;top:26px;background:#fff;border-radius:11px;box-shadow:var(--shadow-lg);padding:6px;z-index:10;min-width:130px}
.menu a{display:block;padding:8px 11px;border-radius:7px;font-size:13.5px;cursor:pointer}
.menu a:hover{background:var(--surface-2)}
.menu a.del{color:var(--red)}
.more{text-align:center;margin-top:14px}
tr.ign td{opacity:.5}
.ign-badge{font-size:10px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:1px}

/* ---------- contas.html ---------- */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.acc{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.acc .hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.acc .bank{width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acc .bank svg{width:19px;height:19px}
.acc .nm{font-weight:700;font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc .ln{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0}
.acc .ln .k{font-size:13px;color:var(--muted)}
.acc .ln .v{font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}
.acc .ln .v.green{color:var(--green)} .acc .ln .v.red{color:var(--red)}
.acc .ft{border-top:1px solid var(--border);margin-top:12px;padding-top:11px;display:flex;align-items:center;gap:8px}
.acc .ref{font-size:11.5px;color:var(--faint);flex:1}
.warn{background:#fff8e8;color:#8a5a00;border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;margin-bottom:18px}
.top{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.top h1{margin:0}
.top .btn{margin-left:auto;flex-shrink:0}
.acc .tags{display:flex;gap:5px;margin-left:auto;flex-shrink:0}
.acc .tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border-radius:8px;padding:2px 7px;white-space:nowrap}
.acc .tag.inv{background:#e7f7ef;color:#177a4f}
.acc.inv{border:1.5px solid #cdeadd}
.sec-t{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.06em;margin:24px 0 10px}
.rad{display:flex;gap:8px;margin-top:7px}
.rad label{flex:1;border:1.5px solid var(--border);border-radius:11px;padding:10px;cursor:pointer;text-align:center;font-size:13px;font-weight:700}
.rad label:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.rad input{display:none}
.rad .s{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.rad label:has(input:checked) .s{color:var(--primary)}
/* modificador de projetos.html (6ª leva) — .rad de lá é IDÊNTICO a este, só
   ganha isto a mais pra grade de moeda com muitas opções; aditivo, sem conflito */
.rad.wrap{flex-wrap:wrap}
.rad.wrap label{flex:0 0 calc(33.333% - 6px)}

/* ---------- cartoes.html ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:start}
.cc{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.cc .hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.cc .brand{width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc .brand svg{width:19px;height:19px}
.cc .nm{font-weight:700;font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .dots{background:none;border:none;color:var(--faint);cursor:pointer;font-size:17px;padding:2px 6px;border-radius:6px}
.cc .dots:hover{color:var(--primary);background:var(--surface-2)}
.cc .st{font-size:12px;font-weight:700;color:var(--muted);text-transform:none;margin-bottom:7px}
.cc .ln{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:13.5px}
.cc .ln .k{color:var(--muted)}
.cc .ln .v{font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}
.cc .ln .v.red{color:var(--red)}
/* era .bar no cartoes.html original — renomeado pra não colidir com o .bar
   (barra de busca/filtro) de transacoes.html, ver o aviso no topo do arquivo */
.limbar{height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin:10px 0 5px}
.limbar > i{display:block;height:100%;background:var(--teal);border-radius:4px}
.limbar.hi > i{background:var(--red)}
.lim{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.cc .ft{border-top:1px solid var(--border);margin-top:13px;padding-top:12px;display:flex;gap:8px}
.add-card{border:1.5px dashed var(--primary);border-radius:var(--radius);background:#fff;color:var(--primary);
  padding:26px;font-weight:700;font-size:14.5px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;min-height:150px}
.add-card:hover{background:var(--primary-soft)}
.add-card .p{font-size:26px;line-height:1}

/* ---------- faturas.html ---------- */
/* .tabs virou .fattabs (o padding e a margem divergiam do .tabs de
   categorias.html, ver o aviso no topo do arquivo) */
.fattabs{display:inline-flex;background:#fff;border-radius:24px;padding:4px;box-shadow:var(--shadow);margin-bottom:20px}
.fattabs button{border:none;background:none;border-radius:20px;padding:9px 24px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.fattabs button.on{background:var(--primary);color:#fff}
.cardblk{margin-bottom:26px}
.cardhd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cardhd .brand{width:34px;height:34px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
.cardhd .brand svg{width:17px;height:17px}
.cardhd .nm{font-weight:800;font-size:16px}
.cardhd .lim{margin-left:auto;font-size:12px;color:var(--muted)}
.fat{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:10px}
.fat .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fat .mes{font-weight:800;font-size:15px;text-transform:capitalize}
.fat .tot{margin-left:auto;font-weight:800;font-size:17px;font-family:var(--mono)}
.fat .tot.red{color:var(--red)} .fat .tot.green{color:var(--green)}
.fat .dts{font-size:12px;color:var(--muted);margin-top:5px}
/* era .bar no faturas.html original — ver o aviso no topo do arquivo */
.fatbar{height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin:10px 0 4px}
.fatbar > i{display:block;height:100%;background:var(--primary);border-radius:4px}
.fat .ft{display:flex;align-items:center;gap:9px;margin-top:11px}
.fat .rest{font-size:12.5px;color:var(--muted)}
.fat .ft .sp{margin-left:auto;display:flex;gap:8px}
.exps{margin-top:11px;border-top:1px solid var(--border);padding-top:9px;display:none}
.exps.on{display:block}
.exps .e{display:flex;align-items:center;gap:9px;font-size:13px;padding:5px 0}
.exps .e .d{color:var(--faint);font-size:11.5px;width:40px;flex-shrink:0}
.exps .e .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exps .e .v{font-family:var(--mono);color:var(--red);font-weight:600}
.exps .e .v.green{color:var(--green)}
.exps .e .tag{font-style:normal;font-size:10px;font-weight:700;color:var(--green);
  border:1px solid var(--green);border-radius:5px;padding:0 4px;margin-left:5px;vertical-align:1px}
.exps .cat-ic{width:22px;height:22px;font-size:10px}
.exps .e .ant{background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px;padding:0 5px;border-radius:5px;margin-left:4px}
.exps .e .ant:hover{color:var(--primary);background:var(--surface-2)}

/* ---------- categorias.html ---------- */
.topbar-cat{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.tabs{display:inline-flex;background:#fff;border-radius:24px;padding:4px;box-shadow:var(--shadow)}
.tabs button{border:none;background:none;border-radius:20px;padding:9px 26px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.tabs button.on{background:var(--primary);color:#fff}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cat-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.cat-card .hd{display:flex;align-items:center;gap:12px}
.cat-card .ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;font-weight:700;flex-shrink:0}
.cat-card .nm{font-weight:700;font-size:14.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-card .qt{font-size:11.5px;color:var(--muted)}
.cat-card .ed{background:none;border:none;color:var(--faint);cursor:pointer;font-size:15px;padding:4px 6px;border-radius:6px}
.cat-card .ed:hover{color:var(--primary);background:var(--surface-2)}
.subrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.subrow .s{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:2px 8px}
.swatches{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.sw-c{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;position:relative}
.sw-c.on::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700}
.emos{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.emo{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-size:17px}
.emo.on{border-color:var(--primary);background:var(--primary-soft)}

/* ---------- objetivos.html ---------- */
/* .top e .sec-t são os mesmos de contas.html (ver aviso no topo) — não repete */
/* era .note (bare) — renomeado pra .onote na 6ª leva: colidia em cheio com
   `.note` de app.css (o padrão base, SEM cor), que compartilhado.html (e no
   futuro access.html) usam de propósito, sem override. Ver o aviso no topo. */
.onote{background:#eef4ff;color:#2a4a86;border-radius:var(--radius-sm);padding:11px 14px;font-size:12.5px;line-height:1.5;margin-bottom:18px}
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.ob{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;position:relative}
.ob.ok{border:1.5px solid #a9e3c6}
.ob .hd{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ob .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;color:#fff}
.ob .nm{font-weight:700;font-size:15.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob .nm .d{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px}
.ob .dots{background:none;border:none;color:var(--faint);cursor:pointer;font-size:17px;padding:2px 6px;border-radius:6px}
.ob .dots:hover{color:var(--primary);background:var(--surface-2)}
.ob .vals{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.ob .g{font-size:21px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.ob .de{font-size:12.5px;color:var(--muted)}
/* era .bar no objetivos.html original — ver o aviso no topo do arquivo */
.goalbar{height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden;margin-bottom:7px}
.goalbar > i{display:block;height:100%;border-radius:5px;transition:width .3s}
.ob .ln{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:2px 0}
.ob .ln b{color:var(--text);font-family:var(--mono)}
.ob .ft{border-top:1px solid var(--border);margin-top:12px;padding-top:11px;font-size:11.5px;color:var(--faint)}
.ob .badge{position:absolute;top:14px;right:44px;font-size:10px;font-weight:800;border-radius:10px;padding:3px 8px;letter-spacing:.04em}
.badge.ok{color:#177a4f;background:#e7f7ef}
.badge.late{color:#b32b1f;background:#fdeceb}
.semlastro{background:#fff8e8;color:#8a5a00;border-radius:var(--radius-sm);padding:9px 11px;font-size:11.5px;line-height:1.45;margin-top:10px}
.sumiu{background:#fdeceb;color:#b32b1f;border-radius:var(--radius-sm);padding:9px 11px;font-size:11.5px;margin-top:10px}
.new{border:2px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  gap:8px;color:var(--muted);font-weight:700;font-size:14px;min-height:190px;cursor:pointer;background:transparent}
.new:hover{border-color:var(--primary);color:var(--primary)}
.picks{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.picks button{width:34px;height:34px;border-radius:9px;border:2px solid transparent;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;background:var(--surface-2)}
.picks button.on{border-color:var(--text)}
.picks .sw{border-radius:50%}
.tpl{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.tpl button{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:6px 12px;
  font-size:12px;cursor:pointer;font-family:inherit;color:var(--muted)}
.tpl button:hover{border-color:var(--primary);color:var(--primary)}

/* ---------- investimentos.html ---------- */
/* .top e .note são os mesmos de contas.html/objetivos.html (ver aviso no topo) — não repete */
/* barra aplicado × rendimento — o "de onde veio o saldo" */
.split{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-2);margin:12px 0 6px}
.split i{display:block;height:100%}
.split .ap{background:var(--blue)} .split .rd{background:var(--green)} .split .neg{background:var(--red)}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted)}
.legend b{color:var(--text)}
.legend .k{display:inline-flex;align-items:center;gap:5px}
.legend .dot{width:8px;height:8px;border-radius:50%}
.dot.ap{background:var(--blue)} .dot.rd{background:var(--green)} .dot.neg{background:var(--red)}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.iv{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.iv .hd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.iv .bank{width:34px;height:34px;border-radius:50%;background:#e7f7ef;color:#177a4f;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.iv .bank svg{width:17px;height:17px}
.iv .nm{font-weight:700;font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv .pct{font-size:13px;font-weight:800;font-family:var(--mono)}
.iv .pct.up{color:var(--green)} .iv .pct.down{color:var(--red)} .iv .pct.zero{color:var(--muted)}
.iv .big{font-size:22px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em;margin-top:4px}
.iv .ln{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:12.5px}
.iv .ln .k{color:var(--muted)}
.iv .ln .v{font-weight:700;font-family:var(--mono)}
.iv .ln .v.green{color:var(--green)} .iv .ln .v.red{color:var(--red)}
.iv .ft{border-top:1px solid var(--border);margin-top:12px;padding-top:11px;display:flex;align-items:center;gap:8px}
.iv .ref{font-size:11px;color:var(--faint);flex:1}
.diff{border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;margin-top:10px;line-height:1.5}
.diff.up{background:#e7f7ef;color:#177a4f} .diff.down{background:#fdeceb;color:#b32b1f} .diff.zero{background:var(--surface-2);color:var(--muted)}
/* alocação por classe */
.aloc{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-2);margin:12px 0 12px}
.aloc i{display:block;height:100%}
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.cl{display:flex;align-items:center;gap:8px;font-size:12.5px}
.cl .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.cl .n{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl .v{font-family:var(--mono);font-weight:700;font-size:12px}
.cl .p{color:var(--faint);font-size:11px;width:38px;text-align:right}
/* aplicações dentro da conta */
.apps{margin-top:11px;border-top:1px solid var(--border);padding-top:9px}
.ap{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}
.ap .dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.ap .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap .cls{font-size:10.5px;color:var(--faint)}
.ap .v{font-family:var(--mono);font-weight:600}
.ap .x{background:none;border:none;color:var(--faint);cursor:pointer;font-size:14px;padding:0 3px}
.ap .x:hover{color:var(--red)}
.nao{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:#8a5a00}
.addap{background:none;border:1px dashed var(--border);border-radius:8px;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 10px;margin-top:7px;width:100%}
.addap:hover{border-color:var(--primary);color:var(--primary)}

/* ---------- meta.html ---------- */
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:680px){.cfg-grid{grid-template-columns:1fr}}
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;margin-bottom:8px}
.seg button{background:none;border:none;color:var(--muted);font-size:12.5px;padding:7px 13px;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:600}
.seg button.on{background:var(--primary);color:#fff}
.fld{display:flex;align-items:center;gap:9px}
.fld input{width:130px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:15px;font-family:var(--mono);color:var(--text)}
.fld .u{color:var(--muted);font-size:13px} .fld .eq{color:var(--muted);font-size:12.5px}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:680px){.layers{grid-template-columns:1fr}}
.ly{background:var(--surface-2);border-radius:12px;padding:14px 16px}
.ly .t{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
.ly.efe .t{color:var(--green)} .ly.prog .t{color:var(--amber)} .ly.fut .t{color:var(--primary)}
.ly .l{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
.ly .l .k{color:var(--muted)} .ly .l .v{font-family:var(--mono);font-weight:700}
.chart{width:100%;height:auto;display:block;overflow:visible}
/* era .legend no meta.html original — colidia com o .legend de investimentos.html
   (regras diferentes), ver o aviso no topo do arquivo */
.mtlegend{display:flex;gap:15px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.mtlegend span{display:inline-flex;align-items:center;gap:6px}
.sw2{width:16px;border-top:3px solid;display:inline-block}
.verdict p{font-size:14.5px;margin-bottom:9px} .verdict b{font-weight:700}

/* ---------- plano.html ---------- */
.r{display:flex;align-items:center;gap:13px;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 15px;margin-bottom:7px}
.r.done{background:#f6fbf8}
/* palpite: sugere, mas não tica sozinho — marcar errado calado é pior que não marcar */
.r.sug{background:#fffdf7;border:1px solid #f0dfae}
/* .r.off é de recorrentes.html (recorrente ignorado) — modificador aditivo, sem conflito com .r.sug daqui */
.r.off{opacity:.5}
.via{font-size:10.5px;font-weight:700;color:#177a4f;background:#e7f7ef;border-radius:8px;padding:2px 7px;white-space:nowrap}
.via.fraco{color:#8a5a00;background:#fff8e8}
.tick{width:28px;height:28px;border-radius:9px;border:2px solid var(--border);background:#fff;cursor:pointer;flex-shrink:0;
  color:transparent;font-size:15px;display:flex;align-items:center;justify-content:center;font-weight:700}
.tick.on{background:var(--green);border-color:var(--green);color:#fff}
.r .mid{flex:1;min-width:0}
.r .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r .cad{font-size:11.5px;color:var(--muted);margin-top:2px}
.r .prev{text-align:right;font-size:11px;color:var(--muted)}
.r .prev b{display:block;font-size:14px;color:var(--text);font-family:var(--mono);font-weight:700}
.r .real{display:flex;align-items:center;gap:7px}
.r .real input{width:104px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-size:13.5px;font-family:var(--mono);text-align:right;color:var(--text)}
.var{font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;white-space:nowrap}
.var.maior{color:#b32b1f;background:#fdeceb} .var.menor{color:#177a4f;background:#e7f7ef} .var.igual{color:var(--muted);background:var(--surface-2)}
/* .bar2 NÃO é barra de progresso aqui — layout flex genérico. Colidiu de
   verdade com o .bar2 de recorrentes.html na 4ª leva — o de lá virou .rectot
   (ver aviso no topo do arquivo) */
.bar2{display:flex;align-items:center;gap:12px;margin-bottom:16px}

/* ---------- recorrentes.html ---------- */
.rule{background:#eef4ff;color:#2a4a86;border-radius:var(--radius-sm);padding:12px 15px;font-size:13px;line-height:1.55;margin-bottom:18px}
/* era .bar2 no recorrentes.html original — colidia com o .bar2 de plano.html (ver aviso no topo) */
.rectot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:18px}
.rectot .tot{font-size:12px;color:var(--muted)}
.rectot .tot b{color:var(--text);font-size:19px;font-weight:800;display:block;font-family:var(--mono)}
.rectot .tot b.green{color:var(--green)} .rectot .tot b.amber{color:#b57d00}
/* agrupado por CONTA — o recorrente vive dentro dela */
.grp{margin-bottom:22px}
.grph{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.grph .bank{width:30px;height:30px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.grph .bank svg{width:15px;height:15px}
.grph .nm{font-weight:800;font-size:14.5px}
.grph .qt{margin-left:auto;font-size:11.5px;color:var(--muted)}
/* .r/.r.done são os mesmos de plano.html (ver aviso no topo) — não repete. .r.off está lá também */
/* era .tick no recorrentes.html original — colidia com o .tick de plano.html,
   e a diferença é FUNCIONAL (ver aviso no topo), não só visual */
.rtick{width:30px;height:30px;border-radius:9px;border:2px solid var(--border);background:#fff;cursor:pointer;flex-shrink:0;
  color:transparent;font-size:15px;display:flex;align-items:center;justify-content:center;font-weight:700}
.rtick:hover{border-color:var(--green)}
.rtick.on{background:var(--green);border-color:var(--green);color:#fff;cursor:default}
.r .bd{display:flex;gap:7px;margin-top:3px;flex-wrap:wrap;align-items:center}
.r .val{font-family:var(--mono);font-weight:700;font-size:14px;text-align:right}
.r .acts{display:flex;gap:2px}
.r .acts button{background:none;border:none;color:var(--faint);cursor:pointer;font-size:11.5px;padding:4px 7px;border-radius:6px;font-family:inherit;font-weight:600}
.r .acts button:hover{color:var(--primary);background:var(--surface-2)}
.r input[type=checkbox]{width:19px;height:19px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.prev-lbl{font-size:11px;color:var(--faint)}
.prev-lbl.ok{color:#177a4f;font-weight:600}
.sec{margin-top:24px}
.sec h2{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.06em;margin-bottom:9px}
details summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:700;padding:6px 0;list-style:none}
details summary::-webkit-details-marker{display:none}

/* ---------- novo.html ---------- */
.wrap{max-width:520px}
.tabs4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:18px}
.tb{background:#fff;border:none;border-radius:12px;padding:12px 4px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;box-shadow:var(--shadow);font-family:inherit}
.tb.on.despesa{background:var(--red);color:#fff} .tb.on.receita{background:var(--green);color:#fff}
.tb.on.cartao{background:var(--amber);color:#fff} .tb.on.transferencia{background:var(--primary);color:#fff}
.amount{width:100%;background:none;border:none;border-bottom:2px solid var(--border);padding:6px 0 10px;
  font-size:34px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.amount:focus{outline:none;border-bottom-color:var(--primary)}
.amount.despesa{color:var(--red)} .amount.receita{color:var(--green)}
.amount.cartao{color:var(--amber)} .amount.transferencia{color:var(--primary)}
/* era .seg no novo.html original — PARECIA igual ao .seg de meta.html (já no
   ar), mas meta tem margin-bottom:8px que o de novo não tinha; meta.html
   depende dessa margem pro campo seguinte não colar. Como meta já está
   testado em produção, não arrisquei mexer nele — o de novo virou .seg2 */
.seg2{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.seg2 button{background:none;border:none;color:var(--muted);font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:600}
.seg2 button.on{background:var(--primary);color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.recent{margin-top:22px}
.ri{background:#fff;border-radius:11px;box-shadow:var(--shadow);padding:11px 14px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.ri .rd{color:var(--muted);font-size:11px}
.ri .rv.despesa{color:var(--red);font-weight:700} .ri .rv.receita{color:var(--green);font-weight:700}
.ri .rv.transferencia{color:var(--primary);font-weight:700}

/* ---------- admin.html ---------- */
.u-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.u-name{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.u-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
/* uso do agente — metadado (quanto), nunca conteúdo (o quê) */
.ag{margin-top:15px;padding-top:14px;border-top:1px solid var(--border)}
.ag-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ag-lbl{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.ag-use{font-size:13.5px;font-variant-numeric:tabular-nums}
.ag-use b{font-weight:800}
.ag-tot{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ag-tot.ok{color:var(--green)} .ag-tot.err{color:var(--red)}
/* era .bar no admin.html original — QUINTA colisão, ver o aviso no topo do arquivo */
.usebar{height:7px;background:var(--surface-2);border-radius:5px;overflow:hidden;margin:9px 0 11px}
.usebar i{display:block;height:100%;border-radius:5px;background:var(--green);transition:width .2s}
.usebar i.warn{background:var(--amber)} .usebar i.full{background:var(--red)}
.ag-cota{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);font-weight:600}
.ag-cota input{width:88px;padding:8px 10px;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.ag-cota .btn{padding:8px 16px;font-size:12.5px}
.btn-danger{background:#fff;color:var(--red);box-shadow:var(--shadow);padding:8px 16px;font-size:12.5px}
.btn-danger:hover{background:#fdeceb}

/* ---------- index.html (Geral) ---------- */
/* .top/.note/.pgrid/.pj renomeados pra .gtop/.gnote/.gpgrid/.gpj — colidiam
   de verdade com nomes já em uso (ver aviso no topo do arquivo, 6ª leva) */
.gtop{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.gtop .btn{margin-left:auto;flex-shrink:0;white-space:nowrap}
.hi{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:6px 0 4px}
.hi-sub{color:var(--muted);font-size:14px}
/* bloco de MOEDA — nunca soma nem converte entre eles */
.moeda-blk{margin-bottom:30px}
.moeda-hd{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.moeda-hd .sym{width:34px;height:34px;border-radius:10px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;flex-shrink:0}
.moeda-hd .nm{font-size:15px;font-weight:800}
.moeda-hd .qt{font-size:12.5px;color:var(--muted)}
.moeda-hd .tot{margin-left:auto;text-align:right}
.moeda-hd .tot .k{font-size:11px;color:var(--muted);font-weight:600;display:block}
.moeda-hd .tot .v{font-size:19px;font-weight:800;font-family:var(--mono);font-variant-numeric:tabular-nums}
.moeda-hd .tot .v.green{color:var(--green)} .moeda-hd .tot .v.red{color:var(--red)}
.gpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.gpj{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:17px 19px;
  display:block;border:1.5px solid transparent;transition:border-color .12s,transform .12s}
.gpj:hover{border-color:var(--primary);transform:translateY(-2px)}
.gpj .hd{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.gpj .nm{font-weight:700;font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpj .seg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border-radius:9px;padding:3px 8px;white-space:nowrap}
.gpj .ln{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0}
.gpj .ln .k{font-size:12.5px;color:var(--muted)}
.gpj .ln .v{font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px}
.gpj .ln .v.green{color:var(--green)} .gpj .ln .v.red{color:var(--red)} .gpj .ln .v.dash{color:var(--faint);font-weight:600}
.gpj .ft{border-top:1px solid var(--border);margin-top:11px;padding-top:10px;display:flex;align-items:center;gap:8px}
.gpj .ft .qt{font-size:11.5px;color:var(--faint);flex:1}
.gpj .ft .go{font-size:12.5px;font-weight:700;color:var(--primary)}
.gpj.new{border:2px dashed var(--border);box-shadow:none;background:transparent;display:flex;align-items:center;
  justify-content:center;gap:8px;color:var(--muted);font-weight:700;font-size:14px;min-height:158px;cursor:pointer}
.gpj.new:hover{border-color:var(--primary);color:var(--primary);transform:none}
.gnote{background:#eef4ff;color:#2a4a86;border-radius:var(--radius-sm);padding:11px 14px;font-size:12.5px;line-height:1.5;margin-top:6px}

/* ---------- projetos.html ---------- */
/* .pgrid/.pj são desta tela (nome canônico — quem colidiu foi index.html,
   renomeado acima). .rad é IDÊNTICO ao compartilhado (só ganhou .rad.wrap,
   aditivo, ver acima). .note virou .pjnote e .new virou .pjnew — ambos
   colidiam de verdade com nomes já em uso (ver aviso no topo). */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pj{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;position:relative}
.pj.on{outline:2px solid var(--primary)}
.pj .hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.pj .cur{width:40px;height:40px;border-radius:11px;background:var(--primary);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.pj .nm{font-weight:700;font-size:15.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj .ln{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0}
.pj .ln .k{font-size:13px;color:var(--muted)}
.pj .ln .v{font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px}
.pj .ft{border-top:1px solid var(--border);margin-top:12px;padding-top:11px;display:flex;align-items:center;gap:10px}
.pj .ft .btn-link{padding:0}
.pj .badge{position:absolute;top:14px;right:16px;font-size:10.5px;font-weight:800;color:var(--primary);
  background:var(--primary-soft);border-radius:10px;padding:3px 9px;letter-spacing:.04em}
.pjnote{background:#eef4ff;color:#2a4a86;border-radius:var(--radius-sm);padding:12px 15px;font-size:13px;margin-bottom:18px;line-height:1.5}
.pjnew{background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius);padding:18px 20px;
  display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;color:var(--muted);font-weight:700;font-size:14px;min-height:150px}
.pjnew:hover{border-color:var(--primary);color:var(--primary)}

/* ---------- compartilhado.html ---------- */
/* .page{max-width:860px} original virou .comp escopado (ver o comentário no
   topo de compartilhado.js — .page é a classe base de TODA tela). .r/.r .nm/
   .r .meta viraram .shr/.shr .nm/.shr .meta — colidiam de verdade com o .r de
   plano/recorrentes.html (ver aviso no topo do arquivo). .note NÃO precisou
   de nome novo: com o .onote de objetivos/investimentos liberando o `.note`
   bare, esta tela usa o padrão de app.css direto, como sempre foi. */
.comp{max-width:860px}
.shr{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.shr .nm{font-weight:700;font-size:13.5px}
.shr .meta{color:var(--muted);font-size:11.5px;margin-top:2px}
.proj-blk{margin-bottom:26px}
.proj-blk h3{margin:0 0 4px;font-size:15.5px}
.proj-blk .sub{color:var(--muted);font-size:12px;margin-bottom:10px}

/* ---------- access.html ---------- */
/* .page{max-width:720px} virou .accw escopado (mesmo padrão de .comp/.profw
   — ver o comentário no topo de access.js). .r (bloco com .hd + .shareBox
   embaixo) virou .accr — colidia de verdade com o .r de plano/recorrentes
   (linha flat, sem sub-card) e com o .shr de compartilhado (linha flex
   simples). .btn-danger virou .accdanger — colidia com o de admin.html
   (já shipado, 5ª leva) e o de profile.html (mesma leva, com :disabled). */
.accw{max-width:720px}
.accr{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px}
.accr .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.accr .nm{font-weight:700;font-size:13.5px}
.accr .meta{color:var(--muted);font-size:11.5px;margin-top:2px}
.accr .acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.accdanger{background:#fff;color:var(--red);box-shadow:var(--shadow);padding:6px 13px;font-size:12px}
.accdanger:hover{background:#fdeceb}
.shareBox{border-top:1px solid var(--border);margin-top:11px;padding-top:11px}
.shareLbl{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:7px}
.projPick{display:flex;flex-wrap:wrap;gap:7px}
.pj-ck{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:14px;
  padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer;background:var(--surface)}
.pj-ck:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.pj-ck input{margin:0;accent-color:var(--primary)}
.shareMsg{font-size:11.5px;margin-top:6px;min-height:14px}
.shareMsg.ok{color:var(--green)} .shareMsg.err{color:var(--red)}
.shareEmpty{font-size:12px;color:var(--muted)}

/* ---------- profile.html ---------- */
/* .page{max-width:560px} virou .profw. .ag-top é IDÊNTICO ao de admin.html
   — dedupe sem rename (única sub-parte do .ag-* de admin que também aparece
   aqui). .bar virou .agbar — SEXTA colisão do nome (9px, diferente das
   cinco variantes já documentadas — inclusive do .usebar de admin, 7px).
   .btn-danger virou .profdanger — é o único dos três (admin/access/profile)
   com estados :disabled, não dava pra reusar os outros dois sem perder isso. */
.profw{max-width:560px}
.card .btn{margin-top:18px}
.ag-big{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ag-of{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.agbar{height:9px;background:var(--surface-2);border-radius:6px;overflow:hidden;margin:11px 0 7px}
.agbar i{display:block;height:100%;border-radius:6px;background:var(--green);transition:width .2s}
.agbar i.warn{background:var(--amber)} .agbar i.full{background:var(--red)}
.ag-sub{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ag-row{display:flex;gap:9px;align-items:flex-end}
.ag-row input{flex:1}
.ag-row .btn{margin-top:0;flex-shrink:0}
.ag-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
/* backup: os dois lados lado a lado — restaurar substitui, então ele
   precisa ver o que volta E o que vai embora, não só o que volta. */
.bk-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0 14px;align-items:center;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 16px;margin:16px 0 0}
.bk-h{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-bottom:8px}
.bk-h.r{text-align:right}
.bk-l{font-size:13px;color:var(--muted);padding:4px 0}
.bk-v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;padding:4px 0}
.bk-v.r{text-align:right}
.bk-v.zero{color:var(--faint);font-weight:600}
.bk-arrow{color:var(--faint);font-size:14px;text-align:center}
.danger h2{color:var(--red)}
.z-t{font-size:14px;font-weight:800;margin-bottom:5px}
.z-p{font-size:12.5px;color:var(--muted);line-height:1.6}
.zero-n{border-radius:var(--radius-sm);padding:11px 13px;font-size:12.5px;line-height:1.55;margin-top:12px}
.zero-n.pode{background:#e7f7ef;color:#177a4f}     /* dá pra voltar */
.zero-n.nao{background:#fdeceb;color:#b32b1f}       /* é definitivo */
.ck.opt{margin-top:0;align-items:flex-start}
.ck.opt input{margin-top:2px}
.ck.opt .o-x{display:block;margin-top:3px;font-style:normal;color:var(--muted);font-size:11.5px;line-height:1.5}
.profdanger{background:#fff;color:var(--red);box-shadow:var(--shadow)}
.profdanger:hover{background:#fdeceb}
.profdanger:disabled{opacity:.45;cursor:default}
.profdanger:disabled:hover{background:#fff}

/* ---------- importar.html ---------- */
/* .page{max-width:860px} virou .impw — mesmo valor do .comp de
   compartilhado.html por coincidência, mas telas sem relação, nome próprio.
   Nenhuma outra classe daqui colidiu — .drop/.sum/.dupOpts/.sub/.lin/.lista/
   #pagBox/.pag-t/.barra eram todas nomes livres (ver aviso no topo). */
.impw{max-width:860px}
.drop{border:2px dashed var(--border);border-radius:var(--radius);padding:38px 20px;text-align:center;
  cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s}
.drop:hover,.drop.on{border-color:var(--primary);background:var(--primary-soft)}
.drop .ic{font-size:30px}
.drop .t{font-size:15px;font-weight:700;margin-top:8px}
.drop .s{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:18px 0}
.sum b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.sum span{font-size:11.5px;color:var(--muted)}
.sum div{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px}
.sum .novo b{color:var(--green)} .sum .rep b{color:var(--muted)}
.sum .conh b{color:var(--primary)} .sum .ined b{color:var(--amber)}
.sum .fut b{color:var(--teal)} .sum .gem b{color:var(--amber)}
/* a linha do gêmeo: mesma família visual da parcela (.sub) — pendurada na
   linha de cima, recuada, sem borda entre as duas. */
.dupOpts{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.dupOpts label{font-size:11.5px;font-weight:700;color:var(--text)}
.sub .ja-tem{color:var(--muted);line-height:1.5}
.sub .ja-tem b{color:var(--text)}
/* a parcela: pendurada na linha da compra, recuada, e sem borda em cima —
   pra ler como "isto é sobre a linha de cima", não como outro lançamento */
.sub{display:flex;flex-direction:column;gap:2px;padding:0 12px 9px 38px;font-size:12px;
  color:var(--muted);border-bottom:1px solid var(--border)}
.sub label{display:flex;align-items:center;gap:7px;cursor:pointer}
.sub input{width:14px;height:14px;accent-color:var(--primary);cursor:pointer}
.sub b{color:var(--text)}
.sub i{font-style:normal;font-size:11px;color:#8a5a00;padding-left:21px}
.sub.duvida{background:#fffdf7}
.lin{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px}
.lin:last-child{border-bottom:none}
.lin:has(+.sub){border-bottom:none}   /* a parcela é da linha de cima: sem risco entre as duas */
.lin.ja{opacity:.45}
/* palpite: fundo âmbar, igual ao Plano. Sugere, não decide. */
.lin.sug{background:#fffdf7}
.lin input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.lin .d{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}
.lin .x{flex:1;min-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin select.cat{width:158px;flex-shrink:0;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:6px 9px;font-family:inherit;font-size:12.5px;color:var(--text);cursor:pointer}
.lin select.cat:focus{outline:none;border-color:var(--primary);background:#fff}
/* linha já importada: categoria vira texto, não campo */
.lin .cat-ro{width:158px;flex-shrink:0;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 0}
.lin .sn{font-size:10.5px;font-weight:700;white-space:nowrap;width:118px;flex-shrink:0;text-align:right}
.lin .sn.ok{color:#177a4f} .lin .sn.talvez{color:#8a5a00}
.lin .sn.novo{color:var(--amber)} .lin .sn.ja{color:var(--faint)}
.lin .v{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;width:96px;text-align:right;flex-shrink:0}
.lin .v.d-{color:var(--red)} .lin .v.r-{color:var(--green)}
.lista{max-height:420px;overflow-y:auto;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border)}
.lin input[type=checkbox]:disabled{opacity:.35;cursor:not-allowed}
#pagBox{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.pag-t{font-size:13.5px;font-weight:800;margin-bottom:5px}
.barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
