/* ====================================================================
   Aethereuum — folha de estilo
   Paleta sóbria e profissional, responsiva (desktop e celular).
   =========================================================================== */

/* O atributo HTML `hidden` DEVE esconder o elemento mesmo quando uma regra de
   autor define `display` (ex.: `.hub-grid{display:grid}`). Sem esta linha, a
   regra do UA `[hidden]{display:none}` é sobreposta e alternar `.hidden` no JS
   (sub-hub do Meu Negócio, complementos do PDV, etc.) não esconde nada. */
[hidden] { display: none !important; }

:root {
    --bg: #f4f6fb;
    --superficie: #ffffff;
    --borda: #e3e8f0;
    --texto: #1f2733;
    --texto-suave: #5c6672;
    --primaria: #5b4be6;
    --primaria-escura: #4436c9;
    --eter-1: #241a57;
    --eter-2: #4b3fd6;
    --eter-brilho: #8ef9ff;
    --verde: #1a9d63;
    --vermelho: #d64550;
    --amarelo: #f0ad4e;
    --sombra: 0 1px 3px rgba(20, 30, 60, .08), 0 6px 20px rgba(20, 30, 60, .05);
    --raio: 12px;
    /* Largura útil no desktop: usa a LARGURA TOTAL da janela (sem teto), para
       não sobrar espaço vazio nas laterais em monitores largos. */
    --largura-app: calc(100vw - 40px);
}

/* Tamanho da fonte (ajustável em Preferências) — escala os textos em rem. */
html { font-size: 16px; }
html[data-fonte="pequena"] { font-size: 15px; }
html[data-fonte="normal"]  { font-size: 16px; }
html[data-fonte="grande"]  { font-size: 18px; }
html[data-fonte="gigante"] { font-size: 20px; }
/* Fontes embutidas (open source): Comic Neue (OFL, ~Comic Sans) e Arimo (Apache,
   métrica idêntica à Arial). Usa a fonte LOCAL se o aparelho tiver, senão baixa
   o .woff2 embutido — assim fica igual em qualquer dispositivo. */
@font-face { font-family: "AethComic"; font-weight: 400; font-style: normal; font-display: swap;
    src: local("Comic Sans MS"), local("Comic Neue"), url(../fonts/comic-neue-400.woff2) format("woff2"); }
@font-face { font-family: "AethComic"; font-weight: 700; font-style: normal; font-display: swap;
    src: local("Comic Sans MS Bold"), local("Comic Neue Bold"), url(../fonts/comic-neue-700.woff2) format("woff2"); }
@font-face { font-family: "AethArial"; font-weight: 400; font-style: normal; font-display: swap;
    src: local("Arial"), local("Arimo"), url(../fonts/arimo-400.woff2) format("woff2"); }
@font-face { font-family: "AethArial"; font-weight: 700; font-style: normal; font-display: swap;
    src: local("Arial Bold"), local("Arimo Bold"), url(../fonts/arimo-700.woff2) format("woff2"); }
/* Inter — fonte premium padrão (latim: pt/en/es/fr/de). CJK/Devanagari caem no
   fallback do sistema. Auto-hospedada (CSP font-src 'self'); local() primeiro
   para quem já a tem. font-display: swap evita texto invisível. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
    src: local("Inter"), url(../fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap;
    src: local("Inter Medium"), url(../fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
    src: local("Inter SemiBold"), url(../fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap;
    src: local("Inter Bold"), url(../fonts/inter-700.woff2) format("woff2"); }
/* Trio tipográfico PADRÃO (auto-hospedado, CSP-safe; latim — CJK cai no
   fallback). Playfair Display = display/h1; Poppins = títulos+UI interativa;
   Manrope = corpo/leitura. */
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: normal; font-display: swap;
    src: local("Playfair Display"), url(../fonts/playfair-400.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: normal; font-display: swap;
    src: local("Playfair Display Medium"), url(../fonts/playfair-500.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; font-display: swap;
    src: local("Playfair Display Bold"), url(../fonts/playfair-700.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
    src: local("Poppins Medium"), url(../fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
    src: local("Poppins SemiBold"), url(../fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
    src: local("Poppins Bold"), url(../fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap;
    src: local("Manrope"), url(../fonts/manrope-400.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-style: normal; font-display: swap;
    src: local("Manrope Medium"), url(../fonts/manrope-500.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap;
    src: local("Manrope SemiBold"), url(../fonts/manrope-600.woff2) format("woff2"); }
/* ===== Papéis tipográficos (variáveis) =====
   O PADRÃO é o trio: Playfair (display) + Poppins (títulos/UI) + Manrope
   (corpo). Cada elemento lê a var do seu papel; trocar a família (abaixo)
   redefine as três vars de uma vez. Fallbacks seguros: serif p/ display,
   sans-serif p/ o resto. */
:root {
    /* Fontes coloridas de emoji: o navegador usa por-glifo, então emoji nos
       textos (corpo/título) renderizam em cores e nítidos em qualquer sistema. */
    --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
    --sys-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--emoji);
    --fonte-display: "Playfair Display", Georgia, "Times New Roman", serif, var(--emoji);
    --fonte-titulo:  "Poppins", var(--sys-sans);
    --fonte-corpo:   "Manrope", var(--sys-sans);
}
/* Família da fonte (opcional) — cada opção deixa o app inteiro numa fonte só;
   "padrao" mantém o trio. Inter e Sistema entram como alternativas. */
html[data-fonte-familia="sistema"] { --fonte-display: var(--sys-sans); --fonte-titulo: var(--sys-sans); --fonte-corpo: var(--sys-sans); }
html[data-fonte-familia="inter"]   { --fonte-display: "Inter", var(--sys-sans); --fonte-titulo: "Inter", var(--sys-sans); --fonte-corpo: "Inter", var(--sys-sans); }
html[data-fonte-familia="arial"]   { --fonte-display: "AethArial", Arial, Helvetica, sans-serif; --fonte-titulo: "AethArial", Arial, Helvetica, sans-serif; --fonte-corpo: "AethArial", Arial, Helvetica, sans-serif; }
html[data-fonte-familia="comic"]   { --fonte-display: "AethComic", "Comic Sans MS", cursive; --fonte-titulo: "AethComic", "Comic Sans MS", cursive; --fonte-corpo: "AethComic", "Comic Sans MS", cursive; }
html[data-fonte-familia="times"]   { --fonte-display: "Times New Roman", Times, Georgia, serif; --fonte-titulo: "Times New Roman", Times, Georgia, serif; --fonte-corpo: "Times New Roman", Times, Georgia, serif; }
html[data-fonte-familia="verdana"] { --fonte-display: Verdana, Geneva, Tahoma, sans-serif; --fonte-titulo: Verdana, Geneva, Tahoma, sans-serif; --fonte-corpo: Verdana, Geneva, Tahoma, sans-serif; }
html[data-fonte-familia="mono"]    { --fonte-display: "Courier New", Courier, ui-monospace, monospace; --fonte-titulo: "Courier New", Courier, ui-monospace, monospace; --fonte-corpo: "Courier New", Courier, ui-monospace, monospace; }
/* Botões de escolha de fonte */
.fonte-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.fonte-op { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
    border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.fonte-op.ativo { border-color: var(--primaria); color: var(--primaria); background: rgba(127,123,255,.14); }

/* ===========================================================================
   Modo escuro — ativado por html[data-tema="escuro"] (toggle 🌓 na barra ou
   Preferências). "auto" segue o sistema via JS. As páginas públicas de
   compartilhar (perfil/recibo/conquista) mantêm o visual próprio da marca.
   =========================================================================== */
html[data-tema="escuro"] {
    --bg: #0a0b14;
    --superficie: #171a27;
    --borda: #262b3b;
    --texto: #e8ebf4;
    --texto-suave: #9aa3b5;
    --primaria: #8a7dff;
    --primaria-escura: #6f60f2;
    --verde: #2fbf7f;
    --vermelho: #f06873;
    --amarelo: #f2b866;
    --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35);
}
/* ---------------------------------------------------------------------------
   Céu cósmico (padrão escuro): fundo de universo discreto — nebulosas suaves +
   estrelas cintilantes. NÃO distrai: baixa opacidade, atrás de todo o conteúdo.
   Só no tema escuro; o claro fica limpo. Envolve a tela inteira (fixed).
   --------------------------------------------------------------------------- */
html[data-tema="escuro"] body {
    background-color: #0a0b14;
    background-image:
        radial-gradient(1100px 680px at 12% -12%, rgba(75, 63, 214, .20), transparent 60%),
        radial-gradient(1000px 620px at 112% 8%, rgba(30, 150, 175, .14), transparent 55%),
        radial-gradient(1200px 900px at 50% 118%, rgba(120, 70, 230, .12), transparent 60%);
    background-attachment: fixed;
    color: var(--texto);
}
/* Camada de estrelas (duas densidades) — fixa, atrás de tudo, sem capturar clique. */
html[data-tema="escuro"] body::before,
html[data-tema="escuro"] body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
html[data-tema="escuro"] body::before {
    background-image:
        radial-gradient(1.2px 1.2px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.75), transparent),
        radial-gradient(1px 1px at 160px 60px, rgba(210,225,255,.7), transparent),
        radial-gradient(1.4px 1.4px at 60px 180px, #ffffff, transparent),
        radial-gradient(1px 1px at 200px 200px, rgba(200,215,255,.65), transparent),
        radial-gradient(1px 1px at 130px 20px, rgba(255,255,255,.6), transparent);
    background-repeat: repeat; background-size: 230px 230px;
    opacity: .45; animation: cintilar 7s ease-in-out infinite alternate;
}
html[data-tema="escuro"] body::after {
    background-image:
        radial-gradient(1.8px 1.8px at 50px 80px, rgba(255,255,255,.9), transparent),
        radial-gradient(2px 2px at 250px 150px, rgba(180,210,255,.8), transparent),
        radial-gradient(1.6px 1.6px at 350px 300px, #fff, transparent);
    background-repeat: repeat; background-size: 420px 420px;
    opacity: .5; animation: cintilar 9s ease-in-out infinite alternate-reverse;
}
@keyframes cintilar { from { opacity: .28; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
    html[data-tema="escuro"] body::before,
    html[data-tema="escuro"] body::after { animation: none; }
}
html[data-tema="claro"] body { background: var(--bg); color: var(--texto); }
html[data-tema="escuro"] .form input,
html[data-tema="escuro"] .form select,
html[data-tema="escuro"] .form textarea,
html[data-tema="escuro"] .acao-card input,
html[data-tema="escuro"] .periodo-form input { background: #141722; color: var(--texto); border-color: var(--borda); }
html[data-tema="escuro"] .dica { background: #2a2410; border-color: #4a3f1c; color: #e8d9a8; }
html[data-tema="escuro"] .alerta-sucesso { background: #10301f; color: #a9e8c7; border-color: #1d5638; }
html[data-tema="escuro"] .alerta-erro { background: #3a1519; color: #f3b3ba; border-color: #6b2730; }
html[data-tema="escuro"] .alerta-int { background: #191c28; border-color: var(--borda); }
html[data-tema="escuro"] .alerta-int.alerta-bom { background: #11291d; border-color: #1d5638; }
html[data-tema="escuro"] .alerta-int.alerta-atencao { background: #2c2110; border-color: #55401d; }
html[data-tema="escuro"] .agenda-item,
html[data-tema="escuro"] .incentivo-chip,
html[data-tema="escuro"] .treino-item { background: var(--superficie); border-color: var(--borda); }
html[data-tema="escuro"] .amigos-item.eu { background: #1e2438; }
/* No escuro, chips de status ganham fundo translúcido escuro (em vez de
   permanecerem pastéis claros sobre a superfície escura). */
html[data-tema="escuro"] .tag-verde    { background: rgba(46, 160, 103, .18); }
html[data-tema="escuro"] .tag-vermelho { background: rgba(214, 69, 84, .18); }
html[data-tema="escuro"] .tag-azul     { background: rgba(96, 130, 240, .18); }
html[data-tema="escuro"] .ex-card.ex-evitar { background: #2a181b; border-color: #5b2a31; }
html[data-tema="escuro"] .ex-dica { background: #2a2410; color: #e8d9a8; }
html[data-tema="escuro"] .humor-op input:checked + span { background: #3a3110; border-color: #b98f18; }
html[data-tema="escuro"] .obj-card, html[data-tema="escuro"] .hub-card,
html[data-tema="escuro"] .hub-clientes { background: var(--superficie); }
html[data-tema="escuro"] .caderno-pagina { background: #232637; color: var(--texto); }
html[data-tema="escuro"] .streak-banner { background: #2c2110; border-color: #55401d; color: #e8d9a8; }

.tema-btn { background: none; border: 1px solid var(--borda); border-radius: 8px;
    cursor: pointer; font-size: 1rem; line-height: 1; padding: 5px 8px; }
.tema-btn:hover { background: var(--bg); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--fonte-corpo);   /* Manrope — corpo/leitura/UI */
    background: var(--bg);
    color: var(--texto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* ===== Aplicação dos papéis tipográficos =====
   h1 = Playfair (display/impacto). h2–h6 + elementos interativos (botões,
   navegação, badges, labels, cabeçalhos de tabela, títulos de card) = Poppins.
   Corpo, inputs, dados e microcópia herdam Manrope do body. */
h1 { font-family: var(--fonte-display); font-weight: 700; letter-spacing: -0.01em; }
h2, h3, h4, h5, h6 { font-family: var(--fonte-titulo); }
button, .btn, .ds-btn, .ds-chip, .rail-link, .menu a, .nav-inf-rotulo,
.ds-badge, .badge, .tag, .idioma-atual,
label, .form label, .ds-rotulo,
.tabela th, .card-rotulo, .ds-stat-rotulo { font-family: var(--fonte-titulo); }
/* Campos de formulário usam o corpo (Manrope) — não herdam por padrão. */
input, textarea, select, .ds-campo { font-family: var(--fonte-corpo); }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 0; }

/* ----- Topo / navegação --------------------------------------------------- */
.topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 10;
}
.topo-inner {
    max-width: var(--largura-app); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 24px; height: 60px;
}
.marca {
    font-weight: 700; font-size: 1.15rem; color: var(--texto);
    display: flex; align-items: center; gap: 8px;
}
.marca:hover { text-decoration: none; }
.marca-icone {
    display: inline-block;
    width: 30px; height: 30px; border-radius: 9px;
    box-shadow: 0 2px 10px rgba(75, 63, 214, .35);
}
/* Menu do módulo: UMA linha; o que não couber é recolhido em "Mais ▾" (JS).
   flex 0 1 auto = não cresce, mas encolhe e recorta o excesso (o JS então move
   os itens escondidos para o dropdown irmão). */
.menu { display: flex; flex-wrap: nowrap; gap: 6px; margin-left: 8px; flex: 0 1 auto;
    align-items: center; min-width: 0; overflow: hidden; }
.menu > a {
    flex: 0 0 auto; padding: 8px 12px; border-radius: 8px; color: var(--texto-suave); font-weight: 500;
    white-space: nowrap; /* rótulo não quebra no meio (ex.: "Marketplace de templates") */
}
/* "Mais ▾" — irmão do menu (fora do overflow, senão o dropdown seria recortado) */
.menu-mais { position: relative; flex: 0 0 auto; }
.menu-mais-btn { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--borda);
    background: none; color: var(--texto-suave); font-weight: 500; cursor: pointer;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.menu-mais-btn:hover, .menu-mais.aberto .menu-mais-btn { background: var(--bg); color: var(--texto); }
.menu-mais-lista { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: var(--sombra); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 40; }
.menu-mais.aberto .menu-mais-lista { display: flex; }
.menu-mais-lista a { padding: 9px 12px; border-radius: 8px; color: var(--texto-suave);
    white-space: nowrap; text-decoration: none; }
.menu-mais-lista a:hover { background: var(--bg); color: var(--texto); text-decoration: none; }
/* No desktop, o wrapper .topo-nav "desaparece" (display:contents) e o menu +
   a área do usuário se distribuem no flex do topo como sempre. O hambúrguer
   só existe no celular. */
.topo-nav { display: contents; }
.topo-hamburguer { display: none; }
.menu a:hover { background: var(--bg); color: var(--texto); text-decoration: none; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.usuario-nome { color: var(--texto-suave); font-size: .9rem; }

/* ----- Conteúdo ----------------------------------------------------------- */
.conteudo { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
/* Shell de duas colunas no desktop: rail de navegação + conteúdo (rede social) */
.app-shell { max-width: var(--largura-app); margin: 0 auto; display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 30px; padding: 0 24px; align-items: start; }
.app-shell .conteudo { max-width: none; margin: 0; padding: 26px 0 60px; }
.rail { position: sticky; top: 78px; padding: 22px 0; }
.rail-nav { display: flex; flex-direction: column; gap: 3px; }
.rail-link { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 11px; color: var(--texto);
    text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .12s; }
.rail-link:hover { background: rgba(127,127,160,.12); text-decoration: none; }
.rail-link.ativo { background: rgba(127,123,255,.18); color: var(--primaria); }
.rail-hub { background: var(--primaria); color: #fff; margin-bottom: 6px; justify-content: center; box-shadow: var(--sombra); }
.rail-hub:hover { background: var(--primaria); filter: brightness(1.08); color: #fff; }
.rail-emoji { width: 22px; text-align: center; font-size: 1.05rem; }
/* Ícones SVG do DS no rail: mesma faixa de 22px do emoji p/ alinhar os rótulos.
   Herdam a cor do link (inclusive o estado ativo em --primaria). */
.rail-link > .ds-ico { width: 20px; height: 20px; flex: 0 0 22px; }
.rail-grupo > .ds-ico { vertical-align: -0.16em; margin-right: 2px; opacity: .8; }
.rail-sep { height: 1px; background: var(--borda); margin: 8px 6px; }
/* "Num relance": seletor de quais métricas exibir */
.relance-config { margin-bottom: 14px; }
.relance-config > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; }
.relance-config > summary::-webkit-details-marker { display: none; }
.relance-config > summary::marker { content: ''; }
.relance-form { margin-top: 12px; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.relance-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 10px 0 14px; }
.relance-item { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.relance-item input { width: 16px; height: 16px; flex: 0 0 auto; }
/* Contato rápido do cliente (WhatsApp / e-mail) */
.cli-contato { display: flex; align-items: center; gap: 8px; }
.cli-contato-ic { text-decoration: none; font-size: 1.05rem; }
.cli-contato-ic:hover { text-decoration: none; filter: brightness(1.1); }
@media (max-width: 980px) {
    /* minmax(0,1fr): sem isso o min-content de um filho largo estica a faixa
       além da tela e a página inteira ganha rolagem horizontal (bug real
       visto no /inicio em 390px). */
    .app-shell { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
    .rail { display: none; }
    .app-shell .conteudo { padding: 28px 20px 60px; }
}
.pagina-cabecalho {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.sub { color: var(--texto-suave); margin: 0; font-size: .95rem; }
.rodape {
    text-align: center; color: var(--texto-suave); font-size: .85rem; padding: 24px;
}
.rodape-credito {
    display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
    background: linear-gradient(120deg, var(--eter-1), var(--eter-2));
    color: #eaf0ff; font-size: .78rem; letter-spacing: .2px;
}
.rodape-credito strong { color: var(--eter-brilho); }

/* ----- Cards de resumo ---------------------------------------------------- */
.cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px;
}
.card {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 16px 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px;
}
.card-rotulo { color: var(--texto-suave); font-size: .82rem; }
.card-valor { font-size: 1.5rem; font-weight: 700; }
.card-nota { color: var(--texto-suave); font-size: .78rem; }
.card-destaque { background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); border: none; color: #fff; }
.card-destaque .card-rotulo { color: rgba(255,255,255,.85); }
.card-alerta { border-color: var(--vermelho); }

/* ----- Blocos / tabelas --------------------------------------------------- */
.bloco {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 20px; margin-bottom: 20px;
}
.bloco-cabecalho {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.colunas > .bloco, .colunas > * { min-width: 0; }

.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabela th {
    text-align: left; color: var(--texto-suave); font-weight: 600; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .02em; padding: 8px 10px; border-bottom: 2px solid var(--borda);
}
.tabela td { padding: 11px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; text-align: left; }
.tabela tr:last-child td { border-bottom: none; }
.dir { text-align: right; }
.centro { text-align: center; }
/* Alinhamento GERAL à esquerda nas tabelas (pedido do usuário): cabeçalho e
   dados sempre começam pela esquerda, mesmo em colunas marcadas .dir/.centro.
   ".tabela th/td" (0,1,1) vence ".dir/.centro" (0,1,0) — um só ponto de ajuste. */
.tabela th, .tabela th.dir, .tabela th.centro { text-align: left; }
.tabela td.dir, .tabela td.centro { text-align: left; }
.menor { color: var(--texto-suave); font-size: .85rem; }
.acoes-cel { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }

/* ----- Tags / etiquetas --------------------------------------------------- */
.tag {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600;
}
.tag-verde   { background: #e3f6ec; color: var(--verde); }
.tag-vermelho{ background: #fbe4e6; color: var(--vermelho); }
.tag-azul    { background: #e5edfd; color: var(--primaria); }

/* ----- Botões ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 16px; border-radius: 9px; border: 1px solid transparent;
    font-weight: 600; font-size: .92rem; cursor: pointer; transition: .15s;
    background: var(--superficie); color: var(--texto);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--primaria); color: #fff; }
.btn-primary:hover { background: var(--primaria-escura); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--borda); color: var(--texto); }
.btn-ghost:hover { background: var(--bg); }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-bloco { width: 100%; }

.link { color: var(--primaria); font-weight: 600; font-size: .88rem; background: none; border: none; cursor: pointer; padding: 0; }
.link:hover { text-decoration: underline; }
.link-perigo { color: var(--vermelho); }
.inline { display: inline; }

/* ----- Formulários -------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-cartao {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 22px; max-width: 620px;
}
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .88rem; color: var(--texto); }
.form input, .form select, .form textarea {
    font: inherit; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px;
    background: #fff; color: var(--texto); font-weight: 400;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(47,91,234,.15);
}
/* Acessibilidade: foco de teclado visível em TODOS os controles (botões, links,
   cartões, chips) — antes só inputs tinham. Só aparece na navegação por teclado. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .link:focus-visible,
.hub-card:focus-visible, .periodo-chip:focus-visible, .idioma-op:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 6px;
}
.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-acoes { display: flex; gap: 10px; margin-top: 6px; }
.form-pagamento { border-top: 1px dashed var(--borda); padding-top: 14px; }

.dados { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dados div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--borda); padding-bottom: 8px; }
.dados dt { color: var(--texto-suave); font-size: .88rem; }
.dados dd { margin: 0; font-weight: 600; }
.bloco-acoes { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.acoes-topo { display: flex; gap: 8px; }
.amg-portas { flex-wrap: wrap; margin: 0 0 14px; }

.dica {
    background: #fff8ec; border: 1px solid #f3e2c0; border-radius: 10px;
    padding: 12px 14px; font-size: .85rem; color: #7a5b1e;
}

/* ----- Alertas / flash ---------------------------------------------------- */
.alerta { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; font-size: .92rem; }
.alerta-sucesso { background: #e3f6ec; color: #146b45; border: 1px solid #b6e6cd; }
.alerta-erro    { background: #fbe4e6; color: #a12631; border: 1px solid #f2bcc1; }

/* ----- Estado vazio ------------------------------------------------------- */
.vazio {
    background: var(--superficie); border: 1px dashed var(--borda); border-radius: var(--raio);
    padding: 48px 24px; text-align: center; color: var(--texto-suave);
}
.vazio p { margin: 0 0 16px; }

/* ----- Telas de login/cadastro ------------------------------------------- */
.tela-auth {
    display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px;
    background:
        radial-gradient(900px 420px at 50% -8%, rgba(142, 249, 255, .18), transparent),
        radial-gradient(1200px 700px at 80% 120%, rgba(91, 75, 230, .35), transparent),
        linear-gradient(160deg, var(--eter-1), #120d33 70%);
}
.tela-auth .auth-caixa { box-shadow: 0 10px 40px rgba(10, 6, 40, .5); }
.auth-marca { background: linear-gradient(120deg, var(--eter-2), var(--primaria)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-caixa {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px;
    box-shadow: var(--sombra); padding: 32px; width: 100%; max-width: 400px;
}
.auth-marca {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-weight: 700; font-size: 1.3rem; margin-bottom: 22px;
}
.auth-titulo { text-align: center; margin-bottom: 2px; }
.auth-sub { text-align: center; color: var(--texto-suave); margin: 0 0 22px; font-size: .92rem; }
.auth-rodape { text-align: center; margin: 20px 0 0; color: var(--texto-suave); font-size: .9rem; }

/* ----- Responsivo (celular) ---------------------------------------------- */
@media (max-width: 780px) {
    .cards { grid-template-columns: 1fr 1fr; }
    .colunas { grid-template-columns: 1fr; }
    /* No celular a barra do topo mostra só marca + módulo + hambúrguer; o menu
       do módulo e as ações do usuário viram um painel que abre/fecha. */
    .topo-inner { gap: 10px 12px; flex-wrap: wrap; height: auto; min-height: 60px; padding: 10px 16px; }
    .topo-hamburguer { display: inline-flex; margin-left: auto; }
    .topo-nav {
        display: none; flex-basis: 100%; width: 100%;
        flex-direction: column; align-items: stretch; gap: 10px;
        padding-top: 10px; border-top: 1px solid var(--borda);
    }
    .topo.aberto .topo-nav { display: flex; }
    /* No celular o menu é uma coluna dentro do painel — nada de recolher. */
    .topo-nav .menu { margin-left: 0; flex-direction: column; gap: 2px; overflow: visible; }
    .topo-nav .menu a { padding: 10px 12px; }
    .topo-nav .menu-mais { display: none; }
    .topo-nav .usuario { margin-left: 0; flex-wrap: wrap; gap: 10px; align-items: center; }
    .idioma-sel { flex-wrap: wrap; }
    .usuario-nome { display: none; }
    .acoes-topo { flex-wrap: wrap; }
    .colunas { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
    .cards { grid-template-columns: 1fr; }
    .form-linha { grid-template-columns: 1fr; }
    .marca span:not(.marca-icone) { display: none; }
    /* Gráficos e legendas encolhem no celular em vez de empurrar a página. */
    .grafico-rosca { gap: 12px; }
    .grafico-rosca-svg { width: 150px; height: 150px; max-width: 100%; }
    .grafico-legenda { min-width: 0; }
    .grafico-legenda li { font-size: .85rem; }
    .periodo-presets { width: 100%; }
    .periodo-form input { min-width: 0; flex: 1; }
}

/* ----- Botão hambúrguer (ícone de 3 linhas que vira X quando aberto) ----- */
.topo-hamburguer {
    width: 44px; height: 40px; padding: 0; cursor: pointer;
    align-items: center; justify-content: center;
    border: 1px solid var(--borda); border-radius: 10px; background: var(--bg);
}
.hamburguer-linhas, .hamburguer-linhas::before, .hamburguer-linhas::after {
    width: 20px; height: 2px; background: var(--texto); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.hamburguer-linhas { position: relative; display: block; }
.hamburguer-linhas::before { content: ''; position: absolute; left: 0; top: -6px; }
.hamburguer-linhas::after  { content: ''; position: absolute; left: 0; top: 6px; }
.topo.aberto .hamburguer-linhas { background: transparent; }
.topo.aberto .hamburguer-linhas::before { top: 0; transform: rotate(45deg); }
.topo.aberto .hamburguer-linhas::after  { top: 0; transform: rotate(-45deg); }

/* ----- Tabelas viram cartões empilhados no celular (sem rolagem lateral) --
   O JS (app.js) copia o texto do cabeçalho para data-label de cada célula. */
@media (max-width: 640px) {
    .tabela-wrap { overflow-x: visible; }
    table.tabela.emcards { border: 0; }
    .tabela.emcards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabela.emcards tbody, .tabela.emcards tr, .tabela.emcards td { display: block; width: 100%; }
    .tabela.emcards tr {
        background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
        box-shadow: var(--sombra); padding: 4px 14px; margin-bottom: 12px;
    }
    .tabela.emcards td {
        display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px;
        padding: 9px 0; border-bottom: 1px solid var(--borda); text-align: right;
        min-width: 0; overflow-wrap: anywhere;
    }
    .tabela.emcards tr td:last-child { border-bottom: 0; }
    .tabela.emcards td::before {
        content: attr(data-label); font-weight: 600; color: var(--texto-suave);
        text-align: left; flex: 0 1 auto; white-space: nowrap;
    }
    /* célula de ações: sem rótulo, botões alinhados à esquerda e com toque maior */
    .tabela.emcards td.acoes-cel { flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; text-align: left; }
    .tabela.emcards td.acoes-cel::before { display: none; }
    .tabela.emcards td.acoes-cel .link, .tabela.emcards td.acoes-cel .link-perigo { padding: 6px 0; }
    /* colunas vazias/sem valor não precisam aparecer como linha em branco */
    .tabela.emcards td:empty { display: none; }
}

/* ===========================================================================
   Landing page (página inicial pública)
   =========================================================================== */
.lp { background: #fff; }
.lp-container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.lp-centro { text-align: center; }

.lp-topo { background: #fff; border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20; }
.lp-topo-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lp-marca-sub { color: var(--texto-suave); font-weight: 500; }
.lp-topo-acoes { display: flex; gap: 10px; align-items: center; }
/* Faixa de escolha de idioma na landing (bandeira + sigla, horizontal) */
.lp-idiomas { padding: 16px 0 2px; }
.lp-idiomas-titulo { display: block; text-align: center; color: #b9c2ee; font-size: .86rem; font-weight: 600; margin-bottom: 10px; }
html[data-tema="claro"] .lp-idiomas-titulo { color: #5a5f78; }
.lp-idiomas-grade { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lp-idioma { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #e6ebff; text-decoration: none; font-weight: 700; font-size: .82rem; transition: .15s; }
.lp-idioma:hover { background: rgba(255,255,255,.16); text-decoration: none; transform: translateY(-1px); }
.lp-idioma.ativo { background: #7c7bff; border-color: #7c7bff; color: #fff; }
.lp-idioma-bandeira { display: inline-flex; align-items: center; line-height: 1; }
.lp-idioma-bandeira .bandeira { width: 22px; height: 15px; }
html[data-tema="claro"] .lp-idioma { background: #f1f3fb; border-color: var(--borda); color: #2f2a4a; }
html[data-tema="claro"] .lp-idioma.ativo { background: #7c7bff; color: #fff; }

.lp-badge {
    display: inline-block; background: #e5edfd; color: var(--primaria);
    font-weight: 700; font-size: .85rem; padding: 6px 14px; border-radius: 999px;
}
.lp-hero { text-align: center; padding: 64px 0 0; background: radial-gradient(900px 420px at 50% -10%, #dbe4ff, #fff); }
.lp-h1 { font-size: 2.6rem; line-height: 1.15; margin: 18px 0 14px; letter-spacing: -.02em; }
.lp-sub { font-size: 1.15rem; color: var(--texto-suave); max-width: 640px; margin: 0 auto 26px; }
.lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-grande { padding: 14px 26px; font-size: 1.05rem; border-radius: 12px; }
.lp-mini { color: var(--texto-suave); font-size: .85rem; margin-top: 14px; }
.lp-mini-claro { color: rgba(255,255,255,.85); }

.lp-hero-img { margin: 44px auto -6px; max-width: 920px; }
.lp-hero-img img, .lp-tela-img img {
    width: 100%; height: auto; display: block; border-radius: 14px;
    border: 1px solid var(--borda);
    box-shadow: 0 20px 60px rgba(20, 30, 60, .18);
}

.lp-secao { padding: 72px 0; }
.lp-secao-alt { background: var(--bg); }

/* ---- Landing no tema ESCURO (cósmico) — o padrão do Aethereuum ----
   Obs.: NÃO sobrescrever o fundo de body.lp aqui; a regra
   html[data-tema="escuro"] body (o céu cósmico) já vence .lp por especificidade. */
html[data-tema="escuro"] .lp { color: var(--texto); }
html[data-tema="escuro"] .lp-topo { background: rgba(12,13,22,.72); border-bottom-color: var(--borda); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-tema="escuro"] .lp-hero { background: radial-gradient(1000px 460px at 50% -12%, rgba(91,75,230,.28), transparent 70%); }
html[data-tema="escuro"] .lp-secao-alt { background: rgba(23,26,39,.55); }
html[data-tema="escuro"] .lp-badge { background: rgba(127,123,255,.16); color: #b9b2ff; }
html[data-tema="escuro"] .lp-card, html[data-tema="escuro"] .lp-mini-card { background: rgba(23,26,39,.85); border-color: var(--borda); }
html[data-tema="escuro"] .lp-faq details { background: rgba(23,26,39,.85); border-color: var(--borda); }
.lp-h1-brilho { background: linear-gradient(90deg, #8ef9ff, #a99bff 55%, #ff9be7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-badge-verde { background: rgba(26,157,99,.16) !important; color: #43d38f !important; }

/* ---- Mockups traduzíveis (substituem os prints) ---- */
.lp-hero-mock { margin: 44px auto 0; max-width: 860px; display: flex; gap: 26px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.mock-cartao { width: 320px; max-width: 88vw; border-radius: 20px; padding: 18px; color: #fff;
    background: linear-gradient(155deg, #2a1f6e, #4b3fd6 55%, #7a2ea8); box-shadow: 0 24px 60px rgba(40,25,120,.5);
    border: 1px solid rgba(255,255,255,.14); }
.mock-cartao-topo { display: flex; align-items: center; gap: 10px; }
.mock-cartao-topo > div { flex: 1; line-height: 1.2; display: flex; flex-direction: column; }
.mock-handle { font-size: .8rem; opacity: .8; }
.mock-selo { font-size: 1.3rem; }
.mock-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.mock-avatar-sm { width: 32px; height: 32px; font-size: .95rem; }
.mock-cartao-corpo { text-align: center; padding: 16px 0 10px; }
.mock-emoji-grande { font-size: 3rem; display: block; }
.mock-conquista { font-weight: 800; font-size: 1.15rem; margin: 8px 0 10px; }
.mock-medalhas { display: flex; justify-content: center; gap: 8px; font-size: 1.3rem; }
.mock-cartao-rodape { display: flex; justify-content: space-between; font-size: .9rem; border-top: 1px solid rgba(255,255,255,.18); padding-top: 12px; }
.mock-cartao-marca { text-align: center; font-size: .78rem; opacity: .7; margin-top: 10px; letter-spacing: .04em; }

.mock-fone { width: 270px; max-width: 82vw; border-radius: 26px; padding: 12px; background: #0d0f1a; border: 2px solid #2a2f42; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.mock-fone-topo { text-align: center; font-weight: 700; padding: 6px 0 10px; color: #cfd6ff; }
.mock-fone-tela { background: #171a27; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mock-post { display: flex; align-items: center; gap: 8px; background: #1f2335; border-radius: 12px; padding: 8px 10px; }
.mock-post-txt { flex: 1; min-width: 0; font-size: .82rem; color: #e8ebf4; line-height: 1.25; }
.mock-post-txt span { color: #9aa3b5; }
.mock-apoio { font-size: 1.1rem; }
.mock-fim { text-align: center; padding: 12px 8px 6px; display: flex; flex-direction: column; gap: 2px; color: #e8ebf4; }
.mock-fim span { font-size: .8rem; color: #9aa3b5; }

/* Seção "ostente" (texto + cartão lado a lado) */
.lp-ostenta { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.lp-ostenta-mock { display: flex; justify-content: center; }
.lp-tela-mock { display: flex; justify-content: center; }
@media (max-width: 820px) {
    .lp-ostenta { grid-template-columns: 1fr; }
    .lp-hero-mock { gap: 18px; }
}
.lp-h2 { font-size: 1.9rem; text-align: center; margin: 0 0 10px; letter-spacing: -.01em; }
.lp-secao-sub { text-align: center; color: var(--texto-suave); max-width: 560px; margin: 0 auto 40px; font-size: 1.02rem; }
.lp-secao-sub-larga { max-width: 700px; }

.lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-card {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
    padding: 24px; box-shadow: var(--sombra);
}
.lp-card-icone { font-size: 1.8rem; }
.lp-card h3 { margin: 10px 0 8px; font-size: 1.05rem; }
.lp-card p { margin: 0; color: var(--texto-suave); font-size: .93rem; }

.lp-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.lp-passo { text-align: center; padding: 10px 16px; }
.lp-passo-num {
    display: inline-grid; place-items: center; width: 46px; height: 46px;
    border-radius: 50%; background: var(--primaria); color: #fff;
    font-weight: 800; font-size: 1.25rem; margin-bottom: 12px;
}
.lp-passo h3 { margin: 0 0 6px; }
.lp-passo p { margin: 0; color: var(--texto-suave); }

.lp-tela {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 36px;
    align-items: center; margin-top: 48px;
}
.lp-tela-invertida { grid-template-columns: 1.6fr 1fr; }
.lp-tela-invertida .lp-tela-texto { order: 2; }
.lp-tela-invertida .lp-tela-img { order: 1; }
.lp-tela-texto h3 { font-size: 1.25rem; margin: 0 0 8px; }
.lp-tela-texto p { color: var(--texto-suave); margin: 0; }
.lp-tela-celular { max-width: 320px; justify-self: center; }

.lp-checks { list-style: none; padding: 0; margin: 0 auto; max-width: 460px; text-align: left; }
.lp-checks li { padding: 8px 0; font-size: 1rem; }

.lp-beta { text-align: center; }

.lp-faq { max-width: 720px; }
.lp-faq details {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
    padding: 16px 20px; margin-bottom: 10px;
}
.lp-faq summary { font-weight: 700; cursor: pointer; }
.lp-faq p { color: var(--texto-suave); margin: 10px 0 0; }

.lp-final {
    background: linear-gradient(135deg, var(--primaria), var(--primaria-escura));
    padding: 64px 0; text-align: center;
}
.lp-h2-branco { color: #fff; font-size: 1.9rem; margin: 0 0 22px; }
.btn-branco { background: #fff; color: var(--primaria); }
.btn-branco:hover { background: #eef2ff; }

.lp-rodape { padding: 34px 0 44px; text-align: center; color: var(--texto-suave); }
.lp-rodape .marca { justify-content: center; display: inline-flex; }
.lp-rodape p { font-size: .9rem; margin: 10px 0 0; }

@media (max-width: 860px) {
    .lp-h1 { font-size: 2rem; }
    .lp-grid3 { grid-template-columns: 1fr; }
    .lp-passos { grid-template-columns: 1fr; }
    .lp-tela, .lp-tela-invertida { grid-template-columns: 1fr; gap: 18px; }
    .lp-tela-invertida .lp-tela-texto { order: 1; }
    .lp-tela-invertida .lp-tela-img { order: 2; }
    /* Mantém "Entrar" visível no mobile — só compacta os botões do topo p/ caber. */
    .lp-topo-acoes { gap: 6px; }
    .lp-topo-acoes .btn { padding: 8px 12px; font-size: .9rem; white-space: nowrap; }
}
@media (max-width: 430px) {
    /* Telas bem estreitas: só o ícone da marca, para os 2 botões caberem. */
    .lp-topo .marca { font-size: 0; gap: 0; }
    .lp-topo-acoes { gap: 5px; }
    .lp-topo-acoes .btn { padding: 7px 10px; font-size: .82rem; }
    .lp-topo-acoes .tema-btn { padding: 6px 8px; }
}

/* ===========================================================================
   Círculos — rede anti-fadiga (feed limitado + comunidades de ação)
   =========================================================================== */
.hub-rede { border-top-color: #7c3aed; }
.feed-lista { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.post-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
    padding: 14px 16px; box-shadow: var(--sombra); }
.post-topo { display: flex; align-items: center; gap: 10px; }
.post-quem { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.post-quem a { color: var(--texto); text-decoration: none; }
.post-circulo { color: var(--primaria) !important; }
.post-texto { margin: 10px 0 8px; white-space: pre-wrap; }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag-sensacao { background: #fff3e0; color: #b25e00; }
html[data-tema="escuro"] .tag-sensacao { background: rgba(240, 160, 60, .18); color: #ffcf99; }
/* Barra de navegação inferior (mobile, estilo Instagram/TikTok) */
.nav-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex;
    background: var(--superficie); border-top: 1px solid var(--borda);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .18); padding-bottom: env(safe-area-inset-bottom); }
.nav-inf-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 1px 5px; text-decoration: none; color: var(--texto-suave); font-size: .6rem; transition: color .12s; }
.nav-inf-item:hover { text-decoration: none; color: var(--texto); }
.nav-inf-emoji { font-size: 1.15rem; line-height: 1; }
.nav-inf-rotulo { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-inf-item.ativo { color: var(--primaria); font-weight: 700; }
body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } /* espaço para a barra fixa */
/* Botão [+] central elevado (Fase 0.1 — padrão Ton/Stone) */
.nav-inf-mais { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin: -18px 6px 4px; border-radius: 50%;
    background: var(--primaria); color: #fff; border: 3px solid var(--superficie);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3); text-decoration: none; transition: transform .12s; }
.nav-inf-mais:hover { text-decoration: none; color: #fff; transform: scale(1.06); }
.nav-inf-mais[aria-expanded="true"] { transform: rotate(45deg); }
/* Folha de ações rápidas do [+] */
.folha-backdrop { position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .45); }
.folha-acoes { position: fixed; left: 0; right: 0; z-index: 59;
    bottom: calc(62px + env(safe-area-inset-bottom));
    background: var(--superficie); border: 1px solid var(--borda); border-bottom: 0;
    border-radius: 18px 18px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .3); animation: folhaSobe .18s ease; }
@keyframes folhaSobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .folha-acoes { animation: none; } }
.folha-titulo { margin: 0 0 10px; font-weight: 700; color: var(--texto); }
.folha-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 521px) { .folha-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.folha-acao { display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px; border: 1px solid var(--borda); border-radius: 14px;
    background: var(--bg); color: var(--texto); text-decoration: none; font-size: .82rem; font-weight: 600;
    text-align: center; transition: border-color .12s, transform .1s; }
.folha-acao:hover { text-decoration: none; border-color: var(--primaria); transform: translateY(-2px); }
.folha-acao-emoji { font-size: 1.5rem; line-height: 1; }
@media (min-width: 981px) { .nav-inferior, .folha-acoes, .folha-backdrop { display: none !important; } body { padding-bottom: 0; } }

/* Fase 6.1: banner dispensável de instalação do PWA (acima da nav inferior) */
.pwa-banner { position: fixed; left: 10px; right: 10px; z-index: 49;
    bottom: calc(70px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.pwa-banner-emoji { flex: 0 0 auto; font-size: 1.3rem; }
.pwa-banner-txt { flex: 1 1 auto; margin: 0; font-size: .85rem; color: var(--texto); }
@media (min-width: 981px) { .pwa-banner { left: auto; right: 14px; bottom: 14px; max-width: 440px; } }
@media print { .pwa-banner { display: none !important; } }

/* Busca global (Fase 0.4 — Ctrl+K / 🔍 do topo) */
.busca-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .5); }
.busca-modal { position: fixed; z-index: 71; top: 10vh; left: 50%; transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4); padding: 12px; }
.busca-campo { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 1rem;
    border: 1px solid var(--borda); border-radius: 10px; background: var(--bg); color: var(--texto); }
.busca-lista { list-style: none; margin: 10px 0 0; padding: 0; overflow-y: auto; }
.busca-lista li a { display: block; padding: 10px 12px; border-radius: 10px;
    color: var(--texto); text-decoration: none; }
.busca-lista li a:hover, .busca-lista li a:focus { background: var(--bg); text-decoration: none; }
.busca-nada { margin: 10px 4px 2px; }

/* Topo: busca + sino sempre visíveis (Fase 0.4/0.5) — canto direito */
.topo-busca, .topo-msg, .topo-sino { order: 5; }
.topo-busca { border: 0; background: none; cursor: pointer; }
@media (max-width: 780px) {
    .topo-busca { margin-left: auto; }
    .topo-hamburguer { order: 7; margin-left: 0; }
}

/* Hub: "Mais painéis (sugeridos)" — Fase 0.2, nada some do mapa */
.hub-mais .hub-card-sugerido { opacity: .82; border-style: dashed; }
.hub-mais .hub-card-sugerido:hover { opacity: 1; }
.hub-mais-dica { margin: -6px 0 10px; }
.hub-card-sugerido form { margin-top: 8px; }

/* Página Início */
.ini-onboard { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,200,255,.10)); border: 1px solid var(--borda); border-radius: 16px; padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--sombra); flex-wrap: wrap; }
.ini-onboard-emoji { font-size: 1.8rem; line-height: 1; }
.ini-onboard-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.ini-onboard-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ini-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ini-topo h1 { margin: 0; font-size: 1.5rem; }
.ini-bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--sombra); }
.ini-bloco-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ini-bloco-cab h2 { margin: 0; font-size: 1.05rem; }
.ini-bloco-cab a { text-decoration: none; white-space: nowrap; }
.ini-lembretes { display: flex; flex-direction: column; gap: 8px; }
.ini-lembrete { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--borda); text-decoration: none; color: var(--texto); }
.ini-lembrete:hover { border-color: var(--primaria); }
.lembrete-feed { background: linear-gradient(90deg, rgba(91,75,230,.14), rgba(46,160,180,.10)); }
.lembrete-evento { background: linear-gradient(90deg, rgba(240,160,60,.16), rgba(230,40,120,.08)); }
.ini-lembrete-emoji { font-size: 1.4rem; }
.ini-hora { background: rgba(127,123,255,.18); color: var(--primaria); border-radius: 6px; padding: 1px 6px; font-size: .8rem; font-weight: 700; }
.ini-avatares { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.ini-avatar-card { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--texto); min-width: 66px; }
.ini-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.2rem; box-shadow: var(--sombra); }
.ini-avatar-sm { width: 38px; height: 38px; font-size: 1rem; }
.ini-avatar-nome { font-size: .8rem; font-weight: 600; max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-ranking { display: flex; flex-direction: column; gap: 4px; }
.ini-rank-linha { display: flex; align-items: center; gap: 10px; padding: 7px 6px; text-decoration: none; color: var(--texto); border-radius: 10px; }
.ini-rank-linha:hover { background: var(--bg); }
.ini-rank-pos { font-weight: 800; color: var(--texto-suave); width: 28px; }
.ini-rank-nome { flex: 1; min-width: 0; }
.ini-rank-pontos { font-weight: 700; color: var(--primaria); white-space: nowrap; }
.ini-vazio { text-align: center; padding: 16px 8px; }
/* Página de contato */
.ct-wrap { max-width: 900px; margin: 0 auto; padding: 24px 18px 60px; }
.ct-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ct-cabecalho { text-align: center; margin-bottom: 22px; }
.ct-cabecalho h1 { margin: 0 0 6px; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ct-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; box-shadow: var(--sombra); }
.ct-emoji { font-size: 1.8rem; display: block; }
.ct-card h2 { font-size: 1.02rem; margin: 6px 0; word-break: break-all; }
.ct-card p { color: var(--texto-suave); margin: 0 0 12px; }
.ct-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-nota { margin: 20px 0; background: var(--superficie); border: 1px dashed var(--borda); border-radius: 12px; padding: 14px 16px; }
.ct-voltar { text-align: center; margin-top: 18px; }
/* Autocomplete de cliente */
.autocomplete { position: relative; }
.autocomplete .ac-input { width: 100%; }
.ac-lista { position: absolute; z-index: 40; left: 0; right: 0; margin: 3px 0 0; padding: 4px; list-style: none;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra);
    max-height: 260px; overflow-y: auto; }
.ac-item { padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.ac-item:hover, .ac-item.ac-ativo { background: rgba(127, 123, 255, .16); }
.badge-pend { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444;
    color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 18px; }
/* Painel Amigos */
.bloco-aniversario { border: 1px solid #ffd9a8; background: linear-gradient(180deg, rgba(255,200,120,.12), transparent); }
html[data-tema="escuro"] .bloco-aniversario { border-color: rgba(240,180,90,.35); }
.aniver-lista { display: flex; flex-direction: column; gap: 8px; }
.aniver-item { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.aniver-quem { display: flex; flex-direction: column; min-width: 0; }
.aniver-acoes { margin-left: auto; }
.lista-amigos { display: flex; flex-direction: column; gap: 8px; }
.amigo-linha { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.amigo-linha:last-child { border-bottom: 0; }
.amigo-quem { flex: 1; min-width: 140px; display: flex; flex-direction: column; line-height: 1.25; }
.amigo-quem a { color: var(--texto); text-decoration: none; }
.amigo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.convidar-form { display: flex; gap: 6px; align-items: center; }
.convidar-form select { max-width: 170px; }
.convidar-form .autocomplete { flex: 0 1 170px; min-width: 130px; }
/* Perfil só-para-amigos */
.perfil-amigos-bloco { margin-top: 14px; text-align: left; }
.perfil-amigos-titulo { font-weight: 700; color: var(--primaria); margin: 0 0 8px; }
.perfil-amigos-item { margin: 4px 0; }
.perfil-fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.perfil-fotos-grade img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); display: block; }
.perfil-foto-edit { position: relative; }
.perfil-foto-edit form { position: absolute; top: 4px; right: 4px; }
.perfil-foto-edit .link-perigo { background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; text-decoration: none; }
.form-grupo-amigos { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.form-grupo-amigos legend { font-weight: 700; padding: 0 6px; }
/* Foto de capa do círculo */
.circ-capa { max-width: 720px; margin-bottom: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); }
.circ-capa img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.circ-card-capa { display: block; height: 96px; margin: -16px -16px 8px; border-radius: 14px 14px 0 0;
    background-size: cover; background-position: center; }
.capa-atual { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.capa-remover-lbl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rotulo-campo { display: block; font-weight: 600; margin-bottom: 4px; }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 16px; border: 2px dashed var(--borda); border-radius: 12px; cursor: pointer;
    transition: border-color .15s ease, background .15s ease; }
.dropzone:hover { border-color: var(--primaria); }
.dropzone.arrastando { border-color: var(--primaria); background: rgba(96, 130, 240, .10); }
.dropzone-input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-icone { font-size: 1.5rem; }
.dropzone-texto { font-weight: 600; }
.previa-foto-box { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 2px; }
.previa-foto-img { max-width: 180px; max-height: 180px; border-radius: 10px; border: 1px solid var(--borda); display: block; }
.post-foto-link { display: block; margin: 4px 0 10px; }
.post-foto { max-width: 100%; max-height: 420px; border-radius: 12px; border: 1px solid var(--borda); display: block; }
.post-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Comentários das atividades */
.post-comentarios { margin-top: 10px; border-top: 1px solid var(--borda); padding-top: 8px; }
.coment-titulo { margin: 0 0 6px; }
.coment { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; flex-wrap: wrap; }
.coment-quem a { color: var(--texto); text-decoration: none; }
.coment-texto { flex: 1; min-width: 0; word-break: break-word; }
.coment-x { font-size: .85rem; padding: 0 4px; }
.coment-form { display: flex; gap: 6px; margin-top: 8px; }
.coment-form input[type="text"] { flex: 1; min-width: 0; }
/* Link de convite do círculo */
.convite-box { max-width: 720px; background: var(--superficie); border: 1px solid var(--borda);
    border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.convite-linha { display: flex; gap: 8px; margin-top: 6px; }
.convite-input { flex: 1; min-width: 0; font-family: monospace; font-size: .9rem; }
.feed-fim { max-width: 720px; text-align: center; background: var(--superficie); border: 2px dashed var(--borda);
    border-radius: 16px; padding: 24px 16px; margin-top: 16px; }
.feed-fim form { margin-top: 10px; }
.feed-concluido { max-width: 640px; margin: 30px auto; text-align: center; background: var(--superficie);
    border-radius: 20px; padding: 40px 24px; box-shadow: var(--sombra);
    animation: badgePop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.feed-concluido-emoji { font-size: 3.4rem; display: block; margin-bottom: 8px; }
.feed-concluido h2 { margin: 0 0 8px; font-size: 1.4rem; }
.circ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.circ-card { display: flex; flex-direction: column; gap: 4px; background: var(--superficie);
    border: 1px solid var(--borda); border-radius: 14px; padding: 16px; text-decoration: none !important;
    color: var(--texto); box-shadow: var(--sombra); }
.circ-card:hover { border-color: var(--primaria); }
.circ-emoji { font-size: 1.8rem; line-height: 1; }

/* Sugestões — círculos casados com os painéis que a pessoa realmente usa */
.bloco-sug { border: 1px solid #7c3aed44; }
.circ-sugerido { border-color: #7c3aed66; }
.circ-sugerido .circ-link { display: flex; flex-direction: column; gap: 4px;
    color: var(--texto); text-decoration: none; flex: 1; }
.circ-sugerido form { margin-top: 10px; }
.sug-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--bg); border: 1px dashed var(--borda); border-radius: 10px;
    padding: 8px 12px; margin: 10px 0 0; font-size: .92rem; }

/* ----- Página de download do app ----- */
.dl-wrap { max-width: 900px; margin: 0 auto; padding: 34px 16px 40px; }
.dl-hero { text-align: center; color: #f4f7ff; margin-bottom: 26px; }
.dl-hero h1 { margin: 12px 0 6px; font-size: 1.9rem; }
.dl-hero p { color: #b9c2ee; margin: 0 0 14px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dl-card { background: #fff; border-radius: 18px; padding: 22px 18px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-shadow: 0 18px 50px rgba(16, 11, 44, .4); }
.dl-icone { font-size: 2.4rem; line-height: 1; }
.dl-passos { text-align: left; margin: 4px 0 0; padding-left: 20px; font-size: .9rem; color: #444f60; }
.dl-passos li { margin-bottom: 6px; }
.dl-breve { background: #f4f6fc; border-radius: 10px; padding: 6px 10px; }
.rodape-download { text-align: center; margin: 8px 0 0; }

/* ----- Insights ----- */
.ins-lista { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ins-lista li { padding: 10px 14px; background: var(--bg); border: 1px solid var(--borda); border-radius: 10px; }

/* ----- Relatório mensal (documento imprimível) ----- */
.rel-doc { max-width: 860px; }
.rel-cabecalho { display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--eter-2); padding-bottom: 10px; margin-bottom: 16px; }
.rel-rodape { text-align: center; margin-top: 18px; }
@media print {
    .topo, .nao-imprime, .tema-btn, .alerta, footer { display: none !important; }
    html[data-tema="escuro"] { --bg: #fff; --superficie: #fff; --texto: #111; --texto-suave: #555; --borda: #ccc; }
    body { background: #fff; }
    .conteudo { padding: 0; max-width: none; }
    .rel-doc { max-width: none; }
    .bloco, .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* ===========================================================================
   Gráficos (SVG), análise da carteira e relatório
   =========================================================================== */
/* minmax(0,1fr): sem o 0, a coluna nunca encolhe abaixo do conteúdo (SVG/tabela)
   e a grade estoura a lateral no celular. */
.graficos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.graficos .bloco { margin-bottom: 0; min-width: 0; }
@media (max-width: 720px) { .graficos { grid-template-columns: 1fr; } }

.grafico-svg { width: 100%; height: auto; display: block; }
.g-valor { font: 600 12px -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--texto); }
.g-label { font: 500 13px -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--texto-suave); }

.grafico-rosca { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.grafico-rosca-svg { width: 190px; height: 190px; flex: 0 0 auto; }
.g-centro-rotulo { font: 500 12px -apple-system, sans-serif; fill: var(--texto-suave); }
.g-centro-valor { font: 700 17px -apple-system, sans-serif; fill: var(--texto); }
.grafico-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; }
.grafico-legenda li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.grafico-legenda li:last-child { border-bottom: none; }
.leg-cor { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.leg-label { flex: 1; font-size: .92rem; }
.leg-valor { font-weight: 700; font-size: .92rem; }
.leg-valor em { color: var(--texto-suave); font-weight: 500; font-style: normal; font-size: .82rem; }
.grafico-vazio { color: var(--texto-suave); text-align: center; padding: 40px 10px; font-size: .92rem; }

.analise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.analise-item { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.analise-rotulo { color: var(--texto-suave); font-size: .85rem; }
.analise-valor { font-size: 1.35rem; font-weight: 700; }

.cobranca-texto {
    width: 100%; font: inherit; padding: 12px; border: 1px solid var(--borda);
    border-radius: 10px; background: var(--bg); color: var(--texto); resize: vertical;
}
.relatorio-topo { margin-bottom: 16px; font-size: .9rem; color: var(--texto); line-height: 1.6; }
.print-only { display: none; }

@media (max-width: 780px) {
    .graficos { grid-template-columns: 1fr; }
    .analise-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Impressão (relatório em papel / PDF) ------------------------------ */
@media print {
    .topo, .rodape, .no-print, .btn { display: none !important; }
    .print-only { display: block; }
    body, .lp { background: #fff; }
    .conteudo { max-width: 100%; padding: 0; }
    .bloco, .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    .cards { grid-template-columns: repeat(4, 1fr); }
    a[href]::after { content: ""; }
}

/* ===========================================================================
   Hub (escolha de painel) e navegação multi-módulo
   =========================================================================== */
.modulo-atual {
    font-size: .8rem; font-weight: 700; color: var(--primaria);
    background: #e5edfd; padding: 3px 10px; border-radius: 999px; margin-left: 4px;
}
.menu-hub { white-space: nowrap; }
.menu-hub:hover { text-decoration: none; }

.hub-cabecalho { margin-bottom: 24px; }
.hub-cabecalho h1 { font-size: 1.7rem; }
/* Tiles preenchem a largura (menos "plano de fundo" nas laterais). */
/* Onboarding "quais hubs fazem parte da sua vida?" + personalização */
.hub-onboard { background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(0,200,255,.08)); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 18px; }
.hub-onboard-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hub-onboard-cab h2 { margin: 0; font-size: 1.2rem; }
.hub-onboard-cab p { margin: 0; }
.hub-onboard-emoji { font-size: 2rem; line-height: 1; }
.hub-onboard-grid, .pref-paineis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.hub-onboard-opt, .pref-painel-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; background: var(--superficie); transition: border-color .15s, background .15s; }
.hub-onboard-opt:has(input:checked), .pref-painel-opt:has(input:checked) { border-color: var(--primaria); background: rgba(124,92,255,.10); }

/* Onboarding por objetivo (item 14/23) */
.hub-obj-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.hub-obj-grade form { display: flex; }
.hub-obj-opt { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: left;
    padding: 16px; border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie);
    color: var(--texto); cursor: pointer; transition: border-color .15s, transform .1s; }
.hub-obj-opt:hover { border-color: var(--primaria); transform: translateY(-2px); }
.hub-obj-emoji { font-size: 1.8rem; }
.hub-obj-manual { margin-top: 4px; text-align: center; }
.hub-onboard-emoji-op { font-size: 1.25rem; line-height: 1; }
.hub-onboard-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hub-personalizar { text-align: center; margin-top: 16px; }

/* Espaço compartilhado (item 17) */
.hub-espaco { border-top-color: #e0398b; }
.esp-membros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.esp-membro { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.esp-add { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; align-items: end; }
.esp-add .form-acoes { grid-column: 1 / -1; }
@media (max-width: 640px) { .esp-add { grid-template-columns: 1fr; } }
.esp-lista { display: grid; gap: 8px; }
.esp-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.esp-item-txt { flex: 1 1 auto; min-width: 0; }
.esp-feito .esp-item-txt { text-decoration: line-through; opacity: .6; }
.esp-check { background: none; border: 0; cursor: pointer; font-size: 1.2rem; padding: 0; }
.esp-item-icone { font-size: 1.1rem; }
.esp-item-valor { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Espaço compartilhado — agenda, mural, despesas e lista de compras */
.esp-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.esp-nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; font-size: .85rem;
    font-weight: 600; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-suave);
    white-space: nowrap; }
.esp-nav a:hover { border-color: var(--primaria); color: var(--texto); }
.esp-vazio { color: var(--texto-suave); font-size: .9rem; padding: 8px 0; }
.esp-add-det { margin-top: 12px; }
.esp-add-det > summary { display: inline-flex; list-style: none; cursor: pointer; }
.esp-add-det > summary::-webkit-details-marker { display: none; }
.esp-add-det[open] > summary { margin-bottom: 12px; }
.esp-form, .esp-mural-form { display: grid; gap: 10px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form-2col { grid-template-columns: 1fr; } }

/* Agenda */
.esp-eventos { display: grid; gap: 10px; margin-top: 8px; }
.esp-evento { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda);
    background: rgba(255,255,255,.03); }
.esp-evento-passou { opacity: .6; }
.esp-evento-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.esp-evento-quando { font-size: .82rem; color: var(--primaria); font-weight: 600; white-space: nowrap; }
.esp-evento-local { margin: 4px 0 0; font-size: .88rem; color: var(--texto-suave); }
.esp-evento-desc { margin: 6px 0 0; font-size: .9rem; }
.esp-evento-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* Mural */
.esp-mural-form textarea { width: 100%; }
.esp-mural-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.esp-foto-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .85rem;
    color: var(--texto-suave); }
.esp-mural-lista { display: grid; gap: 12px; margin-top: 14px; }
.esp-post { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255,255,255,.03); }
.esp-post-cab { display: flex; align-items: center; gap: 8px; }
.esp-post-quem { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.esp-post-txt { margin: 8px 0 0; font-size: .92rem; }
.esp-post-foto { display: block; margin-top: 10px; max-width: 100%; max-height: 360px; border-radius: 10px; object-fit: cover; }

/* Despesas — quem já pagou */
.esp-despesas { display: grid; gap: 12px; margin-bottom: 8px; }
.esp-despesa { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255,255,255,.03); }
.esp-despesa-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.esp-despesa-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.esp-despesa-resumo { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.esp-pagou-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.esp-pagou { margin: 0; }
.esp-pagou button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave);
    cursor: pointer; font-size: .85rem; font-weight: 600; }
.esp-pagou button:hover { border-color: var(--primaria); }
.esp-pagou-sim button { border-color: var(--verde); color: var(--verde); background: rgba(46,204,113,.08); }
.esp-despesa-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* Lista de compras (tempo real) */
.esp-compra-add { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-bottom: 12px; }
@media (max-width: 480px) { .esp-compra-add { grid-template-columns: 1fr; } }
.esp-compras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.esp-compra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.esp-compra-txt { flex: 1 1 auto; min-width: 0; }
.esp-compra-feito .esp-compra-txt { text-decoration: line-through; opacity: .55; }
.esp-vivo { font-size: .7rem; color: var(--verde); font-weight: 700; vertical-align: middle; margin-left: 8px; }
.esp-vivo { animation: esp-pulsar 2s ease-in-out infinite; }
@keyframes esp-pulsar { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .esp-vivo { animation: none; } }

/* CTA "ver um exemplo pronto" no estado vazio dos espaços */
.esp-exemplo-cta { display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; margin: -8px 0 20px; }

/* Páginas legais (Termos, Privacidade, Cookies, Assinaturas) */
.legal-doc { max-width: 820px; }
.legal-hero { text-align: left; }
.legal-vigencia { color: var(--texto-suave); font-size: .9rem; margin-top: 6px; }
.legal-abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 28px; }
.legal-abas a { padding: 6px 12px; border-radius: 999px; text-decoration: none; font-size: .85rem;
    font-weight: 600; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-suave); }
.legal-abas a:hover { border-color: var(--primaria); color: var(--texto); }
.legal-abas a.ativo { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.legal-corpo { line-height: 1.7; }
.legal-secao { margin: 0 0 26px; }
.legal-secao h2 { font-size: 1.15rem; margin: 0 0 10px; }
.legal-secao p { margin: 0 0 10px; color: var(--texto); }
.legal-secao ul { margin: 0 0 10px; padding-left: 22px; }
.legal-secao li { margin: 0 0 6px; }
.legal-identificacao { border-top: 1px solid var(--borda); padding-top: 22px; }
.legal-dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 16px; margin: 0; }
.legal-dl dt { font-weight: 700; color: var(--texto-suave); }
.legal-dl dd { margin: 0; }
@media (max-width: 520px) { .legal-dl { grid-template-columns: 1fr; gap: 2px 0; } .legal-dl dd { margin-bottom: 8px; } }
.legal-aviso { color: var(--vermelho); font-weight: 600; }
.legal-nota-final { color: var(--texto-suave); font-size: .85rem; border-top: 1px solid var(--borda);
    padding-top: 16px; margin-top: 24px; }
/* Site parceiro (Business+): página pública + painel */
.sp-pub { max-width: 640px; margin: 0 auto; padding: 12px; }
.sp-hero { text-align: center; margin: 8px 0 20px; }
.sp-hero h1 { margin: 0 0 6px; }
.sp-desc { color: var(--texto-suave); margin: 0 0 12px; }
.sp-bloco { margin-bottom: 16px; }
.sp-lista { display: grid; gap: 8px; }
.sp-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px;
    border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.sp-item-nome { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sp-item > .menor { white-space: nowrap; }
.sp-item-preco { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-rodape { text-align: center; margin: 20px 0 8px; }
.sp-rodape a { color: inherit; }
.sp-toggles { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.sp-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .92rem; }

/* Site parceiro — versão DESKTOP (mesmo breakpoint do app, 981px) */
.auth-caixa-larga { max-width: 1080px; }
/* Inputs nunca vazam do cartão (grid com colunas estreitas) */
.sp-pub .form input, .sp-pub .form textarea, .sp-pub .form select { width: 100%; box-sizing: border-box; }
.sp-pub .form-2col > label { min-width: 0; }
@media (min-width: 981px) {
    /* Página pública: hero largo + duas colunas (serviços/catálogo ⇄ pedido) */
    .sp-pub { max-width: none; }
    .sp-hero { margin: 4px 0 26px; }
    .sp-hero h1 { font-size: 2rem; }
    .sp-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; }
    .sp-grid-solo { grid-template-columns: minmax(0, 560px); justify-content: center; }
    .sp-col { min-width: 0; }
    /* No lado largo, os itens viram cartões em grade */
    .sp-lista { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
    .sp-item { flex-wrap: wrap; }
    /* O formulário de pedido acompanha a rolagem (recepção do site) */
    .sp-col:last-child .sp-bloco { position: sticky; top: 16px; }
    /* Na coluna estreita do pedido, telefone/e-mail empilham (sem aperto) */
    .sp-col:last-child .form-2col { grid-template-columns: 1fr; }

    /* Painel do dono: link + configurações lado a lado */
    .sp-duplo { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; align-items: start; }
    .sp-duplo > .bloco { margin-bottom: 16px; }
}

/* Bloco de links legais no rodapé */
.rodape-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin-top: 6px; }
.rodape-legal a { color: inherit; opacity: .85; text-decoration: none; font-size: .85rem; }
.rodape-legal a:hover { opacity: 1; text-decoration: underline; }

/* "Meu Negócio" com abas no cockpit Dinheiro (item 20) */
.negocio-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.negocio-aba { padding: 8px 14px; border-radius: 999px; text-decoration: none;
    background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-suave);
    font-weight: 600; font-size: .9rem; white-space: nowrap; }
.negocio-aba:hover { border-color: var(--primaria); color: var(--texto); }
.negocio-aba.ativa { background: rgba(124,123,255,.14); border-color: var(--primaria); color: var(--texto); }

/* Sub-hub "Meu Negócio" — hub dentro do hub (painéis liga/desliga) */
.neg-hub { margin-bottom: 22px; }
.neg-hub-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.neg-hub-cab h2 { font-size: 1.1rem; margin: 0; }
.neg-hub-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.neg-hub-grid .hub-card { padding: 16px; gap: 4px; }
.neg-hub-grid .hub-card h2 { font-size: 1.05rem; }
.neg-hub-edit { margin-top: 6px; padding: 16px; border-radius: 16px;
    background: var(--superficie); border: 1px dashed var(--borda); }
.neg-hub-edit .hub-pers-grid { margin: 10px 0 14px; }
.neg-hub-editando .neg-hub-cab { margin-bottom: 6px; }
/* Financeiro do negócio (Fase 4.2): segunda fileira de cards, fixa */
.neg-fin-cab { margin-top: 16px; }
.neg-hub-grid .hub-resumo.menor { font-weight: 500; font-size: .85rem; color: var(--texto-suave); }
/* Cadeado em vez de sumiço (Fase 5.3 / D3): card bloqueado anuncia o plano
   Business e leva ao Meu Plano — o gate real continua no servidor. */
.hub-card-gate { opacity: .65; border-top-color: var(--borda); filter: saturate(.6); }
.hub-card-gate:hover { opacity: .85; filter: none; }
.hub-card-gate .hub-abrir { color: var(--texto-suave); }
/* Área de atuação (D4): select pequeno no rodapé do sub-hub */
.neg-area { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.neg-area label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; margin: 0; }
.neg-area select { max-width: 220px; }

/* Escrever — hub único de escrita (item 21) */
.escrever-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.escrever-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px;
    background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra);
    color: var(--texto); text-decoration: none; transition: border-color .15s, transform .1s; }
.escrever-card:hover { border-color: var(--primaria); transform: translateY(-2px); }
.escrever-emoji { font-size: 2rem; }
.escrever-cta { margin-top: 6px; color: var(--primaria); font-weight: 600; font-size: .9rem; }

.hub-dominio { margin-bottom: 22px; }
.hub-dom-titulo { font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 6px;
    border-bottom: 1px solid var(--borda); opacity: .92; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
.hub-card {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px;
    padding: 22px; box-shadow: var(--sombra); color: var(--texto);
    display: flex; flex-direction: column; gap: 6px; position: relative;
    border-top: 4px solid var(--primaria); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hub-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,30,60,.14); }
html[data-tema="escuro"] .hub-card:hover { border-color: var(--primaria); box-shadow: 0 14px 34px rgba(91,75,230,.28); }
.hub-icone { font-size: 2.2rem; }
.hub-card h2 { font-size: 1.25rem; margin: 4px 0 0; }
.hub-card p { color: var(--texto-suave); margin: 0; font-size: .95rem; }
.hub-resumo { margin-top: 8px; font-weight: 700; font-size: 1.02rem; }
.hub-abrir { margin-top: 10px; color: var(--primaria); font-weight: 600; font-size: .9rem; }
.hub-negocio       { border-top-color: #2f5bea; }
.hub-dinheiro      { border-top-color: #1fbf75; }
.hub-despesas      { border-top-color: #e05252; }
.hub-dre           { border-top-color: #8894a8; }
.hub-fluxo         { border-top-color: #14b8c4; }
.hub-devedores     { border-top-color: #2f5bea; }
.hub-vendas        { border-top-color: #1a9d63; }
.hub-estoque       { border-top-color: #f0ad4e; }
.hub-investimentos { border-top-color: #8b5cf6; }

@media (max-width: 780px) {
    /* auto-fill já colapsa para 1 coluna nas telas bem estreitas */
    .marca-nome { display: none; }
    .modulo-atual { margin-left: 0; }
    .menu-hub { display: none; }
}

/* ----- Landing: bloco 4-em-1 --------------------------------------------- */
.lp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-mini-card {
    background: var(--superficie); border: 1px solid var(--borda); border-top: 4px solid var(--primaria);
    border-radius: 14px; padding: 20px; box-shadow: var(--sombra);
}
.lp-mini-card h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.lp-mini-card p { margin: 0; color: var(--texto-suave); font-size: .9rem; }
@media (max-width: 860px) { .lp-grid4 { grid-template-columns: 1fr 1fr; } }

/* ----- Hub: cadastro central de clientes (banner) ------------------------ */
.hub-clientes {
    display: flex; align-items: center; gap: 18px; color: var(--texto);
    background: linear-gradient(135deg, #eef3ff, #ffffff);
    border: 1px solid var(--borda); border-left: 5px solid var(--primaria);
    border-radius: 16px; padding: 20px 24px; box-shadow: var(--sombra);
    margin-bottom: 18px; transition: .15s; flex-wrap: wrap;
}
.hub-clientes:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(20,30,60,.12); }
.hub-clientes .hub-icone { font-size: 2rem; }
.hub-clientes-txt { flex: 1; min-width: 220px; }
.hub-clientes-txt h2 { margin: 0 0 4px; font-size: 1.2rem; }
.hub-clientes-txt p { margin: 0; color: var(--texto-suave); font-size: .93rem; }
.hub-clientes-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (max-width: 560px) {
    .hub-clientes-lado { align-items: flex-start; }
}

/* ----- Investimentos: cartões de ação rápida (aporte/saque/ajuste) ------- */
.acoes-invest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.acao-card {
    border: 1px solid var(--borda); border-radius: 12px; padding: 16px;
    display: flex; flex-direction: column; gap: 8px; background: var(--bg);
}
.acao-card h3 { margin: 0; font-size: 1rem; }
.acao-card p { margin: 0; }
.acao-card input { font: inherit; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px; background: #fff; }
.acao-card input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(47,91,234,.15); }
.acao-aporte { border-top: 3px solid var(--verde); }
.acao-saque  { border-top: 3px solid var(--texto-suave); }
.acao-ajuste { border-top: 3px solid var(--primaria); }
@media (max-width: 720px) { .acoes-invest { grid-template-columns: 1fr; } }

/* ----- Hub: card motorista ---------------------------------------------- */
.hub-motorista { border-top-color: #0ea5b7; }

/* ----- Seletor de período (relatórios) ---------------------------------- */
.periodo-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borda);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 20px; box-shadow: var(--sombra);
}
.periodo-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.periodo-chip {
    padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
    color: var(--texto-suave); background: var(--bg); border: 1px solid var(--borda);
}
.periodo-chip:hover { text-decoration: none; color: var(--texto); }
.periodo-chip.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.periodo-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.periodo-form input { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.periodo-form span { color: var(--texto-suave); font-size: .85rem; }
@media (max-width: 620px) { .periodo-barra { flex-direction: column; align-items: stretch; } }

/* ===========================================================================
   Módulo Exercícios (treino)
   =========================================================================== */
.hub-treino { border-top-color: #e0398b; }

.lim-regiao { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 10px; }
.lim-regiao legend { font-weight: 700; padding: 0 6px; font-size: .9rem; color: var(--primaria); }
.lim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.lim-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important;
    background: var(--bg); border: 1px solid var(--borda); border-radius: 9px; padding: 10px 12px; cursor: pointer; }
.lim-check input { width: auto; }

.treino-lista { display: flex; flex-direction: column; gap: 10px; }
.treino-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; flex-wrap: wrap; }
.treino-item-acoes { display: flex; gap: 8px; }

.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ex-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; box-shadow: var(--sombra); }
.ex-card.ex-evitar { border-color: #f2bcc1; background: #fffafa; }
.ex-card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.ex-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--texto-suave); margin: 8px 0; }
.ex-dica { font-size: .82rem; color: #7a5b1e; background: #fff8ec; border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; }
.ex-alerta { font-size: .82rem; color: var(--vermelho); margin: 8px 0 0; font-weight: 600; }
.ex-dica-inline { display: block; margin-top: 4px; color: #7a5b1e; }

.modelos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.modelo-ex { list-style: none; padding: 0; margin: 8px 0 14px; }
.modelo-ex li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: .9rem; }
.modelo-ex li:last-child { border-bottom: none; }

.progresso-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.progresso { height: 12px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--borda); }
.progresso-barra { height: 100%; background: linear-gradient(90deg, var(--verde), #14b866); transition: width .2s; }

.sessao-lista { display: flex; flex-direction: column; gap: 10px; }
.sessao-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; }
.sessao-item.feito { background: #f2fbf6; border-color: #b6e6cd; }
.sessao-item-info { display: flex; flex-direction: column; gap: 2px; }
.form-inline-add { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center;
    border-top: 1px dashed var(--borda); padding-top: 14px; }
.form-inline-add select { flex: 1; min-width: 180px; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 9px; font: inherit; }
.form-inline-add .autocomplete { flex: 1; min-width: 180px; }
.form-inline-add input { padding: 9px 11px; border: 1px solid var(--borda); border-radius: 9px; font: inherit; }

/* ===========================================================================
   Módulo Metas e Sonhos (diário + objetivos)
   =========================================================================== */
.hub-metas { border-top-color: #e0398b; }

/* ----- Alertas inteligentes ----- */
.alertas-lista { display: flex; flex-direction: column; gap: 10px; }
.alerta-int { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid #e6e9f2; background: #f7f9fc; font-size: .94rem; }
.alerta-int-emoji { font-size: 1.4rem; line-height: 1; }
.alerta-int-txt { flex: 1; font-weight: 500; }
.alerta-int .btn { margin-left: auto; white-space: nowrap; }
.alerta-int.alerta-bom { background: #e9f8f0; border-color: #b6e6cd; }
.alerta-int.alerta-atencao { background: #fff4e5; border-color: #ffd9a8; }

/* ===========================================================================
   Módulo Agenda do dia
   =========================================================================== */
.hub-agenda { border-top-color: #14b8c4; }
.hub-caderno { border-top-color: #b06fd0; }
.hub-atendimentos { border-top-color: #12a3a3; }
.hub-ia { border-top-color: #7c7bff; background: linear-gradient(180deg, rgba(127,123,255,.10), transparent); }
/* ===== Aeth — copiloto de IA ===== */
.ia-aviso { display: flex; gap: 12px; align-items: center; }
.ia-aviso-emoji { font-size: 1.6rem; }
.ia-bloco { display: flex; flex-direction: column; }
.ia-thread { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; padding: 4px; }
.ia-boasvindas { text-align: center; color: var(--texto-suave); padding: 24px 12px; }
.ia-boasvindas-emoji { font-size: 2rem; display: block; margin-bottom: 8px; }
.ia-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.ia-eu { align-self: flex-end; flex-direction: row-reverse; }
.ia-aeth { align-self: flex-start; }
.ia-msg-av { font-size: 1.3rem; flex: 0 0 auto; }
.ia-msg-balao { padding: 10px 14px; border-radius: 16px; line-height: 1.4; font-size: .96rem; }
.ia-eu .ia-msg-balao { background: var(--primaria); color: #fff; border-bottom-right-radius: 4px; }
.ia-aeth .ia-msg-balao { background: rgba(127,127,160,.14); color: var(--texto); border-bottom-left-radius: 4px; }
.ia-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.ia-sug { background: rgba(127,123,255,.12); border: 1px solid var(--borda); color: var(--texto); border-radius: 999px;
    padding: 6px 12px; font-size: .82rem; cursor: pointer; }
.ia-sug:hover { border-color: var(--primaria); background: rgba(127,123,255,.20); }
.ia-form { display: flex; gap: 8px; align-items: flex-end; }
.ia-input { flex: 1; resize: none; min-height: 44px; max-height: 160px; border-radius: 14px; padding: 11px 14px; }
.ia-mic, .ia-enviar { flex: 0 0 auto; height: 44px; }
.ia-mic { width: 44px; border-radius: 50%; border: 1px solid var(--borda); background: var(--superficie); cursor: pointer; font-size: 1.1rem; }
.ia-mic.ouvindo { background: rgba(220,39,67,.18); border-color: #dc2743; animation: ia-pulso 1s infinite; }
@keyframes ia-pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ia-enviar { width: 48px; border-radius: 14px; font-size: 1.1rem; }
.ia-privacidade { text-align: center; margin-top: 8px; opacity: .8; }

/* ===== Wrapped (retrospectiva compartilhável) ===== */
.wr-abas { display: flex; gap: 6px; justify-content: center; margin: 6px 0 16px; flex-wrap: wrap; }
.wr-aba { padding: 8px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--texto);
    background: rgba(127,127,160,.12); border: 1px solid var(--borda); }
.wr-aba:hover { border-color: var(--primaria); text-decoration: none; }
.wr-aba.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.wr-bloco { text-align: center; }
.wr-cartao { max-width: 380px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.wr-cartao svg { display: block; width: 100%; height: auto; }
.wr-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 4px; }
.wr-link { word-break: break-all; opacity: .8; }
/* Agenda de atendimento */
.atd-lista { display: flex; flex-direction: column; gap: 10px; }
.atd-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--borda);
    border-left: 4px solid #12a3a3; border-radius: 12px; background: var(--superficie); }
.atd-item.atd-concluido { border-left-color: #1a9d63; opacity: .82; }
.atd-item.atd-cancelado { border-left-color: #9aa2b4; opacity: .7; }
.atd-quando { flex: 0 0 auto; text-align: center; min-width: 60px; display: flex; flex-direction: column; }
.atd-hora { font-weight: 800; font-size: 1.1rem; color: var(--primaria); }
.atd-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.atd-obs { font-style: italic; }
.atd-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.agenda-timeline { display: flex; flex-direction: column; gap: 10px; }
.agenda-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px;
    border: 1px solid #e6e9f2; border-radius: 12px; border-left: 4px solid #14b8c4; background: #fff; }
.agenda-item.agenda-remedio    { border-left-color: #e0398b; }
.agenda-item.agenda-refeicao   { border-left-color: #f0ad4e; }
.agenda-item.agenda-tarefa     { border-left-color: #1a9d63; }
.agenda-item.agenda-compromisso{ border-left-color: #2f5bea; }
.agenda-hora { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 52px; color: #334; }
.agenda-corpo { flex: 1; }
.agenda-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agenda-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ===========================================================================
   Perfil público e ranking (páginas compartilháveis, fundo escuro)
   =========================================================================== */
.perfil-wrap, .ranking-wrap { max-width: 460px; margin: 0 auto; padding: 26px 16px 40px; }
.perfil-cartao { background: #fff; border-radius: 22px; padding: 26px 22px; text-align: center;
    box-shadow: 0 18px 50px rgba(16, 11, 44, .45); }
.perfil-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; color: #fff;
    font-size: 2.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.perfil-nome { margin: 0; font-size: 1.5rem; }
.perfil-handle { margin: 2px 0 0; color: #7c7bff; font-weight: 600; }
.perfil-bio { margin: 10px 0 0; color: #555f70; }
.perfil-local { margin: 8px 0 0; color: #6b7280; font-size: .92rem; }
html[data-tema="escuro"] .perfil-local { color: #aab3c5; }
.perfil-redes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 0; }
.perfil-rede { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; background: rgba(127,123,255,.12); border: 1px solid var(--borda); font-size: 1.2rem; text-decoration: none; transition: .15s; }
.perfil-rede:hover { transform: translateY(-2px); border-color: var(--primaria); background: rgba(127,123,255,.22); text-decoration: none; }
/* Formulário: localização + redes */
.form-grupo-local { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.form-grupo-local legend { font-weight: 700; padding: 0 6px; }
.form-linha-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-redes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 6px; }
.form-rede-campo span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 2px; color: var(--texto-suave); }
@media (max-width: 640px) { .form-linha-3, .form-redes { grid-template-columns: 1fr; } }
.perfil-pontos { margin: 18px 0; }
.perfil-pontos strong { display: block; font-size: 2.4rem; color: #2f2a6b; line-height: 1; }
.perfil-pontos span { color: #8b96c9; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .78rem; }
.perfil-rank { display: inline-block; margin-top: 8px; background: #eef0ff; color: #4b3fd6;
    padding: 4px 12px; border-radius: 20px; font-size: .85rem; }
.perfil-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 18px; }
.perfil-badge { background: #f4f6fc; border: 1px solid #e4e8f4; border-radius: 20px; padding: 5px 12px; font-size: .82rem; }
.perfil-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; border-top: 1px solid #eef1f6; padding-top: 16px; }
.perfil-stats div { display: flex; flex-direction: column; gap: 2px; }
.perfil-stats strong { font-size: 1.1rem; }
.perfil-stats span { font-size: .66rem; color: #8b96c9; }
.perfil-acoes { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }

.ranking-topo { text-align: center; color: #f4f7ff; margin-bottom: 18px; position: relative; }
.ranking-topo h1 { margin: 0 0 4px; }
.ranking-topo p { color: #b9c2ee; margin: 0; }
.ranking-voltar { display: inline-block; margin-bottom: 10px; color: #cdd6ff; text-decoration: none; font-weight: 600; font-size: .9rem;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 6px 14px; }
.ranking-voltar:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.ranking-abas { display: flex; gap: 6px; justify-content: center; margin: 0 auto 18px; flex-wrap: wrap; }
.ranking-aba { padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none;
    color: #cdd6ff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.ranking-aba:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.ranking-aba.ativo { background: #7c7bff; color: #fff; border-color: #7c7bff; }
.ranking-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ranking-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 10px 14px; }
.ranking-item.eu { outline: 3px solid #8ef9ff; }
.ranking-pos { font-size: 1.2rem; font-weight: 800; min-width: 34px; text-align: center; }
.ranking-avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ranking-nome { flex: 1; text-decoration: none; color: #1f2733; display: flex; flex-direction: column; line-height: 1.15; }
.ranking-nome .menor { color: #8b96c9; }
.ranking-pontos { font-weight: 800; color: #2f2a6b; white-space: nowrap; }
.ranking-pontos em { font-style: normal; font-weight: 500; color: #8b96c9; font-size: .78rem; }
.ranking-vazio { background: #fff; border-radius: 18px; padding: 30px 20px; text-align: center; }
.ranking-vazio h1 { font-size: 3rem; margin: 0 0 10px; }

/* ----- Galeria de medalhas (conquistas desbloqueáveis) ----- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
    padding: 18px 12px; text-align: center; display: flex; flex-direction: column; align-items: center;
    gap: 6px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.badge-emoji { font-size: 2.2rem; line-height: 1; }
.badge-card.trancada { opacity: .62; }
.badge-card.trancada .badge-emoji { filter: grayscale(1); }
.badge-nome { font-size: .92rem; }
.badge-desc { min-height: 2.2em; }
.badge-progresso { width: 100%; height: 6px; background: var(--borda); border-radius: 4px; overflow: hidden; }
.badge-progresso-barra { height: 100%; background: var(--primaria); border-radius: 4px; }
/* Animação de desbloqueio: pop + brilho varrendo o cartão */
.badge-nova { animation: badgePop .55s cubic-bezier(.2, 1.6, .4, 1) both; border-color: var(--primaria); }
.badge-nova::after { content: ''; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(142, 249, 255, .55), transparent);
    animation: badgeBrilho 1.4s ease .3s 2; }
.badge-nova .badge-emoji { animation: badgeGira .8s ease .15s both; }
@keyframes badgePop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes badgeBrilho { to { transform: translateX(220%) skewX(-18deg); } }
@keyframes badgeGira { 0% { transform: rotate(-18deg) scale(.5); } 60% { transform: rotate(8deg) scale(1.15); } 100% { transform: rotate(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .badge-nova, .badge-nova::after, .badge-nova .badge-emoji { animation: none; }
}

/* Ranking de amigos (dentro do app) */
.amigos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.amigos-item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #eef1f6; }
.amigos-item:last-child { border-bottom: 0; }
.amigos-item.eu { background: #f3f6ff; border-radius: 12px; }
.amigos-nome { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.amigos-nome a { text-decoration: none; color: #1f2733; }
.amigos-nome .menor { color: #8b96c9; }

/* ----- Diário aconchegante ----- */
.diario-aconchego {
    background: linear-gradient(135deg, #fff6d6, #fffdf3); border: 1px solid #f0e2a8;
    border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; color: #6b5d1e;
    line-height: 1.6; box-shadow: var(--sombra);
}
.diario-aconchego a { color: #b8860b; font-weight: 700; }
.caderno-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.caderno-data { display: flex; align-items: center; gap: 8px; }
.caderno-data span { color: var(--texto-suave); font-size: .88rem; }
.caderno-data input { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }

.caderno { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #d9b98a;
    padding: 10px; border-radius: 14px; box-shadow: 0 12px 40px rgba(80,60,20,.22); }
.caderno-pagina {
    background: #fdf6c9;
    background-image: repeating-linear-gradient(#fdf6c9 0, #fdf6c9 31px, #e9dca0 32px);
    border-radius: 6px; padding: 0; position: relative; display: flex; flex-direction: column;
    min-height: 460px; box-shadow: inset 0 0 30px rgba(150,120,40,.12);
}
.caderno-pagina::before { content: ''; position: absolute; top: 0; bottom: 0; left: 42px; width: 2px; background: #e6a6a6; opacity: .6; }
.caderno-cabecalho { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 18px 4px 54px; }
.caderno-dia { font-weight: 700; color: #7a5b1e; font-size: 1.05rem; }
.caderno-data-txt { color: #a98a4a; font-size: .85rem; }
.caderno-texto {
    flex: 1; border: none; background: transparent; resize: none; outline: none;
    padding: 6px 18px 6px 54px; line-height: 32px; font-size: 1.02rem; color: #4a3d12;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive, sans-serif;
}
.caderno-acoes { display: flex; justify-content: space-between; gap: 8px; padding: 8px 18px 14px 54px; }
.btn-voz.gravando { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }

/* ----- Aparência do caderno (T5: personalização de diário/sonhos/caderno) ----- */
.apz-bloco { display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
    padding: 12px 14px; margin-bottom: 14px; }
.apz-titulo { font-weight: 600; color: var(--texto); font-size: .92rem; }
/* Temas prontos — sempre visíveis, nomeados, com o ativo destacado */
.apz-temas { display: flex; gap: 10px; flex-wrap: wrap; }
.apz-tema { display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 0; border: 0; background: none; cursor: pointer; }
.apz-tema-amostra { display: flex; align-items: center; justify-content: center;
    width: 56px; height: 44px; border-radius: 10px; border: 2px solid var(--borda);
    font-weight: 700; font-size: 1rem; line-height: 1; transition: border-color .15s, transform .1s; }
.apz-tema:hover .apz-tema-amostra { transform: translateY(-2px); }
.apz-tema:focus-visible .apz-tema-amostra { outline: 2px solid var(--primaria); outline-offset: 2px; }
.apz-tema-nome { font-size: .74rem; color: var(--texto-suave); font-weight: 600; text-align: center; }
.apz-tema-on .apz-tema-amostra { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria); }
.apz-tema-on .apz-tema-nome { color: var(--primaria); }
/* Personalização livre (secundária) */
.apz-avancado > summary { cursor: pointer; font-weight: 600; font-size: .82rem;
    color: var(--texto-suave); list-style: none; }
.apz-avancado > summary::-webkit-details-marker { display: none; }
.apz-avancado > summary::before { content: '⚙️ '; }
.apz-avancado[open] > summary { margin-bottom: 10px; color: var(--texto); }
.apz-controles { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.apz-campo { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--texto-suave); font-weight: 600; }
.apz-campo input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); cursor: pointer; }
.apz-campo input[type="number"] { width: 72px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.apz-campo select { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; max-width: 160px; }
.apz-nota { margin: 0; }

/* ----- Calendário ----- */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.cal-seletor { display: flex; gap: 8px; }
.cal-seletor select { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cabecalho { text-align: center; font-weight: 700; color: var(--texto-suave); font-size: .8rem; padding: 6px 0; }
.cal-vazio { min-height: 90px; }
.cal-dia { min-height: 90px; border: 1px solid var(--borda); border-radius: 10px; padding: 8px; background: var(--superficie);
    display: flex; flex-direction: column; gap: 4px; color: var(--texto); overflow: hidden; }
.cal-dia:hover { text-decoration: none; border-color: var(--primaria); box-shadow: var(--sombra); }
.cal-dia.tem-texto { background: #fdf6c9; border-color: #e9dca0; }
.cal-dia.hoje { border-color: var(--primaria); border-width: 2px; }
.cal-num { font-weight: 700; }
.cal-snippet { font-size: .74rem; color: #6b5d1e; line-height: 1.3; }
.cal-add { font-size: .74rem; color: var(--texto-suave); opacity: 0; }
.cal-dia:hover .cal-add { opacity: 1; }
/* Eventos compartilhados no calendário */
.cal-dia.tem-evento { border-color: var(--primaria); }
.cal-evento { font-size: .68rem; font-weight: 700; background: rgba(127,123,255,.18); color: var(--primaria);
    border-radius: 6px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evento-amigo { background: rgba(240,160,60,.20); color: #b25e00; }
html[data-tema="escuro"] .cal-evento-amigo { color: #ffcf99; }
/* Chips de compromisso na visão mensal da agenda (por tipo) */
.cal-ag-hora { opacity: .7; font-weight: 600; }
.cal-mais { font-size: .66rem; color: var(--texto-suave); padding: 0 4px; }
.cal-agenda-remedio { background: rgba(90,200,160,.20); color: #0c7a55; }
.cal-agenda-refeicao { background: rgba(240,160,60,.20); color: #b25e00; }
.cal-agenda-compromisso { background: rgba(127,123,255,.18); color: var(--primaria); }
.cal-agenda-tarefa { background: rgba(120,160,220,.20); color: #2f5da8; }
html[data-tema="escuro"] .cal-agenda-remedio { color: #7ff0c2; }
html[data-tema="escuro"] .cal-agenda-refeicao { color: #ffcf99; }
html[data-tema="escuro"] .cal-agenda-tarefa { color: #b9d2ff; }
/* Formulário: marcar amigos */
.ev-marcar { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; margin: 6px 0; }
.ev-marcar-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.ev-todos { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ev-amigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ev-amigo { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 500; }
.ev-av { width: 26px; height: 26px; font-size: .8rem; }
/* Lista de eventos do mês */
.ev-lista { display: flex; flex-direction: column; gap: 8px; }
.ev-item { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.ev-item:last-child { border-bottom: 0; }
.ev-item-data { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.ev-dia { font-size: 1.4rem; font-weight: 800; color: var(--primaria); line-height: 1; }
.ev-item-txt { flex: 1; min-width: 150px; display: flex; flex-direction: column; line-height: 1.3; }
.ev-item-acao { margin-left: auto; }

/* ----- Objetivos ----- */
.incentivo { background: linear-gradient(135deg, #fff1e6, #fff); border: 1px solid #ffd9b8; border-left: 5px solid var(--amarelo);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.incentivo-chip { background: #fff; border: 1px solid var(--borda); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: .85rem; }
.obj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.obj-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); color: var(--texto); }
.obj-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(20,30,60,.12); }
.obj-img { height: 130px; background-size: cover; background-position: center; }
.obj-img-vazia { display: grid; place-items: center; font-size: 2.5rem; background: linear-gradient(135deg, #eef2ff, #f7f0ff); }
.obj-corpo { padding: 14px; }
.obj-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.obj-progresso { height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--borda); }
.obj-progresso-barra { height: 100%; background: linear-gradient(90deg, #8b5cf6, #b388ff); }
.obj-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; }
.obj-img-grande { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }

.obj-anel-wrap { display: flex; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.obj-anel { --pct: 0; width: 130px; height: 130px; border-radius: 50%; flex: 0 0 auto;
    background: conic-gradient(#8b5cf6 calc(var(--pct) * 1%), #eceff5 0);
    display: grid; place-items: center; }
.obj-anel-centro { width: 96px; height: 96px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1px var(--borda); }
.obj-anel-centro strong { font-size: 1.5rem; }
.obj-distancia { display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 700px) {
    .caderno { grid-template-columns: 1fr; }
    .cal-dia, .cal-vazio { min-height: 64px; }
    .cal-snippet { display: none; }
}

/* ----- Cartão de conquista compartilhável -------------------------------- */
.conquista-bg {
    min-height: 100vh; min-height: 100dvh; margin: 0;
    background:
        radial-gradient(900px 420px at 50% -8%, rgba(142,249,255,.16), transparent),
        radial-gradient(1200px 700px at 80% 120%, rgba(91,75,230,.32), transparent),
        linear-gradient(160deg, #241a57, #100b2c 72%);
}
.conquista-wrap { max-width: 460px; margin: 0 auto; padding: 28px 18px 48px; display: flex; flex-direction: column; gap: 20px; }
.conquista-cartao { width: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(8,4,30,.6); }
.conquista-cartao svg { width: 100%; height: auto; display: block; }
.conquista-acoes { display: flex; flex-direction: column; gap: 10px; }
.conquista-cta { text-align: center; color: #cfd6f5; margin-top: 6px; }
.conquista-cta p { margin: 0 0 12px; }
.conquista-credito { margin-top: 16px !important; color: #8b96c9; font-size: .85rem; }
.conquista-credito strong { color: #8ef9ff; }
.btn-zap { background: #25d366; color: #06351b; }
.btn-zap:hover { background: #1fbe5b; text-decoration: none; }
.btn-branco { background: #fff; color: #241a57; }
.btn-branco:hover { background: #eef1ff; text-decoration: none; }

/* ----- Recibo / cobrança pública ----------------------------------------- */
.recibo-wrap { max-width: 460px; margin: 0 auto; padding: 28px 18px 48px; display: flex; flex-direction: column; gap: 22px; }
.recibo { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 20px 60px rgba(8,4,30,.5); }
.recibo-topo { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.recibo-topo img { border-radius: 8px; }
.recibo-topo div { display: flex; flex-direction: column; line-height: 1.2; }
.recibo-topo strong { font-size: 1.02rem; }
.recibo-topo span { color: var(--texto-suave); font-size: .82rem; }
.recibo-topo .tag { margin-left: auto; }
.recibo-para { margin: 14px 0 6px; color: var(--texto-suave); }
.recibo-saldo { text-align: center; background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); color: #fff; border-radius: 14px; padding: 18px; margin: 8px 0 16px; }
.recibo-saldo.ok { background: linear-gradient(135deg, #1a9d63, #148052); }
.recibo-saldo span { display: block; font-size: .82rem; opacity: .9; }
.recibo-saldo strong { display: block; font-size: 2rem; margin: 2px 0; }
.recibo-saldo em { font-style: normal; font-size: .82rem; opacity: .9; }
.recibo-linhas { list-style: none; margin: 0; padding: 0; }
.recibo-linhas li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--borda); font-size: .92rem; }
.recibo-linhas li span { color: var(--texto-suave); }
.recibo-total { border-bottom: none !important; border-top: 2px solid var(--borda); margin-top: 4px; font-weight: 700; font-size: 1.05rem !important; }
.recibo-atualizado { color: var(--texto-suave); font-size: .78rem; text-align: center; margin: 14px 0 0; }

/* ----- Sequências (streaks) ---------------------------------------------- */
.streak-banner {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(120deg, #fff3e0, #ffe4c2);
    border: 1px solid #ffd8a8; border-radius: var(--raio);
    padding: 12px 16px; margin-bottom: 18px;
}
.streak-fogo { font-size: 1.8rem; line-height: 1; }
.streak-txt { flex: 1; min-width: 180px; color: #7a4a12; }
.streak-txt strong { color: #b45309; }
.streak-banner .btn { margin-left: auto; }
.streak-pill {
    display: inline-block; vertical-align: middle; margin-left: 8px;
    padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700;
    background: linear-gradient(120deg, #ff8a3d, #ff5e3a); color: #fff;
}
a.streak-pill { color: #fff; text-decoration: none; }

/* ----- Seletor de idioma ------------------------------------------------- */
.idioma-sel { display: inline-flex; gap: 2px; align-items: center; }
.idioma-op {
    font-size: .8rem; font-weight: 700; letter-spacing: .3px; line-height: 1;
    padding: 4px 6px; border-radius: 7px; color: var(--texto-suave);
    text-decoration: none; opacity: .7; transition: .15s;
}
.idioma-op:hover { opacity: 1; color: var(--texto); background: rgba(127,127,160,.12); text-decoration: none; }
.idioma-op.ativo { opacity: 1; color: var(--primaria); background: rgba(127,123,255,.18); }
/* Bandeira por padrão; ao passar o mouse (ou foco) mostra a sigla. */
.idioma-op .idioma-bandeira { display: inline-flex; align-items: center; }
.idioma-op .idioma-sigla { display: none; }
.bandeira { display: block; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

/* ===== Seletor de idioma como menu único (<details>) ===== */
.idioma-menu { position: relative; }
.idioma-atual {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px;
    list-style: none; color: var(--texto-suave); font-size: .8rem; font-weight: 700;
    letter-spacing: .3px; transition: .15s;
}
.idioma-atual::-webkit-details-marker, .idioma-atual::marker { display: none; content: ""; }
.idioma-atual:hover { color: var(--texto); border-color: var(--primaria); }
.idioma-menu[open] .idioma-atual { color: var(--texto); border-color: var(--primaria); }
.idioma-menu[open] .idioma-atual .ds-ico:last-child { transform: rotate(180deg); }
.idioma-atual .ds-ico:last-child { transition: transform .18s ease; opacity: .7; }
.idioma-lista {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: var(--sombra-lg, 0 10px 30px rgba(0,0,0,.25)); padding: 6px; min-width: 190px;
    display: flex; flex-direction: column; gap: 2px;
}
.idioma-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    color: var(--texto); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.idioma-item:hover { background: rgba(127,127,160,.12); text-decoration: none; }
.idioma-item.ativo { color: var(--primaria); font-weight: 600; }
.idioma-item .idioma-nome { flex: 1; }
.idioma-item .idioma-check { color: var(--primaria); display: inline-flex; }

/* ===== Stories (foto por 24h, estilo Instagram) ===== */
.stories-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 12px; scrollbar-width: thin; }
.story-anel { flex: 0 0 auto; width: 72px; text-decoration: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.story-anel:hover { text-decoration: none; }
.story-anel-foto { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 3px;
    background: var(--borda); display: flex; align-items: center; justify-content: center; }
.tem-story .story-anel-foto { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.story-add .story-anel-foto { background: var(--borda); }
.story-av { width: 100%; height: 100%; border-radius: 50%; font-size: 1.4rem; border: 2px solid var(--fundo); overflow: hidden; }
.story-add-badge { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primaria); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--fundo); font-size: .95rem; }
.story-anel-nome { font-size: .74rem; color: var(--texto-suave); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-anel.aniversario .story-anel-foto { background: linear-gradient(45deg, #ffb347, #ffcc33, #ff6b6b, #ff4d94); }
/* Story já visto: anel apagado/cinza (ganha do gradiente colorido e do
   aniversário). A reordenação real acontece no próximo load do Início. */
.story-anel.tem-story.story-visto .story-anel-foto { background: var(--borda); opacity: .55; }
.story-anel.story-visto .story-anel-nome { opacity: .7; }
.story-bolo { position: absolute; left: -3px; top: -3px; font-size: 1rem; line-height: 1; background: var(--fundo); border-radius: 50%; padding: 1px; }

/* Publicar: recorte retrato */
.story-escolher { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.story-crop { margin: 12px 0; text-align: center; }
.story-crop-palco { width: 240px; max-width: 100%; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 16px; overflow: hidden;
    border: 2px solid var(--borda); box-shadow: var(--sombra); touch-action: none; background: rgba(127,127,160,.10); }
.story-crop-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.story-crop-canvas:active { cursor: grabbing; }
.story-crop-zoom { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.story-crop-zoom input[type=range] { flex: 1; max-width: 240px; }

/* Visualizador */
.story-viewer { max-width: 430px; margin: 0 auto; background: #0c0d16; border-radius: 16px; padding: 12px; color: #fff; box-shadow: var(--sombra); }
.story-viewer-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.story-viewer-quem { display: flex; flex-direction: column; line-height: 1.2; }
.story-viewer-quem a, .story-viewer-quem strong { color: #fff; text-decoration: none; }
.story-viewer-quem .menor { color: #aab3c5; }
.story-fechar { margin-left: auto; color: #fff; font-size: 1.3rem; text-decoration: none; padding: 4px 8px; }
.story-barras { display: flex; gap: 4px; margin-bottom: 8px; }
.story-barra { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); }
.story-barra.cheia { background: #fff; }
.story-palco { position: relative; border-radius: 12px; overflow: hidden; background: #000; display: flex; justify-content: center; }
.story-img { width: 100%; max-height: 74vh; object-fit: contain; display: block; }
.story-nav { position: absolute; top: 0; bottom: 0; width: 34%; display: flex; align-items: center; color: rgba(255,255,255,.7);
    font-size: 2rem; text-decoration: none; }
.story-nav-esq { left: 0; justify-content: flex-start; padding-left: 8px; }
.story-nav-dir { right: 0; justify-content: flex-end; padding-right: 8px; }
.story-nav:hover { color: #fff; }
.story-viewer-acoes { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.story-curtir { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 999px;
    padding: 8px 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; }
.story-curtir.curtido { background: rgba(220,39,67,.22); border-color: #dc2743; }
.story-viewer-acoes .btn { margin-left: auto; }
.idioma-op:hover .idioma-bandeira, .idioma-op:focus-visible .idioma-bandeira { display: none; }
.idioma-op:hover .idioma-sigla, .idioma-op:focus-visible .idioma-sigla { display: inline; }
.lp-topo-acoes .idioma-sel { margin-right: 4px; }
.auth-idioma { text-align: center; margin: -8px 0 16px; }

/* ----- Humor do dia (diário) --------------------------------------------- */
.humor-sel { display: flex; gap: 6px; margin: 4px 0 10px; }
.humor-op { cursor: pointer; }
.humor-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.humor-op span {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    font-size: 1.3rem; filter: grayscale(1) opacity(.5); transition: .15s; border: 2px solid transparent;
}
.humor-op:hover span { filter: grayscale(0) opacity(1); }
.humor-op input:checked + span { filter: grayscale(0) opacity(1); background: #fff7e0; border-color: #eab308; }
.humor-media { font-weight: 700; color: #b45309; }

/* ----- Meta do dia (motorista) ------------------------------------------- */
/* Cronômetro de corrida (motorista) */
.cronometro { border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 18px; border: 1px solid var(--borda); }
.cron-parado { background: var(--superficie); }
.cron-ativo { background: linear-gradient(135deg, rgba(26,157,99,.18), rgba(0,200,255,.08)); border-color: rgba(26,157,99,.45); }
.cron-iniciar-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cron-iniciar-topo > div { display: flex; flex-direction: column; }
.cron-emoji { font-size: 1.8rem; line-height: 1; }
.cron-iniciar-campos { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.campo-min { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--texto-suave); flex: 1 1 120px; }
.campo-min input, .campo-min select { min-width: 0; }
.cron-play, .cron-stop { white-space: nowrap; }
.cron-visor { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.cron-relogio { font-variant-numeric: tabular-nums; font-size: 2.4rem; font-weight: 800; letter-spacing: 1px; font-feature-settings: "tnum"; }
.cron-meta-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cron-pulse { animation: cron-pisca 1.4s ease-in-out infinite; }
@keyframes cron-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cron-fin-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.cron-fin-acoes { display: flex; gap: 10px; }
.cron-apps { border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; margin: 4px 0 12px; }
.cron-apps-ops { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cron-app-op { display: flex; align-items: center; gap: 6px; }
.cron-apps-fat { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cron-app-linha { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 12px; background: rgba(0,0,0,.04); }
html[data-tema="escuro"] .cron-app-linha { background: rgba(255,255,255,.03); }
.cron-app-nome { font-weight: 700; flex: 0 0 90px; align-self: center; }
.cron-app-linha .campo-min { flex: 1 1 100px; }
.cron-cancelar { margin-top: 8px; text-align: right; }
@media (max-width: 620px) { .cron-fin-campos { grid-template-columns: repeat(2, 1fr); } .cron-relogio { font-size: 2rem; } }

.meta-dia {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 18px;
}
.meta-dia.meta-ok { border-color: var(--verde); background: linear-gradient(120deg, #eafaf1, #fff); }
.meta-dia-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.meta-barra { height: 12px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.meta-barra-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primaria), var(--verde)); transition: width .3s; }
.meta-dia-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.meta-form { display: flex; gap: 6px; align-items: center; }
.meta-form input { width: 110px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.meta-form-vazia { flex-direction: column; align-items: stretch; gap: 8px; }
.meta-form-vazia label { display: flex; flex-direction: column; font-weight: 700; }
.meta-form-linha { display: flex; gap: 8px; }
.meta-form-linha input { flex: 1; }

/* ----- Cronômetro de descanso (treino) ----------------------------------- */
.cronometro { text-align: center; }
.crono-visor {
    font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums;
    letter-spacing: 2px; color: var(--primaria); margin: 4px 0 12px;
}
.crono-presets, .crono-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.crono-acoes { margin-top: 8px; }
.crono-fim .crono-visor { animation: cronoPulse .4s ease 3; color: var(--verde); }
@keyframes cronoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ===== Estoque avançado: categorias, variações e leitor universal ===== */
.filtro-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtro-cat { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); font-size: .88rem; color: var(--texto); text-decoration: none; transition: background .15s, border-color .15s; }
.filtro-cat:hover { border-color: var(--primaria); text-decoration: none; }
.filtro-cat.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.campo-scan { display: flex; gap: 6px; align-items: stretch; }
.campo-scan input { flex: 1 1 auto; min-width: 0; }
.campo-scan .btn { flex: 0 0 auto; }
.venda-scan { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.var-form { margin-top: 10px; padding: 10px; border: 1px dashed var(--borda); border-radius: 12px; }
.var-edit > summary, .var-nova > summary { cursor: pointer; }
.var-nova { margin-top: 12px; }
.tabela-compacta td, .tabela-compacta th { padding: 6px 8px; }

/* Overlay do leitor (câmera + mira) */
.scan-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.86); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.scan-overlay.aberto { display: flex; }
.scan-caixa { position: relative; max-width: 94vw; }
.scan-video { width: min(440px, 94vw); max-height: 78vh; border-radius: 16px; display: block; background: #000; }
.scan-mira { position: absolute; top: 50%; left: 50%; width: 70%; height: 34%; transform: translate(-50%, -60%); border: 3px solid #8ef9ff; border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.25); pointer-events: none; }
.scan-msg { color: #fff; text-align: center; margin: 10px 0 0; min-height: 1.2em; }
.scan-fechar { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.5); color: #fff; border-color: rgba(255,255,255,.3); }

/* ===== Mensagens diretas entre amigos (chat) ===== */
.msg-linha { text-decoration: none; color: inherit; }
.msg-previa { display: block; opacity: .85; }
.msg-voce { opacity: .7; }
.msg-amigos-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); text-decoration: none; font-size: .9rem; }
.msg-chip:hover { border-color: var(--primaria); text-decoration: none; }
.ranking-avatar-sm { width: 26px; height: 26px; font-size: .8rem; }
.msg-cab { display: flex; align-items: center; gap: 10px; }
.msg-titulo { margin: 0; font-size: 1.3rem; }
.msg-thread-bloco { display: flex; flex-direction: column; }
.msg-thread { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 6px 2px; margin-bottom: 12px; }
.msg-vazio { text-align: center; padding: 24px 0; }
.msg-bolha { max-width: 78%; padding: 8px 12px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.msg-minha { align-self: flex-end; background: var(--primaria); color: #fff; border-bottom-right-radius: 4px; }
.msg-dele { align-self: flex-start; background: var(--superficie-2, rgba(127,127,127,.14)); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.msg-hora { font-size: .7rem; opacity: .7; align-self: flex-end; }
.msg-form { display: flex; gap: 8px; }
.msg-form input[type=text] { flex: 1 1 auto; min-width: 0; }

/* ===== Calendário tingido pelo humor do diário ===== */
.cal-dia.humor-1 { background: linear-gradient(180deg, rgba(214,69,80,.22), transparent 70%); border-color: rgba(214,69,80,.5); }
.cal-dia.humor-2 { background: linear-gradient(180deg, rgba(240,150,70,.20), transparent 70%); border-color: rgba(240,150,70,.5); }
.cal-dia.humor-3 { background: linear-gradient(180deg, rgba(240,210,90,.18), transparent 70%); border-color: rgba(240,210,90,.45); }
.cal-dia.humor-4 { background: linear-gradient(180deg, rgba(120,200,120,.20), transparent 70%); border-color: rgba(120,200,120,.5); }
.cal-dia.humor-5 { background: linear-gradient(180deg, rgba(46,190,110,.26), transparent 70%); border-color: rgba(46,190,110,.6); }
.cal-humor { font-size: .95rem; }

/* ===== Diário dos Sonhos (tema noturno) ===== */
.sonho-aconchego { background: linear-gradient(135deg, rgba(80,60,160,.28), rgba(30,30,80,.20)); border-color: rgba(124,92,255,.4); }
.caderno-sonho .caderno-pagina { background: linear-gradient(180deg, rgba(40,34,80,.30), rgba(20,18,50,.14)); }

/* ===== Agenda: duração do compromisso ===== */
.agenda-dur { display: block; font-size: .72rem; opacity: .8; margin-top: 2px; white-space: nowrap; }

/* ===== Painel Lembretes (veicular + rotina) ===== */
.lem-alertas .lem-alerta { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; margin-bottom: 6px; border: 1px solid var(--borda); }
.lem-alerta.lem-vencida { background: rgba(214,69,80,.14); border-color: rgba(214,69,80,.5); }
.lem-alerta.lem-chegando { background: rgba(240,150,70,.12); border-color: rgba(240,150,70,.45); }
.lem-alerta-emoji { font-size: 1.2rem; }
.lem-alerta > div { display: flex; flex-direction: column; }
.lem-veiculo { border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--superficie); }
.lem-veic-vencida { border-color: rgba(214,69,80,.5); }
.lem-veic-chegando { border-color: rgba(240,150,70,.45); }
.lem-veic-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lem-veic-topo > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lem-veic-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lem-km-form, .lem-trocar { display: flex; gap: 6px; align-items: center; }
.lem-km-form input, .lem-trocar input { width: 110px; }
.lem-catalogo { display: flex; flex-wrap: wrap; gap: 8px; }
.lem-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); text-decoration: none; font-size: .92rem; transition: border-color .15s, background .15s; }
.lem-chip:hover { border-color: var(--primaria); background: rgba(124,92,255,.10); text-decoration: none; }
.lem-chip-emoji { font-size: 1.15rem; }

/* ===== Códigos (verificação de e-mail / 2FA) ===== */
.codigo-input { letter-spacing: 8px; text-align: center; font-size: 1.5rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.pref-2fa-passos { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.pref-2fa-chave { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.pref-2fa-chave code { background: rgba(127,127,127,.16); padding: 5px 10px; border-radius: 8px; font-size: 1.05rem; letter-spacing: 2px; user-select: all; }

/* ===== Avatar real (foto de perfil redonda) ===== */
.avatar-foto { overflow: hidden; padding: 0 !important; }
.avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-mini { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .7rem; vertical-align: middle; overflow: hidden; }
.avatar-grande { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 2.4rem; box-shadow: var(--sombra); flex: 0 0 auto; overflow: hidden; }
.avatar-cartao .avatar-atual { display: flex; align-items: center; gap: 14px; }
.usuario-nome { display: inline-flex; align-items: center; gap: 6px; }
/* Enquadramento (crop) do avatar antes de salvar */
.avatar-escolher { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; cursor: pointer; }
.avatar-crop { margin: 12px 0; }
.avatar-crop-palco { width: 240px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%;
    overflow: hidden; border: 2px solid var(--borda); box-shadow: var(--sombra); touch-action: none; background: rgba(127,127,160,.10); }
.avatar-crop-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-zoom { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.avatar-crop-zoom input[type=range] { flex: 1; max-width: 240px; }
/* ===== Caderno livre (páginas + marcadores) ===== */
.cad-marcadores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 14px; }
.cad-marc-rot { margin-right: 2px; }
.cad-marc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-decoration: none; font-size: .82rem; font-weight: 600; }
.cad-marc-chip:hover { border-color: var(--primaria); text-decoration: none; }
.cad-marc-chip.ativo { border-color: var(--primaria); background: rgba(127,123,255,.16); }
.cad-marc-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--marc, #7c7bff); flex: 0 0 auto; }
.cad-marc-num { font-size: .72rem; opacity: .7; }
.cad-lista { display: flex; flex-direction: column; gap: 8px; }
.cad-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borda);
    border-left: 4px solid var(--marc, #7c7bff); border-radius: 10px; background: var(--superficie); color: var(--texto); text-decoration: none; }
.cad-item:hover { border-color: var(--primaria); box-shadow: var(--sombra); text-decoration: none; }
.cad-item-num { flex: 0 0 auto; min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(127,123,255,.14); color: var(--primaria); font-weight: 800; font-size: .82rem; }
.cad-item-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cad-item-titulo { font-size: 1rem; }
.cad-item-marc { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--texto-suave); }
.cad-item-trecho { font-size: .85rem; color: var(--texto-suave); line-height: 1.35; }
.cad-item-data { opacity: .7; }
.cad-num-pill { font-size: .7rem; font-weight: 700; background: rgba(127,123,255,.16); color: var(--primaria); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.cad-texto { min-height: 320px; line-height: 1.6; }
.cad-cores-campo { display: flex; flex-direction: column; gap: 4px; }
.cad-cores { display: flex; gap: 8px; flex-wrap: wrap; }
.cad-cor-op { cursor: pointer; }
.cad-cor-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.cad-cor-bolha { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: var(--marc, #7c7bff);
    border: 2px solid transparent; box-shadow: 0 0 0 1px var(--borda); }
.cad-cor-op input:checked + .cad-cor-bolha { border-color: var(--texto); box-shadow: 0 0 0 2px var(--marc, #7c7bff); }

/* ---------------------------------------------------------------------------
   Missões de onboarding (quests) + programa de indicação (#3)
   --------------------------------------------------------------------------- */
.mi-barra { display: block; height: 10px; border-radius: 999px; background: rgba(124,123,255,0.18);
    overflow: hidden; margin: 8px 0; }
.mi-barra-preenche { display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #7c7bff, #8ef9ff); transition: width .4s ease; }
.mi-completo { color: #38e08a; font-weight: 700; margin: 6px 0; }
.mi-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.mi-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    background: var(--cartao, rgba(255,255,255,0.03)); border: 1px solid var(--borda); }
.mi-item.mi-feito { opacity: .72; }
.mi-check { font-size: 1.5rem; flex: 0 0 auto; }
.mi-corpo { flex: 1 1 auto; display: flex; flex-direction: column; }
.mi-corpo strong { line-height: 1.2; }
.mi-ok-tag { color: #38e08a; font-size: .85rem; font-weight: 700; }
.mi-indica-numeros { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.mi-num { flex: 1 1 90px; text-align: center; padding: 12px 8px; border-radius: 14px;
    background: rgba(124,123,255,0.10); border: 1px solid var(--borda); }
.mi-num strong { display: block; font-size: 1.7rem; color: #8ef9ff; line-height: 1; }
.mi-link-rot { display: block; font-size: .85rem; opacity: .8; margin-bottom: 6px; }
.mi-link-box { display: flex; gap: 8px; align-items: center; }
.mi-link-input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--borda); background: var(--fundo-campo, rgba(0,0,0,0.2)); color: var(--texto);
    font-family: monospace; font-size: .9rem; }
.mi-share { margin-top: 10px; }
/* Barra de missões no Início */
.ini-missoes { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
    padding: 14px 16px; border-radius: 16px; margin-bottom: 14px;
    background: linear-gradient(120deg, rgba(124,123,255,0.16), rgba(142,249,255,0.10));
    border: 1px solid rgba(124,123,255,0.35); }
.ini-missoes:hover { border-color: rgba(142,249,255,0.6); }
.ini-missoes-emoji { font-size: 1.8rem; flex: 0 0 auto; }
.ini-missoes-corpo { flex: 1 1 auto; display: flex; flex-direction: column; }
.ini-missoes-seta { font-size: 1.4rem; flex: 0 0 auto; opacity: .7; }
.ini-missoes-premio { margin-top: 4px; font-size: .82rem; font-weight: 600;
    color: var(--acento, #8ef9ff); }

/* Card do resumo do Aeth no Início (item 9 da auditoria) */
.ini-aeth { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: inherit;
    padding: 14px 16px; border-radius: 16px; margin-bottom: 14px;
    background: linear-gradient(120deg, rgba(124,123,255,0.14), rgba(142,249,255,0.07));
    border: 1px solid rgba(124,123,255,0.30); }
.ini-aeth:hover { border-color: rgba(142,249,255,0.55); }
.ini-aeth-emoji { font-size: 1.6rem; flex: 0 0 auto; }
.ini-aeth-corpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ini-aeth-lista { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; }
.ini-aeth-lista li { font-size: .92rem; line-height: 1.35; padding-left: 16px; position: relative; }
.ini-aeth-lista li::before { content: "•"; position: absolute; left: 4px; opacity: .6; }
.ini-aeth-cta { opacity: .8; }

/* Nudge de compartilhar medalha (item 10) */
.ini-badge-share { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 16px; margin-bottom: 14px;
    background: linear-gradient(120deg, rgba(255,210,74,.16), rgba(124,123,255,.10));
    border: 1px solid rgba(255,210,74,.34); }
.ini-badge-share-emoji { font-size: 1.8rem; flex: 0 0 auto; }
.ini-badge-share-txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.ini-badge-share-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Toasts (B5.1): confirmação clara, auto-dismissível, com ação opcional */
.toasts { position: fixed; z-index: 60; right: 16px; bottom: 16px; display: flex;
    flex-direction: column; gap: 10px; max-width: min(92vw, 420px); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra);
    border-left: 4px solid var(--primaria); animation: toast-in .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.toast.saindo { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast-sucesso { border-left-color: var(--verde, #1a9d63); }
.toast-erro { border-left-color: var(--vermelho, #d6455a); }
.toast-msg { flex: 1 1 auto; font-size: .95rem; }
.toast-acao { flex: 0 0 auto; font-weight: 600; text-decoration: none; color: var(--primaria);
    padding: 4px 8px; border-radius: 8px; }
.toast-acao:hover { background: rgba(124,123,255,.12); text-decoration: none; }
.toast-x { flex: 0 0 auto; background: none; border: 0; color: var(--texto-suave); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 4px; }
.toast-x:hover { color: var(--texto); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .toasts { right: 10px; left: 10px; bottom: 74px; max-width: none; } }

/* B1.1 aviso de exemplos + B1.2 primeira ação (reusam o padrão de faixa) */
.ini-exemplos, .ini-primeira { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: 16px; margin-bottom: 14px; border: 1px solid var(--borda); }
.ini-exemplos { background: rgba(71,227,154,.10); border-color: rgba(71,227,154,.34); }
.ini-primeira { background: linear-gradient(120deg, rgba(255,210,74,.16), rgba(124,123,255,.10));
    border-color: rgba(255,210,74,.34); }
.ini-exemplos-emoji, .ini-primeira-emoji { font-size: 1.6rem; flex: 0 0 auto; }
.ini-exemplos-txt, .ini-primeira-txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.ini-primeira-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Banner de primeiro uso (mata a tela vazia — item 7) */
.primeiro-uso { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 20px; border-radius: 16px; margin-bottom: 16px;
    background: linear-gradient(120deg, rgba(124,123,255,0.16), rgba(142,249,255,0.09));
    border: 1px solid rgba(124,123,255,0.34); box-shadow: var(--sombra); }
.primeiro-uso-emoji { font-size: 2.2rem; flex: 0 0 auto; line-height: 1; }
.primeiro-uso-corpo { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; }
.primeiro-uso-corpo strong { font-size: 1.08rem; }
.primeiro-uso-dica { margin: 4px 0 0; font-size: .85rem; opacity: .85; }
.primeiro-uso .btn { flex: 0 0 auto; }

/* Barra de captura por linguagem natural (item 13) — "fale e pronto" */
.captura { display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
    padding: 6px 8px 6px 14px; border-radius: 999px;
    background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); }
.captura:focus-within { border-color: rgba(124,123,255,0.6); }
.captura-emoji { font-size: 1.1rem; flex: 0 0 auto; }
.captura-input { flex: 1 1 auto; border: 0; background: transparent; color: var(--texto);
    font-size: .98rem; padding: 8px 4px; min-width: 0; outline: none; }
.captura-btn { flex: 0 0 auto; border-radius: 999px; padding: 8px 18px; }
@media (max-width: 520px) { .captura-btn { padding: 8px 14px; } }
/* Fase 6.4: rótulo + chips de exemplo (e estado "IA indisponível") */
.captura-bloco { margin-bottom: 16px; }
.captura-bloco .captura { margin-bottom: 8px; }
.captura-rotulo { margin: 0 0 6px; font-size: .82rem; font-weight: 600; color: var(--texto-suave); }
.captura-off { font-weight: 400; color: #a12631; }
html[data-tema="escuro"] .captura-off { color: #ff9aa6; }
.captura-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.captura-chip { border: 1px dashed var(--borda); border-radius: 999px; padding: 4px 12px;
    background: transparent; color: var(--texto-suave); font-size: .8rem; cursor: pointer;
    transition: border-color .12s, color .12s; }
.captura-chip:hover { border-color: var(--primaria); color: var(--texto); }
.captura-bloco.cfg-indisponivel .captura-input,
.captura-bloco.cfg-indisponivel .captura-btn { cursor: not-allowed; }
.auth-ref { text-align: center; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px;
    background: rgba(255,210,74,0.12); border: 1px solid rgba(255,210,74,0.4); font-size: .95rem; }

/* Cota de uso do Aeth (limite de custo FREE vs Plus, #68) */
.ia-cota { padding: 10px 14px; border-radius: 14px; margin-bottom: 12px;
    background: rgba(124,123,255,0.08); border: 1px solid var(--borda); }
.ia-cota-cheia { background: rgba(255,138,61,0.10); border-color: rgba(255,138,61,0.4); }
.ia-cota-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: .88rem; margin-bottom: 6px; }
.ia-cota-upsell { color: #8ef9ff; text-decoration: none; font-weight: 600; }
.ia-cota-upsell:hover { text-decoration: underline; }
.ia-cota-esgotada { color: #ffb27d; margin: 6px 0 0; }

/* ---------------------------------------------------------------------------
   Ligas semanais (#4)
   --------------------------------------------------------------------------- */
.lg-trilha { display: flex; gap: 6px; justify-content: space-between; margin: 4px 0 16px; }
.lg-trilha-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 4px; border-radius: 12px; opacity: .45; text-align: center;
    border: 1px solid transparent; }
.lg-trilha-item .lg-trilha-emoji { font-size: 1.5rem; filter: grayscale(1); }
.lg-trilha-item.passou { opacity: .8; }
.lg-trilha-item.passou .lg-trilha-emoji { filter: none; }
.lg-trilha-item.atual { opacity: 1; background: color-mix(in srgb, var(--cor) 18%, transparent);
    border-color: var(--cor); }
.lg-trilha-item.atual .lg-trilha-emoji { filter: none; }
.lg-placar { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-linha { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
    background: var(--cartao, rgba(255,255,255,0.03)); border: 1px solid var(--borda); }
.lg-linha.eu { border-color: #7c7bff; background: rgba(124,123,255,0.12); }
.lg-linha.promocao .lg-pos { color: #38e08a; }
.lg-linha.rebaixamento .lg-pos { color: #ff8a3d; }
.lg-pos { flex: 0 0 26px; text-align: center; font-weight: 800; opacity: .9; }
.lg-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-xp { flex: 0 0 auto; font-weight: 700; color: #8ef9ff; }
.lg-av { width: 32px; height: 32px; font-size: .9rem; flex: 0 0 auto; }
.lg-divisor { list-style: none; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    opacity: .8; padding: 2px 0; }
.lg-div-promo { color: #38e08a; border-top: 2px dashed rgba(56,224,138,0.5); }
.lg-div-rebaixa { color: #ff8a3d; border-top: 2px dashed rgba(255,138,61,0.5); }

/* ---------------------------------------------------------------------------
   Modo foco / bem-estar digital (#5)
   --------------------------------------------------------------------------- */
.fo-checkin { display: flex; align-items: center; gap: 14px; }
.fo-checkin.fo-feito { background: rgba(56,224,138,0.08); border-color: rgba(56,224,138,0.4); }
.fo-checkin-emoji { font-size: 2rem; flex: 0 0 auto; }
.fo-checkin-txt { flex: 1 1 auto; display: flex; flex-direction: column; }
.fo-numeros { display: flex; gap: 10px; }
.fo-num { flex: 1 1 0; text-align: center; padding: 12px 6px; border-radius: 14px;
    background: rgba(124,123,255,0.10); border: 1px solid var(--borda); }
.fo-num strong { display: block; font-size: 1.5rem; color: #8ef9ff; line-height: 1.1; }
.fo-poupado { margin: 14px 0 10px; padding: 12px 14px; border-radius: 12px; text-align: center;
    background: rgba(255,210,74,0.10); border: 1px solid rgba(255,210,74,0.35); }
.fo-trilha { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.fo-bola { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.08);
    border: 1px solid var(--borda); }
.fo-bola.feito { background: linear-gradient(135deg, #38e08a, #8ef9ff); border-color: transparent; }
.fo-trilha-leg { margin-top: 8px; }
.fo-modo-estado { margin-left: 10px; }
/* Check-in no Início */
.ini-foco { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px;
    margin-bottom: 14px; background: linear-gradient(120deg, rgba(255,210,74,0.12), rgba(142,249,255,0.08));
    border: 1px solid rgba(255,210,74,0.3); }
.ini-foco-emoji { font-size: 1.6rem; flex: 0 0 auto; }
.ini-foco-corpo { flex: 1 1 auto; display: flex; flex-direction: column; }

/* Diário por voz + temas detectados (#7) */
.voz-linha { margin: 8px 0 0; }
.diario-temas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.diario-tema { font-size: .8rem; padding: 2px 8px; border-radius: 999px; color: #8ef9ff;
    background: rgba(142,249,255,0.10); border: 1px solid rgba(142,249,255,0.3); }

/* ---------------------------------------------------------------------------
   Descobrir — pessoas e círculos (#8)
   --------------------------------------------------------------------------- */
.desc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.desc-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 14px 10px; border-radius: 16px; background: var(--cartao, rgba(255,255,255,0.03));
    border: 1px solid var(--borda); }
.desc-card-topo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.desc-av { width: 56px; height: 56px; font-size: 1.4rem; }
.desc-card-nome { font-weight: 700; line-height: 1.1; }
.desc-card-user { opacity: .7; }
.desc-grau { font-size: .72rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(142,249,255,0.1); color: #8ef9ff; border: 1px solid rgba(142,249,255,0.25); }
.desc-grau-3 { background: rgba(56,224,138,0.14); color: #38e08a; border-color: rgba(56,224,138,0.35); }
.desc-card-acao { margin-top: 4px; }
.desc-circulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.desc-circulo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    text-decoration: none; color: inherit; background: var(--cartao, rgba(255,255,255,0.03)); border: 1px solid var(--borda); }
.desc-circulo:hover { border-color: #7c7bff; }
.desc-circulo-emoji { font-size: 1.8rem; flex: 0 0 auto; }
.desc-circulo-corpo { display: flex; flex-direction: column; min-width: 0; }
.desc-circulo-membros { color: #8ef9ff; }

/* ---------------------------------------------------------------------------
   Aethereuum+ (assinatura suave) + presentear (#9)
   --------------------------------------------------------------------------- */
.plus-status { display: flex; align-items: center; gap: 14px; }
.plus-status.plus-on { background: linear-gradient(120deg, rgba(179,136,255,0.14), rgba(142,249,255,0.10));
    border-color: rgba(179,136,255,0.4); }
.plus-status-emoji { font-size: 2.2rem; flex: 0 0 auto; }
.plus-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.plus-lista li { padding: 10px 12px; border-radius: 12px; background: rgba(124,123,255,0.08); border: 1px solid var(--borda); }
.plus-vias { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.plus-via { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    text-decoration: none; color: inherit; background: var(--cartao, rgba(255,255,255,0.03)); border: 1px solid var(--borda); }
.plus-via:hover { border-color: #7c7bff; }
.plus-via-emoji { font-size: 1.6rem; flex: 0 0 auto; }
.plus-em-breve { padding: 10px 14px; border-radius: 12px; background: rgba(255,210,74,0.08);
    border: 1px solid rgba(255,210,74,0.3); text-align: center; }
.plus-gift-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.plus-gift-form label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.plus-gift-form select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borda);
    background: var(--fundo-campo, rgba(0,0,0,0.2)); color: var(--texto); }

/* ---------------------------------------------------------------------------
   Relance (glanceable) — tela widget + faixa no Início (#10)
   --------------------------------------------------------------------------- */
.rel-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.rel-chip { flex: 0 0 auto; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 12px; border-radius: 14px; text-decoration: none; color: inherit;
    background: var(--cartao, rgba(255,255,255,0.04)); border: 1px solid var(--borda); }
.rel-chip-emoji { font-size: 1.3rem; }
.rel-chip-valor { font-weight: 800; color: #8ef9ff; }
.rel-chip-rotulo { font-size: .72rem; opacity: .8; text-align: center; white-space: nowrap; }
.rel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rel-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: 22px 14px; border-radius: 18px; text-decoration: none; color: inherit;
    background: linear-gradient(135deg, rgba(124,123,255,0.12), rgba(142,249,255,0.06));
    border: 1px solid var(--borda); }
.rel-tile:hover { border-color: #7c7bff; }
.rel-tile-emoji { font-size: 2rem; }
.rel-tile-valor { font-size: 1.8rem; font-weight: 800; color: #8ef9ff; line-height: 1.1; }
.rel-tile-rotulo { opacity: .85; }
.rel-dica { text-align: center; margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Saúde — importação de wearables (#6)
   --------------------------------------------------------------------------- */
.hub-saude { border-top-color: #38e08a; }
.sau-numeros { display: flex; gap: 10px; }
.sau-num { flex: 1 1 0; text-align: center; padding: 14px 8px; border-radius: 14px;
    background: rgba(56,224,138,0.08); border: 1px solid var(--borda); }
.sau-num strong { display: block; font-size: 1.5rem; color: #38e08a; line-height: 1.1; }
.sau-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sau-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; flex: 1 1 110px; }
.sau-form input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borda);
    background: var(--fundo-campo, rgba(0,0,0,0.2)); color: var(--texto); }
.sau-import { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sau-formato { margin-top: 8px; opacity: .8; }

/* Diagnóstico do Aeth */
.diag-raw { white-space: pre-wrap; word-break: break-word; font-size: .78rem; line-height: 1.4;
    max-height: 340px; overflow: auto; padding: 12px; border-radius: 10px;
    background: rgba(0,0,0,0.35); border: 1px solid var(--borda); }

/* ---------------------------------------------------------------------------
   Programa de afiliados (#10 do roadmap)
   --------------------------------------------------------------------------- */
.af-numeros { display: flex; flex-wrap: wrap; gap: 10px; }
.af-num { flex: 1 1 90px; text-align: center; padding: 14px 8px; border-radius: 14px;
    background: rgba(124,123,255,0.08); border: 1px solid var(--borda); }
.af-num strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.af-num.af-destaque { background: rgba(56,224,138,0.10); border-color: rgba(56,224,138,0.4); }
.af-num.af-destaque strong { color: #38e08a; }
.af-explica { margin-top: 12px; padding: 10px 14px; border-radius: 12px;
    background: rgba(255,210,74,0.08); border: 1px solid rgba(255,210,74,0.3); }
.af-pix-form, .af-venda-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.af-pix-form label, .af-venda-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; flex: 1 1 160px; }
.af-pix-form input, .af-venda-form input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borda);
    background: var(--fundo-campo, rgba(0,0,0,0.2)); color: var(--texto); }
.af-admin { border: 1px solid rgba(255,138,61,0.35); }
.af-sub { margin: 18px 0 6px; font-size: 1rem; }

/* Assistente Jurídico (painel de IA por jurisdição) */
.hub-juridico { border-top-color: #c9a227; }
.jur-local { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.jur-local label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; flex: 1 1 160px; }
.jur-local input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borda);
    background: var(--fundo-campo, rgba(0,0,0,0.2)); color: var(--texto); }
.jur-atual { margin-top: 10px; color: #c9a227; }
.jur-aviso { margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: .82rem;
    background: rgba(201,162,39,0.10); border: 1px solid rgba(201,162,39,0.4); }

/* "Digitando…" nos chats de IA (Aeth e Jurídico) + trava de reenvio */
.ia-enviando .ia-input, .ia-enviando .ia-enviar { opacity: .6; }
.ia-digitando .ia-msg-balao { display: inline-flex; align-items: center; gap: 8px; }
.ia-typing-txt { font-size: .82rem; opacity: .7; }
.ia-typing { display: inline-flex; align-items: center; gap: 4px; }
.ia-typing > span { width: 7px; height: 7px; border-radius: 50%; background: #8ef9ff;
    display: inline-block; opacity: .35; animation: ia-typing-bounce 1.2s infinite ease-in-out; }
.ia-typing > span:nth-child(2) { animation-delay: .18s; }
.ia-typing > span:nth-child(3) { animation-delay: .36s; }
@keyframes ia-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Painéis de IA (jurídico, religião) + reorganização do rail */
.hub-juridico { border-top-color: #c9a227; }
.hub-religiao { border-top-color: #b388ff; }
.rail-grupo { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    opacity: .55; padding: 4px 12px 2px; }
.rail-personalizar { opacity: .8; }
/* Aprenda Religião: chips de escolha */
.rlg-religioes, .rlg-subs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rlg-subs { margin-top: 12px; }
.rlg-subs-rot { margin-right: 4px; }
.rlg-chip, .rlg-sub-chip { cursor: pointer; padding: 8px 12px; border-radius: 999px; font-size: .9rem;
    background: var(--cartao, rgba(255,255,255,0.04)); border: 1px solid var(--borda); color: var(--texto); }
.rlg-sub-chip { padding: 5px 10px; font-size: .82rem; }
.rlg-chip.ativo, .rlg-sub-chip.ativo { background: rgba(179,136,255,0.18); border-color: #b388ff; color: #fff; }
.rlg-chip-emoji { font-size: 1.05rem; }
.rlg-atual { margin-top: 12px; color: #b388ff; }
.rlg-aviso { margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: .82rem;
    background: rgba(179,136,255,0.10); border: 1px solid rgba(179,136,255,0.35); }

/* Duelos — cartões, placar público e formulário de criação */
.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .form-acoes { grid-column: 1 / -1; } }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.duel-lista { display: grid; gap: 12px; }
.duel-card { display: block; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--texto);
    background: var(--cartao, rgba(255,255,255,0.04)); border: 1px solid var(--borda); transition: transform .12s, border-color .12s; }
.duel-card:hover { transform: translateY(-2px); border-color: #7c7bff; text-decoration: none; }
.duel-card-top { display: flex; align-items: center; gap: 12px; }
.duel-emoji { font-size: 1.8rem; }
.duel-card-info { flex: 1; display: flex; flex-direction: column; }
.duel-card-bot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; opacity: .8; }
.duel-selo { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; }
.duel-selo.on { background: rgba(56,224,138,0.18); color: #38e08a; border: 1px solid rgba(56,224,138,0.4); }
.duel-selo.off { background: rgba(255,255,255,0.06); color: #b9c2ee; border: 1px solid var(--borda); }
.duel-cabecalho { text-align: center; }
.duel-emoji-grande { font-size: 3rem; display: block; }
.duel-status { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.duel-placar { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; gap: 8px; }
.duel-linha { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--borda); }
.duel-linha.eu { background: rgba(124,123,255,0.15); border-color: #7c7bff; }
.duel-pos { font-size: 1.15rem; min-width: 32px; text-align: center; }
.duel-atleta { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: var(--texto); min-width: 0; }
.duel-atleta:hover { text-decoration: none; }
.duel-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.duel-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-valor { text-align: right; white-space: nowrap; }
.duel-valor strong { font-size: 1.15rem; color: #8ef9ff; }
.duel-ja-participa { text-align: center; color: #38e08a; font-weight: 600; margin: 4px 0; }

/* Foco — aversão à perda (streak em risco) e congelamento de sequência */
.fo-risco { display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, rgba(255,138,61,0.16), rgba(224,57,139,0.14));
    border: 1px solid rgba(255,138,61,0.45); }
.fo-risco-emoji { font-size: 2rem; }
.fo-risco-txt { display: flex; flex-direction: column; gap: 2px; }
.fo-freeze-bolas { display: flex; gap: 10px; margin: 4px 0 10px; }
.fo-freeze-bola { font-size: 1.8rem; filter: grayscale(1) opacity(.35); }
.fo-freeze-bola.on { filter: none; }

/* Sino de avisos (pedidos de amizade) no topo */
.sino-avisos { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; font-size: 1.15rem; text-decoration: none;
    background: rgba(127,123,255,.14); border: 1px solid var(--borda); }
.sino-avisos:hover { background: rgba(127,123,255,.24); text-decoration: none; }
.sino-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--vermelho, #d64550); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px var(--superficie); }

/* Preferências → Avisos (liga/desliga e-mail por tipo) */
.aviso-mestre { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px;
    background: rgba(127,123,255,.10); border: 1px solid var(--borda); margin-bottom: 14px; }
.aviso-mestre input { margin-top: 3px; }
.avisos-lista { display: grid; gap: 8px; }
.aviso-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); cursor: pointer; }
.aviso-item input { margin-top: 4px; }
.aviso-emoji { font-size: 1.3rem; }
.aviso-txt { display: flex; flex-direction: column; gap: 1px; }

/* Avisos por canal (e-mail + Telegram, uma coluna de checkbox para cada) */
.avisos-mestres { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.avisos-mestres .aviso-mestre { margin-bottom: 0; }
@media (max-width: 620px) { .avisos-mestres { grid-template-columns: 1fr; } }
.avisos-lista-canais .aviso-item-canais {
    display: grid; grid-template-columns: 1.6rem 1fr 2.2rem 2.2rem; align-items: center; gap: 12px; cursor: default; }
.aviso-cab { display: grid; grid-template-columns: 1.6rem 1fr 2.2rem 2.2rem; align-items: center; gap: 12px;
    padding: 0 12px; }
.aviso-canal-rot { text-align: center; font-size: 1.05rem; opacity: .8; }
.aviso-canal { display: flex; justify-content: center; align-items: center; cursor: pointer; margin: 0; }
.aviso-canal input { margin: 0; width: 18px; height: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Perfil → Conectar Telegram */
.tg-status.tg-ok { color: var(--sucesso, #47e39a); font-weight: 600; }
.tg-passos { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }
.tg-codigo { font-family: var(--mono, monospace); font-size: 1.15rem; letter-spacing: 2px;
    background: rgba(127,123,255,.14); padding: 2px 8px; border-radius: 6px; }

/* Convide Amigos — lista de convidados */
.cv-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cv-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.cv-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.cv-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cv-info a { text-decoration: none; }
.cv-selo { font-size: .74rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cv-selo.on { background: rgba(56,224,138,.18); color: #38e08a; border: 1px solid rgba(56,224,138,.4); }
.cv-selo.off { background: rgba(255,255,255,.06); color: #b9c2ee; border: 1px solid var(--borda); }

/* Mensagens — anexos (imagem/planilha/documento, apagados em 7 dias) */
.msg-anexo { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.msg-anexo-img { max-width: 220px; max-height: 260px; border-radius: 12px; display: block; }
.msg-anexo-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,.06); border: 1px solid var(--borda); text-decoration: none; color: var(--texto); max-width: 260px; }
.msg-anexo-card:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.msg-anexo-emoji { font-size: 1.6rem; }
.msg-anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.msg-anexo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msg-anexo-expira { font-size: .72rem; opacity: .7; }
.msg-anexo-aviso { text-align: center; opacity: .7; margin: 6px 0 0; }
.msg-anexo-btn { cursor: pointer; font-size: 1.3rem; display: inline-flex; align-items: center; padding: 0 6px; }

/* Marketplace de templates */
.tpl-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tpl-chip { padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: .9rem;
    background: var(--cartao, rgba(255,255,255,.04)); border: 1px solid var(--borda); color: var(--texto); }
.tpl-chip.ativo { background: rgba(124,123,255,.18); border-color: #7c7bff; color: #fff; }
.tpl-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tpl-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; text-decoration: none;
    color: var(--texto); background: var(--cartao, rgba(255,255,255,.04)); border: 1px solid var(--borda); transition: transform .12s, border-color .12s; }
.tpl-card:hover { transform: translateY(-2px); border-color: #7c7bff; text-decoration: none; }
.tpl-emoji { font-size: 1.8rem; }
.tpl-card-titulo { line-height: 1.25; }
.tpl-card-desc { opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-card-meta { opacity: .65; margin-top: 4px; }
.tpl-full { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.tpl-full textarea { width: 100%; resize: vertical; }
.tpl-lista-min { display: grid; gap: 6px; }
.tpl-min { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.tpl-min a { text-decoration: none; flex: 1; }
.tpl-ver-cab { display: flex; align-items: center; gap: 10px; justify-content: center; }
.tpl-emoji-grande { font-size: 2.6rem; }
.tpl-selo-tipo { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px;
    border-radius: 999px; background: rgba(124,123,255,.18); border: 1px solid var(--borda); }
.tpl-ver-meta { text-align: center; }
.tpl-conteudo { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04);
    border: 1px solid var(--borda); white-space: pre-wrap; text-align: left; line-height: 1.5; }
/* Sino — página da central de notificações (/sino) */
.sino-lista { list-style: none; margin: 0; padding: 0; }
.sino-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px;
    border-bottom: 1px solid var(--borda); border-radius: 10px; }
.sino-item:last-child { border-bottom: none; }
.sino-nova { background: rgba(179,136,255,0.08); }
.sino-emoji { font-size: 1.25rem; line-height: 1.2; }
.sino-corpo { display: flex; flex-direction: column; gap: 2px; }
.sino-corpo a { color: var(--texto); text-decoration: none; }
.sino-corpo a:hover { text-decoration: underline; }
.sino-quando { opacity: .6; }

/* Aethereuum+ — card da assinatura mensal */
.plus-preco-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; padding: 16px 18px; border-radius: 14px; margin-top: 14px;
    background: rgba(179,136,255,0.10); border: 1px solid rgba(179,136,255,0.4); }
.plus-preco-valor { font-size: 1.6rem; font-weight: 800; }
.plus-preco-mes { font-size: .85rem; opacity: .75; }
.plus-tabela { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .9rem; }
.plus-tabela th, .plus-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; }
.plus-tabela th:nth-child(2), .plus-tabela td:nth-child(2),
.plus-tabela th:nth-child(3), .plus-tabela td:nth-child(3) { text-align: center; }

/* Aeth Coins */
.coin-saldo-bloco { display: flex; align-items: center; gap: 14px; }
.coin-saldo-emoji { font-size: 2.4rem; }
.coin-saldo { font-size: 2rem; display: block; color: #ffd24a; }
.coin-ganhos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.coin-loja { display: grid; gap: 10px; }
.coin-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.coin-item-emoji { font-size: 1.6rem; }
.coin-item-txt { flex: 1; display: flex; flex-direction: column; }
.coin-extrato { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.coin-mov { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.coin-mov-emoji { font-size: 1.3rem; }
.coin-mov-txt { flex: 1; }
.coin-mov-delta { font-weight: 700; }
.coin-mov-delta.mais { color: #38e08a; }
.coin-mov-delta.menos { color: #ff8a8a; }

/* Perfil — visibilidade granular do perfil público */
.perfil-vis-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.perfil-vis-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--borda); cursor: pointer; font-size: .92rem; }

/* Novidades (changelog público) */
.nv-linha { display: grid; gap: 14px; }
.nv-item { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--borda); }
.nv-item-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.nv-emoji { font-size: 1.8rem; }
.nv-titulo { display: block; font-size: 1.1rem; }
.nv-meta { opacity: .65; }
.nv-rot { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; opacity: .85; }
.nv-rot-novo { color: #38e08a; }
.nv-rot-ajuste { color: #eab308; }
.nv-lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.nv-lista li { line-height: 1.45; }

/* ===========================================================================
   Montar treino com IA (Personal do Aeth)
   =========================================================================== */
.tia-cta { display:flex; align-items:center; gap:14px; margin:14px 0; padding:16px 18px;
    border:1px solid var(--borda); border-radius:14px; text-decoration:none; color:inherit;
    background:linear-gradient(120deg, rgba(124,123,255,.16), rgba(78,63,214,.10)); transition:transform .12s, box-shadow .12s; }
.tia-cta:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(75,63,214,.28); }
.tia-cta-ico { font-size:1.9rem; line-height:1; }
.tia-cta-txt { display:flex; flex-direction:column; gap:2px; flex:1; }
.tia-cta-txt strong { font-size:1.05rem; }
.tia-cta-seta { font-size:1.4rem; opacity:.6; }
.tia-chips { display:flex; flex-wrap:wrap; gap:6px; }
.tia-chips .chip, .tia-lim .chip { display:inline-block; padding:3px 10px; border-radius:999px;
    background:rgba(124,123,255,.16); border:1px solid var(--borda); font-size:.85rem; }
.tia-lim .chip-alerta { background:rgba(255,170,60,.16); border-color:rgba(255,170,60,.4); }
.tia-lim { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tia-form textarea { width:100%; }
.tia-acoes { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tia-resultado .tia-fala { font-size:1.05rem; line-height:1.5; margin:0 0 10px;
    padding:12px 14px; border-radius:12px; background:rgba(124,123,255,.10); border:1px solid var(--borda); }
.tia-planos { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); margin:8px 0; }
.tia-plano-card { display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; border:1px solid var(--borda); border-radius:12px; text-decoration:none; color:inherit;
    background:var(--cartao-2, rgba(255,255,255,.02)); transition:transform .12s, border-color .12s; }
.tia-plano-card:hover { transform:translateY(-2px); border-color:rgba(124,123,255,.6); }
.tia-plano-nome { font-weight:600; }
.tia-aviso { margin-top:10px; opacity:.8; }
.tia-esgotado { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* Sessão de treino: registro de carga/reps (sobrecarga progressiva) */
.sessao-registrar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sessao-registrar .reg-carga { width:70px; }
.sessao-registrar .reg-reps { width:64px; }
.sessao-registrar input { padding:7px 9px; border:1px solid var(--borda); border-radius:8px; font:inherit; }
.progressao-hint { display:block; margin-top:2px; opacity:.85; }
.tag-ouro { background:linear-gradient(120deg,#ffd76e,#ff9d2f); color:#3a2a00; border:none; }
.meus-treinos-lista { display:flex; flex-direction:column; gap:8px; }
.meu-treino-linha { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding:10px 12px; border:1px solid var(--borda); border-radius:10px; }
.meu-treino-nome { font-weight:600; }
.meu-treino-acoes { display:flex; gap:6px; align-items:center; }

/* Botão Voltar global no cabeçalho */
.topo-voltar { display:inline-flex; align-items:center; gap:4px; background:transparent; border:1px solid var(--borda);
    color:inherit; border-radius:9px; padding:5px 10px; font:inherit; font-size:.92rem; cursor:pointer;
    line-height:1; transition:background .12s, border-color .12s; }
.topo-voltar:hover { background:rgba(124,123,255,.14); border-color:rgba(124,123,255,.5); }
@media (max-width: 640px) { .topo-voltar-txt { display:none; } .topo-voltar { padding:5px 9px; font-size:1.1rem; } }

/* Treino de hoje (rotação automática A→B→C) */
.treino-hoje { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    margin:14px 0; padding:16px 18px; border:1px solid var(--borda); border-radius:14px;
    background:linear-gradient(120deg, rgba(46,196,120,.14), rgba(124,123,255,.10)); }
.treino-hoje-info { display:flex; flex-direction:column; gap:2px; }
.treino-hoje-eyebrow { font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; opacity:.85; }
.treino-hoje-nome { font-size:1.25rem; }

/* Calendário de atendimentos: cor por status */
.cal-atd-agendado { background:rgba(96,150,255,.20); border-left:3px solid #6096ff; }
.cal-atd-concluido { background:rgba(46,196,120,.18); border-left:3px solid #2ec478; }
.cal-atd-cancelado { background:rgba(150,150,160,.16); border-left:3px solid #9a9aa4; text-decoration:line-through; opacity:.75; }
.cal-atd-agendado .cal-ag-hora, .cal-atd-concluido .cal-ag-hora { font-weight:700; }

/* Personalizar painéis do hub (ocultar/mostrar) */
.hub-pers-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.hub-pers-opt { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--borda);
    border-radius:12px; cursor:pointer; position:relative; transition:border-color .12s, background .12s; }
.hub-pers-opt input { position:absolute; opacity:0; pointer-events:none; }
.hub-pers-opt.ativo { border-color:rgba(124,123,255,.7); background:rgba(124,123,255,.10); }
.hub-pers-emoji { font-size:1.5rem; line-height:1; }
.hub-pers-txt { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.hub-pers-check { opacity:0; color:#8ef9ff; font-weight:800; font-size:1.1rem; }
.hub-pers-opt.ativo .hub-pers-check { opacity:1; }
.hub-pers-opt:not(.ativo) { opacity:.66; }
.hub-pers-nota { margin:0 0 14px; padding:10px 12px; border-radius:12px;
    background:rgba(124,123,255,.08); border:1px solid var(--borda); }

/* Restaurantes — onboarding por tipo de estabelecimento */
.rst-tipos { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin-top:10px; }
.rst-tipos form { margin:0; }
.rst-tipo-op { width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px;
    border-radius:16px; background:var(--superficie); border:1px solid var(--borda); color:var(--texto);
    cursor:pointer; transition:border-color .15s, transform .1s; font-weight:600; }
.rst-tipo-op:hover { border-color:var(--primaria); transform:translateY(-2px); }
.rst-tipo-emoji { font-size:2rem; }
.hub-card-off { opacity:.5; cursor:default; }
.hub-card-destaque { border-color:var(--primaria); background:linear-gradient(135deg, rgba(124,123,255,.12), transparent); }
.rst-itens { display:flex; flex-direction:column; gap:8px; }
.rst-item { display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    padding:12px 14px; border-radius:12px; background:var(--superficie); border:1px solid var(--borda); }
.rst-item-off { opacity:.6; }
.rst-item-corpo { display:flex; flex-direction:column; gap:2px; }
.rst-item-lado { display:flex; flex-direction:column; align-items:flex-end; gap:4px; white-space:nowrap; }
.rst-item-preco { font-weight:700; }
.rst-item-acoes { display:flex; align-items:center; gap:8px; }
/* PDV: grade de itens para lançar + total */
.rst-grade-lancar { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
.rst-lancar-btn { display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left;
    padding:10px 12px; border-radius:12px; background:var(--superficie); border:1px solid var(--borda);
    color:var(--texto); cursor:pointer; font:inherit; transition:border-color .12s, transform .08s; }
.rst-lancar-btn:hover { border-color:var(--primaria); transform:translateY(-1px); }
.rst-lancar-btn span { color:var(--texto-suave); font-size:.9rem; }
.rst-total-linha { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px;
    padding-top:10px; border-top:1px solid var(--borda); font-size:1.15rem; }
.rst-total-linha strong { font-size:1.4rem; }
/* Salão: mapa de mesas */
.rst-salao { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }
.rst-mesa { display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 10px;
    border-radius:14px; border:2px solid var(--borda); background:var(--superficie); color:var(--texto);
    cursor:pointer; font:inherit; transition:transform .08s, border-color .12s; text-align:center; }
.rst-mesa:hover { transform:translateY(-2px); }
.rst-mesa[disabled] { opacity:.5; cursor:not-allowed; }
.rst-mesa-livre { border-style:dashed; }
.rst-mesa-ocupada { border-color:var(--verde); background:rgba(26,157,99,.10); }
.rst-mesa-nome { font-weight:700; font-size:1.05rem; }
.rst-mesa-total { font-weight:700; }
.rst-mesa-tag { font-size:.8rem; color:var(--texto-suave); }
.rst-legenda { margin-top:10px; }
/* KDS — quadro da cozinha (legível a 2 m) */
.kds-board { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.kds-vazio { grid-column:1 / -1; font-size:1.1rem; }
.kds-card { display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:14px;
    background:var(--superficie); border:2px solid var(--borda); }
.kds-card.kds-prep { border-color:var(--primaria); background:rgba(124,123,255,.08); }
.kds-card.kds-atras { border-color:var(--vermelho); background:rgba(224,64,64,.10); animation:kds-pisca 1.2s ease-in-out infinite; }
@keyframes kds-pisca { 50% { border-color:transparent; } }
@media (prefers-reduced-motion: reduce) { .kds-card.kds-atras { animation:none; } }
.kds-card-topo { display:flex; align-items:baseline; gap:8px; }
.kds-qtd { font-weight:800; font-size:1.3rem; }
.kds-nome { font-weight:700; font-size:1.15rem; flex:1; }
.kds-min { font-weight:700; color:var(--texto-suave); font-variant-numeric:tabular-nums; }
.kds-card.kds-atras .kds-min { color:var(--vermelho); }
.kds-obs { background:rgba(240,173,78,.12); border-radius:8px; padding:4px 8px; }
.kds-acoes { display:flex; gap:8px; margin-top:2px; }

/* Canais externos — iFood (M5) */
.rst-ifood-saude { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px; }
.rst-saude-item { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--borda); border-radius:10px; }
.rst-saude-item strong { font-size:1.02rem; }
.rst-ok { color:var(--verde, #2e9e5b); }
.rst-espera { color:var(--laranja, #f0ad4e); }
.rst-ifood-pedido { align-items:center; }
.rst-ifood-acoes { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rst-ifood-tag { padding:2px 8px; border-radius:999px; border:1px solid var(--borda); }
.rst-ifood-recebido { background:rgba(240,173,78,.14); }
.rst-ifood-confirmado { background:rgba(46,158,91,.14); }
.rst-ifood-despachado { background:rgba(124,123,255,.12); }
.rst-ifood-cancelado { background:rgba(224,64,64,.12); text-decoration:line-through; }
.rst-ifood-passos { margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
.hub-abrir-alerta { color:var(--vermelho, #e04040); font-weight:700; }
.check-inline { display:flex; align-items:center; gap:8px; flex-direction:row !important; }
.check-inline input { width:auto; }

/* Dashboard do restaurante (M10) */
.rst-dash-strip { padding:0; }
.rst-dash-mini { display:flex; flex-wrap:wrap; gap:18px; align-items:center; padding:14px 16px; text-decoration:none; color:inherit; }
.rst-dash-mini > span { display:flex; flex-direction:column; gap:2px; }
.rst-dash-mini strong { font-size:1.15rem; }
.rst-dash-abrir { margin-left:auto; color:var(--primaria); font-weight:700; }
.rst-barra-linha { margin-bottom:12px; }
.rst-barra-topo { display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; }
.rst-barra-topo span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rst-barra { height:8px; border-radius:999px; background:var(--borda); overflow:hidden; }
.rst-barra span { display:block; height:100%; border-radius:999px; background:var(--primaria); }

/* Caixa de Iniciativas (Aeth Gerente proativo) */
.rst-inis { border-left:3px solid var(--primaria); }
.rst-ini { border-left:3px solid transparent; padding-left:10px; }
.rst-ini-p3 { border-left-color:var(--vermelho, #e04040); }
.rst-ini-p2 { border-left-color:var(--laranja, #f0ad4e); }
.rst-ini-p1 { border-left-color:var(--primaria); }

/* Complementos no PDV (M2.2) */
.rst-lancar-compl { border:1px solid var(--borda); border-radius:12px; overflow:hidden; }
.rst-lancar-compl > summary { list-style:none; cursor:pointer; }
.rst-lancar-compl > summary::-webkit-details-marker { display:none; }
.rst-compl-form { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-top:1px solid var(--borda); }

/* Foto do item (M2.2) */
.rst-item-thumb { width:48px; height:48px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.rst-foto-atual { display:flex; align-items:center; gap:12px; }
.rst-foto-atual img { width:80px; height:80px; object-fit:cover; border-radius:10px; }

/* Meu Perfil — painel social (#130) */
.prf-hero { border:1px solid var(--borda); border-radius:16px; overflow:hidden; margin-bottom:16px; background:var(--cartao); }
.prf-capa { height:110px; background:linear-gradient(120deg, var(--primaria), rgba(124,123,255,.35) 60%, transparent); }
.prf-cabeca { display:flex; gap:16px; align-items:flex-end; padding:0 20px 18px; flex-wrap:wrap; }
.prf-avatar { margin-top:-44px; }
.prf-avatar .avatar-grande { width:96px; height:96px; border:4px solid var(--cartao); border-radius:50%; }
.prf-ident { flex:1 1 200px; }
.prf-ident h1 { margin:8px 0 0; font-size:1.5rem; }
.prf-user { color:var(--primaria); font-weight:600; margin:2px 0; }
.prf-local, .prf-bio { color:var(--texto-suave); margin:2px 0; }
.prf-bio { margin-top:6px; }
.prf-acoes-topo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.prf-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px; margin-bottom:16px; }
.prf-stat { display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 8px; border:1px solid var(--borda); border-radius:12px; text-decoration:none; color:inherit; background:var(--cartao); transition:transform .12s, border-color .12s; }
a.prf-stat:hover { transform:translateY(-2px); border-color:var(--primaria); }
.prf-stat strong { font-size:1.5rem; font-variant-numeric:tabular-nums; }
.prf-stat strong small { font-size:.9rem; color:var(--texto-suave); font-weight:600; }
.prf-stat span { font-size:.82rem; color:var(--texto-suave); text-align:center; }
.prf-stat-destaque { border-color:var(--primaria); background:linear-gradient(135deg, rgba(124,123,255,.14), transparent); }
.prf-badges { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.prf-badge { display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 8px; border:1px solid var(--borda); border-radius:12px; text-align:center; position:relative; }
.prf-badge.off { opacity:.5; filter:grayscale(.7); }
.prf-badge-emoji { font-size:1.8rem; }
.prf-badge-nome { font-size:.8rem; font-weight:600; }
.prf-badge-barra { display:block; width:100%; height:5px; border-radius:999px; background:var(--borda); overflow:hidden; }
.prf-badge-barra span { display:block; height:100%; background:var(--primaria); border-radius:999px; }
.prf-badge-ok { position:absolute; top:6px; right:8px; color:var(--verde, #2e9e5b); font-weight:800; }
.prf-redes { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.prf-rede { width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:1px solid var(--borda); border-radius:10px; text-decoration:none; }
.prf-rede:hover { border-color:var(--primaria); }
.prf-cota { margin-top:14px; }
/* Fase 6.6: "Meus links" — endereços públicos copiáveis num lugar só */
.prf-links { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.prf-link { display:flex; align-items:center; gap:10px; padding:8px 12px;
    border:1px solid var(--borda); border-radius:12px; background:var(--superficie); }
.prf-link-rotulo { flex:0 0 auto; font-size:.85rem; font-weight:600; color:var(--texto-suave); }
.prf-link-url { flex:1 1 auto; min-width:0; font-size:.85rem; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 520px) { .prf-link { flex-wrap:wrap; } .prf-link-url { flex-basis:100%; order:3; } }

/* Cota de IA (perfil): barra de uso mensal em % */
.ia-cota-barra { height:10px; border-radius:999px; background:var(--borda); overflow:hidden; margin:8px 0 6px; }
.ia-cota-barra span { display:block; height:100%; border-radius:999px; background:var(--primaria); transition:width .3s; }
.ia-cota-barra span.ia-cota-alta { background:var(--laranja, #f0ad4e); }
.hub-pers-acoes { margin-top:16px; display:flex; gap:10px; }

/* Evolução de carga (gráfico por exercício) */
.prog-chips { flex-wrap:wrap; }
.prog-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; margin-bottom:14px; }
.prog-stat { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--borda); border-radius:10px; }
.prog-stat strong { font-size:1.15rem; }
.prog-up { color:#2ec478; } .prog-down { color:#ff6b6b; }
.prog-grafico { margin-top:6px; }

/* Progresso: alternador de métrica (carga × volume) no cabeçalho do bloco */
.prog-metrica { display:flex; gap:6px; flex-wrap:wrap; }
.bloco-cabecalho:has(.prog-metrica) { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* ===========================================================================
   Landing v2: novas seções (trust, IA, personas, números, indicação)
   =========================================================================== */
.lp-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; list-style:none;
    padding:0; margin:22px 0 0; font-size:.95rem; opacity:.9; }
.lp-trust li { display:flex; align-items:center; gap:6px; white-space:nowrap; }

/* IA — chat de exemplo */
.lp-ia .lp-ostenta { align-items:center; }
.lp-ia-chat { display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--borda);
    border-radius:18px; background:linear-gradient(160deg, rgba(124,123,255,.12), rgba(46,196,120,.06)); max-width:420px; }
.lp-ia-bolha { padding:11px 15px; border-radius:16px; font-size:1rem; line-height:1.35; max-width:88%; }
.lp-ia-user { align-self:flex-end; background:linear-gradient(135deg,#5b4be6,#7c7bff); color:#fff; border-bottom-right-radius:5px; }
.lp-ia-bot { align-self:flex-start; background:rgba(255,255,255,.06); border:1px solid var(--borda); border-bottom-left-radius:5px; }

/* Personas */
.lp-quem-grade { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.lp-quem-chip { display:flex; align-items:center; gap:10px; padding:13px 16px; border:1px solid var(--borda);
    border-radius:12px; background:rgba(124,123,255,.06); font-size:.98rem; }
.lp-quem-chip span { font-size:1.35rem; line-height:1; }

/* Números / prova social */
.lp-numeros { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:8px; }
.lp-num { min-width:150px; flex:1 1 150px; max-width:200px; padding:20px 16px; border:1px solid var(--borda);
    border-radius:16px; background:rgba(124,123,255,.06); }
.lp-num strong { display:block; font-size:2.1rem; font-weight:800; line-height:1;
    background:linear-gradient(120deg,#8ef9ff,#7c7bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp-num span { display:block; margin-top:8px; font-size:.9rem; opacity:.85; }

/* Indicação */
.lp-indicacao { max-width:720px; }
.lp-checks-centro { display:inline-flex; flex-direction:column; gap:8px; text-align:left; margin:14px auto 20px; }

/* ===========================================================================
   Modo offline: banner de status, toast e página de rascunhos
   =========================================================================== */
.off-banner { position:fixed; left:12px; right:12px; bottom:12px; z-index:120; margin:0 auto; max-width:640px;
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px;
    border-radius:12px; background:rgba(30,26,70,.96); border:1px solid rgba(124,123,255,.5);
    box-shadow:0 8px 30px rgba(0,0,0,.4); font-size:.92rem; color:#eef; }
.off-banner-link { color:#8ef9ff; font-weight:700; text-decoration:none; white-space:nowrap; }
.off-toast { position:fixed; left:50%; bottom:74px; transform:translateX(-50%); z-index:130;
    background:#1b1740; color:#eef; border:1px solid rgba(124,123,255,.5); padding:11px 16px;
    border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.4); font-size:.92rem; max-width:90vw;
    transition:opacity .4s, transform .4s; }
.off-toast.ir { opacity:0; transform:translateX(-50%) translateY(8px); }
.rasc-nova { display:flex; gap:8px; }
.rasc-nova .rasc-input { flex:1; padding:11px 13px; border:1px solid var(--borda); border-radius:10px; font:inherit; }
.rasc-dica { margin-top:8px; opacity:.85; }
.rasc-lista { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.rasc-item { display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 13px; border:1px solid var(--borda); border-radius:10px; }
.rasc-item-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rasc-item-txt span:first-child { word-break:break-word; }
.rasc-item-acoes { display:flex; gap:4px; flex-shrink:0; }

/* ── Painel de Negócio (cockpit) ─────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.neg-alertas { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.neg-alerta { display: flex; align-items: center; gap: 10px; text-decoration: none;
    padding: 11px 14px; border-radius: 12px; border: 1px solid var(--borda);
    background: var(--superficie); color: var(--texto); font-size: .92rem; font-weight: 600; }
.neg-alerta:hover { filter: brightness(1.03); }
.neg-alerta-ic { font-size: 1.1rem; }
.neg-alerta-ir { margin-left: auto; color: var(--texto-suave); font-size: 1.2rem; }
.neg-alerta-urgente { border-color: var(--vermelho); box-shadow: inset 3px 0 0 var(--vermelho); }
.neg-alerta-atencao { border-color: #f0ad4e; box-shadow: inset 3px 0 0 #f0ad4e; }
.neg-alerta-info { box-shadow: inset 3px 0 0 var(--primaria); }

.neg-rank { display: flex; flex-direction: column; gap: 12px; }
.neg-rank-item { display: flex; align-items: flex-start; gap: 12px; }
.neg-rank-pos { flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: .82rem;
    background: var(--primaria); color: #fff; }
.neg-rank-item:nth-child(1) .neg-rank-pos { background: #e0a400; }
.neg-rank-item:nth-child(2) .neg-rank-pos { background: #9aa3b5; }
.neg-rank-item:nth-child(3) .neg-rank-pos { background: #c07b45; }
.neg-rank-corpo { flex: 1; min-width: 0; }
.neg-rank-linha { display: flex; justify-content: space-between; gap: 10px; }
.neg-rank-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neg-rank-val { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg-rank-barra { height: 6px; border-radius: 4px; background: var(--borda); margin: 5px 0 2px; overflow: hidden; }
.neg-rank-barra > span { display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--primaria), var(--primaria-escura)); }

/* ── Despesas / contas a pagar ───────────────────────────────────────────── */
.check-linha { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check-linha input { width: auto; }
tr.desp-paga { opacity: .55; }
tr.desp-paga td strong { text-decoration: line-through; }
.dev-acoes-td { white-space: nowrap; }
.dev-acoes-td .inline { display: inline; }

/* ── Curva ABC ───────────────────────────────────────────────────────────── */
.abc-badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;font-weight:800;font-size:.78rem;color:#fff}
.abc-A{background:#12915c}.abc-B{background:#c98a00}.abc-C{background:#8894a8}

/* ── Adicionais da venda (composição) ────────────────────────────────────── */
.venda-adic{border:1px dashed var(--borda);border-radius:12px;padding:14px;margin:4px 0}
.venda-adic-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.venda-adic-topo h3{margin:0;font-size:1rem}
.adic-linha{display:grid;grid-template-columns:1fr 84px 110px 40px;gap:8px;align-items:center;margin-top:8px}
.adic-linha select,.adic-linha input{width:100%}
@media (max-width:560px){.adic-linha{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .adic-linha select{grid-column:1 / -1}}
.venda-adic-lista-item{font-size:.86rem;color:var(--texto-suave)}

/* ── Caixinha de imposto ─────────────────────────────────────────────────── */
.form-inline-reserva{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:8px 0}
.form-inline-reserva label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}

/* ── DRE (demonstrativo de resultado) ────────────────────────────────────── */
.dre-doc{max-width:640px;margin:0 auto}
.dre-cab{text-align:center;margin-bottom:14px}
.dre-cab h2{margin:0 0 2px}
.dre-tabela td{padding:7px 10px}
.dre-grupo td{font-weight:700;border-top:1px solid var(--borda);padding-top:12px}
.dre-subtotal td{font-weight:700;background:var(--fundo-suave)}
.dre-resultado td{font-weight:800;font-size:1.08rem;border-top:2px solid var(--borda)}
.dre-resultado.pos td{color:var(--verde)}.dre-resultado.neg td{color:var(--vermelho)}
.dre-imposto{margin-top:10px}
@media print{.no-print{display:none!important}.dre-doc{box-shadow:none;border:0}}

/* ── PDV multi-item (carrinho + totais) ──────────────────────────────────── */
.item-linha{display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(120px,1.4fr) 70px 100px 40px;gap:8px;align-items:center;margin-top:8px}
.item-linha select,.item-linha input{width:100%}
@media(max-width:640px){.item-linha{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .item-linha select,.item-linha [data-item-desc]{grid-column:1 / -1}}
.pdv-resumo{margin-top:10px}
.pdv-totais{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:12px 14px;border:1px solid var(--borda);border-radius:12px;background:var(--fundo-suave)}
.pdv-totais>div{display:flex;justify-content:space-between;align-items:baseline}
.pdv-totais [data-pdv-total]{font-size:1.35rem;font-weight:800;color:var(--verde)}
.pdv-troco [data-pdv-troco]{font-size:1.1rem;font-weight:700}
/* Barra fixa do PDV (Fase 4.3): total + troco + salvar sempre à vista, colada
   acima da navegação inferior no mobile; no desktop gruda no rodapé da janela. */
.pdv-fixa{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));z-index:40;
  background:var(--superficie);border:1px solid var(--borda);border-radius:12px;
  padding:10px 14px 12px;box-shadow:0 -4px 18px rgba(0,0,0,.14)}
@media(min-width:981px){.pdv-fixa{bottom:12px}}
.pdv-fixa .pdv-totais{margin-top:6px;padding:8px 12px}
.pdv-fixa-acoes{display:flex;gap:10px;margin-top:10px}
.pdv-fixa-acoes .btn-primary{flex:1 1 auto}

/* Tag âmbar (validade próxima) */
.tag-amarelo{background:#fbefd9;color:#8a5a00}
:root[data-tema="escuro"] .tag-amarelo,[data-tema="escuro"] .tag-amarelo{background:#332512;color:#e7b45a}

/* ── Fluxo de caixa projetado ────────────────────────────────────────────── */
.cards-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
@media(max-width:560px){.cards-resumo{grid-template-columns:1fr}}
.card-resumo{background:var(--card,#fff);border:1px solid var(--borda);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.card-resumo .cr-label{font-size:.8rem;color:var(--texto-suave)}
.card-resumo .cr-valor{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums}
.flx-alerta{background:#fbe4e6;color:#a12631;border:1px solid #f2bcc1;border-radius:12px;padding:12px 14px;margin:6px 0 14px;font-weight:600}
[data-tema="escuro"] .flx-alerta{background:#3a1620;color:#ff9aa8;border-color:#5a2230}

/* ── Recibo de venda ─────────────────────────────────────────────────────── */
.recibo{max-width:420px;margin:0 auto;font-variant-numeric:tabular-nums}
.recibo-cab{text-align:center;display:flex;flex-direction:column;gap:2px;padding-bottom:12px;margin-bottom:10px;border-bottom:1px dashed var(--borda)}
.recibo-empresa{font-size:1.2rem}
.recibo-itens{width:100%;border-collapse:collapse}
.recibo-itens td{padding:5px 2px;vertical-align:top}
.recibo-itens tfoot td{padding-top:8px;border-top:1px dashed var(--borda)}
.recibo-total td{font-weight:800;font-size:1.15rem;border-top:2px solid var(--borda)!important}
.recibo-rodape{text-align:center;margin-top:14px}
@media print{.no-print{display:none!important}.recibo{box-shadow:none;border:0;max-width:100%}}

/* ── OCR de nota (estoque) ───────────────────────────────────────────────── */
.ocr-drop{display:flex;align-items:center;justify-content:center;gap:8px;padding:26px;border:2px dashed var(--borda);border-radius:14px;cursor:pointer;text-align:center;font-weight:600}
.ocr-drop:hover{border-color:var(--roxo,#6c5cff)}
.ocr-drop input[type=file]{max-width:220px}
.ocr-tabela input[type=text]{width:100%}

/* ── Consultor (Sócio IA) ────────────────────────────────────────────────── */
.consultor-lista{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.conselho{display:flex;gap:14px;align-items:flex-start;background:var(--card,#fff);border:1px solid var(--borda);border-radius:14px;padding:16px}
.conselho-icone{font-size:1.7rem;line-height:1}
.conselho-corpo h3{margin:0 0 4px;font-size:1.05rem}
.conselho-corpo p{margin:0 0 10px;color:var(--texto-suave)}
.conselho-urgente{border-left:5px solid #d64550}
.conselho-atencao{border-left:5px solid #c98a00}
.conselho-info{border-left:5px solid #2f6fed}
.conselho-bom{border-left:5px solid #12915c}

/* ── Agendamento online ──────────────────────────────────────────────────── */
.ag-pub{max-width:440px;margin:0 auto}
.ag-pub h1{font-size:1.5rem;margin:0 0 4px}
.ag-servicos{background:var(--fundo-suave);border:1px solid var(--borda);border-radius:12px;padding:12px 14px;margin:10px 0;white-space:pre-line;font-size:.92rem}
.ag-nota{margin-top:12px;text-align:center}
.ag-ok{text-align:center}
.ag-ok-emoji{font-size:3rem}
.ag-ok-quando{font-size:1.15rem;font-weight:700;margin:8px 0}
.ag-config summary{cursor:pointer;font-weight:700;font-size:1.02rem}
.ag-link-box{background:var(--fundo-suave);border:1px dashed var(--borda);border-radius:10px;padding:10px 12px;margin:6px 0 12px;word-break:break-all;font-size:.9rem}
.switch-linha{display:flex;align-items:center;gap:9px;font-weight:600;margin:8px 0}

/* ---- Seletor de emoji (paleta clicável) --------------------------------- */
.emoji-picker { margin: 6px 0 2px; border: 1px solid var(--linha, #2a2f45); border-radius: 10px; background: rgba(255,255,255,.02); overflow: hidden; }
.emoji-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--linha, #2a2f45); }
.emoji-tab { border: 0; background: transparent; font-size: 1.15rem; line-height: 1; padding: 5px 8px; border-radius: 8px; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
.emoji-tab:hover { opacity: .9; background: rgba(255,255,255,.05); }
.emoji-tab.ativo { opacity: 1; background: rgba(124,92,255,.22); }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; max-height: 168px; overflow-y: auto; }
.emoji-op { border: 0; background: transparent; font-size: 1.35rem; line-height: 1; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .1s, background .12s; }
.emoji-op:hover { background: rgba(255,255,255,.08); transform: scale(1.18); }
.emoji-op.ativo { background: rgba(124,92,255,.3); box-shadow: 0 0 0 2px rgba(124,92,255,.55) inset; }

/* ---- Lembrete de retorno (clientes pra reativar) ------------------------ */
.reativar-lista { display: flex; flex-direction: column; gap: 6px; }
.reativar-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--linha, #2a2f45); border-radius: 10px; background: rgba(255,255,255,.02); }
.reativar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reativar-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Ficha técnica (produto composto: cardápio/combo/promoção) ---------- */
.ficha-tecnica { display: flex; flex-direction: column; gap: 8px; }
.ficha-corpo { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--linha, #2a2f45); border-radius: 10px; }
.comp-lista { display: flex; flex-direction: column; gap: 6px; }
.comp-linha { display: flex; gap: 6px; align-items: center; }
.comp-linha .comp-prod { flex: 1 1 auto; min-width: 0; }
.comp-linha .comp-qtd { flex: 0 0 84px; text-align: right; }
.tag-composto { font-size: .72rem; padding: 1px 6px; border-radius: 6px; background: rgba(124,92,255,.22); color: #cbb8ff; margin-left: 4px; }

/* ---- Solicitações de agendamento a confirmar (pendentes) ---------------- */
.bloco-destaque { border: 1px solid rgba(124,92,255,.4); }
.pend-lista { display: flex; flex-direction: column; gap: 6px; }
.pend-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--linha, #2a2f45); border-radius: 10px; background: rgba(255,193,7,.06); }
.pend-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pend-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-amarelo { background: rgba(255,193,7,.22); color: #ffd257; font-size: .72rem; padding: 1px 7px; border-radius: 6px; }

/* ===== Aeth sugere — proatividade contextual por painel (Fase 2) ===== */
.aeth-sugere {
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
    padding: 14px 16px; border-radius: var(--raio-lg, 16px);
    border: 1px solid var(--borda); background: var(--superficie);
    box-shadow: var(--sombra-sm, 0 1px 2px rgba(0,0,0,.06));
}
.aeth-sugere-acao { border-color: color-mix(in srgb, var(--primaria) 40%, var(--borda)); }
.aeth-sugere-alerta { border-color: color-mix(in srgb, var(--vermelho) 45%, var(--borda)); }
.aeth-sugere-bom { border-color: color-mix(in srgb, var(--verde) 45%, var(--borda)); }
.aeth-sugere-ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tinta-acao, rgba(124,108,255,.14)); color: var(--primaria);
}
.aeth-sugere-alerta .aeth-sugere-ic { background: color-mix(in srgb, var(--vermelho) 14%, transparent); color: var(--vermelho); }
.aeth-sugere-corpo { flex: 1 1 auto; min-width: 0; }
.aeth-sugere-rotulo { display: block; font-family: var(--fonte-titulo); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.aeth-sugere-texto { margin: 2px 0 0; color: var(--texto); font-size: .95rem; line-height: 1.4; }
.aeth-sugere-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--fonte-titulo); font-weight: 600; font-size: .88rem;
    padding: 9px 14px; border-radius: 10px; white-space: nowrap;
    background: var(--primaria); color: #fff;
}
.aeth-sugere-btn:hover { background: var(--primaria-escura); text-decoration: none; transform: translateY(-1px); }
.aeth-sugere-alerta .aeth-sugere-btn { background: var(--vermelho); }
@media (max-width: 560px) {
    .aeth-sugere { flex-wrap: wrap; }
    .aeth-sugere-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Odontograma (ficha odontológica por dente, notação FDI). Mapa clicável:
   cada dente vira um botão colorido pelo estado clínico. Tema claro/escuro.
   --------------------------------------------------------------------------- */
.odo-mapa { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.odo-arcada-rotulo { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.odo-arcada { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 2px; }
.odo-quad { display: flex; gap: 4px; }
.odo-linha-media { width: 2px; align-self: stretch; background: var(--borda); margin: 0 4px; border-radius: 2px; }
.odo-dente {
    flex: 0 0 auto; width: 34px; height: 42px; border-radius: 7px;
    border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto);
    font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
    cursor: pointer; transition: transform .08s ease, box-shadow .12s ease; line-height: 1;
}
.odo-dente:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.odo-dente.odo-sel { outline: 3px solid var(--primaria); outline-offset: 1px; }
/* Estados — cor de preenchimento; texto branco sobre cor forte. */
.odo-e-carie      { --c: #d64550; }
.odo-e-restaurado { --c: #2f6fed; }
.odo-e-canal      { --c: #8a5cf6; }
.odo-e-coroa      { --c: #d99500; }
.odo-e-protese    { --c: #109b8a; }
.odo-e-implante   { --c: #5f7089; }
.odo-e-extrair    { --c: #e8720c; }
.odo-dente.odo-e-carie, .odo-dente.odo-e-restaurado, .odo-dente.odo-e-canal,
.odo-dente.odo-e-coroa, .odo-dente.odo-e-protese, .odo-dente.odo-e-implante,
.odo-dente.odo-e-extrair {
    background: var(--c); border-color: var(--c); color: #fff;
}
.odo-dente.odo-ausente { background: transparent; border-style: dashed; color: var(--texto-suave); text-decoration: line-through; }
/* Legenda + resumo */
.odo-legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.odo-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--texto-suave); }
.odo-leg-cor { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--borda); background: var(--superficie); }
.odo-leg-cor.odo-e-carie, .odo-leg-cor.odo-e-restaurado, .odo-leg-cor.odo-e-canal,
.odo-leg-cor.odo-e-coroa, .odo-leg-cor.odo-e-protese, .odo-leg-cor.odo-e-implante,
.odo-leg-cor.odo-e-extrair { background: var(--c); border-color: var(--c); }
.odo-leg-cor.odo-e-ausente { border-style: dashed; }
.odo-resumo { display: flex; flex-wrap: wrap; gap: 8px; }
.odo-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; background: var(--texto-suave); }
.odo-tag.odo-e-carie, .odo-tag.odo-e-restaurado, .odo-tag.odo-e-canal,
.odo-tag.odo-e-coroa, .odo-tag.odo-e-protese, .odo-tag.odo-e-implante,
.odo-tag.odo-e-extrair { background: var(--c); }
.odo-tag.odo-e-ausente { background: transparent; color: var(--texto-suave); border: 1.5px dashed var(--borda); }
.odo-editor { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.odo-infantil { margin-top: 12px; }
.odo-infantil > summary { cursor: pointer; color: var(--texto-suave); font-size: .85rem; padding: 6px 0; }

/* ---------------------------------------------------------------------------
   Meu Plano — card no hub + página de planos (status, cota IA, comparação).
   --------------------------------------------------------------------------- */
.hub-plano {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px;
    border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie);
    color: var(--texto); text-decoration: none; box-shadow: var(--sombra); transition: transform .1s ease;
}
.hub-plano:hover { transform: translateY(-2px); }
.hub-plano-emo { font-size: 1.7rem; line-height: 1; }
.hub-plano-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.hub-plano-abrir { color: var(--primaria); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.hub-plano-plus     { border-color: rgba(138,125,255,.5); background: linear-gradient(180deg, rgba(138,125,255,.10), transparent); }
.hub-plano-business { border-color: rgba(217,149,0,.5);   background: linear-gradient(180deg, rgba(217,149,0,.12), transparent); }

.plano-status { display: flex; align-items: center; gap: 14px; }
.plano-status-emo { font-size: 2rem; line-height: 1; }
.plano-status-txt { display: flex; flex-direction: column; gap: 3px; }
.plano-status.plano-plus { border-left: 4px solid #8a7dff; }
.plano-status.plano-biz  { border-left: 4px solid #d99500; }
.plano-status.plano-free { border-left: 4px solid var(--borda); }

.plano-ia-barra { height: 10px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.plano-ia-barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), var(--primaria)); border-radius: 999px; }

.plano-tabela-wrap { overflow-x: auto; }
.plano-tabela { width: 100%; border-collapse: collapse; min-width: 460px; }
.plano-tabela th, .plano-tabela td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--borda); font-size: .9rem; }
.plano-tabela thead th { font-weight: 700; }
.plano-tabela .plano-rec { text-align: left; color: var(--texto-suave); }
.plano-preco-linha td { color: var(--texto); font-size: .95rem; padding-top: 2px; }
.plano-col-atual { background: rgba(127,123,255,.10); }
.plano-tabela thead th.plano-col-atual { border-top: 2px solid var(--primaria); border-radius: 8px 8px 0 0; }
.plano-cta-linha td { border-bottom: none; padding-top: 12px; }

/* Lista de "Seguindo / Seguidores" (perfil/seguindo) */
.seg-lista { display: flex; flex-direction: column; gap: 2px; }
.seg-item { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--borda); }
.seg-item:last-child { border-bottom: 0; }
.seg-quem { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.seg-quem a { text-decoration: none; color: var(--texto); }
.seg-quem .menor { color: var(--texto-suave); }

/* Canais de aviso por item (agenda/eventos/lembretes) */
.avisar-canais { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.avisar-canais legend { font-size: .8rem; color: var(--texto-suave); padding: 0 4px; }
.avisar-canais .lim-check { font-size: .9rem; }

/* Editor de seções do site institucional (/meu-site) */
.sp-secoes { display: grid; gap: 8px; }
.sp-secao { border: 1px solid var(--borda); border-radius: 12px; background: rgba(255,255,255,.03); }
.sp-secao > summary { display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; }
.sp-secao > summary::-webkit-details-marker { display: none; }
.sp-secao-corpo { padding: 0 14px 14px; display: grid; gap: 10px; }
.sp-secao-corpo textarea { width: 100%; box-sizing: border-box; }
.sp-galeria-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-gal-item { position: relative; }
.sp-gal-item img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; }
.sp-gal-item form { position: absolute; top: 2px; right: 2px; }

/* Configurações unificadas (Fase 1 UX) — lista seccionada estilo WhatsApp */
.cfg-filtro { margin: 0 0 14px; }
.cfg-filtro input { width: 100%; box-sizing: border-box; padding: 11px 14px;
    border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
    color: var(--texto); font-size: .95rem; }
.cfg-filtro input:focus { outline: none; border-color: var(--primaria); }
.cfg-lista { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.cfg-grupo-rotulo { margin: 0 0 6px; padding: 0 4px; font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.cfg-grupo-itens { background: var(--superficie); border: 1px solid var(--borda);
    border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.cfg-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borda); }
.cfg-item:last-child { border-bottom: 0; }
.cfg-item:hover, .cfg-item:focus-visible { background: rgba(127, 123, 255, .08); }
.cfg-item-icone { flex: 0 0 auto; width: 38px; height: 38px; display: flex;
    align-items: center; justify-content: center; font-size: 1.15rem;
    background: rgba(127, 123, 255, .10); border-radius: 12px; }
.cfg-item-txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.cfg-item-txt strong { font-weight: 600; }
.cfg-item-txt .menor { color: var(--texto-suave); }
.cfg-item-chev { flex: 0 0 auto; color: var(--texto-suave); }
.cfg-item-perigo { color: var(--vermelho); }
.cfg-item-perigo .cfg-item-icone { background: rgba(214, 69, 80, .10); }
.cfg-item-perigo:hover, .cfg-item-perigo:focus-visible { background: rgba(214, 69, 80, .08); }

/* Configurações › Aparência: grade de idiomas (reusa o visual de .fonte-op) */
.cfg-idiomas { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-idioma-op { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.cfg-idioma-op .idioma-bandeira svg { display: block; border-radius: 3px; }

/* Canal indisponível (bot não configurado): card apagado, não sumido */
.cfg-indisponivel { opacity: .55; }