/* JOO LAB CHARTGAME DESKTOP HEADER REWORK */
html,body{
  overflow-x:hidden !important;
}

.top{
  position:sticky !important;
  top:0 !important;
  z-index:120 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-height:56px !important;
  height:56px !important;
  padding:0 14px !important;
  gap:16px !important;
  overflow:visible !important;
  background:rgba(4,10,19,.90) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

.top .brand{
  flex:0 0 auto !important;
  margin:0 !important;
  white-space:nowrap !important;
  font-size:15px !important;
  line-height:1 !important;
}

.joolab-header-actions{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:0 !important;
  max-width:calc(100% - 170px) !important;
}

.top .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  gap:4px !important;
  overflow:visible !important;
}

.top .nav > a{
  flex:0 0 auto !important;
  min-width:auto !important;
  margin:0 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.top .joolab-language-switch{
  position:static !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  width:auto !important;
  min-width:92px !important;
  max-width:none !important;
  height:34px !important;
  margin:0 !important;
  padding:3px !important;
  gap:3px !important;
  border-radius:999px !important;
  background:rgba(4,12,24,.92) !important;
  border:1px solid rgba(160,190,230,.22) !important;
  box-shadow:none !important;
}

.top .joolab-language-switch button{
  flex:0 0 auto !important;
  min-width:40px !important;
  width:auto !important;
  height:26px !important;
  margin:0 !important;
  padding:0 9px !important;
  border-radius:999px !important;
  font-size:10px !important;
  line-height:26px !important;
  white-space:nowrap !important;
}

.layout{
  width:100% !important;
  max-width:1400px !important;
  margin:0 auto !important;
  padding:8px 12px 18px !important;
  gap:8px !important;
}

.stats{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  width:100% !important;
  gap:8px !important;
  margin:0 0 8px !important;
}

.stat{
  min-width:0 !important;
  min-height:64px !important;
  padding:10px 12px !important;
}

.stat em{
  font-size:10px !important;
  margin-bottom:6px !important;
}

.stat strong{
  font-size:18px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.chartPanel,
.side,
.log{
  min-width:0 !important;
}

@media (min-width:1101px){
  .layout{
    grid-template-columns:minmax(0,1fr) 340px !important;
  }

  .side{
    width:340px !important;
    max-width:340px !important;
  }
}

/* tablet */
@media (max-width:1100px){
  .top{
    height:auto !important;
    min-height:76px !important;
    padding:7px 10px !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    grid-template-rows:auto auto !important;
    row-gap:6px !important;
  }

  .top .brand{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .joolab-header-actions{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  .top .nav{
    flex:1 1 auto !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }

  .top .nav::-webkit-scrollbar{
    display:none !important;
  }

  .top .joolab-language-switch{
    flex:0 0 auto !important;
  }

  .layout{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    max-width:100% !important;
    padding:6px !important;
  }

  .stats{
    order:0 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .chartPanel{
    order:1 !important;
    width:100% !important;
  }

  .side{
    order:2 !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
  }

  .log{
    order:3 !important;
    width:100% !important;
  }
}

/* mobile */
@media (max-width:720px){
  .top{
    min-height:72px !important;
    padding:6px !important;
  }

  .top .brand{
    font-size:13px !important;
  }

  .joolab-header-actions{
    gap:5px !important;
  }

  .top .nav{
    gap:3px !important;
  }

  .top .nav > a{
    padding:6px 8px !important;
    font-size:10px !important;
  }

  .top .joolab-language-switch{
    min-width:82px !important;
    height:30px !important;
  }

  .top .joolab-language-switch button{
    min-width:35px !important;
    height:24px !important;
    line-height:24px !important;
    padding:0 7px !important;
    font-size:9px !important;
  }

  .stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .stat{
    min-height:50px !important;
    padding:7px 8px !important;
  }

  .stat em{
    font-size:8px !important;
    margin-bottom:4px !important;
  }

  .stat strong{
    font-size:13px !important;
  }
}