:root{
  --roxo:#8B5CF6; --violeta:#4C1D95; --dourado:#D4A24E;
  --cosmico:#0D0A14; --lunar:#F5F3FF; --lavanda:#C4B5FD;
  --display:'Cormorant Garamond',serif; --corpo:'Sora',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
.premio-login-banner{
  display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:16px;margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(212,162,78,.22),rgba(139,92,246,.18));
  border:1px solid rgba(212,162,78,.45);
}
.premio-login-icone{font-size:1.8rem;flex-shrink:0}
.premio-login-texto{flex:1;display:flex;flex-direction:column;gap:.15rem}
.premio-login-texto strong{color:var(--dourado);font-family:var(--display);font-size:1.05rem}
.premio-login-texto span{color:var(--lunar);font-size:.85rem}
.premio-login-fechar{
  background:none;border:none;color:var(--lavanda);cursor:pointer;font-size:.9rem;
  padding:.3rem;flex-shrink:0;
}
.premio-login-fechar:hover{color:var(--lunar)}
body{
  font-family:var(--corpo);background:var(--cosmico);color:var(--lunar);
  min-height:100dvh;line-height:1.6;
}
#ceu{position:fixed;inset:0;z-index:0;pointer-events:none}

/* painel */
.painel{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:1.6rem 1.2rem 4rem}

/* HERO com arte */
.hero{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:1.4rem;
  border-radius:22px;padding:1.6rem 1.6rem;margin-bottom:1.6rem;
  background:
    linear-gradient(120deg, rgba(13,10,20,.86) 0%, rgba(38,25,70,.78) 55%, rgba(76,29,149,.55) 100%),
    url('../../decorativas/decor-mistico-2.jpg') center/cover no-repeat;
  border:1px solid rgba(212,162,78,.3);
  box-shadow:0 14px 40px rgba(13,10,20,.55), inset 0 0 60px rgba(139,92,246,.12);
}
.hero-sofia{width:120px;height:auto;flex-shrink:0;filter:drop-shadow(0 8px 22px rgba(139,92,246,.5))}
.hero-txt{flex:1;min-width:0}
.hero-ola{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado);opacity:.9;margin-bottom:.2rem}
.hero h1{font-family:var(--display);font-size:clamp(1.7rem,5vw,2.5rem);font-weight:600;line-height:1.1;margin-bottom:.3rem}
.sub{color:var(--lavanda);font-size:.98rem}

/* identidade visual: selo (papel institucional) + moldura (comercial/conquista).
   Compartilhada entre Meu Painel e Meu Perfil — as duas telas carregam este
   arquivo. */
.identidade-conteudo{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.identidade-selo{
  display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;
  border-radius:999px;font-size:.82rem;font-weight:600;color:var(--lunar);
  background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.4);
}
.identidade-moldura{
  display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .8rem;
  border-radius:999px;font-size:.82rem;font-weight:600;color:var(--dourado);
  background:rgba(212,162,78,.12);border:1px solid rgba(212,162,78,.4);
}
.identidade-moldura small{font-weight:400;opacity:.75;text-transform:lowercase}
.identidade-moldura-imagem{width:22px;height:22px;object-fit:contain;vertical-align:middle}
.identidade-mini .identidade-moldura-imagem{width:18px;height:18px}
.identidade-moldura-vazia{
  color:var(--lavanda);font-weight:400;background:transparent;border-color:rgba(139,92,246,.18);
}
/* variante compacta pro hero do Meu Painel (menos respiro que a do Perfil) */
.identidade-mini{margin-top:.5rem}
.identidade-mini .identidade-selo,
.identidade-mini .identidade-moldura{font-size:.75rem;padding:.25rem .65rem}

/* stats rápidas (sequência + nível/XP) — inspirado nos cartões de
   estatística do mockup do pacote 2.0, mas só com dados que já
   existem de verdade (gamificação, mesma fonte do Perfil). Usa os
   tokens --sofia-* completos (Sprint 1, lote 1.1/1.1b) em vez de
   valores soltos, onde bate certinho com a escala. */
.stat-linha{
  display:grid;grid-template-columns:1fr 2fr;gap:var(--sofia-space-4,1rem);
  margin-bottom:var(--sofia-space-6,1.5rem);
}
.stat-card{
  display:flex;align-items:center;gap:var(--sofia-space-3,.75rem);
  background:rgba(26,21,37,.6);border:1px solid rgba(139,92,246,.2);
  border-radius:var(--sofia-radius-lg,18px);padding:var(--sofia-space-4,1rem) var(--sofia-space-5,1.25rem);
  box-shadow:var(--sofia-shadow-sm,none);
}
.stat-icone{font-size:1.8rem;filter:drop-shadow(0 0 10px rgba(212,162,78,.5))}
.stat-corpo{display:flex;flex-direction:column;min-width:0}
.stat-numero{font-family:var(--display);font-size:1.6rem;color:var(--dourado);line-height:1.1}
.stat-rotulo{font-size:.72rem;color:var(--lavanda);text-transform:uppercase;letter-spacing:.05em;opacity:.85}
.stat-card-nivel{position:relative}
.stat-corpo-flex{flex:1;gap:.3rem}
.stat-corpo-flex .stat-numero{font-size:1.05rem;color:var(--lunar)}
.stat-barra{height:6px;border-radius:999px;background:rgba(139,92,246,.15);overflow:hidden;margin:.15rem 0}
.stat-barra-preenchida{height:100%;border-radius:999px;background:var(--sofia-gradient-brand,linear-gradient(90deg,var(--roxo),var(--dourado)));transition:width .5s ease;width:0%}
.stat-link{color:var(--lavanda);text-decoration:none;font-size:1.4rem;opacity:.6;transition:opacity .2s,color .2s;flex-shrink:0}
.stat-link:hover{opacity:1;color:var(--dourado)}

@media (max-width:560px){
  .stat-linha{grid-template-columns:1fr}
}

/* carregando */
.carregando{text-align:center;padding:3rem 1rem;color:var(--lavanda)}
.lua-girando{font-size:2.5rem;display:inline-block;animation:girar 3s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* GRID de cards */
.painel-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;align-items:start}
.card-largo,.card-destaque{grid-column:1 / -1}

/* blocos / cards — radius/sombra pelos tokens do Sprint 1 (lote 1.1),
   valores batem exatos com o que já era usado (zero mudança visual
   na forma, só consolida em vez de número solto) + ganha sombra sutil */
.bloco{
  background:rgba(26,21,37,.6);border:1px solid rgba(139,92,246,.2);
  border-radius:var(--sofia-radius-lg,18px);padding:var(--sofia-space-6,1.5rem);
  backdrop-filter:blur(6px);box-shadow:var(--sofia-shadow-sm,none);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.bloco:hover{border-color:rgba(212,162,78,.35);transform:translateY(-2px);box-shadow:var(--sofia-shadow-md,none)}
.card-destaque{
  background:linear-gradient(150deg, rgba(44,31,69,.7), rgba(26,21,37,.6));
  border-color:rgba(212,162,78,.32);
}
.bloco-titulo{font-family:var(--display);font-size:1.35rem;font-weight:600;margin-bottom:1rem;color:var(--lunar)}

/* carta do dia */
.carta-dia{display:flex;gap:1.4rem;align-items:center}
.carta-visual{
  flex-shrink:0;width:120px;height:185px;border-radius:14px;
  background:linear-gradient(160deg,#2A1F45,#4C1D95);
  border:2px solid var(--dourado);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 34px rgba(139,92,246,.4);overflow:hidden;
}
.carta-simbolo{font-size:3.4rem;filter:drop-shadow(0 0 12px rgba(212,162,78,.6))}
.carta-info h3{font-family:var(--display);font-size:1.8rem;font-weight:600;color:var(--dourado);margin-bottom:.5rem}
.carta-msg{color:var(--lavanda);font-size:.98rem;line-height:1.65}

/* mapa astral */
.astral-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.astral-item{text-align:center;padding:1rem .6rem;background:rgba(139,92,246,.08);border-radius:12px}
.astral-rotulo{display:block;font-size:.75rem;color:var(--lavanda);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.astral-valor{font-family:var(--display);font-size:1.3rem;color:var(--lunar)}
.astral-vazio{text-align:center;color:var(--lavanda);padding:1rem}
.astral-vazio a{color:var(--dourado)}

/* tiragem */
.tiragem-pergunta{font-style:italic;color:var(--lavanda);margin-bottom:.6rem}
.tiragem-quando{font-size:.8rem;color:var(--lavanda);opacity:.7}
.vazio{text-align:center;color:var(--lavanda);padding:1rem;opacity:.85}
.vazio a{color:var(--dourado)}

/* atalhos ("Acesso rápido") — grade de ícones inspirada no mockup do
   pacote 2.0, só que com destinos que já existem de verdade */
.atalhos{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sofia-space-3,.8rem)}
.atalho{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:var(--sofia-space-5,1.1rem) var(--sofia-space-2,.5rem);
  background:var(--sofia-gradient-surface,rgba(139,92,246,.1));
  border:1px solid rgba(139,92,246,.2);border-radius:var(--sofia-radius-md,10px);
  text-decoration:none;color:var(--lunar);
  transition:background .2s,transform .2s,border-color .2s,box-shadow .2s;
}
.atalho:hover{
  background:rgba(139,92,246,.18);border-color:rgba(212,162,78,.4);
  transform:translateY(-2px);box-shadow:var(--sofia-glow-violet,0 0 24px rgba(139,92,246,.22));
}
.atalho-icone{font-size:1.6rem;width:1.6rem;height:1.6rem;object-fit:contain;vertical-align:middle}
.atalho span:last-child{font-size:.82rem}

/* animal de poder no painel */
.animal-resumo{display:flex;align-items:center;gap:1rem;margin-bottom:.8rem}
.animal-resumo-emoji{font-size:2.8rem;filter:drop-shadow(0 0 12px rgba(139,92,246,.5))}
.animal-resumo-img{width:72px;height:72px;object-fit:cover;border-radius:14px;box-shadow:0 6px 20px rgba(13,10,20,.55);flex-shrink:0}
.animal-resumo-nome{display:block;font-family:var(--display);font-size:1.5rem;color:var(--dourado)}
.animal-resumo-num{display:block;font-size:.8rem;color:var(--lavanda);opacity:.8}
.animal-link{color:var(--lavanda);text-decoration:none;font-size:.9rem}
.animal-link:hover{color:var(--dourado)}

/* bloco de suporte */
.suporte-texto{color:var(--lavanda);margin-bottom:1rem;line-height:1.6}
.botao-suporte{
  display:inline-block;padding:.8rem 1.6rem;border-radius:999px;text-decoration:none;
  background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.4);color:#9BE6A8;
  font-weight:600;transition:background .2s;
}
.botao-suporte:hover{background:rgba(37,211,102,.28)}

/* artes do tarô e cartas de signo no painel */
.carta-art{width:116px;height:auto;border-radius:10px;box-shadow:0 6px 22px rgba(13,10,20,.55);display:inline-block}
.astral-img{width:64px;height:auto;border-radius:8px;display:block;margin:0 auto .35rem;box-shadow:0 4px 14px rgba(13,10,20,.5)}
.tiragem-cartas{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.8rem}
.mini-carta{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:78px;font-size:.78rem;text-align:center}
.mini-arte{width:78px;height:auto;border-radius:8px;box-shadow:0 4px 14px rgba(13,10,20,.5)}
.mini-simb{font-size:1.6rem}
.mini-nome{color:var(--lavanda);line-height:1.2}
.mini-inv{color:#FCA5A5}

/* responsivo */
@media (max-width:720px){
  .painel-grade{grid-template-columns:1fr}
  .card-largo,.card-destaque{grid-column:auto}
  .atalhos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .hero{flex-direction:column;text-align:center;gap:.8rem}
  .hero-sofia{width:100px}
  .carta-dia{flex-direction:column;text-align:center}
  .astral-grade{grid-template-columns:repeat(3,1fr)}
}