/* Header, sidebar e area principal agora usam o shell padrao do orion
   (.orion-topbar/.orion-sidebar/.orion-main/.orion-app), definido em
   orion.css. Este arquivo cuida so do conteudo especifico do pandora
   dentro de #page-content. */

/* ===================== HERO / VISAO GERAL =====================
   Os tres cards (Saldo, Treino, Habitos) compartilham um unico esqueleto:
   header (chip + acoes) -> figura (metrica grande + micro-grafico) -> trilha
   de metricas secundarias. A unica coisa que muda entre eles e o par de
   variaveis --pd-accent/--pd-accent-glow (via data-accent) e o tipo de grafico,
   entao qualquer ajuste visual vale para os tres de uma vez. */

.pandora-hero-section{margin-top:22px;}

/* auto-fit + minmax faz o numero de colunas se ajustar sozinho ao espaco e a
   quantos cards estao visiveis -- com 1 card visivel a faixa unica ocupa a
   largura toda, sem precisar de classe extra pro caso "single". */
.pandora-hero-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:16px;
  margin-bottom:24px;
  align-items:stretch;
}

.pandora-hero-row.pandora-hero-row-hidden{display:none;}

.pandora-hero{
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:18px 20px 20px;
  transition:transform .2s cubic-bezier(.25,.8,.25,1), box-shadow .2s ease, border-color .2s ease;
}

/* Paleta de destaque compartilhada: hero, botao de acesso rapido e stat card
   usam o mesmo par --pd-accent/--pd-accent-glow, resolvido uma unica vez a
   partir do data-accent que o backend ja manda em cada card. Antes cada
   componente repetia 10 regras de cor proprias. (O nome nao pode ser --accent:
   pandora.css ja define esse globalmente e sobrescreve-lo vazaria pros filhos.) */
.pandora-hero[data-accent="primary"],
.pandora-agora-item[data-acento="primary"],
.pandora-quickaccess-item[data-accent="primary"],
.pandora-stat-card[data-accent="primary"]{--pd-accent:var(--primary);--pd-accent-glow:var(--primary-glow);}
.pandora-hero[data-accent="emerald"],
.pandora-agora-item[data-acento="emerald"],
.pandora-quickaccess-item[data-accent="emerald"],
.pandora-stat-card[data-accent="emerald"]{--pd-accent:var(--emerald);--pd-accent-glow:var(--emerald-glow);}
.pandora-hero[data-accent="cyan"],
.pandora-agora-item[data-acento="cyan"],
.pandora-quickaccess-item[data-accent="cyan"],
.pandora-stat-card[data-accent="cyan"]{--pd-accent:var(--cyan);--pd-accent-glow:var(--cyan-glow);}
.pandora-hero[data-accent="rose"],
.pandora-agora-item[data-acento="rose"],
.pandora-quickaccess-item[data-accent="rose"],
.pandora-stat-card[data-accent="rose"]{--pd-accent:var(--rose);--pd-accent-glow:var(--rose-glow);}
.pandora-hero[data-accent="amber"],
.pandora-agora-item[data-acento="amber"],
.pandora-quickaccess-item[data-accent="amber"],
.pandora-stat-card[data-accent="amber"]{--pd-accent:#f59e0b;--pd-accent-glow:rgba(245,158,11,.35);}
.pandora-agora-item[data-acento="lime"],
.pandora-quickaccess-item[data-accent="lime"],
.pandora-stat-card[data-accent="lime"]{--pd-accent:#84cc16;--pd-accent-glow:rgba(132,204,22,.35);}
.pandora-agora-item[data-acento="indigo"],
.pandora-quickaccess-item[data-accent="indigo"],
.pandora-stat-card[data-accent="indigo"]{--pd-accent:#818cf8;--pd-accent-glow:rgba(129,140,248,.35);}
.pandora-agora-item[data-acento="pink"],
.pandora-quickaccess-item[data-accent="pink"],
.pandora-stat-card[data-accent="pink"]{--pd-accent:#ec4899;--pd-accent-glow:rgba(236,72,153,.35);}
.pandora-agora-item[data-acento="teal"],
.pandora-quickaccess-item[data-accent="teal"],
.pandora-stat-card[data-accent="teal"]{--pd-accent:#14b8a6;--pd-accent-glow:rgba(20,184,166,.35);}
.pandora-hero[data-accent="violet"],
.pandora-agora-item[data-acento="violet"],
.pandora-quickaccess-item[data-accent="violet"],
.pandora-stat-card[data-accent="violet"]{--pd-accent:#8b5cf6;--pd-accent-glow:rgba(139,92,246,.35);}

/* Fallback: card com accent desconhecido nao pode ficar sem cor. */
.pandora-agora-item,
.pandora-quickaccess-item,
.pandora-stat-card{--pd-accent:var(--primary);--pd-accent-glow:var(--primary-glow);}

/* Brilho de canto + fio de luz no topo: decoracao pura, fora do fluxo e sem
   captura de clique (o conteudo sobe com z-index:1). */
.pandora-hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(130% 100% at 100% 0%, var(--pd-accent-glow), transparent 62%);
  opacity:.45;
}

.pandora-hero::after{
  content:'';
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--pd-accent),transparent);
  opacity:.55;
}

.pandora-hero > *{position:relative;z-index:1;}

.pandora-hero:hover{
  transform:translateY(-3px);
  border-color:var(--pd-accent-glow);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05), 0 18px 38px rgba(0,0,0,.42);
}

[data-theme="claro"] .pandora-hero:hover,
[data-theme="polar"] .pandora-hero:hover,
[data-theme="solar"] .pandora-hero:hover,
[data-theme="branco"] .pandora-hero:hover{
  box-shadow:0 24px 50px rgba(15,23,42,.16);
}

/* --- header --- */
.pandora-hero-head{display:flex;align-items:center;gap:10px;}

.pandora-hero-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:6px 12px;
  border-radius:var(--r-pill);
  border:1px solid var(--panel-border);
  background:rgba(255,255,255,.03);
  color:var(--text-muted);
  font-family:inherit;
  font-size:10px;
  font-weight:700;
  letter-spacing:.9px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.2s;
}
.pandora-hero-chip i{color:var(--pd-accent);font-size:11px;}
.pandora-hero-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pandora-hero-chip:hover{border-color:var(--pd-accent);color:var(--text-main);}

/* Widgets sem um destino unico pra abrir (Agora, Constancia) usam o chip so
   como rotulo -- clicavel seria mentira, cada item da lista tem o seu destino. */
.pandora-hero-chip-static{cursor:default;}
.pandora-hero-chip-static:hover{border-color:var(--panel-border);color:var(--text-muted);}

.pandora-hero-actions{margin-left:auto;display:flex;gap:6px;flex:0 0 auto;}

.pandora-hero-action{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--pd-accent-glow);
  background:rgba(255,255,255,.03);
  color:var(--pd-accent);
  font-size:11px;
  cursor:pointer;
  transition:.18s;
}
/* Receita/despesa redefinem o par de variaveis so pra si -- nenhuma regra
   extra de cor precisa existir alem destas duas linhas. */
.pandora-hero-action.up{--pd-accent:var(--emerald);--pd-accent-glow:var(--emerald-glow);}
.pandora-hero-action.down{--pd-accent:var(--rose);--pd-accent-glow:var(--rose-glow);}
.pandora-hero-action:hover{
  background:var(--pd-accent);
  border-color:var(--pd-accent);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px var(--pd-accent-glow);
}
.pandora-hero-action:active{transform:scale(.92);}
/* Check de habito: acao positiva, sempre verde independente do accent do card. */
.pandora-hero-action.check{--pd-accent:var(--emerald);--pd-accent-glow:var(--emerald-glow);}
.pandora-hero-action:disabled{
  opacity:.4;
  cursor:default;
  transform:none;
  box-shadow:none;
  background:rgba(255,255,255,.03);
  color:var(--pd-accent);
  border-color:var(--panel-border);
}

/* --- corpo: metrica dominante + micro-grafico, com a tendencia embaixo --- */
/* A tendencia fica fora da figura (em linha cheia) de proposito: dentro dela
   disputava largura com o grafico e truncava em card estreito. */
.pandora-hero-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}

.pandora-hero-figure{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.pandora-hero h2{
  flex:1 1 auto;
  min-width:0;
  font-family:'Space Grotesk',sans-serif;
  /* cqw = largura do proprio card: o valor encolhe quando o card divide a
     linha com os outros dois e cresce quando fica sozinho. */
  font-size:clamp(23px,11cqw,34px);
  line-height:1;
  font-weight:700;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pandora-hero h2.negative{color:var(--rose);}
.pandora-hero h2.positive{color:var(--emerald);}

.pandora-hero-trend{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:12px;
  color:var(--text-muted);
}
.pandora-hero-trend-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.pandora-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  padding:3px 8px;
  border-radius:var(--r-pill);
  border:1px solid var(--panel-border);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pandora-hero-badge.up{color:var(--emerald);border-color:var(--emerald-glow);}
.pandora-hero-badge.down{color:var(--rose);border-color:var(--rose-glow);}
.pandora-hero-badge.flat{color:var(--text-muted);}

.pandora-hero-viz{flex:0 1 138px;min-width:0;line-height:0;}
.pandora-hero-viz:empty{display:none;}

.pandora-hero-viz-ring{
  position:relative;
  flex:0 0 84px;
  width:84px;
  height:84px;
  align-self:center;
  color:var(--text-muted);
}
.pandora-hero-ring-svg{position:absolute;inset:0;line-height:0;}
.pandora-hero-ring-label{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:var(--pd-accent);
  font-variant-numeric:tabular-nums;
}

/* --- trilha de metricas secundarias --- */
.pandora-hero-rail{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:8px;
  padding-top:14px;
  border-top:1px solid var(--panel-border);
}

/* Trilha de 4 itens: 2x2 enquanto o card divide a linha com os outros (auto-fit
   deixaria 3+1, desequilibrado) e 4 em fila quando o card fica largo sozinho. */
.pandora-hero-rail-4{grid-template-columns:repeat(2,minmax(0,1fr));}
@container (min-width:470px){
  .pandora-hero-rail-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

.pandora-hero-rail-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  background:var(--bg);
}

.pandora-hero-rail-item small{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pandora-hero-rail-item small i{font-size:9px;color:var(--pd-accent);}

.pandora-hero-rail-item strong{
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pandora-hero-rail-item.up small i,
.pandora-hero-rail-item.up strong{color:var(--emerald);}
.pandora-hero-rail-item.down small i,
.pandora-hero-rail-item.down strong{color:var(--rose);}

/* Item de trilha que e botao (aneis: cada um abre o registro da sua area).
   Reseta o estilo nativo do <button> e ganha affordance de clique. */
.pandora-hero-rail-btn{
  font:inherit;
  color:inherit;
  text-align:left;
  border:1px solid transparent;
  cursor:pointer;
  /* Sem transicao de background de proposito: o background e var(--bg) e
     animar isso faz o botao "derreter" a cada troca de tema. */
  transition:border-color .15s ease, transform .15s ease;
}
.pandora-hero-rail-btn:hover{
  border-color:var(--pd-accent-glow);
  transform:translateY(-1px);
  background:var(--panel-bg);
}
.pandora-hero-rail-btn:focus-visible{outline:2px solid var(--pd-accent);outline-offset:2px;}

/* --- widget "Agora" (proxima acao) --- */
/* Nao usa figura/trilha: aqui a informacao e uma fila de itens, nao uma
   metrica. O header e a moldura continuam iguais aos outros para o bloco nao
   destoar da linha. */
.pandora-agora-lista{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pandora-agora-empty{
  margin:auto 0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
}

.pandora-agora-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  background:var(--bg);
  border:1px solid transparent;
  cursor:pointer;
  min-width:0;
  transition:border-color .18s ease, transform .18s cubic-bezier(.25,.8,.25,1);
}

.pandora-agora-item:hover{border-color:var(--pd-accent-glow);transform:translateX(2px);}

/* O primeiro item e a "proxima acao": ganha a borda de accent e mais peso. */
.pandora-agora-item.destaque{
  border-color:var(--pd-accent-glow);
  padding:12px;
}
.pandora-agora-item.destaque .pandora-agora-titulo{font-size:14px;}
.pandora-agora-item.destaque .pandora-agora-icone{width:34px;height:34px;font-size:13px;}

.pandora-agora-icone{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:11px;
  color:var(--pd-accent);
  border:1px solid var(--pd-accent-glow);
}

.pandora-agora-info{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px;}

.pandora-agora-titulo{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pandora-agora-quando{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
}
.pandora-agora-quando i{font-size:9px;}
.pandora-agora-quando.atrasado{color:var(--rose);}
.pandora-agora-quando.agora{color:#f59e0b;}

.pandora-agora-check{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--emerald-glow);
  background:transparent;
  color:var(--emerald);
  font-size:11px;
  cursor:pointer;
  transition:.18s;
}
.pandora-agora-check:hover{background:var(--emerald);color:#fff;border-color:var(--emerald);}
.pandora-agora-check:active{transform:scale(.9);}
.pandora-agora-check:disabled{opacity:.4;cursor:default;}

/* --- widget "Constancia" (heatmap de 4 semanas) --- */
/* 28 celulas em 14 colunas x 2 linhas, com 4 niveis de intensidade: quanto
   mais areas da vida receberam registro no dia, mais forte a cor. A escala usa
   opacity sobre --pd-accent em vez de cores fixas, entao acompanha o tema. */
.pandora-constancia-heat{
  padding-top:14px;
  border-top:1px solid var(--panel-border);
}

.pandora-constancia-grid{
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  gap:4px;
}

.pandora-constancia-dia{
  aspect-ratio:1;
  border-radius:5px;
  background:var(--bg);
  border:1px solid var(--panel-border);
}

.pandora-constancia-dia[data-lvl="1"],
.pandora-constancia-dia[data-lvl="2"],
.pandora-constancia-dia[data-lvl="3"]{
  background:var(--pd-accent);
  border-color:transparent;
}
.pandora-constancia-dia[data-lvl="1"]{opacity:.32;}
.pandora-constancia-dia[data-lvl="2"]{opacity:.62;}
.pandora-constancia-dia[data-lvl="3"]{opacity:1;box-shadow:0 0 8px var(--pd-accent-glow);}

/* Hoje ganha contorno mesmo vazio: mostra que o dia ainda da tempo. */
.pandora-constancia-dia.hoje{
  outline:2px solid var(--pd-accent);
  outline-offset:1px;
}

/* Celula com dado responde ao ponteiro (o balao diz o dia e os check-ins).
   A da legenda nao tem data-tip e continua inerte. */
.pandora-constancia-dia[data-tip]{
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.pandora-constancia-dia[data-tip]:hover{
  transform:scale(1.22);
  box-shadow:0 0 0 2px var(--pd-accent-glow);
}

@media (prefers-reduced-motion:reduce){
  .pandora-constancia-dia[data-tip],
  .pandora-constancia-dia[data-tip]:hover{transform:none;transition:none;}
}

.pandora-constancia-legenda{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--text-muted);
}

.pandora-constancia-escala{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.pandora-constancia-escala .pandora-constancia-dia{
  width:10px;
  height:10px;
  aspect-ratio:auto;
  flex:0 0 auto;
}

@media (max-width:520px){
  .pandora-constancia-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
}

/* --- widget "Aneis do dia" --- */
.pandora-hero-viz-rings{
  flex:0 0 96px;
  width:96px;
  align-self:center;
  color:var(--text-muted);
}

@media (prefers-reduced-motion:reduce){
  .pandora-hero,
  .pandora-hero:hover,
  .pandora-hero-action:hover,
  .pandora-agora-item:hover{transform:none;transition:none;}
  .pandora-ring-value{transition:none;}
}

/* Sparkline (reused by hero and card drill-down) */
.pandora-spark-svg{width:100%;height:auto;display:block;}
.pandora-spark-area{opacity:.14;}
.pandora-spark-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pandora-spark-dot{filter:drop-shadow(0 0 4px rgba(0,0,0,.35));}

/* Barras e anel de progresso (PandoraChart.bars / PandoraChart.ring) */
.pandora-bars-svg{width:100%;height:auto;display:block;}
.pandora-ring-svg{width:100%;height:auto;display:block;}
.pandora-ring-svg circle{fill:none;}
.pandora-ring-track{stroke:currentColor;opacity:.14;}
.pandora-ring-value{transition:stroke-dasharray .6s cubic-bezier(.25,.8,.25,1);}
.pandora-ring-value.rounded{stroke-linecap:round;}

/* --- interacao nos graficos (hover/toque mostram o dado do ponto) --- */

.pandora-chart-hit{cursor:pointer;}

/* No anel so o traco responde ao ponteiro: o miolo do circulo e "buraco"
   (fill:none), senao o anel de fora capturaria o hover dos de dentro. */
circle.pandora-chart-hit{pointer-events:stroke;}
.pandora-ring-value{pointer-events:none;}

/* Guia vertical + marcador do sparkline: existem sempre no DOM e so aparecem
   no ponto sob o cursor -- assim nao precisa de JS pra desenhar o cursor. */
.pandora-spark-guide{
  stroke:var(--pd-accent, var(--primary));
  stroke-width:1;
  stroke-dasharray:3 3;
  opacity:0;
  vector-effect:non-scaling-stroke;
}
.pandora-spark-marker{opacity:0;}
.pandora-chart-hit:hover .pandora-spark-guide{opacity:.5;}
.pandora-chart-hit:hover .pandora-spark-marker{opacity:1;}

/* Barra sob o cursor sai da opacidade "de fundo" e fica cheia. */
.pandora-bar{transition:opacity .12s ease;}
.pandora-bar-hit:hover .pandora-bar{opacity:1 !important;}

/* Balao. Preso ao <body> (fixed) porque o card tem overflow:hidden e cortaria
   qualquer coisa posicionada dentro dele. */
.pandora-chart-tip{
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:7px 10px;
  border:1px solid var(--panel-border);
  border-radius:var(--r-sm);
  /* Mesma receita de superficie flutuante do .orion-card: em tema claro
     --bg e exatamente a cor do fundo da pagina e --panel-border e quase
     branco, entao um balao chapado sumiria. O blur e o que separa. */
  background:var(--panel-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(3px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events:none;
  /* Teto de largura: a celula do heatmap pode listar 5 areas e um balao de uma
     linha so ficaria mais largo que a tela do celular. */
  max-width:min(240px, calc(100vw - 24px));
}
.pandora-chart-tip.visivel{opacity:1;visibility:visible;transform:translateY(0);}
.pandora-chart-tip small{
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text-muted);
  white-space:nowrap;
}
.pandora-chart-tip strong{
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text-main);
}

@media (prefers-reduced-motion:reduce){
  .pandora-chart-tip{transition:none;}
  .pandora-bar{transition:none;}
}

/* Section titles */
.pandora-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  padding:0 2px;
}

.pandora-section-title h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text-muted);
}

.pandora-stats-tools{position:relative;}

.pandora-personalize-popover{
  position:absolute;
  top:38px;
  right:0;
  z-index:60;
  width:min(280px,80vw);
  padding:10px;
}

.pandora-personalize-head{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-muted);
  padding:4px 6px 8px;
}

.pandora-personalize-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:min(50vh,360px);
  overflow-y:auto;
}

.pandora-personalize-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 6px;
  border-radius:var(--r-sm);
}

.pandora-personalize-item:hover{background:rgba(255,255,255,.05);}

.pandora-personalize-name{
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-main);
}

.pandora-personalize-name i{width:14px;text-align:center;color:var(--text-muted);}

.pandora-personalize-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.pandora-personalize-move{
  width:20px;
  height:20px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);
  color:var(--text-muted);
  font-size:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
}

.pandora-personalize-move:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
.pandora-personalize-move:disabled{opacity:.25;cursor:not-allowed;}

/* Acesso rapido */
.pandora-quickaccess-section{margin-bottom:22px;}

.pandora-quickaccess-scroll{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}

.pandora-quickaccess-item{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:46px;
  box-sizing:border-box;
  padding:7px 14px 7px 7px;
  border-radius:var(--r-pill);
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  color:var(--text-main);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.25,.8,.25,1), border-color .18s ease, box-shadow .18s ease;
}

/* Rastro de cor que nasce no icone e some no meio do botao: da identidade ao
   accent sem pintar a pilula inteira. */
.pandora-quickaccess-item::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,var(--pd-accent-glow),transparent 58%);
  opacity:.28;
  transition:opacity .18s ease;
}

.pandora-quickaccess-item > *{position:relative;z-index:1;}

.pandora-quickaccess-item:hover,
.pandora-quickaccess-item:focus-visible{
  transform:translateY(-2px);
  border-color:var(--pd-accent);
  box-shadow:0 10px 22px rgba(0,0,0,.3);
  outline:none;
}

.pandora-quickaccess-item:hover::before,
.pandora-quickaccess-item:focus-visible::before{opacity:.55;}

.pandora-quickaccess-item:active{transform:translateY(0) scale(.985);}

.pandora-quickaccess-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pandora-quickaccess-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex:0 0 auto;
  color:var(--pd-accent);
  background:var(--bg);
  border:1px solid var(--pd-accent-glow);
  transition:transform .18s cubic-bezier(.25,.8,.25,1), box-shadow .18s ease;
}

.pandora-quickaccess-item:hover .pandora-quickaccess-icon,
.pandora-quickaccess-item:focus-visible .pandora-quickaccess-icon{
  transform:scale(1.08);
  box-shadow:0 0 0 3px var(--pd-accent-glow);
}

/* Stat cards */
.pandora-stats-section{margin-bottom:26px;}

.pandora-stats-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.pandora-stats-scroll::-webkit-scrollbar{display:none;width:0;height:0;}

.pandora-stat-card{
  position:relative;
  overflow:hidden;
  min-width:250px;
  max-width:280px;
  flex:0 0 auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.25,.8,.25,1), border-color .18s ease, box-shadow .18s ease;
}

/* Mesmo brilho de canto dos heros, so que mais discreto: os dois blocos ficam
   visualmente da mesma familia sem o stat card competir com a Visao geral. */
.pandora-stat-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, var(--pd-accent-glow), transparent 58%);
  opacity:.3;
  transition:opacity .18s ease;
}

.pandora-stat-card::after{
  content:'';
  position:absolute;
  top:0;
  left:14%;
  right:14%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--pd-accent),transparent);
  opacity:0;
  transition:opacity .18s ease;
}

.pandora-stat-card > *{position:relative;z-index:1;}

.pandora-stat-card:hover,
.pandora-stat-card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--pd-accent-glow);
  box-shadow:0 14px 30px rgba(0,0,0,.32);
  outline:none;
}

.pandora-stat-card:hover::before,
.pandora-stat-card:focus-visible::before{opacity:.55;}
.pandora-stat-card:hover::after,
.pandora-stat-card:focus-visible::after{opacity:.7;}

[data-theme="claro"] .pandora-stat-card:hover,
[data-theme="polar"] .pandora-stat-card:hover,
[data-theme="solar"] .pandora-stat-card:hover,
[data-theme="branco"] .pandora-stat-card:hover{box-shadow:0 20px 42px rgba(15,23,42,.14);}

.pandora-stat-chevron{
  font-size:10px;
  color:var(--text-muted);
  opacity:0;
  transform:translateX(-3px);
  transition:.18s;
}

.pandora-stat-card:hover .pandora-stat-chevron,
.pandora-stat-card:focus-visible .pandora-stat-chevron{
  opacity:1;
  transform:translateX(0);
}

.pandora-stat-card-empty{justify-content:flex-start;}
/* Card sem dado nao deve disputar atencao com os que tem: o brilho de accent
   fica quase apagado ate o hover. */
.pandora-stat-card-empty::before{opacity:.12;}
.pandora-stat-card-empty .pandora-stat-icon{opacity:.7;}

.pandora-stat-empty-hint{
  font-size:12px;
  color:var(--text-muted);
  margin-top:6px;
  margin-bottom:14px; /* respiro minimo: o CTA usa margin-top:auto e colaria em cards curtos */
  line-height:1.45;
}

.pandora-stat-empty-cta{
  margin-top:auto;
  padding:8px 10px;
  border-radius:var(--r-sm);
  background:var(--bg);
  font-size:11px;
  font-weight:700;
  color:var(--pd-accent);
  display:flex;
  align-items:center;
  gap:6px;
}

.pandora-stat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.pandora-stat-icon{
  width:40px;
  height:40px;
  border-radius:var(--r-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:var(--pd-accent);
  background:var(--bg);
  border:1px solid var(--pd-accent-glow);
  transition:box-shadow .18s ease, transform .18s cubic-bezier(.25,.8,.25,1);
}

.pandora-stat-card:hover .pandora-stat-icon,
.pandora-stat-card:focus-visible .pandora-stat-icon{
  transform:translateY(-1px);
  box-shadow:0 6px 18px var(--pd-accent-glow);
}

.pandora-stat-label{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:.9px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pandora-stat-value{
  font-family:'Space Grotesk',sans-serif;
  font-size:27px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Valor textual ("Sem pendentes", "Jantar") nao e um numero: em 27px domina o
   card e corta cedo. Menor e com quebra de linha ele cabe e le melhor. */
.pandora-stat-value[data-format="text"]{
  font-size:19px;
  letter-spacing:-.2px;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
}

.pandora-stat-details{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pandora-stat-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  border-radius:var(--r-sm);
  background:var(--bg);
  font-size:12px;
}

.pandora-stat-detail-label{
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pandora-stat-detail-value{
  font-weight:700;
  color:var(--text-main);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Timeline */
.pandora-timeline-section{margin-bottom:26px;}

.pandora-timeline-card{padding:22px;}

.pandora-timeline-empty{color:var(--text-muted);font-size:13px;}

.pandora-timeline-group{margin-bottom:22px;}
.pandora-timeline-group:last-child{margin-bottom:0;}

.pandora-timeline-group-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--text-muted);
  margin-bottom:12px;
}

.pandora-timeline-item{
  display:flex;
  gap:14px;
  position:relative;
  padding-bottom:18px;
}

.pandora-timeline-group .pandora-timeline-item:last-child{padding-bottom:0;}

.pandora-timeline-item::before{
  content:'';
  position:absolute;
  left:11px;
  top:24px;
  width:1px;
  height:calc(100% - 14px);
  background:linear-gradient(transparent, rgba(255,255,255,.08) 15%, rgba(255,255,255,.08) 85%, transparent);
}

.pandora-timeline-group .pandora-timeline-item:last-child::before{display:none;}

.pandora-timeline-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  flex:0 0 22px;
}

.pandora-timeline-dot[data-accent="primary"]{color:var(--primary);border:1px solid var(--primary-glow);box-shadow:0 0 8px var(--primary-glow);}
.pandora-timeline-dot[data-accent="emerald"]{color:var(--emerald);border:1px solid var(--emerald-glow);}
.pandora-timeline-dot[data-accent="rose"]{color:var(--rose);border:1px solid var(--rose-glow);}
.pandora-timeline-dot[data-accent="cyan"]{color:var(--cyan);border:1px solid var(--cyan-glow);}
.pandora-timeline-dot[data-accent="amber"]{color:#f59e0b;border:1px solid rgba(245,158,11,.35);}
.pandora-timeline-dot[data-accent="indigo"]{color:#818cf8;border:1px solid rgba(129,140,248,.35);}
.pandora-timeline-dot[data-accent="pink"]{color:#ec4899;border:1px solid rgba(236,72,153,.35);}

.pandora-timeline-content{flex:1;min-width:0;}

.pandora-timeline-title{
  font-size:13px;
  font-weight:600;
  color:var(--text-main);
}

.pandora-timeline-time{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;
  color:var(--text-muted);
  white-space:nowrap;
  flex:0 0 auto;
}

.pandora-timeline-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.pandora-timeline-subtitle{
  font-size:11px;
  color:var(--text-muted);
  margin-top:2px;
}

/* Eventos de hoje */
.pandora-eventos-hoje-section{margin-bottom:26px;}
.pandora-eventos-hoje-card{padding:18px 22px;}

.pandora-eventos-hoje-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.pandora-eventos-hoje-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--text-muted);
}

.pandora-eventos-hoje-title i{color:var(--primary);}

.pandora-eventos-hoje-badge{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;
  font-weight:700;
  color:var(--text-main);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:3px 11px;
  border-radius:999px;
  white-space:nowrap;
}

.pandora-eventos-hoje-badge-empty{
  color:var(--text-muted);
  background:transparent;
}

.pandora-eventos-hoje-card .pandora-timeline-item{
  padding:8px 10px;
  margin:0 -10px 2px;
  border-radius:10px;
  transition:background .15s ease;
}
.pandora-eventos-hoje-card .pandora-timeline-item:hover{background:rgba(255,255,255,.03);}
.pandora-eventos-hoje-card .pandora-timeline-item:last-child{margin-bottom:0;}
.pandora-eventos-hoje-card .pandora-timeline-item::before{display:none;}

.pandora-eventos-hoje-tag{
  flex:0 0 auto;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--text-muted);
  background:rgba(255,255,255,.05);
  padding:2px 8px;
  border-radius:999px;
  white-space:nowrap;
}

.pandora-eventos-hoje-tag-urgente{
  color:var(--rose);
  background:var(--rose-glow);
}

.pandora-eventos-hoje-empty{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-muted);
  font-size:13px;
  padding:6px 2px;
}

.pandora-eventos-hoje-empty i{
  font-size:16px;
  color:var(--primary);
}

.pandora-eventos-hoje-empty p{margin:0;}

/* Card detail (drill-down do resumo rapido, dentro do modal compartilhado) */
.pandora-detail-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

/* Abas do card combinado "Saude" (agua/humor/peso/pressao/sono) */
.pandora-saude-tabs{
  margin-bottom:14px;
  overflow-x:auto;
}
.pandora-saude-tabs .view-tab{
  white-space:nowrap;
}

.pandora-detail-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.pandora-detail-toolbar .pandora-detail-nav{margin:0 auto;}

/* Seletor de intervalo dentro do modal de detalhe */
.pandora-detail-range{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.pandora-detail-range-input{
  padding:6px 8px;
  font-size:12px;
  color-scheme:dark;
  min-width:0;
  width:130px;
}
.pandora-detail-range-sep{font-size:11px;color:var(--text-muted);}

/* Barra de periodo no topo do dashboard */
.pandora-periodo-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 18px;
  margin-top:18px;
  margin-bottom:16px;
  /* Eleva a barra (e o popover do date picker, que vive dentro dela) acima dos
     cards seguintes — hero/stats criam contexto de empilhamento via backdrop-filter
     e pintariam por cima do popover se a barra nao tivesse z-index proprio. */
  position:relative;
  z-index:40;
}
.pandora-periodo-info{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.pandora-periodo-info > i{
  font-size:18px;
  color:var(--primary);
  flex:0 0 auto;
}
.pandora-periodo-info small{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--text-muted);
}
.pandora-periodo-info strong{
  display:block;
  margin-top:3px;
  font-size:14px;
  font-family:'Space Grotesk',sans-serif;
}
.pandora-periodo-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pandora-periodo-input{
  padding:8px 10px;
  font-size:13px;
  color-scheme:dark;
  width:150px;
}
.pandora-periodo-sep{font-size:12px;color:var(--text-muted);}
.pandora-periodo-btn{
  height:38px;
  padding:0 14px;
  flex:0 0 auto;
}
.pandora-periodo-reset{
  background:rgba(255,255,255,.06);
  color:var(--text-main);
}
.pandora-periodo-reset:hover{background:rgba(255,255,255,.12);}

@media (max-width:640px){
  .pandora-periodo-bar{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:12px;
  }
  .pandora-periodo-info{
    justify-content:center;
    width:100%;
  }
  .pandora-periodo-info small,
  .pandora-periodo-info strong{
    text-align:center;
  }
  .pandora-periodo-controls{
    width:100%;
    justify-content:center;
  }
  .pandora-periodo-input{flex:1;width:auto;min-width:0;}
}

.pandora-detail-add-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:var(--r-pill);
  border:1px solid var(--primary-glow);
  background:rgba(168,85,247,.08);
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  flex:0 0 auto;
  transition:.15s;
}

.pandora-detail-add-btn:hover{background:rgba(168,85,247,.16);}

.pandora-detail-nav-label{
  font-size:13px;
  font-weight:600;
  min-width:140px;
  text-align:center;
}

.pandora-detail-nav-label small{
  color:var(--text-muted);
  font-weight:500;
}

.pandora-detail-nav-btn{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text-main);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  flex:0 0 auto;
  transition:.15s;
}

.pandora-detail-nav-btn:hover{border-color:var(--primary);color:var(--primary);}

.pandora-detail-chart{
  margin-bottom:16px;
  padding:14px 12px 6px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
}

.pandora-detail-list{
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-sm);
  overflow:hidden;
}

.pandora-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.pandora-detail-row:last-child{border-bottom:0;}
.pandora-detail-row:hover{background:rgba(255,255,255,.03);}

/* Item apontado por uma notificacao push (ver dashboard.js abrirDeepLinkNotificacao). */
.pandora-detail-row-highlight{
  background:color-mix(in srgb, var(--primary) 16%, transparent);
  animation:pandoraDetailRowPulse 1.3s ease-in-out 2;
}
@keyframes pandoraDetailRowPulse{
  0%,100%{background:color-mix(in srgb, var(--primary) 16%, transparent);}
  50%{background:color-mix(in srgb, var(--primary) 30%, transparent);}
}

.pandora-detail-row-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.pandora-detail-row-title{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pandora-detail-row-sub{
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pandora-detail-row-side{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.pandora-detail-row-value{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
}

.pandora-detail-row-date{
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  min-width:36px;
  text-align:right;
}

.pandora-detail-badge{
  font-size:10px;
  font-weight:700;
  padding:3px 9px;
  border-radius:var(--r-pill);
  text-transform:uppercase;
  letter-spacing:.4px;
}

.pandora-detail-badge-toggle{
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.pandora-detail-badge-toggle:hover{filter:brightness(1.2);}
.pandora-detail-badge-toggle:disabled{opacity:.5;cursor:not-allowed;}

.pandora-detail-badge.done{color:var(--emerald);background:rgba(16,185,129,.1);}
.pandora-detail-badge.pending{color:#f59e0b;background:rgba(245,158,11,.1);}

.pandora-comprado-toggle{
  width:26px;
  height:26px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.pandora-comprado-toggle:hover{filter:brightness(1.2);}
.pandora-comprado-toggle:disabled{opacity:.5;cursor:not-allowed;}
.pandora-comprado-toggle.done{color:var(--emerald);background:rgba(16,185,129,.15);}
.pandora-comprado-toggle.pending{color:#94a3b8;background:rgba(148,163,184,.15);}

.pandora-notificado-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:20px;
}
.pandora-notificado-icon .fa-message{font-size:15px;}
.pandora-notificado-icon.done .fa-message{color:#22c55e;}
.pandora-notificado-icon.pending .fa-message{color:#ef4444;opacity:.35;}
.pandora-notificado-icon.pending .fa-xmark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  font-weight:900;
  color:#ef4444;
}

.pandora-detail-delete{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:var(--text-muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  flex:0 0 auto;
  transition:.15s;
}

.pandora-detail-delete:hover{border-color:var(--rose);color:var(--rose);}
.pandora-detail-delete:disabled{opacity:.4;cursor:not-allowed;}

.pandora-detail-edit{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:var(--text-muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  flex:0 0 auto;
  transition:.15s;
}

.pandora-detail-edit:hover{border-color:var(--primary);color:var(--primary);}

/* Formulario generico de adicionar/editar registro */
.pandora-registro-form-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.pandora-registro-form-head .pandora-detail-nav-label{min-width:0;text-align:left;}

.pandora-registro-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.pandora-form-textarea{
  min-height:80px;
  resize:vertical;
  font-family:inherit;
}

.pandora-form-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer;
}

.pandora-form-multiselect{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
}

.pandora-form-multiselect .pandora-form-check{font-size:12px;}

/* Insight */
.pandora-insight-section{margin-bottom:8px;}

.pandora-insight-card{
  padding:22px;
  border-color:var(--primary-glow);
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), rgba(0,0,0,.08));
  position:relative;
}

.pandora-insight-card small{
  font-size:10px;
  font-weight:700;
  color:var(--primary);
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.pandora-insight-card h4{
  font-size:15px;
  font-weight:500;
  line-height:1.55;
  margin-top:10px;
  color:var(--text-main);
}

/* Floating action button */
.pandora-fab{
  position:fixed;
  right:22px;
  bottom:26px;
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  color:#fff;
  font-size:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:99;
  box-shadow:0 0 25px var(--primary-glow), 0 8px 25px rgba(0,0,0,.5);
  transition:transform .25s cubic-bezier(.175,.885,.32,1.275);
}

.pandora-fab:active{transform:scale(.92);}

.pandora-fab{
  padding:7px;
  overflow:hidden;
  background:#060a0c;
  border-color:rgba(34,211,238,.32);
  box-shadow:0 0 26px rgba(34,211,238,.24),0 8px 25px rgba(0,0,0,.5);
}

.pandora-fab img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Bottom sheet chat */
.pandora-sheet-overlay{
  position:fixed;
  inset:0;
  background:rgba(3,3,7,.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}

.pandora-sheet-overlay.active{opacity:1;pointer-events:auto;}

.pandora-chat-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:min(82dvh,720px);
  background:var(--bg,#06060c);
  border-top:1px solid var(--panel-border);
  border-radius:26px 26px 0 0;
  z-index:101;
  display:flex;
  flex-direction:column;
  box-shadow:0 -15px 40px rgba(0,0,0,.7);
  transform:translateY(105%);
  transition:transform .38s cubic-bezier(.1,.76,.55,.94);
}

.pandora-chat-sheet.active{transform:translateY(0);}

/* Trava a rolagem da pagina enquanto o chat esta aberto (iOS: o teclado
   rola a pagina atras do input fixo e deixa um vazio preto embaixo). */
body.pandora-chat-open{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

.pandora-sheet-pill-wrap{
  display:flex;
  justify-content:center;
  padding:10px 0 2px;
  flex:0 0 auto;
}

.pandora-sheet-pill{
  width:42px;
  height:4px;
  border-radius:10px;
  background:rgba(255,255,255,.15);
}

.pandora-sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex:0 0 auto;
}

.pandora-sheet-header strong{
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;
}

.pandora-sheet-identity{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.pandora-sheet-avatar{
  width:32px;
  height:32px;
  flex:0 0 32px;
  padding:3px;
  overflow:hidden;
  border:1px solid rgba(34,211,238,.24);
  border-radius:10px;
  background:#060a0c;
}

.pandora-sheet-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.pandora-sheet-identity div{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.pandora-sheet-identity small{
  margin-top:2px;
  color:var(--text-muted);
  font-size:10px;
}

.pandora-sheet-actions{display:flex;gap:8px;}

@media (max-width:640px){
  /* No celular o card ocupa a linha inteira, entao o clamp por cqw deixaria a
     metrica gigante -- travamos o teto aqui. */
  .pandora-hero h2{font-size:clamp(26px,7cqw,32px);}
  .pandora-hero{padding:16px;gap:14px;}
  .pandora-hero-viz{flex-basis:104px;}
  .pandora-hero-viz-ring{flex-basis:72px;width:72px;height:72px;}
  .pandora-hero-rail{gap:6px;}
  .pandora-hero-rail-item{padding:7px 9px;}
  .pandora-hero-rail-item strong{font-size:13px;}
  .pandora-stat-card{min-width:220px;max-width:240px;padding:18px;}
  .pandora-fab{right:16px;bottom:20px;width:54px;height:54px;font-size:19px;}
  .pandora-personalize-popover{width:min(260px,86vw);right:-4px;}
}