.wrapper{
  max-width:1400px;
  margin:80px auto;
  display:flex;
  gap:20px;
  padding:0 15px;
  align-items:flex-start;
}

.burgeraccount{
  display:none;
  position:fixed;
  top:150px;
  left:20px;
  width:45px;height:45px;
  background:#00e0ff;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:20;
}
.burgeraccount span{width:20px;height:2px;background:#000;margin:3px 0;display:block}
.burgeraccount.hidden{display:none}

.sidebaraccount{
  width:260px;
  background:#071c2f;
  border-radius:16px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:15px;
  position:relative;
}

.close-btn{
  display:none;
  position:absolute;
  top:15px;
  right:15px;
  font-size:22px;
  cursor:pointer;
}

.username{
  text-align:center;
  font-weight:bold;
  font-size:18px;
}

.user-img{
  width:100%;
  height:140px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(0,224,255,0.15), transparent),
  url('../images/home/useracc.png');

  background-position:center;
  opacity:0.5;   
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.actions{
  display:flex;
  gap:10px;
}

.action-btn{
  flex:1;
  padding:10px;
  border-radius:10px;
  background:#00e0ff;
  color:#000;
  text-align:center;
  cursor:pointer;
  font-weight:bold;
  transition:.3s;
}

.action-btn:hover{background:#00bcd4}

.navaccount{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.navaccount a{
  text-decoration:none;
  color:inherit;
}

.nav-item{
  padding:14px 16px;
  border-radius:12px;
  background:#0b2239;
  cursor:pointer;
  transition:.3s;
  position:relative;
  overflow:hidden;
  width:100%;
  text-align:left;
}

.nav-item span{
  position:relative;
  z-index:2;
  font-weight: 600;
}

.nav-item::before{
  content:"";
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,224,255,0.35),transparent);
  transition:.5s;
}

.nav-item:hover::before{left:100%}

.nav-item.active{
  background:#00e0ff;
  color:#000;
}

.main{flex:1}

.cardaccount{
  display:none;
  background:#0b2239;
  padding:30px;
  border-radius:16px;
  animation:fade .4s ease;
}

.cardaccount.active{display:block}

@keyframes fade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.info-panel{
  width:260px;
  background:rgba(11,34,57,0.6);
  border-radius:16px;
  padding:20px;
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,224,255,0.2);
  box-shadow:0 0 25px rgba(0,224,255,0.1);
  animation:fade .4s ease;
}

.info-panel h3{
  margin-bottom:15px;
}

.info-panel p{
  margin:10px 0;
  opacity:.8;
}

.info-panel b{
  color:#00e0ff;
}

@media(max-width:900px){
  .wrapper{flex-direction:column}

  .burgeraccount{display:flex}

  .sidebaraccount{
    position:fixed;
    top:0;
    left:-270px;
    height:100%;
    z-index:15;
    transition:.3s;
  }

  .sidebaraccount.active{left:0;margin:110px auto;}

  .sidebaraccount.active .close-btn{display:block}

  .info-panel{
    display:none;
  }

  .cardaccount.active{display:block;margin:30px auto;}
}
.page-title{
  margin-bottom:20px;
  padding:20px;
  border-radius:14px;
  background:#0f2a44;
  border:1px solid rgba(0,224,255,0.3);
}

.account-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:20px;
}

.acc-box{
  background:linear-gradient(145deg,#0b2239,#0e2d4a);
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(0,224,255,0.15);
  transition:.3s;
  position:relative;
  overflow:hidden;
}

.acc-box:hover{
  transform:translateY(-3px);
  box-shadow:0 0 20px rgba(0,224,255,0.2);
}

.acc-box::before{
  content:"";
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,224,255,0.25),transparent);
  transition:.6s;
}
.acc-box:hover::before{left:100%}

.acc-box p{
  opacity:.6;
  margin-bottom:8px;
}

.acc-box h1{
  font-size:28px;
}

.acc-box h2{
  font-size:22px;
}

.acc-box.big{
  grid-column:span 2;
}

.greenaccount{color:#00ffa6}
.blue{color:#00e0ff}

@media(min-width:1200px){
  .account-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .acc-box.big{
    grid-column:span 2;
  }
}

@media(max-width:1200px){
  .account-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .acc-box.big{
    grid-column:span 3;
  }
}

@media(max-width:900px){

  .wrapper{
    flex-direction:column;
    margin:80px auto;
  }

  .burgeraccount{display:flex}

  .sidebaraccount{
    position:fixed;
    top:0;
    left:-270px;
    height:100%;
    z-index:15;
    transition:.3s;
  }

  .sidebaraccount.active{
    left:0;
    margin:80px auto;
  }

  .sidebaraccount.active .close-btn{display:block}

  .main{
    width:100%;
  }

  .account-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .acc-box.big{
    grid-column:span 2;
  }

  .cardaccount{
    padding:20px;
  }

  .page-title{
    padding:15px;
    font-size:18px;
  }
}

@media(max-width:600px){

  .account-grid{
    grid-template-columns:1fr;
  }
  .sidebaraccount.active{
    left:0;
    margin:1px auto;
	z-index: 99999;
  }
  .acc-box.big{
    grid-column:span 1;
  }

  .acc-box{
    padding:16px;
  }

  .acc-box h1{
    font-size:24px;
  }

  .acc-box h2{
    font-size:18px;
  }

  .page-title{
    font-size:16px;
    text-align:center;
  }

  .actions{
    flex-direction:column;
  }

  .action-btn{
    width:100%;
  }
}
.inpts{
  transition:.25s;
}

.inpts:focus{
  background:#143552;
  border:1px solid #00e0ff;
  color:#fff;
  outline:none;
  box-shadow:0 0 10px rgba(0,224,255,0.2);
}

.inpts::selection{
  background:#00e0ff;
  color:#000;
}
.reflink{
	background: #0f2a44;width: 100%;font-size: 18px;color: #c3c3c3;line-height: 40px;border: 1px solid #0b2239;
}

#accdeposit{
	width: 25%;
    display: block;
    position: relative;
    float: left;
}