/* Dark é o padrão; claro é opção (PRODUCT.md) — variáveis do claro em html[data-theme=light] */
  /* --faint (usado só em ".field .opcional") subiu em três dos quatro combos pro cartão de
     login em vidro (azul/escuro já passava): sobre --vidro-folha o valor antigo caía a
     ~3,7:1‑4,0:1, abaixo do mínimo de 4,5:1. */
  :root{
    --apple-fundo:#fff;--apple-texto:#000;
    --bg:#04100C;
    --surface:rgba(12,36,29,.92); --surface-solid:#0C241D; --surface-2:#10322A;
    --line:#1B3D33; --line-strong:#2A5446; --border:#1B3D33;
    --ink:#EAFFF6; --text:#EAFFF6; --muted:#86AA9A; --faint:#64887A;
    --brand:#14B39A; --brand-600:#0D8577; --brand-700:#0C6350; --brand-900:#0A3F30;
    --brand-soft:#0A3F30; --accent:#3AD17E;
    --profit:#35D68A; --warn:#E0A83A;
    --green:#35D68A; --green-soft:#0C2F1E; --red:#fb7185; --red-soft:#33151f;
    --amber:#E0A83A; --amber-soft:#33260F; --blue:#3AA0E0; --blue-soft:#0E2735;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 28px rgba(1,10,7,.45);
    --radius:16px; --radius-sm:11px;
    --chart-1:#14B39A; --chart-2:#3AA0E0; --chart-3:#9B7FF0; --chart-4:#E0709A;
    --c1:#14B39A; --c2:#3AA0E0; --c3:#9B7FF0; --c4:#E0709A; --c5:#E0A83A; --c6:#3AD17E; --c7:#E08A54; --c8:#8FA6B2;
    /* série do gráfico — gasto azul × corrigido verde (dataviz) */
    --chart-rec:#3AD17E; --chart-gasto:#3AA0E0; --chart-desp:#E0709A;
    /* cores compostas do skin (glow, saldo, FAB, splash, globo) — RGB cru p/ rgba() */
    --brand-rgb:20,179,154; --accent-rgb:58,209,126;
    --glow-1:rgba(20,179,154,.18); --glow-2:rgba(58,209,126,.10);
    /* topo do degradê do tt no título do login (embaixo vai o --accent) */
    --realce-0:#B8F5D2;
    --saldo-a:#0D8577; --saldo-b:#0C6350; --saldo-border:rgba(61,214,187,.35); --saldo-shadow:rgba(13,133,119,.35);
    --btn-ink:#04100C; --chip-on-ink:#8FE8D5;
    --side-bg:rgba(7,26,20,.78); --side-on-ink:#C7F5E8;
    /* Liquid Glass: material da camada de navegação (abas, +, itens da barra, sheets, diálogos).
       --vidro é o comum; --vidro-folha, mais denso, leva formulário por cima; --vidro-tinta é o
       vidro da marca (botão +). --vidro-brilho desenha a luz na borda; a sombra afasta do conteúdo. */
    --vidro:rgba(8,26,20,.40); --vidro-folha:rgba(10,30,24,.72);
    /* --vidro-luz: brilho dentro do filtro escurece o que passa por baixo do vidro no escuro
       e clareia no claro — truque da Apple pra manter o rótulo legível com preenchimento mais fino */
    /* rótulo inativo da cápsula (--text, iOS 26) ≥4,5:1 já no --vidro mais transparente (mín. 9,92 sobre o card de saldo) */
    --vidro-luz:.78;
    --vidro-tinta:rgba(20,179,154,.82); --vidro-tinta-ink:#04100C;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.10);
    --vidro-sombra:0 10px 30px rgba(0,0,0,.35);
    --globe-land-rgb:20,179,154; --globe-hi-rgb:168,255,224; --globe-ocean-rgb:15,124,106;
    --globe-halo-rgb:20,179,154; --globe-ring-rgb:58,209,126;
  }
  /* Tema claro — mesmo esqueleto de variáveis, valores validados p/ contraste AA */
  html[data-theme="light"]{
    --apple-fundo:#000;--apple-texto:#fff;
    --bg:#EDF5F1;
    --surface:rgba(255,255,255,.92); --surface-solid:#ffffff; --surface-2:#E2EFE8;
    --line:#C6DCD1; --line-strong:#9FBFB0; --border:#C6DCD1;
    --ink:#13261E; --text:#13261E; --muted:#4D685C; --faint:#5F7A6D;
    --brand:#0B7A68; --brand-600:#096453; --brand-700:#075243; --brand-900:#D6F0E7;
    --brand-soft:#D6F0E7; --accent:#177A4A;
    --profit:#0E7A41; --warn:#8A5A06;
    --green:#0E7A41; --green-soft:#D7F2E2; --red:#c22e55; --red-soft:#fadde5;
    --amber:#8A5A06; --amber-soft:#F5ECD2; --blue:#1F6FA8; --blue-soft:#DCEBF7;
    --shadow:0 1px 2px rgba(20,43,35,.08),0 8px 24px rgba(20,43,35,.12);
    --chart-1:#0B7A68; --chart-2:#1F6FA8; --chart-3:#6D4FC9; --chart-4:#B8437C;
    --c1:#0B7A68; --c2:#1F6FA8; --c3:#6D4FC9; --c4:#B8437C; --c5:#8A5A06; --c6:#177A4A; --c7:#B05A1E; --c8:#5C6B80;
    --chart-rec:#177A4A; --chart-gasto:#1F6FA8; --chart-desp:#B8437C;
    --glow-1:rgba(11,122,104,.12); --glow-2:rgba(23,122,74,.08);
    --btn-ink:#fff; --side-bg:rgba(255,255,255,.72);
    /* rótulo inativo da cápsula (--text, iOS 26) ≥4,5:1 já no --vidro mais transparente (mín. 7,43 sobre o card de saldo) */
    --vidro:rgba(246,250,248,.55); --vidro-folha:rgba(250,253,251,.78); --vidro-luz:1.1;
    --vidro-tinta:rgba(11,122,104,.88); --vidro-tinta-ink:#fff;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(20,43,35,.10);
    --vidro-sombra:0 8px 26px rgba(20,43,35,.16);
  }
  /* ===== Skin Azul (paleta original) — mesmo esqueleto de variáveis ===== */
  html[data-skin="azul"]{
    --bg:#070c18;
    --surface:rgba(17,26,46,.92); --surface-solid:#111a2e; --surface-2:#182338;
    --line:#243250; --line-strong:#3a56a0; --border:#243250;
    --ink:#eef4fb; --text:#eef4fb; --muted:#a3b4ca; --faint:#6e82a0;
    --brand:#5b8cff; --brand-600:#3f66d9; --brand-700:#2c4fb0; --brand-900:#16244a;
    --brand-soft:#16244a; --accent:#a78bfa;
    --profit:#4ade80; --warn:#fbbf24;
    --green:#4ade80; --green-soft:#0c2b1c; --red:#fb7185; --red-soft:#33151f;
    --amber:#fbbf24; --amber-soft:#33280f; --blue:#60a5fa; --blue-soft:#122238;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 28px rgba(2,8,24,.45);
    --chart-1:#5b8cff; --chart-2:#22d3ee; --chart-3:#a78bfa; --chart-4:#f472b6;
    --c1:#5b8cff; --c2:#22d3ee; --c3:#a78bfa; --c4:#f472b6; --c5:#fbbf24; --c6:#4ade80; --c7:#fb923c; --c8:#94a3b8;
    --chart-rec:#2eae5e; --chart-gasto:#60a5fa; --chart-desp:#e0507f;
    --brand-rgb:91,140,255; --accent-rgb:167,139,250;
    --glow-1:rgba(37,72,180,.32); --glow-2:rgba(84,38,160,.22);
    --realce-0:#D4E0FF;
    --saldo-a:#2450c9; --saldo-b:#5b2fd1; --saldo-border:rgba(120,150,255,.35); --saldo-shadow:rgba(48,80,220,.35);
    /* tinta escura: branco sobre o #5b8cff dá 3,2:1; esta dá 6,2:1 */
    --btn-ink:#070c18; --chip-on-ink:#a8c2ff;
    --side-bg:rgba(11,18,36,.78); --side-on-ink:#cfe0ff;
    --vidro:rgba(10,16,32,.40); --vidro-folha:rgba(14,22,40,.72); --vidro-luz:.78;
    --vidro-tinta:rgba(59,108,240,.85); --vidro-tinta-ink:#fff;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.10);
    --vidro-sombra:0 10px 30px rgba(0,0,0,.4);
    --globe-land-rgb:96,140,255; --globe-hi-rgb:160,196,255; --globe-ocean-rgb:78,114,224;
    --globe-halo-rgb:58,100,245; --globe-ring-rgb:100,140,255;
  }
  html[data-skin="azul"][data-theme="light"]{
    --bg:#eef2f9;
    --surface:rgba(255,255,255,.92); --surface-solid:#ffffff; --surface-2:#e7edf7;
    --line:#cdd8e8; --line-strong:#9fb3d4; --border:#cdd8e8;
    --ink:#16233c; --text:#16233c; --muted:#556685; --faint:#617594;
    --brand:#3560cf; --brand-600:#2b4fb0; --brand-700:#223f92; --brand-900:#dde7fb;
    --brand-soft:#dde7fb; --accent:#6d4fc9;
    --profit:#0e7a41; --warn:#8a5a06;
    --green:#0e7a41; --green-soft:#d7f2e2; --red:#c22e55; --red-soft:#fadde5;
    --amber:#8a5a06; --amber-soft:#f8ecc9; --blue:#2a63c4; --blue-soft:#dce9fa;
    --shadow:0 1px 2px rgba(23,43,77,.08),0 8px 24px rgba(23,43,77,.12);
    --chart-1:#3560cf; --chart-2:#0d7f95; --chart-3:#6d4fc9; --chart-4:#c23d82;
    --c1:#3560cf; --c2:#0d7f95; --c3:#6d4fc9; --c4:#c23d82; --c5:#8a5a06; --c6:#0e7a41; --c7:#b04e0c; --c8:#5c6b80;
    --chart-rec:#187a44; --chart-gasto:#2a63c4; --chart-desp:#c22759;
    --glow-1:rgba(91,140,255,.14); --glow-2:rgba(140,90,220,.09);
    --btn-ink:#fff; --side-bg:rgba(255,255,255,.72);
    /* rótulo inativo da cápsula (--text, iOS 26) ≥4,5:1 já no --vidro mais transparente (mín. 7,34 sobre o card de saldo) */
    --vidro:rgba(247,249,253,.58); --vidro-folha:rgba(251,252,255,.80); --vidro-luz:1.1;
    --vidro-tinta:rgba(53,96,207,.88); --vidro-tinta-ink:#fff;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(23,43,77,.10);
    --vidro-sombra:0 8px 26px rgba(23,43,77,.16);
  }
  /* Molas no padrão da Apple (scripts/molas.mjs): amortecimento 1 é o padrão, sem quique;
     a de quique (0,8) só entra depois de gesto com impulso. Recuo via @supports porque
     declaração de recuo não funciona através de var(): sem linear(), fica a curva suave. */
  :root{--mola:cubic-bezier(.2,.8,.2,1);--mola-dur:.35s;--mola-quique:cubic-bezier(.2,.8,.2,1);--mola-quique-dur:.3s;--vidro-filtro:saturate(180%) blur(24px) brightness(var(--vidro-luz));--vidro-filtro-forte:saturate(180%) blur(40px) brightness(var(--vidro-luz))}
  @supports (transition-timing-function:linear(0, 1)){
    :root{
    --mola:linear(0, 0.0351, 0.1165, 0.2184, 0.3254, 0.4282, 0.5222, 0.6053, 0.6769, 0.7375, 0.7881, 0.83, 0.8642, 0.892, 0.9144, 0.9324, 0.9468, 0.9582, 0.9672, 0.9744, 0.98, 0.9844, 0.9879, 0.9906, 0.9927, 0.9944, 0.9956, 0.9966, 0.9974, 0.998, 0.9985, 0.9988, 1); --mola-dur:0.52s;
    --mola-quique:linear(0, 0.0312, 0.1079, 0.2097, 0.322, 0.4345, 0.5407, 0.6365, 0.72, 0.7907, 0.8489, 0.8956, 0.932, 0.9597, 0.9801, 0.9945, 1.0042, 1.0103, 1.0136, 1.015, 1.015, 1.0142, 1.0128, 1.0112, 1.0094, 1.0078, 1.0062, 1.0049, 1.0037, 1.0027, 1.0019, 1.0013, 1); --mola-quique-dur:0.41s;
    }
  }
  @media (prefers-reduced-motion: reduce){ :root{--mola-dur:0s;--mola-quique-dur:0s} }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;touch-action:manipulation} /* mata zoom por duplo-toque (cara de app) */
  /* Logotipo — Hanken Grotesk 800, servida do próprio repo (offline é sagrado:
     nada de CDN de fonte). Subset latino, 14KB, precarregada no sw.js.
     SIL OFL 1.1 — licença em fontes/OFL.txt. */
  @font-face{
    font-family:'Hanken Grotesk';
    font-style:normal;
    font-weight:800;
    font-display:swap;
    src:url('fontes/hanken-grotesk-800.woff2') format('woff2');
  }
  /* A marca é a palavra em caixa baixa com o duplo T em esmeralda — os dois "t"
     formam o pórtico. text-transform:none é trava: em caixa alta o efeito morre. */
  .logotipo{
    font-family:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;
    font-weight:800;letter-spacing:-.03em;line-height:1;
    text-transform:none!important;color:var(--text);
  }
  .logotipo .tt,.logotipo .pt{color:var(--brand)}

  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:var(--bg);
    color:var(--text); line-height:1.5; font-size:16.5px;
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color:transparent;
  }
  /* brilho como camada própria, pintada uma vez: sem "attachment fixo" no fundo do body,
     que o iOS repinta a cada quadro de rolagem e deixa a página "travada". */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(1100px 750px at 85% -5%, var(--glow-1), transparent 62%),
      radial-gradient(900px 700px at -10% 105%, var(--glow-2), transparent 60%);
  }
  #globe{position:fixed;inset:0;z-index:0;pointer-events:none}
  html[data-theme="light"] #globe{opacity:.4} /* globo segue o skin (globe.js lê as vars); no claro vira marca-d'água */
  /* chrome de interface (não é texto de dado): sem seleção nem menu de toque longo.
     Só no celular — no desktop o usuário seleciona/copia texto normalmente, inclusive da lista. */
  @media (max-width:899px){
    button,nav.tabs,header.top,.back,ul.list li,.chip,.chip2{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  }
  .app{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:16px 16px 8px}
  header.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-top:env(safe-area-inset-top)}
  header.top h1{font-size:20px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
  .nav-voltar,.nav-titulo,.titulo-grande{display:none} /* escondidos por padrão; o bloco de vidro da barra (mais abaixo) os liga em toda largura */
  .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-700));display:grid;place-items:center;color:#fff;font-size:16px}
  section.view{display:none;animation:fade var(--mola-dur) var(--mola)}
  section.view.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  .cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow)}
  .card .k-label{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);font-weight:500;margin-bottom:7px}
  .card .k-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px}
  .card .k-val{font-size:25px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .card .k-val.sm{font-size:21px}
  .card.big{grid-column:1 / -1}
  .card.saldo{background:linear-gradient(140deg,var(--saldo-a),var(--saldo-b));border:1px solid var(--saldo-border);color:#fff;box-shadow:0 8px 32px var(--saldo-shadow)}
  .card.saldo .k-label{color:rgba(255,255,255,.88)}
  .card.saldo .k-ic{background:rgba(255,255,255,.2)}
  .card.saldo .k-val{font-size:36px}
  .card.saldo .k-sub{font-size:13.5px;color:rgba(255,255,255,.88);margin-top:4px}
  .pos{color:var(--green)} .neg{color:var(--red)}
  .ic-green{background:var(--green-soft);color:var(--green)}
  .ic-red{background:var(--red-soft);color:var(--red)}
  .ic-amber{background:var(--amber-soft);color:var(--amber)}
  .ic-blue{background:var(--blue-soft);color:var(--blue)}
  .ic-brand{background:var(--brand-soft);color:var(--brand)}

  .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px;margin-bottom:14px}
  .panel h2{font-size:15.5px;font-weight:650;margin-bottom:13px;display:flex;align-items:center;justify-content:space-between}
  .panel h2 .muted{font-size:13px;font-weight:500;color:var(--muted)}

  /* toggle de tema — pílula lua/sol */
  .tema-linha{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:15px}
  .tgl-tema{position:relative;width:64px;height:32px;border-radius:999px;border:1px solid var(--border);
    background:var(--surface-2);cursor:pointer;padding:0;flex:none}
  .tgl-tema::before{content:"";position:absolute;inset:-8px} /* alvo de toque ≥44px */
  .tgl-tema .slot{position:absolute;top:3px;width:24px;height:24px;display:grid;place-items:center;
    color:var(--muted);opacity:.5}
  .tgl-tema .slot.esq{left:4px} .tgl-tema .slot.dir{right:4px}
  .tgl-tema .bola{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
    background:var(--surface-solid);border:1px solid var(--border);display:grid;place-items:center;
    color:var(--text);z-index:1}
  html[data-theme="light"] #ajTema .bola{transform:translateX(32px)}
  .tgl-tema svg.ico{width:15px;height:15px}
  .tgl-tema:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .tgl-tema.on .bola{transform:translateX(32px)}
  .tgl-tema.on{border-color:var(--brand)}
  /* no toque a bolinha vira uma lente de vidro que cresce (o controle "vira vidro enquanto você
     mexe", iOS 26) e volta com mola ao soltar */
  .tgl-tema .bola{transition:transform var(--mola-dur) var(--mola)}
  .tgl-tema:active .bola{transform:scale(1.2);background:var(--vidro);-webkit-backdrop-filter:var(--vidro-filtro);backdrop-filter:var(--vidro-filtro);box-shadow:var(--vidro-brilho),var(--vidro-sombra)}
  .tgl-tema.on:active .bola,html[data-theme="light"] #ajTema:active .bola{transform:translateX(32px) scale(1.2)}

  /* donut */
  .donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .donut{position:relative;width:132px;height:132px;flex:0 0 auto}
  .donut .center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none} /* inset:0 cobre o anel inteiro: sem isso o texto do meio come o clique nas fatias */
  .donut .center small{font-size:11px;color:var(--muted);display:block}
  .donut .center b{font-size:15px;font-variant-numeric:tabular-nums}
  .legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:8px}
  .legend .row{display:flex;align-items:center;gap:8px;font-size:13px}
  .legend .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
  .legend .row .nm{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .legend .row .vl{color:var(--muted);font-variant-numeric:tabular-nums}

  ul.list{list-style:none;display:flex;flex-direction:column;gap:2px}
  ul.list li{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid var(--border)}
  ul.list li:last-child{border-bottom:0}
  .av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:0 0 auto}
  .li-main{flex:1;min-width:0}
  .li-main .t{font-size:15.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .li-main .s{font-size:13px;color:var(--muted)}
  .li-val{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
  .li-del{border:0;background:transparent;color:var(--muted);font-size:17px;cursor:pointer;padding:4px 6px;border-radius:8px}
  .li-del:active{background:var(--surface-2);color:var(--red)}
  .tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px}
  .tag.ok{background:var(--green-soft);color:var(--green)}
  .tag.pend{background:var(--amber-soft);color:var(--amber)}
  .tag.late{background:var(--red-soft);color:var(--red)}
  .gasto-meta{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:4px;align-items:center}
  .gasto-meta>span{max-width:100%;overflow-wrap:anywhere}
  .gasto-meta .tag,.gasto-data{display:inline-block;white-space:nowrap;flex-shrink:0}
  @media(max-width:600px){
    ul.list li.gasto-row{display:grid;grid-template-columns:38px minmax(0,1fr) 44px;gap:6px 10px;align-items:start}
    .gasto-row>.av{grid-column:1;grid-row:1/3}
    .gasto-row>.li-main{grid-column:2;grid-row:1}
    .gasto-row>.li-main .t{white-space:normal;overflow-wrap:anywhere}
    .gasto-row>.li-val{grid-column:2;grid-row:2;white-space:normal;overflow-wrap:anywhere}
    .gasto-row>.li-del{grid-column:3;grid-row:1/3;min-height:44px;min-width:44px}
  }
  /* capa da barra de status: vale no app nativo (Capacitor) e no PWA instalado
     (nativo.js marca as duas classes em <html> — display-mode:standalone não casa no WKWebView) */
  html.nativo body::after, html.standalone body::after{
    content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--bg);z-index:90;pointer-events:none
  }

  .empty{text-align:center;padding:30px 16px;color:var(--muted)}
  .empty .big{font-size:34px;margin-bottom:8px}
  .empty p{font-size:13.5px}

  /* bottom nav: só a estrutura; o vidro e a cápsula flutuante moram no bloco do celular
     (@media screen and (max-width:899px)), e no desktop a barra some */
  nav.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40}
  nav.tabs button{flex:1;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;cursor:pointer;font-size:11.5px;font-weight:500;border-radius:12px}
  nav.tabs button .ti{font-size:21px;line-height:1}
  nav.tabs button.on{color:var(--brand)}

  /* FAB */
  .fab{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;border:0;background:var(--vidro-tinta);color:var(--vidro-tinta-ink);font-size:30px;-webkit-backdrop-filter:var(--vidro-filtro);backdrop-filter:var(--vidro-filtro);box-shadow:var(--vidro-brilho),var(--vidro-sombra);transition:transform var(--mola-dur) var(--mola);cursor:pointer;z-index:41;display:grid;place-items:center}
  /* na tela da obra o FAB flutua sobre o conteúdo: padding extra pro fim da página nunca ficar preso embaixo dele */
  body.com-fab{padding-bottom:calc(156px + env(safe-area-inset-bottom))}
  .fab:active{transform:scale(.94);transition:transform .1s ease-out}
  /* materializa ao aparecer (display none → grid dispara a animação); o toque encolhe na hora */
  .fab:not(.hidden){animation:materializa var(--mola-dur) var(--mola)}
  @keyframes materializa{from{opacity:0;transform:scale(.6)}}
  .esfumado-abas{display:none}

  /* modal */
  /* --vvh/--vvtop vêm do visualViewport (app.js): no iPhone o teclado NÃO encolhe a
     viewport de elementos fixed, então sem isso o sheet inteiro fica atrás do teclado. */
  .backdrop{position:fixed;left:0;right:0;top:0;height:var(--vvh,100dvh);transform:translateY(var(--vvtop,0px));background:rgba(0,0,0,0);transition:background-color var(--mola-dur) var(--mola);display:none;align-items:flex-end;justify-content:center;z-index:60}
  .backdrop.show{display:flex}
  /* Liquid Glass: o véu escurece por background-color — opacity ou backdrop-filter aqui virariam
     raiz de fundo e a sheet de vidro deixaria de enxergar a página. Entra com a mola; na saída
     (.saindo, app.js) o véu clareia e a sheet desce pelo mesmo caminho por onde subiu. */
  .backdrop.show{background:rgba(0,0,0,.4);animation:escurece var(--mola-dur) var(--mola)}
  html[data-theme="light"] .backdrop.show{background:rgba(0,0,0,.2)}
  .backdrop.saindo{display:flex;pointer-events:none}
  .backdrop.saindo .sheet{transform:translateY(calc(100% + 24px));transition:transform var(--mola-dur) var(--mola)}
  @keyframes escurece{from{background-color:rgba(0,0,0,0)}}
  @keyframes sobe{from{transform:translateY(calc(100% + 24px))}}
  body.sheet-open{position:fixed;top:var(--sheet-scroll-top,0px);left:0;right:0;overflow:hidden}
  /* clip, não só hidden: hidden ainda rola por código, e o Safari rola o backdrop ao focar um campo
     do sheet enquanto ele entra de baixo — o sheet parava no meio do caminho, com o topo cortado */
  .backdrop{padding-top:max(12px,env(safe-area-inset-top));overflow:hidden;overflow:clip}
  /* sheet precisa de teto de altura + scroll próprio: com muitos tópicos/parcelas o conteúdo
     passa da viewport e, sem isso, o topo (título, campo Valor) fica inacessível no iPhone. */
  .sheet{background:var(--vidro-folha);-webkit-backdrop-filter:var(--vidro-filtro-forte);backdrop-filter:var(--vidro-filtro-forte);width:100%;max-width:760px;max-height:min(88dvh,100%);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--vidro-brilho),var(--vidro-sombra);animation:sobe var(--mola-dur) var(--mola)}
  .sheet h3{font-size:17px;font-weight:700;margin-bottom:16px}
  .sheet{min-width:0;max-height:100%;overflow-x:hidden;overscroll-behavior:none;scroll-padding-block:16px}
  .sheet>*{min-width:0;max-width:100%}
  .sheet .field input,.sheet .field select{min-width:0;max-width:100%;font-size:16px}
  .sheet input[type="date"]{display:block;appearance:none;-webkit-appearance:none}
  .sheet .sheet-actions{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent 0,var(--vidro-folha) 18px);padding:12px 0 calc(20px + env(safe-area-inset-bottom));z-index:2}
  .sheet .btn{min-width:0;min-height:44px}
  /* folha do tópico: abre ao tocar na legenda/fatia do donut em Gráficos */
  .top-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
  .top-head .ico{width:20px;height:20px;flex:0 0 auto;color:var(--brand)}
  .top-head h3{margin:0}
  .top-resumo{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:13px 15px;margin-bottom:6px}
  .top-resumo .sub{font-size:12.5px;color:var(--muted);font-weight:500}
  .top-resumo b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:3px 0 2px}
  .top-resumo .corr{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
  .graf-leg li[data-top],.donut circle[data-top]{cursor:pointer}
  .graf-leg li[data-top]:active{background:var(--surface-2)}
  .seg{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:12px;margin-bottom:14px}
  .seg button{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}
  .seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
  .seg button.on[data-k="receita"]{color:var(--green)}
  .seg button.on[data-k="despesa"]{color:var(--red)}
  .field{margin-bottom:13px}
  .field label{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:6px}
  .field input,.field select{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:11px;padding:12px 13px;font-size:16px;font-family:inherit;outline:none}
  .field input:focus,.field select:focus{border-color:var(--brand)}
  .field .opcional{color:var(--faint);font-weight:400}
  .field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--amber)}
  .senha-regras{list-style:none;padding:0;margin:8px 2px 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:13px;color:var(--muted)}
  .senha-regras li{display:flex;align-items:center;gap:6px;min-height:20px}
  .senha-regras li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid var(--line-strong)}
  .senha-regras li.ok{color:var(--text)}
  .senha-regras li.ok::before{border-color:var(--brand);background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2304100C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
  /* claro: --brand fica escuro, check preto sumia — mesmo traço em branco */
  html[data-theme="light"] .senha-regras li.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  @media (max-width:360px){.senha-regras{grid-template-columns:1fr}}
  .field-error{display:block;color:var(--red);font-size:12px;margin-top:6px}
  .desc-wrap{position:relative}
  .desc-sugestoes{display:none;margin-top:6px;border:1px solid var(--border);border-radius:11px;background:var(--surface-solid);overflow:hidden;box-shadow:var(--shadow)}
  .desc-sugestoes.show{display:block}
  .desc-sugestao{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);padding:10px 12px;text-align:left;font:inherit;cursor:pointer}
  .desc-sugestao:last-child{border-bottom:0}
  .desc-sugestao:active{background:var(--surface-2)}
  .desc-sugestao small{color:var(--muted);white-space:nowrap}
  .dup-warning{color:var(--red);font-size:12.5px;line-height:1.4;margin:-3px 0 10px}
  .field.big input{font-size:26px;font-weight:700;text-align:center;padding:16px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
  .sheet-actions{display:flex;gap:10px;margin-top:6px}
  .btn{flex:1;border:0;border-radius:999px;padding:14px;font-size:15px;font-weight:650;cursor:pointer;font-family:inherit;transition:transform var(--mola-dur) var(--mola)}
  .btn.ghost{background:var(--surface-2);color:var(--muted)}
  .btn.primary{background:var(--brand);color:var(--btn-ink)}
  .btn:active{transform:scale(.97);transition:transform .1s ease-out}
  .btn:disabled{opacity:.6;cursor:default;transform:none}
  .hidden{display:none!important}

  /* tela de valor com teclado próprio (teclado.js) — o display é uma div, não um
     input, então o teclado do iOS nunca abre aqui. Mesma ancoragem do backdrop. */
  .valor-tela{position:fixed;left:0;right:0;top:0;height:var(--vvh,100dvh);transform:translateY(var(--vvtop,0px));z-index:70;background:var(--vidro-folha);-webkit-backdrop-filter:var(--vidro-filtro-forte);backdrop-filter:var(--vidro-filtro-forte);display:flex;flex-direction:column;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));animation:sobe var(--mola-dur) var(--mola)}
  .valor-top{display:flex;align-items:center;gap:10px}
  .valor-x{width:38px;height:38px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
  .valor-x svg{width:20px;height:20px}
  .valor-titulo{font-size:15px;font-weight:600;color:var(--muted)}
  .valor-display{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px}
  .valor-display b{font-size:20px;font-weight:600;color:var(--muted)}
  .valor-num{font-size:clamp(34px,11vw,54px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .valor-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .valor-key{border:0;background:var(--surface-2);color:var(--text);border-radius:14px;padding:15px 0;font-size:24px;font-weight:600;font-family:inherit;cursor:pointer;display:grid;place-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .valor-key:active{background:var(--surface);transform:scale(.96)}
  .valor-key-del svg{width:26px;height:26px}
  /* .btn tem flex:1 (pras linhas de ação do sheet); aqui o container é coluna,
     e sem isso o botão estica na vertical e come a tela toda */
  .valor-ok{flex:none;margin-top:4px}
  /* no desktop a tela é larguíssima: segura o teclado numa coluna centrada */
  .valor-tela>*{width:100%;max-width:420px;margin-inline:auto}
  body.teclado-open{overflow:hidden}

  /* no sheet do novo gasto o valor não é campo: é botão que reabre a tela de valor */
  .valor-btn{width:100%;margin-bottom:13px;border:1px solid var(--border);background:var(--surface-2);border-radius:14px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--muted);text-align:left;cursor:pointer}
  .valor-btn-num{display:flex;align-items:baseline;gap:5px;font-size:15px}
  .valor-btn b{font-size:26px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
  .valor-btn:active{transform:scale(.99)}

  /* toast de feedback (ex: "Gasto lançado") — empilha acima da tab bar/FAB */
  /* 150px = acima do FAB (58px + 84px de base), pra não tampar o botão de novo lançamento */
  .toast-wrap{position:fixed;left:0;right:0;bottom:calc(150px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:80;pointer-events:none;padding:0 16px}
  .toast{display:flex;align-items:center;gap:9px;background:var(--vidro-folha);-webkit-backdrop-filter:var(--vidro-filtro);backdrop-filter:var(--vidro-filtro);color:var(--text);border:0;border-radius:999px;padding:12px 16px;font-size:14px;font-weight:600;box-shadow:var(--vidro-brilho),var(--vidro-sombra);max-width:420px;
    opacity:0;transform:translateY(10px) scale(.96);animation:toastIn var(--mola-dur) var(--mola) forwards}
  .toast svg{width:18px;height:18px;flex:none;color:var(--green)}
  .toast.erro{color:var(--red);box-shadow:var(--vidro-brilho),inset 0 0 0 1px var(--red),var(--vidro-sombra)}
  .toast.erro svg{color:var(--red)}
  .toast.out{animation:toastOut .18s ease-in forwards}
  @keyframes toastIn{to{opacity:1;transform:none}}
  @keyframes toastOut{to{opacity:0;transform:translateY(6px) scale(.97)}}
  .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:2px}
  .chip{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:8px 13px;font-size:13.5px;cursor:pointer;font-weight:500}
  .chip.on{background:var(--brand-soft);color:var(--chip-on-ink);border-color:var(--line-strong);font-weight:600}
  #fChips .chip{max-width:100%;min-height:44px;overflow-wrap:anywhere}
  #fParc{margin-bottom:12px}
  html[data-theme="light"] .chip.on{color:var(--brand);border-color:var(--brand)}
  .install-hint{background:var(--blue-soft);color:var(--blue);border-radius:12px;padding:11px 13px;font-size:12.5px;display:flex;gap:9px;align-items:center;margin-bottom:14px}
  .install-hint button{margin-left:auto;border:0;background:var(--blue);color:var(--btn-ink);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
  .notif-invite{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
  .notif-invite-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand)}
  .notif-invite-ico .ico{width:19px;height:19px}
  .notif-invite strong,.notif-invite div>span{display:block}
  .notif-invite strong{font-size:14px}
  .notif-invite div>span{font-size:12px;color:var(--muted);margin-top:2px}
  .notif-invite-actions{display:flex;gap:7px}
  .notif-invite-actions .btn{padding:9px 12px;font-size:12px;white-space:nowrap;border-radius:999px}
  @media(max-width:600px){
    .notif-invite{grid-template-columns:auto 1fr}
    .notif-invite-actions{grid-column:1/-1}
    .notif-invite-actions .btn{flex:1}
  }
  .versao-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;margin:0 0 14px;border-radius:14px;background:var(--surface-2)}
  .versao-aviso span{flex:1 1 100%;font-weight:650}
  .versao-aviso .btn{flex:1;text-align:center;text-decoration:none}
  .versao-aviso p{flex:1 1 100%;margin:0}
  .versao-aviso p:empty{display:none}

  /* ===== splash de abertura (planta baixa + skyline — splash.js) =====
     usa --brand-rgb / --accent-rgb do skin ativo. */
  #splash{position:fixed;inset:0;z-index:200;overflow:hidden;background:
    radial-gradient(1100px 750px at 85% -5%, var(--glow-1), transparent 62%),
    radial-gradient(900px 700px at -10% 105%, var(--glow-2), transparent 60%),
    var(--bg)}
  #splash.sp-out{opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform .7s ease;pointer-events:none}
  @keyframes spIn{to{opacity:1}}
  @keyframes spSobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  /* grade de planta baixa (fina 40px + mestra 200px) */
  .sp-grid{position:absolute;inset:0;opacity:0;animation:spIn 1.2s ease-out .2s forwards;background-image:
    linear-gradient(rgba(var(--brand-rgb),.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--brand-rgb),.06) 1px,transparent 1px);background-size:40px 40px}
  .sp-grid::after{content:'';position:absolute;inset:0;opacity:0;animation:spIn 1.2s ease-out .6s forwards;background-image:
    linear-gradient(rgba(var(--brand-rgb),.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--brand-rgb),.12) 1px,transparent 1px);background-size:200px 200px}
  .sp-glow{position:absolute;top:40%;left:50%;width:600px;height:600px;pointer-events:none;opacity:0;
    transform:translate(-50%,-50%) scale(.8);
    background:radial-gradient(circle, rgba(var(--brand-rgb),.09) 0%, rgba(var(--accent-rgb),.04) 40%, transparent 70%);
    animation:spGlow 2.4s ease-in-out 1s forwards}
  @keyframes spGlow{50%{opacity:1}100%{opacity:.7;transform:translate(-50%,-50%) scale(1.08)}}
  .sp-scan{position:absolute;left:0;right:0;top:-2px;height:2px;opacity:0;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.9),rgba(var(--accent-rgb),.55),transparent);
    box-shadow:0 0 20px rgba(var(--accent-rgb),.4),0 0 60px rgba(var(--accent-rgb),.15);
    animation:spScan 1.8s ease-in-out .7s forwards}
  @keyframes spScan{8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
  .sp-corner{position:absolute;width:20px;height:20px;opacity:0;animation:spIn .6s ease-out 1.1s forwards;
    border-top:1px solid rgba(var(--accent-rgb),.3);border-left:1px solid rgba(var(--accent-rgb),.3)}
  .sp-corner.tl{top:calc(24px + env(safe-area-inset-top));left:24px}
  .sp-corner.tr{top:calc(24px + env(safe-area-inset-top));right:24px;transform:rotate(90deg)}
  .sp-corner.br{bottom:calc(24px + env(safe-area-inset-bottom));right:24px;transform:rotate(180deg)}
  .sp-corner.bl{bottom:calc(24px + env(safe-area-inset-bottom));left:24px;transform:rotate(-90deg)}
  /* dados flutuantes (decoração de canto, nunca competem com o centro) */
  .sp-data{position:absolute;font:500 10px/1 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
    letter-spacing:.08em;color:rgba(var(--accent-rgb),.28);opacity:0;animation:spData 3.2s ease-in-out infinite}
  @keyframes spData{50%{opacity:1;transform:translateY(-8px)}}
  /* skyline que cresce do chão */
  .sp-city{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:6px}
  .sp-city i{display:block;border:1px solid rgba(var(--brand-rgb),.13);border-bottom:0;border-radius:2px 2px 0 0;
    transform:scaleY(0);transform-origin:bottom;animation:spGrow 1.1s cubic-bezier(.16,1,.3,1) forwards;
    background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(var(--brand-rgb),.08) 8px 9px),
      linear-gradient(180deg,rgba(var(--brand-rgb),.16),rgba(var(--brand-rgb),.03))}
  @keyframes spGrow{to{transform:scaleY(1)}}
  /* guindaste: torre sobe, lança estende, cabo desce, gancho (só transform — sem layout) */
  .sp-crane{position:absolute;bottom:0;left:calc(50% + 70px)}
  .sp-crane i{position:absolute;display:block}
  .sp-torre{left:0;bottom:0;width:3px;height:230px;background:rgba(var(--brand-rgb),.4);transform:scaleY(0);transform-origin:bottom;animation:spGrow 1.2s cubic-bezier(.16,1,.3,1) 1.5s forwards}
  .sp-lanca{left:1px;bottom:228px;height:2px;width:118px;background:rgba(var(--brand-rgb),.35);transform:scaleX(0);transform-origin:left;animation:spLanca .8s cubic-bezier(.16,1,.3,1) 2.3s forwards}
  @keyframes spLanca{to{transform:scaleX(1)}}
  .sp-cabo{left:100px;bottom:158px;width:1px;height:70px;background:rgba(var(--brand-rgb),.25);transform:scaleY(0);transform-origin:top;animation:spGrow .6s ease-out 2.9s forwards}
  .sp-gancho{left:97px;bottom:150px;width:8px;height:8px;border:2px solid rgba(var(--accent-rgb),.5);border-top:0;
    border-radius:0 0 4px 4px;opacity:0;animation:spIn .4s ease-out 3.4s forwards}
  /* marca */
  .sp-logo{position:absolute;top:50%;left:0;right:0;transform:translateY(-56%);text-align:center;z-index:2}
  /* o próprio ícone do app (icon-512.png, nítido em 3x): abertura e ícone não se separam */
  .sp-ic{display:block;width:72px;height:72px;margin:0 auto 22px;border-radius:16px;box-shadow:0 10px 34px rgba(var(--brand-rgb),.4);
    opacity:0;transform:scale(.5) rotate(-8deg);animation:spIcone .7s cubic-bezier(.16,1,.3,1) 1.9s forwards}
  @keyframes spIcone{to{opacity:1;transform:none}}
  .sp-nome{font-size:clamp(38px,10vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;
    opacity:0;animation:spNome .9s cubic-bezier(.16,1,.3,1) 2.2s forwards}
  .sp-nome span{color:var(--brand)}
  @keyframes spNome{from{opacity:0;transform:translateY(18px);letter-spacing:.18em}to{opacity:1;transform:none;letter-spacing:-.03em}}
  .sp-tag{margin-top:12px;font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(238,244,251,.42);opacity:0;animation:spSobe .7s ease-out 2.7s forwards}
  /* progresso (splash.js controla a largura — amarrado ao boot real) */
  .sp-load{position:absolute;left:0;right:0;bottom:max(15%,calc(90px + env(safe-area-inset-bottom)));text-align:center;z-index:2;
    opacity:0;animation:spSobe .6s ease-out 1.4s forwards}
  .sp-track{width:min(240px,60vw);height:3px;margin:0 auto;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
  .sp-track i{display:block;width:100%;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--accent));
    box-shadow:0 0 12px rgba(var(--brand-rgb),.5);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .sp-pct{margin-top:10px;font:500 11px/1 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;color:rgba(var(--accent-rgb),.8);font-variant-numeric:tabular-nums}
  .sp-status{margin-top:6px;font:400 11px/1.4 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;letter-spacing:.06em;color:rgba(238,244,251,.35)}
  /* reduced motion: marca e progresso estáticos, decoração some (PRODUCT.md) */
  @media (prefers-reduced-motion:reduce){
    #splash *{animation:none!important}
    #splash.sp-out{transition:opacity .2s ease;transform:none}
    .sp-grid,.sp-grid::after,.sp-ic,.sp-nome,.sp-tag,.sp-load{opacity:1}
    .sp-corner{opacity:1}
    .sp-ic,.sp-nome{transform:none}
    .sp-scan,.sp-glow,.sp-data,.sp-city,.sp-crane{display:none}
  }

  /* ===== tela de entrada (login/cadastro) ===== */
  #auth{position:fixed;inset:0;z-index:100}
  #auth.hidden{display:none}
  body.locked{overflow:hidden}
  body.locked .app,body.locked nav.tabs,body.locked .fab,body.locked .esfumado-abas{visibility:hidden}
  .auth-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .auth-stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:11vh 18px 0;perspective:1000px}
  .auth-title{text-align:center;margin-bottom:32px;will-change:transform}
  .auth-title h1{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
  /* custta. escrito à mão: as letras da Hanken 800 (em curvas, com o tracking do .logotipo)
     aparecem por máscaras de traço — cada letra tem a sua, e a "caneta" percorre o meio dela.
     No tema escuro o tt e o ponto são escritos em verde-noite (a cor da marca some na aurora)
     e, depois que o ponto carimba, uma varredura os deixa no degradê do realce. Sem a classe
     .escrevendo o SVG já é o logo pronto: se o JS não rodar, o título continua lá.
     Altura = 46px de fonte (720/1000 em). */
  .auth-title h1 > .logo-escrito{display:block;height:33px;width:auto;margin:15px auto 9px;overflow:visible}
  .logo-escrito .le-neutra{fill:var(--text)}
  .logo-escrito .le-tt,.logo-escrito .le-ponto{fill:var(--brand)}
  html:not([data-theme="light"]) .logo-escrito .le-tt,html:not([data-theme="light"]) .logo-escrito .le-ponto{fill:var(--bg)}
  html:not([data-theme="light"]) .logo-escrito .le-tt{opacity:0} /* pronto, o realce cobre o tt escuro */
  html[data-theme="light"] .logo-escrito .le-realce{display:none} /* no claro a marca já lê: escreve direto nela */
  .logo-escrito .le-realce{fill:url(#le-deg)}
  .logo-escrito .le-rp{fill:url(#le-degp)}
  .logo-escrito .le-d0{stop-color:var(--realce-0)}
  .logo-escrito .le-d1{stop-color:var(--accent)}
  /* máscara: branco mostra */
  .logo-escrito .le-pena{fill:none;stroke:#fff;stroke-width:180;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2}
  .logo-escrito .le-fim,.logo-escrito .le-varredura{fill:#fff}
  .logo-escrito .le-ponto{transform-box:fill-box;transform-origin:50% 100%}
  .logo-escrito .le-varredura{transform-box:fill-box;transform-origin:0 50%}
  /* um traço por vez, com leve sobreposição, como mão escrevendo: c u s t(haste, barra) t(haste, barra) a(arco, barriga) */
  .logo-escrito.escrevendo .le-p0{animation:leEscreve .3s cubic-bezier(.45,.05,.35,1) 0s both}
  .logo-escrito.escrevendo .le-p1{animation:leEscreve .34s cubic-bezier(.45,.05,.35,1) .26s both}
  .logo-escrito.escrevendo .le-p2{animation:leEscreve .3s cubic-bezier(.45,.05,.35,1) .56s both}
  .logo-escrito.escrevendo .le-p3{animation:leEscreve .22s cubic-bezier(.45,.05,.35,1) .84s both}
  .logo-escrito.escrevendo .le-p4{animation:leEscreve .12s cubic-bezier(.45,.05,.35,1) 1.02s both}
  .logo-escrito.escrevendo .le-p5{animation:leEscreve .22s cubic-bezier(.45,.05,.35,1) 1.12s both}
  .logo-escrito.escrevendo .le-p6{animation:leEscreve .12s cubic-bezier(.45,.05,.35,1) 1.3s both}
  .logo-escrito.escrevendo .le-p7{animation:leEscreve .24s cubic-bezier(.45,.05,.35,1) 1.4s both}
  .logo-escrito.escrevendo .le-p8{animation:leEscreve .24s cubic-bezier(.45,.05,.35,1) 1.6s both}
  .logo-escrito.escrevendo .le-ponto{animation:leCarimba .34s cubic-bezier(.3,1.6,.5,1) 1.86s both} /* auth.js vibra aqui */
  /* rede de segurança: ao fim, cada letra aparece inteira mesmo onde a caneta não passou */
  .logo-escrito.escrevendo .le-fim{animation:leAparece .01s linear 2.25s both}
  .logo-escrito.escrevendo .le-varredura{animation:leVarre .65s cubic-bezier(.65,0,.35,1) 2.35s both}
  html:not([data-theme="light"]) .logo-escrito.escrevendo .le-tt{animation:leSome .01s linear 3s both}
  @keyframes leEscreve{from{stroke-dashoffset:1.1}to{stroke-dashoffset:0}}
  @keyframes leCarimba{from{transform:scale(0)}to{transform:none}}
  @keyframes leAparece{from{opacity:0}to{opacity:1}}
  @keyframes leVarre{from{transform:scaleX(0)}to{transform:none}}
  @keyframes leSome{from{opacity:1}to{opacity:0}}
  @media (prefers-reduced-motion:reduce){ .logo-escrito.escrevendo *{animation:none!important} } /* como o #splash: vence a especificidade dos traços */
  .auth-hint{margin-top:14px;font-size:13px;color:var(--muted)}
  /* cartão de entrada em vidro denso sobre o globo e o brilho (antes: moldura cinza fixa,
     fora das variáveis de tema) */
  .auth-card{width:100%;max-width:440px;border:0;border-radius:32px;padding:0;transform-origin:center top;will-change:transform;
    background:var(--vidro-folha);-webkit-backdrop-filter:var(--vidro-filtro-forte);backdrop-filter:var(--vidro-filtro-forte);
    box-shadow:var(--vidro-brilho),var(--vidro-sombra)}
  .auth-card.boost,.auth-title.boost{transition:transform var(--mola-dur) var(--mola),opacity .3s ease}
  .auth-inner{background:transparent;border-radius:32px;padding:26px 22px 20px}
  .auth-spacer{height:52vh}
  .auth-msg{font-size:12.5px;color:var(--red);min-height:18px;margin:-4px 0 8px}
  .linklike{background:none;border:none;color:var(--brand);font-size:13px;cursor:pointer;width:100%;margin-top:10px;text-decoration:underline}
  .auth-social{margin-bottom:6px;display:flex;flex-direction:column;gap:10px}
  .auth-social .auth-ou{margin-top:4px}
  .auth-social .btn{flex:none} /* .btn traz flex:1; em coluna isso espremia a altura */
  /* Botão da Apple pelas regras dela (HIG): sólido, branco no escuro e preto no claro,
     nunca menor que o do Google. Sem vidro: a Apple exige as cores dela. */
  .btn.apple{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--apple-fundo);color:var(--apple-texto);border:1px solid var(--apple-fundo)}
  .btn.apple svg{flex:none;position:relative;top:-1px}
  .btn.google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
    background:var(--surface-solid);color:var(--text);border:1px solid var(--line-strong)}
  .btn.google:hover{border-color:var(--brand)}
  .btn.google img{flex:none}
  .auth-ou{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--muted);font-size:12px}
  .auth-ou::before,.auth-ou::after{content:"";flex:1;height:1px;background:var(--line)}
  .auth-perfil-titulo{font-size:20px;margin:0 0 4px;color:var(--text)}
  .auth-perfil-texto{font-size:13.5px;color:var(--muted);margin:0 0 14px}
  .pw-wrap{position:relative}
  .pw-wrap input{padding-right:52px}
  .pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:16px;cursor:pointer;padding:6px 8px;color:var(--muted)}
  .sair{border:1px solid var(--border);background:var(--surface);color:var(--muted);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;margin-left:8px;box-shadow:var(--shadow)}
  /* Pill de sincronização: fica escondida quando está tudo salvo. Só aparece
     quando há algo por subir, a rede caiu, ou a escrita falhou de vez. */
  .sync-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;
    border:1px solid var(--border);background:var(--surface);color:var(--muted);
    font-size:12.5px;font-weight:600;white-space:nowrap}
  /* sem fundo tingido: no tema claro o --red sobre --red-soft cai pra 4.33 de contraste */
  .sync-pill.erro{border-color:var(--red);color:var(--red);cursor:pointer}
  .sync-pill .spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--border);
    border-top-color:var(--brand);animation:sync-gira .8s linear infinite}
  .sync-pill .ponto{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}
  @keyframes sync-gira{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .sync-pill .spin{animation:none} }
  @media (max-width:400px){ .sync-pill .rotulo{display:none} .sync-pill{padding:0 8px} }
  .sair.hidden{display:none}

  /* ===== obras ===== */
  .tag.blue{background:var(--blue-soft);color:var(--blue)}
  /* bruto × corrigido lado a lado dentro do card */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .duo .d-cell{background:rgba(255,255,255,.13);border-radius:12px;padding:10px 12px;min-width:0}
  .duo .d-lbl{font-size:12.5px;opacity:.88;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .duo .d-val{font-size:clamp(16px,4.6vw,22px);font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .back{border:0;background:transparent;color:var(--brand);font-size:15.5px;font-weight:650;cursor:pointer;padding:8px 4px;margin-bottom:8px;display:flex;align-items:center;gap:4px;min-height:44px}
  .obra-actions{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .obra-actions .btn{flex:1;min-width:150px}
  .muted-note{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
  .conta-nome{font-size:18px;font-weight:650;margin:0 0 2px}
  /* barras horizontais (comparativo) */
  .hbar{margin-bottom:13px}
  .hbar-nm{font-size:13.5px;font-weight:600;margin-bottom:4px}
  .hbar-track{position:relative;height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden}
  .hbar-track i{position:absolute;left:0;top:0;bottom:0;border-radius:7px}
  .hb-corr{background:var(--brand-soft);border:1px solid var(--line-strong)}
  .hb-bruto{background:var(--brand)}
  .hbar-vl{font-size:12.5px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
  /* barras verticais (gasto mês a mês) */
  /* ===== relatório bruto × corrigido ===== */
  .rep-scroll{overflow-x:auto}
  .rep-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
  .rep-table th,.rep-table td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
  .rep-table th:first-child,.rep-table td:first-child{text-align:left}
  .rep-table th{color:var(--muted);font-weight:600;font-size:12px}
  .rep-table .rt-top td{font-weight:700;background:var(--surface-2)}
  .rep-table .rt-desc{color:var(--muted)}
  .rep-pick{width:28px;height:28px;display:inline-grid;place-items:center;margin-right:4px;vertical-align:middle;cursor:pointer}
  .rep-pick input{width:17px;height:17px;margin:0;accent-color:var(--brand);cursor:pointer}
  .rep-selected{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px;padding:12px;background:var(--brand-soft);border:1px solid var(--line-strong);border-radius:12px}
  .rep-selected div{min-width:0}
  .rep-selected span{display:block;color:var(--muted);font-size:11.5px}
  .rep-selected b{display:block;margin-top:3px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-width:600px){.rep-selected{grid-template-columns:1fr 1fr}}
  .rep-table .rep-total td{font-weight:750;border-top:2px solid var(--border);font-size:14px}
  .rep-head{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.5}
  @media print{
    body{background:#fff!important;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    body::before{display:none} /* brilho é camada própria agora: print sobrescrevia só o background do body */
    body *{visibility:hidden}
    section.view.active,section.view.active *{visibility:visible}
    section.view.active{position:absolute;left:0;top:0;width:100%;display:block}
    .no-print{display:none!important}
    section.view.active .panel{background:#fff;border:0;box-shadow:none}
    section.view.active h2,section.view.active th,section.view.active td,section.view.active p,section.view.active div,section.view.active b{color:#000!important}
    .rep-table th,.rep-table td{border-color:#999}
    .rep-table .rt-top td{background:#eee}
  }

  /* ===== sidebar desktop (estilo app-shell) ===== */
  .side{display:none}
  @media (min-width:900px){
    nav.tabs{display:none}
    body{padding-bottom:28px}
    body.com-fab{padding-bottom:104px}
    .fab{bottom:28px}
    /* barra lateral do macOS Tahoe: painel de vidro flutuante; o material mais denso
       (--vidro-folha) marca a região estrutural */
    .side{display:flex;position:fixed;left:10px;top:10px;bottom:10px;width:224px;flex-direction:column;gap:3px;padding:22px 14px;background:var(--vidro-folha);-webkit-backdrop-filter:var(--vidro-filtro-forte);backdrop-filter:var(--vidro-filtro-forte);box-shadow:var(--vidro-brilho),var(--vidro-sombra);border:0;border-radius:22px;z-index:30}
    .side .s-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;margin-bottom:20px;padding:0 8px}
    .side button[data-tab]{display:flex;align-items:center;gap:11px;border:0;background:transparent;color:var(--muted);padding:11px 12px;border-radius:999px;font-size:14.5px;font-weight:550;cursor:pointer;text-align:left;width:100%}
    .side button[data-tab] .ti{font-size:17px}
    .side button[data-tab]:hover{background:var(--surface-2);color:var(--text)}
    .side button[data-tab].on{background:var(--brand-soft);color:var(--side-on-ink)}
    .side .s-sair{margin-top:auto;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:var(--muted);padding:11px 12px;border-radius:999px;font-size:14px;cursor:pointer;width:100%} /* sem vidro próprio: já está dentro do vidro da lateral */
    .side .s-sair:hover{background:var(--surface-2);color:var(--text)}
    html[data-theme="light"] .side button[data-tab].on{color:var(--brand-600)} /* --brand sobre --brand-soft não chega a 4,5:1 no claro/esmeralda (T9, review) */
    :root{--lateral:258px}
    .app{margin:0 auto 0 var(--lateral);max-width:880px;padding-top:64px}
    .cards{grid-template-columns:repeat(4,1fr)}
    header.top{left:var(--lateral);min-height:60px;padding:8px 24px 0 16px}
    header.top .sair{display:none}
    body.locked .side{visibility:hidden}
    #fab[data-acao="obra"]{display:none}
    .esfumado-abas{display:none}
    /* form sheet do iPad/Mac: centralizada, materializa crescendo junto com a opacidade */
    .backdrop{align-items:center;padding:24px}
    .sheet{max-width:560px;border-radius:28px;max-height:min(84dvh,100%);animation:materializa var(--mola-dur) var(--mola)}
    .sheet::before{content:none}
    .backdrop.saindo .sheet{transform:scale(.96);opacity:0;transition:transform var(--mola-dur) var(--mola),opacity .18s ease}
  }
  /* base sólida do conteúdo em qualquer largura; o bloco "Vidro máximo", no fim do arquivo, troca
     por vidro sobre a aurora — esta base volta a valer nos recuos de acessibilidade */
  .card:not(.saldo),.panel,.notif-invite{background:var(--surface-solid)}
  @media (max-width:899px){
    /* relatório da simulação: a 1ª coluna quebra linha para as duas colunas de valor caberem sem rolar.
       Só ele — o relatório da obra tem 5 colunas, rola para o lado e mantém cada gasto numa linha. */
    .rep-sim th,.rep-sim td{padding:7px 6px}
    .rep-sim th:first-child,.rep-sim td:first-child{white-space:normal}
  }
  /* ===== Liquid Glass: barra de navegação (todas as larguras) =====
     A barra não tem material: os itens é que são vidro (voltar, sair, sincronização), como no
     iOS 26 e no macOS Tahoe. Ao rolar, o conteúdo some num esfumado com desfoque progressivo
     em vez de ganhar fundo e linha. O esfumado mora no ::before porque um backdrop-filter no
     próprio header viraria raiz de fundo e os botões de vidro dentro dele deixariam de
     enxergar a página. */
  @media screen{
    /* header.top se compõe em três lugares: a base (fluxo normal, usada na impressão), este bloco
       (fixo, em grade, transparente) e os blocos de largura, que dão left/altura/padding
       (celular: left:0 e safe area; desktop: left:var(--lateral)). Mexeu num, confira os outros. */
    header.top{position:fixed;top:0;right:0;z-index:50;margin:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:transparent;border:0}
    header.top::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-28px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s;
      background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 40%,transparent 100%);
      -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
      -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
    header.top.colapsada::before{opacity:1}
    header.top h1{display:none}
    header.top > .layout-22{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px}
    .nav-titulo{display:block;grid-column:2;grid-row:1;font-size:17px;font-weight:600;opacity:0;transition:opacity .2s;max-width:min(60vw,calc(100vw - 192px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    header.top.colapsada .nav-titulo{opacity:1}
    .nav-voltar,header.top .sair,header.top .sync-pill{background:var(--vidro);-webkit-backdrop-filter:var(--vidro-filtro);backdrop-filter:var(--vidro-filtro);box-shadow:var(--vidro-brilho),var(--vidro-sombra);border:0}
    .nav-voltar{grid-column:1;grid-row:1;justify-self:start;color:var(--brand);font-family:inherit;font-size:17px;font-weight:500;height:44px;padding:0 16px 0 10px;border-radius:22px;display:flex;align-items:center;gap:2px;cursor:pointer;transition:transform var(--mola-dur) var(--mola)}
    .nav-voltar[hidden]{display:none} /* sem isto o display:flex da classe venceria o do atributo */
    .nav-voltar span:first-child{font-size:30px;line-height:1;margin-top:-3px}
    header.top .sair{width:44px;height:44px;margin-left:0;border-radius:50%;color:var(--brand);font-size:20px;transition:transform var(--mola-dur) var(--mola)}
    .nav-voltar:active,header.top .sair:active{transform:scale(.94);transition:transform .1s ease-out}
    header.top .sync-pill{position:relative}
    header.top .sync-pill::before{content:"";position:absolute;inset:-8px -4px} /* 28px de pílula, 44px de toque */
    section.view > .back{display:none} /* o voltar mora na barra */
    .titulo-grande{display:block;font-size:34px;font-weight:700;letter-spacing:-.02em;margin:4px 4px 14px;line-height:1.15;overflow-wrap:anywhere}
  }
  /* ===== barras no padrão iOS (celular) =====
     Medidas específicas do celular: a barra cobre também a área do relógio, com o título
     grande no começo do conteúdo. A barra de abas é sempre material (bloco à parte, abaixo).
     O desktop (≥900px) reaproveita o bloco de vidro acima, só muda medida (mais abaixo). */
  @media screen and (max-width:899px){ /* screen: a impressão do relatório segue como antes */
    /* clip: a tela entrando pela direita (transição) não pode abrir rolagem lateral;
       hidden antes é o recuo para WebKit sem clip (iOS 15) */
    /* no recuo, overflow-x:hidden faz o overflow-y computar auto: inofensivo, o .app não tem altura limitada */
    .app{padding-top:calc(52px + env(safe-area-inset-top));overflow-x:hidden;overflow-x:clip}
    header.top{left:0;min-height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
    /* a barra de navegação cobre a área do relógio: a capa da barra de status sai no celular */
    html.nativo body::after, html.standalone body::after{display:none}

    /* ===== Liquid Glass: cápsula de abas + botão + (iOS 26) =====
       A barra de abas vira uma cápsula de vidro que flutua sobre o conteúdo; o + é um círculo
       de vidro da marca ao lado dela. --abas-base: no iPhone com barra de início, a área segura
       (34px) já afasta do pé; o −10px aproxima a cápsula do indicador, como no iOS 26. */
    :root{--abas-h:62px;--abas-base:max(12px,calc(env(safe-area-inset-bottom) - 10px));--abas-margem:12px;--fab-vao:10px}
    nav.tabs{left:var(--abas-margem);right:var(--abas-margem);bottom:var(--abas-base);height:var(--abas-h);min-height:0;padding:4px;border:0;
      border-radius:calc(var(--abas-h) / 2);background:var(--vidro);-webkit-backdrop-filter:var(--vidro-filtro);backdrop-filter:var(--vidro-filtro);
      box-shadow:var(--vidro-brilho),var(--vidro-sombra);transition:right var(--mola-dur) var(--mola)}
    /* com o + à vista a cápsula recua para dar lugar a ele — a borda direita desliza com mola */
    body.com-fab nav.tabs{right:calc(var(--abas-margem) + var(--abas-h) + var(--fab-vao))}
    /* lente da aba selecionada: desliza entre as abas (data-aba vem do showView) */
    nav.tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:calc((var(--abas-h) - 8px) / 2);
      background:var(--brand-soft);transform:translateX(calc(var(--aba-i,0) * 100%));transition:transform var(--mola-dur) var(--mola);pointer-events:none}
    nav.tabs[data-aba="1"]{--aba-i:1}
    nav.tabs[data-aba="2"]{--aba-i:2}
    nav.tabs[data-aba="-1"]::before{opacity:0}
    /* aba não selecionada na cor do texto principal, como no iOS 26: lê bem sobre o vidro fino */
    nav.tabs button{position:relative;z-index:1;border-radius:calc((var(--abas-h) - 8px) / 2);padding:4px 0 2px;min-height:0;font-size:11px;font-weight:600;gap:2px;
      color:var(--text);transition:transform var(--mola-dur) var(--mola)}
    nav.tabs button .ti{font-size:24px}
    /* resposta no toque, não no soltar: encolhe em 0,1s e volta com a mola */
    nav.tabs button:active{opacity:1;transform:scale(.94);transition:transform .1s ease-out}
    /* tinta da aba sobre a lente: a --brand sobre a --brand-soft dá 4,4:1 no escuro; a do chip ligado passa */
    nav.tabs button.on{color:var(--chip-on-ink)}
    html[data-theme="light"] nav.tabs button.on{color:var(--brand-600)}
    .fab{right:var(--abas-margem);bottom:var(--abas-base);width:var(--abas-h);height:var(--abas-h)}
    .esfumado-abas{display:block;position:fixed;left:0;right:0;bottom:0;height:calc(var(--abas-h) + var(--abas-base) + 28px);z-index:39;pointer-events:none;
      background:linear-gradient(to top,var(--bg) 0%,transparent 100%)}
    body,body.com-fab{padding-bottom:calc(var(--abas-h) + var(--abas-base) + 24px)}
    .toast-wrap{bottom:calc(var(--abas-h) + var(--abas-base) + 14px)}
    /* o "+ Nova obra" do conteúdo repetia o + da cápsula */
    #btnNovaObra{display:none}

    /* transições (direção vem do showView): a obra entra pela direita, voltar entra pela
       esquerda, trocar de aba é um fade curto; o título grande acompanha a tela */
    body[data-nav="push"] section.view.active,body[data-nav="push"] .titulo-grande{animation:entra-direita var(--mola-dur) var(--mola)}
    body[data-nav="pop"] section.view.active,body[data-nav="pop"] .titulo-grande{animation:entra-esquerda var(--mola-dur) var(--mola)}
    body[data-nav="aba"] section.view.active,body[data-nav="aba"] .titulo-grande{animation:fade var(--mola-dur) var(--mola)}
  }
  @keyframes entra-direita{from{transform:translateX(30%);opacity:.6}to{transform:none;opacity:1}}
  @keyframes entra-esquerda{from{transform:translateX(-20%);opacity:.6}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion: reduce){
    section.view,body[data-nav] section.view.active,body[data-nav] .titulo-grande{animation:none}
    header.top,.nav-titulo{transition:none}
  }
  /* busca dos lançamentos + respiro mobile */
  .filter-row{display:flex;gap:8px;margin-bottom:12px}
  .filter-row input,.filter-row select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 11px;font-size:16px}
  .filter-row input{flex:1;min-width:0}
  .filter-row select{flex:0 0 auto;max-width:44%}
  .filter-row .afz-add{flex:0 0 auto;padding:9px 16px;font-size:20px;line-height:1;font-weight:600}
  .afz-check{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--border);background:transparent;color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  .afz-check .ico{width:15px;height:15px}
  .afz-check:active{border-color:var(--brand)}
  .afz-done .afz-check{border-color:var(--green);background:var(--green);color:#04140b}
  html[data-theme="light"] .afz-done .afz-check{color:#fff} /* --green claro é escuro; check preto sumia */
  .afz-done .li-main{opacity:.5}
  .afz-done .li-main .t{text-decoration:line-through;color:var(--muted);white-space:normal}
  @media (max-width:768px){
    ul.list li{padding:14px 4px;gap:13px}
    .li-del{padding:10px 12px;font-size:18px}
    .panel{margin-bottom:14px}
    .cards{gap:12px}
  }
  /* dashboard do início (KPIs estilo bento) */
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  @media (min-width:900px){.kpis{grid-template-columns:repeat(4,1fr)}}
  .kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
  .kpi::after{content:"";position:absolute;right:-28px;top:-28px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.16),transparent 70%);pointer-events:none}
  .kpi.amber::after{background:radial-gradient(circle,rgba(224,168,58,.14),transparent 70%)}
  .kpi.green::after{background:radial-gradient(circle,rgba(53,214,138,.13),transparent 70%)}
  .kpi-link{text-align:left;color:var(--text);font:inherit;cursor:pointer;width:100%}
  .kpi-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
  .kpi .k-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
  .kpi .k-nome{font-size:12px;color:var(--muted);font-weight:600}
  .kpi .k-num{font-size:20px;font-weight:750;font-variant-numeric:tabular-nums;margin-top:6px}
  .kpi .k-obs{font-size:11px;color:var(--muted);margin-top:3px}
  .chip2{font-size:10.5px;font-weight:650;padding:3px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
  .chip2.amber{color:var(--amber);border-color:rgba(224,168,58,.35);background:var(--amber-soft)}
  .chip2.green{color:var(--green);border-color:rgba(53,214,138,.35);background:var(--green-soft)}
  .chip2.brand{color:var(--chip-on-ink);border-color:rgba(var(--brand-rgb),.35);background:var(--brand-soft)}
  html[data-theme="light"] .chip2.brand{color:var(--brand)}
  /* tela Gráficos da obra */
  .graf-donut{display:grid;place-items:center;margin:10px 0 18px}
  .graf-donut .donut{width:240px;height:240px} /* sobrepõe os 132px do detalhe */
  .graf-donut .donut .center b{font-size:20px}
  .graf-leg li .dot{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
  .evo-big text{font-size:11px}
  /* gráfico de evolução (SVG, cores validadas p/ daltonismo — dataviz) */
  .evo-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:22px}
  .evo-val{font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
  .evo-leg{display:flex;gap:14px;margin-top:6px;font-size:12px;color:var(--muted)}
  .evo-leg i{width:10px;height:3px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:5px}
  .evo-svg text{font-size:9px;fill:var(--muted)}
  .evo-col{cursor:pointer}
  /* gráfico gasto por mês: barra apagada por padrão, selecionada acende com glow */
  .mes-bar{opacity:.5;transition:opacity .18s ease-out,filter .18s ease-out}
  .mes-bar.on{opacity:1;filter:drop-shadow(0 0 5px var(--chart-gasto))}
  /* no claro o gradiente já é suave: mais opacidade e sem glow (glow é do dark) */
  html[data-theme="light"] .mes-bar{opacity:.75}
  html[data-theme="light"] .mes-bar.on{filter:none}
  .mes-col{cursor:pointer}
  @media (prefers-reduced-motion:reduce){.mes-bar{transition:none}}
  /* ícones SVG (icons.js) e campo de dinheiro com prefixo R$ */
  .ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.2em;flex-shrink:0}
  .money{display:flex;align-items:center;gap:8px}
  .money>b{font-weight:600;color:var(--muted);font-size:.95em}
  .money>input{flex:1;min-width:0}
.panel a{color:var(--accent)}.conta-dialog{background:var(--vidro-folha);-webkit-backdrop-filter:var(--vidro-filtro-forte);backdrop-filter:var(--vidro-filtro-forte);box-shadow:var(--vidro-brilho),var(--vidro-sombra);color:var(--text);border:0;border-radius:28px;padding:24px;width:calc(100% - 32px);max-width:480px;max-height:90dvh;overflow:auto;margin:auto;font-size:16px;animation:materializa var(--mola-dur) var(--mola)}.conta-dialog::backdrop{background:rgba(0,0,0,.4)}
.confirma-dialog .confirma-msg{margin:0 0 18px;font-size:16px;line-height:1.45;overflow-wrap:anywhere}.conta-dialog p{margin:16px 0;line-height:1.5}.conta-dialog input{width:100%;font-size:16px}.conta-dialog button{min-height:44px}

/* Declarações estáticas extraídas dos templates. */
body .layout-1{top:15%;left:10%;animation-delay:1.8s}
body .layout-2{top:22%;right:12%;animation-delay:2.4s}
body .layout-3{top:34%;left:5%;animation-delay:3.1s}
body .layout-4{top:62%;right:6%;animation-delay:2.8s}
body .layout-5{top:64%;left:7%;animation-delay:2.1s}
body .layout-6{top:70%;right:9%;animation-delay:3.4s}
body .layout-7{width:28px;height:80px;animation-delay:.85s}
body .layout-8{width:40px;height:140px;animation-delay:.92s}
body .layout-9{width:24px;height:100px;animation-delay:.99s}
body .layout-10{width:50px;height:200px;animation-delay:1.06s}
body .layout-11{width:32px;height:160px;animation-delay:1.13s}
body .layout-12{width:20px;height:70px;animation-delay:1.2s}
body .layout-13{width:44px;height:180px;animation-delay:1.27s}
body .layout-14{width:36px;height:120px;animation-delay:1.34s}
body .layout-15{width:26px;height:90px;animation-delay:1.41s}
body .layout-16{width:48px;height:220px;animation-delay:1.48s}
body .layout-17{width:30px;height:130px;animation-delay:1.55s}
body .layout-18{width:22px;height:60px;animation-delay:1.62s}
body .layout-19{width:100%}
body .layout-20{text-align:center;margin-top:14px;font-size:13px}
body .layout-21{color:var(--muted)}
body .layout-22{display:flex;align-items:center}
body .layout-23{width:100%;margin-top:12px}
body .layout-24{display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:12.5px;color:var(--muted)}
body .layout-25{display:flex;align-items:center;gap:6px}
body .layout-26{width:10px;height:10px;border-radius:3px;background:var(--brand);display:inline-block}
body .layout-27{width:10px;height:10px;border-radius:3px;background:var(--brand-soft);border:1px solid var(--line-strong);display:inline-block}
body .layout-28{justify-content:flex-start;gap:8px}
body .layout-29{margin-top:10px}
body .layout-30{margin-top:6px}
body .layout-31{margin:0}
body .layout-32{font-size:19px}
body .layout-33{display:flex;align-items:center;gap:8px}
body .layout-34{font-size:15px}
body .layout-35{font-size:13.5px;color:var(--muted)}
body .layout-36{cursor:pointer}
body .layout-37{padding:10px}
body .layout-38{background:var(--chart-gasto)}
body .layout-39{background:var(--chart-rec)}
body .layout-40{flex-direction:column}
body .layout-41{width:100%;color:var(--red)}
body .layout-42{color:var(--red)}
body .layout-43{width:100%;margin-top:2px}
body .layout-44{width:100%;margin-top:14px}
body .layout-45{font-size:30px}

.texto-positivo{color:var(--green)}
.texto-negativo{color:var(--red)}
.donut-240{width:240px;height:240px}
.card.saldo.saldo-abaixo{background:linear-gradient(140deg,#8a2438,#4a1a2a);border-color:rgba(255,120,140,.35);box-shadow:0 8px 32px rgba(220,60,90,.25)}
.pie-0{background:var(--c1)}
.pie-1{background:var(--c2)}
.pie-2{background:var(--c3)}
.pie-3{background:var(--c4)}
.pie-4{background:var(--c5)}
.pie-5{background:var(--c6)}
.pie-6{background:var(--c7)}
.pie-7{background:var(--c8)}

/* Mantém precedência que as declarações inline tinham nos componentes. */
.btn.layout-41,.btn.layout-42{color:var(--red)}
.card.saldo .layout-45{font-size:30px}
.sp-data.layout-1{animation-delay:1.8s}
.sp-data.layout-2{animation-delay:2.4s}
.sp-data.layout-3{animation-delay:3.1s}
.sp-data.layout-4{animation-delay:2.8s}
.sp-data.layout-5{animation-delay:2.1s}
.sp-data.layout-6{animation-delay:3.4s}

/* ===== orçamento previsto × real =====
   Verde-marca abaixo de 90%, âmbar daí pra cima. Nunca vermelho (PRODUCT.md). */
  .orc-card .orc-topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .orc-rotulo{font-size:14px;color:var(--muted);font-weight:650}
  .orc-pill{font-size:12.5px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--green-soft);color:var(--green);white-space:nowrap}
  .orc-pill.alerta{background:var(--amber-soft);color:var(--amber)}
  .orc-num{font-size:28px;font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  .orc-num small{font-size:16px;font-weight:600;letter-spacing:0;color:var(--muted);white-space:nowrap}
  .orc-barra{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:14px 0 10px}
  .orc-barra i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--accent))}
  .orc-barra.alerta i{background:var(--amber)}
  .orc-barra.fina{height:8px;margin:8px 0 0}
  .orc-barra.mini{height:6px;margin:0;flex:0 0 56px}
  .orc-rodape{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
  .orc-rodape b{color:var(--text);font-weight:650}
  .orc-secao{font-size:15px;font-weight:650;color:var(--muted);margin:4px 4px 8px}
  .orc-lista{list-style:none}
  .orc-item{padding:12px 0;border-top:1px solid var(--border)}
  .orc-item:first-child{border-top:0;padding-top:2px}
  .orc-item:last-child{padding-bottom:2px}
  .orc-item-conteudo{display:block;width:100%;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left}
  button.orc-item-conteudo{cursor:pointer;-webkit-tap-highlight-color:transparent}
  button.orc-item-conteudo:active{opacity:.6}
  button.orc-item-conteudo:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
  .orc-linha{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .orc-nome{font-size:16px;font-weight:600;min-width:0;overflow-wrap:anywhere}
  .orc-val{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  .orc-val b{color:var(--text);font-weight:650}
  .orc-frase{font-size:14px;color:var(--muted);margin-top:6px}
  .orc-frase.alerta{color:var(--amber)}
  .btn.orc-editar{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:14px}
  .orc-mini{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
  .orc-mini span{min-width:0;overflow-wrap:anywhere}
  .orc-mini .orc-mini-alerta{color:var(--amber)}
  .sheet .seg button{min-height:44px;font-size:15px}
  .orc-campos{background:var(--surface-2);border-radius:14px;padding:4px 14px}
  .orc-campo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border)}
  .orc-campo:first-child{border-top:0}
  .orc-campo>span{font-size:16px;min-width:0;overflow-wrap:anywhere}
  .orc-campo input{flex:0 0 150px;width:150px;min-width:0;text-align:right;background:var(--surface-solid);border:1px solid transparent;color:var(--text);border-radius:11px;padding:11px 12px;font-size:16px;font-family:inherit;font-variant-numeric:tabular-nums;outline:none}
  .orc-campo input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .orc-campo input::placeholder{color:var(--muted);opacity:1}
  .orc-soma{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border-radius:14px;background:var(--brand-soft);margin-top:12px}
  .orc-soma span{font-size:15px;font-weight:650}
  .orc-soma b{font-size:24px;font-weight:750;font-variant-numeric:tabular-nums}
  .orc-dica{font-size:13.5px;color:var(--muted);text-align:center;margin:8px 0 12px}
  .btn.orc-tirar{width:100%;margin:4px 0 6px;color:var(--red)}
  @media screen and (max-width:899px){ html body .btn.ghost.orc-tirar{background:var(--surface-2);color:var(--red)} }

/* ===== conteúdo no padrão iOS (celular) =====
   Painéis e cards viram os grupos "inset grouped" dos apps da Apple (Ajustes, Carteira,
   Saúde): cantos de 14px, sem borda nem sombra — vale em qualquer largura (o desktop também
   perde a borda e a sombra de site). O material (vidro sobre a aurora) vem do bloco "Vidro
   máximo", no fim do arquivo. Listas com linha alta, separador fino recuado a partir do texto e realce
   ao tocar; busca com lupa; botão preenchido e tingido de 50px; sheet com alça. As regras
   soltas abaixo valem em qualquer largura; o resto do desktop segue como antes. */
  .panel,.card,.kpi{border-radius:14px;border:0;box-shadow:none}
  .card.saldo,.card.saldo.saldo-abaixo{box-shadow:none}
  .kpi{background:var(--surface-solid)} /* base sólida como a dos painéis; vira vidro no bloco "Vidro máximo" */
  .chevron,.busca-ic{display:none}
  .busca{display:flex;flex:1;min-width:0} /* o rótulo da busca ocupa o lugar que era do campo */
  /* Obras e obra aberta: o nome da obra some daqui porque o título grande já mostra — no celular
     desde sempre, e no desktop desde a T9, que deu título grande à lateral flutuante também;
     sem isto o nome ficava repetido nas duas telas. @media screen (não max-width) para valer
     nas duas larguras e não interferir na impressão do relatório. */
  @media screen{
    /* "Minhas obras" repetia o título grande e sai da vista (continua para o VoiceOver);
       a contagem vira o cabeçalho da seção, acima do grupo */
    .panel.grupo-obras{background:transparent;padding:0}
    .grupo-obras > h2{margin:0 4px 8px}
    .grupo-obras > h2 .muted{font-weight:500}
    /* o grupo é a lista: o cartão arredondado (vidro, no bloco "Vidro máximo") vale em qualquer
       largura, senão o desktop mostra uma lista nua em vez do grupo (review da T9) */
    .grupo-obras > ul.list{background:var(--surface-solid);border-radius:14px;overflow:hidden}
    .grupo-obras > ul.list li{padding:10px 14px 10px 16px}
    .rotulo-grupo,.obra-head h2 > .layout-33,#v-simula > .panel:first-child > h2{
      position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    /* obra: o nome já está no título grande; o painel do topo vira a linha de subtítulo
       dele (fase, início e tempo de obra) com o lápis de editar à direita */
    .panel.obra-head{display:flex;align-items:center;gap:12px;background:transparent;padding:0 0 0 4px;margin:-6px 0 16px}
    .obra-head h2{order:2;margin:0;flex:none}
    .obra-head .obra-meta{order:1;flex:1;min-width:0;font-size:15px;line-height:1.4}
    .obra-meta .obra-sep{display:none} /* fase numa linha, início e tempo de obra na outra */
    .obra-meta .obra-desde{display:block;margin-top:6px}
    .obra-meta .tag{font-size:13px;padding:3px 10px}
    /* lápis como botão redondo tingido (44px), como os botões de ação dos apps da Apple */
    .obra-head #oEdit{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;
      background:var(--brand-soft);color:var(--chip-on-ink);font-size:19px}
    .obra-head #oEdit:active{opacity:.6;background:var(--brand-soft);color:var(--chip-on-ink)}
    html[data-theme="light"] .obra-head #oEdit{color:var(--brand-600)}
  }
  @media screen and (max-width:899px){
    .panel{padding:14px 16px}
    .panel h2{font-size:17px;font-weight:600}
    .panel h2 .muted{font-size:15px}

    ul.list{gap:0}
    ul.list li{min-height:56px;border-bottom:0;position:relative;padding:10px 4px}
    /* separador fino que começa no texto, não atravessa o ícone (38px de ícone + 13 de vão + 4) */
    ul.list li + li::before{content:"";position:absolute;top:0;left:54px;right:0;height:.5px;background:var(--border)}
    #oAfazeres li + li::before{left:43px} /* afazer: bolinha de 26px no lugar do ícone */
    ul.list li:active{background:var(--surface-2);border-radius:10px}
    .chevron{display:block;color:var(--muted);font-size:22px;line-height:1;margin-left:-4px;flex:none}

    /* Obras: o cartão do grupo mora no @media screen acima (vale em qualquer largura); aqui só
       o padrão iOS — separador recuado e realce de borda a borda no toque */
    .grupo-obras > ul.list li + li::before{left:67px}
    .grupo-obras > ul.list li:active{border-radius:0}
    #obrasList .obra-tempo{white-space:nowrap} /* quebra antes do "· 16 meses", nunca no meio dele */

    /* indicadores da obra: o selo desce para baixo do nome quando não cabe ao lado (antes o
       nome quebrava palavra por palavra); o primário das ações ocupa a linha toda */
    .kpi .k-top{flex-wrap:wrap;justify-content:flex-start;gap:4px 6px}
    .obra-actions .btn{flex:1 1 auto} /* cada um na largura do texto: "Voltar pra construção" ganha a linha em vez de quebrar */
    .obra-actions .btn.primary{flex-basis:100%}
    /* Ajustes: as ações de cada grupo empilham (três botões lado a lado quebravam o texto em duas linhas) */
    #v-ajustes .panel .sheet-actions{flex-direction:column}

    /* campos cheios, sem contorno (o contorno só aparece no foco e no aviso) */
    .field input,.field select,.valor-btn{border-color:transparent}

    /* busca no padrão iOS: campo cheio e arredondado com lupa; o mês é um botão de menu ao lado */
    .busca{position:relative;flex:1;min-width:0}
    .busca-ic{display:block;position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;line-height:0}
    .filter-row input,.filter-row select{border:0;border-radius:999px;min-height:44px;background:var(--surface-2)}
    .filter-row select{max-width:none} /* "Todos os meses" inteiro; a busca fica com o resto */
    .filter-row input::placeholder{color:var(--muted);opacity:1}
    .busca input{padding-left:34px;border-radius:999px;border:0;background:var(--surface-2);min-height:44px;width:100%}
    .filter-row .afz-add{min-height:44px;border-radius:999px}

    /* botões: primário preenchido, secundário tingido da marca; toque encolhe na hora (0,1s) e
       volta com a mola ao soltar */
    .btn,.sheet .btn{min-height:50px;border-radius:999px;font-size:17px;font-weight:600}
    .btn:active{opacity:1;transform:scale(.97);transition:transform .1s ease-out}
    /* tinta do tingido: a --brand sobre a --brand-soft dá 4,4:1 no escuro; a tinta do chip ligado passa */
    .btn.ghost{background:var(--brand-soft);color:var(--chip-on-ink);border:0}
    html[data-theme="light"] .btn.ghost{color:var(--brand-600)}
    /* destrutivo (apagar compra, obra, conta): vermelho sobre cinza, como no iOS — sobre o tingido
       da marca não chega a 4,5:1. "html body" vence a regra do claro acima por especificidade. */
    html body .btn.ghost.layout-41,html body .btn.ghost.layout-42,#ajApagar{background:var(--surface-2);color:var(--red)}
    .notif-invite-actions .btn{min-height:44px;font-size:15px}

    /* sheet flutuante do iOS 26: 8px das bordas, cantos de 32px concêntricos com a tela */
    .backdrop{padding:max(12px,env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))}
    .sheet{border-radius:32px;padding:26px 20px 20px;position:relative}
    .sheet .sheet-actions{bottom:-20px;padding-bottom:20px}
    /* folha cheia (app.js, medeSheet): encosta nas bordas, fundo sólido, cantos só em cima */
    .backdrop.cheia{padding:max(12px,env(safe-area-inset-top)) 0 0}
    .backdrop.cheia .sheet{border-radius:32px 32px 0 0;background:var(--surface-solid);-webkit-backdrop-filter:none;backdrop-filter:none;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
    .backdrop.cheia .sheet .sheet-actions{bottom:calc(-20px - env(safe-area-inset-bottom));padding-bottom:calc(20px + env(safe-area-inset-bottom));background:var(--surface-solid)}
    /* alça de puxar para fechar (gestos.js): os 32px de cima do sheet flutuante */
    .sheet::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--muted);opacity:.45}

    .card,.panel li,.chip,.chip2,.back,.li-del{-webkit-tap-highlight-color:transparent}
    .chip:active,.chip2:active{opacity:.6}
  }
  /* toque em tela estreita: o × sai da vista (arrastar para apagar, bloco dos gestos) e a
     terceira coluna de 44px que era dele volta para o texto e o valor */
  @media (max-width:600px) and (pointer:coarse){
    ul.list li.gasto-row{grid-template-columns:38px minmax(0,1fr)}
  }

/* gestos (gestos.js) */
  /* branco sobre o --red do escuro (#fb7185) dá 2,7:1; o botão tem vermelho próprio: 5,5:1 nos quatro combos tema×skin */
  :root{--apagar:#c22e55}
  li.swipe{position:relative;overflow:hidden;touch-action:pan-y}
  li.swipe > *{transform:translateX(var(--dx,0px));transition:transform var(--mola-quique-dur) var(--mola-quique)}
  li.swipe.arrastando > *{transition:none}
  /* o botão fica além da borda direita e entra junto com o conteúdo, então parado não cobre o valor;
     120px (o máximo do arrasto) com o texto centrado nos 80 que aparecem com a linha aberta */
  .acao-apagar{position:absolute;top:0;bottom:0;left:100%;width:120px;padding:0 40px 0 0;border:0;border-radius:0;background:var(--apagar);color:#fff;font-size:15px;font-weight:600}
  .sheet{transform:translateY(var(--dy,0px));transition:transform var(--mola-quique-dur) var(--mola-quique)}
  .sheet.arrastando{transition:none}
  /* transform só durante o arrasto: fora dele, transform na tela viraria bloco de contenção dos position:fixed internos.
     .titulo-grande mora fora de section.view (é o cabeçalho iOS): gestos.js marca as mesmas classes
     e o mesmo --dx-tela nela também, senão o título fica parado enquanto a tela segue o dedo. */
  section.view.active.arrastando-borda,.titulo-grande.arrastando-borda{transform:translateX(var(--dx-tela,0px))}
  section.view.active.soltando-borda,.titulo-grande.soltando-borda{transform:translateX(var(--dx-tela,0px));transition:transform var(--mola-quique-dur) var(--mola-quique)}
  @media (pointer:coarse){
    ul.list li > .li-del{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  }
  @media (prefers-reduced-motion: reduce){ li.swipe > *,.sheet,section.view.active.soltando-borda,.titulo-grande.soltando-borda{transition:none} }
/* ===== Vidro máximo (spec docs/specs/2026-09-28-vidro-maximo-design.md) =====
   Muito mais Liquid Glass, no espírito de apps como o Pierre: uma aurora colorida nas cores do
   skin atrás do topo das telas, e o conteúdo (cards, painéis, indicadores e a lista de obras)
   também em vidro, para a cor aparecer através dele. Amplia a regra "vidro só na navegação" do
   spec do Liquid Glass, por decisão do Giovani depois de testar no iPhone (build 10.1). Nunca
   vidro dentro de vidro. Os recuos de acessibilidade logo abaixo cobrem os tokens novos. */
  :root{
    --aurora-1:16,185,160; --aurora-2:40,200,110; --aurora-3:8,90,150; --aurora-4:120,235,195; --aurora-a:.92;
    --vidro-conteudo:rgba(6,22,17,.42); --vidro-luz-conteudo:.62;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 0 .5px rgba(255,255,255,.16);
  }
  html[data-theme="light"]{
    --aurora-1:20,179,154; --aurora-2:58,209,126; --aurora-3:60,150,200; --aurora-4:150,240,210; --aurora-a:.55;
    --vidro-conteudo:rgba(255,255,255,.52); --vidro-luz-conteudo:1.06;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(20,43,35,.10);
  }
  html[data-skin="azul"]{
    --aurora-1:59,108,240; --aurora-2:110,150,255; --aurora-3:110,50,200; --aurora-4:120,210,255; --aurora-a:1;
    --vidro-conteudo:rgba(8,12,28,.42); --vidro-luz-conteudo:.62;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 0 .5px rgba(255,255,255,.16);
  }
  html[data-skin="azul"][data-theme="light"]{
    --aurora-1:59,108,240; --aurora-2:96,140,255; --aurora-3:140,90,220; --aurora-4:150,210,255; --aurora-a:.52;
    --vidro-conteudo:rgba(255,255,255,.52); --vidro-luz-conteudo:1.06;
    --vidro-brilho:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(23,43,77,.10);
  }
  :root{--vidro-filtro-conteudo:saturate(170%) blur(28px) brightness(var(--vidro-luz-conteudo))}

  /* aurora: manchas desfocadas nas cores do skin, presas ao topo da tela e apagando para baixo.
     A máscara mora no próprio #aurora, que não é ancestral de nenhum vidro. Sem filter de
     desfoque: as manchas já são degradês suaves, e o blur custava ~20% de CPU a cada quadro da
     deriva. Deriva devagar (26s por ida, bem abaixo do ritmo que incomoda); com movimento
     reduzido fica parada. */
  #aurora{position:fixed;left:0;right:0;top:0;height:78vh;z-index:0;pointer-events:none;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent)}
  #aurora::before{content:"";position:absolute;inset:-15% -30%;
    background:
      radial-gradient(55% 55% at 16% 26%, rgba(var(--aurora-1),var(--aurora-a)), transparent 70%),
      radial-gradient(50% 52% at 84% 16%, rgba(var(--aurora-2),var(--aurora-a)), transparent 70%),
      radial-gradient(48% 44% at 52% 52%, rgba(var(--aurora-3),var(--aurora-a)), transparent 74%),
      radial-gradient(24% 24% at 44% 12%, rgba(var(--aurora-4),var(--aurora-a)), transparent 70%),
      linear-gradient(100deg, rgba(var(--aurora-3),var(--aurora-a)), rgba(var(--aurora-1),var(--aurora-a)) 35%, rgba(var(--aurora-2),var(--aurora-a)) 65%, rgba(var(--aurora-3),var(--aurora-a)));
    animation:aurora-deriva 26s ease-in-out infinite alternate}
  @keyframes aurora-deriva{
    0%{transform:translate3d(-4%,-2%,0) rotate(0deg) scale(1)}
    50%{transform:translate3d(5%,3%,0) rotate(8deg) scale(1.08)}
    100%{transform:translate3d(-2%,4%,0) rotate(-6deg) scale(1.02)}}
  @media (prefers-reduced-motion: reduce){ #aurora::before{animation:none} }
  @media print{ #aurora{display:none} }

  /* conteúdo em vidro: cards, painéis, indicadores e o grupo da lista de obras. Os painéis
     transparentes (cabeçalho da obra, moldura da lista) ficam de fora: um backdrop-filter neles
     viraria raiz de fundo e o vidro de dentro deixaria de ver a aurora. */
  @media screen{
    .card:not(.saldo),.panel:not(.grupo-obras):not(.obra-head),.kpi,.notif-invite,.grupo-obras > ul.list{
      background:var(--vidro-conteudo);-webkit-backdrop-filter:var(--vidro-filtro-conteudo);backdrop-filter:var(--vidro-filtro-conteudo);
      box-shadow:var(--vidro-brilho)}
    /* ações da obra e "Editar orçamento": pílulas de vidro (o primário continua sólido, como o
       botão de destaque do Pierre — cor chapada ao lado do vidro é o que faz o vidro aparecer) */
    html body .obra-actions .btn.ghost,html body .btn.ghost.orc-editar{
      background:var(--vidro);-webkit-backdrop-filter:var(--vidro-filtro);backdrop-filter:var(--vidro-filtro);
      box-shadow:var(--vidro-brilho),var(--vidro-sombra);color:var(--chip-on-ink)}
    html[data-theme="light"] body .obra-actions .btn.ghost,html[data-theme="light"] body .btn.ghost.orc-editar{color:var(--brand-600)}
    /* chips: vidro claro fosco no selecionado, vidro fino nos outros */
    .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:var(--text)}
    .chip.on{background:rgba(255,255,255,.90);border-color:transparent;color:#0B1A15}
    html[data-theme="light"] .chip{background:rgba(255,255,255,.55);border-color:rgba(20,43,35,.10)}
    html[data-theme="light"] .chip.on{background:var(--text);color:#fff}
    /* o que fica direto sobre a aurora passa para a cor do texto: o cinza some sobre ela nos dois
       temas, e no escuro também a tinta da marca dos botões da barra */
    .grupo-obras > h2 .muted,.obra-head .obra-meta{color:var(--text)}
    html:not([data-theme="light"]) .grupo-obras > h2 .muted,html:not([data-theme="light"]) .obra-head .obra-meta{text-shadow:0 1px 8px rgba(0,0,0,.35)}
    html:not([data-theme="light"]) .nav-voltar,html:not([data-theme="light"]) header.top .sair{color:var(--text)}
  }
/* ===== Liquid Glass: recuos =====
   Sem backdrop-filter (WebKit muito antigo), com transparência reduzida (Ajustes › Acessibilidade)
   ou com contraste aumentado, o vidro vira superfície sólida. Os quatro seletores repetem os
   dos blocos de tema para empatar a especificidade — vale o que vem por último. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,html[data-theme="light"],html[data-skin="azul"],html[data-skin="azul"][data-theme="light"]{--vidro:var(--surface-solid);--vidro-folha:var(--surface-solid);--vidro-conteudo:var(--surface-solid);--vidro-filtro-conteudo:none}
}
@media (prefers-reduced-transparency: reduce){
  :root,html[data-theme="light"],html[data-skin="azul"],html[data-skin="azul"][data-theme="light"]{--vidro:var(--surface-solid);--vidro-folha:var(--surface-solid);--vidro-filtro:none;--vidro-filtro-forte:none;--vidro-conteudo:var(--surface-solid);--vidro-filtro-conteudo:none}
}
@media (prefers-contrast: more){
  :root,html[data-theme="light"],html[data-skin="azul"],html[data-skin="azul"][data-theme="light"]{--vidro:var(--surface-solid);--vidro-folha:var(--surface-solid);--vidro-luz:1;--vidro-brilho:inset 0 0 0 1px var(--line-strong);--vidro-conteudo:var(--surface-solid);--vidro-filtro-conteudo:none}
}