.hero-credit{position:relative;z-index:20}
.top-actions .hero-credit{flex:none}
.hero-credit-trigger{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid #34284f;border-radius:10px;background:#151322;color:#cfc5e9;font-weight:700;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.hero-credit-trigger:hover,.hero-credit-trigger[aria-expanded="true"]{color:#fff}
.hero-credit-trigger:hover,.hero-credit-trigger[aria-expanded="true"]{border-color:#644a9d;background:#1e1830}
.hero-credit-trigger>span{color:#a77aff;font-size:16px}
.hero-credit-trigger>strong{font-size:12px}
.hero-credit-trigger>i{color:#817794;font:normal 13px/1 Arial;transition:transform .2s}
.hero-credit-trigger[aria-expanded="true"]>i{transform:rotate(180deg)}
.hero-credit-trigger:focus-visible{outline:2px solid #a77aff;outline-offset:4px;border-radius:7px}
.hero-credit-popover{position:absolute;top:calc(100% + 9px);right:0;width:min(330px,calc(100vw - 34px));padding:17px;border:1px solid #4b3b70;border-radius:16px;background:radial-gradient(circle at 100% 0,#4d32704a,transparent 48%),#111722;box-shadow:0 24px 70px #000b;z-index:80}
.hero-credit-popover[hidden]{display:none}
.hero-credit-popover:before{content:"";position:absolute;top:-6px;right:24px;width:11px;height:11px;border-top:1px solid #4b3b70;border-right:1px solid #4b3b70;background:#2a2040;transform:rotate(-45deg)}
.hero-credit-popover header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid #ffffff12}
.hero-credit-popover header small,.hero-credit-popover header strong{display:block}
.hero-credit-popover header small{margin-bottom:4px;color:#8e99ad;font-size:9px}
.hero-credit-popover header strong{font-size:18px;color:#f3efff}
.hero-credit-popover header>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#9a6ee9,#59399c);color:#fff;font-size:17px;box-shadow:0 8px 22px #8154cf4d}
.hero-credit-details{display:grid;gap:11px;padding:14px 0}
.hero-credit-details>div{display:flex;align-items:flex-start;gap:9px}
.hero-credit-details>div>span{display:grid;place-items:center;width:27px;height:27px;flex:none;border-radius:8px;background:#1c2533;color:#aa8bea}
.hero-credit-details p{margin:0;min-width:0}
.hero-credit-details b,.hero-credit-details small{display:block}
.hero-credit-details b{font-size:10px;color:#d8deea}
.hero-credit-details small{margin-top:3px;color:#7f8a9e;font-size:9px;line-height:1.7}
.hero-credit-topup{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:1px solid #7657bd;border-radius:10px;background:linear-gradient(120deg,#7950c6,#59369d);color:#fff;font-size:10px;font-weight:800}
.hero-credit-topup:hover{filter:brightness(1.1)}
@media(max-width:760px){.top-actions{gap:7px}.hero-credit-popover{right:auto;left:0}.hero-credit-trigger{padding-inline:8px}.hero-credit-trigger>strong{font-size:10px}}
@media(max-width:520px){.hero-credit-trigger>span,.hero-credit-trigger>i{display:none}.hero-credit-trigger{padding-inline:7px}.hero-credit-popover{position:fixed;top:72px;right:12px;left:12px;width:auto}.hero-credit-popover:before{right:auto;left:104px}}