.vip-page { gap: 12px; }
.vip-me { display: flex; align-items: center; gap: 14px; padding: 14px; background: linear-gradient(115deg, rgba(255, 194, 61, .16), rgba(176, 102, 255, .14)); border: 1px solid var(--line); border-radius: 12px; }
.vip-me-badge { flex: none; width: 96px; height: 96px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.vip-me-badge.locked { filter: grayscale(1) brightness(.6); }
.vip-me-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.vip-me-who { display: flex; align-items: center; gap: 22px; min-width: 0; padding: 18px 0 20px 14px; }
.vip-me-who b { overflow: hidden; font-size: 17px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.vip-me-who .vip-tag { margin-left: 0; }
.vip-me-level { color: var(--sun); font-size: 20px; font-style: italic; font-weight: 900; }
.vip-me-info small { color: var(--muted); font-size: 13px; }
.vip-me-info small a { color: var(--sun); font-weight: 800; }
.vip-avatar { display: inline-grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 24px; line-height: 1; background: var(--night); border-radius: 50%; }
.vip-avatar.small { width: 34px; height: 34px; font-size: 19px; }
.vip-rule { margin: 0; color: var(--muted); font-size: 13px; }
.vip-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.vip-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.vip-card img { width: 72px; height: 72px; }
.vip-card .vip-avatar.vip-hias { margin: 20px 0 22px; }
.vip-card .vip-teks { font-size: 17px; }
.vip-card b { font-size: 16px; font-weight: 900; }
.vip-card small { color: var(--muted); font-size: 12px; }
.vip-card.got { border-color: rgba(255, 194, 61, .5); }
.vip-card.now { box-shadow: 0 0 0 2px var(--sun), 0 0 18px rgba(255, 194, 61, .35); }
.vip-card.got .vip-state { color: #7ef0c8; font-weight: 800; }
@media (max-width: 420px) { .vip-me { flex-direction: column; text-align: center; } .vip-me-who { justify-content: center; } }
.progress { height: 7px; margin-top: 2px; overflow: hidden; background: var(--line); border-radius: 4px; }
.progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sun), #ff8ad8); border-radius: 4px; }
.vip-card-av { display: flex; gap: 6px; margin-top: 2px; }
.vip-card-av span { display: grid; place-items: center; width: 36px; height: 36px; font-size: 22px; line-height: 1; background: radial-gradient(circle, color-mix(in srgb, var(--rar) 30%, transparent), transparent 75%); border: 1.5px solid var(--rar); border-radius: 9px; }
.vip-card .vip-card-rar { color: var(--rar); font-weight: 900; letter-spacing: .5px; text-transform: uppercase; font-size: 11px; }