.home-monthly-topup-row{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin:12px 0 16px;
}
.hmt-card{
  position:relative;
  width:min(100%,360px);
  overflow:hidden;
  border-radius:17px;
  border:1px solid rgba(91,150,238,.24);
  background:
    radial-gradient(circle at 100% 0%,rgba(51,132,255,.12),transparent 40%),
    linear-gradient(160deg,rgba(18,27,43,.96),rgba(15,22,35,.96));
  box-shadow:0 15px 36px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.05);
}
.hmt-card::before{
  content:"";
  position:absolute;
  left:-40%;top:0;
  width:38%;height:1px;
  background:linear-gradient(90deg,transparent,#63c6ff,transparent);
  animation:hmtSweep 5.5s linear infinite;
}
.hmt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 15px 11px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hmt-title{display:flex;align-items:center;gap:8px;min-width:0;color:#f4f8ff;font-size:.81rem;letter-spacing:.02em}
.hmt-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmt-star{display:grid;place-items:center;color:#ffd34f;font-size:.83rem;filter:drop-shadow(0 0 7px rgba(255,205,64,.35));animation:hmtStar 2.2s ease-in-out infinite}
.hmt-live{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;background:rgba(30,161,255,.08);border:1px solid rgba(72,181,255,.17);color:#89d1ff;font-size:.56rem;font-weight:900;letter-spacing:.08em}
.hmt-live i{display:block;width:5px;height:5px;border-radius:50%;background:#4ad8ff;box-shadow:0 0 7px rgba(74,216,255,.8);animation:hmtPulse 1.6s ease-in-out infinite}
.hmt-list{padding:2px 14px 5px}
.hmt-item{
  display:grid;
  grid-template-columns:30px 36px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:54px;
  border-bottom:1px solid rgba(173,205,255,.10);
}
.hmt-item:last-child{border-bottom:none}
.hmt-rank{font-size:.76rem;font-weight:900;color:#62a2ff;font-variant-numeric:tabular-nums}
.hmt-item.rank-1 .hmt-rank{color:#ffd34f;text-shadow:0 0 8px rgba(255,204,63,.25)}
.hmt-item.rank-2 .hmt-rank{color:#c9d8ef}
.hmt-item.rank-3 .hmt-rank{color:#f1a875}
.hmt-avatar{
  width:32px;height:32px;border-radius:50%;padding:2px;
  background:linear-gradient(135deg,#73d5ff,#4f74ff 48%,#9b79ff);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 5px 14px rgba(27,83,180,.22);
}
.hmt-avatar span{
  width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:#eef5ff;color:#1c3157;font-size:.72rem;font-weight:950;
}
.hmt-user{min-width:0;display:flex;flex-direction:column;gap:1px}
.hmt-user strong{font-size:.76rem;color:#f1f5fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmt-user small{font-size:.6rem;color:rgba(194,210,233,.43)}
.hmt-amount{font-size:.75rem;color:#ff9a3c;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,137,36,.15)}
.hmt-empty{padding:24px 18px;display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;color:rgba(210,224,244,.48);font-size:.72rem}
.hmt-empty i{color:#6ca6ff;font-size:1rem}
.hmt-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.05);font-size:.57rem;color:rgba(190,207,231,.36)}
.hmt-foot i{color:#5ebcff}
@keyframes hmtSweep{from{transform:translateX(0)}to{transform:translateX(370%)}}
@keyframes hmtStar{0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 5px rgba(255,205,64,.25))}50%{transform:scale(1.12) rotate(8deg);filter:drop-shadow(0 0 10px rgba(255,205,64,.52))}}
@keyframes hmtPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media (max-width:700px){
  .home-monthly-topup-row{justify-content:stretch;margin:10px 0 14px}
  .hmt-card{width:100%;border-radius:15px}
  .hmt-head{padding:11px 12px 9px}
  .hmt-list{padding-inline:11px}
  .hmt-item{grid-template-columns:28px 34px minmax(0,1fr) auto;gap:7px;min-height:50px}
  .hmt-avatar{width:30px;height:30px}
  .hmt-amount{font-size:.71rem}
}
@media (max-width:390px){
  .hmt-title{font-size:.73rem}
  .hmt-live{display:none}
  .hmt-user small{display:none}
  .hmt-item{grid-template-columns:27px 32px minmax(0,1fr) auto}
  .hmt-avatar{width:28px;height:28px}
  .hmt-amount{font-size:.67rem}
}
@media (prefers-reduced-motion:reduce){.hmt-card::before,.hmt-star,.hmt-live i{animation:none!important}}