/* ClickTesouro — "lq" design system (Inter + indigo/slate), from the approved
   design comps. Replaces the MudBlazor chrome; pages compose these tokens/classes. */

:root {
    --lqbg:#F8FAFC; --lqsurface:#fff; --lqborder:#CBD5E1; --lqink:#0F172A;
    --lqmuted:#64748B; --lqmuted2:#475569; --lqfaint:#7A89A0;   /* faint darkened from #94A3B8 (2.6:1 on white) to ~3.5:1; text <12px should use --lqmuted (4.8:1, AA) */
    --lqsoft:#EEF2F7; --lqsoft2:#F1F5F9; --lqline2:#CBD5E1;
    /* brand: clicktesouro blue #008CFF + deep blue #063CFF + teal #00D7C2 (from the logo signature) */
    --lqindigobg:#E6F4FF; --lqprevbg:#E3F1FF; --lqprevborder:#B8DEFF; --lqaccent:#008CFF; --lqaccent2:#063CFF; --lqteal:#00D7C2;
    /* per-mode accents (pink retinted to brand teal) */
    --lqgreen:#10B981; --lqamber:#F59E0B; --lqpink:#00B3A6; --lqsky:#0EA5E9; --lqskybg:#E0F2FE;
    --lqsuccess:#0F9669; --lqsuccessbg:#E7F8F0; --lqdanger:#DC2626; --lqdangerbg:#FEECEC;
    --lqwarn:#B45309; --lqwarnbg:#FEF4E6;
    /* AA-safe solid-accent fill + on-fill ink (white on #008CFF is only ~3.4:1) and the "na curva/carrego" carry accent */
    --lqbtn:#0072CE; --lqbtnink:#fff; --lqbtnink2:rgba(255,255,255,.82); --lqcurve:#C2680C;
}
html.lqdark {
    --lqbg:#0F172A; --lqsurface:#1E293B; --lqborder:#334155; --lqink:#E6EAF2;
    --lqmuted:#9AA6B8; --lqmuted2:#C2CAD8; --lqfaint:#71809A;
    --lqsoft:#22324A; --lqsoft2:#1C2940; --lqline2:#3C4B62;
    --lqindigobg:#0E2E4D; --lqprevbg:#0F2540; --lqprevborder:#1E4E7A; --lqaccent:#4DA6FF; --lqaccent2:#5B8CFF; --lqteal:#00D7C2;
    --lqsky:#38BDF8; --lqskybg:#0C2D42;   /* sky lifted for dark (matches the Mud dark Secondary); bg = deep sky-tinted navy */
    --lqsuccess:#34D399; --lqsuccessbg:#10312A; --lqdanger:#F87171; --lqdangerbg:#3A1D1D;
    --lqwarn:#FBBF24; --lqwarnbg:#3A2E12;
    --lqgreen:#34D399; --lqamber:#FBBF24; --lqpink:#2DD4C4;   /* rail-icon accents lifted for the dark surface */
    --lqbtn:#4DA6FF; --lqbtnink:#0F172A; --lqbtnink2:rgba(15,23,42,.72); --lqcurve:#E0A86A;   /* dark button: bright fill + dark ink (white would be ~2.6:1) */
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:var(--lqbg); color:var(--lqink); -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
.tabular-nums { font-variant-numeric:tabular-nums; }
.lqmi { font-family:'Material Icons'; font-feature-settings:'liga'; line-height:1; }

/* ── App shell: sticky top bar + left rail + content ── */
.lq-topbar { position:sticky; top:0; z-index:40; background:var(--lqsurface); border-bottom:1px solid var(--lqborder); }
.lq-topbar__in { max-width:1240px; margin:0 auto; height:64px; padding:0 24px; display:flex; align-items:center; gap:14px; }
.lq-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-.02em; }
.lq-brand__mark { width:34px; height:34px; border-radius:9px; background:var(--lqaccent); display:flex; align-items:center; justify-content:center; color:#fff; }
.lq-tag { display:inline-flex; align-items:center; gap:5px; background:var(--lqindigobg); color:var(--lqaccent); font-weight:600; font-size:12px; padding:5px 11px; border-radius:999px; }
/* Verbos no topo como SELETORES — cada verbo abre um dropdown com suas estações (mesma projeção
   NavManifest/NavPolicy do rail e da bottom-bar). Desde 2026-09-15 eles só aparecem com o rail recolhido e quando
   cabem (a regra do topo e do trilho, logo abaixo): é com o rail recolhido que o menu completo precisa deles.
   Escondidos no mobile (media query 880px abaixo): lá o drawer + a bottom-bar já cobrem a navegação e o topo
   não tem largura para os verbos (cinco, ou seis na fase de renda). */
.lq-topnav { display:flex; align-items:center; gap:2px; margin-left:10px; min-width:0; }
.lq-topnav__item { position:relative; z-index:2; }
.lq-topnav__verb { display:inline-flex; align-items:center; gap:3px; padding:8px 8px 8px 12px; border:0; border-radius:10px; background:none; cursor:pointer; font-family:inherit; color:var(--lqmuted2); font-weight:600; font-size:14px; white-space:nowrap; transition:background .12s, color .12s; }
.lq-topnav__verb:hover, .lq-topnav__verb.open { background:var(--lqbg); color:var(--lqink); }
.lq-topnav__verb.active { background:var(--lqindigobg); color:var(--lqaccent); }
.lq-topnav__chev { font-size:18px; color:var(--lqfaint); }
.lq-topnav__verb.active .lq-topnav__chev { color:var(--lqaccent); }
.lq-topnav__menu { position:absolute; top:calc(100% + 8px); left:0; min-width:232px; background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:14px; box-shadow:0 18px 48px rgba(15,23,42,.16); padding:8px; display:flex; flex-direction:column; gap:2px; animation:lq-fade .14s ease; }
.lq-topnav__menu a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:var(--lqmuted2); font-weight:500; font-size:14px; white-space:nowrap; }
.lq-topnav__menu a .lqmi { flex:none; width:22px; overflow:hidden; }
.lq-topnav__menu a:hover { background:var(--lqbg); color:var(--lqink); }
.lq-topnav__menu a.active { background:var(--lqindigobg); color:var(--lqaccent); font-weight:600; }
/* Clique-fora fecha: backdrop transparente abaixo do item aberto (ambos no stacking do topbar, z40). */
.lq-topnav__backdrop { position:fixed; inset:0; z-index:1; background:transparent; }
/* O TOPO E O TRILHO NÃO SE REPETEM (2026-09-15, pedido do Leo): com o trilho aberto (lq-topbar--com-trilho, posta pelo
   MainLayout) os verbos do topo fecham, e com ele recolhido voltam. Sem espaço para eles (html.lq-topo-cheio, decidido
   pelo ctTopoCheio do ct-ui.js pelo conteúdo, não pela janela) também fecham, e com o trilho recolhido a barra de baixo
   toma o lugar deles. Fechar é sair do fluxo invisível, e não display:none, para o ctTopoCheio continuar medindo. */
.lq-topbar--com-trilho .lq-topnav, html.lq-topo-cheio .lq-topnav { position:absolute; visibility:hidden; pointer-events:none; }
/* O menu da CONTA no topo (2026-09-15): o nome de quem entrou abre um menu com o tema e o Sair, e o avatar saiu. O cartão
   é o .lq-topnav__menu alinhado pela direita; os itens são botões com a aparência dos links do menu dos verbos, e o
   z-index põe o menu aberto acima do backdrop, como o item do verbo. */
.lq-conta { position:relative; z-index:2; }
.lq-conta__btn { display:inline-flex; align-items:center; gap:4px; padding:4px 6px 4px 10px; border:0; border-radius:10px; background:none; cursor:pointer; font-family:inherit; color:var(--lqink); transition:background .12s; }
.lq-conta__btn:hover, .lq-conta__btn.open { background:var(--lqbg); }
.lq-conta__quem { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.lq-conta__nome { font-weight:600; font-size:var(--lq-fs-body); white-space:nowrap; }
.lq-conta__papel { font-weight:500; font-size:var(--lq-fs-caption); color:var(--lqmuted); }
.lq-conta__menu { left:auto; right:0; min-width:200px; }
.lq-conta__menu button { display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px; border:0; border-radius:10px; background:none; cursor:pointer; font-family:inherit; text-align:left; color:var(--lqmuted2); font-weight:500; font-size:var(--lq-fs-body); white-space:nowrap; }
.lq-conta__menu button:hover { background:var(--lqbg); color:var(--lqink); }
.lq-conta__menu button .lqmi { font-size:18px; color:var(--lqsky); }

/* ── Tour spotlight (motor de tour) ─────────────────────────────────────────────────────────────────
   Quatro sombras recortam um BURACO sobre o alvo — nada cobre o elemento (100% interativo) e as sombras
   são pointer-events:none (o app continua funcional por baixo; §5). Balão adjacente; contorno secundário
   = a prova na própria tela. z acima do topbar (40) e do drawer (46). Geometria vem do JS (ctTourPlace). */
.ct-tour__shade { position:fixed; z-index:60; background:rgba(15,23,42,.52); pointer-events:none; transition:all .18s ease; }
.ct-tour__secondary { position:fixed; z-index:60; border:2px solid var(--lqamber); border-radius:12px; pointer-events:none; box-shadow:0 0 0 4px rgba(245,158,11,.18); }
.ct-tour__balloon { position:fixed; z-index:61; background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; box-shadow:0 24px 64px rgba(15,23,42,.28); padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.ct-tour__head { display:flex; align-items:center; justify-content:space-between; }
.ct-tour__progress { font-size:11px; font-weight:700; color:var(--lqmuted); text-transform:uppercase; letter-spacing:.06em; }
.ct-tour__x { border:0; background:none; cursor:pointer; color:var(--lqmuted); padding:2px; border-radius:8px; display:flex; }
.ct-tour__x:hover { color:var(--lqink); background:var(--lqbg); }
.ct-tour__title { font-weight:700; font-size:15.5px; letter-spacing:-.01em; color:var(--lqink); }
.ct-tour__body { font-size:13.5px; line-height:1.55; color:var(--lqmuted2); }
.ct-tour__actions { display:flex; align-items:center; gap:10px; margin-top:6px; }
.ct-tour__nav { border:0; background:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--lqmuted); padding:6px 4px; }
.ct-tour__nav:hover { color:var(--lqink); }
.ct-tour__main { margin-left:auto; font-size:13px; padding:8px 18px; background:var(--lqbtn); color:var(--lqbtnink); }
/* Affordance discreta nas páginas ("Me mostre como ✨") — sem nag, sempre disponível. */
.ct-tour-hint { border:0; background:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--lqaccent); padding:6px 8px; border-radius:8px; white-space:nowrap; }
.ct-tour-hint:hover { background:var(--lqindigobg); }
.lq-iconbtn { width:38px; height:38px; border-radius:10px; border:1px solid var(--lqborder); background:var(--lqsurface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--lqmuted); transition:border-color .12s, box-shadow .12s; }
.lq-iconbtn:hover { border-color:var(--lqaccent); box-shadow:0 3px 8px rgba(15,23,42,.10); }

.lq-body { max-width:1240px; margin:0 auto; padding:26px 24px 72px; display:grid; grid-template-columns:228px minmax(0,1fr); gap:26px; align-items:start; }
.lq-body--wide { max-width:1600px; }
/* O trilho do desktop rola sozinho (2026-09-15): com ele aberto os verbos do topo fecham, e numa janela baixa os grupos de
   baixo (Entender, Risco) ficavam abaixo da dobra, presos pelo sticky até o fim da página. */
.lq-rail { position:sticky; top:88px; max-height:calc(100vh - 104px); overflow-y:auto; background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; padding:12px; }
.lq-rail__head { padding:14px 12px 6px; font-weight:700; font-size:11px; color:var(--lqmuted); text-transform:uppercase; letter-spacing:.07em; }
.lq-rail a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--lqmuted2); font-weight:500; font-size:14px; transition:background .12s; }
/* Fixed icon slot so a missing/wide glyph can never shove the label (keeps every item left-aligned). */
.lq-rail a .lqmi { flex:none; width:22px; overflow:hidden; }
.lq-rail a:hover { background:var(--lqbg); }
.lq-rail a.active { background:var(--lqindigobg); color:var(--lqaccent); font-weight:600; }
/* ── Navegação por verbos: verbo = porta (link forte que abre a capa), estação = link recuado. ── */
.lq-rail a.lq-rail__verb { font-weight:700; color:var(--lqink); margin-top:6px; }
.lq-rail a.lq-rail__verb.active { color:var(--lqaccent); }
.lq-rail a.lq-rail__station { padding-left:34px; font-size:13.5px; }
/* A conta na gaveta do celular (2026-09-15): o nome, o tema e o Sair, escondidos no desktop, onde o menu da conta do topo os
   tem; a media query de 880px os mostra. */
.lq-rail__conta { display:none; margin-top:10px; padding-top:6px; border-top:1px solid var(--lqborder); }
.lq-rail__acao { display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; cursor:pointer; font-family:inherit; text-align:left; color:var(--lqmuted2); font-weight:500; font-size:14px; }
.lq-rail__acao:hover { background:var(--lqbg); }

/* Barra de baixo (§5): os verbos como 5–6 ícones fixos. Aparece no celular (a media query de 880px) e, no desktop com o
   trilho recolhido, quando os verbos do topo não cabem (html.lq-topo-cheio); a aparência é a mesma nos dois casos, e só
   o display e o respiro do conteúdo mudam. */
.lq-bottombar {
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:44;
    background:var(--lqsurface); border-top:1px solid var(--lqborder);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(15,23,42,.10);
}
.lq-bottombar a {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:4px 2px; border-radius:10px; color:var(--lqmuted2); font-weight:600; font-size:10.5px;
    text-decoration:none;
}
.lq-bottombar a .lqmi { font-size:22px; }
.lq-bottombar a.active { color:var(--lqaccent); }
.lq-bottombar__label { line-height:1; }
html.lq-topo-cheio .lq-body.lq-rail-collapsed .lq-bottombar { display:flex; }
html.lq-topo-cheio .lq-body.lq-rail-collapsed .lq-main { padding-bottom:72px; }
/* Na impressão a barra de baixo não sai no papel: ela é navegação, e a classe do topo cheio vem da tela. */
@media print { .lq-bottombar { display:none !important; } }

/* Collapsible section header (e.g. Admin): a clickable lq-rail__head with a chevron. */
.lq-rail__group { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; padding:14px 12px 6px; font-weight:700; font-size:11px; color:var(--lqmuted); text-transform:uppercase; letter-spacing:.07em; }
.lq-rail__group:hover { color:var(--lqmuted2); }
.lq-rail__chev { color:var(--lqfaint); text-transform:none; letter-spacing:normal; }
.lq-main { display:flex; flex-direction:column; gap:24px; min-width:0; }

/* Collapsed rail (hamburger toggle): hide the rail, let content span full width. */
.lq-body.lq-rail-collapsed { grid-template-columns:minmax(0,1fr); }
.lq-body.lq-rail-collapsed .lq-rail { display:none; }
.lq-hamburger { flex:none; }
/* Mobile drawer scrim — inert on desktop; the mobile media query turns it on when the drawer is open. */
.lq-rail-backdrop { display:none; }

/* ── Surfaces ── */
.lq-card { background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
/* .lq-stat / .lq-stat__label / .lq-stat__value: since 2026-09-12 they are ALIASES of .lq-kpi / .lq-label /
   .lq-kpi__v, declared in the ESCALA ÚNICA block at the end of this file — one KPI anatomy for every page. */
.lq-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* .lq-eyebrow / .lq-h1 / .lq-h2 / .lq-sub: defined ONCE, in the ESCALA ÚNICA block at the end of this file. */

/* ── Chips / pills / buttons ── */
.lq-chip { padding:8px 15px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; border:1px solid var(--lqborder); background:var(--lqsurface); color:var(--lqmuted2); transition:border-color .12s, background .12s; }
.lq-chip.active { background:var(--lqbtn); color:var(--lqbtnink); border-color:var(--lqbtn); }
.lq-pill { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--lqmuted); background:var(--lqsoft2); padding:4px 10px; border-radius:999px; }
.lq-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 18px; border-radius:11px; font-weight:600; font-size:var(--lq-fs-body); cursor:pointer; border:1px solid var(--lqborder); background:var(--lqsurface); color:var(--lqink); transition:background .12s, border-color .12s, box-shadow .12s; }
.lq-btn:hover { border-color:var(--lqline2); }
.lq-btn:disabled { opacity:.55; cursor:default; }
.lq-btn--primary { background:var(--lqbtn); border-color:var(--lqbtn); color:var(--lqbtnink); }
.lq-btn--primary:hover { box-shadow:0 6px 16px rgba(79,70,229,.30); }
.lq-link { display:inline-flex; align-items:center; gap:4px; color:var(--lqaccent); font-weight:600; }

/* ── Title/offer cards ── */
.lq-titlecard { background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:11px; transition:transform .15s, box-shadow .15s, border-color .15s; }
.lq-titlecard:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,.08); border-color:var(--lqline2); }
.lq-cardgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

/* ── Data tables ── */
/* .lq-table and its th/td: defined ONCE, in the ESCALA ÚNICA block at the end of this file (cell 13, th = rótulo). */
.lq-num { font-variant-numeric:tabular-nums; }
.lq-pos { color:var(--lqsuccess); } .lq-neg { color:var(--lqdanger); }

/* ── Native form controls in lq style (used for aporte/indexador/prazo) ── */
.lq-field { width:100%; }
.lq-field > label { display:block; font-weight:500; font-size:12.5px; color:var(--lqmuted); margin-bottom:6px; }
.lq-input, .lq-select { width:100%; font-family:inherit; font-size:14px; color:var(--lqink); background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:11px; padding:11px 13px; outline:none; transition:border-color .12s, box-shadow .12s; }
.lq-input:focus, .lq-select:focus { border-color:var(--lqaccent); box-shadow:0 0 0 3px rgba(79,70,229,.15); }

/* Range sliders (Simulação controls) */
.lq-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:var(--lqsoft); outline:none; cursor:pointer; }
.lq-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--lqaccent); border:2px solid var(--lqsurface); box-shadow:0 1px 3px rgba(15,23,42,.25); cursor:pointer; }
.lq-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--lqaccent); border:2px solid var(--lqsurface); box-shadow:0 1px 3px rgba(15,23,42,.25); cursor:pointer; }
.lq-range::-moz-range-track { height:6px; border-radius:999px; background:var(--lqsoft); }

/* Segmented chip toggle (Simulação Indexador) */
.lq-seg { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.lq-seg__chip { text-align:center; padding:9px 6px; border-radius:10px; font-weight:600; font-size:12px; cursor:pointer; border:1px solid var(--lqborder); background:var(--lqsurface); color:var(--lqmuted2); transition:.12s; user-select:none; }
.lq-seg__chip:hover { border-color:var(--lqline2); }
.lq-seg__chip.is-active { border-color:var(--lqaccent); background:var(--lqindigobg); color:var(--lqaccent); }

/* Simulação: a grade de duas colunas (340px de entradas + resultados). Mora aqui e não inline na página: o inline
   vencia a folha e deixava morta a regra de 880px, abaixo, que a empilha no celular. */
.sim-cols { display:grid; grid-template-columns:340px minmax(0,1fr); gap:16px; align-items:start; }

/* Spinner (top-bar refresh) */
@keyframes lq-spin { to { transform: rotate(360deg); } }
.lq-spin { display:inline-block; animation: lq-spin .9s linear infinite; }

/* Compact data grid (ASEL007 consult — many narrow columns) */
.lq-asel-grid .mud-table-cell { padding:3px 8px !important; font-size:12px !important; white-space:nowrap; }
.lq-asel-grid .mud-table-cell .mud-typography { font-size:12px !important; }
.lq-asel-grid .mud-table-head .mud-table-cell { font-size:11.5px !important; font-weight:600; }
.lq-asel-grid .mud-table-head .mud-table-cell .mud-typography { font-size:11.5px !important; }

/* ── Toast (order feedback) ── */
.lq-toast-wrap { position:fixed; bottom:22px; right:22px; z-index:60; display:flex; flex-direction:column; gap:10px; }
.lq-toast { background:var(--lqsurface); border:1px solid var(--lqborder); border-left:4px solid var(--lqaccent); border-radius:12px; padding:13px 16px; box-shadow:0 10px 30px rgba(15,23,42,.18); font-size:13.5px; max-width:360px; }
.lq-toast--ok { border-left-color:var(--lqsuccess); }
.lq-toast--err { border-left-color:var(--lqdanger); }

@keyframes lq-fade { from { opacity:0; } to { opacity:1; } }

@media (max-width: 880px) {
    .lq-body { grid-template-columns:1fr; }
    /* Verbos do topo saem no mobile — o drawer + a bottom-bar cobrem a navegação. */
    .lq-topnav { display:none; }
    .lq-grid4 { grid-template-columns:repeat(2,1fr); }
    /* Simulação: the 340px-inputs + results two-column grid stacks on phones. */
    .sim-cols { grid-template-columns:1fr; }

    /* Left rail → off-canvas drawer: fixed, off-screen by default, slides in when .lq-rail-open. */
    .lq-rail {
        position:fixed; top:64px; left:0; bottom:0; z-index:46;
        width:264px; max-width:82vw; max-height:none; margin:0;
        border:0; border-right:1px solid var(--lqborder); border-radius:0;
        overflow-y:auto; -webkit-overflow-scrolling:touch;
        transform:translateX(-100%);
        transition:transform .26s cubic-bezier(.4,0,.2,1);
        box-shadow:0 18px 48px rgba(15,23,42,.24);
        display:block;   /* a desktop-collapsed rail is display:none — force it back so the drawer can show */
    }
    .lq-body.lq-rail-collapsed .lq-rail { display:block; }
    .lq-body.lq-rail-open .lq-rail { transform:translateX(0); }

    /* Scrim behind the open drawer; tap to close. */
    .lq-body.lq-rail-open .lq-rail-backdrop {
        display:block; position:fixed; inset:64px 0 0 0; z-index:45;
        background:rgba(15,23,42,.44); animation:lq-fade .2s ease;
    }

    /* Barra de baixo de verbos (§5): no celular sempre; o conteúdo ganha respiro para não ficar por baixo. */
    .lq-bottombar { display:flex; }
    .lq-main { padding-bottom:72px; }   /* clearance for the fixed bar */

    /* O grupo da direita não cabe num telefone e a caixa da conta fica fora da tela: o tema e o Sair aparecem também na
       gaveta. Pôr a caixa primeiro no grupo (a primeira versão, de 2026-09-15) empurrava a data do sistema para fora. */
    .lq-rail__conta { display:block; }
}

/* ── Responsive data tables → stacked label:value cards on phones (opt in: class="lq-cardtable") ──
   For read-only data tables (Risco/Fluxos/Carry). Every rule is inside the 720px query, so wider
   viewports stay the exact table. The first column becomes the card header; other cells surface their
   data-label; empty cells collapse; a label-less non-first cell (e.g. a colspan footer total) shows as
   a bold value under its header. Portfolio's holdings table keeps its own .pf-postbl (buttons + edge card). */
@media (max-width: 720px) {
    .lq-cardtable { min-width:0 !important; display:block; }
    .lq-cardtable thead { display:none; }
    .lq-cardtable tbody, .lq-cardtable tfoot { display:block; }
    .lq-cardtable tr { display:block; position:relative; margin:0 0 10px; padding:4px 0 6px; border:1px solid var(--lqborder) !important; border-radius:12px; background:var(--lqsurface); }
    .lq-cardtable tfoot tr { background:var(--lqsoft2); }
    .lq-cardtable td:empty { display:none !important; }
    .lq-cardtable td { display:block; position:relative; padding:7px 14px 7px 45% !important; text-align:right !important; border:0 !important; min-height:18px; white-space:normal !important; max-width:none !important; }
    .lq-cardtable td::before { content:attr(data-label); position:absolute; left:14px; top:7px; width:41%; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:600; color:var(--lqmuted); text-transform:uppercase; letter-spacing:.04em; }
    .lq-cardtable td:first-child { padding:10px 14px 8px !important; text-align:left !important; font-weight:600; border-bottom:1px solid var(--lqsoft2) !important; margin-bottom:4px; }
    .lq-cardtable td:first-child::before { display:none; }
    /* label-less non-first cell (colspan footer total) → bold value under the header, full width */
    .lq-cardtable td:not([data-label]):not(:first-child) { padding:2px 14px 8px !important; text-align:left !important; font-weight:700; }
    .lq-cardtable td:not([data-label]):not(:first-child)::before { display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   ESCALA ÚNICA — tipografia, rótulos, espaçamento e largura de conteúdo (uma folha, todas as páginas).
   Fonte: docs/design/Tipografia Unificada.dc.html, opção 1a, e o patch lq-page.css que a acompanha
   (2026-09-12). Substitui os <style> por página em Home / Dashboard / Extrato / Precificador para tudo
   que é tamanho de texto, margem de cabeçalho, padding de card e largura.

   Desvios do patch como entregue, documentados aqui (revisão de 2026-09-12):
   · `.lq-body` do patch virou `.lq-text` — `.lq-body` JÁ É a grade do shell (acima), e a regra do patch
     (color:--lqmuted2, 14px) teria recolorido o app inteiro; `.lq-prose` também não serviu, porque o
     ReadingPage.razor já define um `.lq-prose` próprio para o texto de leitura.
   · `.lq-stat*` das outras páginas são ALIASES das classes novas, em vez de uma segunda definição.
   · `.lq-fieldlbl .aux` é --lqmuted/400 e não --lqfaint: a 11px, --lqfaint fica em ~3,5:1 (abaixo do AA),
     e a nota do :root já manda texto abaixo de 12px usar --lqmuted.
   · `.lq-btn` passa de .9rem para --lq-fs-body: era o último rem fracionário a alcançar as páginas unificadas.
   · o `p + p` de 12 vale dentro de `.lq-text`, e não em todo `.lq-card`: num card flex com gap 12 ele dobrava
     o ritmo.
   · `.lq-dp` (a moldura do LqDatePicker) recebe o anel de foco em :focus-within; o <input> interno dele tem
     borda 0 inline, e o anel da regra genérica saía dentro da moldura, torto.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* type — Inter, base 16px, 9 degraus; nada abaixo de 12px, tabelas nunca abaixo de 13px */
    --lq-fs-display:40px; --lq-lh-display:1.05; --lq-fw-display:800; --lq-ls-display:-.03em;
    --lq-fs-h1:32px;      --lq-lh-h1:1.15;      --lq-fw-h1:700;      --lq-ls-h1:-.02em;
    --lq-fs-h2:20px;      --lq-lh-h2:1.3;       --lq-fw-h2:700;      --lq-ls-h2:-.01em;
    --lq-fs-h3:16px;      --lq-lh-h3:1.4;       --lq-fw-h3:600;
    --lq-fs-kpi:24px;     --lq-lh-kpi:1.2;      --lq-fw-kpi:700;     --lq-ls-kpi:-.02em;
    --lq-fs-body:14px;    --lq-lh-body:1.5;
    --lq-fs-small:13px;   --lq-lh-small:1.5;
    --lq-fs-caption:12px; --lq-lh-caption:1.4;  --lq-fw-caption:500;
    --lq-fs-label:11px;   --lq-lh-label:1.2;    --lq-fw-label:600;   --lq-ls-label:.05em;
    /* space — múltiplos de 4 */
    --lq-s1:4px; --lq-s2:8px; --lq-s3:12px; --lq-s4:16px; --lq-s6:24px; --lq-s8:32px; --lq-s12:48px;
    /* layout */
    --lq-page-max:1160px;
    --lq-card-pad:20px; --lq-kpi-pad:16px;
    --lq-r-card:16px; --lq-r-inner:12px; --lq-r-input:8px;
}

/* ── Página: uma largura, um gap ─────────────────────────────────────────────────────────────── */
.lq-page { display:flex; flex-direction:column; gap:var(--lq-s6); max-width:var(--lq-page-max); min-width:0; }
.lq-page > * { margin:0; }

/* ── Cabeçalho de página: eyebrow → h1 12 · h1 → lead 8 · lead → conteúdo 24 (gap do .lq-page) ── */
.lq-pagehd { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--lq-s4); flex-wrap:wrap; }
.lq-pagehd > div { min-width:0; }
.lq-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:var(--lq-fs-caption); line-height:var(--lq-lh-label); font-weight:600; color:var(--lqaccent); background:var(--lqindigobg); padding:6px 12px; border-radius:999px; }
.lq-h1 { font-size:var(--lq-fs-h1); line-height:var(--lq-lh-h1); letter-spacing:var(--lq-ls-h1); font-weight:var(--lq-fw-h1); color:var(--lqink); margin:var(--lq-s3) 0 0; text-wrap:balance; }
.lq-h1 .lq-h1__aux { font-weight:600; font-size:var(--lq-fs-h2); color:var(--lqaccent); }
.lq-h2 { font-size:var(--lq-fs-h2); line-height:var(--lq-lh-h2); letter-spacing:var(--lq-ls-h2); font-weight:var(--lq-fw-h2); color:var(--lqink); margin:0; }
.lq-sub { font-size:var(--lq-fs-body); line-height:var(--lq-lh-body); color:var(--lqmuted); margin:var(--lq-s2) 0 0; max-width:60ch; }
.lq-sub b { color:var(--lqink); font-weight:600; }

/* ── Card: padding 20, h3 → corpo 16 (define o .lq-cardhd que até aqui não existia) ─────────── */
.lq-card { border-radius:var(--lq-r-card); }
.lq-card--pad { padding:var(--lq-card-pad); }
.lq-cardhd { font-size:var(--lq-fs-h3); line-height:var(--lq-lh-h3); font-weight:var(--lq-fw-h3); color:var(--lqink); margin:0 0 var(--lq-s4); }
.lq-cardhd .lq-cardhd__aux { font-weight:400; font-size:var(--lq-fs-small); color:var(--lqmuted); }

/* ── Rótulo: 11 / 600 / caixa alta / --lqmuted — o ÚNICO rótulo (KPI, th, overline) ─────────── */
.lq-label, .lq-stat__label { font-size:var(--lq-fs-label); line-height:var(--lq-lh-label); font-weight:var(--lq-fw-label); letter-spacing:var(--lq-ls-label); text-transform:uppercase; color:var(--lqmuted); display:flex; align-items:center; gap:6px; }
.lq-label .lqmi { font-size:14px; color:var(--lqfaint); flex:none; width:15px; overflow:hidden; }
/* rótulo de campo: mesmos 11px, sem caixa alta, peso 500 */
.lq-fieldlbl { display:block; font-size:var(--lq-fs-label); line-height:var(--lq-lh-label); font-weight:500; color:var(--lqmuted); margin-bottom:var(--lq-s1); }
.lq-fieldlbl .aux { color:var(--lqmuted); font-weight:400; }

/* ── KPI: label 11 → valor 24 (1 : 2,2) → legenda 12; padding 16; raio 12 ─────────────────── */
.lq-kpi, .lq-stat { background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:var(--lq-r-inner); padding:var(--lq-kpi-pad); }
.lq-kpi__v, .lq-stat__value { font-size:var(--lq-fs-kpi); line-height:var(--lq-lh-kpi); font-weight:var(--lq-fw-kpi); letter-spacing:var(--lq-ls-kpi); color:var(--lqink); margin-top:var(--lq-s1); font-variant-numeric:tabular-nums; }
.lq-kpi__s { font-size:var(--lq-fs-caption); line-height:var(--lq-lh-caption); font-weight:var(--lq-fw-caption); color:var(--lqmuted); margin-top:var(--lq-s1); font-variant-numeric:tabular-nums; }
.lq-kpigrid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--lq-s4); }
@media (max-width:980px){ .lq-kpigrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .lq-kpigrid{ grid-template-columns:1fr; } }

/* display (o PL do Dashboard e os dois valores do herói do Futuro Programado) */
.lq-display { font-size:var(--lq-fs-display); line-height:var(--lq-lh-display); font-weight:var(--lq-fw-display); letter-spacing:var(--lq-ls-display); color:var(--lqink); margin-top:var(--lq-s1); font-variant-numeric:tabular-nums; }

/* ── Tabela: célula 13, th = rótulo, padding 12 / 8 ────────────────────────────────────────── */
.lq-table { width:100%; border-collapse:collapse; font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); font-variant-numeric:tabular-nums; }
.lq-table th { text-align:left; font-size:var(--lq-fs-label); line-height:var(--lq-lh-label); font-weight:var(--lq-fw-label); letter-spacing:var(--lq-ls-label); text-transform:uppercase; color:var(--lqmuted); padding:var(--lq-s2) var(--lq-s3); border-bottom:1px solid var(--lqborder); white-space:nowrap; }
.lq-table td { padding:var(--lq-s3); border-bottom:1px solid var(--lqsoft); }
.lq-table tbody tr:last-child td { border-bottom:0; }
.lq-table tbody tr:hover { background:var(--lqsoft2); }
.lq-table--num th:not(:first-child), .lq-table--num td:not(:first-child) { text-align:right; }

/* ── Texto corrido: text 14 / small 13 / caption 12; parágrafos 12 entre si ────────────────── */
.lq-text { font-size:var(--lq-fs-body); line-height:var(--lq-lh-body); color:var(--lqmuted2); }
.lq-small { font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); color:var(--lqmuted2); }
.lq-note { font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); color:var(--lqmuted); margin:var(--lq-s4) 0 0; }
.lq-caption { font-size:var(--lq-fs-caption); line-height:var(--lq-lh-caption); font-weight:var(--lq-fw-caption); color:var(--lqmuted); }
.lq-text p + p { margin-top:var(--lq-s3); }

/* ── Inputs nativos: label 11 / campo 13 / raio 8 / padding 8×10; grupos de campo com gap 12 ── */
.lq-fields { display:flex; flex-direction:column; gap:var(--lq-s3); }
.lq-fields .lq-input, .lq-fields .lq-select, .lq-fields input, .lq-fields select { width:100%; font-family:inherit; font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); color:var(--lqink); background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:var(--lq-r-input); padding:var(--lq-s2) 10px; outline:none; font-variant-numeric:tabular-nums; }
.lq-fields input:focus, .lq-fields select:focus { border-color:var(--lqaccent); box-shadow:0 0 0 3px color-mix(in srgb,var(--lqaccent) 15%,transparent); }
/* O LqDatePicker tem moldura própria (`.lq-dp`, borda inline) e um <input> interno sem borda: o anel vai na moldura. */
.lq-fields .lq-dp:focus-within { border-color:var(--lqaccent) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--lqaccent) 15%,transparent); }
.lq-fields .lq-dp input:focus { box-shadow:none; }
.lq-row2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--lq-s2); }
.lq-seg2 { display:flex; border:1px solid var(--lqborder); border-radius:var(--lq-r-input); overflow:hidden; }
.lq-seg2 button { flex:1; border:0; background:var(--lqsurface); padding:var(--lq-s2) var(--lq-s1); font-family:inherit; font-size:var(--lq-fs-caption); font-weight:600; color:var(--lqmuted2); cursor:pointer; }
.lq-seg2 button.on { background:var(--lqbtn); color:var(--lqbtnink); }

/* ── Linha chave/valor (Precificador · Resultado) ───────────────────────────────────────────── */
.lq-kv { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:var(--lq-s2) 0; font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); border-top:1px solid var(--lqsoft); }
.lq-kv span { color:var(--lqmuted); }
.lq-kv b { font-variant-numeric:tabular-nums; font-weight:700; color:var(--lqink); }

/* ── <details> das explicações fechadas (Futuro Programado): sem marcador nativo; o chevron expand_more gira ── */
.lq-details summary { display:flex; align-items:center; gap:var(--lq-s1); list-style:none; cursor:pointer; font-size:var(--lq-fs-caption); line-height:var(--lq-lh-caption); font-weight:var(--lq-fw-caption); color:var(--lqmuted); }
.lq-details summary::-webkit-details-marker { display:none; }
.lq-details summary .lqmi { font-size:16px; transition:transform .15s; }
.lq-details[open] summary .lqmi { transform:rotate(180deg); }
.lq-details summary:focus-visible { outline:2px solid var(--lqaccent); outline-offset:2px; border-radius:var(--lq-r-input); }
.lq-details p { margin:var(--lq-s2) 0 0; font-size:var(--lq-fs-caption); line-height:var(--lq-lh-caption); color:var(--lqmuted); }
@media (prefers-reduced-motion:reduce){ .lq-details summary .lqmi { transition:none; } }

/* ── Herói do Futuro Programado: os dois valores de 40px lado a lado (1fr auto 1fr, README Screen A). O herói é um
   contêiner de consulta: quando a coluna estreita (trilho aberto numa janela média, ou o celular), os valores empilham,
   em vez de o "R$" e o número caírem em linhas diferentes. Medido em :5169 a 1196px com o trilho aberto: 479px de
   conteúdo, colunas de 208px, e "R$ 503.239" quebrava em duas linhas. ── */
.fp-hero { container-type:inline-size; }
.fp-hero__vals { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--lq-s6); align-items:center; margin-top:var(--lq-s4); }
.fp-hero__vals .lq-display { white-space:nowrap; }
@container (max-width:680px){ .fp-hero__vals { grid-template-columns:1fr; gap:var(--lq-s2); } }
/* O ícone da linha do efeito: --lqteal no tema claro, como no README. No escuro o --lqbtn clareia e o teal some nele,
   então o ícone passa a usar a tinta do herói. */
.fp-hero__efeito .lqmi { color:var(--lqteal); }
html.lqdark .fp-hero__efeito .lqmi { color:var(--lqbtnink); }

/* ── Subpágina Entenda do Futuro Programado (/planejar/simulacao/entenda): nav fixa de 220 + coluna de leitura de 680 ── */
.entenda-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:40px; align-items:start; }
/* 88px é o idioma do shell para grudar DEBAIXO da .lq-topbar sticky (65px medidos + 24 de folga): o .lq-rail usa o
   mesmo. Com 24px a nav grudava dentro da barra e os primeiros itens sumiam sob ela (medido em :5169). */
.entenda-nav { position:sticky; top:88px; display:flex; flex-direction:column; gap:2px; }
.entenda-nav .lq-label { margin-bottom:var(--lq-s2); }
.entenda-nav a { display:block; padding:6px 10px; border-radius:var(--lq-r-input); font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); color:var(--lqmuted2); }
.entenda-nav a:hover, .entenda-nav a:focus-visible { background:var(--lqindigobg); color:var(--lqaccent); }
.entenda-col { display:flex; flex-direction:column; gap:var(--lq-s8); max-width:680px; min-width:0; }
.entenda-col > section { display:flex; flex-direction:column; gap:var(--lq-s3); scroll-margin-top:88px; }
.entenda-col > section > * { margin:0; }
.entenda-passos { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--lq-s3); font-size:var(--lq-fs-body); line-height:var(--lq-lh-body); color:var(--lqmuted2); }
.entenda-passos li { display:flex; align-items:flex-start; gap:var(--lq-s3); }
.entenda-passos b { color:var(--lqink); font-weight:600; }
.entenda-badge { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--lq-r-input); background:var(--lqindigobg); color:var(--lqaccent); font-size:var(--lq-fs-caption); font-weight:700; }
.entenda-cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--lq-s4); }
.entenda-card { background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:var(--lq-r-inner); padding:var(--lq-card-pad); }
.entenda-card ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:var(--lq-s2); font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); color:var(--lqmuted2); }
.entenda-card b { color:var(--lqink); font-weight:600; }
.entenda-premissa { display:flex; flex-wrap:wrap; align-items:center; gap:var(--lq-s2) var(--lq-s3); font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); color:var(--lqmuted); }
.entenda-premissa label { font-weight:600; color:var(--lqink); }
/* O campo da premissa segue o campo nativo da escala (13px, raio 8, padding 8×10 e o anel de foco do .lq-fields); o
   .lq-input sozinho ainda é a regra antiga, de 14px e raio 11. */
.entenda-premissa__input { width:140px; font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); border-radius:var(--lq-r-input); padding:var(--lq-s2) 10px; font-variant-numeric:tabular-nums; }
.entenda-premissa__input:focus { border-color:var(--lqaccent); box-shadow:0 0 0 3px color-mix(in srgb,var(--lqaccent) 15%,transparent); }
.entenda-fontes { border-top:1px solid var(--lqborder); padding-top:var(--lq-s6); }
.entenda-fontes ol { padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:var(--lq-fs-small); line-height:var(--lq-lh-small); color:var(--lqmuted2); }
.entenda-fontes a { color:var(--lqaccent); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:880px){
    .entenda-grid { grid-template-columns:1fr; gap:var(--lq-s6); }
    .entenda-nav { position:static; }
    .entenda-cards { grid-template-columns:1fr; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:720px){
    :root { --lq-fs-display:32px; --lq-fs-h1:28px; --lq-card-pad:16px; }
    .lq-page { gap:var(--lq-s4); }
}

/* Authenticated header: keep the date and active book visible on a second row on phones. */
.lq-topbar__actions { margin-left:auto; display:flex; align-items:center; gap:14px; min-width:0; }
.lq-topbar__session { display:flex; align-items:center; gap:10px; min-width:0; }
.lq-iconbtn:focus-visible { outline:2px solid var(--lqaccent); outline-offset:3px; }
.lq-book-switcher { position:relative; min-width:0; }
.lq-book-switcher > button { max-width:100%; }
@media (max-width:600px) {
    .lq-topbar__in { height:auto; min-height:64px; flex-wrap:wrap; gap:8px; padding:10px 16px; }
    .lq-topbar__actions:has(.lq-topbar__session) { flex-basis:100%; margin-left:0; }
    .lq-topbar__session { width:100%; justify-content:space-between; }
    .lq-topbar__session .lq-conta { display:none; }
    .lq-topbar:has(.lq-topbar__session) + .lq-body .lq-rail { top:112px; }
    .lq-topbar:has(.lq-topbar__session) + .lq-body .lq-rail-backdrop { top:112px; }
    .lq-body { grid-template-columns:1fr; padding-left:16px; padding-right:16px; }
}