/* MAPA NATAL + SINASTRIA (#page-synastry) + INTERPRETAÇÃO — históricamente intercalados neste arquivo (SECTION BLOCKS genérico, DOSSIÊ DA RELAÇÃO, PERFIL VIVO/capítulos, SCREEN OVERLAYS, MAPA ASTRAL, INTERPRETATION PAGE); não foi reordenado na divisão pra preservar a cascata exata do CSS original. Use os comentários internos (Ctrl+F por MAPA ASTRAL / DOSSIÊ DA RELAÇÃO / INTERPRETATION PAGE) pra navegar dentro do arquivo. */

/* Sub-abas de Mapa (Mapa Natal / Trânsitos) — navegação interna dentro de tab-chart */
/* max-width/padding vêm de .app-container (aplicada junto no HTML) —
   aqui só o que é específico deste componente. */
.chart-subtab-toggle{display:flex;gap:6px;margin-top:16px;}
.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 */
/* Sem gradiente colorido de propósito (2026-09-11, pedido da usuária) —
   o fundo colorido "separava" visualmente a tela de carregamento do
   resto do app, como se fosse outra página. Fundo neutro (var(--bg),
   mesmo do resto da tela) em vez de background/border-radius próprios. */
.loading-full{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center;padding:40px 20px;background:var(--bg);}
.loading-orbit{width:64px;height:64px;margin:0 auto 28px;} /* orb em canvas (js/orb-mount.js) */

/* Skeleton do Nivel 1 da sinastria por contexto (js/compat.js,
   cmpSkeletonHTML) — mostra a estrutura dos 4 contextos instantaneamente
   ao clicar, antes da resposta da API chegar (que traz score e texto de
   IA juntos, num unico payload — nao da pra separar sem mudar o backend). */
@keyframes cmpSkelPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.cmp-skel-bar{background:var(--border);animation:cmpSkelPulse 1.4s ease-in-out infinite;}
.loading-msg{font-size:var(--font-size-body);color:var(--text-muted);font-style:italic;}

/* CHART RESULTS — new structure */
/* max-width/margin vêm de .app-container (aplicada junto no HTML);
   --flush porque .mandala-wrap/.mapa-card já têm seu próprio padding
   horizontal internamente. */
.chart-wrap{padding-bottom: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;}
/* Excluir minha conta (2026-09-28) */
.del-account-btn{color:var(--color-error);}
.del-type-hint{font-size:var(--font-size-md);color:var(--text-muted);margin:14px 0 8px;}
.del-confirm-input{width:100%;margin-bottom:4px;letter-spacing:0.08em;}
.modal-sheet .del-confirm-btn{background:var(--color-error);color:#fff;margin-top:12px;}
.modal-sheet .del-confirm-btn:disabled{opacity:0.4;}
.del-msg{display:none;font-size:var(--font-size-md);text-align:center;margin-top:10px;}
.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:inline-flex;align-items:center;justify-self:start;width:fit-content;color:var(--text);padding:12px;border-radius:12px;border:1.5px solid var(--text);cursor:pointer;position:relative;}
.mapa-navbar-menu>span{display:none;}
/* Funcionalidade movida do botão do usuário pro hamburger (2026-09-15,
   pedido explícito) — .avatar-menu por padrão ancora à direita (right:0,
   pensado pra ficar sob o chip do usuário, grid-column:3); aqui, sob o
   hamburger (grid-column:1, perto da borda esquerda), right:0 empurraria o
   menu pra fora da tela. Ancora pela esquerda em vez disso. */
.mapa-navbar-menu .avatar-menu{left:0;right:auto;}
.mapa-navbar-logo{grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text);width:100px;height:50px;}
.mapa-navbar-logo-text{font-family:var(--font-heading);font-size:var(--font-size-lg);letter-spacing:0.14em;text-align:center;}
.navbar-credits{grid-column:3;justify-self:end;font:inherit;font-size:14px;font-weight:600;color:var(--text);background:none;border:1.5px solid var(--text);border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap;}
.navbar-credits.empty{color:var(--accent);border-color:var(--accent);}
.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);background:var(--surface);text-align:left;font-family:var(--font-body);}
.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);}
/* Aba Settings em seções (2026-10-05): mais espaço entre seções do que dentro delas. */
.settings-page{max-width:520px;margin:0 auto;padding:32px 20px 40px;}
.settings-section{margin:0 0 36px;}
.settings-section:last-child{margin-bottom:0;}
.settings-section-title{font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);text-align:left;margin:0 0 12px;}
.settings-field-label{font-size:var(--font-size-md);color:var(--text-muted);text-align:left;margin:14px 0 6px;}
.settings-section-title+.settings-field-label{margin-top:0;}
.settings-section .settings-lang-select{margin-bottom:0;}
.settings-section .settings-option-group{margin-bottom:0;}
.settings-segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.settings-segmented .settings-option{justify-content:center;align-items:center;text-align:center;border:none;border-radius:7px;background:none;padding:9px 8px;font-size:var(--font-size-base);color:var(--text-muted);}
.settings-segmented .settings-option.selected{background:rgba(var(--accent-rgb),0.14);color:var(--text);font-weight:500;}
.settings-more{margin-top:10px;font-size:var(--font-size-md);color:var(--text-muted);}
.settings-more summary{cursor:pointer;color:var(--text-dim);text-decoration:underline;width:fit-content;}
.settings-more p{margin:10px 0 0;line-height:1.5;}
.settings-more p strong{display:block;color:var(--text);font-weight:500;}
.settings-row{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--surface);text-align:left;}
.settings-row+.settings-row,.settings-dev .settings-row{margin-top:8px;}
.settings-danger{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
.settings-danger .settings-field-label{margin-top:0;}
.settings-row--danger{border-color:var(--color-error);}
.settings-row--danger:hover{background:none;}
.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);}

/* DOSSIÊ DA RELAÇÃO — page-synastry (2026-09-10, pedido da usuária).
   Puramente visual: reaproveita .section-block/.section-title já existentes,
   só ajusta espaçamento/hierarquia dentro de #page-synastry pra parecer uma
   pasta contínua em vez de várias telas técnicas empilhadas. Nenhum destes
   seletores toca id/onclick usado por js/compat.js — são todos wrappers ou
   scoping novo. */
/* max-width/margin vêm de .app-container (aplicada junto no HTML);
   --flush porque .synastry-dossier-header-wrap/.section-block já têm
   seu próprio padding horizontal internamente. */
#page-synastry .synastry-dossier{padding-bottom:48px;}

/* Header leve "Nome & Nome" (2026-09-20, pedido da usuária: tirar o rótulo
   "Astrologia", o título "Sinastria" em caixa alta — substituídos por só
   os nomes, tamanho médio, sem caixa alta/tracking, visual mais orgânico
   com menos divisórias/mais espaço). Bloco continua centralizado, mesma
   convenção de sempre. Dados de nascimento (cmpHeroPersonLine, cálculo/API
   intocados) pré-exibidos direto abaixo dos nomes — o toggle "Dados
   usados" foi removido de novo (mesmo dia, pedido explícito). */
#page-synastry .synastry-dossier-header-wrap{padding:22px 20px 4px;text-align:center;}
#page-synastry .synastry-hero-names{font-family:var(--font-heading);font-weight:600;font-size:21px;color:var(--text);}
/* Linhas de nascimento: texto corrido, sem card/borda/divisória — nome em
   cor neutra, data/hora/cidade em destaque discreto. */
#page-synastry .synastry-hero-people{margin-top:14px;}
#page-synastry .synastry-hero-person{font-size:13px;color:var(--text-dim);line-height:1.7;}
#page-synastry .synastry-hero-meta{font-weight:600;color:var(--text-dim);}
/* Convite pra Órbita (cmpInviteHTML): link discreto abaixo dos dados de
   nascimento; o painel abre no lugar dele. Vale na pasta da pessoa e no
   mapa dela na aba Mapa (.mapa-hero, renderForeignChartView). */
#page-synastry .cmp-invite,.mapa-hero .cmp-invite{margin-top:10px;}
#page-synastry .cmp-invite-open,.mapa-hero .cmp-invite-open{background:none;border:none;padding:6px 4px;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--accent);text-decoration:underline;cursor:pointer;}
#page-synastry .cmp-invite-panel,.mapa-hero .cmp-invite-panel{max-width:360px;margin:6px auto 0;text-align:left;}
#page-synastry .cmp-invite-hint,.mapa-hero .cmp-invite-hint{font-size:13px;color:var(--text-dim);line-height:1.5;margin:0;}
#page-synastry .cmp-invite-send,.mapa-hero .cmp-invite-send{justify-content:center;}

/* Pill nav: mesma barra/comportamento de sempre, só encostada visualmente no
   conteúdo que ela navega (linha de baixo faz a costura com a 1ª seção).
   .chapter-chip-strong (já existente, ver cmpRelationTagsHTML) é reaproveitada
   como estado ativo — cmpInitPillScrollSpy só alterna essa classe via JS. */
#page-synastry .synastry-dossier-pillnav{padding:14px 16px 16px;border-bottom:1px solid var(--border);}
#page-synastry .synastry-dossier-pillnav .chapter-chip{transition:background-color .15s,color .15s;}

/* Seções fixas (Sinastria/Composto/Compatibilidade): separador fino em vez
   de cada uma parecer uma página nova — mesmo critério já usado em
   #page-interpretation .section-block. */
#page-synastry .section-block{margin-top:0;padding:28px 20px 0;border-top:1px solid var(--border);}
/* cmp-sec-sinastria é a 1ª .section-block do dossiê, mas não é o 1º filho do
   DOM (folder/mandala/pillnav vêm antes) — :first-child não bateria aqui,
   por isso o id direto, pra não duplicar a borda que a pillnav já desenha
   embaixo dela. */
#page-synastry #cmp-sec-sinastria{border-top:none;padding-top:20px;}

/* Conteúdo dentro de synastry-wrap (Sinastria) — rodada 2: troca os antigos
   "cards" (fundo+borda+raio empilhados) por blocos editoriais separados só
   por linha fina, pra ler como texto corrido em vez de caixas dentro da
   caixa. Usado por cmpBuildOverviewHTML/ConclusionHTML/SummaryHTML/
   howTheySeeMeHTML/InsightsHTML/ConversationsHTML (js/compat.js) — troca
   puramente de wrapper, sem mudar nenhum dado/condição de renderização. */
#page-synastry .synastry-editorial-block{padding:20px 0;border-top:1px solid var(--border);}
#page-synastry .synastry-editorial-block:first-child{padding-top:0;border-top:none;}
#page-synastry .synastry-editorial-title{font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px;}

/* "Dinâmicas da relação": título de capítulo — mesmo tamanho dos outros 3
   títulos de Nível 2 (Sinastria/Composto/Compatibilidade), mas com
   tratamento maiúsculo+tracking que os diferencia como o "capítulo" que
   contém as 13 áreas abaixo, todas com o MESMO tratamento visual entre si
   (subordinado ao título do grupo) — leem como um conjunto, não 13 telas
   independentes. Os ids/dados de cada área (cmp-sec-area-*) continuam
   exatamente os mesmos, só a classe .section-title dentro desse wrap fica
   menor/mais discreta. */
#page-synastry .synastry-dossier-areas-block>.section-title{font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;}
#page-synastry #synastry-areas-wrap .section-block{margin-top:0;padding:22px 0 0;border-top:1px solid var(--border);}
#page-synastry #synastry-areas-wrap .section-block:first-child{padding-top:22px;}
#page-synastry #synastry-areas-wrap .section-title{font-size:15px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);}

@media (max-width:480px){
  #page-synastry .synastry-hero-names{font-size:19px;}
}
.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. */
/* max-width/margin vêm de .app-container--wide (aplicada junto no
   HTML) — teto subiu de 1040px pra 1200px junto com a generalização do
   container (2026-09-11). --flush porque .interp-sidebar/.interp-wrap
   não têm padding horizontal próprio (a "borda" visual de cada um é
   quem baliza o conteúdo). */
.interp-layout{display:flex;align-items:stretch;}
.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);}

#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/margin/padding lateral vêm de
   .app-container (aplicada junto em js/interpretation.js), por isso
   não tem regra própria aqui. */
/* 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;white-space:pre-line;}
.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);}

/* Grid de pastas por pessoa (2026-09-21, aba Relações) */
.cmp-folder-search{margin:0 0 12px;}
.cmp-folder-card[hidden],.cmp-folder-empty[hidden]{display:none;}
.cmp-folder-grid-inner{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.cmp-folder-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 12px 16px;cursor:pointer;transition:transform 0.12s ease-out;}
.cmp-folder-card:active{transform:scale(0.97);}
.cmp-folder-card:hover{border-color:var(--border-hover);}
/* Palavra "Editar" no rodapé do cartão (era um lápis no canto: como texto, cobria o avatar). */
.cmp-folder-edit{margin-top:auto;background:none;border:none;color:var(--accent);cursor:pointer;font-family:inherit;font-size:12px;line-height:1;padding:6px 8px 0;white-space:nowrap;}
.cmp-folder-avatar{width:52px;height:52px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);font-weight:700;flex-shrink:0;}
.cmp-folder-name{font-size:var(--font-size-base);font-weight:600;color:var(--text);}
.cmp-folder-vinculo{font-size:11px;color:var(--accent);background:var(--accent-dim);border-radius:20px;padding:2px 10px;}
.cmp-folder-count{font-size:12px;color:var(--text-muted);}
.cmp-folder-card-add{border-style:dashed;background:none;color:var(--text-muted);justify-content:center;min-height:118px;}
.cmp-folder-add-icon{font-size:24px;color:var(--accent);line-height:1;}
.cmp-folder-add-label{font-size:var(--font-size-base);color:var(--accent);}
/* Cálculo entre duas pessoas salvas (cmpRenderPairCalc, js/compat.js). */
.cmp-pair{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.cmp-pair:empty{display:none;}
.cmp-pair-hint{font-size:14px;color:var(--text-muted);line-height:1.6;margin:6px 0 16px;}
.cmp-pair-picks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.cmp-pair-picks .st-select{flex:1 1 160px;min-width:0;}
.cmp-folder-empty{grid-column:1/-1;color:var(--text-muted);font-size:14px;padding:24px 4px;text-align:center;}

/* Selo "Amostra Grátis" dentro do card de Sinastria/Mapa Composto (2026-09-21) */
.cmp-card-sample-gate{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accent-dim);border:1px solid var(--accent);border-radius:12px;padding:10px 14px;margin-bottom:16px;flex-wrap:wrap;}
.cmp-card-sample-badge{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.02em;}
.cmp-card-sample-gate button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}


/* ============================================================
   DOSSIÊ DA PESSOA (2026-10-06, pedido da usuária: a pasta da pessoa vira um
   dossiê organizado — ficha, abas, temas com contador, Guardados por tema,
   Resumo). Mockup: https://claude.ai/artifact/2Hh6BL9gSYRYSrEyXRH8Sa
   Só aparência — a lógica está em js/compat.js (bloco "DOSSIÊ DA PESSOA").
   ============================================================ */

/* Uma aba (seção) visível por vez: #synastry-dossier[data-tab]. */
#page-synastry .cmp-pane{display:none;padding-top:20px;}
#page-synastry .synastry-dossier[data-tab="resumo"] #cmp-sec-resumo,
#page-synastry .synastry-dossier[data-tab="panorama"] #cmp-sec-panorama,
#page-synastry .synastry-dossier[data-tab="sinastria"] #cmp-sec-sinastria,
#page-synastry .synastry-dossier[data-tab="composto"] #cmp-sec-composto,
#page-synastry .synastry-dossier[data-tab="guardados"] #cmp-sec-guardados{display:block;}
/* O nome da aba já diz onde a pessoa está; cada hub tem o próprio título. */
#page-synastry #cmp-sec-sinastria-title,
#page-synastry #cmp-sec-composto-title,
#page-synastry #cmp-sec-guardados-title{display:none;}
/* O hub já traz o próprio respiro lateral — sem duplicar o da seção. */
#page-synastry #cmp-sec-sinastria .pv-hub,
#page-synastry #cmp-sec-composto .pv-hub{padding-left:0;padding-right:0;}

/* Abas */
#page-synastry .synastry-dossier-pillnav{padding:6px 0 14px;border-bottom:1px solid var(--border);}
#page-synastry .cmp-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 20px;scrollbar-width:none;}
#page-synastry .cmp-tabs::-webkit-scrollbar{display:none;}
#page-synastry .cmp-tabs .chapter-chip{flex:none;font-size:14px;font-weight:500;padding:10px 16px;min-height:44px;border-radius:999px;font-family:var(--font-body);}

/* Ficha */
#page-synastry .synastry-dossier-header-wrap{padding:18px 20px 8px;text-align:left;}
.cmp-fc{display:flex;flex-direction:column;gap:14px;padding:4px 0 0;}
.cmp-fc-top{display:flex;align-items:center;gap:14px;}
.cmp-fc-avatar{flex:none;width:64px;height:64px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:26px;font-weight:600;}
.cmp-fc-id{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
.cmp-fc-name{font-family:var(--font-heading);font-size:26px;font-weight:600;line-height:1;color:var(--text);overflow-wrap:anywhere;}
.cmp-fc-tag{background:var(--accent-dim);color:var(--accent);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;}
.cmp-fc-meta{font-size:14px;color:var(--text-muted);}
.cmp-fc-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cmp-fc-chip{border:1px solid var(--pv-card-border);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--text);}
.cmp-fc-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;border-top:1px solid var(--border);padding-top:12px;}
.cmp-fc-actions .cmp-invite{flex:1;margin-top:0;min-width:0;}
.cmp-fc-actions .cmp-invite-panel{margin:6px 0 0;max-width:none;}
.cmp-fc-edit{background:none;border:none;padding:6px 4px;font-family:var(--font-body);font-size:14px;color:var(--text-muted);cursor:pointer;}

/* Hub: contador por tema */
.pv-hub-card--has{border-color:var(--accent);}
.pv-hub-card-badge{position:absolute;top:12px;right:12px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:99px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;}

/* Guardados por tema */
.cmp-g{border:none;padding:0;margin:0 0 22px;}
.cmp-g.th-section{padding:0;}
.cmp-g-head{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:4px 0;min-height:44px;}
.cmp-g-head::-webkit-details-marker{display:none;}
.cmp-g-ico{flex:none;width:32px;height:32px;border-radius:10px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.cmp-g-ico svg{width:18px;height:18px;}
.cmp-g-title{flex:1;font-family:var(--font-heading);font-size:17px;font-weight:600;color:var(--text);}
.cmp-g-count{font-size:12px;color:var(--text-muted);}
.cmp-chev{color:var(--text-muted);transition:transform .15s;}
.cmp-g[open] .cmp-chev{transform:rotate(180deg);}
.cmp-g-body{display:flex;flex-direction:column;gap:0;padding-top:4px;}
.cmp-g-open{margin-top:12px;}
/* Sem caixa (2026-10-06, celular: texto colava na borda) — só separador fino.
   Seletor com .th-item/.cmp-g-body de propósito: .th-item (perfil-vivo-tabs.css)
   zera o padding lateral e :last-child tira a linha de baixo. */
.cmp-gcard{display:flex;flex-direction:column;gap:8px;}
.cmp-g-body>.cmp-gcard.th-item,.cmp-g-body>.cmp-gcard.th-item:last-child{padding:14px 4px;border:none;border-bottom:1px solid var(--border);}
.cmp-g-body>.cmp-gcard.th-item:last-of-type{border-bottom:none;}
.cmp-gcard-date{font-size:12px;color:var(--text-muted);}
.cmp-gcard-key{font-size:16px;font-weight:600;line-height:1.35;color:var(--text);}
.cmp-gcard-text{font-size:14px;line-height:1.5;color:var(--text-muted);white-space:pre-wrap;}
.cmp-gcard-actions{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);padding-top:10px;margin-top:2px;}
.cmp-gcard-spacer{flex:1;}
.cmp-gcard-practice{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--pv-card-border);border-radius:999px;padding:7px 12px;min-height:36px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--text);cursor:pointer;}
.cmp-gcard-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;}
.cmp-g-open{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-dim);color:var(--accent);border:1px solid var(--pv-card-border);border-radius:14px;padding:12px;min-height:44px;font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;}
.cmp-empty{font-size:14px;line-height:1.5;color:var(--text-muted);padding:8px 0;}

/* Resumo */
.cmp-rs{display:flex;flex-direction:column;gap:12px;}
.cmp-rs-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.cmp-rs-lbl--sec{margin-top:10px;}
.cmp-rs-lbl--split{display:flex;justify-content:space-between;align-items:baseline;}
.cmp-rs-synth,.cmp-rs-card{border:1px solid var(--pv-card-border);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface);}
.cmp-rs-synth{background:var(--accent-glow);border-color:var(--accent-dim);}
.cmp-rs-synth-head{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:14px;font-weight:600;}
.cmp-rs-synth-head svg{width:18px;height:18px;}
.cmp-rs-synth-text{font-size:16px;line-height:1.5;color:var(--text);white-space:pre-wrap;}
.cmp-rs-text{font-size:15px;line-height:1.5;color:var(--text);}
.cmp-rs-meta{font-size:13px;color:var(--text-muted);}
.cmp-rs-meta--up{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;}
.cmp-rs-list{display:flex;flex-direction:column;}
.cmp-rs-row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--border);}
.cmp-rs-row:first-child{border-top:none;}
.cmp-rs-row-title{font-size:15px;font-weight:600;color:var(--text);}
.cmp-rs-row-text{font-size:14px;line-height:1.45;color:var(--text-muted);}
.cmp-rs-split{display:flex;justify-content:space-between;gap:8px;font-size:14px;}
.cmp-rs-split span{color:var(--text-muted);}
.cmp-rs-bar{height:8px;border-radius:99px;background:var(--border);overflow:hidden;}
.cmp-rs-bar>div{height:100%;background:var(--accent);}
.cmp-rs-link{background:none;border:none;padding:6px 0;align-self:flex-start;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--accent);text-decoration:underline;cursor:pointer;}

/* Panorama: um slider por categoria (2026-10-06) — esquerda harmônico,
   direita tenso; tamanho da bolinha = quanto a categoria está ativa. */
.cmp-pn{display:flex;flex-direction:column;gap:16px;}
.cmp-pn-title{font-family:var(--font-heading);font-size:20px;font-weight:600;margin:0;color:var(--text);}
.cmp-pn-sub{font-size:14px;line-height:1.4;color:var(--text-muted);margin:4px 0 0;}
.cmp-pn-hot{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--pv-card-border);border-radius:16px;padding:14px 16px;}
.cmp-pn-hot-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.cmp-pn-hot-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:6px 0;}
.cmp-pn-hot-row .cmp-pn-dot{flex:none;align-self:center;margin-right:0;}
.cmp-pn-hot-row b{font-size:16px;color:var(--text);}
.cmp-pn-hot-row span{font-size:13px;color:var(--text-muted);}
.cmp-pn-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;}
.cmp-pn-dot--h{background:var(--accent);}
.cmp-pn-dot--t{background:#C98A3D;}
.cmp-pn-dot--both{background:linear-gradient(135deg,#C98A3D,var(--accent));}
.cmp-pn-row{border-top:1px solid var(--border);}
.cmp-pn-sum{display:flex;flex-direction:column;gap:6px;padding:14px 0;cursor:pointer;list-style:none;}
.cmp-pn-sum::-webkit-details-marker{display:none;}
.cmp-pn-top{display:flex;align-items:center;gap:8px;}
.cmp-pn-name{flex:1;font-size:15px;font-weight:600;color:var(--text);}
.cmp-pn-tag{font-size:12px;color:var(--text-muted);}
.cmp-pn-row[open] .cmp-chev{transform:rotate(180deg);}
.cmp-pn-ends{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:1.3;color:var(--text-muted);}
.cmp-pn-ends span{flex:1;}
.cmp-pn-ends span:last-child{text-align:right;}
.cmp-pn-sl{position:relative;height:26px;}
.cmp-pn-line{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:99px;background:var(--border);}
.cmp-pn-mid{position:absolute;left:50%;top:7px;width:2px;height:12px;background:var(--border-hover);transform:translateX(-1px);}
.cmp-pn-knob{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(135deg,#C98A3D,var(--accent));border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);box-sizing:border-box;}
.cmp-pn-strong{font-size:13px;color:var(--text-muted);}
.cmp-pn-body{display:flex;flex-direction:column;gap:14px;background:var(--accent-glow);border-radius:12px;padding:14px 12px;margin:0 0 14px;}
.cmp-pn-mem{display:flex;flex-direction:column;gap:6px;}
.cmp-pn-mname{flex:1;font-size:14px;font-weight:600;color:var(--text);}
.cmp-pn-tech{list-style:none;margin:0 0 4px;padding:0 0 0 16px;display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.4;color:var(--text-muted);}
.cmp-pn-techsw{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--text);}
.cmp-pn-sw{position:relative;width:44px;height:26px;padding:0;border:none;border-radius:999px;background:var(--border-hover);cursor:pointer;transition:background .2s;flex:none;}
.cmp-pn-sw.on{background:var(--accent);}
.cmp-pn-sw>span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s;}
.cmp-pn-sw.on>span{transform:translateX(18px);}
.cmp-pn-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){.cmp-pn-sw,.cmp-pn-sw>span{transition:none;}}
.cmp-pn-note{font-size:13px;line-height:1.5;color:var(--text-muted);border-top:1px solid var(--border);padding-top:14px;}

/* As 6 perguntas no topo da aba "Vocês dois" (2026-10-07, V1 — cmpRenderThemes
   em js/compat.js): veredito, resposta de cada pergunta, o porquê embaixo e
   uma dica. Reaproveita .cmp-pn-* do Panorama. */
.cmp-t6-wrap{display:flex;flex-direction:column;gap:28px;margin-bottom:28px;--cmp-t6-tense-text:#8A5A1C;}
:root[data-theme="dark"] .cmp-t6-wrap{--cmp-t6-tense-text:#E0A85C;}
.cmp-t6-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--border);}
.cmp-t6-row .cmp-pn-name{flex:1;min-width:0;}
.cmp-t6-ans{flex:none;font-size:13px;font-weight:600;line-height:1;padding:6px 10px;border-radius:99px;background:var(--accent-dim);color:var(--accent);}
.cmp-t6-ans--pouco{background:rgba(201,138,61,.16);color:var(--cmp-t6-tense-text);}
.cmp-t6-ans--parte{background:var(--border);color:var(--text);}
.cmp-t6-why{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-top:1px solid var(--border);}
.cmp-t6-lines{display:flex;flex-direction:column;gap:8px;}
.cmp-t6-line{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--text);}
.cmp-t6-line .cmp-pn-dot{flex:none;margin:6px 0 0;}
.cmp-t6-line .cmp-pn-strong{display:block;}
.cmp-t6-long{display:flex;flex-direction:column;gap:10px;background:var(--accent-glow);border-radius:12px;padding:14px 12px;font-size:14px;line-height:1.5;color:var(--text);}
.cmp-t6-long p{margin:0;}
.cmp-t6-tip{font-size:15px;line-height:1.5;color:var(--text);}
.cmp-t6-specials{gap:14px;background:var(--accent-glow);border-color:var(--accent-dim);}
.cmp-t6-specials .cmp-pn-hot-lbl{color:var(--accent);margin-bottom:0;}
.cmp-t6-special{display:flex;flex-direction:column;gap:8px;}
.cmp-t6-special+.cmp-t6-special{border-top:1px solid var(--accent-dim);padding-top:14px;}
.cmp-t6-special-txt{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.5;color:var(--text);}
.cmp-t6-special-txt p{margin:0;}
.cmp-t6-more{font-size:14px;line-height:1.5;color:var(--text);}
.cmp-t6-more summary{cursor:pointer;font-weight:600;color:var(--accent);}
.cmp-t6-more ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}

/* Hierarquia + cor nos cards de tema (2026-10-06): ícone em círculo tingido,
   título forte, tom alternado (roxo / dourado) em xadrez, e cinza só no que é secundário. */
#page-synastry .cmp-pane>.section-title{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--text);}
#page-synastry .cmp-pane .pv-hub-card{--tone:var(--accent);--tone-bg:var(--accent-dim);position:relative;background:var(--surface);border:1px solid var(--pv-card-border);border-top:3px solid var(--tone);gap:8px;}
#page-synastry .cmp-pane .pv-hub-card:nth-child(4n+2),#page-synastry .cmp-pane .pv-hub-card:nth-child(4n+3){--tone:#C98A3D;--tone-bg:rgba(201,138,61,.14);}
#page-synastry .cmp-pane .pv-hub-card-icon{width:38px;height:38px;border-radius:12px;background:var(--tone-bg);color:var(--tone);display:flex;align-items:center;justify-content:center;}
#page-synastry .cmp-pane .pv-hub-card-title{font-size:16px;font-weight:700;color:var(--text);}
#page-synastry .cmp-pane .pv-hub-card-count{font-size:12px;}
#page-synastry .cmp-pane .pv-hub-card--has{background:var(--tone-bg);border-color:var(--tone);}
#page-synastry .cmp-pane .pv-hub-card--has .pv-hub-card-count{color:var(--tone);font-weight:600;}
#page-synastry .cmp-pane .pv-hub-card-badge{background:var(--tone);}

/* Menu lateral das seções da pasta (2026-10-06): troca os chips, que no iPhone
   não cabiam todos. Botão com a seção atual + gaveta à esquerda. */
#page-synastry .synastry-dossier-pillnav{padding:6px 20px 14px;}
.cmp-nav-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;background:var(--accent-dim);border:1px solid transparent;border-radius:14px;color:var(--accent);font-family:var(--font-body);font-size:16px;font-weight:600;cursor:pointer;text-align:left;}
.cmp-nav-burger{display:flex;flex:none;}
.cmp-nav-cur{flex:1;min-width:0;}
.cmp-nav-btn .cmp-chev{flex:none;}
.cmp-nav-overlay{position:fixed;inset:0;background:rgba(30,27,29,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1200;}
.cmp-nav-drawer{position:fixed;top:0;bottom:0;left:0;width:min(300px,84vw);background:var(--surface);box-shadow:4px 0 24px rgba(0,0,0,.2);transform:translateX(-102%);transition:transform .22s ease;z-index:1201;display:flex;flex-direction:column;gap:4px;padding:calc(14px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;visibility:hidden;}
.synastry-dossier-pillnav.is-open .cmp-nav-overlay{opacity:1;pointer-events:auto;}
.synastry-dossier-pillnav.is-open .cmp-nav-drawer{transform:none;visibility:visible;}
.cmp-nav-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 14px;font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--text);}
.cmp-nav-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-muted);cursor:pointer;}
.cmp-nav-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 12px;background:none;border:none;border-radius:14px;color:var(--text);font-family:var(--font-body);font-size:16px;font-weight:500;text-align:left;cursor:pointer;}
.cmp-nav-ico{display:flex;flex:none;width:36px;height:36px;border-radius:12px;background:var(--accent-dim);color:var(--accent);align-items:center;justify-content:center;}
.cmp-nav-lbl{flex:1;}
.cmp-nav-n{min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:99px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.cmp-nav-n:empty{display:none;}
.cmp-nav-item.is-on{background:var(--accent-dim);color:var(--accent);font-weight:700;}
.cmp-nav-item.is-on .cmp-nav-ico{background:var(--accent);color:#fff;}
body.cmp-nav-lock{overflow:hidden;}
@media(prefers-reduced-motion:reduce){.cmp-nav-overlay,.cmp-nav-drawer{transition:none;}}