body{
  margin:0;
  padding:0;
  background:#07111F;
  font-family:Arial,sans-serif;
  color:white;
  overflow-x:hidden;
}



.header{
  position: fixed;
  top: 0;
  height: 100px;
}



main{
  padding-top: 120px;
}




.profile-container{
  width: 100%;
  max-width: 430px;
  margin: auto;
  padding: 150px 16px 110px;
  box-sizing: border-box;
}


/* =========================
   TOP CARD
========================= */

.profile-top-card{

  position:fixed;

  top:0;

  left:50%;

  transform:translateX(-50%);

  width:100%;

  max-width:480px;

  z-index:1000;

  background:#0F172A;

  padding:20px 16px;

  box-sizing:border-box;

  border-bottom:
  1px solid rgba(255,255,255,.06);

}


.profile-left{
  display:flex;
  align-items:center;
  gap:16px;
}

.profile-avatar{
  margin-top: 2px;
  width:65px;
  height:65px;
  border-radius:28px;
  background:linear-gradient(
    135deg,
    #00D492,
    #00A884
  );
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:32px;
  font-weight:900;
}

.profile-user-info h2{
  margin:top 3px;
  font-size:22px;
}

.profile-user-info p{
  margin-top:6px;
  opacity:.7;
  font-size:13px;
}

.verified-badge{
  display:inline-block;
  margin-top:10px;
  background:rgba(0,212,146,.15);
  color:#00D492;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

/* =========================
   WALLET SUMMARY
========================= */

.wallet-summary-card{
  background:linear-gradient(
    135deg,
    #00A884,
    #075E54
  );
  border-radius:30px;
  padding:24px;
  margin-bottom:20px;
}

.wallet-summary-item{
  margin-bottom:18px;
}

.wallet-summary-item:last-child{
  margin-bottom:0;
}

.wallet-summary-item span{
  opacity:.8;
  font-size:13px;
}

.wallet-summary-item h2{
  margin-top:8px;
  font-size:34px;
}

.wallet-summary-item h3{
  margin-top:6px;
  font-size:22px;
}

/* =========================
   SECTION
========================= */

.section-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 26px;
  padding: 20px;
  margin-bottom: 12px;
  backdrop-filter: blur(16px);
}

.section-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:12px;
}

/* =========================
   SETTINGS
========================= */

.settings-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.setting-item{
  background:#111827;
  border-radius:18px;
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  transition:.2s;
}

.setting-item:active{
  transform:scale(.97);
}

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

#logoutBtn{
  width:100%;
  height:58px;
  border:none;
  border-radius:22px;
  background:#FF5A5A;
  color:white;
  font-size:16px;
  font-weight:800;
  margin-top:8px;
  cursor:pointer;
}

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

@media (max-width:380px){

  .profile-container{
    padding:180px 16px 110px;
  }

  .profile-avatar{
    width:68px;
    height:68px;
    font-size:28px;
  }

  .wallet-summary-item h2{
    font-size:28px;
  }

}







.install-btn{

  width: 100%;

  border: none;

  padding: 16px;

  border-radius: 14px;

  margin-top: 20px;

  margin-bottom: 14px;

  background: #00d492;

  color: #000;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

}






.back-arrow{

  position:fixed;

  top:20px;
  left:20px;

  width:35px;
  height:35px;

  display:flex;
  align-items:center;
  justify-content:center;

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

  color:#000000;

  border-radius:50%;

  font-size:16px;

  font-weight:400;

  cursor:pointer;

  z-index:1000;

  box-shadow:
    0 4px 15px
    rgba(0, 0, 0, 0.35);

}






/* =========================
   DANGER ZONE
========================= */

.danger-zone{

  margin-top:30px;

  padding:18px;

  border-radius:18px;

  background:
  rgba(220,38,38,.08);

  border:
  1px solid
  rgba(220,38,38,.25);

}

.danger-title{

  color:#ef4444;

  font-size:16px;

  font-weight:700;

  margin-bottom:8px;

}

.danger-text{

  color:#cbd5e1;

  font-size:13px;

  line-height:1.5;

  margin-bottom:15px;

}

.delete-account-btn{

  width:100%;

  height:50px;

  border:none;

  border-radius:14px;

  background:#dc2626;

  color:#fff;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  transition:.2s;

}

.delete-account-btn:hover{

  opacity:.9;

}

.delete-account-btn:active{

  transform:scale(.98);

}






/* =========================
   DELETE ACCOUNT MODAL
========================= */

.delete-modal-overlay{

  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,.75);

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  z-index:99999;

}

.delete-modal{

  width:100%;

  max-width:420px;

  background:#111827;

  border-radius:24px;

  padding:24px;

  text-align:center;

  color:white;

}

.delete-icon{

  font-size:48px;

  margin-bottom:12px;

}

.delete-modal h2{

  margin:0;

  margin-bottom:10px;

}

.delete-modal p{

  color:#cbd5e1;

  margin-bottom:18px;

}

.delete-modal ul{

  text-align:left;

  color:#cbd5e1;

  padding-left:18px;

  margin-bottom:24px;

}

.delete-modal li{

  margin-bottom:8px;

}

.delete-actions{

  display:flex;

  gap:10px;

}

.cancel-delete-btn{

  flex:1;

  height:50px;

  border:none;

  border-radius:14px;

  background:#1f2937;

  color:white;

  font-weight:700;

  cursor:pointer;

}

.confirm-delete-btn{

  flex:1;

  height:50px;

  border:none;

  border-radius:14px;

  background:#dc2626;

  color:white;

  font-weight:700;

  cursor:pointer;

}