/* ── ORBY ASTROLOGY ICON FONT ── */
@font-face {
  font-family: 'Orby Astrology';
  src: url('../icons/fonte/OrbyAstrology.woff2') format('woff2'),
       url('../icons/fonte/OrbyAstrology.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── ORBY TEXT FONT (inline textual symbols) ── */
@font-face {
  font-family: 'Orby Text';
  src: url('../icons/fonte/orby-text.woff2') format('woff2'),
       url('../icons/fonte/orby-text.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── TOKENS ── */
:root {
  --blue: #1A36C7;
  --creme: #faf4ed;
  --black: #000000;
  --bg: #faf4ed;
  --bg-2: #f0ebe3;
  --bg-3: #e8e2da;
  --surface: rgba(26,54,199,0.10);
  --surface-hover: rgba(26,54,199,0.08);
  --border: #1A36C7;
  --border-bright: #1A36C7;
  --text: #1A36C7;
  --text-dim: rgba(26,54,199,0.55);
  --text-faint: rgba(26,54,199,0.50);
  --gold: #C49A3C;
  --gold-dim: rgba(196,154,60,0.50);
  --ink: #1A1814;
  --blue-glow: rgba(26,54,199,0.3);
  --tension: #ff5050;
  --tension-rgb: 255,80,80;
  --blue-rgb: 26,54,199;
  --text-rgb: 26,54,199;
  --z-sticky: 100;
  --z-tooltip: 1000;
  --z-overlay: 2000;
  --z-lunar: 5000;
  --z-nav: 9000;
  --z-auth: 9999;
  --z-modal: 10000;
  --z-sheet: 10100;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
  --app-height: 100vh;
  --overlay-sep: rgba(26,54,199,0.15);
  --overlay-dot: rgba(26,54,199,0.25);
  --overlay-dot-active: rgba(26,54,199,0.55);
  --font: 'Archivo', sans-serif;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 16px;
  --fw-regular: 400;
  --fw-bold: 700;
  --col-left: 320px;
  --col-center: 1fr;
  --col-report: 380px;
  --col-right: 340px;
  /* Altura típica da .header-top (só padding 20 + conteúdo + 20, sem min-height extra) */
  --header-top-h: 72px;
  --header-h: calc(var(--header-top-h) + var(--safe-top));
  --footer-h: 60px;
  --footer-total-h: calc(var(--footer-h) + var(--safe-bottom));
  --gantt-bottom-gap: 0px; /* canvas draws its own bottom gradient via GANTT_BOTTOM_GAP */
  --chart-safe-top: calc(var(--header-h) + 12px);
  --chart-safe-bottom: calc(var(--footer-total-h) + 12px);
  --split-handle-h: 8px;
  /* Grid mestre: 12 trilhas, gap 8px, padding horizontal 8px. 104px = 2*pad + 11*gap. */
  --grid-master-gap: 8px;
  --grid-master-pad-x: 8px;
  --grid-master-template: repeat(12, minmax(0, 1fr));
  --grid-master-viewport-content: calc(100vw - 2 * var(--grid-master-pad-x) - 11 * var(--grid-master-gap));
  --half-col: calc(var(--grid-master-viewport-content) / 24);
  --transit-graph-chevron-w: 42px;
  --transit-graph-chevron-h: 9px;
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

/* Altura total do header (incl. datebar na home): definida por syncAppHeaderHeight() em app.js */

[data-theme="blunt-dark"] .report-aspect-type.tensao,
[data-theme="dark"] .report-aspect-type.tensao {
  background: rgba(var(--tension-rgb), 0.15);
  color: var(--tension);
}

/* Ícones Unicode (símbolos planetários/signos) — ambos os temas */
.unicode-icon {
  font-weight: 700;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100vh;
  min-height: var(--app-height);
  height: var(--app-height);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
  touch-action: pan-x pan-y;
}

/* ── HEADER ── */
#app-header {
  position: fixed; top: 0; left: 0; right: 0;
  /* Altura = conteúdo (safe + .header-top + datebar na home); --header-h vem de syncAppHeaderHeight() */
  height: auto;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  isolation: isolate;
  z-index: var(--z-sticky);
}

.ios-standalone #app-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ios-standalone #app-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}
.header-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  gap: var(--grid-master-gap);
  padding: 20px var(--grid-master-pad-x);
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
}
.header-datebar {
  position: relative;
  z-index: 1;
  height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.08em;
}
body:not(:has(#page-home.active)) .header-datebar { display: none; }
#live-date {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.header-transit-report-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--grid-master-gap);
  height: 20px;
  padding: 0 var(--grid-master-pad-x);
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.08em;
}
/* [hidden] perde para .header-transit-report-bar { display:flex } sem esta regra — faixa ficava visível em Gráficos */
#header-transit-report-bar[hidden] {
  display: none !important;
}
.header-transit-graphs-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--grid-master-gap);
  height: 20px;
  padding: 0 var(--grid-master-pad-x);
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.08em;
}
#header-transit-graphs-bar[hidden] {
  display: none !important;
}
#header-page-context-bar[hidden] {
  display: none !important;
}
body:not(:has(#page-transits.active)) #header-transit-graphs-bar {
  display: none !important;
}
body:not(:has(#page-transits.active)) #header-transit-report-bar {
  display: none !important;
}
.header-transit-report-bar-label {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}
.header-transit-report-bar .report-date-range.header-transit-report-bar-date {
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.header-brand {
  grid-column: 1 / 7;
  padding-left: var(--half-col);
  display: flex; flex-direction: column; gap: 1px;
}
.header-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-l1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.25em;
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.logo-wordmark {
  position: relative;
  display: inline-block;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.logo-l1-text {
  display: inline-block;
}
.logo-cursor-slot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.logo-underline-cursor {
  display: inline-block;
  font-size: 1.15em;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0;
  vertical-align: bottom;
  transform: scaleX(1.35);
  transform-origin: left center;
}
.header-logo.logo-show-wordmark .logo-wordmark {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.header-logo.logo-show-wordmark .logo-cursor-slot {
  opacity: 0;
  pointer-events: none;
}
.header-logo.logo-show-cursor .logo-wordmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.header-logo.logo-show-cursor .logo-cursor-slot {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* ── HEADER CONTROLS ── */
.header-controls {
  grid-column: 11 / 13;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: var(--half-col);
}

@media (max-width: 768px) {
  #app-header .header-controls-orby {
    display: none !important;
  }
}

html.planet-detail-overlay-open .header-controls {
  grid-column: 1 / 13;
  justify-self: stretch;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-right: 0;
}
html.planet-detail-overlay-open .header-controls-orby {
  display: flex;
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  padding-right: var(--half-col);
}
html.planet-detail-overlay-open .header-controls-transit {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  justify-self: center;
}

/* Fechar no header: não usar 1/12 da viewport (.aspect-overlay-close), senão desktop largo (>~2kpx) explode a altura do #app-header. */
#app-header .aspect-overlay-close {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: transparent;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
#app-header .overlay-save-btn {
  min-width: 32px;
  height: 32px;
  padding: 4px 8px;
  justify-content: center;
}

:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn,
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .aspect-overlay-close {
  color: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .aspect-overlay-close {
  border-color: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn svg path {
  stroke: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn.overlay-save-btn--saved {
  color: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn.overlay-save-btn--saved svg path {
  fill: var(--gold);
  stroke: var(--gold);
}

@media (max-width: 768px) {
  /* Layout robusto do header durante overlay de trânsito (mobile):
     reescrevemos o grid de 12 colunas para 1fr auto 1fr e usamos
     `display: contents` em .header-controls para promover seus filhos
     ao grid externo. Resultado garantido em UMA linha:
       [ _ ] [ Salvar + FECHAR ] [ ORBY_ ]
     Sem sobreposição com .header-brand, sem wrap em iPhone. */
  html.planet-detail-overlay-open .header-top {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    padding: 12px var(--half-col);
  }
  html.planet-detail-overlay-open .header-brand {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
    justify-self: start;
    align-self: center;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 32px;
    z-index: 1;
  }
  html.planet-detail-overlay-open .header-logo {
    display: flex;
    align-items: center;
  }
  html.planet-detail-overlay-open .logo-l1 {
    align-items: center;
    min-height: 32px;
    font-size: 14px;
  }
  html.planet-detail-overlay-open .logo-underline-cursor {
    font-size: 1.1em;
  }
  /* `.header-controls` deixa de ser caixa: seus filhos viram itens
     do grid externo .header-top diretamente. */
  html.planet-detail-overlay-open .header-controls {
    display: contents;
  }
  html.planet-detail-overlay-open .header-controls-transit {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
    align-self: center;
    min-height: 32px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  html.planet-detail-overlay-open #app-header .header-controls-orby {
    grid-column: 3;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    justify-self: end;
    align-self: center;
    padding-right: 0;
    margin-left: 0;
    min-height: 32px;
  }
  html.planet-detail-overlay-open #oracle-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
  }
  /* Garante "FECHAR" textual com borda, 10px, caixa-alta, sempre — mesmo em mobile. */
  html.planet-detail-overlay-open #app-header .aspect-overlay-close {
    width: auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 3px;
  }
  html.planet-detail-overlay-open #app-header .overlay-save-btn {
    height: 28px;
    min-width: 28px;
    padding: 0 6px;
  }
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: var(--fs-xs);
  width: 32px;
  height: 32px;
  margin: 8px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  border-color: var(--border-bright);
  color: var(--text);
}

/* ── MAIN LAYOUT ── */
#app-main {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  height: var(--app-height);
  overflow: hidden;
  line-height: 1.6;
}

/* ── PAGES (SPA) ── */
.page {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
/* Padrão full-page: todas as seções cobrem a tela toda (inset:0).
   SEM padding no nível da página — o offset header/footer fica dentro
   dos containers de scroll para que o conteúdo passe por baixo do
   header/footer e apareça através do blur ao scrollar.
   O header (z-100) e footer (z-9000) ficam acima das páginas (z-5). */
.page.active {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 5;
}
#page-home.active { display: grid; }

/* ── INNER CONTENT SCROLL ── */
.col-inner {
  flex: 1; overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  position: relative;
  padding: calc(var(--header-h) + 16px) 16px var(--footer-total-h);
  -webkit-overflow-scrolling: touch;
}
.col-inner::-webkit-scrollbar { width: 3px; }
.col-inner::-webkit-scrollbar-track { background: transparent; }
.col-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── TOOLTIP ── */
.tooltip {
  position: fixed;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: 0;
  transition: opacity 0.15s;
  max-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tooltip.visible { opacity: 1; }
.tooltip-title {
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-bottom: 4px;
}
.tooltip-aspect {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  margin-top: 4px;
}
.tooltip-aspect.harmonico { background: var(--surface); }
.tooltip-aspect.tensao { background: rgba(var(--tension-rgb), 0.15); color: var(--tension); }

/* ─────────────────────────────────────
   PAINEL DE DESCRIÇÃO
───────────────────────────────────── */
#transit-desc-panel .col-inner,
#natal-desc-content {
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.desc-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 20px;
}
.desc-empty-msg {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.planet-detail { display: none; }
.planet-detail.active {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface);
}

.planet-detail-header {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  padding: 10px var(--grid-master-pad-x);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.planet-detail-symbol {
  grid-column: 1;
  justify-self: center;
  font-size: 28px; line-height: 1;
  color: var(--blue);
}
.planet-detail-name {
  grid-column: 2 / 6;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.planet-detail-meta {
  grid-column: 6 / 12;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex; gap: 12px; align-items: center;
}
.planet-detail-meta span {
  display: flex; align-items: center; gap: 4px;
}
.planet-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}
.planet-detail-col-left {
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#ai-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.planet-detail-col-right {
  padding: 12px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.detail-section { margin-bottom: 20px; }
.detail-section-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
}
.detail-section-content {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-dim);
}
.detail-section-content strong { color: var(--text); font-weight: var(--fw-bold); }

.aspect-tag {
  display: inline-block;
  border: 1px solid var(--border-bright);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  padding: 2px 8px; margin: 3px 2px;
  color: var(--text-dim);
}
.aspect-tag.harmonico { border-color: var(--gold-dim); color: var(--gold); }
.aspect-tag.tensao { border-color: rgba(var(--tension-rgb), 0.3); color: var(--tension); }

.ai-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-faint);
  margin-top: 16px;
}
.ai-loading-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--blue);
  animation: pulse 1.2s ease-in-out infinite;
}
.ai-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%,100%{opacity:0.2} 50%{opacity:1} }

.ai-response {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-dim);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ai-response strong { color: var(--text); }

/* ─────────────────────────────────────
   PAINEL DE TRÂNSITOS
───────────────────────────────────── */
#transit-graph-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
/* Hub Gráficos — Ink & Gold (entrada); grelha sem gap entre cards. */
#transit-graphs-hub {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
  height: 100vh;
  background: transparent;
}
#transit-graphs-hub button {
  padding: 40px 20px !important;
  background-color: var(--transit-hub-btn-bg, #1a1814) !important;
  color: var(--transit-hub-btn-fg, #f4c430) !important;
  border: 1px solid var(--transit-hub-btn-border, #f4c430) !important;
  transition: all 0.25s ease-in-out !important;
}
#transit-graphs-hub button:hover,
#transit-graphs-hub button.active {
  background-color: var(--transit-hub-btn-hover-bg, #b2dadb) !important;
  border-color: var(--transit-hub-btn-hover-border, #b2dadb) !important;
}
#transit-graphs-hub button:hover *,
#transit-graphs-hub button.active * {
  color: var(--transit-hub-btn-hover-fg, #1a1814) !important;
  fill: var(--transit-hub-btn-hover-fg, #1a1814) !important;
}
#transit-graphs-hub button:focus-visible {
  outline: 2px solid var(--transit-hub-btn-focus-ring, #f4c430);
  outline-offset: 2px;
}
#transit-graphs-hub[hidden] {
  display: none !important;
}
.transit-zone-width {
  width: calc(100vw - 16px);
  margin-left: calc(50% - 50vw + 8px);
  margin-right: auto;
  max-width: none;
}
@media (min-width: 900px) {
  .transit-zone-width {
    width: calc(40px + (var(--grid-master-viewport-content)) * 6 / 12);
    margin-left: calc(50% - 50vw + 32px + (var(--grid-master-viewport-content)) * 3 / 12);
  }
}
.transit-graph-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0 8px;
}
@media (min-width: 640px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.transit-graph-hub-grid--launcher {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.transit-graph-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 118px;
  padding: 12px 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 12%, transparent);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.transit-graph-hub-card:hover {
  border-color: var(--blue);
}
.transit-graph-hub-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.transit-graph-hub-card--wide {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) .transit-graph-hub-card--wide {
    grid-column: span 2;
  }
}
@media (min-width: 1100px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) .transit-graph-hub-card--wide {
    grid-column: span 1;
  }
}
.transit-graph-hub-card__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.35;
}
.transit-graph-hub-card--wide .transit-graph-hub-card__title {
  font-size: 10px;
  letter-spacing: 0.08em;
}
.transit-graph-hub-card.active .transit-graph-hub-card__title {
  color: var(--blue);
}

/* ── Hub master (#transit-graphs-hub) — linha única, título vertical, gap 0 ── */
#transit-graphs-hub .transit-graph-hub-grid {
  display: flex;
  flex-direction: row;
  width: calc((100vw - 16px) * 10 / 12);
  margin: 0 auto;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
}
@media (min-width: 900px) {
  #transit-graphs-hub.transit-zone-width {
    width: calc(100vw - 16px);
    margin-left: calc(50% - 50vw + 8px);
    margin-right: auto;
  }
  #transit-graphs-hub .transit-graph-hub-grid {
    width: calc((100vw - 16px) * 7 / 12);
  }
}
#transit-graphs-hub .transit-graph-hub-card {
  flex: 1;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 6px;
}
#transit-graphs-hub .transit-graph-hub-card__title {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--transit-hub-title-color, #f4c430);
}

@supports (-webkit-appearance: none) {
  #transit-graphs-hub .transit-graph-hub-card__title {
    min-height: 100px;
  }
}

.transit-graph-hub-grid--launcher .transit-graph-hub-card__title {
  display: block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  text-align: left;
  margin: 0;
  padding: 0;
  max-height: none;
  white-space: nowrap;
  line-height: 1.35;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.transit-graph-hub-grid--launcher .transit-graph-hub-card--wide .transit-graph-hub-card__title {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  white-space: normal;
}
.transit-graph-hub-grid--launcher .transit-graph-hub-card {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}
.transit-graph-hub-grid--launcher .transit-graph-hub-card--wide {
  grid-column: auto;
}

/* ══ Mercúrio — painel de fase (C5–C8, 12px acima do topo do player)
   Canvas é absolute (full bleed); banner precisa de stack + margin-top:auto. ══ */
.mercury-phase-banner {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  margin-top: auto;
  margin-bottom: 12px;
  z-index: 10;
  width: calc(4 * (var(--grid-master-viewport-content) / 12) + 3 * var(--grid-master-gap));
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  pointer-events: none;
  text-align: center;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
.mercury-phase-banner:hover {
  opacity: 1;
}
.mercury-phase-banner[hidden] {
  display: none !important;
}
.mercury-phase-banner__label {
  display: block;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mercury-phase-banner--direct .mercury-phase-banner__label {
  color: var(--blue);
}
.mercury-phase-banner--retrograde .mercury-phase-banner__label {
  color: var(--tension);
}
.mercury-phase-banner--station .mercury-phase-banner__label {
  color: var(--gold);
}

/* ══ Controles de gráfico — fade idle (harmonia visual) ══ */
.chart-control-fade {
  opacity: var(--chart-controls-opacity, var(--player-default-opacity, 0.72));
  transition: opacity 0.2s ease;
}
.chart-control-fade:hover,
.chart-control-fade:focus-within {
  opacity: 1;
}

/* Canvas ocupa espaço restante em modo flex */
#transit-graph-panel .transit-canvas-area {
  flex: 1;
  min-height: 0;
  position: relative;
}
/* ══ PAINEL TEMPORAL ══ */
.tempo-panel {
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  position: relative;
}

/* Utilitário de colapso */
.hidden-collapsed { display: none !important; }

/* Toolbar gráfico (#transit-graph-panel): caixa com borda/blur. Relatório: sem caixa — só a linha de chips (minimalismo). */
.transit-graph-toolbar {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--transit-toolbar-border, var(--border));
  background: var(
    --transit-toolbar-surface,
    color-mix(in srgb, var(--bg) 14%, transparent)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.transit-graph-toolbar.transit-graph-toolbar--compact {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(
    --transit-toolbar-surface-compact,
    color-mix(in srgb, var(--bg) 10%, transparent)
  );
}
.transit-report-toolbar {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ── Graph toolbar: toggle header (só #transit-graph-toolbar; chevron isolado do relatório) ─ */
.transit-graph-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--transit-toolbar-toggle-color, var(--text-dim));
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.transit-graph-toggle:hover {
  color: var(--transit-toolbar-toggle-hover-color, var(--text));
}

.transit-graph-chevron {
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
/* Chevrons: colapsado (aba) → baixo; expandido (no toggle) → cima */
#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-chevron-btn .transit-graph-chevron {
  transform: rotate(180deg);
}
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-toggle .transit-graph-chevron {
  transform: rotate(0deg);
  flex-shrink: 0;
  margin-right: 0;
  margin-top: 12px;
  opacity: 0.7;
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-title-col,
#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-divider--before-body,
#transit-graph-panel #transit-graph-toolbar.chips-collapsed #transit-graph-launcher-panel,
#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-divider--before-chevron {
  display: none !important;
}

/* Expandido: sem coluna de chevron à direita */
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-chevron-col,
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-divider--before-chevron {
  display: none !important;
}
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-shell {
  grid-template-columns: auto 1fr;
}

.transit-report-toolbar .transit-report-row {
  padding: 0;
  margin: 0;
}
.transit-graph-toolbar[hidden],
.transit-report-toolbar[hidden] {
  display: none !important;
}
/* ══ Menu gráficos (#transit-graph-toolbar): blur + tint (--transit-graph-menu-surface).
   Colapsado: só chevron — mobile largura 1 col do grid mestre; desktop largura 8px+chevron+8px + padding 20px 8px.
   Expandido: mobile cols 1–10; desktop 2,5 col; grelha 1fr | 1px | 4fr | 1px | 1fr.
   Altura intrínseca (shell stretch); launcher com max-height; 5 linhas 1fr repartem só espaço extra na célula. ══ */
#transit-graph-panel #transit-graph-toolbar:not([hidden]) {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 12px;
  width: calc(100vw - 24px);
  max-width: none;
  transform: none;
  z-index: 9;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
  border-radius: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
#transit-graph-panel #transit-graph-toolbar:not([hidden]):hover {
  opacity: 1;
}
@media (min-width: 900px) {
  #transit-graph-panel #transit-graph-toolbar:not([hidden]):not(.chips-collapsed) {
    width: calc(2.5 * (var(--grid-master-viewport-content) / 12));
  }
  #transit-graph-panel #transit-graph-toolbar:not([hidden]).chips-collapsed {
    width: 44px;
    box-sizing: border-box;
    padding: 0;
  }
}
@media (max-width: 899px) {
  /* 10 trilhas + 9 gaps (largura do grid mestre da coluna 1 à 10) */
  #transit-graph-panel #transit-graph-toolbar:not([hidden]):not(.chips-collapsed) {
    width: calc(10 * (var(--grid-master-viewport-content) / 12) + 9 * var(--grid-master-gap));
  }
  #transit-graph-panel #transit-graph-toolbar:not([hidden]).chips-collapsed {
    width: 44px;
    padding: 0;
  }
}

/* ── Aba colapsada: só mobile — 1/3 atrás do header, 2/3 visível ── */
@media (max-width: 768px) {
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) {
    top: calc(var(--header-h) - 10px);
    width: 44px;
    height: 30px;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--border, rgba(128,128,128,0.2));
    border-top: none;
    background: color-mix(in srgb, var(--bg) 25%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0;
    overflow: hidden;
  }
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) .transit-graph-menu-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
  }
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) .transit-graph-menu-chevron-col {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) .transit-graph-menu-chevron-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    pointer-events: auto;
  }
}

#transit-graph-panel #transit-graph-toolbar.transit-graph-toolbar--compact:not([hidden]) {
  padding: 0;
}

@media (min-width: 900px) {
  #transit-graph-panel #transit-graph-toolbar.transit-graph-toolbar--compact:not([hidden]).chips-collapsed {
    padding: 0;
  }
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
  column-gap: 6px;
  align-items: start;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-shell {
  grid-template-columns: minmax(0, 1fr);
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-chevron-col {
  width: 44px;
  min-width: 44px;
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-chevron-btn {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-title-col {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  align-self: stretch;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  overflow: hidden;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-toggle {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: var(--gold);
  width: 100%;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-divider--before-body,
#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-divider--before-chevron {
  display: none !important;
  width: 0;
  background: none;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-chevron-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  cursor: pointer;
  color: var(--gold);
  -webkit-tap-highlight-color: transparent;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-toggle-label {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.12em;
  padding-top: 8px;
  padding-bottom: 20px;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  #transit-graph-panel #transit-graph-toolbar .transit-graph-toggle-label {
    padding-left: 0;
  }
}

#transit-graph-panel #transit-graph-toolbar:not([hidden]) #transit-graph-launcher-panel {
  pointer-events: auto;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-height: min(70vh, calc(100vh - var(--header-h) - 40px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lista launcher: 5 linhas auto — não dependem de altura definida no container */
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  row-gap: 6px;
  column-gap: 0;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  background: none;
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: rgba(26, 24, 20, 0.88);
  text-align: center;
  justify-content: center;
  align-items: center;
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card__title {
  color: var(--gold);
  text-align: center;
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card.active {
  background: rgba(26, 24, 20, 0.88);
  box-shadow: inset 0 0 0 1px var(--gold);
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card.active .transit-graph-hub-card__title {
  color: var(--gold);
  font-weight: var(--fw-bold);
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card:hover {
  opacity: 0.8;
}

#transit-graph-panel #transit-graph-toolbar:not([hidden]) .transit-graph-toggle,
#transit-graph-panel #transit-graph-toolbar:not([hidden]) .transit-graph-menu-chevron-btn {
  pointer-events: auto;
}
/* Relatório: toolbar sticky — fundo transparente, fila sob o header ao rolar */
#transit-desc-content > #transit-report-top:not([hidden]) {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  z-index: 999;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  padding-bottom: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-toolbar {
  margin-top: 0;
}

/* Relatório (data-mode=top): grid 12-col; toolbar + lista nas 6 colunas centrais (desktop) */
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  padding-inline: var(--grid-master-pad-x);
  padding-bottom: calc(128px + var(--footer-total-h));
}
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #planet-detail-panel,
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #saved-panel,
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #transit-learn-root {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
@media (max-width: 899px) {
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #transit-report-top:not([hidden]),
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #report-panel {
    grid-column: 1 / 13;
    justify-self: center;
    width: min(100%, calc(11 * (100% - 11 * var(--grid-master-gap)) / 12 + 10 * var(--grid-master-gap)));
    box-sizing: border-box;
  }
}
@media (min-width: 900px) {
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #transit-report-top:not([hidden]),
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #report-panel {
    grid-column: 4 / 10;
    width: 100%;
    min-width: 0;
  }
}
#page-transits.active #transit-split[data-mode="top"] #report-panel {
  margin-top: 128px;
}
#page-transits.active #transit-split[data-mode="top"] #report-panel .report-content {
  padding-inline: 0;
}

.transit-report-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.transit-report-chip {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 14px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  color: var(--text);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.transit-report-chip.active {
  font-weight: var(--fw-bold);
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}
.transit-report-chip--glyph {
  padding: 7px 12px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.transit-report-chip .glyph-orby {
  font-family: 'Orby Astrology', serif;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
.transit-report-row--time .transit-report-chip span,
.transit-graph-row .transit-report-chip span {
  pointer-events: none;
}

/* Toolbar relatório: uma linha — período (ciclo) | Aspectos ▾ | ícone Salvos */
.transit-report-row--consolidated {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.transit-report-period-cycle {
  flex: 0 0 auto;
  min-width: 52px;
}
.transit-report-dropdown-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.transit-report-aspects-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.transit-report-aspects-trigger .transit-graph-chevron {
  width: 28px;
  height: auto;
  opacity: 0.85;
}
.transit-report-aspects-trigger-suffix {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-bold);
  color: var(--blue);
  letter-spacing: 0.04em;
}
.transit-report-dropdown-wrap.is-open .transit-graph-chevron {
  transform: rotate(180deg);
}
.transit-report-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 12;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-height: min(70vh, 420px);
  overflow-y: auto;
}
.transit-report-dropdown-sep {
  height: 1px;
  margin: 6px 8px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
}
.transit-report-dropdown-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.transit-report-dropdown-item:hover {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.transit-report-dropdown-item.active {
  font-weight: var(--fw-bold);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.transit-report-saved-btn {
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════
   PLAYER — Redesign completo baseado no SVG
   ═══════════════════════════════════════════ */

/* ──────────────────────────────────────────
   Zone A — Barra HOJE | data | MÊS
   ────────────────────────────────────────── */
.player-zone-a {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0;
  background: transparent;
  font-family: var(--font);
  position: relative;
  z-index: 2;
}

.player-hoje {
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--player-color, var(--blue));
  white-space: nowrap;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 100%;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.player-hoje.hoje-active { opacity: 1; }

.player-date {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--player-color, var(--blue));
  font-family: var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.player-scale-chevron {
  position: absolute;
  top: 0;
  right: 14px;
  width: 42px;
  height: 9px;
  z-index: 3;
  display: block;
  margin-top: 11px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

/* Player expandido: chevron invertido */
.player-body:has(.player-zone-b:not(.player-collapsed)) .player-scale-chevron {
  transform: rotate(180deg);
}

/* Player colapsado: cursor pointer no body para expandir ao clicar */
.player-body:has(.player-zone-b.player-collapsed) {
  cursor: pointer;
}

.player-scale-label {
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--player-color, var(--blue));
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  /* Posicionamento absoluto — padrão: nível da zone-a, lado direito */
  position: absolute;
  top: 0;
  right: 14px;
  height: 32px;
  padding: 0;
  z-index: 3;
  transition: top 0.32s ease, left 0.32s ease;
}

/* Colapsado: esconde scale-label, chevron fica no lugar */
.player-body:has(.player-zone-b.player-collapsed) .player-scale-label {
  display: none;
}

/* Expandido: nível da timeline (zone-c), à direita da barra */
.player-body:has(.player-zone-b:not(.player-collapsed)) .player-scale-label {
  top: auto;
  bottom: 0;
  right: 14px;
  left: auto;
  height: 32px;
}


.player-sep {
  display: none;
}

.tempo-panel::before,
.tempo-panel::after {
  content: none;
}

/* Body do player: zones A+B+C com borda arredondada e blur/tint */
.player-body {
  border-radius: 8px;
  border: 1px solid var(--player-border, var(--border));
  overflow: hidden;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--player-shadow, none);
  position: relative;
  color: var(--player-color, var(--blue));
}

/* Colapso animado do player — clip-path revela de cima pra baixo */
.player-zone-b, .player-zone-c {
  overflow: hidden;
  max-height: 200px;
  clip-path: inset(0 0 0% 0);
  opacity: 1;
  transition:
    max-height 0.32s ease,
    padding 0.32s ease,
    clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}
.player-zone-b.player-collapsed,
.player-zone-c.player-collapsed {
  max-height: 0;
  padding: 0;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────
   Zone B — Controles de transporte
   ────────────────────────────────────────── */
.player-zone-b {
  position: relative;
  display: flex;
  align-items: center;
  padding: 32px 0 20px 0;
  background: transparent;
}

.player-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 20px;
  width: 100%;
}

.transport-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
}
.transport-btn:hover { opacity: 0.7; }
.transport-btn:active { opacity: 0.5; }

/* Labels SEM/MÊS/ANO — coluna direita cobrindo Zona A + B */
.player-scale-btns {
  position: absolute;
  right: 14px;
  top: -32px;
  height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  z-index: 4;
  pointer-events: auto;
}

.scale-btn {
  font-family: var(--font);
  font-size: 7px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--player-color, var(--blue));
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1.3;
  display: block;
  text-align: right;
  text-transform: uppercase;
  opacity: 0.4;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.scale-btn.active { opacity: 1; }

/* ──────────────────────────────────────────
   Zone C — Timeline
   ────────────────────────────────────────── */
.player-zone-c {
  padding: 0 0 32px 0;
  display: flex;
  align-items: center;
  position: relative;
  background: transparent;
}

.player-timeline-wrap {
  position: relative;
  width: calc(100% - 70px);
  margin-left: 35px;
  height: 100%;
  display: flex;
  align-items: center;
}

.player-timeline-bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--player-color, var(--blue));
  transform: translateY(-50%);
}

.timeline-tick {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 5px;
  background: var(--player-color, var(--blue));
}

/* Indicador: triângulo (céu/bolhas) ou círculo Mercúrio */
.player-timeline-indicator {
  position: absolute;
  top: calc(50% - 7px);
  width: 0;
  height: 0;
  font-size: 0;
  color: transparent;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--player-color, var(--blue));
  line-height: 0;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.player-timeline-indicator:active { cursor: grabbing; }

.player-timeline-indicator:not(.player-timeline-indicator--mercury) .player-timeline-indicator-glow,
.player-timeline-indicator:not(.player-timeline-indicator--mercury) .player-timeline-indicator-core {
  display: none;
}

.player-timeline-indicator.player-timeline-indicator--mercury {
  top: 50%;
  width: auto;
  height: auto;
  border: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-timeline-indicator--mercury .player-timeline-indicator-glow {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--merc-glow, #F4C430);
  opacity: 0.18;
  pointer-events: none;
}
.player-timeline-indicator--mercury .player-timeline-indicator-core {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--merc-fill, #F4C430);
  border: 1px solid var(--merc-stroke, #1A1814);
  box-sizing: border-box;
  pointer-events: none;
}

.player-timeline-wrap {
  cursor: pointer;
}

.transit-canvas-area {
  flex: 1; overflow: hidden;
  position: relative;
}
canvas#transit-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  cursor: grab;
  touch-action: none;
  /* Largura/altura em px vêm do JS; evitar 100%×100% que força esticar o bitmap ao redimensionar janela/PWA */
}

/* Lua limiares: fundo Canvas + camada SVG (glifos, hastes, ticks, hit) */
.transit-lunar-interactive {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.transit-lunar-interactive svg {
  display: block;
  width: 100%;
  height: 100%;
}
.transit-lunar-interactive .lunar-moon-mark,
.transit-lunar-interactive .lunar-tension-halo-wrap {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s ease-out;
}
.transit-lunar-interactive .lunar-tension-halo-wrap {
  cursor: default;
}
.transit-lunar-interactive .lunar-moon-mark:focus {
  outline: none;
}
.transit-lunar-interactive .lunar-moon-mark:focus-visible {
  outline: 2px solid var(--blue, #394da1);
  outline-offset: 2px;
}
.transit-lunar-interactive .lunar-spiral-moon-radial {
  transition: opacity 0.5s ease;
}
.transit-lunar-interactive .lunar-arc-titles {
  pointer-events: none;
}
.transit-lunar-interactive .lunar-arc-titles text {
  pointer-events: none;
}

/* ─── TRANSIT PAGE: CANVAS FULL VIEWPORT ───
   Canvas é position:absolute inset:0 → cobre tela toda incluindo atrás
   do header/footer. Sem espaçador ::before — o conteúdo rola por baixo do header (blur).
   ─────────────────────────────────────────── */
#page-transits.active {
  padding-top: 0;
}

/* Remover containing-block do split-container para que
   o canvas absoluto seja relativo ao #page-transits */
#page-transits .split-container {
  position: static;
}

/* Canvas underlay: fullscreen atrás de header/footer */
#transit-graph-panel .transit-canvas-area,
#transit-graph-panel .chart-canvas-underlay,
#page-transits .transit-canvas-area,
#page-transits .chart-canvas-underlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  flex: none;
  min-height: unset;
  overflow: visible;
  touch-action: none;
}

/* Interface layer: controles na área útil entre header e footer */
.chart-controls-layer {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--chart-safe-top);
  bottom: var(--chart-safe-bottom);
  z-index: 10;
  pointer-events: none;
}
.chart-controls-layer[hidden] {
  display: none !important;
}
.chart-controls-layer > * {
  pointer-events: auto;
}
.chart-controls-right-stack {
  position: absolute;
  top: 0;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 12;
}
#page-transits .chart-controls-layer #transit-graph-toolbar:not([hidden]) {
  position: absolute;
  top: 0;
  left: 12px;
  transform: none;
}
@media (max-width: 899px) {
  #page-transits .chart-controls-layer #transit-graph-toolbar.chips-collapsed:not([hidden]) {
    top: -10px;
  }
}
#page-transits .chart-controls-layer .orrery-zoom-control {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
}
#page-transits .chart-controls-layer .tempo-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin-top: 0;
  margin-bottom: 0;
  width: calc(2 * (var(--grid-master-viewport-content)) / 3 + 56px);
}
#page-transits .chart-controls-layer .lunar-year-banner {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  margin-top: 0;
  margin-bottom: 0;
}

/* ══════════════════════════════════════════
   TRÂNSITOS GANTT — área com scroll vertical
   Desktop: bottom footer+96px; lanes dinâmicas; canvas preenche container.
   Mobile: layout vertical (mock) — chrome DOM + scroll horizontal de colunas.
══════════════════════════════════════════ */
#page-transits .transit-canvas-area.transit-gantt-area {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  top: var(--header-h);
  bottom: var(--footer-total-h);
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  #page-transits .transit-canvas-area.transit-gantt-area {
    bottom: calc(var(--footer-total-h) + var(--gantt-bottom-gap));
  }
}
#page-transits .transit-canvas-area.transit-gantt-area #transit-canvas {
  display: block;
  max-height: none;
  flex-shrink: 0;
}
/* Mobile full-bleed: colunas dos trânsitos passam por debaixo do header e do footer */
#page-transits .transit-canvas-area.transit-gantt-area.transit-gantt-mobile {
  top: 0;
  bottom: 0;
  overflow: hidden;
}

/* ── Gantt player overlay ─────────────────────────────────── */
.gantt-player-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  z-index: 5;
  color: var(--ink);
}
[data-theme="blunt-dark"] .gantt-player-overlay {
  color: #F4C430;
}
.gantt-player-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  pointer-events: none;
}
.gantt-player-btn {
  pointer-events: all;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.gantt-player-btn:hover { opacity: 1; }
.gantt-player-btn:active { opacity: 0.6; }

/* Mobile: player + HOJE sobrepostos ao fade mint, logo acima do footer */
.transit-gantt-mobile .gantt-player-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--footer-total-h) + 10px);
  height: auto;
  gap: 14px;
}
.transit-gantt-mobile .gantt-player-row {
  gap: 28px;
}

.gantt-mobile-frame[hidden] {
  display: none !important;
}
/* HOJE — texto sublinhado dentro do player overlay; só aparece no mobile */
.gantt-mobile-today {
  display: none;
  pointer-events: all;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: none;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.transit-gantt-mobile .gantt-mobile-today {
  display: inline-block;
}
.gantt-mobile-today--active,
.gantt-mobile-today:disabled {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}
.gantt-mobile-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}
/* Ano — label vertical na borda esquerda, centrado no span visível do ano (JS posiciona top) */
.gantt-mobile-year {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.65;
  pointer-events: none;
  z-index: 3;
}
.gantt-mobile-hscroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
}
.gantt-mobile-hscroll #transit-canvas {
  display: block;
  /* Canvas mais largo que o viewport para scroll horizontal por coluna;
     sem isto o max-width/object-fit do canvas base cria letterbox (squash) */
  max-width: none;
  max-height: none;
  object-fit: fill;
  margin: 0;
}
/* Meses — labels verticais na borda direita, cada um centrado no span visível do mês */
.gantt-mobile-months {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  width: 14px;
  pointer-events: none;
  z-index: 3;
}
.gantt-mobile-month {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.75;
  white-space: nowrap;
}
.gantt-mobile-month--current {
  opacity: 1;
  font-weight: 800;
}
.gantt-mobile-playhead {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 0;
  border-top: 1.5px solid var(--ink);
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.15s ease;
}
.gantt-mobile-playhead--idle {
  opacity: 0.48;
}
.gantt-mobile-playhead--today {
  opacity: 1;
}
.gantt-mobile-playhead-date {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 3px;
  background: var(--transit-hub-btn-hover-bg, #b2dadb);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
[data-theme="blunt-dark"] .gantt-mobile-playhead-date {
  background: #242018;
  color: #F4C430;
}

/* ══ Lunar — toggles de ano (acima do player, mesma estética do mercury-phase-banner) ══ */
.lunar-year-banner {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  margin-top: auto;
  margin-bottom: 12px;
  z-index: 10;
  display: flex;
  gap: 8px;
  pointer-events: auto;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
.lunar-year-banner:hover {
  opacity: 1;
}
.lunar-year-banner[hidden] {
  display: none !important;
}
.lunar-year-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  color: var(--blue);
  cursor: pointer;
  text-align: center;
}
.lunar-year-btn--active {
  background: rgba(196, 154, 60, 0.18);
  color: var(--gold);
}

/* Com painel Mercúrio visível, só o banner leva margin-top:auto (empurra o par). */
#page-transits #transit-graph-panel:has(.mercury-phase-banner:not([hidden])) .tempo-panel {
  margin-top: 0;
}

/* Com painel lunar de ano visível, player não empurra sozinho. */
#page-transits #transit-graph-panel:has(.lunar-year-banner:not([hidden])) .tempo-panel {
  margin-top: 0;
}

/* Player: empurrado para o fundo do flex, acima do canvas */
#page-transits .tempo-panel {
  margin-top: auto;
  /* Folga mínima acima do footer fixo (mobile); desktop em media >=900px */
  margin-bottom: calc(var(--footer-total-h) + 20px);
  position: relative;
  z-index: 10;
  width: calc(2 * (var(--grid-master-viewport-content)) / 3 + 56px); /* cols 3–10 do grid mestre (mobile) */
  align-self: center;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
#page-transits .tempo-panel:hover { opacity: 1; }

.orrery-source-bar {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  padding: 3px 10px 0;
  flex-shrink: 0;
}

.orrery-zoom-control {
  position: fixed;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 10;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
.orrery-zoom-control:hover { opacity: 1; }

/* Ícone de zoom + trilha (gap preservado vs. botão pause acima) */
.orrery-zoom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Pausa rotação: mesmos SVG do player (#anim-play); 16px acima do bloco de zoom */
.orrery-zoom-control > .chart-spin-toggle {
  margin-bottom: 12px;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.orrery-zoom-control > .chart-spin-toggle svg { fill: var(--gold); }
.chart-spin-toggle .chart-spin-svg-play { display: none; }
.chart-spin-toggle:not(.is-paused) .chart-spin-svg-pause { display: block; }
.chart-spin-toggle:not(.is-paused) .chart-spin-svg-play { display: none; }
.chart-spin-toggle.is-paused .chart-spin-svg-pause { display: none; }
.chart-spin-toggle.is-paused .chart-spin-svg-play { display: block; }

/* Mobile padrão: mostra só ícone */
.zoom-icon-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.zoom-icon-btn svg { stroke: var(--gold); fill: none; }
.zoom-icon-btn:active { opacity: 0.7; }

/* Controle completo: sempre no DOM, animado via transform */
.zoom-full-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: scaleY(0);
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.22s ease;
}

/* Expandido: ícone some, controle cresce */
.orrery-zoom-control.zoom-expanded .zoom-icon-btn {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}
.orrery-zoom-control.zoom-expanded .zoom-full-ctrl {
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

/* ── Desktop: ícone no topo alinhado ao menu launcher ── */
@media (min-width: 769px) {
  .orrery-zoom-control {
    top: 50%;
    transform: translateY(-50%);
  }
  #page-transits.active .orrery-zoom-control {
    top: calc(var(--header-h) + 12px);
    transform: none;
  }
  .zoom-full-ctrl {
    transform-origin: center center;
  }
}

/* ── Mobile: alinhado ao topo do menu launcher ── */
@media (max-width: 768px) {
  .orrery-zoom-control {
    top: calc(var(--header-h) + 12px);
    right: 8px;
  }
  #page-transits.active .orrery-zoom-control {
    top: calc(var(--header-h) + 12px);
  }
  .zoom-full-ctrl {
    transform-origin: top center;
  }
}


/* Trilha de nível de zoom */
.zoom-track-wrap {
  width: 32px;
  height: 25vh;
  min-height: 120px;
  max-height: 200px;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}

/* Desktop: track height proporcional ao viewport */
@media (min-width: 769px) {
  .zoom-track-wrap {
    height: 40vh;
    min-height: 160px;
    max-height: 320px;
  }
}
.zoom-track {
  width: 1px; height: 100%;
  background: var(--border);
  position: relative;
}
.zoom-track-marker {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--blue);
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  cursor: grab;
  transition: top 0.15s ease;
}
.zoom-track-marker::before {
  content: '';
  position: absolute;
  inset: -20px;
}
.zoom-track-marker.is-dragging {
  cursor: grabbing;
  transition: none;
}

.zoom-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  color: var(--gold);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.zoom-btn:active { opacity: 0.7; }

/* ─────────────────────────────────────
   PAINEL DE MAPA NATAL
───────────────────────────────────── */
#natal-graph-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
/* Sub-sub-menu ORRERY | LUA dentro do painel GRÁFICOS */
.chart-subnav {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  flex-shrink: 0;
}
.chart-subnav-btn {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.chart-subnav-btn.active {
  color: var(--text);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--text);
}
.chart-subnav-btn:hover:not(.active) { color: var(--text); }

/* Painéis de conteúdo do mapa natal */
.natal-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Tabela: altura pelo conteúdo — senão flex:1 limita ao viewport e corta o fim no scroll de #page-you */
#natal-panel-estrutura.natal-panel {
  flex: 0 0 auto;
  min-height: auto;
}
#natal-panel-estrutura .natal-table {
  flex: none;
  min-height: auto;
}
/* Grid mestre (12 col, gap 8px, pad 0 8px) */
#natal-panel-estrutura {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: var(--grid-master-gap);
  padding: 0 var(--grid-master-pad-x);
  margin-top: 8px;
  align-content: start;
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
}
.natal-canvas-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 12px;
  touch-action: none;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
canvas#natal-canvas {
  display: block;
  flex-shrink: 0;
}
/* ── Cartografia (C4–C8 desktop) + barras (C9): fluxo compacto sob a tabela ── */
.cartografia-wrap {
  grid-column: 2 / 12;
  width: 100%;
  min-width: 0;
  align-self: start;
  margin-top: 0;
  padding-bottom: 128px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.elementos-barras-wrap {
  grid-column: 2 / 12;
  display: none;
  min-width: 0;
  width: 100%;
  align-self: start;
}
#cartografia-retangular {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  cursor: crosshair;
}
#elementos-barras {
  display: block;
  width: 100%;
  height: auto;
}

.natal-graph-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 12px 12px;
  flex-shrink: 0;
}

/* ── Painel: Leitura — grid 12-col (igual #natal-panel-estrutura) ── */
.natal-panel--leitura {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: 64px;
  padding: 64px var(--grid-master-pad-x) calc(var(--footer-total-h, 80px) + 64px);
  margin-top: var(--header-h);
  align-content: start;
  flex: 0 0 auto;
  min-height: auto;
  box-sizing: border-box;
  width: 100%;
}

/* Mobile: 10 colunas centrais (C2–C12) — <900px; ver bloco max-width 899 para meia C1–meia C12 */
.leitura-carto-full-wrap,
.leitura-carto-2-wrap,
.leitura-natal-table,
.leitura-natal-chart-preview,
#natal-reading-summary,
#natal-reading-list,
.leitura-elementos-wrap {
  grid-column: 2 / 12;
  min-width: 0;
}

/* Cartografia leitura (full) — flex centraliza canvas com largura em px (JS) */
.leitura-carto-full-wrap {
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
#cartografia-leitura {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.leitura-carto-2-wrap {
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
#cartografia-leitura-2 {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ── Modal: cartografia leitura (clique na primeira) ───────────── */
.carto-leitura-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

@media (min-width: 900px) {
  #cartografia-leitura-modal-overlay.carto-leitura-modal-overlay {
    display: grid;
    grid-template-columns: var(--grid-master-template);
    column-gap: var(--grid-master-gap);
    align-content: center;
    justify-items: stretch;
    padding: max(12px, env(safe-area-inset-top)) var(--grid-master-pad-x) max(12px, env(safe-area-inset-bottom));
  }
  #cartografia-leitura-modal-overlay .carto-leitura-modal-sheet {
    grid-column: 4 / span 6;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}
.carto-leitura-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.carto-leitura-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.carto-leitura-modal-sheet {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.carto-leitura-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  padding: 6px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.carto-leitura-modal-close {
  min-width: 56px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text);
  font-family: var(--font, 'Archivo', sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.carto-leitura-modal-close span {
  pointer-events: none;
}
.carto-leitura-modal-close:hover {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: var(--border-bright);
}
.carto-leitura-modal-canvas-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  flex: 1 1 0;
  background: var(--bg);
  box-sizing: border-box;
}

.carto-leitura-modal-info {
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(40vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 8fr);
  align-items: start;
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}

.carto-leitura-modal-vert-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  padding: var(--nrc-card-pad, 20px) 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  line-height: 1;
  box-sizing: border-box;
  border-right: 1px solid var(--border);
}

.carto-leitura-modal-desc {
  min-width: 0;
  padding: var(--nrc-card-pad, 20px);
  box-sizing: border-box;
}

.carto-leitura-modal-desc p {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--text);
}

html.carto-leitura-modal-open,
html.carto-leitura-modal-open body {
  overflow: hidden;
  touch-action: none;
}

/* Tabela natal no painel leitura */
.leitura-natal-table { overflow-x: auto; }

/* Preview clicável do mapa natal (abaixo da tabela) */
.leitura-natal-chart-preview {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}
.leitura-natal-chart-preview:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 6px;
}
.natal-leitura-thumb-area {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}
#natal-canvas-leitura-thumb {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gráfico de elementos no encerramento */
.leitura-elementos-wrap { align-self: start; }
#elementos-barras-leitura { display: block; width: 100%; height: auto; }

/* Mini-cartografia em cada card (padding zero; teto no .natal-reading-list --nrc-card-pad) */
.nrc-mini-carto-wrap {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.nrc-mini-carto {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Resumo do mapa (Sol/Lua; AC/dominante removidos como redundantes) */
.natal-reading-summary {
  padding: 0;
}
.nrs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.nrs-item {
  font-size: var(--fs-xs, 11px);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nrs-glyph {
  font-size: var(--fs-sm, 13px);
  color: var(--text);
  font-family: 'Orby Astrology', sans-serif;
}

.natal-reading-list {
  --nrc-card-pad: 20px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Cards de planeta — 1fr : 8fr; esq.: título + separador + glifos (mobile); dir.: mini + (glifos|texto desktop / só texto mobile) */
.natal-reading-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 8fr);
  align-items: start;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .natal-reading-card {
    align-items: stretch;
  }
}

.nrc-left-col {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}

.nrc-vert-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  padding: var(--nrc-card-pad, 20px) 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  line-height: 1;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .nrc-vert-title {
    flex: 1;
    min-height: 0;
  }
}

.nrc-left-sep {
  flex-shrink: 0;
  height: 1px;
  margin: 0 12px;
  background: var(--border);
}

@media (min-width: 900px) {
  .nrc-left-sep {
    display: none;
  }
  .nrc-reading-glyphs--stack {
    display: none !important;
  }
}

.nrc-right-col {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .nrc-right-col {
    flex: 1;
    min-height: 0;
  }
}

.nrc-reading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 8fr);
  align-items: stretch;
  min-width: 0;
  border-top: 1px solid var(--border);
  flex: 1;
  min-height: 0;
}

@media (max-width: 899px) {
  .nrc-reading-glyphs--row {
    display: none !important;
  }
  .nrc-reading-row {
    display: block;
    flex: 0 0 auto;
    min-height: unset;
  }
  .nrc-reading-body-col {
    border-left: none;
  }
}

.nrc-reading-glyphs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: var(--nrc-card-pad, 20px) 12px;
  min-width: 0;
  box-sizing: border-box;
}

.nrc-reading-glyph-planet,
.nrc-reading-glyph-sign {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}

.nrc-reading-glyph-sign {
  opacity: 0.6;
}

.nrc-reading-house-vertical {
  margin-top: 8px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  text-align: end;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--text-dim);
  white-space: nowrap;
  max-height: 160px;
  overflow: hidden;
}

.nrc-reading-body-col {
  min-width: 0;
  border-left: 1px solid var(--border);
}

.nrc-basic {
  padding: var(--nrc-card-pad, 20px);
  font-size: 16px;
  line-height: 28px;
  color: var(--text);
}
.nrc-basic p {
  margin: 0 0 14px;
}
.nrc-basic p:last-child {
  margin-bottom: 0;
}

/* Estado vazio */
.nrc-empty {
  font-size: var(--fs-sm, 13px);
  color: var(--text-dim);
  text-align: center;
  padding: 32px 16px;
}

/* ── Skeleton loading ─────────────────────────────────────────────── */
@keyframes nrc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.nrc-skeleton {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 60%, var(--bg)) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: nrc-shimmer 1.4s infinite linear;
}
.nrc-skeleton--line  { width: 100%; height: 10px; margin-bottom: 6px; }
.nrc-skeleton--line-short { width: 65%; }

.nrc-mini-carto-wrap--skeleton {
  min-height: 72px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.nrc-skeleton--vert-title {
  width: 12px;
  height: 80%;
  max-height: 140px;
  border-radius: 4px;
}

.nrc-skeleton--reading-mini {
  width: 70%;
  max-width: 320px;
  height: 72px;
  border-radius: 8px;
  margin: 0 auto;
}

.nrc-skeleton--reading-glyphs {
  width: 36px;
  height: 56px;
  border-radius: 6px;
}

.natal-reading-card--skeleton .nrc-vert-title {
  justify-content: center;
  align-items: center;
}

.natal-reading-card--skeleton .nrc-basic {
  padding: var(--nrc-card-pad, 20px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.natal-table {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  grid-column: 2 / 12;
  /* Contorno só no corpo: thead fica sem linha nas margens; separador forte abaixo do thead */
  border: none;
  padding: 20px 0;
  margin-top: 0;
  overflow: visible;
  position: relative;
  isolation: isolate;
}
.natal-table-bg-carto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: -1;
}
@media (min-width: 900px) {
  .leitura-natal-table {
    grid-column: 1 / 13;
  }
}
@media (max-width: 899px) {
  #natal-panel-estrutura .natal-table {
    margin-bottom: calc(128px + var(--footer-total-h));
  }
}
.natal-table::-webkit-scrollbar { width: 3px; }
.natal-table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.natal-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}
.natal-table thead {
  text-align: left;
}
.natal-table thead th {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: end;
  vertical-align: middle;
  padding-bottom: 20px;
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
  border: none;
  font-weight: 700;
  color: var(--text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  white-space: nowrap;
  line-height: 1;
}
.natal-table thead th.natal-table-degree {
  font-variant-numeric: tabular-nums;
}

/* Safari/WebKit (iOS PWA e macOS): evita truncar texto vertical no thead */
@supports (-webkit-appearance: none) {
  .natal-table thead th {
    /* WebKit às vezes não calcula bem o box de writing-mode vertical.
       min-height garante que o texto caiba; overflow hidden impede invadir o tbody. */
    min-height: 120px;
    overflow: hidden;
  }
}
.natal-table tbody tr:first-child td {
  border-top: 1px solid var(--border);
}
.natal-table td {
  font-size: 12px;
  padding: 8px 10px;
  border-right: 1px solid var(--overlay-sep);
  border-bottom: 1px solid var(--overlay-sep);
  border-left: none;
  color: var(--text);
  vertical-align: middle;
}
.natal-table tbody td:first-child {
  border-left: 1px solid var(--border);
}
.natal-table td:last-child {
  border-right: 1px solid var(--border);
}
.natal-table tbody .natal-table-degree {
  text-align: right;
  color: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Larguras vs grid mestre no #natal-panel-estrutura: desktop tabela 4/10 → 2+2+1+1 trilhas (C4–C9); mobile 2/12 → 4+4+2 (C2–C11, sem Grau) */
.natal-table-col-pivot { width: calc(100% / 3); min-width: 0; }
.natal-table-col-sign { width: calc(100% / 3); min-width: 0; }
.natal-table-col-house { width: calc(100% / 6); min-width: 0; }
.natal-table-col-degree { width: calc(100% / 6); min-width: 0; }
.natal-table tr:hover td { background: rgba(var(--blue-rgb), 0.04); }
.natal-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

/* Mobile: esconder Graus; colunas 4+4+2 trilhas (Planeta / Signo / Casa) */
@media (max-width: 899px) {
  .natal-table-col-pivot { width: 40%; }
  .natal-table-col-sign { width: 40%; }
  .natal-table-col-house { width: 20%; }
  .natal-table thead th.natal-table-degree,
  .natal-table td.natal-table-degree {
    display: none;
  }
  col.natal-table-col-degree {
    display: none;
  }
}
.natal-table-notice {
  text-align: center;
  padding: 16px 10px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  border-bottom: 1px solid var(--border);
}
.natal-table-sign {
  color: var(--text);
  font-weight: 500;
  vertical-align: middle;
}
.natal-table-house {
  vertical-align: middle;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.natal-table-pivot {
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}
.natal-table-pivot-label {
  min-width: 0;
}
.natal-table-retrograde {
  font-size: 12px;
  opacity: 0.5;
}
.natal-table-empty {
  color: var(--text-faint);
}

@media (min-width: 900px) {
  /* Tabela: C4–C9 → linhas de grade 4 / 10 */
  #natal-panel-estrutura .natal-table {
    grid-column: 4 / 10;
    grid-row: 1;
    margin-bottom: var(--grid-master-gap);
  }
  /* Cartografia: C4–C8 → linhas 4 / 9; mesma linha que barras */
  .cartografia-wrap {
    grid-column: 4 / 9;
    grid-row: 2;
    padding-bottom: calc(48px + var(--footer-total-h));
  }
  /* Barras: coluna C9 → linhas 9 / 10; largura = trilha C9 */
  .elementos-barras-wrap {
    grid-column: 9 / 10;
    grid-row: 2;
    display: block;
    align-self: start;
    padding-bottom: calc(48px + var(--footer-total-h));
  }
}

/* ── Painel Leitura: desktop — 6 colunas centrais (C4–C10) ─────── */
@media (min-width: 900px) {
  .leitura-carto-full-wrap,
  .leitura-carto-2-wrap,
  .leitura-natal-table,
  .leitura-natal-chart-preview,
  #natal-reading-summary,
  #natal-reading-list,
  .leitura-elementos-wrap {
    grid-column: 4 / 10;
  }
}

/* ── Painel Leitura: mobile — meia C1 à meia C12 (11 trilhas + 10 gaps) ── */
@media (max-width: 899px) {
  .leitura-carto-full-wrap,
  .leitura-carto-2-wrap,
  .leitura-natal-table,
  .leitura-natal-chart-preview,
  #natal-reading-summary,
  #natal-reading-list,
  .leitura-elementos-wrap {
    grid-column: 1 / 13;
    justify-self: center;
    width: min(100%, calc(11 * (100% - 11 * var(--grid-master-gap)) / 12 + 10 * var(--grid-master-gap)));
    box-sizing: border-box;
  }
}

/* ── SCROLLBAR GLOBAL ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); }

/* ── ATIVAÇÃO ── */
.activation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.activation-pill {
  border: 1px solid var(--border);
  padding: 5px 8px;
  font-size: var(--fs-xs);
  display: flex; flex-direction: column; gap: 2px;
}
.activation-pill-label {
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9px;
}
.activation-pill-value {
  color: var(--text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.activation-pill.highlight {
  border-color: var(--border-bright);
  background: var(--surface);
}
.activation-aspects {
  margin-top: 8px;
}
.activation-aspect-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.activation-aspect-row:last-child { border-bottom: none; }
.activation-asp-type {
  font-weight: var(--fw-bold);
  min-width: 70px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.activation-asp-type.harmonico { color: var(--blue); }
.activation-asp-type.tensao { color: var(--tension); }
.activation-asp-type.neutro { color: var(--text-dim); }
.activation-asp-planet { color: var(--text-dim); }
.activation-asp-orb {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 9px;
}

/* ── MODAL / FORMULÁRIO ── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal-overlay--blur {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal h2 {
  font-size: var(--fs-lg);
  margin-bottom: 20px;
  color: var(--text);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
  border-radius: 4px;
}

.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--border-bright);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group--tip {
  display: flex;
  align-items: flex-end;
}

.form-group--pullup {
  margin-top: -8px;
}

.form-group--compact-bottom {
  margin-bottom: 8px;
}

.form-group--account {
  margin-bottom: 12px;
}

.form-tip {
  font-size: 9px;
  color: var(--text-faint);
  display: block;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.btn-primary, .btn-secondary {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-primary {
  background: var(--blue);
  color: var(--creme);
  border: none;
}

.btn-primary:hover { filter: brightness(0.85); }

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--border-bright);
  color: var(--text);
}

/* Profile Selector */
.profile-selector {
  margin-bottom: 16px;
}

.profile-list {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 8px;
}

.profile-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-item:last-child { border-bottom: none; }

.profile-item:hover {
  background: var(--surface);
}

.profile-item.active {
  background: var(--surface-hover);
}

.profile-item-name {
  font-size: var(--fs-sm);
  color: var(--text);
}

.profile-item-date {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.profile-delete {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: var(--fs-xs);
}

.profile-delete:hover {
  color: rgba(var(--tension-rgb), 0.8);
}

/* Transit Welcome Overlay */
@keyframes orrery-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes orrery-out { from { opacity: 1; } to { opacity: 0; } }


/* Solar Return Alert */
.solar-return-alert {
  position: fixed;
  bottom: calc(var(--footer-h) + 12px);
  right: 12px;
  background: var(--bg);
  border: 1px solid var(--gold);
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: var(--z-tooltip);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.solar-return-alert.visible {
  transform: translateX(0);
}

.solar-return-alert h3 {
  font-size: var(--fs-sm);
  color: var(--gold);
  margin-bottom: 4px;
}

.solar-return-alert p {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* API Config */
.api-config {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.api-config-toggle {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.api-config-content {
  display: none;
  margin-top: 12px;
}

.api-config-content.visible {
  display: block;
}

/* Revolução Solar Banner */
.solar-banner {
  background: linear-gradient(90deg, rgba(200,169,110,0.15), rgba(200,169,110,0.05));
  border: 1px solid rgba(200,169,110,0.3);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.solar-banner-title {
  font-size: var(--fs-xs);
  color: rgba(200,169,110,0.9);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.solar-banner-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* ── RELATÓRIO ── */

#report-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
}

#report-panel #report-interpretation {
  padding: 16px 16px 0;
}

#report-panel #report-aspects {
  padding: 0;
}

.report-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.report-controls {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.report-period-btns {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}

.report-period-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
}

.report-period-btn:first-child { border-radius: 2px 0 0 2px; }
.report-period-btn:last-child { border-radius: 0 2px 2px 0; }

.report-period-btn.active {
  background: var(--blue);
  color: var(--creme);
  border-color: var(--blue);
}

.report-period-btn:hover:not(.active) {
  border-color: var(--border-bright);
  color: var(--text);
}

.report-date-range {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-align: center;
  padding-top: 4px;
}

.report-content.report-content--no-intro {
  padding-top: 12px;
}

.report-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
}

.report-content::-webkit-scrollbar { width: 3px; }
.report-content::-webkit-scrollbar-track { background: transparent; }
.report-content::-webkit-scrollbar-thumb { background: var(--border); }

.report-intro {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.report-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: var(--text);
}

.report-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.report-aspects {
  margin-bottom: 24px;
}

/* ── RELATÓRIO: Cards de trânsitos (masonry) ── */
.transit-cards-masonry {
  column-count: 1;
  column-gap: 16px;
}
.transit-cards-masonry > .tl-card--transit {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
}

@media (min-width: 769px) { .transit-cards-masonry { column-count: 2; } }
@media (min-width: 900px) { .transit-cards-masonry { column-count: 3; } }
@media (min-width: 1200px) { .transit-cards-masonry { column-count: 4; } }

.tl-card.tl-card--transit {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--blue);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  container-type: inline-size;
}
.tl-card.tl-card--transit:hover {
  background: transparent;
  border-color: var(--border-bright);
}

.tl-card--transit .tl-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--blue);
  border-left: 3px solid var(--border);
}
.tl-card--transit .tl-card-head--harmonico {
  border-left-color: var(--blue);
}
.tl-card--transit .tl-card-head--tensao {
  border-left-color: var(--tension);
}
.tl-card--transit .tl-card-head--neutro {
  border-left-color: var(--text-dim);
}
.tl-card--transit .tl-card-title {
  margin: 0;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tl-card--transit .tl-card-time {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--blue);
  box-sizing: border-box;
}
.tl-card--transit .tl-card-time-canvas {
  display: block;
  width: 100%;
  height: 83px;
}

/* Timeline de duração — leitura do trânsito (overlay); após .tl-card--transit para vencer padding:0 */
.tl-card.tl-card--transit.tl-card--overlay-duration {
  display: block;
  overflow: visible;
  border: 1px solid var(--blue);
  background: none;
  box-shadow: none;
  margin: 0 0 16px;
  padding: 0 !important;
  box-sizing: border-box;
}
.tl-card.tl-card--transit.tl-card--overlay-duration .tl-card-time {
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box;
}
.tl-card--overlay-duration .tl-card-time-canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 83px;
}

.tl-card--transit .tl-card-desc--paragraph {
  margin: 0;
  padding: 16px 20px 20px;
  box-sizing: border-box;
  min-width: 0;
  font-size: 12px;
  line-height: 22px;
  color: var(--text);
}
.tl-card--transit .tl-card-desc--ai {
  font-size: 12px;
  color: var(--text);
}

:root[data-theme="blunt-dark"] .tl-card.tl-card--transit,
:root[data-theme="blunt-dark"] .tl-card.tl-card--transit .tl-card-head,
:root[data-theme="blunt-dark"] .tl-card.tl-card--transit .tl-card-time,
:root[data-theme="blunt-dark"] .tl-card.tl-card--transit .tl-card-desc--paragraph,
:root[data-theme="dark"] .tl-card.tl-card--transit,
:root[data-theme="dark"] .tl-card.tl-card--transit .tl-card-head,
:root[data-theme="dark"] .tl-card.tl-card--transit .tl-card-time,
:root[data-theme="dark"] .tl-card.tl-card--transit .tl-card-desc--paragraph {
  border-color: var(--border);
}

.report-interpretation {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.report-interpretation-title {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.report-interpretation-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.8;
}

.report-interpretation-text p {
  margin-bottom: 12px;
}

.report-interpretation-text strong {
  color: var(--text);
  font-weight: var(--fw-bold);
}

/* Astrology API: rating + life areas + tips */
.astro-rating { font-size: 10px; color: var(--blue); opacity: 0.55; letter-spacing: 1px; }
.astro-life-areas {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-bottom: 12px;
}
.astro-life-area {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text-faint);
}
.astro-bar { letter-spacing: 1px; color: var(--blue); opacity: 0.45; font-size: 9px; }
.astro-tips {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle, var(--bg));
}
.astro-tips-title {
  font-size: 9px; font-weight: var(--fw-bold);
  color: var(--text-faint); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.astro-tip {
  font-size: var(--fs-sm); color: var(--text-dim);
  margin-bottom: 4px; line-height: 1.4;
}
.astro-tip:last-child { margin-bottom: 0; }

.report-generate-btn {
  width: 100%;
  background: var(--blue);
  color: var(--creme);
  border: none;
  padding: 12px 16px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 16px;
}

.report-generate-btn:hover { filter: brightness(0.85); }

.report-empty {
  text-align: center;
  padding: 40px 20px;
  opacity: 0.5;
}

.report-empty-line {
  background: var(--border);
  height: 1px;
  margin: 8px auto;
}

/* ── ASPECT DETAIL OVERLAY ── */
.aspect-overlay {
  --overlay-control-offset: 56px;
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  bottom: var(--footer-h);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: rgba(250,244,237,0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  overflow: hidden;
}
.aspect-overlay-close {
  background: none;
  border: 1px solid var(--overlay-sep);
  color: var(--text-dim);
  width: calc((var(--grid-master-viewport-content)) / 12);
  height: calc((var(--grid-master-viewport-content)) / 12);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.aspect-overlay-content {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.overlay-lead-para {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
}

.aspect-overlay-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-faint);
  padding-top: 20px;
}
.aspect-loading-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-dim);
  animation: pulse 1.2s ease-in-out infinite;
}
.aspect-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.aspect-loading-dot:nth-child(3) { animation-delay: 0.4s; }
.aspect-overlay-loading--top {
  padding-top: 0;
  padding-bottom: 16px;
}


/* ── LUNAR CALENDAR OVERLAY ── */
.lunar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: var(--z-lunar);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.lunar-overlay.visible { display: flex; }
.lunar-overlay canvas {
  border-radius: 4px;
}
.lunar-close {
  position: absolute;
  top: 18px; right: 18px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: 16px;
  width: 30px; height: 30px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  border-radius: 3px;
}


/* ══════════════════════════════════════════
   FOOTER NAV
══════════════════════════════════════════ */
#footer-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  padding-bottom: 0;
  display: flex;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-top: 1px solid var(--border);
  isolation: isolate;
  z-index: var(--z-nav);
}

.ios-standalone #footer-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ios-standalone #footer-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 28%,
    color-mix(in srgb, var(--bg) 10%, transparent) 100%
  );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}
.nav-item {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  background: none; border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
  font-weight: var(--fw-regular);
}
.nav-item.active { font-weight: var(--fw-bold); }
.nav-item:hover { color: var(--text); }
.nav-item svg { flex-shrink: 0; }
.nav-icon {
  display: none;
  width: 24px;
  height: 24px;
}
/* FAB central — toggle de tema */
.nav-fab {
  flex: 0 0 52px;
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  align-self: center;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 14px var(--blue-glow);
  margin: 0 6px;
  transform: translateY(-10px);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-fab:hover, .nav-fab:active {
  transform: translateY(-12px);
  box-shadow: 0 4px 20px var(--blue-glow);
}

/* Ícone do FAB = tema de destino (lua → Observatório, sol → Celeste) */
.nav-fab-icon-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-fab-icon {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity 0.2s ease;
}
:root[data-theme="blunt-light"] .nav-fab-icon-target-obs {
  opacity: 1;
}
:root[data-theme="blunt-light"] .nav-fab-icon-target-light {
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="blunt-dark"] .nav-fab-icon-target-obs {
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="blunt-dark"] .nav-fab-icon-target-light {
  opacity: 1;
}

/* Botão Oráculo no header */
.oracle-header-btn {
  background: none; border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.oracle-header-btn:hover { opacity: 1; }

/* ── TYPEWRITER ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.typewriter-cursor {
  color: var(--blue);
  animation: blink 0.8s infinite;
}
.orby-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
}
.orby-cursor {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-family: var(--font);
  line-height: 1;
  vertical-align: bottom;
}
#oracle-btn .typewriter-cursor.orby-cursor,
#oracle-btn-footer .typewriter-cursor.orby-cursor {
  display: inline-block;
  transform: scaleX(1.5);
  transform-origin: left;
  animation-duration: 1.6s;
}

/* Footer dentro de overlay colorido */
#footer-nav.overlay-active .nav-item {
  color: var(--text-dim);
}
#footer-nav.overlay-active .nav-item.active,
#footer-nav.overlay-active .nav-item:hover {
  color: var(--text);
}
#footer-nav.overlay-active .nav-fab {
  background: var(--text);
  color: var(--bg);
}
#footer-nav.overlay-active .mobile-menu-label,
#footer-nav.overlay-active .mobile-menu-toggle,
#footer-nav.overlay-active .oracle-footer-btn {
  color: var(--text-dim);
}
#footer-nav.overlay-active .mobile-menu-trigger-left:hover .mobile-menu-label,
#footer-nav.overlay-active .mobile-menu-toggle:hover,
#footer-nav.overlay-active .oracle-footer-btn:hover {
  color: var(--text);
}

/* ══════════════════════════════════════════
   HOME — ORRERY + FEED
══════════════════════════════════════════ */
#page-home {
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  overflow: hidden;
}

/* Feed da home — grid 12 colunas, gap 8px, margin 8px */
.home-feed {
  grid-row: 1;
  grid-column: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--header-h) var(--grid-master-pad-x) calc(var(--footer-total-h) + 128px);
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  align-content: start;
  row-gap: 0;
  min-height: 0;
}
.home-feed > * {
  min-width: 0;
}

/* ── Perfil do usuário ── */
.home-profile,
#home-profile {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  align-items: center;
  padding: 20px 0;
}
.home-profile > * {
  min-width: 0;
}
.home-profile:empty { display: none; }

.home-profile-photo {
  grid-column: 1 / span 3;
  display: flex;
  justify-content: center;
}
.home-profile-info {
  grid-column: 4 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  min-width: 0;
}
/* Reset explícito — espaçamento só via margens definidas abaixo */
.home-profile-info > * {
  margin: 0;
}
.home-profile-info > .home-profile-greeting {
  margin-bottom: 6px;
}
.home-profile-info > .home-profile-name { margin-bottom: 0; }
.home-profile-info > .home-profile-meta { margin-bottom: 0; }
.home-profile-info > .home-profile-location { margin-bottom: 0; }
.home-profile-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--text);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.home-profile-greeting {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-profile-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 20px;
  margin-bottom: 0;
}
.home-profile-meta {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.home-profile-location {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.home-profile-placements {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.home-profile-placements-mob,
.home-profile-vdiv {
  display: none;
}
.home-profile-placement {
  font-size: var(--fs-xs);
  color: var(--text);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
}
.hpp-sym {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 16px;
  opacity: 0.95;
}
.hpp-sign-glyph {
  display: none;
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 16px;
  opacity: 0.95;
}

@media (max-width: 768px) {
  /* No mobile, alinhar tudo pelo topo (evita C9–C11 ficar "centralizado") */
  .home-profile,
  #home-profile {
    align-items: start;
  }
  /* Foto deve continuar centralizada no bloco dela (vertical e horizontal) */
  .home-profile-photo {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-profile-info {
    grid-column: 4 / 8;
    align-self: center;
  }

  /* C8: divisória vertical encostando no padding do bloco */
  .home-profile-vdiv {
    display: block;
    grid-column: 8 / 9;
    width: 1px;
    background: var(--border);
    opacity: 0.4;
    align-self: stretch;
  }

  /* C9–C11: planetas + signo em coluna */
  .home-profile-placements--desktop {
    display: none;
  }
  .home-profile-placements-mob {
    display: flex;
    grid-column: 9 / -1;
    justify-content: space-evenly;
    align-items: center;
    align-self: center;
    margin-left: -8px;
  }
  .home-profile-placements-mob .hpm-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .home-profile-placements-mob .hpm-sym {
    font-family: 'Orby Text', 'Orby Astrology', serif;
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    opacity: 0.95;
  }
  .home-profile-placements-mob .hpm-sign {
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    line-height: 1.1;
    color: var(--text-dim);
    white-space: nowrap;
  }

  /* Cidade embaixo da data (mobile). No desktop pode ficar escondida se vazia. */
  .home-profile-location:empty {
    display: none;
  }

  .home-profile-placements .hpp-sign-text {
    display: none;
  }
  .home-profile-placements .hpp-sign-glyph {
    display: inline;
  }

  .home-profile-divider {
    margin: 0;
    opacity: 0.6;
  }

  .home-profile,
  #home-profile {
    padding: 0;
  }
  .home-profile-photo {
    padding: 20px 0;
  }
  .home-profile-info {
    padding: 20px 0;
  }
  .home-profile-placements-mob {
    padding: 20px 0;
  }

}

/* Widgets Lua + Mercúrio — mobile (metade da tela cada) */
.home-moon-widget {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
  margin-left: -8px;
  margin-right: -4px;
  container-type: inline-size;
  container-name: home-orbit-widget;
  cursor: pointer;
}
.home-mercury-widget {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid transparent;
  box-sizing: border-box;
  margin-left: -4px;
  margin-right: -8px;
  container-type: inline-size;
  container-name: home-orbit-widget;
  cursor: pointer;
}
.home-moon-widget .hmw-top,
.home-mercury-widget .hmw-top {
  display: grid;
  column-gap: 0;
  align-items: stretch;
  height: 140px;
}
.home-moon-widget .hmw-top {
  grid-template-columns: 5.25fr 1px 0.75fr;
}
.home-mercury-widget .hmw-top {
  grid-template-columns: 0.75fr 1px 5.25fr;
}
.hmw-canvas-wrap {
  padding: 20px 20px 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.home-moon-widget .hmw-top > .hmw-canvas-wrap,
.home-mercury-widget .hmw-top > .hmw-canvas-wrap {
  place-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  padding: 16px;
}
/* Mercúrio: área do gráfico edge-to-edge na célula (sem padding nem quadrado centrado). */
.home-mercury-widget .hmw-top > .hmw-canvas-wrap {
  place-self: stretch;
  align-self: stretch;
  justify-self: stretch;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  min-height: 0;
}
.home-mercury-widget .hmw-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.hmw-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.home-mercury-widget .hmw-no-chart {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 1.3;
  white-space: normal;
  max-width: 100%;
  padding: 0 6px;
  box-sizing: border-box;
}
.hmw-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}
.hmw-planet-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 10px;
  line-height: 1.1;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px 0;
}
.hmw-phase-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: center;
  border-top: 1px solid var(--border);
  height: calc(100cqi * 0.75 / 6);
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 769px) {
  .home-moon-widget,
  .home-mercury-widget { display: none; }
}

/* Divisor entre perfil e widget — edge-to-edge */
.home-profile-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  opacity: 0.4;
  margin: 0 calc(-1 * var(--grid-master-pad-x));
}

/* Mensagem de erro do horóscopo */
.horo-error {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  padding: 16px 0;
  text-align: center;
}
.horo-error-detail {
  display: block;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
  word-break: break-all;
}

/* Seção do céu de hoje — sub-grid */
.home-sky-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: 0;
  align-content: start;
}
.home-sky-section > * {
  min-width: 0;
}
.home-sky-title {
  grid-column: 1;
  grid-row: 1 / -1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-self: start;
  justify-self: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 128px 0;
}

/* Ícones do céu — centralizados na segunda coluna */
.daily-sky-icons {
  grid-column: 2 / 3;
  justify-self: center;
  padding: 128px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.daily-sky-icon-item {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}
.daily-sky-icon-sign {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 20px;
  line-height: 1;
  opacity: 0.6;
}
.daily-sky-content {
  grid-column: 3 / 12;
  margin-right: 0;
  padding: 128px 0;
  min-width: 0;
}

/* Depois das regras base — senão `padding: 128px 0` sobrescreve o mobile */
@media (max-width: 768px) {
  .home-sky-title,
  .daily-sky-icons,
  .daily-sky-content {
    padding-top: 64px;
    padding-bottom: 128px;
  }
}

.daily-sky-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.daily-sky-title {
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.daily-sky-title:empty { display: none; }
.daily-horo-cols {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 8px;
  margin-bottom: 32px;
  min-width: 0;
}
.daily-horo-col-box {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  background: var(--bg);
}
.daily-horo-col-box p,
.daily-horo-p1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  overflow-wrap: anywhere;
}
.daily-horo-col-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 20px 0;
  padding: 0;
}

/* Céu de hoje — inicia na segunda coluna, termina na penúltima */
.daily-horoscope-card {
  grid-column: 2 / 12;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  background: var(--bg);
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}
#daily-horoscope-card.daily-horoscope-card {
  padding-top: 0;
}

/* Reset margens/paddings dos parágrafos dos cards de horóscopo */
p.daily-horo-p1,
p.daily-horo-col-p {
  margin: 0;
  padding: 0;
}

/* Mini mapa do céu */
.home-sky-mini {
  grid-column: 2 / 12;
  display: block;
  width: 100%;
  max-width: 1164px;
  height: auto;
  aspect-ratio: 1;
  margin: 12px 0;
  border-radius: 50%;
  animation: sky-spin-ccw 240s linear infinite;
}

/* Timeline */
.home-timeline {
  grid-column: 2 / 12;
  display: block;
  min-width: 0;
}

/* Saudação */
.home-greeting {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 12px;
}

.daily-horo-transit-icons {
  display: none;
}
.daily-horo-transit-icon {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  line-height: 1;
}
.daily-horo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 20px 0;
  padding: 0;
}
.daily-horo-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.daily-horo-text p {
  font-size: var(--fs-sm);
  line-height: 24px;
  color: var(--text);
  margin-bottom: 8px;
}
.daily-horo-text p:last-child { margin-bottom: 0; }

/* Timeline 7 dias */
.home-timeline-title {
  grid-column: 2 / 3;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-self: start;
  justify-self: center;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: var(--fw-bold);
  letter-spacing: 4px;
  white-space: nowrap;
  padding: 128px 0;
}
.timeline-empty {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-align: center;
  padding: 20px 0;
}

/* Card de trânsito / notificação */
.tl-card {
  --tl-card-pad: 24px;
  /* Igual à margem vertical do .tl-card-sep — usado para alinhar a linha vertical ao traço superior */
  --tl-sep-gap-y: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--tl-card-pad);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tl-card:hover { background: var(--surface-hover); }
/* Card astro — grade interna com bordas; container sem padding */
.tl-card.tl-card--astro {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--blue);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tl-card.tl-card--astro:hover {
  background: transparent;
  border-color: var(--border-bright);
}
.tl-card.tl-card--astro .tl-card-row1 {
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid var(--blue);
}
.tl-card.tl-card--astro .tl-card-body--astro-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
.tl-card.tl-card--astro .tl-card-body--astro-stack > * {
  min-width: 0;
  width: 100%;
}
/* Grade 50/50: divisória vertical = border-right na descrição */
.tl-card.tl-card--astro .tl-card-astro-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--blue);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tl-card.tl-card--astro .tl-card-astro-head > .tl-card-desc {
  margin: 0;
  padding: 20px;
  border-right: 1px solid var(--blue);
  box-sizing: border-box;
  min-width: 0;
}
.tl-card.tl-card--astro aside.tl-card-astro-aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home:first-child {
  border-bottom: 1px solid var(--blue);
}
.tl-card.tl-card--astro .tl-card-graph-wrap {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
/* Fallback sem gráfico: descrição direta no body */
.tl-card.tl-card--astro .tl-card-body > .tl-card-desc {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

:root[data-theme="blunt-dark"] .tl-card.tl-card--astro,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-row1,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-astro-head,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-astro-head > .tl-card-desc,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home:first-child,
:root[data-theme="dark"] .tl-card.tl-card--astro,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-row1,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-astro-head,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-astro-head > .tl-card-desc,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home:first-child {
  border-color: var(--border);
}
.tl-card--system { cursor: default; }
.tl-card--unread { border-left: 3px solid var(--text); }

/* Row 1: data + título + badge na mesma linha */
.tl-card-row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tl-card-date {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}
.tl-card-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 20px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tl-card-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.tl-card-badge--harmonico {
  color: var(--blue);
  border: 1px solid var(--blue);
  opacity: 0.75;
}
.tl-card-badge--tensao {
  color: var(--tension);
  border: 1px solid rgba(var(--tension-rgb), 0.45);
}
.tl-card-badge--neutro {
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Separador — linha entre título e corpo (sangria até as bordas internas do card) */
.tl-card-sep {
  height: 1px;
  background: var(--border);
  margin: var(--tl-sep-gap-y) calc(-1 * var(--tl-card-pad));
  width: calc(100% + 2 * var(--tl-card-pad));
  box-sizing: border-box;
}

/* Body: descrição + gráfico */
.tl-card-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.tl-graph-info-row--home {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: center;
}
.tl-card-desc {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 20px;
  overflow-wrap: anywhere;
}
.tl-card--astro .tl-card-date {
  font-size: var(--fs-xs);
}
.tl-card--astro .tl-card-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tl-card--astro .tl-card-badge {
  font-size: var(--fs-xs);
  padding: 2px 6px;
}
.tl-card--astro .tl-card-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text);
  text-transform: none;
  overflow-wrap: anywhere;
}
.tl-card-graph-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* Home: só SVG abaixo do bloco cabeçalho */
.tl-card-graph-wrap--home {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
}
.tl-card-graph-wrap--home .tl-card-graph--home {
  padding: 0;
}
/* Glifos no card astro — mesma escala que .daily-horo-p1 */
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-asp {
  font-size: 16px;
  line-height: 28px;
  opacity: 1;
}
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-deg {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.tl-graph-info {
  display: flex;
  gap: 8px;
}
.tl-graph-info-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tl-graph-asp {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 14px;
  opacity: 0.88;
}
.tl-graph-deg {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
.tl-card-graph {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  isolation: isolate;
  animation: ac-chart-spin 120s linear infinite;
  transform-origin: center center;
}
.tl-card-graph.tl-card-graph--home {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(348px, 100%);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  transform-origin: center center;
}
.tl-card-graph::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bg);
  filter: blur(20px);
  z-index: -1;
}
.tl-card-graph--home::before {
  display: none;
}
.tl-card-graph svg,
.tl-card-graph canvas {
  display: block;
  width: 100%;
  height: 100%;
}

canvas.ac-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
}

/* Gráfico de constelação dentro do overlay de trânsito */
.overlay-chart-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  isolation: isolate;
  animation: ac-chart-spin 120s linear infinite;
  transform-origin: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.overlay-chart-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: none;
}
.overlay-chart-wrap svg,
.overlay-chart-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Anti-horário — alinhado ao orrery (canvas) */
@keyframes ac-chart-spin {
  to { transform: rotate(-360deg); }
}

@keyframes sky-spin-ccw {
  to { transform: rotate(-360deg); }
}

/* Wrapper externo quando info-divs ficam fora do SVG */
.overlay-chart-outer {
  margin: 14px 0;
  overflow: visible;
}
.overlay-chart-outer .overlay-chart-wrap {
  margin: 0;
}
.overlay-chart-outer .tl-graph-info {
  padding: 8px 16px;
  gap: 12px;
}

/* Esferas de info (top/bottom) — fundo blur circular */
.tl-graph-info--top,
.tl-graph-info--bottom {
  border-radius: 9999px;
  padding: 4px 16px;
  position: relative;
  isolation: isolate;
}
.tl-graph-info--top::before,
.tl-graph-info--bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--bg);
  filter: blur(12px);
  z-index: -1;
}

/* Coluna com linhas empilhadas (graus trânsito + natal) */
.tl-graph-info-col--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.tl-graph-info-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Coluna direita alinhada (período, orbe, status) */
.tl-graph-info-col--right {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
.tl-graph-period {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
.tl-graph-duration,
.tl-graph-status {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-style: italic;
  opacity: 0.5;
}
.tl-graph-orb {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}

/* Pull-to-refresh indicator */
.ptr-indicator {
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  height: 0;
  opacity: 0;
  transition: none;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   SPLIT CONTAINER (Trânsitos & Mapa Natal)
══════════════════════════════════════════ */
.split-toggle-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.split-btn {
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
.split-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}
.split-btn.active {
  color: var(--bg);
  background: var(--blue);
}

.split-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* data-mode="top": relatório — só painel de texto */
.split-container[data-mode="top"] .split-top    { flex: 1; display: flex; }
.split-container[data-mode="top"] .split-bottom { display: none; }

/* data-mode="learn": igual ao relatório — só texto (evita split-bottom visível sem JS) */
.split-container[data-mode="learn"] .split-top    { flex: 1; display: flex; }
.split-container[data-mode="learn"] .split-bottom { display: none; }

.split-container[data-mode="learn"] #transit-desc-panel {
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* O grid do Guia Técnico é position:fixed (como lrn-label e lrn-next),
   por isso #transit-desc-content não precisa de padding aqui */
.split-container[data-mode="learn"] #transit-desc-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ══════════════════════════════════════════
   APRENDER — Guia técnico (desktop)
══════════════════════════════════════════ */
.transit-learn-root {
  display: none;
  box-sizing: border-box;
  width: 100%;
}

.transit-learn-root.transit-learn-root--visible {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  grid-template-rows: 1fr;
  column-gap: 0;
  overflow: hidden;
  align-items: stretch;
}


.transit-learn-root .lrn-label {
  /* Fixo ao viewport — não participa do fluxo do grid */
  position: fixed;
  left: var(--grid-master-pad-x);
  width: calc(var(--grid-master-viewport-content) / 12);
  top: var(--header-h);
  bottom: var(--footer-total-h);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--border);
}

.transit-learn-root .lrn-title-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

.transit-learn-root .lrn-progress {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

.transit-learn-root .lrn-toc {
  grid-column: 2 / 7;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding-top: var(--header-h);
  padding-bottom: var(--footer-total-h);
}

/* --- Linhas do TOC (flex row) --- */

.transit-learn-root .lrn-toc-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.transit-learn-root .lrn-toc-intro-row {
  border-bottom: 1px solid var(--border);
}

/* Col 2: "SUMÁRIO" vertical (20% do TOC = 1 col do grid mestre) */
.transit-learn-root .lrn-toc-summary-col {
  width: 20%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding: 64px 8px;
}

.transit-learn-root .lrn-toc-summary-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

/* Botão Introdução (cols 3-6, 80% do TOC) */
.transit-learn-root .lrn-toc-intro {
  flex: 1;
  padding: 20px;
}

/* --- Linhas de capítulo --- */

.transit-learn-root .lrn-part {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

/* Col 2: número romano (alinha artigos com a coluna Introdução) */
.transit-learn-root .lrn-part-roman {
  width: 20%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding: 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

/* Cols 3-6: lista de artigos (80% do TOC) */
.transit-learn-root .lrn-part-articles {
  flex: 1;
  display: block;
}

/* --- Artigos --- */

.transit-learn-root .lrn-article-item {
  display: block;
  width: 100%;
  padding: 20px;
  border: none;
  border-bottom: 1px solid var(--overlay-sep);
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  color: var(--text);
}

/* Último artigo do capítulo: fecha grupo, sem divisor (o capítulo já tem borda) */
.transit-learn-root .lrn-part-articles .lrn-article-item:last-child {
  border-bottom: none;
}

.transit-learn-root .lrn-article-item.is-active {
  background: var(--bg-2);
}

.transit-learn-root .lrn-body {
  grid-column: 7 / 12;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
}

.transit-learn-root .lrn-article-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.transit-learn-root .lrn-title-zone {
  flex-shrink: 0;
  padding: 128px 64px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.transit-learn-root .lrn-chapter-roman {
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
}

.transit-learn-root .lrn-chapter-name {
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 40px;
}

.transit-learn-root .lrn-article-body {
  padding: 64px;
}

.transit-learn-root .lrn-intro-heading {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--text);
}

.transit-learn-root .lrn-intro-body p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}

.transit-learn-root .lrn-intro-body p:last-child {
  margin-bottom: 0;
}

.transit-learn-root .lrn-article-title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text);
}

.transit-learn-root .lrn-article-body p {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  overflow-wrap: anywhere;
  color: var(--text-dim);
}

.transit-learn-root .lrn-article-body p:last-child {
  margin-bottom: 0;
}



.transit-learn-root .lrn-nav {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 64px var(--footer-total-h);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.transit-learn-root .lrn-nav-prev,
.transit-learn-root .lrn-nav-next {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-dim);
}

.transit-learn-root .lrn-next {
  /* Fixo ao viewport — não participa do fluxo do grid */
  position: fixed;
  right: 8px;
  width: calc((100vw - 16px) / 12);
  top: var(--header-h);
  bottom: var(--footer-total-h);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--bg);
  border-left: 1px solid var(--border);
}

.transit-learn-root .lrn-next-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 10px;
  line-height: 16px;
  color: var(--text-faint);
  text-align: center;
}

/* ══ APRENDER — mobile (≤768px) ══ */
@media (max-width: 768px) {

  :root { --lrn-mob-bar-h: 72px; }

  /* Barra de título: largura total, fixada abaixo do header */
  .transit-learn-root .lrn-label {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    top: var(--header-h);
    bottom: auto;
    height: var(--lrn-mob-bar-h, 72px);
    box-sizing: border-box;
    flex-direction: row;
    justify-content: center;
    padding: 20px 8px;
    background: color-mix(in srgb, var(--bg) 10%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--border);
    border-left: none;
  }

  /* Título horizontal */
  .transit-learn-root .lrn-title-vert {
    writing-mode: horizontal-tb;
    letter-spacing: 0.15em;
  }

  /* Esconde progresso na barra mobile */
  .transit-learn-root .lrn-progress {
    display: none;
  }

  /* TOC: fixed, zona esquerda + centro (right=12.5vw para deixar espaço ao nav) */
  .transit-learn-root .lrn-toc {
    position: fixed;
    left: 0;
    right: 12.5vw;
    top: calc(var(--header-h) + var(--lrn-mob-bar-h, 72px));
    bottom: var(--footer-total-h);
    grid-column: unset;
    height: auto;
    padding: 0;
    overflow-y: auto;
  }

  /* Coluna sumário/romanos = 12.5vw */
  .transit-learn-root .lrn-toc-summary-col,
  .transit-learn-root .lrn-part-roman {
    width: 12.5vw;
    flex-shrink: 0;
  }

  /* Body: fixed, zona central; oculto no estado lista */
  .transit-learn-root .lrn-body {
    display: none;
    position: fixed;
    left: 12.5vw;
    right: 12.5vw;
    top: calc(var(--header-h) + var(--lrn-mob-bar-h, 72px));
    bottom: var(--footer-total-h);
    grid-column: unset;
    height: auto;
    flex-direction: column;
  }

  /* Título do artigo menor no mobile */
  .transit-learn-root .lrn-article-title {
    font-size: 16px;
    line-height: 24px;
  }

  /* Padding lateral 24px, vertical 64px na área de texto */
  .transit-learn-root .lrn-article-content {
    padding-top: 0;
  }
  .transit-learn-root .lrn-title-zone {
    padding: 128px 24px;
  }
  .transit-learn-root .lrn-article-body {
    padding: 64px 24px;
  }

  /* [hidden] override: evita que display:flex anule o atributo */
  .transit-learn-root .lrn-mob-btn[hidden] {
    display: none;
  }

  /* Esconde nav desktop e coluna "próximo" */
  .transit-learn-root .lrn-nav,
  .transit-learn-root .lrn-next {
    display: none;
  }

  /* Nav mobile: fixed na direita, sempre visível */
  .transit-learn-root .lrn-mob-nav {
    display: flex;
    position: fixed;
    right: 0;
    width: 12.5vw;
    top: calc(var(--header-h) + var(--lrn-mob-bar-h, 72px));
    bottom: var(--footer-total-h);
    flex-direction: column;
    border-left: 1px solid var(--border);
    background: var(--bg);
    z-index: 10;
  }

  .transit-learn-root .lrn-mob-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
  }

  .transit-learn-root .lrn-mob-btn-prev {
    border-bottom: 1px solid var(--border);
  }

  .transit-learn-root .lrn-mob-label {
    writing-mode: vertical-rl;
    text-orientation: upright;
  text-orientation: upright;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 9px;
    font-weight: 700;
  }

  /* === Estado artigo aberto === */

  /* TOC colapsa: apenas coluna sumário (12.5vw), sem scroll */
  .transit-learn-root.lrn--article-open .lrn-toc {
    right: auto;
    width: 12.5vw;
    overflow-y: hidden;
    cursor: pointer;
  }

  /* Esconde artigos e numerais; mantém só intro-row com SUMÁRIO */
  .transit-learn-root.lrn--article-open .lrn-part,
  .transit-learn-root.lrn--article-open .lrn-toc-intro {
    display: none;
  }

  .transit-learn-root.lrn--article-open .lrn-toc-intro-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-bottom: none;
  }

  .transit-learn-root.lrn--article-open .lrn-toc-summary-col {
    width: auto;
    border-right: none;
    padding: 8px 4px;
  }

  /* Chevron indicando que o SUMÁRIO é clicável */
  .transit-learn-root.lrn--article-open .lrn-toc-summary-vert::after {
    content: '›';
    display: block;
    writing-mode: horizontal-tb;
    font-size: 18px;
    margin-top: 12px;
    color: var(--text-dim);
  }

  /* Body aparece em artigo aberto */
  .transit-learn-root.lrn--article-open .lrn-body {
    display: flex;
  }
}

/* data-mode="bottom": mapa do céu — só gráfico/canvas */
.split-container[data-mode="bottom"] .split-top    { display: none; }
.split-container[data-mode="bottom"] .split-bottom { flex: 1; display: flex; }

.split-top {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
#transit-desc-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#transit-desc-panel::-webkit-scrollbar { width: 3px; }
#transit-desc-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.split-container[data-mode="learn"] #transit-desc-panel.split-top {
  overflow: visible;
}

.split-bottom {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.split-bottom::-webkit-scrollbar { width: 3px; }
.split-bottom::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ══════════════════════════════════════════
   SHOP PLACEHOLDER
══════════════════════════════════════════ */
.placeholder-page {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; color: var(--text-faint);
}
.placeholder-icon { font-size: 40px; opacity: 0.4; }
.placeholder-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   YOU PAGE
══════════════════════════════════════════ */
#page-you {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Reserva largura da scrollbar para as colunas baterem com o header (sem “salto” ~1 coluna) */
  scrollbar-gutter: stable;
  /* FAB do footer sobrepõe ~13px acima da barra (mobile); evita que o último scroll fique atrás do botão */
  scroll-padding-bottom: calc(var(--footer-total-h) + 64px);
}
#natal-panel-grafico.natal-panel {
  margin-top: var(--header-h);
}
/* Voltar à leitura (painel gráfico natal) */
.natal-chart-back-btn {
  position: fixed;
  z-index: 13;
  left: 8px;
  top: calc(var(--header-h) + 8px);
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.natal-chart-back-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-bright);
}
.natal-chart-back-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.natal-chart-back-icon {
  display: block;
}
@media (min-width: 769px) {
  .natal-chart-back-btn {
    top: calc(var(--header-h) + 12px);
  }
}

/* Fechar gráfico (Trânsitos → hub) — dentro de orrery-zoom-control */
.transit-chart-close-btn {
  width: 44px; height: 44px;
  flex-shrink: 0;
  padding: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  color: var(--gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
.transit-chart-close-btn:hover { opacity: 0.7; }
.transit-chart-close-btn:active { opacity: 0.5; }
.transit-chart-close-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.transit-chart-close-icon { display: block; }
.transit-chart-close-btn[hidden] { display: none !important; }
@media (min-width: 769px) {
  #page-transits .chart-controls-layer .orrery-zoom-control {
    position: fixed;
    top: var(--chart-safe-top);
    right: 12px;
    transform: none;
  }
}
@media (max-width: 768px) {
  #page-transits .chart-controls-right-stack {
    top: 0;
    right: 8px;
  }
}

/* Canvas natal cobre a tela toda (igual ao orrery em Trânsitos). */
#page-you .natal-canvas-area {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: unset;
}
.you-content {
  padding: 20px 16px;
  padding-bottom: var(--footer-total-h);
  max-width: 500px;
  margin: 0 auto;
}
.you-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: 20px;
  color: var(--text);
}
.you-subtitle {
  font-size: var(--fs-sm);
  margin: 20px 0 12px;
  color: var(--text);
}
.you-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.you-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Fix iOS zoom-on-focus */
.form-group input,
.form-group select,
.form-group textarea {
  font-size: 16px;
  touch-action: manipulation;
}

/* ── SKELETON LOADING NOS CANVAS ── */
@keyframes canvas-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.canvas-loading {
  position: relative;
  overflow: hidden;
}

.canvas-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border) 50%,
    transparent 100%
  );
  animation: canvas-shimmer 1.5s infinite;
  will-change: transform;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════
   AUTH GATE
══════════════════════════════════════════ */
#page-auth {
  position: fixed; inset: 0; z-index: var(--z-auth);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px calc(40px + var(--safe-bottom));
  overflow-y: auto;
}

html.auth-gate-active,
body.auth-gate-active {
  background: var(--bg);
}

.auth-brand {
  text-align: center;
  margin-bottom: 32px;
}

.auth-wrap {
  width: 320px;
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.auth-tab--hidden,
.auth-tab[data-tab="register"][hidden] {
  display: none !important;
}
.auth-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab.active {
  color: var(--text);
  border-bottom-color: var(--blue);
}

/* Formulários */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-step-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
  text-align: center;
}

.auth-submit {
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
}
.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-link {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  padding: 12px 0 0;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-link:hover { color: var(--text); }

/* Mensagens */
.auth-msg {
  font-size: var(--fs-xs);
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: none;
}
.auth-msg--error {
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.2);
}
.auth-msg--ok {
  color: #27ae60;
  background: rgba(39,174,96,0.08);
  border: 1px solid rgba(39,174,96,0.2);
}
:root[data-theme="blunt-dark"] .auth-msg--error { color: #e74c3c; background: rgba(231,76,60,0.1); }
:root[data-theme="blunt-dark"] .auth-msg--ok    { color: #2ecc71; background: rgba(46,204,113,0.1); }

/* Checkbox */
.auth-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
}
.auth-check-label input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* Autocomplete de lugar */
.auth-place-wrap { position: relative; }

.place-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: var(--z-tooltip);
  max-height: 180px;
  overflow-y: auto;
}
.place-option {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-option:last-child { border-bottom: none; }
.place-option:hover { background: var(--surface-hover); color: var(--text); }

/* Badge do assistente Orby */
.assistant-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.assistant-badge--orby {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--blue);
  border: 1px solid var(--border);
}
.assistant-badge--astra {
  display: inline-flex;
  align-items: center;
  background: rgba(120, 60, 200, 0.15);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.35);
}

/* ── SHOP / PLANOS ── */
.shop-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: 20px;
}
.shop-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shop-plan {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  position: relative;
}
.shop-plan--active {
  border-color: var(--blue);
  background: var(--surface);
}
.shop-plan--featured {
  border-color: var(--blue);
}
.shop-plan-badge {
  position: absolute;
  top: -1px; right: 12px;
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--creme);
  padding: 2px 8px;
  border-radius: 0 0 3px 3px;
}
.shop-plan-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.shop-plan-price {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-bottom: 10px;
}
.shop-plan-features {
  list-style: none;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.shop-plan-locked {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
}
.shop-plan-btn {
  width: 100%;
}
.shop-plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Seção Oráculo no Shop */
.shop-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.shop-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--text);
}
.shop-oracle-plan {
  border-color: var(--blue);
  background: var(--surface);
}
.shop-oracle-status {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: 4px;
}

/* ── PAYWALL BLOCK ── */
.paywall-block {
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.paywall-icon { font-size: 24px; color: var(--text-dim); }
.paywall-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.paywall-desc {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  max-width: 280px;
  line-height: 1.6;
}
.paywall-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  margin-top: 4px;
  padding: 10px 24px;
}

/* Botão de sair (YOU page, adicionado na Fase 4) */
.btn-sign-out {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: var(--fs-xs);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sign-out:hover { border-color: var(--border-bright); color: var(--text); }

.auth-link--reset {
  font-size: 0.72rem;
  opacity: 0.5;
  margin-top: 4px;
}

.loading-label {
  margin-left: 8px;
}

.shop-plan-features--compact {
  margin: 10px 0 14px;
}

.col-inner-empty {
  text-align: center;
  padding-top: 40px;
}

.inline-note {
  font-weight: 400;
  color: var(--text-dim);
}

.input-readonly {
  background: var(--bg-3);
  color: var(--text-dim);
}

.btn-block-spaced {
  width: 100%;
  margin-top: 8px;
}

.btn-sign-out-spaced {
  margin-top: 16px;
}

.coupon-code-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Tooltip oculto em dispositivos de toque (não tem hover) */
@media (pointer: coarse) {
  .tooltip { display: none !important; }
}

/* Notificação do sistema */
.system-notification {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: 20px;
  background: var(--bg);
  border: 1px solid var(--blue);
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: var(--z-modal);
  font-size: var(--fs-sm);
  color: var(--text);
  transform: translateX(120%);
  transition: transform 0.3s ease;
}
.system-notification.visible {
  transform: translateX(0);
}

/* ══════════════════════════════════════════
   TRANSIT TIMELINE — Horizontal Wheel Picker
══════════════════════════════════════════ */
.tl-wheel-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

/* Triangle indicator — fixed at top, centered over ruler viewport */
.tl-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  line-height: 0;
  background: transparent;
  border: none;
}
/* Full date indicator — static below ruler, centered */
.tl-date-indicator {
  text-align: center;
  font-size: 9px;
  color: var(--text-faint);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 3px 0 4px;
  min-height: 16px;
  border-top: 1px solid var(--border);
  text-transform: uppercase;
}

/* Ruler area: scrollable ruler */
.tl-ruler-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  overflow: visible;
  height: auto;
  margin-top: 20px; /* equaliza gap triângulo↔dot e dot↔tick */
}



.tl-ruler {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  cursor: grab;
  padding: 6px 0; /* breathing room for scaled dots */
}
.tl-ruler:active { cursor: grabbing; }
.tl-ruler::-webkit-scrollbar { display: none; }

/* Each date group: 2 rows (dots + ticks) */
.tl-date-group {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  flex-shrink: 0;
}

/* Row 1: dots */
.tl-dots-row {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}

/* Dots (circles only, no text below) */
.tl-dot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
  width: 48px;
  height: 100%;
  overflow: visible;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--overlay-dot);
  transition: transform 0.15s, opacity 0.15s, background 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Times New Roman', serif;
  font-size: 8px;
  line-height: 1;
  color: var(--text);
}
.tl-dot-wrap.harmonico .tl-dot { background: var(--overlay-dot); }
.tl-dot-wrap.tensao    .tl-dot { background: rgba(255,120,80,0.7); }
.tl-dot-wrap.tl-active .tl-dot {
  box-shadow: 0 0 6px var(--blue-glow);
  color: #fff;
}
.tl-dot-wrap.tl-locked .tl-dot {
  background: var(--overlay-sep);
  border: 1px dashed var(--overlay-dot);
}
.tl-dot-wrap.tl-locked { opacity: 0.45; cursor: pointer; }

/* Row 2: ticks — base toca a linha divisória */
.tl-ruler-row {
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* Separador de data entre grupos — aparece no nível dos ticks */
.tl-date-sep {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  padding: 0 3px;
}
.tl-date-sep .tl-date-label {
  font-size: 7px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 20px;
}

/* Tick wrappers align with dot widths */
.tl-tick-wrap {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Vertical ticks (demarcation) */
.tl-tick {
  width: 2px;
  height: 16px;
  background: var(--overlay-sep);
  border-radius: 1px;
  transition: background 0.15s;
}
.tl-tick--active {
  background: var(--text);
  height: 20px;
}

.tl-loading {
  color: var(--text-faint);
  font-size: 10px;
  padding: 8px 16px;
  letter-spacing: 0.1em;
}

/* ──── Period controls bar ──── */
.tl-period-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 10px;
  gap: 8px;
}
.tl-period-group {
  display: flex;
  gap: 4px;
}
.tl-period-btn {
  background: none;
  border: 1px solid var(--overlay-sep);
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tl-period-btn.tl-period-active {
  background: none;
  color: var(--text);
  border-color: var(--overlay-dot-active);
}
.tl-today-btn {
  background: none;
  color: var(--text);
  border: 1px solid var(--overlay-sep);
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
}
.tl-today-btn:hover { background: none; opacity: 0.85; border-color: var(--text); }

/* ══════════════════════════════════════════
   ORÁCULO ORBY — modal
══════════════════════════════════════════ */
.oracle-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header — grid mestre 12 colunas */
.oracle-modal-header {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  gap: var(--grid-master-gap);
  padding: env(safe-area-inset-top) var(--grid-master-pad-x) 0;
  height: calc(48px + env(safe-area-inset-top));
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.oracle-modal-brand {
  grid-column: 1 / 9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: var(--grid-master-pad-x);
}
.oracle-modal-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.oracle-header-right {
  grid-column: 9 / 13;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: var(--grid-master-pad-x);
}
.oracle-credits-pill {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.oracle-close-btn {
  width: 28px; height: 28px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.oracle-close-btn:hover { color: var(--text); border-color: var(--border-bright); }

/* Context strip — céu atual como chips horizontais */
.oracle-context-strip {
  display: flex;
  gap: 6px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.oracle-context-strip::-webkit-scrollbar { display: none; }
.oracle-context-chip {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--surface);
  flex-shrink: 0;
}

/* Chat thread */
.oracle-chat-thread {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oracle-empty {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-align: center;
  padding: 24px 0;
}

/* Mensagens — grid mestre 12 colunas */
.oracle-msg {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  gap: var(--grid-master-gap);
}
.oracle-msg--user .oracle-msg-bubble {
  grid-column: 4 / 13;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px 0 6px 6px;
  padding: 8px 10px;
}
.oracle-msg--orby .oracle-msg-bubble {
  grid-column: 1 / 11;
  border: 1px solid var(--border);
  border-radius: 0 6px 6px 6px;
  padding: 8px 10px;
}
.oracle-msg-sender { margin-bottom: 5px; }
.oracle-msg-text {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
}
.oracle-msg--user .oracle-msg-text { color: var(--text-dim); }
.oracle-msg-text p { margin-bottom: 8px; }
.oracle-msg-text p:last-child { margin-bottom: 0; }
.oracle-error { color: var(--tension); font-size: var(--fs-sm); }
.oracle-no-credits {
  text-align: center;
  padding: 8px 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* Suggestion chips */
.oracle-chips-row {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.oracle-chips-row::-webkit-scrollbar { display: none; }
.oracle-chip-btn {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  font-family: var(--font);
}
.oracle-chip-btn:hover { background: var(--surface); color: var(--text); }

/* Input area */
.oracle-input-area {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  align-items: flex-end;
}
.oracle-textarea {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  padding: 8px 10px;
  resize: none;
  line-height: 1.6;
}
.oracle-textarea:focus { outline: none; border-color: var(--border-bright); }
.oracle-ask-btn {
  flex-shrink: 0;
  align-self: flex-end;
}
.oracle-ask-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════════════════
   AMIGOS / SINASTRIA
══════════════════════════════════════════ */

/* ── Página ─────────────────────────────── */
#page-friends {
  flex-direction: column;
  overflow: hidden;
}

#page-friends.page-friends--synastry {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-padding-bottom: calc(var(--footer-total-h) + 64px);
}

.friends-col-inner {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + 16px) 16px calc(var(--footer-total-h) + 32px);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Telas: lista ↔ sinastria ───────────── */
#friends-screen-list {
  display: flex;
  flex-direction: column;
}

#friends-screen-synastry {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.friends-synastry-tripa {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: 64px;
  padding: calc(var(--header-h) + 16px) var(--grid-master-pad-x) calc(var(--footer-total-h) + 64px);
  align-content: start;
  box-sizing: border-box;
  width: 100%;
}

.friends-synastry-tripa .synastry-tripa-block {
  grid-column: 2 / 12;
  min-width: 0;
}

.friends-synastry-header.synastry-tripa-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 900px) {
  .friends-synastry-tripa .synastry-tripa-block {
    grid-column: 4 / 10;
  }
}

@media (max-width: 899px) {
  .friends-synastry-tripa .synastry-tripa-block {
    grid-column: 1 / 13;
    justify-self: center;
    width: min(100%, calc(11 * (100% - 11 * var(--grid-master-gap)) / 12 + 10 * var(--grid-master-gap)));
    box-sizing: border-box;
  }
}

#synastry-carto-canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ── Notificações ───────────────────────── */
.friends-section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-top: 4px;
  margin-bottom: 8px;
}

#friends-notifications-area {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.friends-notif-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--text);
}
.friends-notif-item + .friends-notif-item {
  border-top: 1px solid var(--border);
}

.friends-notif-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.friends-notif-text {
  flex: 1;
  line-height: 1.4;
}
.friends-notif-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.friends-notif-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.friends-notif-dismiss:hover { color: var(--text); }

/* ── Busca ──────────────────────────────── */
.friends-search-wrap {
  position: relative;
  margin-bottom: 12px;
}

.friends-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
}
.friends-search-input:focus {
  outline: none;
  border-color: var(--border-bright);
}
.friends-search-input::placeholder { color: var(--text-faint); }

.friends-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* ── Resultados e itens de lista ─────────── */
.friends-search-item,
.friends-connection-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.friends-search-item:last-child,
.friends-connection-item:last-child {
  border-bottom: none;
}
.friends-search-item:hover { background: var(--surface); }
.friends-search-item > span { flex: 1; }

.friends-search-loading,
.friends-search-empty {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.friends-search-name {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.friends-search-handle {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Botão adicionar manual ─────────────── */
.friends-add-manual-btn {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

/* ── Quick Add horizontal scroll ─────────── */
.friends-quickadd-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.friends-quickadd-scroll::-webkit-scrollbar { display: none; }

.friends-qa-card {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.friends-qa-card--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.friends-qa-card--action { cursor: pointer; }
.friends-qa-card--action:hover { border-color: var(--border-bright); }

.friends-qa-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.friends-qa-name {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}
.friends-qa-handle {
  font-size: 10px;
  color: var(--text-faint);
}
.friends-qa-btn {
  margin-top: auto;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-family: var(--font);
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.friends-qa-btn:hover:not(:disabled) { border-color: var(--border-bright); color: var(--text); }
.friends-qa-btn:disabled { opacity: 0.4; cursor: default; }

.friends-suggested-inline { display: contents; }

/* ── Avatar círculo com inicial ─────────── */
.friends-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: #fff;
}
.friends-avatar--sm  { width: 32px; height: 32px; font-size: 13px; }
.friends-avatar--qa  { width: 44px; height: 44px; font-size: 18px; }

/* ── Lista de amigos (Co-Star style) ────── */
#friends-connections-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
#friends-connections-list:empty { display: none; }

.friends-friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.friends-friend-item:last-child { border-bottom: none; }
.friends-friend-item--pending { cursor: default; opacity: 0.7; }

.friends-friend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.friends-friend-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.friends-friend-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friends-friend-handle {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.friends-friend-signs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.friends-friend-signs span { font-size: 11px; color: var(--text-dim); }
.friends-friend-pending-label { font-size: 11px; color: var(--text-faint); font-style: italic; }

.friends-friend-arrow {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 0 4px 4px;
  line-height: 1;
  transition: color 0.15s;
}
.friends-friend-item:hover .friends-friend-arrow { color: var(--text); }

/* ── Pendentes recebidos ─────────────────── */
.friends-pending-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.friends-pending-item:last-child { border-bottom: none; }
.friends-pending-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Score badge na lista ─────────────────── */
.friends-score-badge {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 10px;
  padding: 1px 6px;
  opacity: 0.8;
}

/* ── Badges de status ───────────────────── */
.friends-badge {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.friends-badge--mutual {
  color: var(--blue);
  border: 1px solid var(--blue);
  opacity: 0.7;
}
.friends-badge--pending {
  color: var(--text-faint);
  border: 1px solid var(--border);
}
.friends-badge--manual {
  color: #C49A3C;
  border: 1px solid #C49A3C;
  opacity: 0.8;
}

/* ── Botões de aprovação / ação ─────────── */
.friends-approve-wrap {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
}
.friends-approve-btn,
.friends-decline-btn,
.friends-syn-btn,
.friends-add-btn {
  flex: none;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  font-family: var(--font);
  transition: all 0.15s;
}
.friends-approve-btn {
  background: var(--ink);
  color: var(--creme);
  border: none;
}
.friends-approve-btn:hover { filter: brightness(0.75); }
.friends-approve-btn--loading,
.friends-approve-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
.friends-decline-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.friends-decline-btn:hover { border-color: var(--border-bright); color: var(--text); }
.friends-syn-btn {
  margin-left: auto;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.friends-syn-btn:hover { background: var(--surface); }
.friends-add-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.friends-add-btn:hover { border-color: var(--border-bright); color: var(--text); }

/* ── Estado vazio ───────────────────────── */
.friends-empty-state {
  padding: 32px 0 16px;
  text-align: center;
}
.friends-empty-hint {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0;
}

/* ── Loading hint ───────────────────────── */
.friends-loading-hint {
  padding: 16px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

/* ── Cabeçalho da sinastria ─────────────── */

.friends-back-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
}
.friends-back-btn:hover { color: var(--text); }

.friends-synastry-friend-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Painéis de conteúdo (tripa sinastria — scroll da página) ── */
.friends-synastry-panel {
  display: contents;
}

.synastry-score-section,
.synastry-radar-wrap,
.synastry-axis-cards,
.synastry-realm-breakdown {
  width: 100%;
  box-sizing: border-box;
}

/* ── Score-síntese ──────────────────────── */
.synastry-score-section {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.synastry-score-ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}
.synastry-score-ring-wrap canvas {
  display: block;
}
.synastry-score-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.synastry-score-num {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1;
}

.synastry-score-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.synastry-score-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.synastry-score-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Radar ──────────────────────────────── */
.synastry-radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}
.synastry-radar-wrap canvas {
  display: block;
}

/* ── Cards por eixo ─────────────────────── */
.synastry-axis-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.synastry-axis-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.synastry-axis-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.synastry-axis-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.synastry-axis-score {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.synastry-axis-bar-bg {
  height: 4px;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.synastry-axis-bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.synastry-axis-text {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
  margin: 2px 0 0;
}

/* ── Aspectos dominantes ────────────────── */
.synastry-dominant-aspects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.synastry-dominant-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.synastry-dominant-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.synastry-dominant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface);
}

.synastry-dominant-item--harmonic {
  border-left: 3px solid var(--blue);
}
.synastry-dominant-item--tense {
  border-left: 3px solid #ff5050;
}

.synastry-dominant-planets {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text);
}

.synastry-dominant-glyph {
  font-family: 'Orby Astrology', sans-serif;
  font-size: 1.1em;
  line-height: 1;
}

.synastry-dominant-pname {
  font-weight: var(--fw-bold);
}

.synastry-dominant-asp {
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
}

.synastry-dominant-qual {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.synastry-dominant-item--tense .synastry-dominant-qual {
  color: #ff5050;
}

/* ── Reinos de compatibilidade (amizade) ── */
.synastry-realm-breakdown {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 4px;
}

.synastry-realm-group-head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.synastry-realm-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.synastry-realm-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.synastry-realm-bar {
  flex-shrink: 0;
  width: 4px;
  border-radius: 2px;
  min-height: 36px;
  align-self: stretch;
}

.synastry-realm-group--high .synastry-realm-bar {
  background: var(--gold, #C49A3C);
}

.synastry-realm-group--neutral .synastry-realm-bar {
  background: repeating-linear-gradient(
    -45deg,
    var(--text-faint),
    var(--text-faint) 2px,
    transparent 2px,
    transparent 5px
  );
  opacity: 0.45;
}

.synastry-realm-group--low .synastry-realm-bar {
  background: var(--tension, #ff5050);
  opacity: 0.55;
}

.synastry-realm-body {
  flex: 1;
  min-width: 0;
}

.synastry-realm-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.synastry-realm-glyph {
  font-family: 'Orby Astrology', serif;
  margin-right: 4px;
}

.synastry-realm-signs {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.synastry-realm-arrow {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: var(--fs-base);
}

.synastry-realm-empty {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
  padding: 12px 0;
}

/* ── CTA compatibilidade romântica (Premium) ── */
.synastry-romantic-cta {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

.synastry-romantic-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.synastry-romantic-divider::before,
.synastry-romantic-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.synastry-romantic-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 8px;
}

.synastry-romantic-copy {
  flex: 1;
  min-width: 0;
}

.synastry-romantic-title {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 6px;
}

.synastry-romantic-desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
}

.synastry-romantic-arrow {
  flex-shrink: 0;
  font-size: var(--fs-lg);
  color: var(--text-faint);
  padding-top: 2px;
}

.synastry-romantic-cta:hover .synastry-romantic-title,
.synastry-romantic-cta:hover .synastry-romantic-arrow {
  color: var(--blue);
}


/* ── Roda natal cruzada ─────────────────── */
.synastry-wheel-area {
  width: 100%;
  aspect-ratio: 1;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  touch-action: none;
  overflow: hidden;
}
.synastry-wheel-area canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Modal: Adicionar pessoa de fora ─────── */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
}
@media (min-width: 500px) {
  .bottom-sheet-overlay {
    align-items: center;
    justify-content: center;
  }
}

.bottom-sheet {
  background: var(--bg);
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 500px) {
  .bottom-sheet {
    border-radius: 8px;
    max-width: 420px;
    max-height: 85dvh;
  }
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.bottom-sheet-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.bottom-sheet-close:hover { color: var(--text); }

/* ── Formulário do modal ────────────────── */
.friends-manual-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
}

.profile-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin-top: 12px;
  margin-bottom: 4px;
}
.profile-label:first-child { margin-top: 0; }

.profile-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
}
.profile-input:focus {
  outline: none;
  border-color: var(--border-bright);
}
.profile-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


.friends-form-error {
  font-size: var(--fs-xs);
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.2);
  border-radius: 4px;
  padding: 7px 10px;
  margin-top: 10px;
}

.friends-manual-submit {
  width: 100%;
  margin-top: 16px;
}
.friends-manual-cancel {
  width: 100%;
  margin-top: 8px;
}

/* ══════════════════════════════════════════
   YOU — sub-menu e settings
══════════════════════════════════════════ */
#page-settings {
  flex-direction: column;
  overflow: hidden;
}

/* ── Settings: grid 12 col; moldura desktop cols 4–9; lista = mobile em todos os breakpoints ── */
#page-settings .col-inner.you-settings {
  --settings-gap: var(--grid-master-gap);
  --settings-track: calc((100% - 11 * var(--settings-gap)) / 12);
  padding-top: calc(var(--header-h) + 12px);
  padding-left: var(--grid-master-pad-x);
  padding-right: var(--grid-master-pad-x);
  padding-bottom: calc(var(--footer-total-h) + 24px + 128px);
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--settings-gap);
  align-items: start;
}
/* Moldura: mobile cols 2–11; desktop 4–10. Salvar e Sair são filhos diretos do grid .you-settings */
#page-settings .col-inner.you-settings > .settings-frame {
  --settings-frame-pad-x: 0px;
  grid-row: 2;
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  #page-settings .col-inner.you-settings > .settings-frame {
    --settings-frame-pad-x: calc(12px + var(--settings-track) / 2);
    grid-column: 4 / 10;
    padding: 12px 0;
  }
}

#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global {
  grid-row: 1;
  width: 100%;
  margin: 0 0 12px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  background-color: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--border);
  border-radius: 4px;
  filter: none;
}
#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global:hover {
  filter: none;
  background-color: var(--surface-hover);
  color: var(--border);
}
#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global:focus-visible {
  outline: 2px solid var(--border-bright);
  outline-offset: 2px;
}
#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
@media (max-width: 899px) {
  #page-settings .col-inner.you-settings > #settings-save-global.settings-save-global {
    grid-column: 2 / 6;
    justify-self: stretch;
  }
}
@media (min-width: 900px) {
  #page-settings .col-inner.you-settings > #settings-save-global.settings-save-global {
    grid-column: 4 / 6;
    justify-self: stretch;
    margin: 0;
  }
}

#page-settings .col-inner.you-settings > .btn-sign-out.btn-sign-out-spaced {
  grid-row: 3;
  width: 100%;
  box-sizing: border-box;
  margin: 64px 0 0 0;
  padding: 8px 16px;
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
}
@media (max-width: 899px) {
  #page-settings .col-inner.you-settings > .btn-sign-out.btn-sign-out-spaced {
    grid-column: 5 / 9;
    justify-self: stretch;
  }
}
@media (min-width: 900px) {
  #page-settings .col-inner.you-settings > .btn-sign-out.btn-sign-out-spaced {
    grid-column: 6 / 8;
    justify-self: stretch;
  }
}

#page-settings .settings-frame > .you-title {
  justify-self: stretch;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 64px 0;
  box-sizing: border-box;
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-orientation: upright;
}

#page-settings .settings-frame > .settings-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  margin-top: 0;
}
@media (max-width: 899px) {
  #page-settings .settings-frame > .settings-stack {
    position: relative;
  }
  #page-settings .settings-frame > .settings-stack::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }
}
@media (min-width: 900px) {
  #page-settings .settings-frame > .settings-stack {
    margin-top: 0;
    border: 1px solid var(--border);
    padding-top: 0;
    box-sizing: border-box;
  }
}

/* Cartões de configuração — mesma linguagem do .tl-card--astro (trânsito da semana na home) */
.settings-group {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: transparent;
  box-sizing: border-box;
}
:root[data-theme="blunt-dark"] .settings-group,
:root[data-theme="dark"] .settings-group {
  border-color: var(--border);
}

/* Lista plana só em #page-settings (mobile = desktop; cartão azul não se usa) */
#page-settings .settings-stack .settings-group,
#page-settings .settings-group {
  margin-bottom: 24px;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (min-width: 900px) {
  #page-settings .settings-stack .settings-group,
  #page-settings .settings-group {
    margin-bottom: 0;
  }
}

/* Natal: última linha (local) sem borda inferior; células do .form-row seguem a lista */
#page-settings .settings-group--natal > .form-group:last-of-type {
  border-bottom: none;
  padding-bottom: 20px;
}
#page-settings .settings-group--natal .form-row .form-group {
  margin-bottom: 0;
}

/* Só em Configuração: títulos de grupo e labels usam caixa alta a 10px (exceção ao corpo 12px) */
.settings-group-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px 0;
  font-weight: var(--fw-bold);
  line-height: 16px;
}
.settings-group .form-group label {
  font-size: var(--fs-xs);
  line-height: 16px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
/* Configuração: Consulta/agentes/DESIGN_RULES.md --text-xs (12px / 16px; line-height múltiplo de 4px).
   Escopo #page-settings evita sobrescrever o font-size 16px global dos .form-group (fix zoom iOS no auth). */
#page-settings .form-group input,
#page-settings .form-group select,
#page-settings .form-group textarea {
  font-size: 12px;
  line-height: 16px;
  border-radius: 4px;
  text-align: right;
}
#page-settings .settings-place-btn {
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  padding: 12px 12px 18px 12px;
  align-items: flex-start;
  gap: 8px;
}
#page-settings .settings-place-btn #settings-place-display {
  flex: 1;
  min-width: 0;
  text-align: right;
  line-height: 1.35;
  padding-bottom: 2px;
}
#page-settings .settings-place-btn .settings-place-chevron {
  align-self: center;
  flex-shrink: 0;
}
#page-settings .coupon-code-input {
  font-size: var(--fs-xs);
  line-height: 16px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--blue);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 16px;
  color: var(--text);
}
:root[data-theme="blunt-dark"] .settings-row,
:root[data-theme="dark"] .settings-row {
  border-bottom-color: var(--border);
}
#page-settings .settings-row {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.settings-group .settings-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
#page-settings .settings-group .settings-row:last-of-type {
  border-bottom: 1px solid var(--border);
}
#page-settings .settings-group .settings-row.settings-row--danger {
  padding-top: 12px;
  padding-bottom: 12px;
}
#page-settings .settings-row > span:not(:first-child):not(.settings-badge) {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--text);
  text-align: right;
}
#page-settings .settings-row .language-selector-settings,
#page-settings .settings-row .theme-selector-settings {
  font-weight: 400;
  margin-top: 0;
}
#page-settings .settings-row .lang-btn,
#page-settings .settings-row .theme-btn {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 4px;
}
#page-settings .settings-row .lang-btn.active,
#page-settings .settings-row .theme-btn.active {
  font-weight: 600;
}
.settings-row--disabled { opacity: 0.5; cursor: not-allowed; }
.settings-row--danger { color: var(--text); }
.settings-badge {
  font-size: var(--fs-xs);
  line-height: 16px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
}
.settings-badge--danger {
  background: rgba(var(--tension-rgb), 0.12);
  color: var(--tension);
}
.settings-danger-btn {
  background: none;
  border: 1px solid var(--tension);
  color: var(--tension);
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.settings-danger-btn:hover { background: rgba(var(--tension-rgb), 0.1); }
.settings-danger-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#page-settings .btn-primary,
#page-settings .btn-secondary,
#page-settings .btn-sign-out {
  font-size: 12px;
  line-height: 16px;
}

#page-settings .place-search-input {
  font-size: 12px;
  line-height: 16px;
  padding: 12px 12px;
  border-radius: 4px;
  text-align: right;
}
#page-settings .settings-place-results {
  border-radius: 4px;
}
#page-settings .settings-place-result-item {
  font-size: 12px;
  line-height: 16px;
  padding: 12px 12px;
}
#page-settings .settings-place-empty {
  font-size: 12px;
  line-height: 16px;
  padding: 16px 12px;
}

.coupon-feedback {
  font-size: 12px;
  line-height: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  margin-top: 8px;
}
.coupon-feedback--success {
  color: var(--blue);
  background: var(--surface);
  border-color: var(--border);
}
.coupon-feedback--error {
  color: var(--tension);
  background: rgba(var(--tension-rgb), 0.08);
  border-color: rgba(var(--tension-rgb), 0.28);
}

/* ── Configuração — lista (rótulo | valor): igual mobile/desktop; só mobile usa divisória 100vw ── */
#page-settings .settings-group-title {
  margin: 0;
  letter-spacing: 0.14em;
  background: transparent;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}
/* Nicho: título sem painel; itens (linhas) com fundo distinto */
#page-settings .settings-group > *:not(.settings-group-title) {
  background-color: var(--bg-2);
}
#page-settings .settings-group > .settings-group-title + * {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#page-settings .settings-group > *:not(.settings-group-title):last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
#page-settings .settings-group > #coupon-feedback.coupon-feedback--success {
  background: var(--surface);
  color: var(--blue);
}
#page-settings .settings-group > #coupon-feedback.coupon-feedback--error {
  background: rgba(var(--tension-rgb), 0.08);
  color: var(--tension);
}
/* Campos sem “caixa”: mais largura útil, sem padding esquerdo */
#page-settings .settings-group .form-group input:not([type="hidden"]),
#page-settings .settings-group .form-group select,
#page-settings .settings-group .form-group textarea,
#page-settings .settings-group .form-group--account .input-readonly,
#page-settings .settings-group .settings-place-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 0;
}
#page-settings .settings-group .form-group input:focus-visible,
#page-settings .settings-group .form-group select:focus-visible,
#page-settings .settings-group .form-group textarea:focus-visible,
#page-settings .settings-group .settings-place-btn:focus-visible,
#page-settings .settings-group #coupon-btn.coupon-apply-btn:focus-visible {
  outline: 2px solid var(--border-bright);
  outline-offset: 2px;
}
#page-settings .settings-group--natal > .form-row {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#page-settings .settings-group > .form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 12px 0;
  position: relative;
  border-bottom: 1px solid var(--border);
}
#page-settings .settings-group > .form-group label {
  flex: 0 1 44%;
  margin-bottom: 0;
  text-align: left;
  align-self: center;
}
#page-settings .settings-group > .form-group input:not([type="hidden"]),
#page-settings .settings-group > .form-group select,
#page-settings .settings-group > .form-group textarea {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
#page-settings .settings-group > .form-group .settings-place-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  justify-content: space-between;
  text-align: right;
}
#page-settings .settings-group > .form-group:has(.settings-place-btn) {
  align-items: flex-start;
}
#page-settings .settings-group > .form-group:has(.settings-place-btn) label {
  align-self: center;
  padding-top: 2px;
}
#page-settings .settings-group > .form-group .settings-place-chevron {
  margin-left: 8px;
}
#page-settings .settings-group > .form-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
}
#page-settings .settings-group > .form-row .form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--border);
}
#page-settings .settings-group > .form-row .form-group label {
  flex: 0 1 44%;
  margin-bottom: 0;
}
#page-settings .settings-group > .form-row .form-group input,
#page-settings .settings-group > .form-row .form-group select,
#page-settings .settings-group > .form-row .form-group textarea {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
#page-settings .settings-group > .btn-primary {
  width: 100%;
  margin-top: 12px;
}
#page-settings .settings-group > .coupon-feedback {
  margin-top: 0;
  margin-bottom: 8px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 0;
  background-color: var(--bg-2);
}

/* Cupom: label, input e botão na mesma linha */
#page-settings .settings-group > .form-group.form-group--compact-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > label {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  margin-bottom: 0;
  box-sizing: border-box;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-input {
  flex: 1 1 auto;
  flex-grow: 1;
  min-width: 0;
  width: auto;
  text-align: right;
  align-self: center;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border) !important;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-btn.coupon-apply-btn {
  flex-shrink: 0;
  flex-grow: 0;
  width: auto;
  margin: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 12px;
  line-height: 16px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 4px;
  padding: 8px 16px;
  transition: all 0.15s;
  filter: none;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-btn.coupon-apply-btn:hover {
  border-color: var(--border-bright);
  color: var(--text);
  background: none;
  filter: none;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-btn.coupon-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
#page-settings .coupon-apply-btn__glyph {
  display: inline-block;
  font-family: 'Orby Text', inherit;
  line-height: 1;
  font-size: 14px;
  transform: rotate(90deg);
  transform-origin: center;
}

/* Data/hora (mapa natal): sem ícones nativos de calendário/relógio no campo */
#page-settings .settings-group #birth-date::-webkit-calendar-picker-indicator,
#page-settings .settings-group #birth-time::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
#page-settings .settings-group #birth-time::-webkit-inner-spin-button,
#page-settings .settings-group #birth-time::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
#page-settings .settings-group #birth-date::-moz-calendar-picker-indicator {
  display: none;
}

/* Tema / idioma: mesmo layout empilhado em mobile e desktop */
#page-settings .settings-row--language,
#page-settings .settings-row--theme {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 12px;
}
#page-settings .settings-row--language .language-selector-settings,
#page-settings .settings-row--theme .theme-selector-settings {
  margin-top: 0;
  width: 100%;
}
#page-settings .lang-btn,
#page-settings .theme-btn {
  min-height: 44px;
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
}

#page-settings .form-group input::placeholder,
#page-settings .form-group textarea::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

@media (max-width: 899px) {
  /* Fundo do nicho em 100vw + divisórias */
  #page-settings .settings-group > .form-group,
  #page-settings .settings-group > .form-row .form-group,
  #page-settings .settings-group > .settings-row,
  #page-settings .settings-group > .coupon-feedback:not(.coupon-feedback--success):not(.coupon-feedback--error) {
    background-color: transparent !important;
  }
  #page-settings .settings-group > .form-group::before,
  #page-settings .settings-group > .form-row .form-group::before,
  #page-settings .settings-group > .settings-row::before,
  #page-settings .settings-group > .coupon-feedback::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    top: 0;
    bottom: 0;
    background: var(--bg-2);
    pointer-events: none;
  }
  #page-settings .settings-group > #coupon-feedback.coupon-feedback--success::before,
  #page-settings .settings-group > #coupon-feedback.coupon-feedback--error::before {
    content: none;
  }

  #page-settings .settings-group > .form-group,
  #page-settings .settings-group > .form-row .form-group,
  #page-settings .settings-group > .settings-row {
    border-bottom: none !important;
  }
  #page-settings .settings-group > .form-group::after,
  #page-settings .settings-group > .form-row .form-group::after,
  #page-settings .settings-group > .settings-row:not(:last-of-type)::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }
  #page-settings .settings-group > .settings-row:last-of-type::after {
    content: none;
  }

  #page-settings .settings-group > .coupon-feedback {
    border-bottom: none;
    position: relative;
    z-index: 1;
  }
  #page-settings .settings-group > .coupon-feedback::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }

  /* Conteúdo acima do fundo (::before) e da linha (::after) — evita pseudos a taparem texto no mobile */
  #page-settings .settings-group > .form-group > *,
  #page-settings .settings-group > .form-row .form-group > *,
  #page-settings .settings-group > .settings-row > * {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 900px) {
  #page-settings .settings-group > .form-group::before,
  #page-settings .settings-group > .form-row .form-group::before,
  #page-settings .settings-group > .settings-row::before,
  #page-settings .settings-group > .coupon-feedback::before {
    content: none !important;
    display: none !important;
  }
  #page-settings .settings-frame > .settings-stack::after {
    content: none !important;
    display: none !important;
  }
  #page-settings .settings-group > .form-group::after,
  #page-settings .settings-group > .form-row .form-group::after,
  #page-settings .settings-group > .settings-row::after,
  #page-settings .settings-group > .coupon-feedback::after {
    content: none !important;
    display: none !important;
  }

  /* Texto alinhado ao recuo do grid; bordas em toda a largura útil da moldura (padding só no conteúdo) */
  #page-settings .settings-group-title {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: var(--settings-frame-pad-x);
    padding-right: var(--settings-frame-pad-x);
    box-sizing: border-box;
  }
  #page-settings .settings-group > .form-group,
  #page-settings .settings-group > .form-row .form-group,
  #page-settings .settings-group > .settings-row,
  #page-settings .settings-group > .coupon-feedback {
    padding-left: var(--settings-frame-pad-x);
    padding-right: var(--settings-frame-pad-x);
    box-sizing: border-box;
  }
  #page-settings .settings-group > .btn-primary {
    padding-left: var(--settings-frame-pad-x);
    padding-right: var(--settings-frame-pad-x);
    box-sizing: border-box;
  }
}

/* ── Player body: 12 colunas no mobile (toggle continua em 8) ── */
@media (max-width: 899px) {
  #page-transits .player-body {
    width: calc(100vw - 16px);
    margin-left: calc(-1 * (100vw - 8px) / 6);
  }

  /* Transport ocupa as 6 colunas centrais do player-body (metade da largura) */
  .player-transport {
    width: calc((100vw - 16px) / 2);
    margin: 0 auto;
    gap: 4px;
    padding: 0;
  }
}

/* ── Layout desktop: home em 2 colunas ──────────────────────────────── */
@media (min-width: 900px) {
  /* Player de trânsitos: colunas centrais (4–9) do grid mestre */
  #page-transits .tempo-panel {
    width: calc((var(--grid-master-viewport-content)) / 2 + 40px);
    align-self: center;
    margin-bottom: calc(var(--footer-total-h) + 32px);
  }

  /* Seção do céu de hoje: primeiras 6 colunas, sub-grid de 6 */
  .home-sky-section {
    grid-column: 1 / 7;
    grid-template-columns: repeat(6, 1fr);
  }
  .home-sky-title {
    grid-column: 1;
    grid-row: 1 / -1;
    writing-mode: vertical-rl;
    text-orientation: upright;
  text-orientation: upright;
    align-self: start;
    justify-self: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 128px 0;
  }
  .daily-sky-icons {
    grid-column: 2 / 3;
    justify-self: center;
    align-self: start;
    padding: 128px 0;
  }
  .daily-sky-content {
    grid-column: 3 / 7;
    margin-right: 0;
    padding: 128px 0;
  }
  .daily-horoscope-card {
    grid-column: 2 / 7;
    width: 100%;
    max-width: none;
    margin-right: 0;
  }
  .home-sky-mini {
    grid-column: 2 / 7;
    width: 100%;
    max-width: none;
    height: auto;
    margin-right: 0;
  }
  .daily-horo-cols {
    grid-column: 2 / 7;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr 1fr;
    margin-right: 0;
  }

  /* Trânsito da semana: grid mestre */
  .home-timeline-title {
    grid-column: 7;
    writing-mode: vertical-rl;
    text-orientation: upright;
  text-orientation: upright;
    align-self: start;
    justify-self: center;
    font-size: 10px;
    letter-spacing: 4px;
    padding: 128px 0;
  }
  .home-timeline {
    grid-column: 8 / 12;
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding-top: 128px;
    padding-bottom: 16px;
  }

}


/* ══════════════════════════════════════════
   I18N — SELETORES DE IDIOMA
   ══════════════════════════════════════════ */

.language-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.language-option:hover {
  border-color: var(--blue);
  background: var(--bg-3);
}

.language-option.selected {
  border-color: var(--blue);
  background: rgba(var(--blue-rgb), 0.08);
}

.language-flag {
  font-size: 20px;
  line-height: 1;
}

.language-name {
  font-weight: 500;
}

.language-selector-settings,
.theme-selector-settings {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lang-btn,
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.lang-btn:hover,
.theme-btn:hover {
  border-color: var(--blue);
  background: var(--bg-3);
}

.lang-btn.active,
.theme-btn.active {
  border-color: var(--blue);
  background: var(--surface);
  font-weight: 600;
}


/* ══════════════════════════════════════════
   FOOTER — MOBILE COLLAPSE / DESKTOP TEXT
══════════════════════════════════════════ */
/* Camada de vidro do menu mobile (dentro do .mobile-menu-grid-wrap): mesma altura que o grid para não sobrar faixa vazia em cima */
.mobile-menu-panel-glass {
  display: none;
}

@media (max-width: 768px) {
  :root {
    --footer-h: 50px;
    --mobile-menu-panel-max-h: 220px;
    --mobile-nav-fab-size: 52px;
  }

  /* Desktop items ocultos no mobile */
  .desktop-nav,
  .desktop-fab { display: none !important; }

  /* Footer base fica fixo; só o painel expandido anima para cima */
  #footer-nav {
    flex-direction: column;
    height: var(--footer-h);
    overflow: visible;
  }

  .mobile-menu-shell {
    display: block;
    width: 100%;
    height: var(--footer-h);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  /* Barra mobile: 1fr MENU (centro) | 1fr Orby; chevron só em .menu-open (1 col) */
  .mobile-menu-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: var(--footer-h);
    width: 100%;
    position: relative;
    z-index: 1;
    transition: grid-template-columns 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #footer-nav.menu-open .mobile-menu-header {
    grid-template-columns: 1fr;
  }

  .mobile-menu-trigger-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 0 8px;
    margin: 0;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .mobile-menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    letter-spacing: 0.15em;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--text);
  }

  .oracle-footer-btn.mobile-oracle-footer {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    margin: 0;
    padding: 4px 6px;
    min-height: 36px;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  #footer-nav.menu-open .mobile-menu-trigger-left,
  #footer-nav.menu-open .oracle-footer-btn.mobile-oracle-footer {
    display: none;
  }

  .mobile-menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding: 0 12px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  #footer-nav.menu-open .mobile-menu-toggle {
    display: flex;
  }

  /* Chevron ▲ colapsado (canvas = ▲; rotate 180° = ▼ quando aberto) */
  .mobile-menu-toggle-chevron {
    display: block;
    transform: rotate(0deg);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* FAB: centro horizontal (50vw); só ~25% do disco acima da linha do topo da barra (75% dentro da faixa) */
  .mobile-fab-nav {
    position: fixed;
    left: 50vw;
    bottom: calc(var(--footer-h) - var(--mobile-nav-fab-size) * 0.75);
    transform: translateX(-50%);
    width: 64px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-nav) + 1);
    pointer-events: none;
  }

  .mobile-fab-nav .nav-fab {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    transform-origin: center bottom;
    flex-shrink: 0;
    max-width: 64px;
    margin: 0;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.28s ease,
      visibility 0s linear 0s,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .mobile-fab-nav .nav-fab:hover,
  .mobile-fab-nav .nav-fab:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px var(--blue-glow);
  }

  /* Vidro dentro do wrap: altura = conteúdo (até max-height), evita faixa vazia acima do grid vs. vidro fixo 220px */
  .mobile-menu-panel-glass {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 -10px 30px color-mix(in srgb, var(--bg) 24%, transparent);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.28s ease 0.05s, visibility 0s linear 0.33s;
  }

  #footer-nav.menu-open .mobile-menu-panel-glass {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease 0.05s, visibility 0s linear 0s;
  }

  /* Painel expandido — recorte + empilhamento; vidro preenche o wrap (inset:0) */
  .mobile-menu-grid-wrap {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--footer-h);
    isolation: isolate;
    z-index: 1;
    transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-menu-grid-wrap::before {
    display: none;
  }

  .mobile-menu-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    width: 100%;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease 0.05s, transform 0.28s ease 0.05s;
  }

  #footer-nav.menu-open .mobile-menu-grid {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu-grid .nav-item {
    flex: none;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 0 10px;
    min-height: 48px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-regular);
    gap: 0;
    text-align: center;
  }

  .mobile-menu-grid .nav-item span {
    display: block !important;
  }

  #footer-nav.menu-open .mobile-menu-grid-wrap {
    max-height: var(--mobile-menu-panel-max-h);
  }

  /* Abaixo do shell/painel (z-index 1): o wrapper do FAB é fixed + z-nav+1; com FAB invisível
     ainda cobria o grid e o canvas aparecia por cima das linhas inferiores (parece “menu desceu”). */
  #footer-nav.menu-open .mobile-fab-nav {
    z-index: 0;
  }

  #footer-nav.menu-open .mobile-menu-toggle-chevron {
    transform: rotate(180deg);
  }

  #footer-nav.menu-open .mobile-fab-nav .mobile-theme-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    transition:
      opacity 0.22s ease,
      visibility 0s linear 0.22s,
      transform 0s linear 0.22s,
      box-shadow 0.2s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu-header,
    .mobile-menu-grid-wrap,
    .mobile-menu-grid,
    .mobile-menu-panel-glass,
    .mobile-menu-trigger-left,
    .oracle-footer-btn.mobile-oracle-footer,
    .mobile-menu-toggle,
    .mobile-fab-nav .nav-fab,
    .mobile-menu-toggle-chevron {
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
    }
    #footer-nav.menu-open .mobile-fab-nav .mobile-theme-fab {
      opacity: 0;
      transform: none;
    }
    .mobile-menu-grid {
      transform: none;
    }
  }
}

@media (min-width: 769px) {
  /* Elementos mobile ocultos no desktop */
  .mobile-menu-shell,
  .mobile-fab-nav { display: none !important; }

  /* Orby segue o grid do header no desktop (C11–C12) */
  .oracle-header-btn {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
}

/* ══════════════════════════════════════════
   MODAL — BUSCA DE LOCAL DE NASCIMENTO
══════════════════════════════════════════ */
.place-search-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  flex-direction: column;
  overflow: hidden;
}

.place-search-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 16px;
  z-index: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.place-search-close:hover { color: var(--text); }

.place-search-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 48px) 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  min-height: 0;
}

.place-search-input-wrap {
  position: relative;
}

.place-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
}
.place-search-input:focus { border-color: var(--blue); }

.settings-place-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.settings-place-results:empty { display: none; }

.settings-place-result-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 13px 14px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1.4;
}
.settings-place-result-item:last-child { border-bottom: none; }
.settings-place-result-item:hover,
.settings-place-result-item:active { background: var(--surface-hover); color: var(--text); }

.settings-place-empty {
  padding: 16px 14px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
}

/* Botão do campo "Local de Nascimento" nos settings */
.settings-place-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-height: 42px;
}
.settings-place-btn:hover { border-color: var(--blue); }

.settings-place-chevron {
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   SALVOS — OVERLAY SAVE BUTTON + PANEL
══════════════════════════════════════════ */
.overlay-save-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.overlay-save-btn:hover { color: var(--text); }
.overlay-save-btn--saved { color: var(--blue); }
.overlay-save-btn--saved svg path { fill: var(--blue); stroke: var(--blue); }

/* Relatório: ícone Salvos — mesmo chip dark/gold. */
#transit-report-toolbar .transit-report-saved-btn.overlay-save-btn {
  padding: 8px 14px;
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  color: var(--gold);
}
#transit-report-toolbar .transit-report-saved-btn.overlay-save-btn svg path {
  stroke: var(--gold);
}
#transit-report-toolbar .transit-report-saved-btn.overlay-save-btn:hover {
  opacity: 0.8;
}
#transit-report-toolbar .transit-report-saved-btn--active.overlay-save-btn {
  box-shadow: inset 0 0 0 1px var(--gold);
}
#transit-report-toolbar .transit-report-saved-btn--active.overlay-save-btn svg path {
  fill: var(--gold);
  stroke: var(--gold);
}

/* Cards salvos */
.tl-card--saved {
  cursor: pointer;
}
.tl-card-body--saved-actions {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 2px;
  min-height: unset;
}
.saved-remove-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.saved-remove-btn:hover { color: var(--tension); }

.saved-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ══════════════════════════════════════════
   TRANSIT ALERT MODAL
══════════════════════════════════════════ */
.transit-alert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 16px;
}
.transit-alert-backdrop.visible { opacity: 1; }

/* Desktop: encaixado entre header e footer */
@media (min-width: 900px) {
  .transit-alert-backdrop {
    top: var(--header-h, 56px);
    bottom: var(--footer-h, 56px);
    z-index: calc(var(--z-nav) - 500);
  }
}

.transit-alert-dialog {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(360px, 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tad-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.tad-symbol {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text);
}
.tad-title-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tad-planet {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.tad-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.tad-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  flex-shrink: 0;
  border-radius: 3px;
  transition: color 0.15s;
}
.tad-close:hover { color: var(--text); }

.tad-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tad-msg {
  font-size: var(--fs-xs);
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.02em;
}
.tad-msg--dim { color: var(--text-dim); }

.tad-next-block {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left-width: 3px;
}
.tad-next-block--harmonico { border-left-color: var(--harmonico, #4a9eff); }
.tad-next-block--tensao    { border-left-color: var(--tensao,    #ff5050); }
.tad-next-block--neutro    { border-left-color: var(--border); }

.tad-next-asp {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: 0.04em;
}
.tad-next-with {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.tad-next-date {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 2px;
}

.tad-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.tad-btn {
  width: 100%;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  text-align: center;
}
.tad-btn--primary {
  background: var(--blue);
  color: var(--creme, #f5f0e8);
  border: none;
}
.tad-btn--primary:hover { filter: brightness(0.88); }

/* Janelas de aviso — CTA primário em Ink (não Solar/gold do tema) */
.transit-alert-dialog .tad-btn--primary,
.paywall-block .btn-primary,
.modal-overlay .modal-actions .btn-primary,
.oracle-no-credits .btn-primary {
  background: var(--ink, #1A1814);
  color: var(--creme, #faf4ed);
  border: none;
}
.transit-alert-dialog .tad-btn--primary:hover,
.paywall-block .btn-primary:hover,
.modal-overlay .modal-actions .btn-primary:hover,
.oracle-no-credits .btn-primary:hover {
  filter: brightness(1.12);
}
.tad-btn--ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.tad-btn--ghost:hover { border-color: var(--border-bright); color: var(--text); }

/* ══════════════════════════════════════════
   NOVA HOME DE TRÂNSITOS — Lista Linear
   Cards compactos + estado expandido inline
══════════════════════════════════════════ */

/* Paleta trânsitos — alinhada aos mockups Celeste / Observatório */
:root {
  --tlc-harmonico-solid: #f0cc71;
  --tlc-harmonico-light: #d9ca9d;
  --tlc-tensao-solid:    #e0946f;
  --tlc-tensao-light:    #d9ca9d;
  --tlc-neutro-solid:    #d0dac9;
  --tlc-neutro-light:    #d9ca9d;
  --tlc-text-on-solid:   #1a1814;
  --tlc-text-on-light:   #1a1814;
  --tl-split-card: 40%;
  --tl-split-widget: 50%;
}
:root[data-theme="blunt-dark"],
:root[data-theme="dark"] {
  --tlc-harmonico-solid: #84681c;
  --tlc-harmonico-light: #4b473b;
  --tlc-tensao-solid:    #75311a;
  --tlc-tensao-light:    #4b473b;
  --tlc-neutro-solid:    #657674;
  --tlc-neutro-light:    #4b473b;
  --tlc-text-on-solid:   #84681c;
  --tlc-text-on-light:   #84681c;
}

/* Container da lista */
.transit-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 calc(var(--footer-total-h) + 24px);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Card fechado ── base (passado→hoje) + tom (hoje→fim); split em --tlc-today-pct */
.transit-lcard {
  --tl-bar-tone: var(--tlc-neutro-solid);
  position: relative;
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 0 20px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--tl-bar-base, var(--tlc-neutro-light)) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
  transition: filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.transit-lcard:hover { filter: brightness(0.96); }
.transit-lcard--locked {
  cursor: pointer;
}
.transit-lcard--locked:hover { filter: none; }
.transit-lcard--locked .transit-lcard__title {
  filter: blur(6px);
  opacity: 0.75;
  user-select: none;
}
.transit-lcard__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg-1, #f5f0e8) 35%, transparent);
}
:root[data-theme="blunt-dark"] .transit-lcard__veil,
:root[data-theme="dark"] .transit-lcard__veil {
  background: color-mix(in srgb, var(--bg-1, #1a1a1a) 45%, transparent);
}
.transit-lcard--featured {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold, #C49A3C) 85%, transparent);
}
.transit-lcard__badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1.2;
}
.transit-lcard__badge--open {
  background: color-mix(in srgb, var(--gold, #C49A3C) 22%, var(--bg-1, #fff));
  color: var(--text, #1a1a1a);
}
.transit-lcard__badge--locked {
  max-width: min(52%, 11rem);
  text-align: right;
  background: color-mix(in srgb, var(--ink, #1A1814) 88%, transparent);
  color: var(--creme, #faf4ed);
}
:root[data-theme="blunt-dark"] .transit-lcard__badge--locked,
:root[data-theme="dark"] .transit-lcard__badge--locked {
  background: color-mix(in srgb, var(--creme, #EDE0BD) 92%, transparent);
  color: var(--ink, #1A1814);
}
.transit-lcard--harmonico {
  --tl-bar-tone: var(--tlc-harmonico-solid);
}
.transit-lcard--tensao {
  --tl-bar-tone: var(--tlc-tensao-solid);
}
.transit-lcard--neutro {
  --tl-bar-tone: var(--tlc-neutro-solid);
}

/* Título do card fechado */
.transit-lcard > .transit-lcard__title {
  margin: 0;
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-stretch: 125%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid);
  line-height: 1.35;
  pointer-events: none;
}

/* ── Card expandido ──
   3 zonas: [header claro] [faixa colorida] [rodapé claro] */
.transit-lcard--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: default;
  overflow: hidden;
}
.transit-lcard--expanded:hover { filter: none; }

/* Zona 1 — Header claro */
.transit-lcard__exp-header {
  display: flex;
  align-items: stretch;
  min-height: 72px;
  cursor: pointer;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.transit-lcard__exp-header:hover { background: var(--bg-2); }

.transit-lcard__exp-header .transit-lcard__title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 500;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
  display: flex;
  align-items: center;
}

/* Botão ABRIR */
.transit-lcard__open-btn {
  flex: 0 0 96px;
  border: none;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 18px;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.transit-lcard__open-btn:hover {
  background: var(--surface);
}

/* Zona 2 — Container da timeline (posicionamento do pico) */
.transit-lcard__tl {
  position: relative;
}

/* Faixa INÍCIO | FIM — base até hoje, tom depois (mesmo eixo do card) */
.transit-lcard__tl-bar {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: flex-start;
  padding: 14px 20px 14px;
  background: linear-gradient(
    to right,
    var(--tl-bar-base, var(--tlc-neutro-light)) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
}

/* Labels INÍCIO e FIM */
.transit-lcard__tl-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.transit-lcard__tl-edge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.transit-lcard__tl-edge--end { text-align: right; }
.transit-lcard__tl-key {
  font-size: 8px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid);
  opacity: 0.75;
}
.transit-lcard__tl-date {
  font-size: 11px;
  font-weight: 500;
  font-stretch: 62.5%;
  letter-spacing: 0.04em;
  color: var(--tlc-text-on-solid);
}

/* Linha vertical do pico — ancora em .transit-lcard__tl inteiro */
.transit-lcard__tl-peak-line {
  position: absolute;
  top: 0;
  left: var(--tlc-peak-pct, 50%);
  bottom: 0;
  width: 1.5px;
  background: var(--tlc-text-on-solid);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.transit-lcard__tl-peak-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tlc-text-on-solid);
  margin-top: 8px;
  flex-shrink: 0;
}

/* Zona 3 — Rodapé claro: separador + label do pico */
.transit-lcard__tl-sep {
  height: 1px;
  background: var(--border);
  margin: 0 20px;
}

.transit-lcard__tl-peak-label {
  padding: 10px 20px 14px;
  font-size: 9px;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-dim);
  background: var(--bg);
}

/* ── Toolbar da home de trânsitos ── */
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-toolbar {
  background: transparent;
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-row--consolidated {
  background: none;
  padding: 6px 0;
  width: 100%;
  box-sizing: border-box;
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-chip {
  background: rgba(26, 24, 20, 0.88);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 6px;
  min-height: 44px;
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-chip.active {
  background: rgba(26, 24, 20, 0.88);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-saved-btn {
  color: var(--gold);
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-saved-btn svg path {
  stroke: var(--gold);
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-aspects-trigger {
  justify-content: space-between;
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-aspects-trigger-suffix {
  color: var(--gold);
}

/* ══════════════════════════════════════════
   OVERLAY — Navegação (desktop: topo; mobile: acima do FAB)
══════════════════════════════════════════ */

.overlay-footer-nav {
  position: fixed;
  top: 8px;
  left: 0;
  right: 0;
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--grid-master-pad-x);
  background: none;
  pointer-events: none;
}
.overlay-footer-nav > * { pointer-events: auto; }

.overlay-close-fab {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 14px var(--blue-glow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.overlay-close-fab:hover,
.overlay-close-fab:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--blue-glow);
}

/* Overlay: grid mestre no desktop; sem padding vertical no scroll */
.aspect-overlay-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 900px) {
  .aspect-overlay-content {
    display: grid;
    grid-template-columns: var(--grid-master-template);
    gap: var(--grid-master-gap);
    align-items: start;
    padding-left: var(--grid-master-pad-x) !important;
    padding-right: var(--grid-master-pad-x) !important;
  }
}

/* ══════════════════════════════════════════
   OVERLAY — Layout Editorial Novo
══════════════════════════════════════════ */

/* ── Cabeçalho editorial do overlay (mobile) ── */
.te-overlay-header {
  padding: 20px var(--grid-master-pad-x) 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.te-overlay-glyph {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.te-overlay-glyph-sign {
  font-size: 14px;
  opacity: 0.65;
}
.te-overlay-header-text {
  flex: 1 1 auto;
  min-width: 0;
}
.te-overlay-date {
  font-size: var(--fs-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.te-overlay-title {
  margin: 0 0 3px;
  font-size: 22px;
  font-weight: 500;
  font-stretch: 125%;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.te-overlay-position {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ── Timeline no overlay (reutiliza .tl-card--overlay-duration) ── */
.te-overlay-timeline {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 40px;
}

/* ── Textos interpretativos ── */
.te-overlay-lead {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 40px;
}
.te-overlay-lead p,
.overlay-lead-para {
  font-size: 15px;
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
/* Anula a caixa branca do overlay antigo dentro do contexto editorial */
.te-overlay-lead .overlay-lead-para {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* ── Gráfico hero ── */
.te-overlay-chart {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 56px;
}
.te-overlay-chart .overlay-chart-wrap {
  max-width: none;
  margin: 0;
}

/* ── Textos complementares ── */
.te-overlay-secondary {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 40px;
}
.te-overlay-secondary .daily-horo-col-box {
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 24px;
  box-shadow: none;
}
.te-overlay-secondary .daily-horo-col-box p {
  font-size: 14px;
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
}
/* 2º parágrafo — barra editorial esquerda (citação) */
.te-overlay-secondary .daily-horo-col-box:first-child {
  padding-left: 14px;
  border-left: 2px solid var(--border-bright);
}

/* ── Barra horizontal resumida ── */
.te-overlay-summary-bar {
  margin: 0 0 0;
  height: 20px;
  background: var(--overlay-sep);
  position: relative;
}
.te-overlay-summary-bar.harmonico { background: var(--tlc-harmonico-solid); opacity: 0.35; }
.te-overlay-summary-bar.tensao    { background: var(--tlc-tensao-solid); opacity: 0.35; }
.te-overlay-summary-bar.neutro    { background: var(--tlc-neutro-solid); opacity: 0.35; }


/* ══════════════════════════════════════════
   POSIÇÃO & ATIVAÇÃO — Nova seção técnica
══════════════════════════════════════════ */

.pa-section {
  font-family: var(--font);
  font-stretch: 62.5%;
  padding: 20px var(--grid-master-pad-x);
  background: var(--bg);
  color: var(--text);
  margin-top: 0;
  position: relative;
}
.pa-section-title {
  font-size: 9px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Dois cards iniciais lado a lado */
.pa-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.pa-card {
  background: var(--bg);
  padding: 10px 12px;
}
.pa-card-label {
  display: block;
  font-size: 8px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.pa-card-value {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  line-height: 1.3;
}

/* Bloco Ativação com mini-cartografia */
.pa-activation {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pa-activation-label {
  font-size: 8px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
}

/* Canvas da mini-cartografia — covers activation block */
.pa-mini-map {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  pointer-events: none;
}

/* Pills de signo/casa/elemento/qualidade */
.pa-pills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  position: relative;
  z-index: 1;
}
.pa-pill {
  background: var(--bg);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pa-pill--with-icon {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.pa-pill-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pa-pill-icon--harmonico { background: var(--tlc-harmonico-solid); }
.pa-pill-icon--tensao    { background: var(--tlc-tensao-solid); }
.pa-pill-icon--neutro    { background: var(--tlc-neutro-solid); }
.pa-pill-texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pa-pill-label {
  font-size: 8px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pa-pill-value {
  font-size: 11px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  line-height: 1.3;
}

/* Linha/tag de tema da casa */
.pa-theme-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 10px;
  margin-bottom: 12px;
}

/* Tabela compacta de aspectos */
.pa-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.pa-table-row {
  border-top: 1px solid var(--border);
}
.pa-table-row:first-child { border-top: none; }
.pa-table-cell {
  padding: 7px 4px;
  font-size: 10px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  vertical-align: middle;
  line-height: 1.2;
}
.pa-table-cell--aspect {
  font-weight: 600;
  color: var(--text);
  min-width: 72px;
}
.pa-table-cell--planet {
  flex: 1;
  padding-left: 8px;
}
.pa-table-cell--indicator {
  width: 14px;
  padding: 0 6px;
}
.pa-table-indicator-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.pa-table-indicator-dot--harmonico { background: var(--tlc-harmonico-solid); }
.pa-table-indicator-dot--tensao    { background: var(--tlc-tensao-solid); }
.pa-table-indicator-dot--neutro    { background: var(--tlc-neutro-solid); opacity: 0.7; }
.pa-table-cell--orb {
  text-align: right;
  color: var(--text-dim);
  white-space: nowrap;
  padding-right: 0;
}

/* ══════════════════════════════════════════
   OVERLAY — layout responsivo novo
   Mobile: coluna única
   Desktop ≥ 900px: bipartido
══════════════════════════════════════════ */

/* Wrapper do overlay editorial */
.te-overlay-wrap {
  width: 100%;
}

@media (min-width: 900px) {
  .te-overlay-wrap {
    display: grid;
    grid-template-columns: var(--grid-master-template);
    gap: var(--grid-master-gap);
    align-items: start;
    padding: 0 var(--grid-master-pad-x);
  }
  .te-overlay-col-left {
    grid-column: 2 / 9;
    padding-right: 16px;
    border-right: 1px solid var(--overlay-sep);
  }
  .te-overlay-col-right {
    grid-column: 9 / 13;
    position: sticky;
    top: var(--header-h);
    max-height: calc(var(--app-height) - var(--header-h) - var(--footer-total-h) - 64px);
    overflow-y: auto;
  }
  /* Pa section no desktop: integrada à coluna da direita */
  .te-overlay-col-right .pa-section {
    background: var(--bg);
    min-height: 100%;
  }
  /* Título do trânsito desktop: maior */
  .te-overlay-col-left .te-overlay-title {
    font-size: 32px;
  }
  /* Gráfico hero: ligeiramente maior no desktop */
  .te-overlay-col-left .te-overlay-chart .overlay-chart-wrap {
    max-width: 480px;
  }
  /* Espaçamentos entre blocos no desktop */
  .te-overlay-timeline  { margin-bottom: 32px; }
  .te-overlay-lead      { margin-bottom: 128px; }
  .te-overlay-chart     { margin-bottom: 64px; }
  .te-overlay-secondary { margin-bottom: 48px; }
}


/* ══════════════════════════════════════════
   OV2 — Overlay editorial v2 (mai 2026)
   Novo layout do zero, prefixo ov2-
   Mobile: coluna única
   Desktop ≥ 900px: grid mestre 12 colunas
══════════════════════════════════════════ */

/* ── Shell ── */
.ov2-wrap { width: 100%; }
@media (min-width: 900px) {
  .ov2-wrap { display: contents; }
}

/* Spacers verticais — substituem padding-top/bottom estrutural */
.ov2-spacer {
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
  grid-column: 1 / -1;
}
.ov2-spacer--header-top,
.ov2-spacer--header-bottom { height: 96px; }
.ov2-spacer--tl-gap { height: 40px; }
.ov2-spacer--hero-top,
.ov2-spacer--hero-bottom { height: 40px; }
.ov2-spacer--128 { height: 128px; }
.ov2-spacer--secondary-gap { height: 64px; }
.ov2-spacer--pa-top { height: 0; }

/* Mobile: grid mestre 12 col. em cada coluna do overlay */
.ov2-col-left,
.ov2-col-right {
  --ov2-one-col: calc(var(--grid-master-viewport-content) / 12);
  --ov2-text-inset: calc(var(--ov2-one-col) + var(--grid-master-gap));
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  padding-left: var(--grid-master-pad-x);
  padding-right: var(--grid-master-pad-x);
  box-sizing: border-box;
}

/* ── Header mobile: glifos empilhados em C1–C2; texto C3–C11 ── */
.ov2-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}
.ov2-header-glyph {
  --ov2-glyph-size: 24px;
  --ov2-glyph-box: 28px;
  grid-column: 1 / 3;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-dim);
}
.ov2-header-planet,
.ov2-header-sign {
  display: grid;
  place-items: center;
  width: var(--ov2-glyph-box);
  height: var(--ov2-glyph-box);
  font-family: 'Orby Astrology', var(--font, serif);
  font-size: var(--ov2-glyph-size);
  line-height: 0;
  text-align: center;
}
.ov2-header-body {
  grid-column: 3 / 12;
  min-width: 0;
  box-sizing: border-box;
}
.ov2-header-date {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.ov2-header-title {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 500;
  font-stretch: 125%;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 4px;
}
.ov2-header-pos {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Timeline: barra 80px + gap 80/3 + pico 80/3 (cores transit-lcard) ── */
.ov2-tl {
  --ov2-tl-unit: 80px;
  --ov2-tl-gap: calc(var(--ov2-tl-unit) / 3);
  --ov2-tl-bar-h: var(--ov2-tl-unit);
  --ov2-tl-peak-h: calc(var(--ov2-tl-unit) / 3);
  /* bolinha 1/6 acima do rodapé da barra; haste até bar+gap — eixo Y (não alterar ao ajustar X) */
  --ov2-tl-dot-top: calc(var(--ov2-tl-bar-h) - var(--ov2-tl-bar-h) / 6);
  --ov2-tl-needle-h: calc(var(--ov2-tl-bar-h) / 6 + var(--ov2-tl-gap));
  --ov2-tl-needle-color: #1a1814;
  --tl-bar-tone: var(--tlc-neutro-solid);
  grid-column: 1 / -1;
  margin-inline: var(--half-col);
  width: calc(100% - 2 * var(--half-col));
  justify-self: stretch;
  box-sizing: border-box;
  padding: 0;
}
.ov2-tl.ov2-tl--harmonico {
  --tl-bar-tone: var(--tlc-harmonico-solid);
}
.ov2-tl.ov2-tl--tensao {
  --tl-bar-tone: var(--tlc-tensao-solid);
}
.ov2-tl.ov2-tl--neutro {
  --tl-bar-tone: var(--tlc-neutro-solid);
}
.ov2-tl-stage {
  position: relative;
  width: 100%;
  height: calc(var(--ov2-tl-bar-h) + var(--ov2-tl-gap) + var(--ov2-tl-peak-h));
  display: flex;
  flex-direction: column;
  gap: var(--ov2-tl-gap);
}
.ov2-tl-bar {
  position: relative;
  flex: 0 0 var(--ov2-tl-bar-h);
  height: var(--ov2-tl-bar-h);
  box-sizing: border-box;
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--tl-bar-base, var(--tlc-neutro-light)) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: visible;
}
.ov2-tl-bar-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: visible;
}
.ov2-tl-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ov2-tl-edge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ov2-tl-edge--end {
  align-items: flex-end;
  text-align: right;
}
.ov2-tl-key {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  line-height: 1.2;
}
.ov2-tl-date {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  line-height: 1.2;
  white-space: nowrap;
}
.ov2-tl-needle {
  position: absolute;
  left: var(--tlc-peak-pct, 50%);
  top: var(--ov2-tl-dot-top);
  height: var(--ov2-tl-needle-h);
  width: 1.25px;
  background: var(--ov2-tl-needle-color, #1a1814);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.ov2-tl-needle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ov2-tl-needle-color, #1a1814);
}
.ov2-tl-peak-band {
  flex: 0 0 var(--ov2-tl-peak-h);
  height: var(--ov2-tl-peak-h);
  width: 100%;
  box-sizing: border-box;
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: var(--tl-bar-base, var(--tlc-neutro-light));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 20px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
}
.ov2-tl-peak-band strong {
  font-size: 12px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  margin-left: 4px;
}

/* Parágrafos: lead/secondary expõem filhos ao grid da coluna */
.ov2-lead,
.ov2-secondary {
  display: contents;
}

/* Tipografia dos parágrafos */
.ov2-lead p,
.ov2-lead .overlay-lead-para,
.ov2-lead > .aspect-overlay-loading,
.ov2-secondary .daily-horo-col-box p {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  font-stretch: 100%;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}

/* Com linha: borda só no bloco de texto (não no padding-bottom do container) */
.ov2-lead p,
.ov2-lead .overlay-lead-para,
.ov2-lead > .aspect-overlay-loading,
.ov2-secondary .daily-horo-col-box:first-child:not(:last-child) p {
  border: none;
  border-left: 1.25px solid var(--text-dim);
  background: transparent;
  padding: 0 0 0 var(--ov2-text-inset);
  box-sizing: border-box;
}
.ov2-lead p,
.ov2-lead .overlay-lead-para,
.ov2-lead > .aspect-overlay-loading {
  grid-column: 2 / 12;
  align-self: start;
}
.ov2-lead .overlay-lead-para {
  margin-bottom: 0;
}
.ov2-lead > .aspect-overlay-loading {
  padding-top: 0;
  font-size: 10px;
  grid-column: 2 / 12;
}

/* Blocos secundários: grid no container; espaço abaixo fora da linha */
.ov2-secondary .daily-horo-col-box {
  grid-column: 2 / 12;
  align-self: start;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  box-sizing: border-box;
}
.ov2-secondary .daily-horo-col-box:last-child p,
.ov2-secondary .daily-horo-col-box:only-child p {
  padding: 0;
  border: none;
}

/* ── Hero: C3–C10 ── */
.ov2-hero {
  grid-column: 3 / 11;
  padding: 0;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.ov2-hero-disc {
  width: min(100%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #C49A3C;
  padding: 32px;
  box-sizing: border-box;
}
.ov2-hero-disc-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #a8d9db;
  border: 10px solid #1a1814;
  box-sizing: border-box;
}

/* ── Barra de fecho: meio C1 → meio C12 (como timeline) ── */
.ov2-foot {
  --tl-bar-tone: var(--tlc-neutro-solid);
  grid-column: 1 / -1;
  margin: 32px var(--half-col) 0;
  padding: 0;
  width: calc(100% - 2 * var(--half-col));
  justify-self: stretch;
  box-sizing: border-box;
}
.ov2-foot.ov2-foot--harmonico {
  --tl-bar-tone: var(--tlc-harmonico-solid);
}
.ov2-foot.ov2-foot--tensao {
  --tl-bar-tone: var(--tlc-tensao-solid);
}
.ov2-foot.ov2-foot--neutro {
  --tl-bar-tone: var(--tlc-neutro-solid);
}
.ov2-foot-bar {
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--tl-bar-base, var(--tlc-neutro-light)) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
}

/* ══════════════════════════════════════════
   OV2 — Posição & Ativação
══════════════════════════════════════════ */
.ov2-pa-wrap {
  grid-column: 1 / -1;
  margin-inline: var(--half-col);
  width: calc(100% - 2 * var(--half-col));
  justify-self: stretch;
  position: relative;
  box-sizing: border-box;
}
.ov2-pa-wrap > *:not(.ov2-pa-minimap) {
  position: relative;
  z-index: 1;
}
.ov2-pa-pad {
  width: 100%;
  flex-shrink: 0;
  background: transparent;
  pointer-events: none;
}
.ov2-pa-pad--top { height: 128px; }
.ov2-pa-pad--bottom { height: 64px; }
.ov2-pa {
  font-family: var(--font);
  font-stretch: 62.5%;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
  color: var(--text);
}
.ov2-pa-title {
  font-size: 9px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  overflow-wrap: break-word;
}
.ov2-pa-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ov2-pa-card {
  background: transparent;
  padding: 10px 12px;
  border-right: 1px solid var(--border);
}
.ov2-pa-card:last-child {
  border-right: none;
}
.ov2-pa-card-label {
  display: block;
  font-size: 8px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.ov2-pa-card-value {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  line-height: 1.3;
}
.ov2-pa-activation {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ov2-pa-activation-label {
  font-size: 8px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 12px 0;
  position: relative;
  z-index: 1;
}
.ov2-pa-minimap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}
.ov2-pa-pills-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.ov2-pa-pill {
  background: transparent;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ov2-pa-pill:nth-child(2n) {
  border-right: none;
}
.ov2-pa-pill:nth-child(n + 3) {
  border-bottom: none;
}
.ov2-pa-pill-label {
  font-size: 7px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ov2-pa-pill-value {
  font-size: 11px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  line-height: 1.2;
}
.ov2-pa-theme {
  font-size: 9px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 12px;
}
.ov2-pa-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.ov2-pa-row { border-bottom: 1px solid var(--border); }
.ov2-pa-row:last-child { border-bottom: none; }
.ov2-pa-cell {
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  vertical-align: middle;
}
.ov2-pa-cell--glyph { width: 22px; padding-right: 0; text-align: center; }
.ov2-pa-cell--orb { text-align: right; color: var(--text-dim); white-space: nowrap; }
.ov2-pa-aspect-glyph {
  display: inline-block;
  font-family: 'Orby Astrology', serif;
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  vertical-align: middle;
  transform: translateY(-2px);
}
.ov2-pa-empty {
  font-size: 10px;
  opacity: 0.5;
  padding: 8px 0;
}

/* ══════════════════════════════════════════
   OV2 — Responsivo
   Mobile: base (coluna única, paddings)
   Desktop ≥ 900px: grid 12 col.
══════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Esquerda: pilha única; Direita: grid item real na mesma linha → lado a lado */
  .ov2-col-left {
    display: block;
    grid-column: 2 / 7;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    padding: 0; /* zera padding duplo herdado do mobile */
  }
  .ov2-col-right {
    display: block;
    grid-column: 7 / 12;
    grid-row: 1;
    align-self: start;
    padding: 0 0 0 var(--half-col);
  }
  .ov2-spacer--header-top,
  .ov2-spacer--header-bottom { height: 128px; }
  .ov2-spacer--tl-gap { height: 64px; }
  .ov2-spacer--hero-top,
  .ov2-spacer--hero-bottom { height: 64px; }
  .ov2-spacer--pa-top { height: calc(128px * 2 + 60px); }
  .ov2-spacer--secondary-gap { height: 64px; }
  .ov2-header {
    display: grid;
    grid-template-columns: var(--ov2-one-col) var(--grid-master-gap) minmax(0, 1fr);
    column-gap: 0;
    padding: 0;
    margin: 0;
    width: auto;
  }
  .ov2-header-glyph { grid-column: 1; }
  .ov2-header-body { grid-column: 3; }
  .ov2-tl {
    margin: 0;
    width: 100%;
    padding: 0;
  }
  .ov2-pa-wrap {
    margin: 0;
    width: 100%;
  }
  .ov2-pa {
    padding: 20px;
  }
  .ov2-lead,
  .ov2-secondary {
    display: block;
  }
  /* Linha em C2; corpo do texto a partir do meio de C2 */
  .ov2-lead p,
  .ov2-lead .overlay-lead-para,
  .ov2-lead > .aspect-overlay-loading {
    grid-column: unset;
    margin: 0;
    padding-left: var(--half-col);
  }
  .ov2-secondary .daily-horo-col-box {
    grid-column: unset;
    margin: 0;
    padding: 0;
  }
  .ov2-secondary .daily-horo-col-box:first-child:not(:last-child) p {
    margin-left: 0;
    padding-left: var(--half-col);
    border-left: 1.25px solid var(--text-dim);
  }
  .ov2-secondary .daily-horo-col-box:last-child p {
    padding-left: 0;
    border-left: none;
  }
  .ov2-hero {
    padding: 0;
  }
  .ov2-foot {
    margin: 48px 0 0;
    width: 100%;
    padding: 0;
  }
}

/* ══════════════════════════════════════════
   MAPA NATAL — Hub, toolbar e Céu da Vida
══════════════════════════════════════════ */

/* Highlight temporário ao clicar num planeta no canvas */
.natal-reading-card--highlight {
  outline: 2px solid var(--gold, #C49A3C);
  outline-offset: 2px;
  transition: outline 0.2s;
}

/* Fundo Ink na secção gráfico natal */
.natal-panel--grafico-immersive {
  background: var(--ink, #1A1814);
  position: relative; /* âncora para toolbar absolute */
}
#page-you[data-natal-tab="grafico"] {
  background: var(--ink, #1A1814);
}


/* Toolbar natal — herdda estilos de .transit-graph-toolbar; specificity extra para collapsed */
#natal-panel-grafico #natal-graph-toolbar {
  position: absolute;
  bottom: calc(var(--footer-total-h, 80px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: auto;
  min-width: 160px;
  max-width: calc(100vw - 32px);
  background: var(--transit-toolbar-surface-compact, color-mix(in srgb, #1a1814 85%, transparent));
  border-color: rgba(244,196,48,0.25);
}
#natal-panel-grafico #natal-graph-toolbar[hidden] { display: none !important; }
#natal-panel-grafico #natal-graph-toolbar.chips-collapsed .transit-graph-menu-title-col,
#natal-panel-grafico #natal-graph-toolbar.chips-collapsed .transit-graph-menu-divider--before-body,
#natal-panel-grafico #natal-graph-toolbar.chips-collapsed #natal-graph-launcher-panel,
#natal-panel-grafico #natal-graph-toolbar.chips-collapsed .transit-graph-menu-divider--before-chevron {
  display: none;
}
#natal-panel-grafico #natal-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-chevron-col,
#natal-panel-grafico #natal-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-divider--before-chevron {
  display: none;
}
#natal-panel-grafico #natal-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-shell {
  flex-direction: column;
  align-items: stretch;
}
#natal-panel-grafico #natal-graph-toolbar .transit-graph-toggle-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,196,48,0.85);
  font-weight: 600;
}
/* Chevron da toolbar natal */
#natal-panel-grafico #natal-graph-toolbar.chips-collapsed .natal-graph-chevron {
  transform: rotate(180deg);
}
#natal-panel-grafico #natal-graph-toolbar:not(.chips-collapsed) .transit-graph-toggle .natal-graph-chevron {
  transform: rotate(0deg);
}

/* Player Céu da Vida */
.natal-canvas-area { position: relative; }
.natal-tempo-panel {
  position: absolute;
  bottom: calc(var(--footer-total-h, 80px) + 72px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: color-mix(in srgb, #1a1814 88%, transparent);
  border: 1px solid rgba(244,196,48,0.25);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.natal-tempo-panel[hidden] { display: none !important; }
.natal-tempo-btn {
  background: none;
  border: 1px solid rgba(244,196,48,0.3);
  color: rgba(244,196,48,0.8);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font, 'Archivo', sans-serif);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.natal-tempo-btn:hover, .natal-tempo-btn:active {
  background: rgba(244,196,48,0.15);
  color: #F4C430;
}
.natal-tempo-btn--anchor {
  border-color: rgba(244,196,48,0.6);
  color: rgba(244,196,48,0.95);
}
.natal-tempo-label {
  font-size: 11px;
  font-weight: 600;
  color: #F4C430;
  letter-spacing: 0.05em;
  min-width: 80px;
  text-align: center;
  font-family: var(--font, 'Archivo', sans-serif);
}

/* Paywall Céu da Vida — overlay sobre o canvas (z-index abaixo do back-btn z:13 → usuário pode sair) */
.natal-life-sky-paywall {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
  background: color-mix(in srgb, #1a1814 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.natal-life-sky-paywall__text {
  font-size: 13px;
  color: rgba(244,196,48,0.85);
  max-width: 300px;
  line-height: 1.5;
  font-family: var(--font, 'Archivo', sans-serif);
}
.natal-life-sky-paywall__btn {
  padding: 10px 24px;
  background: #F4C430;
  color: #1A1814;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font, 'Archivo', sans-serif);
  transition: opacity 0.15s;
}
.natal-life-sky-paywall__btn:hover { opacity: 0.88; }