:root{
  /* ============================================================
     TEMA VISUAL — cores, fontes e tamanhos usados no app inteiro.
     Este bloco :root e o TEMA CLARO (padrao). O tema escuro (a opcao
     alternativa que o usuario liga no toggle) esta inteiro no bloco
     ':root[data-theme="dark"]' logo abaixo — mesmas variaveis, outros
     valores. Editar um valor aqui muda em todos os lugares que o usam,
     só no tema claro; pra mudar o escuro, edite o outro bloco.
     Cores de dominio (Google, humor do Diario, elemento/aspecto
     astrologico) NAO estao aqui de proposito — nao fazem parte do
     tema de UI e ficam iguais nos dois temas.
     ============================================================ */

  /* --- Cores base (fundo, superficies, texto) — paleta inspirada no mapa natal (Sol Capricornio, Ascendente Aries) --- */
  --bg:#FFFFFF;                          /* fundo geral do app — branco, a pedido da usuária (2026-07-30) */
  --bg-rgb:255,255,255;                  /* --bg em R,G,B (p/ usar com transparencia) */
  --surface:#FFFFFF;                     /* fundo de cards e superficies elevadas — branco, a pedido da usuária (2026-07-30) */
  --surface-rgb:255,255,255;             /* --surface em R,G,B */
  --surface2:#FFFFFF;                    /* fundo de superficies um nivel acima (chips, inputs, hover) — branco, a pedido da usuária (2026-07-30) */
  --border:rgba(74,85,104,0.18);         /* borda padrao — tingida com --cosmic-blue-gray (2026-08-23) */
  --border-hover:rgba(74,85,104,0.32);   /* borda em destaque/hover/handle de modal — mesmo tom, mais opaco */
  --text:#201A1D;                        /* cor do texto principal — quase preto, tom quente (Sol Capricornio). ~15.1:1 no fundo claro */
  --text-muted:#6B625E;                  /* texto secundario — cinza quente, nao azulado */
  --text-dim:#8a8d9a;                    /* texto terciario/apagado (placeholders, rotulos finos) — uso decorativo */

  /* --- Cor de destaque (accent/primaria) --- */
  --accent:#8B2F6B;                      /* magenta profundo da familia do gradiente laranja-rosa-roxo-azul. ~7.7:1 no fundo claro */
  --accent-rgb:139,47,107;               /* --accent em R,G,B */
  --accent-dim:rgba(139,47,107,0.12);    /* accent suave (fundo de item selecionado) */
  --accent-glow:rgba(139,47,107,0.07);   /* accent bem suave (glow/fundo de destaque leve) */

  /* --- Gradiente dos botoes principais (CTA: "Continuar", "Enviar" etc) — laranja->rosa->roxo->azul, mesmo padrao nos dois temas. Sobrescrito por usuaria quando --colorPersonalization esta ligado (applyAstroPalette()) --- */
  --gradient-start:#E48E6F;
  --gradient-start-rgb:228,142,111;
  --gradient-mid1:#D7607E;
  --gradient-mid2:#9D71D4;
  --gradient-end:#867FD7;
  --gradient-end-rgb:134,127,215;

  /* --- Gradiente linear dos headers (mapa-navbar, mapa-hero-own, interp-hero) — laranja->vinho->roxo->azul escuros, horizontal, cobrindo a largura inteira. Exclusivo dos headers, nao compartilhado com botoes --- */
  --header-start:#D9642E;
  --header-mid1:#A8324F;
  --header-mid2:#5B3A8C;
  --header-end:#3D3F8C;


  /* --- Overlay translucido adaptavel ao tema (bordas/divisores sutis) --- */
  --overlay-rgb:0,0,0;                   /* no claro, escurece o fundo; no escuro (abaixo) clareia */
  --color-auth-link:rgba(0,0,0,0.6);     /* link secundario da tela de login — alpha proprio pra manter AA (~5.7:1) no fundo claro */

  /* --- Cores utilitarias --- */
  --white-rgb:255,255,255;               /* branco puro em R,G,B — SEMPRE branco nos dois temas (ex: fundo escuro fixo do onboarding) */
  --black-rgb:0,0,0;                     /* preto puro em R,G,B — SEMPRE preto nos dois temas (sombras/scrims) */
  --color-white:#fff;                    /* branco solido — texto/icone sobre botoes coloridos, igual nos dois temas */
  --color-error:#A6293B;                 /* vermelho de mensagens de erro/validacao — mais profundo, ~7.0:1 no fundo claro */
  --color-retrograde:#a04949;            /* vermelho do marcador de planeta retrogrado — ~5.9:1 (já ajustado manualmente antes, mantido) */
  --color-tab-inactive:var(--cosmic-blue-gray); /* icones/labels inativos na barra de abas — tom cosmico (2026-08-23) */
  --color-select-option-bg:#E8E2D6;      /* fundo das opcoes de <select> nativo — espelha --surface2 */
  --color-journal-empty:#b5b7c0;         /* cor do dia vazio no calendario do Diario */
  --color-beta-bg:#fdf3d9;               /* fundo do banner "beta" */
  --color-beta-text:#8a6a1a;             /* texto/borda do banner "beta" — ~4.6:1 no fundo do banner */

  /* --- Cores dos 4 elementos na mandala (fundo dos setores de signo + tint do glifo) —
     tema claro usa tons mais profundos/dessaturados; tema escuro mantem o pastel original
     (ver bloco [data-theme="dark"]) pra nao regredir visualmente lá. Mesma familia de matiz
     por elemento nos dois temas, so muda profundidade/saturacao. --- */
  --color-elem-fire:#6B4A94;
  --color-elem-earth:#2A5FA0;
  --color-elem-air:#5A82A8;
  --color-elem-water:#423F8F;

  /* --- Paleta astrologica pessoal (docs/SPEC-ASTRO-PALETTE.md) — 6 tokens
     calculados por /api/palette a partir do mapa natal de cada usuaria,
     aplicados via applyAstroPalette() apos generateChart(). Nascem em
     cinza neutro (tema "antes do calculo"); nenhum componente deve
     referenciar hex direto, so esses 6 nomes. --- */
  --color-dominant:#6B6862;
  --color-structure:#6B6862;
  --color-voice:#6B6862;
  --color-accent-rare:#6B6862;
  --color-cool-exception:#6B6862;
  --bg-base:#F2F0EE;

  /* --- Paleta clara do cartao de onboarding — fixa, igual nos dois temas (o onboarding tem seu proprio fundo escuro sempre) --- */
  --onboard-surface:#fff;
  --onboard-surface2:#f5f5f8;
  --onboard-text:#1a1b2e;
  --onboard-text-secondary:#3a3a4e;      /* usado em .ob-radio/.ob-check, mais escuro que text-muted */
  --onboard-text-muted:#6b6b80;
  --onboard-text-dim:#9b9bae;
  --onboard-placeholder:#b0b0be;
  --onboard-border:#e0e0e8;
  --onboard-border-hover:#d0d0d8;
  --onboard-bg-1:#1a1118;                /* gradiente de fundo do onboarding — topo */
  --onboard-bg-2:#120e14;                /* gradiente de fundo do onboarding — meio */
  --onboard-bg-3:#0d0a0f;                /* gradiente de fundo do onboarding — base */
  --sunset-1:#FF6B35;                    /* laranja neon */
  --sunset-2:#F2295B;                    /* rosa-vermelho neon */
  --sunset-3:#8B3FE8;                    /* roxo neon */
  --sunset-4:#5B4FE8;                    /* azul-violeta neon */
  /* Textura de nebulosa dos headers — assets/header-texture-nebula.webp (NASA/ESA/CSA/STScI, "Pillars of Creation", dominio publico), combinado via background-blend-mode:overlay com o gradiente do header. Credito no rodape da aba Mapa. */

  /* --- Tipografia — familias (igual nos dois temas) --- */
  --font-body:'DM Sans','Noto Sans','Noto Sans JP',sans-serif;       /* fonte padrao do app */
  --font-heading:'DM Sans','Noto Sans','Noto Sans JP',sans-serif; /* mesma fonte do corpo — sem serifada (2026-08-04) */
  --font-heading-alt:'Poppins','Noto Sans','Noto Sans JP',sans-serif; /* fonte alternativa (onboarding claro) */

  /* --- Tipografia — tamanhos (igual nos dois temas, do menor pro maior).
     Corrigido 2026-08-21: heading-sm(28px) era MAIOR que heading-md(26px) —
     nomenclatura sm/md/lg mentia sobre o tamanho real. Trocado por uma escala
     de tiers (xl/2xl/3xl) que não afirma nada sobre ordem além do próprio
     nome — sempre confira o valor em px, não deduza pelo nome. */
  --font-size-2xs:9px;          /* rotulos minusculos em uppercase */
  --font-size-xs:10px;          /* rotulos pequenos (abas, badges, cabecalhos de tabela) */
  --font-size-sm:11px;          /* legendas e graus */
  --font-size-md:13px;          /* texto padrao em componentes (linhas de tabela, chips) */
  --font-size-meta:14px;        /* texto secundario padrao */
  --font-size-base:14px;        /* tamanho padrao do corpo de texto do app */
  --font-size-lg:16px;          /* texto de destaque leve (botoes, inputs) */
  --font-size-body:22px;        /* paragrafos de leitura */
  --font-size-xl:26px;          /* logo/nome de marca (tamanho medio) */
  --font-size-2xl:28px;         /* titulos de cartao/modal/secao, wordmark, icones grandes */
  --font-size-3xl:30px;         /* logo/nome de marca (tamanho grande) */

  /* --- Tons cosmicos extraidos de fotos reais da NASA (nebulosa Pilares da
     Criacao) — accents terrosos/frios pra enriquecer elementos de UI sem
     escurecer o fundo. Fundo/accent principais (--bg, --surface, --accent)
     NAO mudam. Em teste 2026-08-23: --cosmic-purple aplicado so na borda
     esquerda de .aspect-card pra validacao visual antes de expandir. --- */
  --cosmic-purple:#4A3B5C;
  --cosmic-purple-light:#5C4A6E;
  --cosmic-blue-gray:#4A5568;
  --cosmic-blue-gray-light:#5C6B7A;
  --cosmic-earth:#6B5644;
  --cosmic-earth-light:#8A6F52;

  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

:root[data-theme="dark"]{
  /* TEMA ESCURO — a opcao alternativa (era o unico tema antes deste toggle existir).
     So sobrescreve o que muda de fato entre os temas; fontes/tamanhos/onboarding
     ficam herdados do :root acima, sao iguais nos dois temas. O gradiente dos
     botoes PRECISA ser repetido aqui (nao e mais igual nos dois temas desde que
     o claro ganhou um tom mais profundo/premium) — sem isso, mudar o gradiente
     do tema claro vazaria pro escuro tambem, ja que --gradient-* nao tinha
     override proprio antes.
  */
  --bg:#08090d;
  --bg-rgb:8,9,13;
  --surface:#0f1117;
  --surface-rgb:15,17,23;
  --surface2:#161820;
  --border:rgba(255,255,255,0.07);
  --border-hover:rgba(255,255,255,0.15);
  --text:#f0ede8;
  --text-muted:#7a7880;
  --text-dim:#4a4850;

  --accent:#C9A6FF;
  --accent-rgb:201,166,255;
  --accent-dim:rgba(201,166,255,0.15);
  --accent-glow:rgba(201,166,255,0.08);

  --gradient-start:#E48E6F;
  --gradient-start-rgb:228,142,111;
  --gradient-mid1:#D7607E;
  --gradient-mid2:#9D71D4;
  --gradient-end:#867FD7;
  --gradient-end-rgb:134,127,215;

  --header-start:#D9642E;
  --header-mid1:#A8324F;
  --header-mid2:#5B3A8C;
  --header-end:#3D3F8C;

  --overlay-rgb:255,255,255;
  --color-auth-link:rgba(255,255,255,0.5);

  --color-error:#e06060;
  --color-retrograde:#e07070;
  --color-tab-inactive:#B0A890;
  --color-select-option-bg:#1a1b22;
  --color-journal-empty:#3A3A40;
  --color-beta-bg:#2a2410;
  --color-beta-text:#f0d98c;

  --color-elem-fire:#9B6FD9;
  --color-elem-earth:#378ADD;
  --color-elem-air:#85B7EB;
  --color-elem-water:#5B5FC7;

  --color-dominant:#8A8780;
  --color-structure:#8A8780;
  --color-voice:#8A8780;
  --color-accent-rare:#8A8780;
  --color-cool-exception:#8A8780;
  --bg-base:#08090d;
}

/* PERFIL VIVO — reskin visual escopado só em /interpretacao (docs/PERFIL-VIVO.md).
   Sobrescreve variáveis CSS já usadas por todo o accordion/citação compartilhado
   com o Mapa Astral, sem editar nenhuma regra global — Fraunces já é carregada
   (linha do <link> Google Fonts) pra outras páginas, reaproveitada aqui sem custo
   de rede novo. Respeita os 2 temas (light/dark). */
#page-interpretation{
  --font-heading:'DM Sans','Noto Sans','Noto Sans JP',sans-serif;
  --accent:#A6702E;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface2:#FFFFFF;
}
:root[data-theme="dark"] #page-interpretation{--accent:#D79A52;--bg:#14111A;--surface2:#1E1926;}
#page-interpretation .resumo-text{font-size:19px;letter-spacing:.1px;}
#page-interpretation .section-eyebrow-label,
#page-interpretation .slot-label{letter-spacing:.08em;}
#page-interpretation .section-block{margin-top:28px;padding-top:24px;border-top:1px solid var(--border);}
#page-interpretation .section-block:first-child{border-top:none;padding-top:0;}
#page-interpretation .resumo-card{margin-top:24px;}
#page-interpretation .sources-header{margin:20px 20px 0;}
#page-interpretation .sources-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:10px;}
#page-interpretation .sources-rings{display:flex;flex-wrap:wrap;gap:8px;}
#page-interpretation .pv-page-title{font-family:var(--font-heading);font-size:28px;font-weight:400;margin:8px 20px 20px;}
#page-interpretation .pv-page-title em{font-style:italic;color:var(--accent);}
#page-interpretation .sources-title{font-size:15px;color:var(--text);margin-bottom:14px;}
#page-interpretation .source-ring{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);}
#page-interpretation .source-ring.on{color:var(--text);border-color:var(--accent);}
#page-interpretation .source-ring-dot{width:10px;height:10px;border-radius:50%;border:1.4px solid var(--border);flex-shrink:0;box-sizing:border-box;}
#page-interpretation .source-ring.on .source-ring-dot{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 42%,transparent 46%);}
#page-interpretation .next-layers{display:flex;flex-direction:column;gap:8px;}
#page-interpretation .next-layer-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);}
#page-interpretation .next-layer-dot{width:12px;height:12px;border-radius:50%;border:1.4px dashed var(--border);flex-shrink:0;box-sizing:border-box;}
#page-interpretation .recent-activity{margin:16px 20px 0;padding:12px 16px;background:var(--surface2);border-left:2px solid var(--accent);border-radius:10px;font-size:13.5px;color:var(--text);}
#page-interpretation .update-perception-btn{display:block;margin-top:8px;font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-body);}
#page-interpretation .synthesis-pending{margin-top:10px;padding:10px 12px;background:var(--surface2);border-radius:10px;}
#page-interpretation .synthesis-pending-actions{display:flex;gap:8px;margin-top:8px;}
#page-interpretation .synthesis-pending-actions button{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:none;color:var(--text);cursor:pointer;font-family:var(--font-body);}
#page-interpretation .synthesis-pending-actions button:first-child{border-color:var(--accent);color:var(--accent);font-weight:600;}

/* #pvctx-overlay ("Adicionar um fato sobre você", Fase 4) fica FORA do container
   #page-interpretation no DOM (é um overlay irmão, não filho) — as regras escopadas
   acima não alcançam ele. Só usado a partir de /interpretacao (nunca do Diário),
   então é seguro reskinar diretamente aqui sem risco pra outras páginas/sheets. */
#pvctx-overlay .jrn-sheet-date{font-family:var(--font-heading);}
#pvctx-overlay .jrn-sheet-close{color:#A6702E;}
#pvctx-overlay .pv-cat.active{background:linear-gradient(135deg,#A6702E,#8C5A22);border:none;color:#fff;}
#pvctx-overlay .jrn-save{background:linear-gradient(135deg,#A6702E,#8C5A22);color:#fff;}
:root[data-theme="dark"] #pvctx-overlay .jrn-sheet-close{color:#D79A52;}
:root[data-theme="dark"] #pvctx-overlay .pv-cat.active{background:linear-gradient(135deg,#D79A52,#A6702E);}
:root[data-theme="dark"] #pvctx-overlay .jrn-save{background:linear-gradient(135deg,#D79A52,#A6702E);color:#1a1420;}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;height:100dvh;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;}
.star{position:absolute;width:1px;height:1px;background:white;border-radius:50%;animation:twinkle var(--d) ease-in-out infinite alternate;}
@keyframes twinkle{from{opacity:var(--min-o);}to{opacity:var(--max-o);}}
/* height:var(--app-height) removido (2026-08-25, 3ª rodada da auditoria
   mobile, docs/TECH-DEBT.md) — página de teste isolada (viewport-test.html)
   provou que o WebKit standalone realmente oscila entre duas leituras de
   altura nos primeiros ~40ms de vida (874/812/874...), MAS isso é
   inofensivo numa página em fluxo normal: sem altura travada em CSS, o
   navegador recalcula sozinho e continuamente, e o conteúdo sempre acaba
   no lugar certo. O bug visível (faixa branca OU corte de conteúdo,
   dependendo de qual leitura instável a gente congelava) era causado
   exclusivamente por --app-height tirar uma "foto" desse valor instável
   num instante e travar essa altura em CSS. position:fixed;inset:0 sem
   height explícito já é recalculado dinamicamente pelo próprio motor a
   cada mudança real de viewport — não precisa (e não deve) de JS pra
   isso. */
.page{display:none;position:fixed;inset:0;height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;z-index:10;background:var(--bg);}
.page.active{display:block;}

/* ONBOARDING */
.ob-slide{display:none;flex-direction:column;min-height:100vh;padding:60px 32px 48px;}
.ob-slide.active{display:flex;animation:fadeUp 0.35s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.ob-logo{text-align:center;margin-bottom:40px;}
.logo-text{font-family:var(--font-heading);font-size:var(--font-size-3xl);letter-spacing:0.12em;color:var(--accent);}
.logo-tag{font-size:var(--font-size-sm);letter-spacing:0.28em;text-transform:uppercase;color:var(--text-dim);margin-top:5px;}
.ob-icon{font-size:52px;text-align:center;margin-bottom:18px;}
.ob-q{font-family:var(--font-heading);font-size:28px;font-weight:400;text-align:center;line-height:1.3;margin-bottom:10px;}
.ob-sub{font-size:var(--font-size-base);color:var(--text-muted);text-align:center;line-height:1.65;margin-bottom:32px;}
.ob-spacer{flex:1;}
.ob-dots{display:flex;justify-content:center;gap:6px;margin-bottom:20px;}
.ob-dot{width:6px;height:6px;border-radius:3px;background:var(--text-dim);transition:all 0.3s;}
.ob-dot.active{width:20px;background:var(--accent);}
.btn-gold{width:100%;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);border:none;border-radius:14px;padding:17px;font-family:var(--font-body);font-size:var(--font-size-lg);font-weight:500;color:var(--color-white);cursor:pointer;letter-spacing:0.02em;transition:opacity 0.2s,transform 0.15s ease-out;}
.btn-gold:active{transform:scale(0.97);}
.btn-gold:disabled{opacity:0.25;cursor:not-allowed;}
.btn-skip{background:none;border:none;color:var(--text-dim);font-size:var(--font-size-base);font-family:var(--font-body);cursor:pointer;padding:12px;display:block;margin:8px auto 0;}
.ob-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:17px 18px;font-family:var(--font-body);font-size:17px;font-weight:300;color:var(--text);outline:none;-webkit-appearance:none;transition:border-color 0.2s;}
.ob-input:focus{border-color:var(--accent);}
.ob-input::placeholder{color:var(--text-dim);}
select.ob-input{cursor:pointer;}
select.ob-input option{background:var(--color-select-option-bg);}
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ob-option{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 12px;text-align:center;cursor:pointer;transition:all 0.2s;font-size:var(--font-size-body);color:var(--text-muted);}
.ob-option.selected{background:var(--accent-dim);border-color:rgba(var(--accent-rgb),0.5);color:var(--accent);}
.ob-option .oi{font-size:28px;display:block;margin-bottom:8px;}
.aths-box{background:var(--surface);border:1px solid rgba(var(--accent-rgb),0.2);border-radius:16px;padding:20px;margin-top:4px;}
.aths-step{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.aths-step:last-child{margin-bottom:0;}
.aths-num{width:28px;height:28px;border-radius:50%;background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),0.3);color:var(--accent);font-size:var(--font-size-md);font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.aths-text{font-size:var(--font-size-base);color:var(--text-muted);line-height:1.55;}
.aths-text strong{color:var(--text);font-weight:400;}

/* PAYWALL */
.pw-hero{padding:56px 28px 24px;text-align:center;}
.pw-logo{font-family:var(--font-heading);font-size:var(--font-size-xl);letter-spacing:0.12em;color:var(--accent);margin-bottom:18px;}
.pw-title{font-family:var(--font-heading);font-size:var(--font-size-3xl);font-weight:400;line-height:1.25;margin-bottom:10px;}
.pw-sub{font-size:var(--font-size-base);color:var(--text-muted);line-height:1.6;}
.pw-features{padding:0 20px 20px;display:flex;flex-direction:column;gap:10px;}
.pw-feat{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cosmic-purple);border-radius:12px;padding:14px 16px;}
.pw-feat-icon{font-size:20px;flex-shrink:0;}
.pw-feat-text{font-size:var(--font-size-base);color:var(--text-muted);line-height:1.4;}
.pw-feat-text strong{color:var(--text);font-weight:400;}
.pw-plans{padding:0 20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:18px;}
.plan-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 10px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;}
.plan-card.selected{border-color:var(--accent);background:var(--accent-dim);}
.plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);color:var(--color-white);font-size:var(--font-size-xs);font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.plan-period{font-size:var(--font-size-md);font-weight:500;color:var(--text);margin-bottom:4px;}
.plan-price{font-family:var(--font-heading);font-size:var(--font-size-2xl);color:var(--accent);}
.plan-unit{font-size:var(--font-size-xs);color:var(--text-dim);margin-top:2px;}
.pw-cta{padding:0 20px 10px;}
.pw-legal{text-align:center;font-size:var(--font-size-sm);color:var(--text-dim);padding:0 20px 12px;line-height:1.6;}
.pw-legal a{color:var(--text-dim);text-decoration:underline;}
.pw-free-link{text-align:center;padding:0 20px 32px;}
.pw-free-link button{background:none;border:none;color:var(--text-dim);font-family:var(--font-body);font-size:var(--font-size-base);cursor:pointer;text-decoration:underline;}

/* APP
   .app-wrap volta a position:fixed;inset:0 próprio (2026-08-25, achado por
   arqueologia git, docs/TECH-DEBT.md) — essa exata troca (height:100% vs
   position:fixed) já foi feita e desfeita 3x em 11 minutos em 04/08/2026
   (commits f604198→f3ca2b9→5a340a9): height:100% (repassar a altura de
   .page em vez de position:fixed próprio) foi tentado nesse mesmo dia e
   REJEITADO pela usuária pelo motivo exato oposto — "sobrava um espaço em
   branco grande" no aparelho dela. A versão que ficou estável, sem mais
   nenhuma correção depois disso por 3 semanas, foi position:fixed;inset:0.
   Ontem eu revertido pra height:100% sem saber dessa história (achando
   que eliminava uma "camada fixa duplicada" desnecessária) — na prática
   voltei pra uma versão já tentada e descartada. Mantendo position:fixed
   próprio aqui: não depende de repasse de altura entre pai/filho, cada
   position:fixed;inset:0 é recalculado pelo motor de forma independente e
   direta contra o viewport real. */
.app-wrap{display:flex;flex-direction:column;position:fixed;inset:0;height:100dvh;}
.app-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:calc(78px + var(--safe-bottom));}
/* Trava o scroll de .app-scroll enquanto a aba do Chat está ativa
   (JS: switchTab() em js/app.js alterna essa classe). Causa raiz real do
   bug de teclado no iPhone (auditoria 2026-08-24, docs/TECH-DEBT.md): o
   textarea do Chat (#ai-input) não tem NENHUM ancestral scrollável de
   verdade entre ele e .app-scroll — quem rola a conversa é .ai-messages,
   que é IRMÃO do input, não ancestral. Com .app-scroll deixado
   overflow-y:auto, o WebKit sobe o DOM a partir do input, acha .app-scroll
   como "primeiro ancestral scrollável" e força nele o scroll sintético que
   usa pra tirar o campo de baixo do teclado — só que, na aba do Chat,
   .app-scroll nunca tem conteúdo excedente de verdade (#tab-ai preenche
   sua altura exatamente), então esse scroll forçado num contêiner sem pra
   onde rolar é o que fica com offset residual ao fechar o teclado (faixa
   branca embaixo, botões do topo fora de alcance). Travando aqui,
   .ai-messages passa a ser o único scroll que o WebKit encontra, e o
   scroll-into-view automático dele é bem comportado (é o padrão de
   qualquer app de chat). Não afeta as outras 4 abas — só ganham a classe
   quando NÃO são o Chat (ver switchTab). */
.app-scroll.chat-scroll-lock{overflow-y:hidden;}
/* Histórico nesta mesma sessão de debug (2026-08-25), 3 posições testadas:
   1) position:fixed;bottom:Npx puro — vão inconsistente (bottom num
      elemento fixed é resolvido contra o viewport que o WebKit usa pra
      isso, que em standalone+área de gestos não bate de forma confiável
      com a tela física).
   2) position:static (item flex normal de .app-wrap) — corrigiu o vão,
      mas limitou .app-scroll a uma faixa menor que a tela toda (rolagem
      "cortando antes da hora", ao contrário da página de Interpretação,
      que não disputa espaço com barra nenhuma).
   3) position:absolute (ancorado em .app-wrap, não no viewport do
      sistema) — resolveu os dois problemas acima, MAS quebrou o chat:
      um elemento absolute aninhado dentro de um ancestral fixed não
      recebe o tratamento especial que o iOS dá a elementos fixed de
      verdade durante a abertura do teclado (o navegador arrasta a tela
      pra mostrar o campo acima do teclado; o fixed fica ancorado
      corretamente nesse arrasto, o absolute aninhado não).
   Ficou em position:fixed (item 3 quebrava o teclado), mas em vez de
   voltar pro bottom:Npx ambíguo do item 1, ancorada por "top" — bottom
   num fixed é resolvido contra o viewport instável do WebKit nesse
   cenário, mas top+100dvh é uma combinação confiável (100dvh existe
   especificamente pra medir viewport dinâmico corretamente; top sempre
   foi a referência mais estável pra position:fixed, é bottom que sofre
   com toolbars/áreas de gesto dinâmicas). Altura do pill (~65px) é
   aproximada pelo conteúdo real (ícone+label+paddings+borda) — se o
   conteúdo do .tab-item mudar de tamanho no futuro, reconferir esse
   número. */
.tab-bar{position:fixed;left:16px;right:16px;top:calc(100dvh - 65px - var(--safe-bottom));z-index:20;background:rgba(var(--surface-rgb),0.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:999px;box-shadow:0 8px 28px rgba(var(--black-rgb),0.18);display:flex;padding:6px;}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;border-radius:999px;cursor:pointer;background:none;border:none;color:var(--color-tab-inactive);min-height:0;transition:color 0.2s,background 0.2s;}
.tab-item.active{color:var(--accent);background:var(--accent-dim);}
.tab-icon{font-size:19px;line-height:1;}
.tab-label{font-size:10px;letter-spacing:0.02em;}

/* Ajuste de UX (2026-08-27) — Órbita como ação central da navbar: alvo de
   toque maior + destaque visual, mas integrado na mesma pílula (não é um
   FAB flutuante nem uma camada de navegação separada — continua um
   .tab-item normal, só com mais peso). Reaproveita o gradiente já usado em
   .ai-send (botão de enviar do chat), mesma identidade visual do chat. */
.tab-item-orbita{flex:1.3;}
.tab-item-orbita .tab-icon{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);
  color:var(--color-white);
  font-size:19px;
}
.tab-item-orbita .tab-label{font-weight:700;}
/* .active também some (fundo tingido genérico não combina com o círculo de
   gradiente já colorido) — o próprio círculo já comunica destaque/seleção. */
.tab-item-orbita.active{background:none;}

.tab-screen{display:none;}
.tab-screen.active{display:block;}
#tab-ai.active{display:flex;flex-direction:column;height:100%;}

/* Sub-abas de Mapa (Mapa Natal / Trânsitos) — navegação interna dentro de tab-chart */
.chart-subtab-toggle{display:flex;gap:6px;max-width:680px;margin:16px auto 0;padding:0 20px;}
.chart-subtab-item{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:10px 14px;font-family:var(--font-body);font-size:13px;color:var(--text-muted);cursor:pointer;transition:color 0.2s,background 0.2s,border-color 0.2s;}
.chart-subtab-item.active{color:var(--accent);background:var(--accent-dim);border-color:transparent;}

/* LOADING */
.loading-full{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center;padding:40px 20px;background:linear-gradient(160deg,rgba(255,107,53,0.14) 0%,rgba(242,41,91,0.14) 35%,rgba(139,63,232,0.14) 65%,rgba(91,79,232,0.14) 100%);border-radius:20px;}
.loading-orbit{width:100px;height:100px;margin:0 auto 28px;position:relative;}
.loading-orbit svg{animation:spin-ccw 4s linear infinite;width:100px;height:100px;}
@keyframes spin-ccw{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
.loading-dot{position:absolute;top:50%;left:50%;width:8px;height:8px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(0.8);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2);}}
.loading-msg{font-size:var(--font-size-body);color:var(--text-muted);font-style:italic;}

/* CHART RESULTS — new structure */
.chart-wrap{max-width:680px;margin:0 auto;padding:0 0 40px;}
.mandala-wrap{padding:16px 20px 4px;}
.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),0.3);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);flex-shrink:0;cursor:pointer;position:relative;}
.avatar-menu{position:absolute;top:48px;right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;min-width:140px;z-index:50;box-shadow:0 8px 24px rgba(var(--black-rgb),0.5);display:none;}
.avatar-menu.open{display:block;animation:fadeUp 0.15s ease;}
.avatar-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:none;border:none;border-radius:8px;color:var(--text);font-family:var(--font-body);font-size:var(--font-size-base);cursor:pointer;transition:background 0.15s;}
.avatar-menu-item:hover{background:rgba(var(--accent-rgb),0.1);}
.avatar-menu-item svg{flex-shrink:0;}
.avatar-menu-item[disabled]{color:var(--text-dim);cursor:default;}
.avatar-menu-item[disabled]:hover{background:none;}

/* Navbar do topo, compartilhada por todas as abas de page-app (ver renderAppNavbar) */
.mapa-navbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(16px + var(--safe-top)) 20px 16px;background:var(--color-white);}
.mapa-navbar-menu{display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:var(--text);}
.mapa-navbar-menu span{font-size:var(--font-size-2xs);letter-spacing:0.16em;color:rgba(255,255,255,0.75);text-transform:uppercase;}
.mapa-navbar-logo{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text);}
.mapa-navbar-logo-text{font-family:var(--font-heading);font-size:var(--font-size-lg);letter-spacing:0.14em;text-align:center;}
.mapa-navbar-user{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;}
.mapa-navbar-user-name{font-size:var(--font-size-md);color:var(--text);max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mapa-navbar-user svg.chev{color:var(--text-dim);flex-shrink:0;}
.mapa-navbar-avatar-badge{position:absolute;bottom:-3px;right:-3px;background:var(--color-white);color:var(--accent);font-size:7px;font-weight:700;letter-spacing:0.02em;line-height:1;padding:2px 4px;border-radius:999px;border:1.5px solid var(--accent);white-space:nowrap;}
.settings-lang-label{font-size:var(--font-size-md);color:var(--text-dim,#999);margin:16px 0 8px;text-align:center;}
.settings-lang-select{width:100%;padding:12px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--font-size-base);cursor:pointer;margin-bottom:16px;-webkit-appearance:none;appearance:none;}
.settings-lang-select:focus{border-color:var(--accent,#5b83d6);outline:none;}
.settings-option-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.settings-option{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:10px 12px;border-radius:10px;border:1px solid var(--border);border-left:3px solid var(--cosmic-purple);background:var(--surface);text-align:left;}
.settings-option:hover{border-color:var(--border-hover,var(--border));}
.settings-option-dot{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px solid var(--border-hover,var(--border));display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s;}
.settings-option.selected{border-color:var(--accent);}
.settings-option.selected .settings-option-dot{border-color:var(--accent);}
.settings-option.selected .settings-option-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent);}
.settings-option-text{display:flex;flex-direction:column;gap:2px;}
.settings-option-label{font-size:var(--font-size-base);color:var(--text);font-weight:500;}
.settings-option-desc{font-size:var(--font-size-sm,13px);color:var(--text-dim,#999);}
.beta-banner{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;background:var(--color-beta-bg);color:var(--color-beta-text);font-family:var(--font-body);font-size:var(--font-size-md);text-align:center;box-shadow:0 2px 8px rgba(var(--black-rgb),0.3);}
.beta-banner button{background:none;border:1px solid var(--color-beta-text);border-radius:8px;color:var(--color-beta-text);font-family:var(--font-body);font-size:var(--font-size-meta);padding:4px 12px;cursor:pointer;flex-shrink:0;}

/* UNIVERSAL ARCHETYPE */
.archetype-card{margin:20px 20px 0;background:linear-gradient(135deg,var(--accent-glow),rgba(var(--accent-rgb),0.03));border:1px solid rgba(var(--accent-rgb),0.25);border-radius:16px;padding:24px 20px;}
.archetype-label{font-size:var(--font-size-xs);letter-spacing:0.25em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.archetype-name{font-family:var(--font-heading);font-size:var(--font-size-xl);margin-bottom:4px;}
.archetype-def{font-size:var(--font-size-md);color:var(--text-muted);line-height:1.5;margin-bottom:14px;}
.archetype-text{font-size:var(--font-size-body);line-height:1.78;font-weight:300;margin-bottom:14px;}
.archetype-sig{display:flex;gap:10px;flex-wrap:wrap;}
.sig-pill{background:var(--surface2);border:1px solid rgba(107,86,68,0.30);border-radius:20px;padding:5px 12px;font-size:var(--font-size-meta);color:var(--text-muted);}
.sig-pill span{color:var(--accent);}

/* SECTION BLOCKS */
.section-block{margin:16px 20px 0;}
.trn-wrap .section-block:has(+ .section-block){padding-bottom:16px;border-bottom:1px solid var(--border);}
.section-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;cursor:pointer;}
.section-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);flex-shrink:0;}
.section-title{font-family:var(--font-heading);font-size:22px;font-weight:700;}
.section-chevron{margin-left:auto;color:var(--text-dim);font-size:var(--font-size-meta);transition:transform 0.2s;}
.section-chevron.open{transform:rotate(180deg);}
.section-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.3s ease;}
.section-body-inner{overflow:hidden;}
.resumo-card{margin:8px 20px 0;padding:18px 20px;}
.resumo-text{font-size:17px;line-height:1.6;font-weight:300;color:var(--text);}
.adj-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 20px 0;padding:0 20px;}
.adj-chip{font-size:13px;padding:6px 14px;border-radius:20px;background:var(--surface2);color:var(--text);border:1px solid rgba(107,86,68,0.30);}
.adj-chip-strong{background:var(--surface2);color:var(--text);}

/* PERFIL VIVO — traços vivos, slots por bloco, tensão (Camada A passo 3) */
.section-eyebrow-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin:20px 20px 10px;}
.trait-card-source{font-size:11px;color:var(--text-dim);margin-bottom:8px;}
/* trait-card-grid/.trait-card/.trait-card-eyebrow/.trait-card-sentence removidas
   2026-08-05 junto com buildConceptObservationsHTML ("Conceitos observados",
   qualidade ruim, a pedido da Ana) — só trait-card-source segue em uso
   (buildChapterConceptLeadHTML, "Entenda seu mapa"). */
/* Trocado de chips/pílulas pra bullet list (2026-08-05, a pedido da Ana — "muito
   mais fácil de ler" que uma fileira de pílulas). Clique continua expandindo o
   mesmo painel de evidência (.trait-chip-detail e afins, nomes mantidos — só a
   apresentação da lista mudou, não o conteúdo/comportamento por trás). */
.trait-chip-row{margin:0 20px;padding:0;list-style:none;}
.trait-chip{display:block;width:100%;text-align:left;background:none;border:none;position:relative;font-family:var(--font-heading);font-size:14.5px;font-weight:600;text-transform:capitalize;color:var(--text);padding:7px 0 7px 18px;cursor:pointer;transition:color .15s;}
.trait-chip::before{content:'';position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:50%;background:var(--text-dim);transition:background .15s;}
.trait-chip.expanded{color:var(--accent);}
.trait-chip.expanded::before{background:var(--accent);}
.trait-chip-detail{margin:10px 20px 0;}
.trait-chip-detail .section-body-inner{padding:0;transition:padding 0.3s ease;}
.trait-chip-detail.open .section-body-inner{padding:14px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;}
.trait-chip-sentence{font-family:var(--font-heading);font-size:14.5px;line-height:1.4;color:var(--text);margin:0 0 8px;}
.trait-chip-source{font-size:11px;color:var(--text-dim);margin-bottom:8px;}
.slot-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600;margin:18px 0 8px;}
.slot-label:first-child{margin-top:0;}
.slot-empty{font-size:13px;color:var(--text-dim);font-style:italic;padding:10px 12px;background:var(--surface2);border-radius:10px;}
.tension-placeholder{margin:0 20px;font-size:14px;color:var(--text-dim);line-height:1.6;padding:14px 16px;background:var(--surface2);border-radius:12px;}
.mapa-detail-block{margin:0 20px;}
.mapa-detail-head{display:flex;align-items:center;gap:10px;margin:22px 0 12px;}
.mapa-detail-head:first-child{margin-top:0;}
.mapa-detail-num{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mapa-detail-title{font-family:var(--font-heading);font-size:16px;font-weight:500;}
.subtab-row{display:flex;gap:8px;margin:0 0 12px;}
.subtab-btn{font-size:12px;padding:6px 12px;border-radius:20px;background:var(--surface2);color:var(--text-dim);border:1px solid rgba(107,86,68,0.30);cursor:pointer;font-family:var(--font-body);}
.subtab-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.change-grid{display:flex;flex-direction:column;gap:10px;margin:0 20px;}
@media(min-width:480px){.change-grid{flex-direction:row;align-items:stretch;}}
.change-card{flex:1;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cosmic-purple);border-radius:14px;padding:14px 15px;}
.change-when{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.change-quote{font-family:var(--font-heading);font-size:14.5px;line-height:1.5;font-style:italic;color:var(--text);margin:0;}
.change-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;}
@media(max-width:479px){.change-arrow{transform:rotate(90deg);padding:4px 0;}}
.reflection-item{padding:10px 12px;background:var(--surface2);border-radius:10px;border-left:2px solid var(--accent);margin-bottom:8px;}
.reflection-item:last-child{margin-bottom:0;}
.reflection-date{font-size:11px;color:var(--text-dim);margin-bottom:4px;}
.reflection-text{font-size:13.5px;color:var(--text);line-height:1.5;margin:0;}
.mapa-cta-block{margin:32px 20px 24px;padding:20px;background:var(--surface2);border-radius:16px;text-align:center;}
.mapa-cta-text{font-size:13px;color:var(--text-dim);margin-bottom:12px;}
.mapa-cta-btn{border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:999px;padding:10px 18px;font-size:13.5px;font-family:var(--font-body);cursor:pointer;}
.mapa-cta-btn:active{opacity:.7;}
.houses-row{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.houses-row:last-child{border-bottom:none;}
.houses-num{font-family:var(--font-heading);font-size:13px;color:var(--accent);width:20px;flex-shrink:0;}
.houses-label{font-size:14px;color:var(--text);flex-shrink:0;}
.houses-traits{font-size:13px;color:var(--text-dim);margin-left:auto;text-align:right;}
.section-body.open{grid-template-rows:1fr;}

/* LEITURA EM CAPÍTULOS — atalhos (chips) no topo de cada capítulo */
.chapter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.chapter-chip{font-size:12px;padding:6px 12px;border-radius:20px;background:var(--surface2);color:var(--text);border:1px solid rgba(107,86,68,0.30);cursor:pointer;}
.chapter-chip:active{opacity:.7;}
/* Hierarquia visual (2026-08-18, a pedido da usuária): destaca os chips cujo
   planeta-guia está no top3 de calcularPerfilDominante(). Revertido no mesmo
   dia (a pedido da usuária) do preenchimento sólido em gradiente pro fundo
   neutro de sempre — só texto+borda na cor de destaque, sem cor nova (reusa
   --accent). */
.chapter-chip-strong{background:var(--accent-dim);color:var(--accent);border-color:transparent;}

/* Divisória + selo "conteúdo exclusivo" + nome do subcapítulo (2026-08-15,
   a pedido da usuária, referência visual Personare) — marca onde os chips
   de atalho terminam e a leitura de verdade (cards de camada) começa.
   Cores reaproveitam o gradiente de marca já usado no resto do app (mesmo
   token de .btn-gold/.mapa-friends-btn em .interp-hero), não uma cor nova. */
.camada-divider{border:none;border-top:3px dashed var(--accent);margin:20px 0 16px;}
.camada-exclusive-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);color:var(--color-white);border-radius:12px;padding:9px 16px;font-family:var(--font-body);font-size:13px;font-weight:600;margin-bottom:14px;}
.camada-subchapter-name{margin-bottom:4px;}

/* Menu lateral de capítulos (2026-08-15, a pedido da usuária, referência
   Personare) — substitui as pills horizontais de seção (.interp-tabs,
   removido). Começou como gaveta off-canvas só no mobile (drawer com
   overlay, coluna fixa só em telas largas); a usuária pediu que os dois
   blocos (menu + capítulo) ficassem lado a lado sempre, em qualquer
   largura — .interp-sidebar-toggle/.interp-sidebar-overlay ficam
   escondidos permanentemente (código mantido, só desligado via CSS, caso
   precise voltar) e a coluna do menu usa clamp() pra ficar bem mais fina
   que o bloco do capítulo (mín. 108px) sem quebrar em telas pequenas,
   crescendo até um teto (220px) em telas largas. */
.interp-layout{display:flex;align-items:stretch;max-width:1040px;margin:0 auto;}
.interp-sidebar-toggle,.interp-sidebar-overlay{display:none;}
/* Painel de "Minha interpretação" (navegação chat-centric, 2026-08-23,
   tasks/todo.md) — mesma .page#page-interpretation de sempre, exibida como
   overlay deslizante ao lado do chat (desktop, ≥900px) em vez de troca de
   tela inteira. Aplicada/removida só via JS (openInterpretationPanel/
   closeInterpretationPanel), nunca por media query sozinha — o mobile
   continua no fluxo antigo (showPage de tela cheia), então não precisa de
   guarda de largura aqui. */
#page-interpretation.panel-mode{
  position:fixed;top:0;right:0;bottom:0;left:auto;
  width:min(480px,40vw);
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  z-index:60;
  transform:translateX(100%);
  transition:transform .25s ease;
  overflow-y:auto;
}
#page-interpretation.panel-mode.open{transform:translateX(0);}

/* SCREEN OVERLAY — Mapa (Fase B.2). Mesmo padrão visual acima (painel fixo
   deslizante à direita, desktop only, aplicado/removido só via JS em
   js/overlay.js), num seletor próprio — não generaliza a regra de
   #page-interpretation.panel-mode pra não acoplar a navegação de
   Interpretação (intocada) a esta feature nova. */
#page-chart-overlay.panel-mode{
  position:fixed;top:0;right:0;bottom:0;left:auto;
  width:min(480px,40vw);
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  z-index:60;
  transform:translateX(100%);
  transition:transform .25s ease;
  overflow-y:auto;
}
#page-chart-overlay.panel-mode.open{transform:translateX(0);}

/* SCREEN OVERLAY — Compatibilidade (Fase B.3). Mesmo padrão dos dois blocos
   acima, seletor próprio pelo mesmo motivo (não acoplar a features novas
   à navegação de Interpretação, intocada). */
#page-compat-overlay.panel-mode{
  position:fixed;top:0;right:0;bottom:0;left:auto;
  width:min(480px,40vw);
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  z-index:60;
  transform:translateX(100%);
  transition:transform .25s ease;
  overflow-y:auto;
}
#page-compat-overlay.panel-mode.open{transform:translateX(0);}
#page-interpretation.panel-mode .interp-layout{flex-direction:column;max-width:none;}
/* O menu lateral de 9 capítulos não cabe como coluna nem como gaveta
   off-canvas dentro de 480px (o CSS do drawer antigo foi removido do
   projeto — só a marcação JS de toggleInterpSidebar sobrou, sem regra de
   posicionamento pra reaproveitar). Vira uma tira horizontal rolável no
   topo do painel; sub-itens de cada capítulo ficam ocultos (não cabem) —
   ver tasks/lessons.md "Painel de Minha interpretação" pra observar no
   teste visual se isso gera sensação de capítulo incompleto. */
#page-interpretation.panel-mode .interp-sidebar{
  width:100%;height:auto;position:static;margin-top:0;border-radius:0;
  display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;
  border-right:none;border-bottom:1px solid var(--border);padding:8px;
}
/* .sidebar-chapter (o wrapper de cada capítulo) precisa de flex:0 0 auto
   explícito — sem isso, num container flex-row, cada wrapper encolhe pro
   min-content e o .sidebar-chapter-header (width:100% herdado do modo
   coluna) fica espremido a quase zero, cortando o título sem reticências
   (achado real no teste visual: texto ficava invisível, clique impreciso). */
#page-interpretation.panel-mode .interp-sidebar .sidebar-chapter{flex:0 0 auto;}
#page-interpretation.panel-mode .interp-sidebar .sidebar-chapter-header{width:auto;white-space:nowrap;padding:8px 12px;}
#page-interpretation.panel-mode .interp-sidebar .sidebar-chapter-title{flex:none;}
#page-interpretation.panel-mode .interp-sidebar .sidebar-chapter-chev{display:none;}
#page-interpretation.panel-mode .interp-sidebar .sidebar-subchapters{display:none;}
/* .interp-wrap normalmente sobe -80px pra sobrepor o banner (efeito "carta
   flutuante" do layout lado-a-lado original) — em panel-mode a tira de
   capítulos fica EM CIMA do wrap na coluna, então essa margem negativa
   cobria a tira inteira (achado real no teste visual: tira só aparecia via
   getBoundingClientRect, invisível na tela, escondida atrás do card
   branco). */
#page-interpretation.panel-mode .interp-wrap{margin-top:0;border-radius:0;}
/* Mesmo efeito "sobe por cima do banner" do .interp-wrap (ver comentário
   lá), só que dos dois lados — igual às duas cartas brancas lado a lado
   do Personare, ambas com o topo arredondado flutuando sobre a faixa
   colorida. */
.interp-sidebar{width:clamp(108px,28vw,220px);flex-shrink:0;background:var(--bg);border-right:1px solid var(--border);overflow-y:auto;padding:16px 0 40px;position:sticky;top:58px;height:calc(100vh - 58px);margin-top:-80px;border-radius:20px 0 0 0;}
.sidebar-chapter-header{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;text-align:left;padding:10px 10px;cursor:pointer;font-family:var(--font-body);}
.sidebar-chapter-header.active{background:var(--accent-dim);border-left:3px solid var(--accent);padding-left:7px;}
.sidebar-chapter-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--accent);}
.sidebar-chapter-header.active .sidebar-chapter-icon{background:var(--accent);color:var(--color-white);}
.sidebar-chapter-title{flex:1;font-size:12.5px;line-height:1.3;color:var(--text);}
.sidebar-chapter-header.active .sidebar-chapter-title{font-weight:600;}
.sidebar-chapter-chev{flex-shrink:0;font-size:10px;color:var(--text-dim);transition:transform .15s;}
.sidebar-chapter-chev.open{transform:rotate(180deg);}
.sidebar-subchapters{display:flex;flex-direction:column;padding:4px 10px 8px 32px;}
.sidebar-subitem{background:none;border:none;text-align:left;padding:6px 0;font-family:var(--font-body);font-size:11px;line-height:1.3;color:var(--text-dim);cursor:pointer;opacity:.7;}
.sidebar-subitem:hover{color:var(--accent);}
/* Hierarquia visual (2026-08-18): mesmo critério top3 do .chapter-chip-strong
   acima, aplicado ao item da sidebar — negrito + ponto de destaque à
   esquerda, sem cor nova (reusa --accent). */
.sidebar-subitem-strong{font-weight:700;color:var(--text);opacity:1;}
.sidebar-subitem-strong::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle;}
.interp-section-view{padding:20px;}
/* Título do capítulo (ex. "Identidade") — hierarquia visual reforçada
   2026-08-21: maior/mais grosso que os pills de atalho acima dele, cor
   sólida --accent (desacoplado do gradiente dos botões — esse gradiente
   ficou mais fade numa rodada anterior, o título não devia ter herdado
   isso). Seletor ".interp-section-view > .section-title" (não
   ".section-title" solto) de propósito — essa classe é reaproveitada em
   várias outras telas (Mapa Astral, trânsitos etc.) que não devem mudar
   de cor/tamanho. */
.interp-section-view>.section-title{font-size:32px;font-weight:800;color:var(--accent);}
/* Camadas (2026-08-11) — cada posição/aspecto vira 1 card sempre visível,
   nunca colapsado. Reaproveita .aspect-card (borda/raio/padding já existem). */
.camadas-list{display:flex;flex-direction:column;gap:12px;margin:12px 0 20px;}
.camada-card{display:flex;flex-direction:column;gap:6px;}
.camada-card-sextile{border-style:dashed;}
.camada-label{font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--text);}
.camada-strong-chip{display:inline-block;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);color:var(--color-white);font-size:10px;font-weight:700;letter-spacing:0.04em;padding:2px 8px;border-radius:10px;margin-right:8px;vertical-align:middle;}
.camada-text{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--text);margin:0;}
.camada-ver-aspecto{align-self:flex-end;font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-body);}
.example-card{font-size:14px;line-height:1.6;color:var(--text);}
.section-opening{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-dim);margin:4px 0 16px;font-style:italic;}

/* Accordion de dados técnicos (2026-08-11) — fechado por padrão, só o dado
   bruto (label + orbe), sem interpretação. */
.tech-accordion{margin-top:20px;}
.tech-accordion-toggle{display:flex;align-items:center;width:100%;gap:10px;background:none;border:none;border-top:1px solid var(--border);padding:14px 0;font-family:var(--font-body);font-size:13px;color:var(--text-dim);cursor:pointer;}
.tech-accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.3s ease;}
.tech-accordion-panel.open{grid-template-rows:1fr;}
.tech-accordion-panel-inner{overflow:hidden;padding:0;transition:padding 0.3s ease;}
.tech-accordion-panel.open .tech-accordion-panel-inner{padding:8px 0 4px;}
.tech-row{font-size:13px;color:var(--text-dim);padding:8px 0;border-bottom:1px solid var(--border);}
.tech-row-summary{font-weight:600;background:var(--surface);border-radius:8px;padding:8px 10px;line-height:1.6;}
/* Legenda curta de astro/signo/casa (citationGlossLine, js/chat.js) — abaixo
   da citação técnica, menor e mais apagada que ela (é explicação de apoio,
   não o dado principal da linha). */
.tech-row-gloss{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.5;}
/* Síntese+conselho da IA pro dado técnico (marcador [SÍNTESE:...], extraído
   em js/chat.js flushPara) — conteúdo, não legenda de apoio, por isso mais
   destacado que .tech-row-gloss: cor de texto normal, não a apagada. */
.tech-row-synth{font-size:12px;color:var(--text);margin-top:6px;line-height:1.5;}

/* INTERPRETATION GROUPS (posições agrupadas por tema) */
.group-block{margin:20px 20px 0;}
.group-heading{font-family:var(--font-heading);font-size:16px;font-weight:500;border-left-width:3px;border-left-style:solid;padding-left:10px;margin-bottom:10px;}
.position-row{margin-bottom:12px;}
.aspect-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cosmic-purple);border-radius:14px;padding:14px 16px;}
.position-header{display:flex;align-items:center;gap:10px;padding:0 0 4px;cursor:pointer;}
.position-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.position-label{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--text);flex:1;}
.aspect-subcard{margin-top:14px;padding:10px 12px;background:var(--surface2);border-radius:10px;border-left:2px solid var(--accent);}
.aspect-subcard-label{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--text);opacity:0.85;}
.citation-field{margin-top:14px;}
.citation-field:first-child{margin-top:0;}
.citation-label{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--text-muted);border-left:2px solid var(--accent);padding-left:8px;}
.citation-text{font-family:var(--font-body);font-size:15px;line-height:1.85;font-weight:300;color:var(--text);margin:4px 0 0;}
.citation-synthesis{font-family:var(--font-heading);font-size:19px;font-weight:400;line-height:1.4;color:var(--text);margin:0 0 16px;}
.citation-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;}
.citation-list li{font-family:var(--font-body);font-size:15px;line-height:1.6;font-weight:300;color:var(--text);padding-left:16px;position:relative;}
.citation-list li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent);}
.citation-facet{margin-top:16px;}
.citation-facet:first-child{margin-top:0;}
.citation-facet-title{font-family:var(--font-heading);font-size:15px;font-weight:500;color:var(--accent);margin:0 0 4px;}
.citation-facet-text{font-family:var(--font-body);font-size:15px;line-height:1.85;font-weight:300;color:var(--text);margin:0;}
.citation-development{font-style:italic;}

/* QUESTION CARDS */
.q-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cosmic-purple);border-radius:14px;padding:18px 18px 14px;margin-bottom:10px;}
.q-question{font-size:var(--font-size-md);color:var(--text-dim);margin-bottom:10px;font-style:italic;}
.q-label-wrap{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.q-label{font-size:var(--font-size-base);font-weight:500;color:var(--accent);}
.q-label-def{font-size:var(--font-size-meta);color:var(--text-muted);line-height:1.5;margin-bottom:10px;}
.q-text{font-size:var(--font-size-base);line-height:1.72;font-weight:300;color:var(--text);}
.q-placement{font-size:var(--font-size-sm);color:var(--text-dim);margin-top:8px;font-style:italic;}

/* FULL CHART TABLE */
.full-chart{padding:0 20px;}
.planet-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
.planet-row:last-child{border-bottom:none;}
.planet-name{font-size:var(--font-size-base);font-weight:400;color:var(--text);width:80px;flex-shrink:0;}
.planet-sign{font-size:var(--font-size-base);color:var(--accent);width:100px;flex-shrink:0;}
.planet-house{font-size:var(--font-size-meta);color:var(--text-muted);width:60px;flex-shrink:0;}
.planet-deg{font-size:var(--font-size-meta);color:var(--text-dim);margin-left:auto;}
.planet-retro{font-size:var(--font-size-sm);color:var(--color-retrograde);margin-left:4px;}
.table-header{display:flex;align-items:center;gap:10px;padding:8px 0 4px;margin-bottom:4px;}
.table-header span{font-size:var(--font-size-xs);letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);}
.aspect-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--font-size-md);}
.aspect-row:last-child{border-bottom:none;}

/* MAPA ASTRAL — Personare-inspired layout */
.mapa-hero{padding:16px 20px 4px;text-align:center;}
.mapa-hero-title{font-family:var(--font-heading);font-size:var(--font-size-body);font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.mapa-meta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin-bottom:16px;}
.mapa-meta-item{display:flex;align-items:center;gap:5px;font-size:var(--font-size-meta);color:var(--text-muted);}
.mapa-meta-item svg{flex-shrink:0;color:var(--text-dim);}
.mapa-friends-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:9px 18px;font-family:var(--font-body);font-size:var(--font-size-md);color:var(--text);cursor:pointer;transition:border-color 0.2s;}
.mapa-friends-btn:hover{border-color:var(--accent);}
/* Hero vinho contínuo com o header de navegação (2026-08-20, a pedido da
   usuária) — scoped só em .mapa-hero-own (mapa natal do próprio usuário),
   não nas classes base .mapa-hero/-title/-meta-item/-friends-btn, que
   continuam brancas na aba Compatibilidade e na visão "Ver de amigos"
   (mesmo padrão de override já usado por .interp-hero). */
.mapa-hero-own{background-image:url(assets/header-texture-nebula.webp),linear-gradient(90deg,var(--header-start) 0%,var(--header-mid1) 20%,var(--header-mid2) 45%,var(--header-mid2) 72%,var(--header-end) 100%);background-repeat:no-repeat,no-repeat;background-size:cover,100% 100%;background-position:center,center;background-blend-mode:overlay;padding-bottom:18px;}
.mapa-hero-own .mapa-hero-title{color:var(--color-white);text-shadow:0 1px 6px rgba(0,0,0,0.55);font-size:38px;font-weight:800;letter-spacing:0.02em;}
.mapa-hero-own .mapa-meta-item{color:var(--color-white);text-shadow:0 1px 6px rgba(0,0,0,0.55);}
.mapa-hero-own .mapa-meta-item svg{color:rgba(255,255,255,.75);}
.mapa-hero-own .mapa-friends-btn{background:var(--color-white);border-color:transparent;color:var(--accent);}
.mapa-hero-own .mapa-friends-btn:hover{opacity:.9;}

/* INTERPRETATION PAGE */
.interp-topbar{background:var(--bg);padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.interp-back-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--accent);font-family:var(--font-body);font-size:var(--font-size-base);font-weight:500;cursor:pointer;padding:8px 4px;}
/* .interp-wrap agora é o "card" com borda que segura o conteúdo do
   capítulo (2026-08-15, a pedido da usuária, referência Personare) —
   sobe por cima do banner (margin-top negativa) com cantos superiores
   arredondados, exatamente como o cartão branco do Personare flutua sobre
   a faixa roxa. Overlap de -44px (2026-08-15: rebalanceado junto com o
   padding de .interp-hero abaixo — o bloco de texto do banner precisa
   ficar centralizado dentro da faixa colorida visível, não só "grande",
   então o vão embaixo do botão precisa ficar parecido com o vão acima do
   título, não sobrar espaço morto enorme). */
.interp-wrap{flex:1;min-width:0;margin:-80px 0 0;padding:20px 0 40px;background:var(--bg);border:1px solid var(--border);border-radius:0 20px 0 0;position:relative;z-index:2;}

/* Banner colorido no topo da leitura (2026-08-15, a pedido da usuária,
   referência Personare) — antes a página começava direto nas abas, sem
   nenhum título; agora "MAPA ASTRAL" abre a leitura em destaque (bold,
   grande, fundo colorido), com os mesmos metadados de nascimento e o
   atalho "Ver de amigos" que já existiam no header da aba Mapa
   (.mapa-hero). Cobre a largura inteira da tela (vive fora de
   .interp-wrap, ver #interp-hero-wrap no HTML). Cor: passou por vários
   ajustes na mesma sessão (tokens dedicados mais saturados, depois um
   trio "pôr do sol") até a usuária pedir de volta o gradiente original —
   mesmo --gradient-start/--gradient-end do botão "Conteúdo exclusivo
   Órbita" (.camada-exclusive-badge), já reativo a tema claro/escuro, sem
   token dedicado. 90deg em vez do 135deg diagonal evita o canto mais
   escuro que lia como sombra/vinheta (ajuste anterior, mantido). Flex
   coluna centralizada (2026-08-15, a pedido da usuária — "bloco de texto
   centralizado no meio do heading"): título+metadados+botão viram um
   grupo só, centralizado verticalmente dentro do padding — antes o bloco
   ficava colado no topo (padding-bottom gigante só pra dar espaço pro
   card subir, sem nada centralizando o conteúdo dentro desse espaço).
   Padding rebalanceado (era 28→140, virou 40→100) — ainda sobra faixa
   colorida atrás do bloco do capítulo (ver overlap em .interp-wrap
   acima), mas sem o vão vazio desproporcional de antes. */
.interp-hero{background-image:url(assets/header-texture-nebula.webp),linear-gradient(90deg,var(--header-start) 0%,var(--header-mid1) 20%,var(--header-mid2) 45%,var(--header-mid2) 72%,var(--header-end) 100%);background-repeat:no-repeat,no-repeat;background-size:cover,100% 100%;background-position:center,center;background-blend-mode:overlay;padding:40px 0 100px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.interp-hero-inner{max-width:680px;margin:0 auto;padding:0 20px;}
/* Título bem maior que a linha de metadados (2026-08-15, a pedido da
   usuária — referência Personare, onde "MAPA ASTRAL" domina visualmente
   sobre nome/cidade/data/hora, que ficam pequenos e discretos abaixo).
   46px (2026-08-15: aumentado de 34px, "quase mais longo que os
   elementos abaixo dele" — a usuária quer a largura do título rivalizando
   com a largura da linha inteira de metadados, não só um pouco maior). */
.interp-hero-title{font-family:var(--font-heading);font-size:46px;font-weight:900;letter-spacing:0.02em;text-transform:uppercase;color:var(--color-white);margin-bottom:18px;line-height:1.1;text-shadow:0 1px 6px rgba(0,0,0,0.55);}
/* Linha de metadados menor que o título (2026-08-15, a pedido da usuária,
   referência Personare) — só dentro de .interp-hero, não mexe no
   .mapa-hero da aba Mapa. */
.interp-hero .mapa-meta-item{color:var(--color-white);font-size:12.5px;text-shadow:0 1px 6px rgba(0,0,0,0.55);}
.interp-hero .mapa-meta-item svg{color:rgba(255,255,255,.75);}
/* Menor que o padrão de .mapa-friends-btn (2026-08-15, a pedido da
   usuária, referência Personare; reduzido de novo na mesma sessão — "mais
   menor ainda") — só dentro de .interp-hero, não mexe no botão da aba
   Mapa. */
.interp-hero .mapa-friends-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:var(--color-white);padding:4px 10px;font-size:10.5px;gap:4px;}
.interp-hero .mapa-friends-btn svg{width:10px;height:10px;}
.interp-hero .mapa-friends-btn:hover{border-color:var(--color-white);}

.mapa-card{margin:8px 20px 0;padding:18px 4px 20px;background:var(--surface);border:1px solid var(--border);border-radius:14px;}
.mapa-card-viewlink{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-meta);color:var(--accent);margin-bottom:6px;font-family:var(--font-body);padding-left:14px;cursor:pointer;}
.mandala-crop{position:relative;max-height:190px;overflow:hidden;margin:0 -4px;transition:max-height 0.3s ease;}
.mandala-crop::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,rgba(var(--bg-rgb),0),var(--bg));pointer-events:none;transition:opacity 0.2s;}
.mandala-crop.expanded{max-height:1000px;}
.mandala-crop.expanded::after{opacity:0;}

.mapa-accordion{margin-top:16px;padding:0 14px;}
.mapa-accordion-header{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;border:2px solid var(--border);border-radius:14px;}
.mapa-accordion-title{font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:400;}
.mapa-accordion-chev{margin-left:auto;color:var(--text-dim);font-size:var(--font-size-meta);transition:transform 0.2s;}
.mapa-accordion-chev.open{transform:rotate(180deg);}
.mapa-accordion-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.3s ease;}
.mapa-accordion-body.open{grid-template-rows:1fr;}
.mapa-accordion-body-inner{overflow:hidden;padding-top:0;transition:padding-top 0.3s ease;}
.mapa-accordion-body.open .mapa-accordion-body-inner{padding-top:12px;}

.ptable-header{display:grid;grid-template-columns:1.3fr 1.3fr 46px 56px;align-items:center;gap:6px;padding:0 0 6px;}
.ptable-header span{font-size:var(--font-size-xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);}
.ptable-row{display:grid;grid-template-columns:1.3fr 1.3fr 46px 56px;align-items:center;gap:6px;padding:10px 0;border-bottom:1px solid var(--border);}
.ptable-row:last-child{border-bottom:none;}
.ptable-cell{display:flex;align-items:center;gap:8px;font-size:var(--font-size-md);color:var(--text);min-width:0;}
.ptable-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.ptable-cell svg{flex-shrink:0;color:var(--accent);}
.ptable-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ptable-cell-planet span{color:var(--accent);}
.ptable-house{font-size:var(--font-size-meta);color:var(--text-muted);font-weight:400;}
.ptable-deg{font-size:var(--font-size-meta);color:var(--text-dim);font-weight:400;}
.ptable-row.dim{-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 100%);mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 100%);}

/* Wrapper aditivo pra linha expansível da lista de posicionamentos (Incremento 1,
   interpretação-na-aba-mapa) — não altera .ptable-row/.ptable-header, só soma um
   chevron à direita e habilita o toggle da explicação curta abaixo da linha. */
.ptable-row-interactive{display:flex;align-items:center;gap:8px;cursor:pointer;}
.ptable-row-interactive .ptable-row{flex:1;min-width:0;}
.ptable-chev{color:var(--text-dim);font-size:var(--font-size-meta);transition:transform 0.2s;flex-shrink:0;}
.ptable-chev.open{transform:rotate(180deg);}
/* Texto da linha expandida no mesmo tamanho da tabela de planetas (não o
   19px de .citation-synthesis, pensado pra outro contexto/hierarquia) —
   ajuste a pedido da usuária depois de ver o Incremento 1 no navegador. */
.ptable-row-synthesis-label{font-size:var(--font-size-md);font-weight:700;color:var(--text);margin:12px 0 2px;}
.ptable-row-synthesis{font-size:var(--font-size-md);line-height:1.5;color:var(--text);margin:0 0 10px;}
.ptable-row-synthesis:last-child{margin-bottom:10px;}

.btn-see-all{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:2px solid var(--accent);border-radius:12px;padding:12px 16px;margin-top:14px;font-family:var(--font-body);font-size:var(--font-size-md);font-weight:700;color:var(--accent);cursor:pointer;}
.btn-see-all.open svg{transform:rotate(180deg);}
.btn-read-interp{display:block;width:100%;text-align:center;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);border:none;border-radius:12px;padding:14px;margin-top:18px;font-family:var(--font-body);font-size:var(--font-size-base);font-weight:500;color:var(--color-white);cursor:pointer;transition:transform 0.15s ease-out;}
.btn-read-interp:active{transform:scale(0.97);}

.friend-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border);cursor:pointer;transition:transform 0.12s ease-out;}
.friend-item:active{transform:scale(0.98);}
.friend-item:last-child{border-bottom:none;}
.friend-item:hover{opacity:0.8;}
.friend-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-md);flex-shrink:0;}
.friend-name{font-size:var(--font-size-base);color:var(--text);}

/* LOCKED */
.locked-section{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 20px;text-align:center;margin-bottom:10px;position:relative;overflow:hidden;}
.locked-blur-text{filter:blur(5px);opacity:0.3;pointer-events:none;font-size:var(--font-size-base);line-height:1.7;color:var(--text-muted);margin-bottom:16px;user-select:none;}
.locked-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;}
.lock-icon{font-size:24px;margin-bottom:8px;}
.lock-title{font-family:var(--font-heading);font-size:var(--font-size-lg);margin-bottom:6px;}
.lock-sub{font-size:var(--font-size-meta);color:var(--text-muted);margin-bottom:14px;line-height:1.5;}
.btn-unlock{background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);border:none;border-radius:10px;padding:11px 24px;font-family:var(--font-body);font-size:var(--font-size-md);font-weight:500;color:var(--color-white);cursor:pointer;transition:transform 0.15s ease-out;}
.btn-unlock:active{transform:scale(0.97);}

/* AI TAB — Fase UI.4a (tasks/todo.md): header deixou de ser uma seção com
   título+subtítulo (o logo/navbar acima já identifica o produto, repetir
   "Orbita AI" aqui só gastava altura sem dizer nada novo) e virou uma
   barrinha utilitária mínima — só o contexto (nome do mapa carregado) +
   os 2 botões funcionais (Histórico/Nova conversa), sem borda separando
   do resto (a intenção é a conversa começar quase imediatamente, sem
   sensação de "seção" antes dela). #ai-subhead continua sendo escrito via
   JS (chat.js/core.js) — só o estilo mudou, o elemento é o mesmo.*/
.ai-header{padding:8px 16px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0;}
.ai-header-sub{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ai-header-actions{display:flex;gap:6px;flex-shrink:0;}
.ai-header-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-size:11px;color:var(--text-muted);cursor:pointer;white-space:nowrap;font-family:var(--font-body);}
.ai-header-btn:active{opacity:0.7;}
.ai-messages{flex:1;overflow-y:auto;padding:8px 20px 16px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;}
@keyframes aiMsgIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.ai-msg{animation:aiMsgIn 0.2s ease-out;}
/* Fase UI.4a: a pergunta da usuária continua bolha (ajuda a marcar onde a
   pergunta termina e a leitura começa), mas mais contida e discreta —
   max-width menor, borda mais fraca — pra não competir visualmente com a
   resposta. A resposta da Orbita solta a moldura de balão inteiramente:
   sem fundo, sem borda, ocupando a largura toda — lida como um texto
   pessoal escrito pra ela, não como uma mensagem recebida num app de
   mensagens. */
.ai-msg.user{align-self:flex-end;max-width:82%;}
.ai-msg.assistant{align-self:stretch;max-width:100%;}
.ai-bubble{border-radius:16px;font-size:var(--font-size-base);line-height:1.65;font-weight:300;}
.ai-msg.user .ai-bubble{padding:10px 14px;background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),0.15);color:var(--text);border-bottom-right-radius:4px;}
.ai-msg.assistant .ai-bubble{padding:0;background:transparent;border:none;color:var(--text);border-radius:0;}
/* Fase UI.4c (tasks/todo.md) — a saudação proativa (mensagem que abre a
   conversa sozinha, ver announceProactiveOpeningInChat em js/chat.js) tem
   assinatura visual própria, discreta: um traço fino na cor de destaque
   (não uma caixa) + um glifo pequeno abrindo o primeiro parágrafo — sinaliza
   "isto é diferente de uma resposta comum" sem card, sem peso, sem gastar
   altura extra. Mesmo glifo (✦) já usado no ícone da aba Órbita/logo do
   preauth — reforça identidade sem introduzir elemento novo. */
.ai-msg.ai-opening .ai-bubble{padding-left:13px;border-left:2px solid rgba(var(--accent-rgb),0.35);}
.ai-msg.ai-opening .ai-bubble p:first-child::before{content:'✦  ';color:var(--accent);}
.ai-bubble p{margin-bottom:10px;}
/* Hierarquia de 3 níveis dentro de um bloco de leitura de sinastria/aspecto
   (### título da IA → parágrafo de mecanismo → dado técnico/diálogo) —
   título sempre visível com destaque forte (nível 1), corpo no peso padrão
   já existente (nível 2), dado técnico (reaproveita .tech-accordion* já
   usado na página de interpretação) e diálogo hipotético diferenciados
   como nível 3, pra não competir visualmente com a leitura. */
.ai-block-title{font-weight:700;font-size:1.08em;margin-top:18px;margin-bottom:6px;}
.ai-block-title:first-child{margin-top:0;}
.ai-dialogue{background:var(--bg);border-left:2px solid var(--border);border-radius:0 8px 8px 0;padding:8px 12px;margin:8px 0;}
.ai-dialogue-line{font-size:0.92em;font-style:italic;color:var(--text-muted);line-height:1.5;}
.ai-dialogue-line+.ai-dialogue-line{margin-top:4px;}
.ai-dialogue-line strong{font-style:normal;color:var(--text);}
.ai-bubble .tech-accordion{margin-top:8px;}
.ai-bubble .tech-accordion-toggle{padding:8px 0;font-size:12px;}
.ai-bubble .tech-row{font-size:12px;}
.ai-typing-dot{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--text-dim);animation:ai-typing-bounce 1.2s infinite ease-in-out;}
.ai-typing-dot:nth-child(2){animation-delay:0.15s;}
.ai-typing-dot:nth-child(3){animation-delay:0.3s;}
@keyframes ai-typing-bounce{0%,60%,100%{opacity:0.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.ai-bubble p:last-child{margin-bottom:0;}
/* Read Aloud (TTS, 2026-08-28) — mesma linguagem visual discreta do botão
   "salvar" já existente (texto pequeno, sublinhado, opacidade reduzida),
   só que como classe (não estilo inline) pra poder reagir ao data-state. */
.ai-tts{display:flex;align-items:center;gap:10px;margin-top:6px;}
.ai-tts-btn,.ai-tts-stop{background:none;border:none;cursor:pointer;font-size:11px;color:var(--text-muted);opacity:0.6;padding:2px 6px;font-family:'DM Sans','Noto Sans','Noto Sans JP',sans-serif;display:inline-flex;align-items:center;gap:4px;}
.ai-tts-btn{text-decoration:underline;}
.ai-tts-stop{text-decoration:underline;}
.ai-tts-btn:hover,.ai-tts-stop:hover{opacity:0.9;}
.ai-tts[data-state="speaking"] .ai-tts-btn,.ai-tts[data-state="paused"] .ai-tts-btn{color:var(--accent);opacity:0.9;}
.ai-tts[data-state="loading"] .ai-tts-btn{opacity:0.5;cursor:default;}
.ai-tts[data-state="idle"] .ai-tts-stop{display:none;}
.ai-tts-icon{font-size:12px;}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 20px 0;flex-shrink:0;}
.ai-suggestion{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:8px 14px;font-size:var(--font-size-md);color:var(--text-muted);cursor:pointer;transition:all 0.2s;}
.ai-suggestion:hover{border-color:var(--accent);color:var(--accent);}
/* Fase UI.4e (tasks/todo.md) — divisor do composer mais discreto (era a
   mesma opacidade de --border usada em bordas "estruturais" tipo cards;
   aqui é só uma referência sutil de onde a conversa termina, não uma
   seção nova) e campo de texto com borda mais suave — continua com
   affordance clara de campo editável, só menos "formulário". */
.ai-input-row{padding:12px 20px;border-top:1px solid rgba(74,85,104,0.1);display:flex;gap:10px;align-items:flex-end;flex-shrink:0;padding-bottom:calc(12px + var(--safe-bottom,0px));}
.ai-textarea{flex:1;background:var(--surface);border:1px solid rgba(74,85,104,0.14);border-radius:14px;padding:12px 14px;font-family:var(--font-body);font-size:var(--font-size-body);font-weight:300;color:var(--text);outline:none;resize:none;max-height:100px;-webkit-appearance:none;transition:border-color 0.2s;}
.ai-textarea:focus{border-color:var(--accent);}
.ai-send{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ai-premium-gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;}
.ai-premium-gate .gate-icon{font-size:40px;margin-bottom:16px;}
.ai-premium-gate h3{font-family:var(--font-heading);font-size:var(--font-size-2xl);margin-bottom:10px;}
.ai-premium-gate p{font-size:var(--font-size-base);color:var(--text-muted);line-height:1.6;margin-bottom:24px;}

/* AI HOME — Estados 1/2 (ver docs de navegação); some assim que a 1ª mensagem é enviada */
.ai-input-wrap{display:flex;flex-direction:column;flex-shrink:0;}
#ai-home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;gap:16px;overflow-y:auto;}
.ai-home-title{font-family:var(--font-heading);font-size:24px;color:var(--text);max-width:420px;}
.ai-home-hook{font-size:var(--font-size-base);color:var(--text-muted);max-width:420px;line-height:1.6;margin-top:-8px;}
.ai-home-input-slot{width:100%;max-width:480px;}
.ai-home-input-slot .ai-input-row{border-top:none;padding:0;}
.ai-home-discover{font-size:var(--font-size-md);color:var(--text-muted);margin-top:6px;}
.ai-home-categories{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:480px;}
.ai-cat-chip{background:none;border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-family:var(--font-body);font-size:var(--font-size-sm,13px);color:var(--text-muted);cursor:pointer;transition:all 0.2s;}
.ai-cat-chip:hover{border-color:var(--accent);}
.ai-cat-chip.active{background:var(--accent-dim);border-color:transparent;color:var(--accent);}
/* Reestruturação Chat-como-Home (Incremento A) — card de navegação pra
   experiências que continuam sendo página própria (hoje só Mapa Astral).
   Mesma linguagem visual de .aspect-card (borda+raio+padding), não de
   .ai-cat-chip/.ai-suggestion (que são chips de seleção/pergunta, outro
   propósito). */
.ai-home-nav-cards{width:100%;max-width:480px;}
.ai-home-nav-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cosmic-purple);border-radius:14px;padding:14px 16px;text-align:left;cursor:pointer;transition:border-color 0.2s;}
.ai-home-nav-card:hover{border-color:var(--accent);}
.ai-home-nav-card-label{font-size:var(--font-size-sm,13px);color:var(--text-muted);}
.ai-home-nav-card-title{font-family:var(--font-heading);font-size:var(--font-size-lg);color:var(--text);}
/* Fase UI.4b (tasks/todo.md) — widget (renderWidgetPills, js/chat.js) precisa
   parecer uma AÇÃO ("abre o Mapa/Sinastria de verdade"), não mais uma
   sugestão de pergunta como .ai-cat-chip: fundo tingido de accent (não só
   contorno), texto na cor de destaque, e uma seta pequena via ::before
   sinalizando "isto leva a outro lugar" — sem trazer ícone SVG novo nem
   mudar a lógica de clique (só a classe mudou em renderWidgetPills). */
.ai-widget-chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),0.28);border-radius:999px;padding:7px 14px 7px 11px;font-family:var(--font-body);font-size:var(--font-size-sm,13px);font-weight:500;color:var(--accent);cursor:pointer;transition:all 0.2s;}
.ai-widget-chip::before{content:'↗';font-size:0.82em;opacity:0.75;}
.ai-widget-chip:active{opacity:0.7;}
#ai-home-questions{justify-content:center;max-width:480px;padding:0;}
.ai-typeahead{padding:0 20px 8px;display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.ai-typeahead-title{font-size:var(--font-size-sm,12px);color:var(--text-muted);padding:0 2px 2px;}
.ai-typeahead-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:var(--font-size-base);color:var(--text);cursor:pointer;transition:border-color 0.2s;}
.ai-typeahead-item:hover{border-color:var(--accent);}
.ai-followup-title{font-size:var(--font-size-sm,12px);color:var(--text-muted);width:100%;padding:0 2px;}

/* Chat IA no desktop — Fase UI.4d (tasks/todo.md): decisão de produto
   explícita foi NÃO alargar (era "chat grande tipo Claude" antes) — uma
   coluna de leitura mais ESTREITA que isso, com bastante espaço negativo
   nas laterais, mais perto de uma carta pessoal que de um dashboard.
   Mesma largura de .moon-wrap (já uma convenção de "página de leitura"
   neste projeto) — não inventa um valor novo. Sem segunda coluna, sem
   painel de contexto lateral, por decisão de produto (mobile é a
   prioridade; desktop é a mesma experiência com mais respiro, não um
   produto diferente). Mobile fica exatamente como está (regras abaixo do
   mesmo breakpoint da sidebar em index.html — precisam vir DEPOIS das
   regras base acima na cascata, senão a base vence por ordem de código
   apesar do media). */
@media(min-width:900px){
  .ai-header,.ai-home,.ai-messages,.ai-suggestions,.ai-input-wrap{max-width:640px;margin-left:auto;margin-right:auto;width:100%;}
  .ai-messages{padding:32px 24px;gap:24px;}
  .ai-msg.assistant{max-width:100%;}
  .ai-bubble{font-size:16px;line-height:1.8;}
  .ai-msg.user .ai-bubble{padding:12px 16px;}
  .ai-input-row{padding:16px 24px;}
  .ai-textarea{font-size:16px;padding:14px 16px;}
  .ai-header{padding:12px 24px;}
  .ai-suggestions{padding:12px 24px 0;}
}

/* MOON */
.moon-wrap{max-width:680px;margin:0 auto;padding:24px 20px 40px;}
.moon-header{text-align:center;margin-bottom:28px;}
.moon-icon-big{font-size:60px;margin-bottom:10px;line-height:1;}
.moon-phase-name{font-family:var(--font-heading);font-size:24px;margin-bottom:6px;}
.moon-date-str{font-size:var(--font-size-md);color:var(--text-muted);}
.moon-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:12px;}
.moon-card-title{font-family:var(--font-heading);font-size:var(--font-size-lg);margin-bottom:8px;color:var(--accent);}
.moon-card-text{font-size:var(--font-size-base);color:var(--text-muted);line-height:1.7;}
.moon-phases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.phase-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 6px;text-align:center;}
.phase-icon{font-size:var(--font-size-2xl);margin-bottom:6px;}
.phase-name{font-size:var(--font-size-2xs);color:var(--text-dim);letter-spacing:0.08em;text-transform:uppercase;line-height:1.3;}
.phase-date{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:3px;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(var(--black-rgb),0.75);z-index:200;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.modal-overlay.visible{opacity:1;pointer-events:all;}
.modal-sheet{background:var(--surface);border-radius:24px 24px 0 0;padding:28px 28px calc(28px + var(--safe-bottom,0px));width:100%;max-width:680px;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1);}
.modal-overlay.visible .modal-sheet{transform:translateY(0);}
.modal-handle{width:40px;height:4px;background:var(--border-hover);border-radius:2px;margin:0 auto 22px;}
.modal-icon{font-size:44px;text-align:center;margin-bottom:10px;}
.modal-title{font-family:var(--font-heading);font-size:var(--font-size-2xl);text-align:center;margin-bottom:8px;}
.modal-text{font-size:var(--font-size-base);color:var(--text-muted);text-align:center;line-height:1.6;margin-bottom:22px;}
.modal-stars{display:flex;justify-content:center;gap:10px;margin-bottom:22px;}
.modal-star{font-size:34px;cursor:pointer;transition:transform 0.2s;filter:grayscale(1) opacity(0.35);}
.modal-star.lit{filter:none;transform:scale(1.15);}
.btn-modal-skip{width:100%;background:none;border:none;color:var(--text-dim);font-family:var(--font-body);font-size:var(--font-size-base);cursor:pointer;padding:10px;}
/* AUTH */
.auth-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:32px 24px;}
.auth-card{width:100%;max-width:360px;display:flex;flex-direction:column;gap:16px;}
.auth-logo{text-align:center;margin-bottom:8px;}
.auth-logo-icon{display:flex;align-items:center;justify-content:center;}
.auth-logo-text{font-family:var(--font-heading);font-size:var(--font-size-2xl);letter-spacing:4px;color:var(--text);margin-top:6px;}
.btn-google{width:100%;padding:14px;background:var(--surface2);border:1px solid rgba(var(--overlay-rgb),0.12);border-radius:12px;color:var(--text);font-family:var(--font-body);font-size:var(--font-size-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:border-color .2s,transform 0.15s ease-out;}
.btn-google:active{transform:scale(0.97);}
.btn-google:hover{border-color:var(--accent);}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:var(--font-size-md);}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-input{width:100%;padding:13px 16px;background:var(--surface2);border:1px solid rgba(var(--overlay-rgb),0.12);border-radius:12px;color:var(--text);font-family:var(--font-body);font-size:var(--font-size-body);box-sizing:border-box;outline:none;transition:border-color .2s,box-shadow .2s;}
.auth-input:focus{border-color:rgba(var(--accent-rgb),0.6);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.12);}
.auth-input::placeholder{color:rgba(var(--overlay-rgb),0.35);}
.pwd-field{position:relative;}
.pwd-field .auth-input,.pwd-field .ob-input{padding-right:44px;}
.pwd-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:none;border:none;cursor:pointer;color:var(--text-dim);padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.pwd-toggle:hover{color:var(--text);}
.pwd-toggle svg{width:19px;height:19px;}
.pwd-toggle .pwd-icon-off{display:none;}
.pwd-toggle.showing .pwd-icon-on{display:none;}
.pwd-toggle.showing .pwd-icon-off{display:block;}
.auth-btn-main{width:100%;padding:13px 16px;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);border:none;border-radius:12px;color:var(--color-white);font-family:var(--font-body);font-size:var(--font-size-body);font-weight:600;cursor:pointer;margin-top:12px;}
.auth-links{display:flex;justify-content:space-between;margin-top:12px;}
.auth-link{background:none;border:none;color:var(--color-auth-link);font-family:var(--font-body);font-size:var(--font-size-md);font-weight:400;cursor:pointer;padding:0;transition:color .2s;}
.auth-link:hover{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.auth-link-primary{color:rgba(var(--overlay-rgb),0.85);font-weight:600;}
.auth-msg{font-size:var(--font-size-md);text-align:center;padding:8px 0;display:none;}

/* REDESIGN: Onboarding gradient + card */
#page-onboard,#page-preauth{background:linear-gradient(160deg,var(--onboard-bg-1) 0%,var(--sunset-1) 22%,var(--sunset-2) 45%,var(--sunset-3) 68%,var(--sunset-4) 85%,var(--onboard-bg-3) 100%) !important;}
#page-onboard .ob-slide{padding:0;min-height:100dvh;}
.ob-top-bar{display:flex;align-items:center;padding:16px 20px 0;gap:10px;position:absolute;top:0;left:0;right:0;z-index:5;}
.ob-back{background:none;border:none;color:rgba(var(--white-rgb),0.7);font-size:var(--font-size-2xl);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;font-family:var(--font-heading-alt);}
.ob-back:active{opacity:0.5;}
.ob-back.hidden{visibility:hidden;}
.ob-progress{display:flex;gap:4px;flex:1;}
.ob-progress-seg{flex:1;height:3px;border-radius:2px;background:rgba(var(--white-rgb),0.15);transition:background 0.3s;}
.ob-progress-seg.filled{background:var(--accent);}
/* Carrossel horizontal de características (aba Par Ideal) — mesmo padrão de
   barra segmentada do onboarding acima, mas com cores que funcionam sobre o
   card claro/escuro do app (não o fundo escuro fixo do onboarding). */
.ip-carousel-progress{display:flex;gap:4px;margin-bottom:10px;}
.ip-carousel-seg{flex:1;height:3px;border-radius:2px;background:var(--border);transition:background 0.3s;}
.ip-carousel-seg.filled{background:var(--accent);}
.ip-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.ip-carousel-track::-webkit-scrollbar{display:none;}
.ip-carousel-item{flex:0 0 100%;scroll-snap-align:start;box-sizing:border-box;}
.ip-carousel-card{max-height:clamp(220px,34vh,300px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.ob-gradient-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:48px;min-height:120px;}
.ob-gradient-area .logo-text{color:rgba(var(--white-rgb),0.85);font-size:24px;letter-spacing:0.15em;font-family:var(--font-heading-alt);font-weight:500;}
.ob-card{background:var(--onboard-surface);border-radius:28px 28px 0 0;padding:32px 28px calc(32px + var(--safe-bottom));width:100%;--text:var(--onboard-text);--text-secondary:var(--onboard-text-secondary);--text-muted:var(--onboard-text-muted);--text-dim:var(--onboard-text-dim);--placeholder:var(--onboard-placeholder);--border:var(--onboard-border);--border-hover:var(--onboard-border-hover);--surface:var(--onboard-surface);--surface2:var(--onboard-surface2);}
.ob-card .ob-q{color:var(--text);text-align:left;margin-bottom:20px;font-size:var(--font-size-2xl);line-height:1.3;font-family:var(--font-heading-alt);font-weight:600;}
.ob-hl{color:var(--accent);font-weight:600;}
.ob-card .ob-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:15px 16px;font-size:var(--font-size-lg);font-family:var(--font-heading-alt);}
.ob-card .ob-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.12);}
.ob-card .ob-input::placeholder{color:var(--placeholder);}
.ob-card .auth-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:var(--font-heading-alt);}
.ob-card .auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.12);}
.ob-card .auth-input::placeholder{color:var(--placeholder);}
.ob-card .btn-gold{border-radius:12px;padding:15px;font-size:var(--font-size-body);margin-top:12px;font-family:var(--font-heading-alt);font-weight:500;}
.ob-card .btn-google{background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:var(--font-heading-alt);font-weight:500;}
.ob-card .btn-google:hover{border-color:var(--accent);}
.ob-card .auth-divider{color:var(--text-dim);font-family:var(--font-heading-alt);}
.ob-radio-group{display:flex;gap:32px;margin:8px 0 4px;}
.ob-radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--font-size-lg);color:var(--text-secondary);font-family:var(--font-heading-alt);font-weight:400;padding:6px 0;}
.ob-radio-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-hover);display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;}
.ob-radio.selected .ob-radio-dot{border-color:var(--accent);}
.ob-radio.selected .ob-radio-dot::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--accent);}
.ob-check{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:var(--font-size-base);color:var(--text-secondary);font-family:var(--font-heading-alt);line-height:1.5;}
.ob-check input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;flex-shrink:0;cursor:pointer;}
.ob-check a{color:var(--accent);text-decoration:underline;}
.ob-card .ob-msg{font-size:var(--font-size-md);text-align:center;padding:8px 0;display:none;}

/* JOURNAL / DIÁRIO */
.jrn-wrap{max-width:680px;margin:0 auto;padding:20px 20px 40px;}
.jrn-page-title{font-family:var(--font-heading);font-size:34px;font-weight:700;letter-spacing:-0.5px;color:var(--text);margin-bottom:4px;}
.jrn-page-subtitle{font-size:var(--font-size-body);color:var(--text-dim);margin-bottom:20px;}

.jrn-primary-cta{margin-bottom:14px;}
.jrn-secondary-actions{display:flex;gap:8px;margin-bottom:22px;}
.jrn-secondary-btn{flex:1;background:none;border:1px solid var(--border);border-radius:12px;padding:10px 6px;font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--text-dim);cursor:pointer;}
.jrn-secondary-btn:active{opacity:0.7;}
.jrn-activity-line{font-size:var(--font-size-sm);color:var(--text-dim);margin-bottom:18px;}
.jrn-empty-caption{font-size:var(--font-size-body);color:var(--text-dim);margin-top:4px;}

.jrn-chapters-lead{font-size:var(--font-size-body);color:var(--text);font-weight:500;margin-bottom:22px;}
.jrn-chapters-list{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.jrn-chapter-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;cursor:pointer;}
.jrn-chapter-card:active{opacity:0.8;}
.jrn-chapter-n{font-size:11px;letter-spacing:0.1em;color:var(--text-dim);margin-bottom:6px;}
.jrn-chapter-title{font-family:var(--font-heading);font-size:19px;font-weight:600;color:var(--text);margin-bottom:4px;}
.jrn-chapter-subtitle{font-size:var(--font-size-sm);color:var(--text-dim);line-height:1.4;margin-bottom:12px;}
.jrn-chapter-status{font-size:var(--font-size-sm);color:var(--text-dim);margin-bottom:10px;}
.jrn-chapter-cta{font-size:var(--font-size-sm);color:var(--accent);font-weight:500;}
.jrn-chapters-recent-title{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin:4px 0 10px;}
.jrn-chapters-recent-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.jrn-chapters-recent-item{font-size:var(--font-size-sm);color:var(--text-dim);}
.jrn-history-link{background:none;border:none;color:var(--text-dim);text-decoration:underline;padding:4px 0;width:auto;}
.jrn-back-link{background:none;border:none;color:var(--text-dim);font-size:var(--font-size-sm);cursor:pointer;padding:0;margin-bottom:18px;font-family:var(--font-body);}
.jrn-chapter-detail-n{font-size:11px;letter-spacing:0.1em;color:var(--text-dim);margin-bottom:6px;}
.jrn-chapter-prompts-title{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin:22px 0 12px;}
.jrn-chapter-prompts{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;}
.jrn-chapter-prompt{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.jrn-chapter-prompt-text{font-size:var(--font-size-body);color:var(--text);line-height:1.5;margin:0 0 12px;}
.jrn-chapter-reflections-title{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin:4px 0 12px;}

.jrn-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:24px;}
.jrn-week-day{display:flex;flex-direction:column;align-items:center;gap:8px;}
.jrn-week-wd{font-size:11px;font-weight:600;letter-spacing:0.5px;color:var(--text-dim);text-transform:uppercase;}
.jrn-week-mark{width:40px;height:40px;border-radius:50%;border:1px solid rgba(var(--overlay-rgb),0.14);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);color:var(--text-dim);cursor:pointer;position:relative;transition:transform 0.12s ease-out;}
.jrn-week-mark:active{transform:scale(0.92);}
.jrn-week-day.jrn-week-today .jrn-week-mark{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid1),var(--gradient-mid2),var(--gradient-end));color:var(--color-white);border:none;font-weight:600;}
.jrn-week-day.has-activity:not(.jrn-week-today) .jrn-week-mark{color:var(--text);}
.jrn-week-day.has-activity .jrn-week-mark::after{content:'';position:absolute;bottom:-7px;width:5px;height:5px;border-radius:50%;background:var(--accent);}
.jrn-week-day.jrn-week-today.has-activity .jrn-week-mark::after{background:var(--color-white);}

.jrn-stats{display:flex;gap:12px;margin-bottom:24px;}
.jrn-stat-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;}
.jrn-stat-label{font-size:var(--font-size-body);color:var(--text-dim);margin-bottom:8px;}
.jrn-stat-num{font-family:var(--font-heading);font-size:28px;font-weight:700;color:var(--text);letter-spacing:-0.3px;}

.jrn-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;}
.jrn-tab{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 10px;font-size:var(--font-size-body);font-weight:500;color:var(--text-dim);cursor:pointer;font-family:var(--font-body);}
.jrn-tab.active{border-color:var(--text);color:var(--text);font-weight:600;}

.jrn-feed-month{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--text);margin:28px 0 14px;}
.jrn-feed-month:first-child{margin-top:0;}
.jrn-feed-item{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 18px;margin-bottom:12px;}
.jrn-feed-item.clickable{cursor:pointer;}
.jrn-feed-top{display:flex;align-items:center;gap:10px;}
.jrn-feed-icon{width:34px;height:34px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.jrn-feed-tag{font-size:var(--font-size-sm);color:var(--text-dim);background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:5px 14px;}
.jrn-feed-date{margin-left:auto;font-size:var(--font-size-sm);color:var(--text-dim);}
.jrn-feed-type{font-size:var(--font-size-sm);font-weight:500;color:var(--text);}
.jrn-feed-preview{margin:10px 0 0;font-size:var(--font-size-sm);color:var(--text-dim);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.jrn-feed-asked-label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;}
#jrn-detail-tag:not(:empty){margin-bottom:14px;}
.jrn-feed-empty{text-align:center;color:var(--text-dim);font-size:var(--font-size-body);padding:30px 0;}
.jrn-feed-loading{display:none;text-align:center;color:var(--text-dim);font-size:var(--font-size-sm);padding:14px 0;}
.jrn-feed-loading.visible{display:block;}
.jrn-new-entry-btn{width:100%;background:var(--surface);border:1px dashed var(--border);border-radius:16px;padding:16px;text-align:center;color:var(--text-dim);font-size:var(--font-size-body);cursor:pointer;margin-bottom:20px;font-family:var(--font-body);}

.lev-intensity-row{display:flex;gap:8px;margin-bottom:20px;}
.lev-int-btn{flex:1;padding:10px 0;text-align:center;border-radius:12px;border:1px solid rgba(var(--overlay-rgb),0.14);color:var(--text-dim);cursor:pointer;background:none;font-family:var(--font-body);font-size:var(--font-size-base);}
.lev-int-btn.active{border:none;color:var(--color-white);background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid1),var(--gradient-mid2),var(--gradient-end));font-weight:500;}
.lev-confirm-item{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;font-size:var(--font-size-body);color:var(--text);}
.lev-confirm-empty{color:var(--text-dim);font-size:var(--font-size-body);text-align:center;padding:20px 0;}
.lev-hint{display:none;font-size:var(--font-size-sm);color:var(--text-dim);text-align:center;margin-bottom:10px;}
.lev-hint.visible{display:block;}
.jrn-overlay{position:fixed;inset:0;background:rgba(var(--black-rgb),0.75);z-index:200;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.jrn-overlay.visible{opacity:1;pointer-events:all;}
.jrn-sheet{background:var(--surface);border-radius:24px 24px 0 0;padding:22px 22px calc(30px + var(--safe-bottom,0px));width:100%;max-width:680px;max-height:75vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1);}
.jrn-overlay.visible .jrn-sheet{transform:translateY(0);}
.jrn-sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.jrn-sheet-date{font-family:var(--font-heading);font-size:20px;}
.jrn-sheet-close{background:none;border:none;color:var(--text-muted);font-size:var(--font-size-2xl);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background 0.15s;}
.jrn-sheet-close:hover{background:var(--surface2);}
.jrn-sheet-transit{font-size:var(--font-size-base);color:var(--accent);margin-bottom:20px;line-height:1.4;}
.jrn-cats{display:flex;gap:10px;margin-bottom:22px;}
.jrn-cat{flex:1;padding:12px 0;text-align:center;border-radius:14px;border:1px solid rgba(var(--overlay-rgb),0.14);font-size:var(--font-size-base);color:var(--text-dim);cursor:pointer;background:none;font-family:var(--font-body);transition:transform 0.12s ease;}
.jrn-cat:active{transform:scale(0.96);}
.jrn-cat.active{border:none;color:var(--color-white);background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid1),var(--gradient-mid2),var(--gradient-end));font-weight:500;}
.jrn-chips-area{min-height:20px;}
.jrn-chips{display:none;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
@keyframes jrnChipsIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.jrn-chips.visible{display:flex;animation:jrnChipsIn 0.2s ease-out;}
.jrn-chip{padding:9px 16px;border-radius:18px;border:1px solid rgba(var(--overlay-rgb),0.14);font-size:13.5px;color:var(--text);cursor:pointer;background:none;font-family:var(--font-body);transition:transform 0.12s ease;user-select:none;}
.jrn-chip:active{transform:scale(0.95);}
.jrn-chip.selected{border:none;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid1),var(--gradient-mid2),var(--gradient-end));font-weight:500;color:var(--color-white);}
.jrn-chip-wrap{display:contents;}
.jrn-chip-wrap.expanded{display:flex;flex-direction:column;width:100%;gap:6px;align-items:flex-start;}
.jrn-intensity{display:none;gap:6px;}
.jrn-chip-wrap.expanded .jrn-intensity{display:flex;}
.jrn-int-opt{padding:6px 14px;border-radius:14px;border:1px solid rgba(var(--overlay-rgb),0.10);font-size:var(--font-size-meta);color:var(--text-dim);cursor:pointer;background:none;font-family:var(--font-body);transition:all 0.15s;user-select:none;}
.jrn-int-opt:active{transform:scale(0.95);}
.jrn-int-opt.active{border:none;background:linear-gradient(135deg,rgba(var(--gradient-start-rgb),0.4),rgba(var(--gradient-end-rgb),0.4));color:var(--color-white);font-weight:500;}
.jrn-note-section{margin-top:16px;}
.jrn-note-toggle{background:none;border:none;color:var(--text-dim);font-family:var(--font-body);font-size:13.5px;cursor:pointer;padding:8px 0;transition:color 0.15s;}
.jrn-note-toggle:hover{color:var(--text);}
.jrn-note-input{display:none;width:100%;min-height:80px;max-height:160px;padding:12px;border-radius:12px;border:1px solid rgba(var(--overlay-rgb),0.14);background:rgba(var(--overlay-rgb),0.04);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.5;resize:vertical;outline:none;transition:border-color 0.15s;box-sizing:border-box;}
.jrn-note-input:focus{border-color:rgba(var(--gradient-start-rgb),0.5);}
.jrn-note-input::placeholder{color:var(--text-dim);}
.jrn-note-section.expanded .jrn-note-toggle{display:none;}
@keyframes jrnNoteIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.jrn-note-section.expanded .jrn-note-input{display:block;animation:jrnNoteIn 0.25s ease-out;}
.jrn-note-error{display:none;font-size:var(--font-size-meta);color:var(--color-error);margin-top:6px;}
.jrn-note-section.has-error .jrn-note-error{display:block;}
.jrn-save{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-mid1) 33%,var(--gradient-mid2) 66%,var(--gradient-end) 100%);color:var(--color-white);font-family:var(--font-body);font-size:var(--font-size-body);font-weight:500;cursor:pointer;margin-top:8px;transition:opacity 0.15s;}
.jrn-save:disabled{opacity:0.25;cursor:not-allowed;}

/* PERFIL VIVO — reflexões (Fase 1) */
.pv-section{margin-top:32px;}
.pv-add-btn{width:100%;padding:14px;border:1px dashed var(--accent);border-radius:12px;background:none;color:var(--accent);font-family:var(--font-body);font-size:var(--font-size-base);cursor:pointer;margin-bottom:22px;}
.pv-add-btn:active{opacity:0.7;}
.pv-timeline{display:flex;flex-direction:column;gap:12px;}
.pv-empty{font-size:13px;color:var(--text-dim);padding:4px 0 12px;}
.pv-item{background:var(--surface);border:1px solid rgba(var(--overlay-rgb),0.1);border-radius:14px;padding:12px 14px;}
.pv-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.pv-item-date{font-size:11px;color:var(--text-dim);font-family:var(--font-body);}
.pv-item-cat{font-size:11px;padding:3px 10px;border-radius:999px;background:var(--surface2);color:var(--text-dim);}
.pv-item-text{font-size:14px;color:var(--text);line-height:1.5;margin:0;white-space:pre-wrap;}
.pv-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.pv-cat{padding:9px 14px;border-radius:14px;border:1px solid rgba(var(--overlay-rgb),0.14);font-size:13px;color:var(--text-dim);cursor:pointer;background:none;font-family:var(--font-body);transition:transform 0.12s ease;}
.pv-cat:active{transform:scale(0.96);}
.pv-cat.active{border:none;color:var(--color-white);background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid1),var(--gradient-mid2),var(--gradient-end));font-weight:500;}
.pv-textarea{display:block;margin-bottom:6px;}
.pv-prompt-text{font-size:15px;color:var(--text);line-height:1.5;margin:0 0 14px;font-weight:500;}

/* TRANSITS TAB */
.trn-wrap{max-width:680px;margin:0 auto;padding:20px 20px 40px;}
.trn-header{margin-bottom:24px;}
.trn-title{font-family:var(--font-heading);font-size:var(--font-size-2xl);margin-bottom:4px;}
.trn-date-str{font-size:var(--font-size-meta);color:var(--text-muted);}
.trn-count{font-size:var(--font-size-meta);color:var(--text-dim);margin-top:2px;}
.trn-recalc-btn{margin-top:12px;font-size:var(--font-size-meta);padding:7px 14px;}
/* Etapa 4 — estado emocional do dia (primeira versão visível, docs em lib/transits/generate-emotional-state-of-day.js) */
.trn-emotional-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;margin-bottom:20px;}
.trn-emotional-title{font-size:var(--font-size-2xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.trn-emotional-overall{font-size:var(--font-size-base);line-height:1.65;color:var(--text);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.trn-emotional-state{margin-bottom:12px;}
.trn-emotional-state:last-child{margin-bottom:0;}
.trn-emotional-state-name{font-family:var(--font-heading);font-size:16px;font-weight:600;color:var(--text);margin-bottom:3px;text-transform:capitalize;}
.trn-emotional-state-text{font-size:var(--font-size-base);line-height:1.6;color:var(--text-dim);}
.concept-bullets{margin:6px 0 8px;padding-left:18px;font-size:var(--font-size-base);color:var(--text);line-height:1.55;}
.concept-bullets li{margin-bottom:3px;}
.trn-block-label{font-family:var(--font-heading);font-size:14px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);margin:28px 20px 4px;scroll-margin-top:60px;}
.trn-block-label:first-child{margin-top:0;}
.trn-block-caption{font-size:var(--font-size-meta);color:var(--text-dim);margin:0 20px 14px;padding-bottom:14px;border-bottom:2px solid var(--accent);}
.trn-chips{position:sticky;top:0;z-index:5;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:16px 20px;margin:0 -20px 4px;background:var(--accent);}
.trn-chip{flex-shrink:0;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.4);border-radius:999px;padding:7px 14px;font-family:var(--font-body);font-size:var(--font-size-meta);color:#fff;cursor:pointer;white-space:nowrap;}
.trn-chip:active{opacity:0.7;}
.trn-badge-new{display:inline-block;font-size:var(--font-size-2xs);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:2px 8px;margin-right:8px;vertical-align:middle;}
.trn-sector{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;margin-bottom:12px;}
.trn-sector-label{font-size:var(--font-size-2xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.trn-sector-titulo{font-family:var(--font-heading);font-size:20px;font-weight:600;line-height:1.3;color:var(--text);margin-bottom:8px;}
.trn-sector-combos{font-size:var(--font-size-meta);line-height:1.6;color:var(--text-dim);margin-bottom:10px;}
.trn-sector-duracao{display:inline-block;font-size:var(--font-size-2xs);font-weight:600;letter-spacing:0.04em;color:var(--accent);background:rgba(var(--accent-rgb),0.14);border-radius:999px;padding:4px 12px;margin-bottom:16px;}
.trn-resumo{font-size:var(--font-size-base);line-height:1.65;font-weight:400;color:var(--text);margin-bottom:10px;}
.trn-orientacao{font-size:var(--font-size-base);color:var(--text-muted);line-height:1.65;font-weight:400;padding-top:10px;border-top:1px solid var(--border);}
.trn-subtitle{font-size:var(--font-size-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;}
.trn-resumo .trn-subtitle,.trn-orientacao .trn-subtitle{margin-top:0;}
.trn-bullets{margin:0 0 10px;padding-left:18px;font-size:var(--font-size-base);line-height:1.65;font-weight:400;color:var(--text);}
.trn-bullets li{margin-bottom:6px;}
.trn-bullets li:last-child{margin-bottom:0;}
.trn-qa-toggle{background:none;border:none;color:var(--accent);font-family:var(--font-body);font-size:var(--font-size-meta);letter-spacing:0.04em;cursor:pointer;padding:10px 0 0;display:block;}
.trn-technical{margin:20px 4px 0;padding-top:16px;border-top:1px solid var(--border);}
.trn-qa{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.trn-qa.open{display:block;}
.trn-qa-history{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.trn-qa-msg-user{font-size:var(--font-size-md);color:var(--accent);font-style:italic;line-height:1.55;}
.trn-qa-msg-assistant{font-size:var(--font-size-base);color:var(--text);font-weight:300;line-height:1.68;}
.trn-qa-input-row{display:flex;gap:8px;align-items:flex-end;}
.trn-qa-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-family:var(--font-body);font-size:16px;font-weight:300;color:var(--text);outline:none;resize:none;max-height:80px;transition:border-color 0.2s;-webkit-appearance:none;}
.trn-qa-input:focus{border-color:var(--accent);}
.trn-qa-input::placeholder{color:var(--text-dim);}
.trn-qa-send{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-mid1),var(--gradient-mid2),var(--gradient-end));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity 0.2s;}
.trn-qa-send:disabled{opacity:0.3;cursor:not-allowed;}