/* ===========================================================
   VIP & TIER V1 — Frenzy96 player (2026-05-30)
   Progress-journey design. Vanilla, English-only, currency = $.
   Renders into #pf3-subpage-body (pf3 header = back + "VIP & Tier").
   =========================================================== */
.vipw {
  --vip-bg:#0b0c10; --vip-surface:#141620; --vip-surface2:#0f1117; --vip-border:#1e2028; --vip-border2:#1a1c24;
  --vip-gold:#e8a124; --vip-gold-bg:#1f1a0d; --vip-gold-border:#3a2e0a;
  --vip-blue:#4a8ee8; --vip-blue-bg:#0d1520; --vip-green:#2dc98a; --vip-green-bg:#0d1a10;
  --vip-purple:#9070e8; --vip-purple-bg:#130e22;
  --vip-text:#eee; --vip-text2:#aaa; --vip-text3:#555; --vip-text4:#3a3e4d;
  background:var(--vip-bg); color:var(--vip-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  margin:-14px; padding:14px; min-height:100%;
}
.vip-mono { font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ── section 1: current tier card ── */
.vip-hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#1a1208,#0f0d08); border:1px solid var(--vip-gold-border); border-radius:14px; padding:16px; margin-bottom:14px; }
.vip-hero__glow { position:absolute; top:-30px; right:-30px; width:80px; height:80px; border-radius:50%; background:#e8a12430; filter:blur(28px); pointer-events:none; }
.vip-hero__top { display:flex; justify-content:space-between; align-items:flex-start; position:relative; }
.vip-hero__lbl { font-size:9px; font-weight:600; color:var(--vip-gold); letter-spacing:.08em; text-transform:uppercase; }
.vip-hero__badge { font-size:10px; font-weight:700; padding:4px 10px; border-radius:20px; background:#e8a12420; border:1px solid #e8a12440; color:var(--vip-gold); display:inline-flex; align-items:center; gap:5px; }
.vip-hero__name { font-size:22px; font-weight:700; color:var(--vip-text); margin:8px 0 2px; }
.vip-hero__sub { font-size:10px; color:#888; }
.vip-prog { margin-top:14px; }
.vip-prog__ends { display:flex; justify-content:space-between; font-size:9px; color:var(--vip-text2); margin-bottom:5px; }
.vip-prog__bar { height:5px; border-radius:4px; background:#1e2028; overflow:hidden; }
.vip-prog__fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#e8a124,#f0c040); transition:width .4s; }
.vip-prog__hint { font-size:9px; color:var(--vip-text3); margin-top:6px; }
.vip-hero__max { margin-top:12px; font-size:12px; color:var(--vip-gold); font-weight:600; text-align:center; }

/* ── section 2: tier steps row ── */
.vip-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:14px; }
.vip-step { border:1px solid var(--vip-border); background:var(--vip-surface); border-radius:9px; padding:9px 3px; text-align:center; }
.vip-step__ico { font-size:14px; line-height:1; }
.vip-step__name { font-size:9px; font-weight:600; margin-top:4px; color:var(--vip-text); }
.vip-step__req { font-size:8px; color:var(--vip-text4); margin-top:2px; }
.vip-step.done { border-color:#2dc98a20; background:#0d1a1020; }
.vip-step.done .vip-step__name { color:var(--vip-green); }
.vip-step.current { border-color:var(--vip-gold); background:var(--vip-gold-bg); }
.vip-step.current .vip-step__name { color:var(--vip-gold); }
.vip-step.locked { border-color:var(--vip-border); background:var(--vip-surface); opacity:.5; }
.vip-step.locked .vip-step__name { color:var(--vip-text3); }

/* ── section 3: current benefits ── */
.vip-card { background:var(--vip-surface); border:1px solid var(--vip-border); border-radius:12px; margin-bottom:14px; }
.vip-card__h { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 10px; }
.vip-card__h-l { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.05em; }
.vip-card__h-l svg { width:15px; height:15px; color:var(--vip-gold); }
.vip-chip { font-size:9px; font-weight:700; padding:3px 9px; border-radius:20px; background:#e8a12420; border:1px solid #e8a12440; color:var(--vip-gold); display:inline-flex; align-items:center; gap:4px; }
.vip-ben { display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid var(--vip-border2); }
.vip-ben__ico { width:26px; height:26px; flex:0 0 26px; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.vip-ben__ico svg { width:15px; height:15px; }
.vip-ben__mid { flex:1; min-width:0; }
.vip-ben__name { font-size:13px; color:var(--vip-text); }
.vip-ben__sub { font-size:10px; color:var(--vip-text3); margin-top:1px; }
.vip-ben__val { font-size:13px; font-weight:700; text-align:right; }

/* ── section 4: next tier card ── */
.vip-next { display:flex; align-items:center; gap:12px; background:var(--vip-blue-bg); border:1px solid #1a2535; border-radius:12px; padding:13px 14px; margin-bottom:14px; cursor:pointer; }
.vip-next__ico { width:36px; height:36px; flex:0 0 36px; border-radius:10px; background:#0a1828; color:var(--vip-blue); display:flex; align-items:center; justify-content:center; }
.vip-next__ico svg { width:20px; height:20px; }
.vip-next__mid { flex:1; min-width:0; }
.vip-next__lbl { font-size:9px; color:var(--vip-blue); text-transform:uppercase; letter-spacing:.06em; }
.vip-next__name { font-size:12px; font-weight:600; color:var(--vip-text); margin:2px 0; }
.vip-next__hint { font-size:10px; color:var(--vip-text3); }
.vip-next__chev { color:var(--vip-text4); }
.vip-next__chev svg { width:18px; height:18px; transition:transform .2s; }
.vip-next.open .vip-next__chev svg { transform:rotate(90deg); }
.vip-next-detail { background:var(--vip-surface); border:1px solid var(--vip-border); border-radius:12px; margin:-8px 0 14px; padding:4px 14px; }

/* ── section 5: all tiers table ── */
.vip-allbtn { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; background:transparent; border:1px solid var(--vip-border); color:#888; border-radius:8px; padding:11px; font-size:12px; font-weight:600; cursor:pointer; margin-bottom:14px; }
.vip-allbtn svg { width:15px; height:15px; }
.vip-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:14px; border:1px solid var(--vip-border); border-radius:12px; }
.vip-table { width:100%; border-collapse:collapse; font-size:11px; min-width:420px; }
.vip-table th, .vip-table td { padding:9px 8px; text-align:center; border-bottom:1px solid var(--vip-border2); white-space:nowrap; }
.vip-table th:first-child, .vip-table td:first-child { text-align:left; color:var(--vip-text2); position:sticky; left:0; background:var(--vip-surface); }
.vip-table thead th { font-size:10px; color:var(--vip-text2); font-weight:600; }
.vip-table .col-cur { background:#1f1a0d; color:var(--vip-gold); }
.vip-table .col-locked { opacity:.45; }
.vip-table tbody tr:last-child td { border-bottom:none; }

/* ── skeleton ── */
.vip-sk { background:linear-gradient(90deg,#141620 25%,#1c1f2a 37%,#141620 63%); background-size:400% 100%; animation:vip-shimmer 1.4s ease infinite; border-radius:10px; }
@keyframes vip-shimmer { 0%{background-position:100% 0;} 100%{background-position:0 0;} }
.vip-retry { text-align:center; padding:40px 16px; }
.vip-retry button { margin-top:12px; background:var(--vip-gold); color:#0b0c10; border:0; border-radius:9px; padding:10px 20px; font-size:13px; font-weight:700; cursor:pointer; }
.vip-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:100001; color:#fff; padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:0 8px 28px rgba(0,0,0,.4); }