/* ═══════════════════════════════════════════════════════════════
   ALECRIM · design system v2 — "papel & rosmaninho"
   Papel quente, tinta profunda, cobre-âmbar como assinatura.
   Todos os seletores/vars da v1 preservados (app.js intocado).
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;font-size:0.9375rem;line-height:1.55;background:var(--bg0);background-image:var(--bg-tint);background-attachment:fixed;color:var(--txt1);min-height:100%;overscroll-behavior:none;padding-bottom:calc(96px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s var(--ease-out),color .3s var(--ease-out)}
::selection{background:color-mix(in srgb,var(--amber) 22%,transparent)}
:root{
  /* FANZINE · claro = papel de risografia (2 tintas: azul + vermelho) */
  --bg0:#f1ece0;--bg1:#f8f4ea;--bg2:#e6e0d0;--bg3:#dad3c0;
  --bg-tint:none;
  --border:rgba(25,23,18,.22);--border2:rgba(25,23,18,.42);
  --txt1:#191712;--txt2:#5c584c;--txt3:#6c6656;   /* AA ≥ 4.5:1 — docs/ACESSIBILIDADE.md */
  /* assinatura: azul-riso (primária) + vermelho (alerta/ação) */
  --amber:#2637c4;--amber-bg:#e4e6f8;--amber-border:#2637c4;--amber-glow:none;
  --accent:#2637c4;
  --green:#1f7a4d;--green-bg:#dcefe1;--green-glow:none;
  --red:#c22f18;--red-bg:#f8e0d9;
  --purple:#6a2f8f;--purple-bg:#efe4f6;--blue:#2637c4;--blue-bg:#e4e6f8;
  --gold:#2637c4;--ink:#191712;
  --hover:rgba(25,23,18,.07);
  --font-cond:'Oswald','Arial Narrow','Helvetica Neue',sans-serif;  /* condensada (index.html) */
  --r8:4px;--r12:5px;--r16:7px;--r20:9px;--r24:11px;
  --space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* sombras "impressas": deslocamento duro (riso), sem blur */
  --shadow:2px 2px 0 rgba(25,23,18,.80);
  --shadow-sm:1px 1px 0 rgba(25,23,18,.65);
  --shadow-lg:4px 4px 0 rgba(25,23,18,.85);
  --nav-glass:#f1ece0;
}
.dark{
  /* FANZINE · escuro = papel invertido, mesmas 2 tintas */
  --bg0:#16150f;--bg1:#1f1d15;--bg2:#28251b;--bg3:#332f22;
  --bg-tint:none;
  --border:rgba(241,236,224,.18);--border2:rgba(241,236,224,.38);
  --txt1:#f1ece0;--txt2:#b3ab98;--txt3:#9a9280;   /* AA: txt2 8.0 · txt3 5.9 */
  --amber:#8492f2;--amber-bg:#20233f;--amber-border:#8492f2;
  --accent:#8492f2;
  --green:#5cc48a;--green-bg:#12291d;--red:#ff6a4d;--red-bg:#2e1712;
  --purple:#c89bf0;--purple-bg:#241833;--blue:#8492f2;--blue-bg:#20233f;
  --gold:#8492f2;--ink:#f1ece0;
  --hover:rgba(241,236,224,.07);
  --shadow:2px 2px 0 rgba(0,0,0,.55);
  --shadow-sm:1px 1px 0 rgba(0,0,0,.45);
  --shadow-lg:4px 4px 0 rgba(0,0,0,.6);
  --amber-glow:none;
  --green-glow:none;
  --nav-glass:#16150f;
}
/* Acessibilidade: teclado, movimento, escala de fonte, contraste
   (docs/ACESSIBILIDADE.md) */
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.skip-link{position:fixed;top:-60px;left:8px;z-index:1000;background:var(--ink);color:var(--bg0);padding:10px 18px;border-radius:10px;font-size:0.8125rem;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:8px}
/* Escala de fonte (3 níveis, persistida em localStorage — ver a11ySetFontScale)
   ⚠️ Só funciona porque TODO font-size do app é rem. Enquanto eram px (1252
   deles, até a v274) estas duas linhas mudavam o font-size do <html> e mais
   nada: o botão acendia e o texto ficava igual. O guarda está em
   tests/rotas_test.php. */
html[data-fontscale="md"]{font-size:115%}
html[data-fontscale="lg"]{font-size:130%}
/* Contraste: --txt3 é o texto mais claro do sistema (metadados); AA exige
   ≥4.5:1 em texto pequeno. Original (#ab9e8c/#655f52) media 2.35:1/2.92:1 —
   os tons abaixo passam AA mantendo a paleta quente. */
:root{--txt3:#756b5c}
.dark{--txt3:#8f887a}
.app{max-width:480px;margin:0 auto;position:relative}
/* ⚠️ overflow-x:clip — a invariante: tela de celular NÃO rola pro lado.
   Os transbordos de CONTEÚDO foram consertados um a um na origem (.form-row-2,
   .compra-add, a linha de horários de Atuação): clip não é pra varrer isso pra
   baixo do tapete. Ele é pra sobra de DECORAÇÃO, que não tem como o autor
   prever — o ::after de 44px do alvo de toque num botão colado na borda
   direita põe 3px pra fora e a página inteira ganha rolagem, e a faixa de abas
   (que rola sozinha, por dentro) empurrava o documento em algumas telas.

   `clip`, e não `hidden`: hidden criaria um contêiner de rolagem e quebraria o
   position:sticky da faixa de abas. clip corta sem criar rolagem nenhuma.

   Só no eixo X. Vertical continua livre — é por onde a página rola. */
.page{display:none;animation:none;overflow-x:clip}
.page.active{display:block;animation:pageIn .34s var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
/* Entrada em cascata das seções da página ativa */
.page.active>.section{animation:secIn .45s var(--ease-out) backwards}
.page.active>.section:nth-child(2){animation-delay:.03s}.page.active>.section:nth-child(3){animation-delay:.06s}
.page.active>.section:nth-child(4){animation-delay:.09s}.page.active>.section:nth-child(5){animation-delay:.12s}
.page.active>.section:nth-child(6){animation-delay:.15s}.page.active>.section:nth-child(7){animation-delay:.18s}
@keyframes secIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.header{padding:22px 18px 14px;display:flex;align-items:flex-start;justify-content:space-between;position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg0) 82%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:2px solid var(--border2)}
.h-greeting{font-family:var(--font-cond);font-size:1.9375rem;font-weight:700;color:var(--blue);letter-spacing:0;line-height:.98;text-transform:uppercase;text-shadow:2px 2px 0 var(--red)}
.h-greeting em{font-style:normal;font-weight:700;color:inherit}
.h-date{font-size:0.6875rem;color:var(--txt3);margin-top:4px;font-family:'DM Mono',monospace;letter-spacing:.03em;text-transform:lowercase}
.h-right{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-top:3px}
.score-badge{font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:20px;cursor:pointer;font-family:'DM Mono',monospace;background:var(--bg2);color:var(--txt2);border:1px solid var(--border2);transition:background .15s,color .15s}
.score-badge.good{background:var(--green-bg);color:var(--green);border-color:transparent}
.score-badge.ok{background:var(--amber-bg);color:var(--amber);border-color:transparent}
.score-badge.bad{background:var(--red-bg);color:var(--red);border-color:transparent}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(150deg,color-mix(in srgb,var(--ink) 82%,var(--amber)),var(--ink));color:var(--bg0);display:flex;align-items:center;justify-content:center;font-size:0.6875rem;font-weight:700;font-family:'DM Mono',monospace;flex-shrink:0;cursor:pointer;transition:transform .2s var(--ease-spring);box-shadow:0 0 0 2px var(--bg0),0 0 0 3.5px color-mix(in srgb,var(--amber) 45%,transparent)}
.avatar:active{transform:scale(.9)}
.dark-toggle{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);color:var(--txt2);cursor:pointer;font-size:0.9375rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s var(--ease-spring)}
.dark-toggle:active{transform:scale(.82) rotate(-30deg)}
/* Estado do sino de notificação. 🔔 e 🔕 são o mesmo desenho a 36px — o
   risquinho do "mudo" some — então quem diz se está ligado é a moldura:
   verde = ligado neste aparelho, cinza = desligado, âmbar = autorizado mas
   o servidor não confirmou (ver _pushPintar no app.js). Cor não trabalha
   sozinha: o title e o aria-label dizem o mesmo em palavras. */
.dark-toggle.bell-on{border-color:var(--green);background:var(--green-bg);box-shadow:0 0 0 1px var(--green)}
.dark-toggle.bell-alerta{border-color:var(--amber-border);background:var(--amber-bg)}
.dark-toggle.bell-off{opacity:.72}
.section{padding:14px 16px 0}
/* FANZINE · cabeçalho-pôster de seção (aparece em todas as telas) */
.sec-label{font-size:0.9375rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--txt1);margin-bottom:10px;font-family:var(--font-cond);display:flex;align-items:center;gap:8px;line-height:1.05}
.sec-label::before{content:'';width:9px;height:15px;background:var(--red);flex:none}
.sec-label::after{content:'';flex:1;height:2px;background:var(--border2)}
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sec-header .sec-label{margin-bottom:0}
.sec-add-btn{font-size:0.6875rem;font-weight:600;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:var(--r8);padding:3px 10px;cursor:pointer;font-family:'DM Mono',monospace;transition:all .15s}
.sec-add-btn:active{transform:scale(.95)}
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.fc-grid .fc:first-child{grid-column:1/-1}
.fc-grid .fc:first-child .fc-val{font-size:2rem}
.home-summary .fc:first-child{grid-column:auto}
.home-summary .fc:first-child .fc-val{font-size:1.75rem}
.home-summary{grid-template-columns:1fr 1fr}
.fc{background:var(--bg1);border:1.5px solid var(--border2);border-radius:var(--r16);padding:15px 16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);position:relative;overflow:hidden}
@media(hover:hover){.fc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}}
.fc:active{transform:scale(.97);box-shadow:var(--shadow-sm)}
.fc-accent{position:absolute;top:0;left:0;right:0;height:3px}
.fc-label{font-size:0.625rem;letter-spacing:.07em;text-transform:uppercase;color:var(--txt3);margin-bottom:7px;font-family:'DM Mono',monospace}
.fc-val{font-size:1.6875rem;font-weight:700;letter-spacing:-1.3px;color:var(--txt1);line-height:1;font-variant-numeric:tabular-nums}
.fc-val.sm{font-size:1.1875rem}
.fc-val.green{color:var(--green)}.fc-val.amber{color:var(--amber)}.fc-val.red{color:var(--red)}.fc-val.purple{color:var(--purple)}
.fc-sub{font-size:0.6875rem;color:var(--txt3);margin-top:4px}
/* Count-up */
.count-up{will-change:contents;font-variant-numeric:tabular-nums}
.fc-bar{height:4px;background:var(--bg2);border-radius:3px;margin-top:9px;overflow:hidden}
.fc-bar-fill{height:100%;border-radius:3px;transition:width .5s}
.cal-card{background:var(--bg1);border-radius:var(--r16);padding:16px;box-shadow:var(--shadow);margin-bottom:10px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.cal-month{font-family:var(--font-cond);font-size:1rem;font-weight:600;color:var(--txt1)}
.cal-nav{display:flex;gap:5px}
.cal-nav button{width:26px;height:26px;border-radius:8px;border:1px solid var(--border2);background:var(--bg2);color:var(--txt2);cursor:pointer;font-size:0.75rem;display:flex;align-items:center;justify-content:center;transition:background .1s}
.cal-nav button:active{background:var(--bg3)}
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:5px}
.cal-dow{font-size:0.625rem;text-align:center;color:var(--txt3);font-weight:600}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--txt2);border-radius:50%;cursor:pointer;position:relative;transition:background .1s;user-select:none}
.cal-day:hover{background:var(--bg2)}
.cal-day.today{background:var(--ink);color:var(--bg0);font-weight:700}
.cal-day.has-ev::after{content:'';position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%;background:var(--amber)}
.cal-day.today.has-ev::after{background:var(--bg0)}
.cal-day.other-m{color:var(--bg3)}
.cal-day.sel{background:var(--amber-bg);color:var(--amber);font-weight:700}
.cal-day.today.sel{background:var(--ink);color:var(--bg0)}
.cal-events{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.cal-ev{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--bg2);border-radius:var(--r8)}
.cal-ev-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cal-ev-time{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;flex-shrink:0}
.cal-ev-name{font-size:0.75rem;color:var(--txt1)}
.cal-empty{font-size:0.75rem;color:var(--txt3);text-align:center;padding:10px 0}
/* Task cards */
.task-card{background:var(--bg1);border-radius:var(--r12);padding:12px 14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:11px;margin-bottom:8px;position:relative;overflow:hidden;transition:transform .15s var(--ease-out),box-shadow .15s}
.task-card:active{transform:scale(.98)}
@media(hover:hover){.task-card:hover{box-shadow:var(--shadow)}}
.task-chk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bg3);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease-spring);cursor:pointer}
.task-chk:active{transform:scale(.8)}
.task-chk.done{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 15%,transparent)}
.task-chk.done::after{content:'✓';font-size:0.75rem;color:#fff;font-weight:700;animation:chkPop .3s var(--ease-spring)}
@keyframes chkPop{from{transform:scale(0)}to{transform:scale(1)}}
.task-body{flex:1;min-width:0;cursor:pointer}
.task-title{font-size:0.8125rem;color:var(--txt1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-title.done{color:var(--txt3);text-decoration:line-through}
.task-meta{font-size:0.625rem;color:var(--txt3);margin-top:2px;font-family:'DM Mono',monospace}
.task-badge{font-size:0.625rem;font-weight:600;padding:3px 8px;border-radius:20px;flex-shrink:0;font-family:'DM Mono',monospace}
.task-badge.urg{background:var(--red-bg);color:var(--red)}.task-badge.mid{background:var(--purple-bg);color:var(--purple)}.task-badge.ok{background:var(--green-bg);color:var(--green)}
/* Linha de lista genérica. `.item-del` e `.item-edit` existiam desde sempre,
   e `.item`/`.item-main`/`.item-title`/`.item-sub` — usados em 13 lugares do
   app.js — não existiam em lugar nenhum: sem `display:flex`, o nome e os
   botões empilhavam em vez de ficar lado a lado. Ninguém notou porque todas
   as listas que usam esta classe ficavam em telas pouco visitadas, e a
   última delas (Atuação) estava estacionada. */
.item{background:var(--bg1);border-radius:var(--r12);padding:10px 14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px;margin-bottom:7px}
.item-main{flex:1;min-width:0}
.item-title{font-size:0.875rem;color:var(--txt1);overflow:hidden;text-overflow:ellipsis}
.item-sub{font-size:0.6875rem;color:var(--txt3);margin-top:2px;line-height:1.45}
.item-del{width:28px;height:28px;border-radius:8px;border:none;background:var(--red-bg);color:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.8125rem;flex-shrink:0;transition:background .13s}
.item-del:active{background:#fecdd3}
.item-edit{width:28px;height:28px;border-radius:8px;border:none;background:var(--bg2);color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.8125rem;flex-shrink:0;transition:background .13s}
.item-edit:active{background:var(--bg3)}
/* Shopping list */
/* flex-wrap porque a linha de busca de Preços tem três itens (campo, 🔍 e
   "🌐 Web") e, com a fonte grande, eles não cabem lado a lado: o botão da
   ponta saía 7px da tela. Sem wrap, flex não tem pra onde ir — ele estoura
   em silêncio. Com wrap, o último desce uma linha e ninguém perde botão. */
.compra-add{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
/* min-width:0 porque `flex:1` sozinho não encolhe um <input>: a largura
   mínima natural de um campo de texto é a do próprio controle (~20
   caracteres), e `min-width:auto` a respeita. Com a fonte grande a 360px,
   o campo sozinho já era maior que a linha e transbordava 9px mesmo com
   o flex-wrap posto. Achado por tests/browser/layout.mjs, que mede por
   dentro — o overflow-x:clip do .page já tinha escondido o sintoma. */
.compra-input{flex:1;min-width:0;background:var(--bg1);border:1px solid var(--border2);border-radius:10px;padding:9px 12px;font-size:0.8125rem;color:var(--txt1);font-family:inherit;outline:none;transition:border-color .15s}
.compra-input:focus{border-color:var(--amber)}
.compra-add-btn{width:40px;border:none;border-radius:10px;background:var(--amber);color:#fff;font-size:1.25rem;font-weight:600;cursor:pointer;flex-shrink:0}
.compra-card{background:var(--bg1);border-radius:var(--r12);padding:10px 14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:11px;margin-bottom:7px;transition:transform .13s}
.compra-card:active{transform:scale(.98)}
.compra-card .cc-body{flex:1;min-width:0}
.compra-card .cc-title{font-size:0.8125rem;color:var(--txt1)}
.cc-price{font-size:0.625rem;color:var(--green);font-family:'DM Mono',monospace;margin-top:2px}
.cc-price.est{color:var(--txt3)}
.cc-sub{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;margin-top:2px}
.gtipo-btn{flex:1;padding:9px;border:1px solid var(--border2);background:var(--bg1);color:var(--txt2);border-radius:10px;font-size:0.8125rem;font-weight:600;cursor:pointer;transition:all .13s}
.gtipo-btn.active{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border)}
#gt-receita.active{background:var(--green-bg);color:var(--green);border-color:#bbf7d0}
details.acc{border:1px solid var(--border);border-radius:var(--r12);margin:8px 0;background:var(--bg1);overflow:hidden}
details.acc>summary{list-style:none;cursor:pointer;padding:11px 13px;font-weight:600;font-size:0.8125rem;color:var(--txt1);display:flex;align-items:center;justify-content:space-between;user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:'▾';color:var(--txt3);font-size:0.6875rem;transition:transform .2s}
details.acc[open]>summary::after{transform:rotate(180deg)}
details.acc>.acc-body{padding:2px 13px 12px}
.compra-buy{width:28px;height:28px;border-radius:8px;border:none;background:var(--green-bg);color:var(--green);cursor:pointer;font-size:0.875rem;flex-shrink:0}
/* Inventory */
.stock-card{background:var(--bg1);border-radius:var(--r12);padding:9px 12px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:9px;margin-bottom:7px}
.stock-body{flex:1;min-width:0}
.stock-name{font-size:0.8125rem;color:var(--txt1);font-weight:500}
.stock-meta{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;margin-top:1px}
.stock-qty{font-size:0.8125rem;font-weight:600;color:var(--txt1);min-width:46px;text-align:center;font-family:'DM Mono',monospace}
.stock-btn{width:30px;height:30px;border-radius:8px;border:none;background:var(--bg2);color:var(--txt1);cursor:pointer;font-size:1.0625rem;font-weight:600;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .1s}
.stock-btn:active{background:var(--amber-bg)}
.stock-low .stock-name{color:var(--red)}
.stock-cat{font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);font-family:'DM Mono',monospace;margin:10px 0 6px}
/* Global score banner */
.global-score{background:var(--bg1);border-radius:var(--r12);padding:10px 14px;margin:0 16px 10px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px;cursor:pointer;transition:transform .12s}
.global-score:active{transform:scale(.98)}
.gs-val{font-family:var(--font-cond);font-size:1.75rem;font-weight:700;line-height:1;flex-shrink:0}
.gs-status{font-size:0.75rem;font-weight:600;color:var(--txt1)}
.gs-bars{display:flex;gap:4px;margin-top:3px}
.gs-bar{height:3px;width:18px;border-radius:2px;background:var(--bg3)}
.gs-bar.on{background:var(--amber)}
/* Heatmap */
.heatmap-wrap{overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.heatmap-grid{display:flex;gap:2px;align-items:flex-start}
.hm-col{display:flex;flex-direction:column;gap:2px}
.hm-cell{width:10px;height:10px;border-radius:2px;background:var(--bg3);flex-shrink:0}
.hm-cell.l1{background:#fed7aa}.hm-cell.l2{background:#fb923c}.hm-cell.l3{background:#ea580c}.hm-cell.l4{background:#b45309}
@media(prefers-color-scheme:dark){.hm-cell.l1{background:#92400e}.hm-cell.l2{background:#b45309}.hm-cell.l3{background:#d97706}.hm-cell.l4{background:#f59e0b}}
.dark .hm-cell.l1{background:#92400e}.dark .hm-cell.l2{background:#b45309}.dark .hm-cell.l3{background:#d97706}.dark .hm-cell.l4{background:#f59e0b}
/* Score card */
.score-card{background:#1c1a14;border:1px solid var(--border2);border-radius:var(--r16);padding:20px;box-shadow:var(--shadow);margin-bottom:12px;position:relative;overflow:hidden}
.score-card::before{display:none}
.score-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.score-big{font-family:var(--font-cond);font-size:3.375rem;font-weight:700;color:var(--gold);line-height:1;letter-spacing:-3px;flex-shrink:0}
.score-level{font-size:0.875rem;font-weight:600;color:var(--bg0);margin-bottom:3px}
.score-desc{font-size:0.6875rem;color:var(--txt3);font-family:'DM Mono',monospace}
.score-bars{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sb-row{display:flex;flex-direction:column;gap:3px}
.sb-label{font-size:0.5625rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.05em;font-family:'DM Mono',monospace}
.sb-track{height:3px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.sb-fill{height:100%;border-radius:2px;background:var(--gold)}
/* Category list */
.cat-list{background:var(--bg1);border-radius:var(--r16);padding:15px;box-shadow:var(--shadow);margin-bottom:10px}
.cat-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--bg2)}
.cat-row:last-child{border:none}
.cat-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.cat-name{font-size:0.75rem;color:var(--txt2);flex:1}
.cat-bar-w{width:80px;height:4px;background:var(--bg2);border-radius:2px;overflow:hidden;flex-shrink:0}
.cat-bar-f{height:100%;border-radius:2px}
.cat-val{font-size:0.6875rem;color:var(--txt1);width:54px;text-align:right;flex-shrink:0;font-family:'DM Mono',monospace;font-weight:500}
/* Astro / Tarot */
.astro-card{background:linear-gradient(135deg,var(--amber-bg),transparent);border:1px solid var(--amber-border);border-radius:var(--r16);padding:15px;box-shadow:var(--shadow-sm),var(--amber-glow);margin-bottom:10px}
.astro-tag{font-size:0.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);font-family:'DM Mono',monospace;margin-bottom:5px}
.astro-planet{font-family:var(--font-cond);font-size:0.9375rem;font-weight:600;color:var(--txt1);margin-bottom:3px}
.astro-desc{font-size:0.75rem;color:var(--txt2);line-height:1.55}
.astro-date{font-size:0.625rem;color:var(--gold);font-family:'DM Mono',monospace;margin-top:6px}
.astro-tab-btn{flex:1;padding:8px 0;border:1px solid var(--amber-border);background:var(--bg2);border-radius:12px;font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--txt2);cursor:pointer;transition:all .15s}
.astro-tab-btn.active{background:var(--amber);color:#fff;border-color:var(--amber)}
.horo-card{background:linear-gradient(135deg,var(--amber-bg),transparent);border:1px solid var(--amber-border);border-radius:var(--r16);padding:18px;box-shadow:var(--shadow-sm);font-size:0.8125rem;color:var(--txt1);line-height:1.65;white-space:pre-wrap}
.natal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.natal-item{background:var(--bg2);border:1px solid var(--bg3);border-radius:12px;padding:9px 11px;font-size:0.75rem;color:var(--txt2)}
.natal-item b{color:var(--txt1);font-family:var(--font-cond)}
.tarot-card{background:#14103a;border:1px solid var(--border2);border-radius:var(--r16);padding:15px;box-shadow:var(--shadow-sm);margin-bottom:10px}
.tarot-row{display:flex;align-items:center;gap:12px}
.tarot-glyph{width:42px;height:58px;border-radius:6px;flex-shrink:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:1.375rem}
.tarot-title{font-family:var(--font-cond);font-size:0.875rem;font-weight:400;color:#e9d5ff;margin-bottom:3px}
.tarot-desc{font-size:0.75rem;color:#c4b5fd;line-height:1.5}
.tarot-month{font-size:0.625rem;color:#7c3aed;font-family:'DM Mono',monospace;margin-top:5px}
/* Quick-action grid v2 */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.qa-btn{background:var(--bg1);border:1.5px solid var(--border2);border-radius:var(--r12);padding:13px 12px;display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:transform .12s,box-shadow .12s;color:var(--txt1);width:100%;text-align:left;box-shadow:var(--shadow)}
.qa-btn:active{transform:scale(.96);box-shadow:none}
@media(hover:hover){.qa-btn:hover{border-color:var(--accent)}}
.qa-icon{font-size:1.25rem;display:flex;align-items:center;justify-content:center;width:36px;height:36px}
.qa-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Emoji replacement SVGs */
.e-svg{width:16px;height:16px;vertical-align:middle;flex-shrink:0}
.sec-label .e-svg{width:14px;height:14px}
.e-svg :not([fill]){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.e-svg [fill]{fill:currentColor;stroke:none}
.cmd-group-label .e-svg{width:12px;height:12px}
.h-date .e-svg{width:12px;height:12px}
.modal-title .e-svg{width:20px;height:20px}
button .e-svg{width:18px;height:18px}
.qa-label{font-size:0.8125rem;font-weight:600}.qa-desc{font-size:0.6875rem;color:var(--txt3)}
/* FANZINE · registro por ícones grandes (Início, Fase 1) */
/* auto-fit e não repeat(4,1fr): uma trilha `1fr` tem min-width:auto, então ela
   não encolhe abaixo do conteúdo — com a fonte em 120% o rótulo "ABASTECER"
   ficava mais largo que 1/4 da tela e a grade inteira transbordava, jogando
   TODAS as páginas em rolagem horizontal. Medido a 360px. Com auto-fit a grade
   reflui em vez de estourar, e o teto da escala de fonte foi de 115% pra 150%.

   O piso é 5.3rem porque foi o menor valor em que o rótulo CABE no botão, em
   360/390/430px e nas três escalas — medido, não estimado. Abaixo disso
   "Abastecer" derrama pra fora do próprio botão, e derramava ANTES desta
   mudança também: com repeat(4,1fr) a 390px ele já ficava 77px de texto num
   espaço de 73px. Quatro colunas e "Abastecer" não cabem juntos em tela de
   celular; o que a v274 fez foi parar de fingir que cabiam. Em rem, e não em
   px, pra o número de colunas cair sozinho quando a fonte cresce. */
.reg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.3rem,1fr));gap:8px}
.reg-btn{background:var(--bg1);border:2px solid var(--border2);border-radius:var(--r12);padding:12px 3px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;color:var(--txt1);box-shadow:var(--shadow);transition:transform .1s,border-color .12s}
.reg-btn:active{transform:translate(1px,1px);box-shadow:none}
@media(hover:hover){.reg-btn:hover{border-color:var(--accent)}}
.reg-btn svg{width:23px;height:23px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reg-btn .rl{font-family:var(--font-cond);font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:.02em}
.capbar{display:flex;align-items:center;gap:9px;border:2px solid var(--border2);border-radius:var(--r12);padding:6px 6px 6px 12px;margin-top:9px}
.capbar .cmk{color:var(--red);font-family:var(--font-cond);font-weight:700;font-size:1.0625rem;flex:none}
.capbar input{flex:1;background:none;border:0;color:var(--txt1);font-size:0.8125rem;min-width:0;font-family:'DM Sans',sans-serif}
.capbar input::placeholder{color:var(--txt3)}
.capbar button{flex:none;width:34px;height:34px;border-radius:var(--r8);border:0;cursor:pointer;font-size:0.9375rem;display:flex;align-items:center;justify-content:center}
.capbar .cap-mic{background:var(--bg2);color:var(--txt2)}
.capbar .cap-go{background:var(--accent);color:var(--bg0)}
.cap-hint{font-family:'DM Mono',monospace;font-size:0.5938rem;color:var(--txt3);text-align:center;margin-top:6px;letter-spacing:.03em}
.sec-toggle{background:var(--bg2);border:none;color:var(--txt2);border-radius:9px;padding:4px 10px;font-size:0.6875rem;cursor:pointer;font-family:'DM Mono',monospace}
.qar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.qar-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 6px;background:var(--bg1);border-radius:var(--r16);border:none;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .22s var(--ease-spring),background .15s,box-shadow .2s;color:var(--txt1)}
.qar-btn:active{transform:scale(.9);background:var(--bg2)}
@media(hover:hover){.qar-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
.qar-icon{font-size:1.375rem;width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--bg2);transition:transform .22s var(--ease-spring)}
.qar-btn:active .qar-icon{transform:scale(1.12)}
.qar-icon.gasto{background:var(--red-bg)}.qar-icon.nexus{background:var(--amber-bg)}.qar-icon.tarefa{background:var(--blue-bg)}.qar-icon.humor{background:var(--purple-bg)}.qar-icon.passos{background:var(--green-bg)}.qar-icon.rotina{background:var(--amber-bg)}.qar-icon.foco{background:var(--green-bg)}.qar-icon.tarot{background:#1a1040;color:#e9d5ff}
.qar-label{font-size:0.625rem;font-weight:600;color:var(--txt2);font-family:'DM Mono',monospace}
.card{background:var(--bg1);border:1.5px solid var(--border2);border-radius:var(--r16);padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
/* Habits */
.habit-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bg2)}
.habit-row:last-child{border:none}
.habit-name{font-size:0.8125rem;color:var(--txt1);flex:1}
.habit-streak{font-size:0.6875rem;color:var(--txt3);font-family:'DM Mono',monospace}
.habit-chk{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--bg3);background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0;font-size:0.8125rem}
.habit-chk.done{background:var(--green);border-color:var(--green);color:#fff}
.prog-bar-w{height:7px;background:var(--bg2);border-radius:4px;overflow:hidden;margin:8px 0 4px}
.prog-bar-f{height:100%;border-radius:4px;background:var(--amber)}
/* Finance forecast */
.fc-chart{display:flex;flex-direction:column;gap:6px}
.fcc-row{display:flex;align-items:center;gap:8px}
.fcc-label{font-size:0.6875rem;color:var(--txt3);width:30px;flex-shrink:0;font-family:'DM Mono',monospace}
.fcc-track{flex:1;height:20px;background:var(--bg2);border-radius:5px;overflow:hidden}
.fcc-fill{height:100%;border-radius:5px;display:flex;align-items:center;padding:0 7px;font-size:0.625rem;font-weight:600;color:#fff;min-width:6px;transition:width .5s}
.fcc-val{font-size:0.6875rem;color:var(--txt2);width:58px;text-align:right;flex-shrink:0;font-family:'DM Mono',monospace}
/* Category filter chips */
.cat-chip{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:5px 12px;font-size:0.6875rem;color:var(--txt2);cursor:pointer;white-space:nowrap;font-family:'DM Mono',monospace;transition:all .15s;flex-shrink:0}
.cat-chip.active{background:var(--ink);color:var(--bg0);border-color:var(--ink)}
/* Botão pequeno de ação. ⚠️ A classe era usada em 24 lugares do app.js e do
   index.html e NÃO TINHA REGRA NENHUMA — todos renderizavam como botão cru do
   navegador, fora da tipografia do app. Descoberto na v290, ao acrescentar o
   25º. min-height 32px e não 44: são botões secundários dentro de um cartão,
   não alvos primários (a regra dos 44px vale pros que decidem a tela). */
.btn-chip{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:6px 12px;min-height:32px;font-size:0.6875rem;color:var(--txt2);cursor:pointer;white-space:nowrap;font-family:'DM Mono',monospace;transition:all .15s}
.btn-chip:hover{background:var(--bg1);color:var(--txt1)}
.btn-chip:active{transform:scale(.97)}
/* Gasto items */
.gasto-item{background:var(--bg1);border-radius:var(--r12);padding:10px 12px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px;margin-bottom:7px;transition:transform .12s}
.gasto-item:active{transform:scale(.98)}
.gasto-icon{width:32px;height:32px;border-radius:var(--r8);background:var(--red-bg);display:flex;align-items:center;justify-content:center;font-size:0.875rem;flex-shrink:0}
.gasto-body{flex:1;min-width:0}
.gasto-name{font-size:0.8125rem;color:var(--txt1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gasto-meta{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;margin-top:1px}
.gasto-amount{font-size:0.8125rem;font-weight:700;color:var(--red);font-family:'DM Mono',monospace;flex-shrink:0;margin-right:4px}
.gasto-item.is-rec{border-left:3px solid var(--green);background:var(--green-bg)}
.gasto-item.is-rec .gasto-icon{background:var(--green-bg)}
.rec-badge{display:inline-block;font-size:0.5rem;font-weight:700;letter-spacing:.4px;color:var(--green);background:var(--green-bg);border:1px solid transparent;border-radius:5px;padding:1px 4px;margin-left:5px;vertical-align:middle;font-family:'DM Mono',monospace}
/* Nexus log items */
.nexus-item{background:var(--bg1);border-radius:var(--r12);padding:10px 12px;box-shadow:var(--shadow-sm);margin-bottom:7px}
.nexus-item-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.nexus-stage-chip{font-size:0.625rem;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--amber-bg);color:var(--amber);font-family:'DM Mono',monospace;flex-shrink:0}
.nexus-item-time{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;flex:1}
.nexus-item-content{font-size:0.75rem;color:var(--txt2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* BOTS PAGE */
.bots-header{padding:20px 18px 12px;position:sticky;top:0;z-index:20;background:var(--bg0);border-bottom:1px solid var(--border)}
.bots-title{font-family:var(--font-cond);font-size:1.375rem;font-weight:300;color:var(--txt1);letter-spacing:-.3px}
.bots-title em{font-style:italic;color:var(--amber)}
.bots-search{margin-top:10px;display:flex;align-items:center;gap:8px;background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r12);padding:8px 12px;box-shadow:var(--shadow-sm)}
.bots-search input{flex:1;border:none;background:transparent;font-size:0.8125rem;color:var(--txt1);outline:none;font-family:'DM Sans',sans-serif}
.bots-search input::placeholder{color:var(--txt3)}
.cmd-group{margin-bottom:6px}
.cmd-group-label{font-size:0.5625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:8px;font-family:'DM Mono',monospace;display:flex;align-items:center;gap:6px}
.cmd-group-label::after{content:'';flex:1;height:1px;background:var(--bg3)}
.cmd-card{background:var(--bg1);border-radius:var(--r12);padding:11px 14px;box-shadow:var(--shadow-sm);margin-bottom:7px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .12s,background .12s}
.cmd-card:active{transform:scale(.97);background:var(--bg2)}
.cmd-icon{width:34px;height:34px;border-radius:var(--r8);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem}
.cmd-body{flex:1;min-width:0}
.cmd-name{font-size:0.8125rem;font-weight:600;color:var(--txt1)}
.cmd-desc{font-size:0.6875rem;color:var(--txt2);margin-top:2px;line-height:1.35}
.cmd-chip{font-size:0.625rem;padding:2px 7px;border-radius:20px;flex-shrink:0;font-family:'DM Mono',monospace;font-weight:500}
.cmd-chip.al{background:var(--green-bg);color:var(--green)}
.cmd-chip.ni{background:var(--purple-bg);color:var(--purple)}
.cmd-chip.nx{background:var(--amber-bg);color:var(--amber)}
.free-card{background:linear-gradient(135deg,var(--amber-bg),transparent);border:1px solid var(--amber-border);border-radius:var(--r12);padding:13px 15px;margin-bottom:7px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .12s}
.free-card:active{transform:scale(.97)}
.free-title{font-size:0.8125rem;font-weight:600;color:var(--amber)}
.free-desc{font-size:0.6875rem;color:var(--txt2);margin-top:2px}
/* Weather card */
/* FANZINE Fase 3 · cartão chapado (sem glow/degradê); azul é a tinta primária */
.weather-card{background:#dbe6f5;border:1px solid var(--border2);border-radius:var(--r16);padding:17px;box-shadow:var(--shadow-sm);margin-bottom:12px;position:relative;overflow:hidden}
.weather-card::before{display:none}
@media(prefers-color-scheme:dark){.weather-card{background:#16233a}}
.dark .weather-card{background:#16233a}
.weather-main{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.weather-temp{font-family:var(--font-cond);font-size:2.75rem;font-weight:700;color:#1e3a5f;line-height:1;letter-spacing:-2px}
@media(prefers-color-scheme:dark){.weather-temp{color:#bfdbfe}}
.dark .weather-temp{color:#bfdbfe}
.weather-cond{font-size:0.8125rem;font-weight:600;color:#1e40af;text-align:right}
@media(prefers-color-scheme:dark){.weather-cond{color:#93c5fd}}
.dark .weather-cond{color:#93c5fd}
.weather-feels{font-size:0.625rem;color:#3b82f6;font-family:'DM Mono',monospace;margin-top:2px;text-align:right}
@media(prefers-color-scheme:dark){.weather-feels{color:#60a5fa}}
.dark .weather-feels{color:#60a5fa}
.weather-details{display:flex;gap:14px;font-size:0.6875rem;color:#1e40af;font-family:'DM Mono',monospace;margin-bottom:8px}
@media(prefers-color-scheme:dark){.weather-details{color:#93c5fd}}
.dark .weather-details{color:#93c5fd}
.weather-forecast{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.wf-day{flex-shrink:0;background:rgba(255,255,255,.5);border-radius:var(--r8);padding:6px 8px;text-align:center;min-width:50px}
@media(prefers-color-scheme:dark){.wf-day{background:rgba(0,0,0,.3)}}
.dark .wf-day{background:rgba(0,0,0,.3)}
.wf-name{font-size:0.5625rem;color:#1e40af;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em}
@media(prefers-color-scheme:dark){.wf-name{color:#93c5fd}}
.dark .wf-name{color:#93c5fd}
.wf-icon{font-size:1rem;margin:3px 0}
.wf-temp{font-size:0.6875rem;font-weight:600;color:#1e3a5f}
@media(prefers-color-scheme:dark){.wf-temp{color:#bfdbfe}}
.dark .wf-temp{color:#bfdbfe}
/* News card */
.news-card{background:var(--bg1);border-radius:var(--r16);padding:15px;box-shadow:var(--shadow);margin-bottom:10px}
.news-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--bg2)}
.news-item:last-child{border:none;padding-bottom:0}
.news-num{font-size:0.625rem;font-weight:700;color:var(--amber);font-family:'DM Mono',monospace;flex-shrink:0;margin-top:2px;min-width:14px}
.news-body{flex:1;min-width:0}
.news-title{font-size:0.75rem;color:var(--txt1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-source{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;margin-top:2px}
/* Finance insights */
.insight-card{background:var(--bg1);border-radius:var(--r16);padding:16px;box-shadow:var(--shadow);margin-bottom:10px}
.insight-ai{font-size:0.75rem;color:var(--txt2);line-height:1.6;white-space:pre-wrap}
.trend-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--bg2)}
.trend-row:last-child{border:none}
.trend-cat{font-size:0.75rem;color:var(--txt2);flex:1;text-transform:capitalize}
.trend-val{font-size:0.75rem;font-weight:600;color:var(--txt1);font-family:'DM Mono',monospace;width:70px;text-align:right;flex-shrink:0}
.trend-badge{font-size:0.625rem;padding:2px 7px;border-radius:20px;flex-shrink:0;font-family:'DM Mono',monospace;font-weight:600;min-width:52px;text-align:center}
.trend-up{background:var(--red-bg);color:var(--red)}.trend-dn{background:var(--green-bg);color:var(--green)}.trend-eq{background:var(--bg2);color:var(--txt3)}
/* Fingerprint bar chart */
.fp-bars{display:flex;align-items:flex-end;gap:3px;height:64px;overflow:hidden}
.fp-bar-w{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.fp-bar{width:100%;border-radius:3px 3px 0 0;background:var(--amber);transition:height .4s;min-height:2px}
.fp-bar.high{background:var(--red)}.fp-bar.low{background:var(--green)}
.fp-lbl{font-size:0.5rem;color:var(--txt3);font-family:'DM Mono',monospace;white-space:nowrap}
/* Recovery meter */
.rec-meter{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;margin:8px 0 4px}
.rec-fill{height:100%;border-radius:4px;transition:width .5s}
/* Velocity chart */
.vel-bars{display:flex;align-items:flex-end;gap:3px;height:56px}
.vel-bar-w{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.vel-bar{width:100%;border-radius:3px 3px 0 0;min-height:2px;transition:height .4s}
.vel-lbl{font-size:0.4375rem;color:var(--txt3);font-family:'DM Mono',monospace;white-space:nowrap}
/* Recorrentes list */
.rec-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--bg2)}
.rec-item:last-child{border:none}
.rec-body{flex:1;min-width:0}
.rec-name{font-size:0.75rem;color:var(--txt1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-meta{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;margin-top:1px}
.rec-val{font-size:0.8125rem;font-weight:700;color:var(--amber);font-family:'DM Mono',monospace;flex-shrink:0}
.sub-item{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--bg2)}
.sub-item:last-child{border:none}
.sub-body{flex:1;min-width:0}
.sub-name{font-size:0.75rem;color:var(--txt1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-meta{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace}
.sub-val{font-size:0.75rem;font-weight:600;color:var(--txt1);font-family:'DM Mono',monospace}
/* Monte Carlo */
.mc-fan{position:relative;width:100%;height:90px;overflow:hidden}
.mc-fan svg{width:100%;height:100%}
.mc-table{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-top:10px}
.mc-cell{background:var(--bg2);border-radius:8px;padding:7px 8px;text-align:center}
.mc-cell-lbl{font-size:0.5625rem;color:var(--txt3);font-family:'DM Mono',monospace;letter-spacing:.04em;margin-bottom:2px}
.mc-cell-val{font-size:0.75rem;font-weight:700;color:var(--txt1);font-family:'DM Mono',monospace}
.mc-cell-sub{font-size:0.5625rem;color:var(--txt3);font-family:'DM Mono',monospace;margin-top:1px}
.mc-cv-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--bg2);font-size:0.6875rem}
.mc-cv-row:last-child{border:none}
.mc-cv-cat{color:var(--txt2);flex:1}
.mc-cv-badge{font-size:0.625rem;font-family:'DM Mono',monospace;padding:2px 6px;border-radius:10px;background:var(--bg2);color:var(--txt3)}
/* Detetive de Gastos */
.det-ok{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--green);font-size:0.8125rem}
.det-section{font-size:0.625rem;font-weight:700;color:var(--txt3);font-family:'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;margin:10px 0 4px}
.det-row{font-size:0.75rem;color:var(--txt2);padding:4px 0;border-bottom:1px solid var(--bg2);line-height:1.4}
.det-row:last-child{border:none}
/* Radar */
.radar-conn{background:var(--bg2);border-radius:var(--r12);padding:12px;margin-bottom:8px}
.radar-conn-title{font-size:0.75rem;font-weight:700;color:var(--txt1);margin-bottom:4px}
.radar-conn-body{font-size:0.6875rem;color:var(--txt2);line-height:1.5;white-space:pre-wrap}
.cultural-card{background:var(--bg2);border-radius:var(--r12);padding:12px;font-size:0.75rem;color:var(--txt2);line-height:1.6;white-space:pre-wrap}
/* OFX upload */
.ofx-area{border:2px dashed var(--border2);border-radius:var(--r12);padding:20px;text-align:center;cursor:pointer;transition:border-color .2s}
.ofx-area:hover,.ofx-area.drag{border-color:var(--amber)}
.ofx-area input{display:none}
.ofx-label{font-size:0.75rem;color:var(--txt3);font-family:'DM Mono',monospace;margin-top:6px}
/* NAV — dock flutuante em vidro */
.nav{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:12px;right:12px;background:var(--nav-glass);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:0;border-radius:26px;display:flex;max-width:456px;margin:0 auto;padding:8px 6px;z-index:100}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:6px 0 4px;color:var(--txt3);-webkit-tap-highlight-color:transparent;transition:color .2s;position:relative;border-radius:18px}
.nav-item .ni{display:flex;align-items:center;justify-content:center;height:24px}
.nav-item .ni svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .25s var(--ease-out),transform .3s var(--ease-spring)}
.nav-item .nl{font-size:0.5625rem;color:inherit;font-family:'DM Mono',monospace;letter-spacing:.04em;opacity:.7;transition:opacity .18s}
.nav-item.active{color:var(--amber);background:color-mix(in srgb,var(--amber) 11%,transparent)}
.nav-item.active::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:3px;border-radius:0 0 3px 3px;background:var(--amber)}
.nav-item:active .ni svg{transform:scale(.82)}.nav-item.active .ni svg{opacity:1;transform:translateY(-1px);stroke-width:1.9}
.nav-item.active .nl{opacity:1;font-weight:600}
/* Subnav tabs */
.subnav{position:sticky;top:0;z-index:60;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--bg0) 84%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);padding:10px 14px;border-bottom:1px solid var(--border)}
.subnav::-webkit-scrollbar{display:none}
.subtab{flex:0 0 auto;border:1px solid var(--border2);background:var(--bg1);color:var(--txt2);font-family:'DM Mono',monospace;font-size:0.75rem;padding:7px 16px;border-radius:22px;cursor:pointer;transition:all .2s var(--ease-out);white-space:nowrap;box-shadow:var(--shadow-sm)}
.subtab:active{transform:scale(.95)}
.subtab.active{background:var(--ink);color:var(--bg0);border-color:var(--ink);font-weight:600;box-shadow:0 3px 10px -2px rgba(0,0,0,.25)}
.subtab.cluster{font-weight:600}
.subnav-sub{position:static;top:auto;padding-top:2px;padding-bottom:11px}
.subnav-sub .subtab{font-size:0.6875rem;padding:5px 13px}
/* Historico / Comparativo */
.hist-row{display:flex;justify-content:space-between;align-items:center;background:var(--bg1);border:1px solid var(--border);border-radius:var(--r12);padding:11px 13px;margin-bottom:6px}
.hist-m{font-weight:600;font-size:0.8125rem}
.hist-vals{display:flex;gap:11px;font-family:'DM Mono',monospace;font-size:0.6875rem;align-items:center}
.hist-deb{color:var(--txt2)} .hist-card{color:var(--purple)} .hist-rec{color:var(--green)}
.cmp-bars{display:flex;gap:8px;align-items:flex-end;height:150px;padding:6px 2px 0}
.cmp-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.cmp-bar{width:68%;background:var(--amber);border-radius:6px 6px 0 0;min-height:3px;transition:height .3s}
.cmp-bar.cur{background:var(--ink)}
.cmp-lbl{font-size:0.5625rem;color:var(--txt3);font-family:'DM Mono',monospace}
.cmp-val{font-size:0.5625rem;color:var(--txt2);font-family:'DM Mono',monospace}
.cmp-tbl{font-size:0.75rem}
.cmp-h,.cmp-r{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4px;padding:7px 8px;align-items:center}
.cmp-h{font-size:0.5625rem;color:var(--txt3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em}
.cmp-r{border-top:1px solid var(--border);font-family:'DM Mono',monospace;font-size:0.6875rem}
.cmp-r .up{color:var(--red)} .cmp-r .down{color:var(--green)}
.sk{background:var(--bg2);border-radius:var(--r8);position:relative;overflow:hidden}
.sk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 50%,transparent);animation:shimmer 1.6s ease infinite}
.dark .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.04) 50%,transparent)}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* MODAL bottom sheet */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .22s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-overlay.open{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-sheet{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;background:var(--bg1);border-radius:26px 26px 0 0;border-top:1px solid var(--border2);z-index:201;transform:translateY(100%);transition:transform .34s cubic-bezier(.32,.72,0,1);padding:0 0 max(24px,env(safe-area-inset-bottom))}
.modal-sheet.open{transform:translateY(0);box-shadow:0 -8px 48px rgba(0,0,0,.22)}
.modal-handle{width:36px;height:4px;background:var(--bg3);border-radius:2px;margin:12px auto 0}
.modal-header{padding:16px 20px 0;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-family:var(--font-cond);font-size:1.125rem;font-weight:600;color:var(--txt1)}
.modal-close{width:28px;height:28px;border-radius:50%;background:var(--bg2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.875rem;color:var(--txt2)}
.modal-body{padding:16px 20px 0}
.form-row{margin-bottom:14px}
.form-label{font-size:0.6875rem;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.06em;font-family:'DM Mono',monospace;margin-bottom:6px;display:block}
.form-input{width:100%;background:var(--bg2);border:1.5px solid var(--border2);border-radius:var(--r12);padding:11px 14px;font-size:0.875rem;color:var(--txt1);font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.form-input:focus{border-color:var(--amber);background:var(--bg1);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 14%,transparent)}
textarea.form-input{resize:none;min-height:80px;line-height:1.5}
select.form-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
/* minmax(0,1fr), e não 1fr: uma trilha `1fr` tem min-width:auto, então ela não
   encolhe abaixo do conteúdo. Com a fonte em 130% o rótulo "Fim · se durou
   mais de um dia" (tela de Formação) ficava mais largo que metade da tela e
   empurrava a grade inteira 12px pra fora — a página ganhava rolagem
   horizontal. Medido a 390px. Com o piso em 0 a trilha encolhe e o rótulo
   quebra em duas linhas, que é o que se espera de um rótulo comprido.
   Mesma causa que a .reg-grid tinha na v274. */
.form-row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.btn-primary{width:100%;background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 88%,var(--amber)),var(--ink));color:var(--bg0);border:none;border-radius:var(--r12);padding:14px;font-size:0.9375rem;font-weight:600;letter-spacing:.01em;cursor:pointer;font-family:'DM Sans',sans-serif;transition:filter .15s,transform .15s var(--ease-out),box-shadow .2s;margin-top:4px;box-shadow:0 4px 14px -4px rgba(0,0,0,.3)}
.btn-primary:active{transform:scale(.98);filter:brightness(1.15)}
.btn-primary:disabled{background:var(--bg3);color:var(--txt3);cursor:not-allowed}
/* Rotinas day chips */
.day-chip{display:inline-flex;cursor:pointer}
.day-chip input{display:none}
.day-chip span{display:inline-block;padding:6px 10px;border-radius:20px;font-size:0.75rem;font-weight:600;background:var(--bg2);border:1.5px solid var(--border2);color:var(--txt2);transition:all .15s;font-family:'DM Mono',monospace}
.day-chip input:checked+span{background:var(--amber);border-color:var(--amber);color:#fff}
/* Rotina item */
.rotina-item{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--bg2);border-radius:var(--r12);margin-bottom:8px}
.rotina-item-emoji{font-size:1.25rem;width:32px;text-align:center;flex-shrink:0}
.rotina-item-body{flex:1;min-width:0}
.rotina-item-title{font-size:0.875rem;font-weight:600;color:var(--txt1)}
.rotina-item-meta{font-size:0.6875rem;color:var(--txt3);margin-top:2px;font-family:'DM Mono',monospace}
.rotina-del{background:none;border:none;color:var(--txt3);font-size:1rem;cursor:pointer;padding:4px;border-radius:8px;flex-shrink:0;transition:color .15s}
.rotina-del:active{color:var(--red)}
.rotina-tag{display:inline-block;font-size:0.625rem;font-weight:600;background:var(--accent);color:#fff;padding:1px 7px;border-radius:8px;margin-left:4px;vertical-align:middle}
/* Hábitos home */
.habito-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);transition:opacity .2s}
.habito-row:last-child{border-bottom:none}
.habito-emoji{font-size:1.125rem;flex-shrink:0}
.habito-title{flex:1;font-size:0.8125rem;font-weight:500;color:var(--txt1)}
.habito-time{font-size:0.6875rem;color:var(--txt3);font-family:'DM Mono',monospace;flex-shrink:0}
.habito-btn{background:none;border:none;font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background .15s;flex-shrink:0}
.habito-btn:hover{background:var(--hover)}
.habito-btn:disabled{opacity:.5}
/* Toast */
.toast{position:fixed;bottom:calc(96px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px) scale(.94);background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--bg0);font-size:0.8125rem;font-weight:600;padding:11px 22px;border-radius:22px;z-index:300;opacity:0;transition:all .3s var(--ease-spring);pointer-events:none;white-space:nowrap;font-family:'DM Sans',sans-serif;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.err{background:var(--red)}
.toast.ok{background:var(--green)}
/* Edit modal */
.edit-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;opacity:0;pointer-events:none;transition:opacity .2s}
.edit-modal-overlay.open{opacity:1;pointer-events:all}
/* ⚠️ max-height e overflow: SEM ELES O MODAL NÃO TEM FUNDO.
   Ele é position:fixed ancorado no meio da tela (translate -50%), então
   conteúdo alto cresce pros DOIS lados e escapa da janela em cima e embaixo —
   e, sem overflow, não há como rolar até o que saiu. Faltou desde sempre; só
   apareceu na v292, quando a prévia da fatura trouxe 100 linhas e vazou por
   cima da página inteira, deixando o botão de importar inalcançável.
   dvh antes de vh: no celular a barra do navegador entra e sai, e 100vh mede
   a tela SEM a barra — o rodapé do modal ficaria escondido atrás dela. */
.edit-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-60%);max-width:360px;width:calc(100% - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg1);border-radius:var(--r20);box-shadow:0 8px 40px rgba(0,0,0,.2);z-index:301;padding:20px;opacity:0;transition:all .22s;pointer-events:none}
/* A lista da prévia rola por dentro, pra que a conferência (em cima) e o botão
   de importar (embaixo) fiquem à vista enquanto se percorre 100 compras. */
.fat-lista{max-height:42vh;max-height:42dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r12);background:var(--bg0);padding:2px 8px;margin-top:4px}
.fat-linha{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--bg2)}
.fat-linha:first-child{border-top:0}
.fat-linha > span{font-size:0.75rem;color:var(--txt2);min-width:0;overflow-wrap:anywhere;flex:1}
.fat-linha select{width:auto;max-width:42%;padding:4px 6px;font-size:0.6875rem;flex-shrink:0}
.edit-modal.open{opacity:1;transform:translate(-50%,-50%);pointer-events:all}
.edit-modal-title{font-family:var(--font-cond);font-size:1rem;font-weight:600;color:var(--txt1);margin-bottom:14px}
.edit-modal-actions{display:flex;gap:8px;margin-top:14px}
.btn-cancel{flex:1;background:var(--bg2);color:var(--txt2);border:none;border-radius:var(--r8);padding:11px;font-size:0.875rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif}
.btn-save{flex:2;background:var(--ink);color:var(--bg0);border:none;border-radius:var(--r8);padding:11px;font-size:0.875rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif}
/* Productivity: day / kanban / focus */
.tl{position:relative;margin:6px 0}
.tl-block{display:flex;gap:10px;align-items:stretch;margin-bottom:8px}
.tl-time{width:42px;flex:none;font-family:'DM Mono',monospace;font-size:0.6875rem;color:var(--txt3);padding-top:11px;text-align:right}
.tl-card{flex:1;background:var(--bg1);border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:var(--r12);padding:10px 12px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px}
.tl-card.foco{border-left-color:var(--amber)}.tl-card.evento{border-left-color:var(--purple);background:var(--bg2)}
.tl-card.pausa{border-left-color:var(--green)}.tl-card.tarefa{border-left-color:var(--blue)}.tl-card.pessoal{border-left-color:var(--purple)}
.tl-card.done{opacity:.5}.tl-card.done .tl-title{text-decoration:line-through}
.tl-title{font-size:0.8125rem;color:var(--txt1);font-weight:500;flex:1}
.tl-dur{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace}
.kb-cols{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
.kb-col{flex:0 0 78%;max-width:300px;background:var(--bg2);border-radius:var(--r16);padding:10px}
.kb-col h4{font-size:0.75rem;font-weight:700;color:var(--txt2);margin:0 0 8px;display:flex;justify-content:space-between;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px}
.kb-card{background:var(--bg1);border-radius:var(--r12);padding:9px 11px;box-shadow:var(--shadow-sm);margin-bottom:8px}
.kb-card .t{font-size:0.8125rem;color:var(--txt1);margin-bottom:6px}
.kb-move{display:flex;gap:6px}
.kb-move button{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r8);padding:4px;font-size:0.75rem;cursor:pointer;color:var(--txt2)}
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .bg{stroke:var(--bg3)}.ring .fg{stroke:var(--amber);transition:stroke-dashoffset 1s linear}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bar-row .lbl{font-size:0.6875rem;color:var(--txt2);width:84px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{flex:1;height:8px;background:var(--bg3);border-radius:6px;overflow:hidden}
.bar-row .fill{height:100%;background:var(--amber);border-radius:6px}
.bar-row .val{font-size:0.625rem;color:var(--txt3);font-family:'DM Mono',monospace;width:42px;text-align:right;flex:none}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.chip-sel{font-size:0.75rem;padding:6px 12px;border-radius:20px;border:1px solid var(--border2);background:var(--bg1);color:var(--txt2);cursor:pointer;transition:all .13s}
.chip-sel.on{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border);font-weight:600}
/* FAB — botão-assinatura com gradiente */
#fab{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:16px;background:var(--amber);color:#fff;border:2px solid var(--ink);font-size:1.6875rem;line-height:50px;text-align:center;box-shadow:var(--shadow);z-index:60;cursor:pointer;padding:0;transition:transform .22s var(--ease-spring),box-shadow .22s}
#fab:active{transform:translate(1px,1px);box-shadow:none}
@media(hover:hover){#fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}
/* Agenda compacta da home (próximos dias) */
.agd-day{margin-bottom:12px}
.agd-day:last-child{margin-bottom:0}
.agd-daylbl{font-family:var(--font-cond);font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--txt2);margin-bottom:6px}
.agd-ev{display:flex;align-items:center;gap:10px;background:var(--bg1);border:1.5px solid var(--border2);border-radius:var(--r12);padding:9px 12px;box-shadow:var(--shadow-sm);margin-bottom:6px}
.agd-time{font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--amber);flex:none;min-width:38px}
.agd-name{font-size:0.8125rem;color:var(--txt1);flex:1;line-height:1.35}
.agd-del{width:22px;height:22px;border-radius:6px;border:none;background:var(--red-bg);color:var(--red);cursor:pointer;font-size:0.625rem;flex:none}
/* A caixinha de concluir, só em quem é tarefa. Compromisso do Google não
   tem "feito" e por isso não ganha caixinha — desenhar uma que não faz
   nada é pior que não ter. 26px porque isto é alvo de dedo em lista
   apertada, não um enfeite. */
.agd-check{width:26px;height:26px;border-radius:8px;border:1.5px solid var(--border2);background:var(--bg2);color:var(--txt3);cursor:pointer;font-size:0.8125rem;line-height:1;flex:none;padding:0}
.agd-check:active{background:var(--green-bg,var(--bg3));color:var(--green)}
.quick-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;display:none;align-items:flex-end}
.quick-ov.on{display:flex}
.quick-sheet{background:var(--bg0);width:100%;border-radius:var(--r20) var(--r20) 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 24px rgba(0,0,0,.15);animation:slideup .2s ease}
@keyframes slideup{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
.quick-title{font-family:var(--font-cond);font-size:1.0625rem;color:var(--txt1);margin-bottom:10px}
.quick-res{font-size:0.8125rem;color:var(--txt1);margin-top:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.hchip{font-size:0.6875rem;padding:4px 9px;border-radius:20px;background:var(--bg2);color:var(--txt2);border:1px solid var(--border)}
.hchip.bad{background:var(--red-bg);color:var(--red);border-color:#fecdd3}
/* ── NEW: Doughnut chart ── */
.fin-chart-wrap{display:flex;align-items:center;gap:16px;padding:6px 0 2px}
.fin-chart-svg{flex-shrink:0}
.fin-chart-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fin-chart-legend-item{display:flex;align-items:center;gap:7px;font-size:0.6875rem;color:var(--txt2)}
.fin-chart-legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.fin-chart-legend-val{font-family:'DM Mono',monospace;font-weight:600;color:var(--txt1);margin-left:auto}
/* ── NEW: Weekly summary card ── */
.resumo-card{background:linear-gradient(135deg,var(--amber-bg),transparent);border:1px solid var(--amber-border);border-radius:var(--r16);padding:16px;font-size:0.75rem;color:var(--txt2);line-height:1.6;white-space:pre-wrap}
.resumo-card h4{font-size:0.8125rem;font-weight:600;color:var(--amber);margin-bottom:6px;font-family:var(--font-cond)}
/* ── NEW: Notification status ── */
.push-status{font-size:0.5625rem;font-family:'DM Mono',monospace;color:var(--txt3);margin-top:4px}
.push-btn{background:var(--bg2);border:none;border-radius:10px;padding:8px 10px;font-size:1rem;cursor:pointer;transition:background .15s;flex-shrink:0}
.push-btn:active{background:var(--bg3)}
.h-greeting.fs20{font-size:1.25rem}
.h-12{height:12px}
.h-14{height:14px}
.mono-xs{font-size:0.6875rem;color:var(--txt3);font-family:'DM Mono',monospace}
.empty-state{padding:24px 16px;text-align:center;font-size:0.8125rem;color:var(--txt3);line-height:1.5}
.empty-state.error{color:var(--red)}
#load-more-wrap{text-align:center;padding:8px 0}
.load-more-btn{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r8);padding:8px 20px;font-size:0.75rem;color:var(--txt2);cursor:pointer;font-family:'DM Mono',monospace}

/* ── Preços / Comparador ───────────────────────────────────────────────────── */
.preco-detail{margin-bottom:14px}
.preco-sub{font-size:0.6875rem;color:var(--txt2);margin-top:2px}
.preco-item{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r12);padding:12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.preco-item:hover{border-color:var(--green)}
.preco-item-name{font-weight:600;font-size:0.8125rem;color:var(--txt1)}
.preco-item-price{font-size:1rem;font-weight:700;color:var(--green);font-family:'DM Mono',monospace;margin-top:2px}
.preco-item-meta{font-size:0.6875rem;color:var(--txt3);margin-top:2px}
.preco-item-range{font-size:0.6875rem;color:var(--txt2);font-family:'DM Mono',monospace}
.preco-chart{display:flex;align-items:flex-end;gap:4px;height:80px;margin:12px 0 8px;overflow-x:auto;padding-bottom:4px}
.preco-bar-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:80px;width:32px;position:relative}
.preco-bar{border-radius:4px 4px 0 0;width:24px;min-height:8px;position:relative;display:flex;align-items:center;justify-content:center;transition:height .3s}
.preco-bar-val{font-size:0.5625rem;color:var(--txt2);position:absolute;top:-13px;white-space:nowrap;font-family:'DM Mono',monospace}
.preco-table{border-top:1px solid var(--border2);margin-top:10px;padding-top:8px}
.preco-tr{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;padding:5px 0;font-size:0.6875rem;align-items:center}
.preco-tr+.preco-tr{border-top:1px solid var(--border2)}
.preco-td-date{color:var(--txt3);font-family:'DM Mono',monospace}
.preco-td-store{color:var(--txt2)}
.preco-td-src{color:var(--txt3);font-size:0.625rem;background:var(--bg1);padding:1px 6px;border-radius:4px}
.preco-td-price{font-weight:600;font-family:'DM Mono',monospace;color:var(--txt1);text-align:right}

/* ── Splits (Splitwise) ────────────────────── */
.split-balances{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.split-bal-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;font-size:0.8125rem}
.split-bal-row.positive{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.split-bal-row.negative{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.split-bal-person{font-weight:600}
.split-bal-val{font-weight:700;font-family:'DM Mono',monospace}
.split-expense{background:var(--bg1);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.split-exp-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.split-exp-desc{font-weight:600;color:var(--txt1);font-size:0.875rem}
.split-exp-meta{font-size:0.6875rem;color:var(--txt3);margin-top:1px}
.split-share{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;margin:3px 0;border-radius:6px;background:var(--bg2)}
.split-share.paid{opacity:.55}
.split-share-person{display:flex;align-items:center;gap:6px;font-size:0.8125rem;color:var(--txt1)}
.split-share-dot{width:8px;height:8px;border-radius:50%;background:var(--txt3);flex-shrink:0}
.split-share-dot.green{background:var(--green)}
.split-share-right{display:flex;align-items:center;gap:6px}
.split-share-amount{font-weight:700;font-family:'DM Mono',monospace;font-size:0.8125rem;color:var(--accent)}
.split-exp-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
.split-persons{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.split-person-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg1);border-radius:20px;padding:4px 10px;font-size:0.75rem;color:var(--txt1)}
.split-person-del{cursor:pointer;color:var(--txt3);font-size:0.6875rem;padding:0 2px}
.split-person-del:hover{color:var(--red)}
.split-share-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.ss-remove{cursor:pointer;color:var(--txt3);font-size:0.875rem;padding:4px}
.ss-remove:hover{color:var(--red)}

/* ── Tiny button ───────────────────────────── */
.btn-tiny{border:none;background:var(--bg1);color:var(--txt2);padding:3px 8px;border-radius:6px;font-size:0.6875rem;cursor:pointer;font-family:inherit}
.btn-tiny.green{background:var(--green);color:#fff}
.btn-tiny.red{background:var(--red);color:#fff}
.btn-tiny:hover{filter:brightness(1.1)}
.h-8{height:8px}

/* ═══ v2 · refinamentos globais ═══════════════════════════════ */
/* Scrollbar discreta (desktop) */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--txt3)}
::-webkit-scrollbar-track{background:transparent}
/* Números sempre tabulares em contexto mono */
.fc-val,.gs-val,.score-big,.gasto-amount,.rec-val,.sub-val,.stock-qty{font-variant-numeric:tabular-nums}
/* Empty state com respiro e voz */
.empty-state{padding:32px 16px;border:1.5px dashed var(--border2);border-radius:var(--r16);margin:4px 0}
/* Skeleton mais suave */
.sk{border-radius:var(--r12)}
.sk::after{animation-duration:1.4s}
/* Cards de lista ganham hairline no dark p/ separar do fundo */
.dark .task-card,.dark .compra-card,.dark .gasto-item,.dark .stock-card,.dark .nexus-item,.dark .cmd-card,.dark .kb-card{border:1px solid var(--border)}
/* Calendário: hoje com anel */
.cal-day.today{box-shadow:0 0 0 2px var(--bg0),0 0 0 3.5px color-mix(in srgb,var(--ink) 35%,transparent)}
/* Botão de adicionar compra com gradiente */
.compra-add-btn{background:linear-gradient(150deg,var(--gold),var(--amber));border-radius:12px;transition:transform .18s var(--ease-spring)}
.compra-add-btn:active{transform:scale(.9)}
/* Chips ativos mais assertivos */
.cat-chip.active,.chip-sel.on{box-shadow:0 2px 8px -2px rgba(0,0,0,.2)}
/* Barra de progresso com brilho sutil */
.prog-bar-f,.fc-bar-fill,.bar-row .fill{background-image:linear-gradient(90deg,var(--amber),var(--gold))}
/* Quick sheet coerente com o modal */
.quick-sheet{border-radius:26px 26px 0 0;border-top:1px solid var(--border2)}
/* Global score banner com toque de vidro */
.global-score{border:1px solid var(--border)}
/* iOS: evita zoom em inputs */
@supports(-webkit-touch-callout:none){.form-input,.compra-input,.bots-search input{font-size:1rem}}

/* Dica de trânsito abaixo de um campo de data. Some quando não há nada a
   dizer — é o estado normal na maioria dos dias (ver astro_avaliar_data). */
.astro-dica{font-size:0.6875rem;line-height:1.45;margin:-4px 0 8px;padding-left:8px;
  border-left:2px solid transparent;color:var(--txt3)}
.astro-dica:empty{display:none;margin:0}
.astro-dica[data-tom="evitar"]{border-left-color:var(--red);color:var(--red)}
.astro-dica[data-tom="janela"]{border-left-color:var(--green);color:var(--green)}
.astro-dica[data-tom="agenda"],
.astro-dica[data-tom="tensao"],
.astro-dica[data-tom="apoio"]{border-left-color:var(--border2)}

/* ── Alvo de toque: 44×44 sem engordar o desenho (WCAG 2.5.5) ──────────────
   MEDIDO em 8 páginas, a 390px, antes desta regra:
     .item-del 28×28 · .item-edit 28×28 · .stock-btn 30×30 · .habito-btn 34×27
     .sec-toggle 66×21 · .score-badge 68×23 · .compra-add-btn 40×35
     .subtab 77×30 · .cat-chip 59×30 · .avatar 36×36 · "ver" 35×22
   O pior é o .item-del: 28×28 num botão que APAGA. Pequeno e destrutivo é a
   combinação mais cara — difícil de acertar querendo, fácil de acertar sem
   querer. E o −/+ da despensa (30×30) é o que mais se toca por semana.

   O ::after é a ÁREA, não o desenho. Estender por padding ou min-height
   mudaria o layout de listas densas (o botão empurraria a linha inteira); um
   pseudo-elemento absoluto e transparente cresce só o que o dedo alcança, e a
   caixa visível continua do mesmo tamanho.

   Em rem: a área acompanha a escala de fonte da acessibilidade — quem aumenta
   a letra costuma precisar do alvo maior pelo mesmo motivo.

   ⚠️ ALTURA PRA TODOS, LARGURA SÓ NOS QUADRADOS.
   Espaço vertical nessas fileiras sobra; horizontal não. Alargar um chip de
   35px pra 44px numa fileira com 8px de intervalo faria a área dele invadir a
   do vizinho, e o toque cairia no botão errado — trocar "difícil de acertar"
   por "acerta o outro" não é conserto. Os quadrados (−, +, 🗑, ✏️) ganham os
   dois eixos porque ali a fileira é curta e a ordem do z-index resolve. */
button::after, [role="button"]:not(.task-chk):not(.habit-chk)::after,
.skip-link::after, .avatar::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--alvo-largura, 100%);
  height: max(100%, 2.75rem);   /* 2.75rem = 44px na escala padrão */
  pointer-events: auto;
}
button, [role="button"]:not(.task-chk):not(.habit-chk),
.skip-link, .avatar { position: relative; }

/* Os quadradinhos: também na largura.
   Por VARIÁVEL e não por `width` direto: a regra de cima usa `:not()` duas
   vezes, o que lhe dá especificidade (0,3,1) — maior que `.item-del::after`
   (0,1,1). Escrito como `width:`, o alargamento perdia a disputa em
   silêncio e o alvo ficava 36×44 achando que estava 44×44. (Medido: o
   .avatar continuava com 36px de largura depois da regra "certa".)
   A variável é declarada no ELEMENTO, onde essa briga não existe. */
.item-del, .item-edit, .stock-btn, .habito-btn,
.compra-add-btn, .dark-toggle, .modal-close, .avatar {
  --alvo-largura: max(100%, 2.75rem);
}
/* Numa fileira densa (− 12 un + 🗑) as áreas de 44px se encostam e a de cima
   ganharia o toque da de baixo. z-index escalonado resolve pela ordem certa:
   apagar é o que menos deve roubar toque do vizinho. */
/* O botãozinho no fim do cabeçalho de seção ("ver", "+ registrar") tem a
   direita livre: alargar ali não invade ninguém. */
.sec-label button { --alvo-largura: max(100%, 2.75rem); }
.item-del::after { z-index: 0; }
.stock-btn::after, .item-edit::after { z-index: 1; }

/* #acao-btn ("🔗 Conferir se o arquivo está no servidor", diagnóstico do
   backup na tela Dados): o .btn-chip é nowrap de propósito — chip de filtro
   não quebra por dentro. Mas este não é chip, é um botão de frase inteira:
   com a fonte grande da acessibilidade a 360px ele media 378px e saía 66px
   pra fora da tela (achado do tests/browser/layout.mjs). Aqui o rótulo
   quebra em duas linhas. CSS e não o app.js porque a regra é da classe, e
   a exceção mora do lado da exceção. */
#acao-btn{white-space:normal;text-align:left}