/* =========================================================
   VIP Page
========================================================= */
.vip-page { direction:rtl; max-width:1200px; margin-inline:auto; padding:clamp(28px,4vw,44px) clamp(14px,3vw,24px) 60px; color:#dbeafe; font-family:'Vazirmatn',sans-serif; }
.vip-xp-card, .vip-levels-card { background:rgba(11,18,32,.88); border:1px solid rgba(51,65,85,.72); border-radius:24px; box-shadow:0 16px 38px rgba(2,6,23,.22); }
.vip-xp-card { padding:22px; margin-bottom:20px; }
.vip-xp-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.vip-xp-title { margin:0; color:#93c5fd; font-size:1.08rem; }
.vip-sync-btn { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border:1px solid #60a5fa; border-radius:12px; background:linear-gradient(135deg,#2563eb,#3b82f6); color:#fff; font-family:inherit; font-weight:800; cursor:pointer; transition:transform .2s ease,box-shadow .22s ease; }
.vip-sync-btn:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(37,99,235,.22); }
.vip-xp-meta, .vip-xp-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#94a3b8; font-size:.8rem; }
.vip-xp-bar { width:100%; height:18px; background:#0b1220; border:1px solid #22304a; border-radius:999px; overflow:hidden; }
.vip-xp-fill { width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#2563eb,#38bdf8); transition:width .55s cubic-bezier(.22,.61,.36,1); }
.vip-xp-footer { margin-top:12px; color:#cbd5e1; }
.vip-current-level { color:#60a5fa; }
.vip-sync-result { min-height:1.2em; font-size:.78rem; color:#94a3b8; }
.vip-sync-result.success { color:#4ade80; }
.vip-sync-result.error { color:#f87171; }
.vip-levels-card { padding:24px; }
.vip-levels-list { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.vip-level-tab { display:flex; align-items:center; gap:10px; padding:9px 16px; border-radius:13px; background:#0b1220; border:1px solid #22304a; color:#cbd5e1; cursor:pointer; transition:transform .2s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease; font-weight:700; font-size:.82rem; font-family:inherit; }
.vip-level-tab:hover { transform:translateY(-2px); border-color:rgba(59,130,246,.38); }
.vip-level-tab.selected { background:rgba(59,130,246,.08); border-color:#3b82f6; color:#93c5fd; box-shadow:0 0 0 1px rgba(59,130,246,.14),0 10px 22px rgba(37,99,235,.12); }
.level-badge { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:#fff; }
.level-name { font-weight:700; }
.features-container { min-height:300px; }
.feature-panel[hidden] { display:none; }
.feature-panel-title { margin:0 0 8px; color:var(--vip-color,#93c5fd); font-size:1.1rem; }
.feature-panel-subtitle { color:#94a3b8; margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-top:18px; }
.feature-card { background:#0b1220; border-radius:14px; padding:13px; display:flex; align-items:center; gap:11px; border:1px solid #22304a; transition:transform .2s ease,border-color .22s ease,background .22s ease; }
.feature-card:hover { transform:translateY(-2px); border-color:var(--feature-color,#3b82f6); background:#0e1729; }
.feature-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:#fff; background:var(--feature-color,#3b82f6); flex:0 0 36px; }
.feature-text { font-size:.82rem; color:#cbd5e1; line-height:1.7; }
.feature-title { color:var(--feature-color,#93c5fd); font-weight:800; font-size:.82rem; }
@media (max-width:700px) { .vip-page { padding:20px 12px 42px; } .vip-xp-header,.vip-xp-footer { align-items:flex-start; flex-direction:column; } .vip-sync-btn { width:100%; justify-content:center; } .vip-levels-card { padding:16px; } }