.vip-panel { width: min(500px, 100%); }
.vip-card { margin-top: 22px; padding: clamp(22px, 5vw, 36px); border: 1px solid #9a7f3b; border-radius: 16px; background: linear-gradient(150deg, #29251c, #171719 60%); text-align: center; box-shadow: 0 18px 40px #0006; }
.vip-badge { display: block; width: 160px; max-width: 100%; height: auto; margin: 0 auto; }
.vip-benefits { display: grid; gap: 14px; width: fit-content; max-width: 100%; list-style: none; padding: 0; margin: 28px auto; text-align: left; }
.vip-benefits li { display: flex; align-items: center; gap: 14px; }
.vip-benefits li::before { content: '✓'; flex-shrink: 0; color: #ffcc1a; font: 700 20px/1 Inter, sans-serif; }
.vip-benefits strong { color: #f7f3ea; font: 700 26px/1.3 'Barlow Condensed', sans-serif; }
.vip-price { margin: 0 0 6px; padding-top: 24px; border-top: 1px solid #f5d76e26; color: #f7f3ea; font: 700 36px/1.2 'Barlow Condensed', sans-serif; }
.vip-account { color: #c8bfae; font-size: 13px; overflow-wrap: anywhere; margin: 12px 0 0; }
#vipStatus { color: #c8bfae; font-size: 13px; line-height: 1.6; }
#vipStatus:empty { display: none; }
.vip-checkout { min-height: 44px; margin: 20px auto 0; max-width: 360px; }
.vip-error { margin-top: 20px; padding: 16px; color: #ffcccc; background: #452126; border: 1px solid #a44b50; border-radius: 8px; }
.vip-error p { margin-top: 0; line-height: 1.6; }
.vip-complete { margin-top: 24px; padding-top: 20px; border-top: 1px solid #ffffff24; }
.vip-complete h3 { color: #f5d76e; font-size: 24px; }
.vip-note { color: #a8a398; font-size: 12px; line-height: 1.6; margin: 14px 0 0; }
.vip-note a { color: #f5d76e; }
.vip-card [hidden] { display: none !important; }