/* Poppys Academy — estilos base do tema cinematográfico premium.
   Complementa o Tailwind (via CDN). Cores da marca em variáveis. */
:root{
  --poppys-red:#E30B2B;
  --poppys-red-dark:#B00921;
  --poppys-gold:#F2B705;
  --bg:#0A0A0A;
  --card:#1C1C1F;
  --border:#2B2B2E;
  --muted:#9A9A9E;
}

*{box-sizing:border-box}
body{
  background:var(--bg);
  color:#F5F5F7;
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:.5px;
  font-weight:400;
}

/* Fundo com diagonal vermelha (login e telas guest) */
.poppys-diagonal{
  position:relative;
  background:var(--bg);
  overflow:hidden;
}
.poppys-diagonal::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(227,11,43,.20) 0%, rgba(227,11,43,0) 45%),
    radial-gradient(1200px 600px at 90% -10%, rgba(227,11,43,.25), transparent 60%);
  pointer-events:none;
}
.poppys-diagonal::after{
  content:"";
  position:absolute;
  top:-20%;left:-10%;
  width:60%;height:160%;
  background:linear-gradient(115deg,var(--poppys-red) 0%,var(--poppys-red-dark) 100%);
  transform:skewX(-14deg);
  opacity:.14;
  filter:blur(2px);
  pointer-events:none;
}

/* Cartões */
.card-poppys{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
}
.card-glass{
  background:rgba(28,28,31,.72);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
}

/* Botões */
.btn-poppys{
  background:var(--poppys-red);
  color:#fff;border:none;border-radius:10px;
  padding:.7rem 1.25rem;font-weight:700;cursor:pointer;
  transition:filter .15s, transform .05s;
}
.btn-poppys:hover{filter:brightness(1.08)}
.btn-poppys:active{transform:translateY(1px)}
.btn-ghost{
  background:transparent;color:#F5F5F7;
  border:1px solid var(--border);border-radius:10px;
  padding:.6rem 1rem;font-weight:600;cursor:pointer;
}
.btn-ghost:hover{border-color:var(--poppys-red)}

/* Inputs */
.field{
  width:100%;background:#151517;border:1px solid var(--border);
  border-radius:10px;color:#fff;padding:.75rem .9rem;
  outline:none;transition:border-color .15s;
}
.field:focus{border-color:var(--poppys-red)}
label{font-size:.85rem;color:var(--muted);font-weight:600}

/* Tier badges */
.tier{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;
  border-radius:999px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.tier-ouro{background:rgba(242,183,5,.15);color:var(--poppys-gold);border:1px solid rgba(242,183,5,.4)}
.tier-prata{background:rgba(199,199,204,.15);color:#D8D8DD;border:1px solid rgba(199,199,204,.35)}
.tier-bronze{background:rgba(205,127,50,.15);color:#E39A5C;border:1px solid rgba(205,127,50,.35)}

/* Chips de filtro */
.chip{padding:.4rem .9rem;border-radius:999px;border:1px solid var(--border);
  color:var(--muted);font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:all .15s}
.chip:hover{border-color:var(--poppys-red);color:#fff}
.chip.active{background:var(--poppys-red);color:#fff;border-color:var(--poppys-red)}

/* Barra de progresso */
.progress-track{height:8px;background:#2B2B2E;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--poppys-red),#ff5470);border-radius:999px}

/* Anel de progresso (SVG) */
.ring-bg{stroke:#2B2B2E}
.ring-fg{stroke:var(--poppys-red);stroke-linecap:round;transition:stroke-dashoffset .6s ease}

/* Sidebar */
.sidebar-link{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-radius:12px;
  color:var(--muted);font-weight:700;text-decoration:none;transition:all .15s}
.sidebar-link:hover{background:#242427;color:#fff}
.sidebar-link.active{background:rgba(227,11,43,.14);color:#fff;box-shadow:inset 3px 0 0 var(--poppys-red)}

/* Certificado selo */
.cert-badge{background:linear-gradient(135deg,var(--poppys-gold),#d99e04);color:#1a1200;
  font-weight:800;border-radius:999px;padding:.2rem .7rem;font-size:.72rem;display:inline-flex;gap:.3rem;align-items:center}

a{color:inherit}
.scroll-x::-webkit-scrollbar{height:6px}
.scroll-x::-webkit-scrollbar-thumb{background:#2B2B2E;border-radius:999px}