.topup-notification { position: relative; }
.topup-notification > summary { list-style: none; }
.topup-notification > summary::-webkit-details-marker { display: none; }
.topup-notification-badge { position:absolute; top:3px; right:3px; display:grid; min-width:17px; height:17px; place-items:center; padding:0 4px; border:2px solid var(--surface); border-radius:999px; background:#e5484d; color:#fff; font-size:9px; font-weight:800; line-height:1; }
.topup-notification-panel { position:absolute; z-index:100040; top:calc(100% + 12px); right:-50px; width:min(360px,calc(100vw - 28px)); overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--font); box-shadow:0 18px 50px rgba(0,0,0,.16); animation:topup-notification-in .18s ease both; }
.topup-notification-panel[hidden] { display:none!important; }
.topup-notification-panel>header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 15px; border-bottom:1px solid var(--border); }
.topup-notification-panel>header strong { font-size:13px; }
.topup-notification-panel>header a { color:var(--main); font-size:10px; font-weight:700; }
.topup-notification-list { display:grid; max-height:320px; overflow:auto; }
.topup-notification-item { display:flex; align-items:center; gap:10px; padding:12px 14px; color:var(--font)!important; text-decoration:none; transition:background .15s ease; }
.topup-notification-item+.topup-notification-item { border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.topup-notification-item:hover { background:color-mix(in srgb,var(--main) 5%,var(--surface)); }
.topup-notification-mark { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--main) 10%,var(--surface)); color:var(--main); }
.topup-notification-mark .ui-icon { width:17px; height:17px; }
.topup-notification-item>span:nth-child(2) { display:grid; min-width:0; flex:1; gap:3px; }
.topup-notification-item strong { font-size:11px; }
.topup-notification-item small { color:var(--muted); font-size:9px; }
.topup-notification-item>b { color:var(--muted); font-size:18px; font-weight:400; }
.topup-notification-empty { margin:0; padding:25px 15px; color:var(--muted); font-size:11px; text-align:center; }
@keyframes topup-notification-in { from { opacity:0; transform:translateY(-5px) scale(.98) } to { opacity:1; transform:none } }
@media(max-width:1180px) { .topup-notification-panel { right:-40px; } }
@media(prefers-reduced-motion:reduce) { .topup-notification-panel { animation:none; } }