/* ===== USER BAR ===== */
.user-bar{display:flex;align-items:center;gap:12px}
.ub-coins{display:flex;align-items:center;gap:6px;padding:6px 16px;background:rgba(212,168,67,0.12);border:1px solid rgba(212,168,67,0.25);border-radius:50px;cursor:pointer;transition:all .3s;font-size:.88rem;font-weight:600;color:var(--gold)}
.ub-coins:hover{background:rgba(212,168,67,0.2);transform:scale(1.05)}
.coin-icon{font-size:1.1rem}
.ub-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px;border-radius:50px;transition:background .3s}
.ub-user:hover{background:rgba(255,255,255,0.05)}
.ub-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff}
.ub-name{font-size:.82rem;color:var(--text-light);font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub-login-btn{padding:8px 20px;background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:var(--purple-deep);border:none;border-radius:50px;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .3s}
.ub-login-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(212,168,67,0.3)}

/* ===== MODALS ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);z-index:9999;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.active{display:flex}
.modal-box{background:#150922;border:1px solid rgba(212,168,67,0.15);border-radius:20px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:4px;transition:color .3s;z-index:2}
.modal-close:hover{color:var(--gold)}
.modal-header{padding:2rem 2rem 1rem;text-align:center}
.modal-header h3{font-family:'Cinzel',serif;color:var(--gold);font-size:1.3rem;margin-bottom:4px}
.modal-header p{color:var(--text-muted);font-size:.85rem}
.modal-body{padding:0 2rem 2rem}

/* Auth tabs */
.auth-tabs{display:flex;gap:0;margin-bottom:1.5rem;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}
.auth-tab{flex:1;padding:10px;text-align:center;background:rgba(255,255,255,0.03);color:var(--text-muted);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;font-family:'Outfit',sans-serif}
.auth-tab.active{background:rgba(212,168,67,0.12);color:var(--gold)}
.auth-form{display:none}.auth-form.show{display:block}
.m-input{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;background:rgba(255,255,255,0.04);color:#fff;font-family:'Outfit',sans-serif;font-size:.9rem;margin-bottom:.8rem;outline:none;transition:border .3s}
.m-input:focus{border-color:var(--gold)}
.m-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:var(--purple-deep);border:none;border-radius:10px;font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s;margin-top:.5rem}
.m-btn:hover{box-shadow:0 4px 20px rgba(212,168,67,0.3);transform:translateY(-1px)}
.m-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ===== COIN PACKAGES ===== */
.pkg-grid{display:flex;flex-direction:column;gap:10px}
.pkg-card{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:1px solid rgba(255,255,255,0.08);border-radius:14px;background:rgba(255,255,255,0.03);transition:all .3s;cursor:pointer}
.pkg-card:hover{border-color:rgba(212,168,67,0.3);background:rgba(212,168,67,0.05)}
.pkg-card.popular{border-color:rgba(212,168,67,0.3);background:rgba(212,168,67,0.06);position:relative}
.pkg-popular-tag{position:absolute;top:-8px;right:16px;background:var(--gold);color:var(--purple-deep);font-size:.6rem;font-weight:700;padding:2px 10px;border-radius:50px;letter-spacing:1px;text-transform:uppercase}
.pkg-info .pkg-coins{font-size:1.2rem;font-weight:700;color:var(--white)}.pkg-info .pkg-coins .coin-emoji{font-size:1rem}
.pkg-info .pkg-price{font-size:.8rem;color:var(--text-muted);margin-top:2px}
.pkg-info .pkg-bonus{color:var(--spotify);font-size:.75rem;font-weight:600}
.pkg-buy{padding:8px 20px;background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:var(--purple-deep);border:none;border-radius:50px;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .3s}
.pkg-buy:hover{transform:scale(1.05)}

/* ===== BLESS MODAL ===== */
.bless-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:1rem 0}
.bless-amount-btn{padding:12px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;background:rgba(255,255,255,0.03);color:var(--white);font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.bless-amount-btn:hover{border-color:rgba(212,168,67,0.4);background:rgba(212,168,67,0.08)}
.bless-amount-btn.selected{border-color:var(--gold);background:rgba(212,168,67,0.15);color:var(--gold)}
.bless-amount-btn .ba-coins{font-size:1.1rem;display:block}.bless-amount-btn .ba-label{font-size:.65rem;color:var(--text-muted);display:block;margin-top:2px}

/* ===== BLESS BUTTON ON CARDS ===== */
.card-bless-bar{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.5rem;border-top:1px solid rgba(255,255,255,0.04)}
.bless-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,rgba(212,168,67,0.15),rgba(212,168,67,0.08));border:1px solid rgba(212,168,67,0.2);border-radius:50px;color:var(--gold);font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s}
.bless-btn:hover{background:rgba(212,168,67,0.2);transform:scale(1.05);box-shadow:0 2px 12px rgba(212,168,67,0.15)}
.bless-count{font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:4px}

/* ===== PREMIUM LOCK ===== */
.premium-lock{position:absolute;inset:0;background:rgba(13,1,23,0.85);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:5;border-radius:16px;cursor:pointer;transition:background .3s}
.premium-lock:hover{background:rgba(13,1,23,0.75)}
.lock-icon{font-size:2rem}.lock-text{font-size:.85rem;color:var(--gold);font-weight:600;letter-spacing:1px}
.lock-cost{font-size:.75rem;color:var(--text-muted)}

/* ===== LEADERBOARD ===== */
.leaderboard{max-width:600px;margin:0 auto}
.lb-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;transition:background .2s;margin-bottom:4px}
.lb-item:hover{background:rgba(255,255,255,0.03)}
.lb-rank{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--gold);width:30px;text-align:center}
.lb-rank.top{font-size:1.3rem}
.lb-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff}
.lb-info{flex:1}.lb-name{font-weight:500;font-size:.9rem}.lb-coins{font-size:.75rem;color:var(--gold)}

/* ===== PROFILE MODAL ===== */
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1rem 0}
.ps-card{text-align:center;padding:14px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.ps-num{font-family:'Cinzel',serif;font-size:1.5rem;font-weight:700;color:var(--gold)}
.ps-label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}

/* ===== TOAST ===== */
.app-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);padding:14px 28px;border-radius:14px;font-size:.9rem;font-weight:500;z-index:99999;opacity:0;transition:all .4s;white-space:nowrap;max-width:90vw;text-align:center}
.app-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.app-toast-success{background:#22c55e;color:#fff}
.app-toast-error{background:#ef4444;color:#fff}

@media(max-width:768px){
  .user-bar{gap:8px}
  .ub-name{display:none}
  .bless-amounts{grid-template-columns:repeat(3,1fr)}
  .pkg-card{flex-direction:column;text-align:center;gap:8px}
}