:root{
  --bg-deep:#1F1229;
  --bg-card:#35204A;
  --bg-card-alt:#442A5C;
  --accent-berry:#E85D8A;
  --accent-gold:#F4B942;
  --accent-mint:#7ED9A8;
  --accent-red:#E8695D;
  --text-cream:#F6F0E7;
  --text-muted:#B7A5C7;
  --text-faint:#8A76A0;
  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:11px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 600px 400px at 15% -5%, rgba(232,93,138,0.18), transparent 60%),
    radial-gradient(ellipse 500px 500px at 110% 10%, rgba(244,185,66,0.12), transparent 55%),
    var(--bg-deep);
  color:var(--text-cream);
  font-family:'Work Sans', sans-serif;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:0 0 60px;
}
.phone{ width:100%; max-width:430px; padding:26px 18px 50px; position:relative; }
.tag{ display:inline-block; font-size:11px; font-weight:600; color:var(--accent-gold); background:rgba(244,185,66,0.14); padding:4px 10px; border-radius:99px; margin-bottom:10px; }
h1{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:22px; margin:0 0 4px; }
.subtitle{ font-size:13px; color:var(--text-faint); margin:0 0 22px; }
.section-title{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:14.5px; margin:24px 2px 10px; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; }
.section-title:first-of-type{ margin-top:0; }
.card{ background:var(--bg-card); border-radius:var(--radius-lg); padding:20px 18px; border:1px solid rgba(246,240,231,0.06); }
label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.field{ margin-bottom:14px; }
.field:last-child{ margin-bottom:0; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
input{ width:100%; background:rgba(0,0,0,0.22); border:1.5px solid rgba(246,240,231,0.12); border-radius:var(--radius-sm); padding:12px 13px; font-size:14.5px; color:var(--text-cream); font-family:'Work Sans', sans-serif; outline:none; }
input:focus{ border-color:var(--accent-berry); }
button{ width:100%; padding:15px; border:none; border-radius:var(--radius-md); background:var(--accent-berry); color:#241127; font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; cursor:pointer; margin-top:4px; }
button:active{ transform:scale(0.98); }
.resultado{ margin-top:16px; padding:15px 16px; border-radius:var(--radius-md); font-size:13.5px; line-height:1.5; }
.resultado.ok{ background:rgba(126,217,168,0.14); border:1px solid rgba(126,217,168,0.35); color:var(--accent-mint); }
.resultado.erro{ background:rgba(232,105,93,0.14); border:1px solid rgba(232,105,93,0.35); color:var(--accent-red); }
.resultado b{ color:var(--text-cream); display:block; font-size:14.5px; margin-bottom:3px; font-family:'Fredoka', sans-serif; }
.brand{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:22px; }
.brand span{ color:var(--accent-berry); }
.brand-sub{ font-size:12.5px; color:var(--text-faint); margin-top:2px; }
.hero{ position:relative; background:linear-gradient(155deg, var(--bg-card) 0%, var(--bg-card-alt) 100%); border-radius:var(--radius-lg); padding:22px 20px 20px; overflow:hidden; border:1px solid rgba(246,240,231,0.06); }
.hero-top{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.avatar{ width:56px; height:56px; border-radius:18px; background:linear-gradient(155deg, var(--accent-berry), #7A3B8C); display:flex; align-items:center; justify-content:center; font-family:'Fredoka', sans-serif; font-weight:600; font-size:20px; flex-shrink:0; }
.hero-name{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:18px; }
.hero-level{ font-size:13px; color:var(--accent-gold); margin-top:2px; font-weight:600; }
.hero-rank-pill{ margin-left:auto; text-align:right; }
.hero-rank-num{ font-family:'Fredoka', sans-serif; font-size:26px; font-weight:700; line-height:1; }
.hero-rank-label{ font-size:11px; color:var(--text-faint); margin-top:2px; }
.progress-track{ height:10px; background:rgba(0,0,0,0.28); border-radius:99px; overflow:hidden; margin-top:16px; }
.progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent-gold), var(--accent-berry)); }
.row{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid transparent; margin-bottom:8px; }
.row.me{ border-color:var(--accent-berry); background:linear-gradient(155deg, rgba(232,93,138,0.14), var(--bg-card)); }
.rank-badge{ width:30px; font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; color:var(--text-faint); text-align:center; flex-shrink:0; }
.row-avatar{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px; flex-shrink:0; background:linear-gradient(155deg,#B98CE0,#6C4FA8); }
.row-info{ flex:1; min-width:0; }
.row-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-sub{ font-size:11.5px; color:var(--text-faint); margin-top:1px; }
.row-pts{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px; color:var(--accent-mint); flex-shrink:0; text-align:right; }
.row-pts small{ display:block; font-family:'Work Sans'; font-weight:400; font-size:10px; color:var(--text-faint); }
.prizes{ display:flex; gap:10px; }
.prize-card{ flex:1; border-radius:var(--radius-md); padding:14px 10px 12px; text-align:center; background:var(--bg-card); border:1px solid rgba(246,240,231,0.06); }
.prize-card.gold{ background:linear-gradient(165deg, rgba(244,185,66,0.20), var(--bg-card)); border-color:rgba(244,185,66,0.35); }
.prize-medal{ font-size:22px; }
.prize-title{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px; margin-top:6px; }