*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#05070d;
  color:#fff;
  display:flex;
  min-height:100vh;
  overflow:hidden;
}

.sidebar{
  width:280px;
  height:100vh;
  background:#080b13;
  border-right:1px solid #1c2435;
  display:flex;
  flex-direction:column;
}

.logo-box{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #1c2435;
}

.logo-box img{
  width:190px;
  border-radius:4px;
}

.menu{
  display:flex;
  flex-direction:column;
  padding-top:10px;
}

.menu a{
  padding:17px 24px;
  color:#cfd6f6;
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  border-left:3px solid transparent;
  cursor:pointer;
}

.menu a:hover,
.menu .active{
  background:#121827;
  color:#fff;
  border-left-color:#ffd400;
}

.menu span{
  font-size:10px;
  background:#151d33;
  border:1px solid #303a5d;
  padding:3px 7px;
  border-radius:6px;
  margin-left:6px;
  color:#dce3ff;
}

.menu small{
  font-size:10px;
  opacity:.5;
  margin-left:6px;
}

.disabled{
  opacity:.45;
}

.promo{
  margin:20px 14px;
  padding:18px;
  border-radius:14px;
  background:linear-gradient(135deg,#191104,#5b3d05);
  border:1px solid #b48210;
  box-shadow:0 0 18px rgba(255,212,0,.12);
}

.promo strong{
  font-size:15px;
}

.promo p{
  color:#ffd400;
  font-size:13px;
  margin-top:5px;
  font-weight:800;
}

.support{
  margin-top:auto;
  padding:20px;
  border-top:1px solid #1c2435;
}

.support p{
  color:#8d96b8;
  font-size:13px;
  margin-top:5px;
}

.main{
  width:calc(100% - 280px);
  height:100vh;
  display:flex;
  flex-direction:column;
}

.header{
  height:80px;
  background:#070910;
  border-bottom:1px solid #1c2435;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 28px;
}

.login{
  background:#14a858;
  color:#fff;
  border:0;
  padding:13px 24px;
  border-radius:9px;
  font-weight:900;
  cursor:pointer;
}

.stats{
  height:55px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 24px;
  border-bottom:1px solid #1c2435;
  color:#aeb7e8;
  font-size:14px;
}

.stats strong{
  color:#eef1ff;
}

.down{
  color:#ff4b5c;
  margin-left:6px;
}

.btc-price{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:#111525;
  border:1px solid #262c46;
  padding:8px 14px;
  border-radius:12px;
}

.btc-price span{
  background:#ff9d17;
  color:#fff;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight:900;
}

.btc-price b{
  color:#ff4b5c;
}

.live{
  color:#19e676;
  background:#082515;
  border:1px solid #145a30;
  padding:8px 15px;
  border-radius:20px;
  font-size:13px;
  font-weight:900;
}

.filters{
  height:70px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
  border-bottom:1px solid #1c2435;
}

.filters div{
  display:flex;
  align-items:center;
  gap:0;
}

.filters small{
  margin-right:10px;
  color:#9ea8d8;
  font-weight:900;
  letter-spacing:.7px;
}

.filters button{
  background:#111525;
  color:#cfd6f6;
  border:1px solid #262c46;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
}

.filters button:first-of-type{
  border-radius:9px 0 0 9px;
}

.filters button:last-of-type{
  border-radius:0 9px 9px 0;
}

.filters .selected{
  color:#fff;
  border-bottom:2px solid #10c76b;
}

.bitunix{
  margin-left:auto;
  background:#111525;
  color:#fff;
  border:1px solid #262c46;
  padding:13px 24px;
  border-radius:10px;
  font-weight:900;
  text-decoration:none;
}

.heatmap{
  padding:22px 28px;
  flex:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:115px;
  gap:4px;
  background:#05070d;
}

.coin{
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  text-shadow:0 2px 7px rgba(0,0,0,.35);
  transition:.18s ease;
  border:1px solid rgba(255,255,255,.06);
}

.coin:hover{
  transform:scale(1.015);
  z-index:5;
  box-shadow:0 0 25px rgba(255,255,255,.08);
}

.coin h2{
  font-size:24px;
  line-height:1;
}

.coin p{
  font-size:18px;
  font-weight:900;
  margin-top:7px;
}

.coin span{
  font-size:13px;
  opacity:.85;
  margin-top:5px;
}

.icon{
  font-size:30px;
  margin-bottom:10px;
}

.green{
  background:linear-gradient(135deg,#45a96f,#63c18c);
}

.red{
  background:linear-gradient(135deg,#b84e52,#cc696a);
}

.btc{
  grid-column:span 4;
  grid-row:span 4;
}

.btc h2{
  font-size:42px;
}

.btc p{
  font-size:34px;
}

.eth{
  grid-column:span 2;
  grid-row:span 4;
}

.eth h2{
  font-size:34px;
}

.xrp{
  grid-column:span 2;
  grid-row:span 2;
}

.bnb{
  grid-column:span 2;
  grid-row:span 2;
}

.sol{
  grid-column:span 2;
  grid-row:span 2;
}

.coin:not(.btc):not(.eth):not(.xrp):not(.bnb):not(.sol){
  grid-column:span 1;
  grid-row:span 1;
}

@media(max-width:1000px){
  body{
    overflow:auto;
  }

  .sidebar{
    width:90px;
  }

  .logo-box img{
    width:65px;
  }

  .menu a{
    font-size:0;
    padding:18px;
  }

  .promo,
  .support{
    display:none;
  }

  .main{
    width:calc(100% - 90px);
  }

  .stats,
  .filters{
    height:auto;
    flex-wrap:wrap;
    padding:15px;
  }

  .heatmap{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:110px;
    height:auto;
  }

  .btc{
    grid-column:span 4;
    grid-row:span 2;
  }

  .eth{
    grid-column:span 2;
    grid-row:span 2;
  }

  .coin,
  .coin:not(.btc):not(.eth):not(.xrp):not(.bnb):not(.sol){
    grid-column:span 2;
  }
}