/* =========================================================================
   mbet216 — VIP / levels add-on (compact)
   Logged-in header (wallet, rewards, notifications, avatar), account menu,
   notifications panel, player strip, Last Played row, VIP Club page
   (levels, benefits, level table), Admin · VIP & Elite.
   Uses the tokens from styles.css. Load AFTER styles.css.
   Class names are prefixed (plc-, acct, notif, lv-, vt-) so they never collide
   with styles.css (which already owns .pcard, .tag, .st …).
   ========================================================================= */

/* 1. RANK COLOURS ---------------------------------------------------------- */
.rk--beginner { --rk: #8C8C8C; }
.rk--bronze   { --rk: #D08A4B; }
.rk--silver   { --rk: #B9C2CE; }
.rk--gold     { --rk: #F6B52B; }
.rk--diamond  { --rk: #5BC8FF; }
.rk--elite    { --rk: #C77DFF; }
:root[data-theme="light"] .rk--silver  { --rk: #5F6670; }
:root[data-theme="light"] .rk--gold    { --rk: #A86A05; }
:root[data-theme="light"] .rk--diamond { --rk: #1478B0; }
:root[data-theme="light"] .rk--elite   { --rk: #7B2FD0; }
:root[data-theme="light"] .rk--bronze  { --rk: #9A5A22; }
.rank-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--surface3); color: var(--text); font-size: 12px; font-weight: 800; white-space: nowrap; }
.rank-chip--lv { background: color-mix(in srgb, var(--rk) 16%, transparent); color: var(--rk); }
.vtag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: rgba(246,181,43,.16); color: var(--goldtext); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

/* 2. LOGGED-IN HEADER ------------------------------------------------------ */
.wallet { display: flex; align-items: stretch; height: 40px; border-radius: var(--r); overflow: hidden; margin: 0 6px; }
.wallet__bal { display: flex; align-items: center; gap: 7px; padding: 0 10px 0 9px; border: 0; background: var(--surface2); color: var(--text); font-size: 14px; font-weight: 800; white-space: nowrap; }
.wallet__bal:hover { background: var(--surface3); }
.wallet__coin { width: 20px; height: 20px; flex: 0 0 auto; }
.wallet__dep { border: 0; padding: 0 14px; background: var(--grad); color: var(--ink); font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.wallet__dep:hover { filter: brightness(1.07); }
.wallet__dep .i { display: none; }
.hdr__who { display: flex; align-items: center; gap: 6px; }
.ibtn--badge { position: relative; }
.nbadge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.avatar-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface2); color: var(--text); display: flex; align-items: center; justify-content: center; position: relative; }
.avatar-btn:hover { background: var(--surface3); }
.avatar-btn[aria-expanded="true"], .ibtn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--gold); }
.hdr.is-auth .hdr__login, .hdr.is-auth [data-action="register"] { display: none; }

/* 3. POPOVERS (account menu, notifications) -------------------------------- */
.pop { position: absolute; right: var(--pad); top: calc(var(--hdr-h) + var(--ann-h, 0px) + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 20px 48px rgba(0,0,0,.45); z-index: 45; display: flex; flex-direction: column; }
.pop[hidden] { display: none; }
.pop__back { position: fixed; inset: 0; z-index: 44; }
.pop__back[hidden] { display: none; }

.acct { width: 300px; max-width: calc(100vw - 2 * var(--pad)); padding: 8px; gap: 8px; }
.acct__card { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface2); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.acct__card .hero__lines { opacity: .6; }
.acct__card .plc__prog { flex: 0 0 auto; }
.acct__top { position: relative; display: flex; align-items: center; gap: 10px; }
.acct__ava { width: 44px; height: 44px; border-radius: 10px; background: var(--surface3); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.acct__ava svg { width: 30px; height: 30px; }
.acct__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acct__name { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__go { width: 32px; height: 32px; border-radius: 8px; border: 0; background: var(--grad); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.acct__bal { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r); background: var(--surface2); font-size: 13px; font-weight: 700; }
.acct__bal .i { width: 18px; height: 18px; color: var(--goldtext); }
.acct__bal b { margin-left: auto; font-weight: 800; font-size: 14px; }
.acct__list { background: var(--surface2); border-radius: var(--r); padding: 3px; display: flex; flex-direction: column; }
.acct__list a, .acct__list button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 13px; font-weight: 700; text-align: left; width: 100%; }
.acct__list a:hover, .acct__list button:hover { background: var(--surface3); color: var(--text); }
.acct__list .i { width: 18px; height: 18px; }
.acct__list .vtag { margin-left: auto; }
.acct__list .acct__out { color: var(--text2); }

.notif { width: 400px; max-width: calc(100vw - 2 * var(--pad)); max-height: min(640px, calc(100vh - var(--hdr-h) - 24px)); }
.notif__hd { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.notif__hd h2 { font-size: 15px; font-weight: 800; flex: 1; }
.notif__hd .pill-btn { height: 30px; font-size: 12px; padding: 0 10px; }
.notif__hd .ibtn { width: 32px; height: 32px; }
.notif__hd .ibtn .i { width: 16px; height: 16px; }
.notif__tabs { display: flex; gap: 4px; padding: 8px 10px 0; }
.notif__tabs button { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text2); font-size: 12px; font-weight: 700; }
.notif__tabs button[aria-selected="true"] { background: var(--surface2); color: var(--text); }
.notif__list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ntf { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 8px; border-radius: 8px; color: var(--text); text-align: left; border: 0; background: transparent; width: 100%; }
.ntf:hover { background: var(--surface2); }
.ntf.is-unread { background: color-mix(in srgb, var(--surface2) 70%, transparent); }
.ntf__ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--text2); }
.ntf__ic .i { width: 18px; height: 18px; }
.ntf--deposit .ntf__ic { background: rgba(61,220,132,.14); color: var(--pos); }
.ntf--withdraw .ntf__ic { background: rgba(246,181,43,.14); color: var(--goldtext); }
.ntf--login .ntf__ic { background: rgba(59,180,242,.14); color: #3BB4F2; }
.ntf--failed .ntf__ic { background: rgba(255,77,77,.14); color: var(--live); }
.ntf--bonus .ntf__ic { background: rgba(246,181,43,.14); color: var(--goldtext); }
.ntf--level .ntf__ic { background: color-mix(in srgb, var(--rk, #F6B52B) 16%, transparent); color: var(--rk, var(--goldtext)); }
.ntf__t { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.ntf__t .dotu { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.ntf__d { font-size: 12px; color: var(--text2); line-height: 1.4; margin-top: 2px; }
.ntf__d b { color: var(--text); font-weight: 700; }
.ntf__meta { font-size: 11px; color: var(--text3); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
.ntf__act { margin-top: 5px; display: flex; gap: 6px; }
.ntf__act .pill-btn { height: 26px; font-size: 11px; padding: 0 9px; }
.ntf__act .pill-btn.warn { background: rgba(255,77,77,.14); color: var(--live); }
.ntf__time { font-size: 11px; color: var(--text3); white-space: nowrap; padding-top: 2px; }
.notif__foot { border-top: 1px solid var(--line); padding: 8px; }
.notif__foot a { display: flex; justify-content: center; height: 34px; align-items: center; font-size: 13px; font-weight: 700; color: var(--goldtext); border-radius: 8px; }
.notif__foot a:hover { background: var(--surface2); }

/* 4. PLAYER STRIP (home + VIP page) ---------------------------------------- */
.plc { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface); padding: 10px 14px; display: flex; align-items: center; gap: 14px; min-height: 72px; }
.plc > .hero__lines, .plc > .hero__glow { pointer-events: none; }
.plc > .hero__glow { width: 300px; height: 300px; top: -150px; right: 20%; }
.plc__ava { position: relative; width: 48px; height: 48px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.plc__ava svg { width: 32px; height: 32px; }
.plc__id { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 0 1 200px; }
.plc__name { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; max-width: 100%; }
.plc__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plc__name .i { width: 14px; height: 14px; flex: 0 0 auto; }
.plc__prog { position: relative; flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.plc__bar { height: 5px; border-radius: 3px; background: var(--surface3); overflow: hidden; }
.plc__fill { height: 100%; border-radius: 3px; background: var(--grad); min-width: 5px; }
.plc__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; }
.plc__pct { display: flex; align-items: center; gap: 4px; color: var(--goldtext); }
.plc__pct .ibtn { width: 22px; height: 22px; background: transparent; color: var(--text3); }
.plc__pct .ibtn .i { width: 14px; height: 14px; }
.plc__next { color: var(--text2); font-weight: 500; text-align: right; white-space: nowrap; }
.plc__next b { color: var(--text); font-weight: 800; }
.plc__rewards { position: relative; height: 34px; padding: 0 12px; font-size: 13px; flex: 0 0 auto; }

/* 5. LAST PLAYED ----------------------------------------------------------- */
.seeall { flex: 0 0 148px; aspect-ratio: 3 / 4; border-radius: var(--r-md); background: var(--surface2); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.seeall:hover { background: var(--surface3); color: var(--text); }

/* 6. VIP PAGE -------------------------------------------------------------- */
.lv-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.lv-row > * { scroll-snap-align: start; }
.lv-card { flex: 0 0 212px; background: var(--surface); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lv-card--you { box-shadow: inset 0 0 0 1.5px var(--gold); }
.lv-card__top { display: flex; align-items: center; gap: 10px; }
.lv-badge { width: 44px; height: 44px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lv-badge svg { width: 30px; height: 30px; }
.lv-card__amt { font-size: 18px; font-weight: 900; letter-spacing: -.01em; line-height: 1.1; }
.lv-card__amt small { display: block; font-size: 11px; font-weight: 700; color: var(--text3); margin-top: 2px; letter-spacing: .02em; }
.lv-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lv-card li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text2); line-height: 1.3; }
.lv-card li .i { width: 16px; height: 16px; color: var(--text3); flex: 0 0 auto; }
.lv-card li.on { color: var(--text); }
.lv-card li.on .i { color: var(--goldtext); }
.lv-card__you { margin-top: auto; align-self: flex-start; }
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 10px; }
.benefit { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.benefit__ic { width: 44px; height: 44px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--goldtext); }
.benefit__ic svg { width: 22px; height: 22px; }
.benefit h3 { font-size: 14px; font-weight: 800; margin-bottom: 2px; }
.benefit p { font-size: 12.5px; color: var(--text2); line-height: 1.4; }
.benefit--elite .benefit__ic { color: var(--rk); }
.lvtable { background: var(--surface); border-radius: var(--r); overflow: hidden; }
.lvtable__scroll { overflow-x: auto; }
.lvtable__hd, .lvtable__row { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1.2fr 1fr; align-items: center; min-width: 560px; padding: 0 14px; }
.lvtable__hd { height: 34px; font-size: 12px; font-weight: 700; color: var(--text3); }
.lvtable__row { height: 36px; border-top: 1px solid var(--line); font-size: 13px; }
.lvtable__row.is-you { background: var(--surface2); }
.lvtable__lv { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.lvtable__lv .rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--rk); flex: 0 0 auto; }
.lvtable .r { text-align: right; }
.lvtable b { font-weight: 800; }
.howit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.howit__card { background: var(--surface); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.howit__card h3 { font-size: 12px; font-weight: 800; color: var(--goldtext); letter-spacing: .06em; text-transform: uppercase; }
.howit__card p, .howit__card li { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.howit__card ul { margin: 0; padding-left: 16px; }
.howit__card b { color: var(--text); }
.vip-page { gap: 20px; }
.vip-page .sec { gap: 10px; }
.vip-page .sec__head h2 { font-size: 17px; }
.vip-page .sec__head > .i { width: 20px; height: 20px; }
.vip-page .sec__ctrl .ibtn { width: 34px; height: 34px; }

/* 7. ADMIN · VIP & ELITE --------------------------------------------------- */
.vt { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vt__scroll { overflow-x: auto; }
.vt__hd, .vt__row { display: grid; align-items: center; gap: 8px; padding: 0 10px; min-width: 640px; }
.vt__hd { height: 34px; font-size: 11px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; background: var(--surface2); }
.vt__row { min-height: 40px; border-top: 1px solid var(--line); font-size: 13px; padding: 4px 10px; }
.vt--levels .vt__hd, .vt--levels .vt__row { grid-template-columns: 1.4fr 1.2fr 1fr 1.2fr; }
.vt--elite .vt__hd, .vt--elite .vt__row { grid-template-columns: 1.3fr .9fr .7fr 1fr 1fr .9fr auto; }
.vt .adm__in { height: 30px; font-size: 13px; padding: 0 8px; }
.vt .lvtable__lv { font-size: 13px; }
.vt__acts { display: flex; gap: 4px; }
.vt__acts .pill-btn { height: 28px; font-size: 12px; padding: 0 9px; }
.vt__acts .ibtn { width: 28px; height: 28px; }
.vt__acts .ibtn .i { width: 14px; height: 14px; }
.st--elite { background: rgba(199,125,255,.18); color: #C77DFF; }
.st--invited { background: rgba(59,180,242,.15); color: #3BB4F2; }
.st--paused { background: var(--surface2); color: var(--text3); }
.adm__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.kpi { background: var(--surface); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi small { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.kpi b { font-size: 18px; font-weight: 900; }
.kpi span { font-size: 11px; color: var(--text2); }
.adm--vip .adm__card { padding: 14px; gap: 8px; }
.adm--vip .adm__card h2 { font-size: 15px; }
.adm--vip .adm__title h1 { font-size: 22px; }
.adm--vip .adm__title p { font-size: 13px; }
.adm--vip .adm__in { height: 36px; font-size: 13px; }
.adm--vip .adm__row { grid-template-columns: 1.2fr 1fr .7fr 1fr; }
.adm--vip .page-inner { gap: 16px; }

/* 8. SIZING ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hdr.is-auth .hdr__theme-m { display: none; }
  .hdr.is-auth .hdr__who { display: flex; }
  .adm--vip .adm__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .wallet { height: 36px; margin: 0 auto; }
  .wallet__bal { font-size: 13px; padding: 0 8px 0 7px; gap: 5px; }
  .wallet__coin { width: 18px; height: 18px; }
  .wallet__dep { padding: 0 9px; }
  .wallet__dep span { display: none; }
  .wallet__dep .i { display: block; width: 18px; height: 18px; }
  .hdr__who { gap: 3px; }
  .hdr.is-auth .hdr__who .ibtn, .hdr.is-auth .avatar-btn { width: 36px; height: 36px; }
  .pop { right: 8px; top: calc(var(--hdr-h) + var(--ann-h, 0px) + 4px); }
  .acct { width: min(300px, calc(100vw - 16px)); }
  .notif { width: calc(100vw - 16px); max-height: calc(100vh - var(--hdr-h) - 16px); }
  .plc { padding: 10px 12px; gap: 10px; flex-wrap: wrap; min-height: 0; }
  .plc__ava { width: 40px; height: 40px; }
  .plc__ava svg { width: 26px; height: 26px; }
  .plc__id { flex: 1 1 120px; gap: 4px; }
  .plc__name { font-size: 13px; }
  .plc__rewards { height: 30px; padding: 0 10px; font-size: 12px; order: 3; }
  .plc__prog { flex: 1 1 100%; order: 4; }
  .plc__foot { font-size: 11px; }
  .seeall { flex-basis: 108px; font-size: 13px; }
  .lv-card { flex-basis: 180px; padding: 12px; gap: 10px; }
  .lv-badge { width: 38px; height: 38px; }
  .lv-badge svg { width: 26px; height: 26px; }
  .lv-card__amt { font-size: 16px; }
  .lv-card li { font-size: 12px; }
  .benefit { gap: 10px; padding: 8px 10px; }
  .benefit__ic { width: 38px; height: 38px; }
  .benefit__ic svg { width: 20px; height: 20px; }
  .benefit h3 { font-size: 13px; }
  .benefit p { font-size: 12px; }
  .rank-chip { height: 22px; font-size: 11px; padding: 0 8px; }
  .vip-page .sec__head h2 { font-size: 15px; }
  .adm--vip .adm__row { grid-template-columns: 1fr; }
}