/* ================================================= */
/* RESET */
/* ================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:"Rajdhani",sans-serif;

background:
radial-gradient(circle at 20% 20%,#1e3a8a,transparent),
radial-gradient(circle at 80% 30%,#0ea5e9,transparent),
#020617;

color:white;

min-height:100vh;

display:flex;

justify-content:center;

padding:25px;

}

/* ================================================= */
/* WRAPPER */
/* ================================================= */

.profile-wrapper{

width:100%;
max-width:520px;

}

/* ================================================= */
/* HEADER */
/* ================================================= */

.profile-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.profile-id{

font-size:18px;

font-weight:600;

opacity:0.9;

}

.profile-balance{

display:flex;

align-items:center;

gap:6px;

background:rgba(255,255,255,0.06);

padding:6px 12px;

border-radius:20px;

backdrop-filter:blur(10px);

}

.profile-balance img{

width:20px;

}

/* ================================================= */
/* PROFILE CARD */
/* ================================================= */

.profile-card{

background:linear-gradient(
135deg,
rgba(59,130,246,0.25),
rgba(6,182,212,0.25)
);

backdrop-filter:blur(20px);

border-radius:22px;

padding:30px;

text-align:center;

margin-bottom:20px;

border:1px solid rgba(255,255,255,0.1);

box-shadow:
0 10px 40px rgba(0,0,0,0.6);

}

/* ================================================= */
/* AVATAR */
/* ================================================= */

.avatar-box{

position:relative;

width:110px;

height:110px;

margin:auto;

margin-bottom:12px;

}

.avatar-box img{

width:100%;
height:100%;

border-radius:50%;

object-fit:cover;

border:4px solid rgba(255,255,255,0.15);

}

.avatar-edit{

position:absolute;

bottom:0;

right:0;

width:32px;

height:32px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#3b82f6;

cursor:pointer;

}

/* ================================================= */
/* NAME */
/* ================================================= */

#user_name{

font-family:"Orbitron",sans-serif;

font-size:22px;

margin-bottom:5px;

}

#user_email{

opacity:0.7;

font-size:14px;

margin-bottom:10px;

}

/* ================================================= */
/* PREMIUM BADGE */
/* ================================================= */

.premium-badge{

display:inline-flex;

align-items:center;

gap:6px;

background:linear-gradient(135deg,#facc15,#eab308);

padding:5px 14px;

border-radius:20px;

font-size:13px;

font-weight:600;

color:black;

}

/* ================================================= */
/* INFO CARD */
/* ================================================= */

.info-card{

background:rgba(255,255,255,0.05);

padding:20px;

border-radius:18px;

margin-bottom:20px;

}

.info-card h3{

margin-bottom:15px;

font-size:18px;

}

/* ================================================= */
/* INPUT */
/* ================================================= */

.input-box{

display:flex;

align-items:center;

background:rgba(255,255,255,0.07);

padding:10px 12px;

border-radius:10px;

margin-bottom:10px;

gap:10px;

}

.input-box i{

opacity:0.7;

}

.input-box input{

background:none;

border:none;

outline:none;

color:white;

width:100%;

font-size:14px;

}

/* ================================================= */
/* SAVE BUTTON */
/* ================================================= */

.save-btn{

margin-top:5px;

width:100%;

border:none;

padding:10px;

border-radius:10px;

font-weight:600;

background:linear-gradient(135deg,#3b82f6,#06b6d4);

color:white;

cursor:pointer;

}

/* ================================================= */
/* ACTION GRID */
/* ================================================= */

.action-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

margin-bottom:20px;

}

.action-item{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

background:rgba(255,255,255,0.05);

padding:15px;

border-radius:14px;

text-decoration:none;

color:white;

font-size:14px;

transition:0.2s;

}

.action-item i{

font-size:18px;

margin-bottom:6px;

}

.action-item:hover{

background:rgba(255,255,255,0.1);

transform:translateY(-2px);

}

/* ================================================= */
/* STATS */
/* ================================================= */

.stats{

display:flex;

justify-content:space-between;

margin-bottom:20px;

}

.stat{

background:rgba(255,255,255,0.05);

padding:15px;

border-radius:14px;

width:48%;

text-align:center;

}

.stat span{

display:block;

opacity:0.7;

margin-bottom:5px;

}

/* ================================================= */
/* LOGOUT */
/* ================================================= */

.logout-btn{

width:100%;

border:none;

padding:12px;

border-radius:14px;

font-weight:600;

background:linear-gradient(135deg,#ef4444,#dc2626);

color:white;

cursor:pointer;

}

/* ================================================= */
/* MOBILE */
/* ================================================= */

@media(max-width:480px){

.profile-wrapper{

max-width:100%;

}

}
.btn-back {
  
  display: inline-block;
  
  margin-bottom: 15px;
  
  color: #60a5fa;
  
  font-weight: 600;
  
  text-decoration: none;
  
  transition: 0.2s;
  
}

.btn-back:hover {
  
  color: #93c5fd;
  
  transform: translateX(-3px);
  
}
.notifications {
  margin-top: 20px;
}

.notif-card {
  background: #0f172a;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.notif-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.notif-content {
  padding: 12px;
  color: white;
}

.notif-content h4 {
  margin: 0;
  font-size: 16px;
}

.notif-content p {
  font-size: 14px;
  opacity: 0.8;
  margin: 5px 0;
}

.notif-btn {
  display: inline-block;
  background: #3b82f6;
  padding: 6px 12px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 13px;
}