
:root{
  --lf-bg:#07090d;
  --lf-card:#0d1016;
  --lf-line:#1c212b;
  --lf-text:#f5f7fa;
  --lf-muted:#818a98;
  --lf-green:#20d98b;
  --lf-max:1160px;
}

html,body{
  background:var(--lf-bg)!important;
  color:var(--lf-text);
}

body:before{
  display:none!important;
}

.lf-shell-header{
  width:100%;
  min-height:72px;
  border-bottom:1px solid var(--lf-line);
  background:var(--lf-bg);
  display:flex;
  align-items:center;
}

.lf-shell-inner{
  width:min(var(--lf-max),calc(100% - 40px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:28px;
}

.lf-shell-logo{
  color:#fff;
  text-decoration:none;
  font-size:23px;
  font-weight:900;
  letter-spacing:-1px;
  flex:0 0 auto;
}

.lf-shell-logo span{
  color:var(--lf-green);
}

.lf-shell-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.lf-shell-nav a{
  color:#aeb5c0;
  text-decoration:none;
  padding:9px 12px;
  border-radius:9px;
  font-size:14px;
}

.lf-shell-nav a:hover,
.lf-shell-nav a.active{
  color:#fff;
  background:#141820;
}

.lf-shell-nav .lf-shell-site{
  border:1px solid #252b35;
}

body > main,
body > .wrap > main,
main.wrap{
  width:min(var(--lf-max),calc(100% - 40px))!important;
  max-width:var(--lf-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.dashboard{
  max-width:var(--lf-max)!important;
}

body > header:not(.lf-shell-header),
body > .wrap > header:not(.lf-shell-header){
  display:none!important;
}

@media(max-width:700px){
  .lf-shell-header{
    min-height:auto;
  }

  .lf-shell-inner{
    width:min(100% - 24px,var(--lf-max));
    padding:12px 0;
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .lf-shell-nav{
    width:100%;
    margin-left:0;
    overflow-x:auto;
    padding-bottom:2px;
  }

  .lf-shell-nav a{
    white-space:nowrap;
  }

  body > main,
  body > .wrap > main,
  main.wrap{
    width:calc(100% - 24px)!important;
  }
}


/* LFCON_MOBILE_HEADER_V4 */

@media(max-width:700px){

  .lf-shell-header{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }

  .lf-shell-inner{
    width:calc(100% - 24px)!important;
    max-width:1160px!important;
    margin:0 auto!important;
    padding:12px 0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }

  .lf-shell-logo{
    font-size:20px!important;
  }

  .lf-shell-nav{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;

    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:6px!important;

    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }

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

  .lf-shell-nav a{
    flex:0 0 auto!important;
    padding:8px 10px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

}
