*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#f5f6f8;
}
.app{
  max-width:390px;
  margin:auto;
  background:#fff;
  min-height:100vh;
}
.topbar{
  display:flex;
  justify-content:space-between;
  padding:15px;
  font-weight:bold;
}
.assets{
  padding:15px;
}
.assets h1{margin:6px 0}
.sym{font-size:14px;color:#999}
#walletAddress{font-size:12px;color:#555}
button{
  padding:10px;
  border:none;
  border-radius:8px;
  background:#ffc107;
  font-weight:bold;
  cursor:pointer;
}
.promo{
  margin:15px;
  padding:15px;
  background:linear-gradient(135deg,#1e90ff,#3cb371);
  color:#fff;
  border-radius:12px;
}
.quick{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  padding:10px;
}
.q span{display:block;font-size:12px}
.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:15px;
}
.action{
  padding:15px;
  border-radius:12px;
  cursor:pointer;
}
.buy{background:#fff3cd}
.sell{background:#d4edda}
.status{text-align:center;font-size:13px;color:#666}
.bottom{
  position:fixed;
  bottom:0;
  width:390px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid #ddd;
  background:#fff;
}
.bottom span{
  padding:10px;
  text-align:center;
  font-size:12px;
}
.center{
  background:#ffc107;
  border-radius:50%;
  margin-top:-18px;
}
.active{color:#007bff}
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
}
.modalBox{
  background:#fff;
  padding:20px;
  border-radius:12px;
  width:80%;
  margin:25% auto;
}
.modal input{
  width:100%;
  padding:10px;
  margin:10px 0;
}
.close{background:#ccc}
.danger{background:#ff4d4d;color:#fff}