:root{
  --drawer-w:280px;
}

html,body{
  height:auto!important;
  min-height:100%;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

.app{
  display:block!important;
  min-height:100vh!important;
  height:auto!important;
  padding:14px!important;
}

.main{
  margin-left:0!important;
  min-height:calc(100vh - 28px)!important;
}

.sidebar{
  position:fixed!important;
  left:14px!important;
  top:14px!important;
  bottom:14px!important;
  width:var(--drawer-w)!important;
  max-height:calc(100vh - 28px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:1400!important;
  border-radius:24px!important;
  box-shadow:0 20px 55px rgba(15,23,42,.28)!important;
  transform:translateX(calc(-1 * var(--drawer-w) - 34px));
  opacity:0;
  pointer-events:none;
  transition:transform .24s ease, opacity .24s ease;
}

.app.drawer-open .sidebar{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

.drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:1300;
  background:rgba(15,23,42,.20);
  backdrop-filter:blur(1px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.app.drawer-open ~ .drawer-backdrop,
.drawer-backdrop.drawer-open{
  opacity:1;
  pointer-events:auto;
}

.drawer-tab{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:1500;
  width:34px;
  height:86px;
  border:0;
  border-radius:0 18px 18px 0;
  background:linear-gradient(135deg,#174f82,#0f3659);
  color:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,.28);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:left .24s ease, background .18s ease, box-shadow .18s ease;
}

.drawer-tab:hover{
  background:linear-gradient(135deg,#216ba5,#174f82);
  box-shadow:0 14px 34px rgba(15,23,42,.34);
}

.drawer-tab span{
  font-size:24px;
  font-weight:900;
  line-height:1;
  transition:transform .24s ease;
  transform:rotate(180deg);
}

.app.drawer-open ~ .drawer-tab,
.drawer-tab.drawer-open{
  left:294px;
}

.drawer-tab.drawer-open span{
  transform:rotate(0deg);
}

@media(max-width:760px){
  :root{--drawer-w:min(86vw,280px)}

  .app{padding:10px!important}

  .sidebar{
    left:0!important;
    top:0!important;
    bottom:0!important;
    max-height:100vh!important;
    border-radius:0 24px 24px 0!important;
  }

  .drawer-tab.drawer-open{
    left:var(--drawer-w);
  }
}

.sidebar{
  background:linear-gradient(180deg,#173f67 0%,#164a78 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

.sidebar::-webkit-scrollbar{
  width:8px;
}

.sidebar::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08);
  border-radius:999px;
}

.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.45);
  border-radius:999px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.65);
}

.sidebar-brand{
  padding:16px 16px 12px !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}

.sidebar-brand h1{
  margin:0 !important;
  font-size:20px !important;
  letter-spacing:.02em !important;
}

.sidebar-brand p{
  margin:5px 0 0 !important;
  font-size:12px !important;
  color:rgba(255,255,255,.82) !important;
}

.menu{
  padding:12px !important;
  display:grid !important;
  gap:12px !important;
}

.menu-group{
  display:grid !important;
  gap:6px !important;
}

.menu-label{
  padding:6px 6px 4px !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.68) !important;
}

.menu-btn{
  width:100% !important;
  min-height:36px !important;
  padding:9px 10px !important;
  border-radius:11px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  background:rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-align:left !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background .16s ease, transform .16s ease, border-color .16s ease !important;
}

.menu-btn:hover{
  background:rgba(255,255,255,.15) !important;
  border-color:rgba(255,255,255,.28) !important;
  transform:translateX(2px) !important;
}

.menu-btn.active{
  background:#ffffff !important;
  color:#174a7c !important;
  border-color:#ffffff !important;
  box-shadow:0 8px 18px rgba(0,0,0,.16) !important;
}

#userPill60{
  margin:4px 12px 12px !important;
  padding:10px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
}

#userPill60 strong{
  display:block !important;
  font-size:11px !important;
  margin-bottom:8px !important;
  color:#fff !important;
}

#logout60{
  width:100% !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  padding:8px 10px !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}

#logout60:hover{
  background:rgba(255,255,255,.22) !important;
}

@media(max-width:760px){
  .menu{
    padding:10px !important;
    gap:10px !important;
  }

  .menu-btn{
    min-height:38px !important;
  }
}