.pi-page{
  min-height:100vh;
  background-size:cover;
  background-position:center;
  padding:16px 12px 120px;
  box-sizing:border-box;
}

.pi-hero{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  color:#fff; gap:10px;
}
.pi-hero-left{ display:flex; align-items:center; gap:10px; }
.pi-avatar{ width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.6); }
.pi-hello{ font-weight:800; font-size:14px; opacity:.95; letter-spacing:.2px; }
.pi-platform{ font-weight:900; font-size:18px; letter-spacing:.3px; text-shadow:0 1px 1px rgba(0,0,0,.3); }

.pi-hero-right{ display:flex; align-items:center; gap:12px; }
.pi-id{ background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.22);
  padding:6px 10px; border-radius:10px; }
.pi-id-label{ opacity:.9; margin-right:6px; }
.pi-id-val{ font-weight:800; }
.pi-vip-badge{ display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, #48D1FF, #0EA5C8);
  border:1px solid rgba(255,255,255,.55); font-weight:900; }

.pi-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-top:12px;
}
@media (min-width:480px){ .pi-stats{ grid-template-columns:repeat(6,1fr);} }
.pi-stat{
  text-align:center; color:#fff; padding:10px 6px;
  border-radius:14px;
  background:rgba(43,76,110,.72);
  border:1px solid rgba(255,255,255,.20);
}
.pi-stat img{ width:28px; height:28px; display:block; margin:0 auto 6px; }
.pi-k{ font-size:12px; opacity:.9; }
.pi-v{ font-weight:900; font-size:16px; letter-spacing:.3px; }

.pi-cta{
  margin-top:12px; padding:12px; border-radius:14px;
  background:rgba(0,0,0,.18); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.pi-cta-text{ margin-bottom:8px; }
.pi-btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  color:#fff; font-weight:800; text-decoration:none;
  background:linear-gradient(180deg, #41D3F9, #14A9C9);
  border:1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 8px 14px rgba(255,255,255,.12), 0 6px 12px rgba(0,0,0,.18);
}

.pi-card{
  margin-top:12px; padding:12px; border-radius:14px;
  background:rgba(43,76,110,.72);
  border:1px solid rgba(255,255,255,.22); color:#fff;
}
.pi-card-title{ font-weight:900; margin-bottom:8px; }
.pi-list{ display:flex; flex-direction:column; gap:8px; }
.pi-li{ display:flex; align-items:center; justify-content:space-between; }
.pi-li span{ opacity:.9; }
.pi-li b{ font-weight:900; }

.pi-claims-head{
  display:grid; grid-template-columns:34% 26% 20% 20%;
  gap:8px; font-weight:900; opacity:.95; margin-bottom:8px;
}
.pi-claims-body{ display:flex; flex-direction:column; gap:8px; }
.pi-claims-row{
  display:grid; grid-template-columns:34% 26% 20% 20%;
  gap:8px; align-items:center;
  padding:8px 10px; border-radius:10px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}
.pi-c-time,.pi-c-act,.pi-c-prize{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pi-badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-weight:800;
  border:1px solid rgba(255,255,255,.45);
}
.pi-badge.pending{ background:rgba(255,255,255,.15); }
.pi-badge.granted,.pi-badge.paid,.pi-badge.approved{ background:#1bbf88; }
.pi-badge.rejected,.pi-badge.failed{ background:#d9534f; }

.pi-nodata{ color:#fff; opacity:.9; padding:10px 0; text-align:center; }

@media (max-width:420px){
  .pi-claims-head{ display:none; }
  .pi-claims-row{
    grid-template-columns:1fr 1fr; grid-auto-rows:auto;
  }
  .pi-c-time{ grid-column:1 / -1; opacity:.9; }
}



.pi-stat-roulette{
  grid-column: 1 / -1;
  padding: 12px;
  text-align: left;
}
.pi-rt-head{
  display:flex; align-items:center; gap:8px;
}
.pi-stat-roulette .pi-k{ font-size:13px; opacity:.95; }

.pi-stat-roulette img{ width:28px; height:28px; margin:0; }
.pi-rt-grid{
  margin-top:8px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.pi-rt-item{
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  padding:8px;
  text-align:center;
}
.pi-rt-k{ font-size:12px; opacity:.85; }
.pi-rt-v{ font-weight:900; font-size:16px; letter-spacing:.3px; }