*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:#070707;
font-family:Poppins,sans-serif;
color:#fff;

}

.app{

max-width:430px;
margin:auto;
min-height:100vh;

}

.top-header{

padding:25px 18px;

display:flex;

justify-content:space-between;

align-items:center;

}

.top-btn{

width:54px;

height:54px;

background:#101010;

border:1px solid rgba(255,196,0,.4);

border-radius:16px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:#FFD86B;

font-size:21px;

box-shadow:
0 0 12px rgba(255,180,0,.25);

cursor:pointer;

}

.top-btn span{

margin-top:5px;

font-size:10px;

letter-spacing:1px;

color:#fff;

}

.logo-box{

width:180px;

height:52px;

background:linear-gradient(90deg,#ffc107,#ffdb58);

border-radius:40px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.logo-box img{

height:42px;

}
.actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:18px;
}

.action-box{
  background:rgba(10,10,10,0.9);
  border:1px solid rgba(255, 193, 7, 0.25);
  border-radius:18px;
  height:80px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  color:#FFD700;

  box-shadow:0 0 18px rgba(255, 193, 7, 0.12);
}

.action-box i{
  font-size:20px;
  margin-bottom:6px;
}

.action-box span{
  font-size:11px;
  color:#fff;
}
.plans{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.plan{
  padding:18px;
  border-radius:20px;
  position:relative;

  background:rgba(15,15,15,0.95);
  border:1px solid rgba(255,215,0,0.2);

  box-shadow:0 0 25px rgba(0,0,0,0.6);
}

.plan h3{
  color:#FFD700;
  font-size:14px;
  letter-spacing:1px;
}

.plan p{
  font-size:13px;
  color:#fff;
  opacity:0.8;
}

.plan.gold{
  border-color:rgba(255,215,0,0.4);
}

.plan.silver{
  border-color:rgba(192,192,192,0.3);
}
.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);

  width:100%;
  max-width:430px;

  height:70px;

  background:rgba(10,10,10,0.95);
  border-top:1px solid rgba(255,215,0,0.2);

  display:flex;
  justify-content:space-around;
  align-items:center;

  color:#FFD700;
  font-size:18px;

  box-shadow:0 -5px 20px rgba(0,0,0,0.6);
}