.vip-club { --vip-gold:#f4c45f; --vip-amber:#ff9f43; padding-bottom:48px; }
.vip-hero { min-height:410px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); align-items:center; gap:36px; overflow:hidden; position:relative; padding:clamp(30px,5vw,70px); border:1px solid color-mix(in srgb,var(--vip-gold) 30%,var(--border)); border-radius:28px; background:radial-gradient(circle at 78% 50%,color-mix(in srgb,#7d42ff 28%,transparent),transparent 36%),linear-gradient(130deg,#121728 0%,#1c1732 55%,#24173a 100%); box-shadow:0 28px 70px rgb(0 0 0/.28); }
.vip-hero-glow { position:absolute; inset:-40% 45% auto -12%; height:330px; background:color-mix(in srgb,var(--vip-gold) 19%,transparent); filter:blur(80px); pointer-events:none; }
.vip-hero-copy { position:relative; z-index:1; max-width:760px; }
.vip-preview-pill { display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border:1px solid color-mix(in srgb,var(--vip-gold) 55%,transparent); border-radius:999px; color:#f9d989; background:rgb(244 196 95/.09); font-size:.75rem; font-weight:900; letter-spacing:.1em; }
.vip-hero h1 { margin:10px 0 14px; max-width:14ch; font-size:clamp(2.5rem,6vw,5.1rem); line-height:.92; letter-spacing:-.055em; background:linear-gradient(120deg,#fff 15%,#f7d88a 55%,#d89cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vip-hero-copy>p:not(.eyebrow) { max-width:62ch; color:#c7c3d5; font-size:clamp(.95rem,1.6vw,1.12rem); line-height:1.65; }
.vip-formula { max-width:690px; display:grid; gap:7px; margin-top:24px; padding:15px 17px; border:1px solid rgb(255 255 255/.1); border-radius:14px; background:rgb(4 7 17/.46); }
.vip-formula span { color:#9f9aaa; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.vip-formula code { overflow-wrap:anywhere; color:#fff1c8; font-family:ui-monospace,SFMono-Regular,monospace; font-size:clamp(max(.75rem,9px),1.4vw,.9rem); font-weight:700; line-height:1.45; }
.vip-hero-medal { width:min(280px,65vw); aspect-ratio:1; display:grid; place-items:center; align-content:center; justify-self:center; position:relative; border:1px solid rgb(255 255 255/.13); border-radius:50%; background:radial-gradient(circle at 35% 30%,#5c477a 0 8%,#2c2144 30%,#121421 68%); box-shadow:0 0 0 16px rgb(255 255 255/.025),0 35px 65px rgb(0 0 0/.4),inset 0 0 55px rgb(242 190 91/.12); }
.vip-hero-medal::before,.vip-hero-medal::after,.vip-hero-medal i { content:""; position:absolute; inset:14%; border:2px solid color-mix(in srgb,var(--vip-gold) 58%,transparent); transform:rotate(45deg); border-radius:25%; }
.vip-hero-medal::after { inset:25%; border-color:rgb(255 255 255/.15); transform:rotate(22.5deg); }
.vip-hero-medal i { inset:8%; border-width:1px; border-color:rgb(216 156 255/.24); transform:rotate(67.5deg); }
.vip-hero-medal strong { z-index:1; color:#ffe09a; font-size:clamp(2.8rem,6vw,5rem); line-height:.9; letter-spacing:-.07em; text-shadow:0 8px 30px rgb(244 196 95/.35); }
.vip-hero-medal span { z-index:1; margin-top:10px; color:#c9b9e8; font-size:.75rem; font-weight:900; letter-spacing:.24em; }
.vip-preview-notice { display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 16px; margin:18px 0 38px; padding:16px 18px; border:1px solid color-mix(in srgb,#60a5fa 35%,var(--border)); border-radius:14px; background:color-mix(in srgb,#2563eb 8%,var(--panel)); }
.vip-preview-notice strong { grid-row:1/3; align-self:center; color:#8dc0ff; }
.vip-preview-notice p { margin:0; color:var(--muted-light); font-size:.82rem; line-height:1.5; }
.vip-personal { display:grid; grid-template-columns:minmax(145px,.35fr) minmax(280px,1fr) minmax(230px,.7fr); gap:18px; align-items:stretch; margin:22px 0 42px; padding:20px; border:1px solid color-mix(in srgb,var(--vip-gold) 30%,var(--border)); border-radius:22px; background:linear-gradient(135deg,color-mix(in srgb,var(--vip-gold) 7%,var(--panel)),var(--panel2)); box-shadow:0 18px 45px rgb(0 0 0/.12); }
.vip-personal-rank,.vip-personal-summary,.vip-personal-activity { min-width:0; padding:18px; border:1px solid var(--line-soft); border-radius:16px; background:color-mix(in srgb,var(--panel3) 82%,transparent); }
.vip-personal-rank { --rank:#8791a2; display:grid; align-content:center; justify-items:start; position:relative; overflow:hidden; }
.vip-personal-rank.vip-rank-bronze{--rank:#c27a42}.vip-personal-rank.vip-rank-silver{--rank:#b9c8d8}.vip-personal-rank.vip-rank-gold{--rank:#f0bd4c}.vip-personal-rank.vip-rank-platinum{--rank:#83d9dc}.vip-personal-rank.vip-rank-diamond{--rank:#9fbcff}.vip-personal-rank.vip-rank-adamantium{--rank:#cf83ff}
.vip-personal-rank::after { content:""; width:120px; height:120px; position:absolute; right:-55px; bottom:-55px; border-radius:50%; background:color-mix(in srgb,var(--rank) 22%,transparent); filter:blur(18px); }
.vip-personal-rank span,.vip-personal-total span,.vip-personal-journey span,.vip-personal-activity>span { color:var(--muted); font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.vip-personal-rank strong { z-index:1; margin:5px 0; color:color-mix(in srgb,var(--rank) 76%,var(--text)); font-size:1.55rem; }
.vip-personal-rank small,.vip-personal-total small,.vip-personal-journey small { color:var(--muted-light); }
.vip-personal-summary { display:grid; grid-template-columns:auto minmax(180px,1fr); align-items:center; gap:22px; }
.vip-personal-total { display:grid; gap:4px; }
.vip-personal-total strong { color:var(--vip-gold); font-size:clamp(1.65rem,3vw,2.35rem); letter-spacing:-.04em; }
.vip-personal-journey { display:grid; gap:10px; }
.vip-personal-journey>div:first-child { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.vip-personal-journey>div strong { color:var(--text); font-size:.78rem; text-align:right; }
.vip-progress-track { height:10px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--muted) 18%,transparent); }
.vip-progress-track i { display:block; width:var(--vip-progress); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--vip-gold),#cf83ff); box-shadow:0 0 16px color-mix(in srgb,var(--vip-gold) 45%,transparent); }
.vip-personal-activity { display:grid; align-content:start; gap:10px; }
.vip-activity-list { display:grid; gap:6px; max-height:150px; overflow:auto; margin:0; padding:0; list-style:none; }
.vip-activity-list li { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:.75rem; }
.vip-activity-list time,.vip-activity-list span { color:var(--muted); }.vip-activity-list strong { color:var(--text); }
.vip-no-activity { margin:6px 0 0; color:var(--muted-light); font-size:.76rem; line-height:1.5; }
.vip-personal-signin,.vip-personal-unavailable { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.vip-personal-signin h2,.vip-personal-unavailable h2 { margin:4px 0; font-size:1.25rem; }.vip-personal-signin p,.vip-personal-unavailable p { margin:0; color:var(--muted); font-size:.8rem; }
.vip-section { margin-top:48px; }
.vip-section>header { max-width:750px; margin-bottom:20px; }
.vip-section h2,.vip-milestone-panel h2,.vip-calculation h2 { margin:4px 0 8px; font-size:clamp(1.65rem,3vw,2.45rem); letter-spacing:-.035em; }
.vip-section header p,.vip-milestone-panel p,.vip-calculation p { margin:0; color:var(--muted); line-height:1.55; }
.vip-rank-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); gap:12px; overflow-x:auto; padding:3px 2px 18px; scroll-snap-type:x proximity; scrollbar-color:color-mix(in srgb,var(--vip-gold) 40%,var(--border)) transparent; }
.vip-rank-card { min-height:265px; display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; align-content:start; position:relative; overflow:hidden; padding:20px; border:1px solid color-mix(in srgb,var(--rank,#8993a4) 40%,var(--border)); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--rank,#8993a4) 12%,var(--panel2)),var(--panel3)); scroll-snap-align:start; }
.vip-rank-card::after { content:""; position:absolute; width:150px; height:150px; right:-70px; top:-80px; border-radius:50%; background:color-mix(in srgb,var(--rank,#8993a4) 20%,transparent); filter:blur(28px); }
.vip-rank-member{--rank:#8791a2}.vip-rank-bronze{--rank:#c27a42}.vip-rank-silver{--rank:#b9c8d8}.vip-rank-gold{--rank:#f0bd4c}.vip-rank-platinum{--rank:#83d9dc}.vip-rank-diamond{--rank:#9fbcff}.vip-rank-adamantium{--rank:#cf83ff}
.vip-rank-emblem { width:62px; height:62px; display:grid; place-items:center; position:relative; color:var(--rank); }
.vip-rank-emblem i { position:absolute; inset:7px; border:2px solid currentColor; border-radius:16px 6px; transform:rotate(45deg); box-shadow:inset 0 0 20px color-mix(in srgb,currentColor 28%,transparent),0 0 18px color-mix(in srgb,currentColor 25%,transparent); }
.vip-rank-emblem span { z-index:1; color:var(--text); font-weight:950; }
.vip-rank-copy>span,.vip-rank-rate span { color:var(--muted); font-size:.75rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.vip-rank-copy h2 { margin:3px 0; color:color-mix(in srgb,var(--rank) 78%,white); font-size:1.35rem; }
.vip-rank-copy strong { color:var(--text); font-size:.8rem; }
.vip-rank-copy p { grid-column:1/-1; margin:15px 0 0; color:var(--muted-light); font-size:.76rem; line-height:1.5; }
.vip-rank-rate { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); }
.vip-rank-rate strong { color:var(--rank); font-size:1.15rem; }
.vip-milestone-panel,.vip-calculation { display:grid; grid-template-columns:minmax(230px,.75fr) minmax(0,1.25fr); align-items:center; gap:40px; margin-top:38px; padding:30px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(125deg,var(--panel),color-mix(in srgb,#35214d 35%,var(--panel2))); }
.vip-milestone-panel ol { height:100px; position:relative; margin:0; padding:0; list-style:none; }
.vip-milestone-panel ol::before { content:""; position:absolute; left:0; right:0; top:34px; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--vip-gold),#d08cff); box-shadow:0 0 18px rgb(244 196 95/.2); }
.vip-milestone-panel li { position:absolute; left:var(--vip-position); top:13px; translate:-50% 0; display:grid; place-items:center; gap:4px; }
.vip-milestone-panel li i { width:44px; height:44px; border:5px solid var(--panel2); border-radius:50%; background:linear-gradient(145deg,#fff0b6,var(--vip-gold)); box-shadow:0 5px 18px rgb(0 0 0/.3); }
.vip-milestone-panel li strong { position:absolute; top:13px; color:#21170a; font-size:.75rem; }
.vip-milestone-panel li span { color:var(--muted); font-size:.75rem; font-weight:750; }
.vip-contribution-grid,.vip-perk-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.vip-contribution { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:20px; border:1px solid var(--border); border-radius:17px; background:var(--panel2); }
.vip-contribution span,.vip-perk span { color:var(--vip-gold); font-size:.75rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.vip-contribution h3 { margin:5px 0 0; font-size:1.08rem; }
.vip-contribution>strong { align-self:center; color:#ffe09a; font-size:1.8rem; }
.vip-contribution dl { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.vip-contribution dl div { display:flex; justify-content:space-between; gap:8px; padding:9px 11px; border-radius:10px; background:var(--panel3); }
.vip-contribution dt { color:var(--muted); font-size:.75rem; }.vip-contribution dd { margin:0; font-size:.75rem; font-weight:850; }
.vip-calculation ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.vip-calculation li { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:10px; align-items:center; min-height:52px; padding:10px 13px; border:1px solid var(--line-soft); border-radius:11px; background:rgb(3 5 12/.25); font-size:.8rem; }
.vip-calculation li span { color:var(--muted-light); }.vip-calculation li strong { color:#ffe09a; text-align:right; }
.vip-perk { min-height:150px; display:grid; grid-template-columns:52px minmax(0,1fr); align-content:center; gap:4px 15px; padding:20px; border:1px solid var(--border); border-radius:17px; background:linear-gradient(145deg,var(--panel2),var(--panel3)); }
.vip-perk i { grid-row:1/4; width:50px; height:50px; border:1px solid color-mix(in srgb,var(--vip-gold) 45%,transparent); border-radius:15px; background:radial-gradient(circle,var(--vip-gold) 0 12%,transparent 13%),linear-gradient(145deg,rgb(244 196 95/.18),transparent); }
.vip-perk h3 { margin:2px 0; font-size:1rem; }.vip-perk p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.45; }.vip-perk span { grid-column:2; margin-top:8px; }
.vip-terms { margin-top:28px; padding:18px 20px; border:1px dashed var(--border); border-radius:15px; text-align:center; }
.vip-terms p { max-width:820px; margin:6px auto; color:var(--muted); font-size:.76rem; line-height:1.5; }.vip-terms small { color:var(--muted); }
@media (max-width:1040px){.vip-personal{grid-template-columns:minmax(135px,.35fr) minmax(0,1fr)}.vip-personal-activity{grid-column:1/-1}.vip-activity-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.vip-personal-signin,.vip-personal-unavailable{grid-template-columns:minmax(0,1fr) auto}.vip-personal-signin>div,.vip-personal-unavailable>div{grid-column:auto}}
@media (max-width:800px){.vip-hero{grid-template-columns:1fr;min-height:0;padding:28px 22px}.vip-hero-medal{width:190px}.vip-preview-notice{grid-template-columns:1fr}.vip-preview-notice strong{grid-row:auto}.vip-personal{grid-template-columns:1fr}.vip-personal-activity{grid-column:auto}.vip-personal-summary{grid-template-columns:1fr}.vip-personal-signin,.vip-personal-unavailable{grid-template-columns:1fr}.vip-personal-signin .button{justify-self:start}.vip-milestone-panel,.vip-calculation{grid-template-columns:1fr;gap:24px;padding:22px}.vip-contribution-grid{grid-template-columns:1fr}.vip-perk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vip-milestone-panel ol{margin-inline:7px}}
@media (max-width:520px){.vip-club{padding-inline:10px}.vip-hero{border-radius:20px}.vip-hero h1{font-size:2.75rem}.vip-personal{padding:12px;border-radius:18px}.vip-personal-signin{grid-template-columns:minmax(0,1fr) auto;column-gap:10px}.vip-personal-signin .button{align-self:start}.vip-personal-rank,.vip-personal-summary,.vip-personal-activity{padding:15px}.vip-personal-journey>div:first-child{display:grid}.vip-personal-journey>div strong{text-align:left}.vip-activity-list{grid-template-columns:1fr}.vip-rank-track{grid-auto-columns:84vw}.vip-milestone-panel{overflow:hidden;padding-inline:16px}.vip-milestone-panel ol{height:86px}.vip-milestone-panel li i{width:36px;height:36px}.vip-milestone-panel li strong{top:9px}.vip-contribution dl{grid-template-columns:1fr}.vip-calculation li{grid-template-columns:1fr auto}.vip-calculation li strong{grid-column:1/-1;text-align:left}.vip-perk-grid{grid-template-columns:1fr}.vip-perk{min-height:0;align-content:start}}
@media (prefers-reduced-motion:reduce){.vip-rank-track{scroll-behavior:auto}}