:root{
  --app-max: 1240px;
  --tb-side-w: 160px;
  --tb-user-w: 32px;
}

.topbar .wrap,
main .wrap{
  max-width: var(--app-max);
}

.topbar .nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: clamp(12px, 1.6vw, 18px);
}

.topbar .brand{
  justify-self:start;
  min-width:0;
}

.topbar .menu{
  min-width:0;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:3px;
}

.topbar .menu > a{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  text-align:center;
  padding:7px 6px;
  font-size:12px;
  line-height:1.08;
  letter-spacing:0;
  font-weight:700;
}

.topbar .menu > a.active-link{
  font-weight:600;
}

.topbar .actions{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: clamp(8px, 1vw, 10px);
  flex-wrap:nowrap;
  white-space:nowrap;
  min-width:max-content;
}

.topbar .actions .btn,
.topbar .actions .mobile-toggle,
.topbar .actions .user-slot{
  flex:0 0 auto;
}

@media (max-width: 1180px){
  .topbar .nav{
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(10px, 2vw, 14px);
  }

  .topbar .brand{
    min-width:0;
  }

  .topbar .brand span{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .topbar .menu{
    display:none !important;
  }

  .topbar .actions{
    justify-self:end;
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: clamp(8px, 1.8vw, 10px);
    flex-wrap:nowrap;
    white-space:nowrap;
    min-width:max-content;
  }

    .topbar .actions{
    flex-direction: row !important;
  }

  .topbar .actions > #mobileToggle,
  .topbar .actions > .mobile-toggle{
    display:inline-flex;
    order:1 !important;
    margin-left:0;
    flex:0 0 auto;
  }

  .topbar .actions > #tychefy-clerk-user,
  .topbar .actions > .user-slot,
  .topbar .actions > .btn.primary{
    order:2 !important;
    min-width:auto;
    flex:0 0 auto;
  }

  .topbar .actions .btn.primary{
    padding-inline:14px;
  }
}

@media (max-width: 640px){
  .topbar .nav{
    column-gap:10px;
  }

  .topbar .actions{
    gap:8px;
  }

  .topbar .actions .btn.primary{
    padding-inline:12px;
    font-size:14px;
  }
}

@media (max-width: 420px){
  .topbar .actions .btn.primary{
    min-height:40px;
    padding-inline:11px;
  }
}

.topbar .user-slot{
  width:var(--tb-user-w);
  min-width:var(--tb-user-w);
  height:var(--tb-user-w);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.topbar .user-slot.clerk-pending{
  width:var(--tb-user-w);
  min-width:var(--tb-user-w);
  height:var(--tb-user-w);
}

.topbar .user-slot.clerk-pending .user-fallback,
.topbar .user-slot.clerk-ready .user-fallback{
  display:none !important;
}

.topbar .user-slot.clerk-fallback-visible .user-fallback{
  width:var(--tb-user-w);
  height:var(--tb-user-w);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid transparent;
  background:transparent;
  box-shadow:none;
  opacity:0;
}

.topbar .user-slot.clerk-fallback-visible .user-fallback:hover{
  background:transparent;
}

.topbar .user-slot.clerk-fallback-visible .user-fallback-icon{
  display:none;
}

.topbar .user-slot.clerk-fallback-visible .user-dot{
  display:none;
}

.topbar .user-slot [class*="cl-userButtonTrigger"],
.topbar .user-slot [class*="cl-avatarBox"]{
  width:var(--tb-user-w) !important;
  height:var(--tb-user-w) !important;
}

#mobileDrawer .mobile-panel{
  width:min(92vw, 360px);
  max-width:360px;
  background: rgba(31,17,64,.96);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

#mobileDrawer .mobile-panel a:hover{
  background: rgba(233,238,249,.08);
}

#mobileDrawer .mobile-accordion{
  display:grid;
  gap:8px;
}

#mobileDrawer .mobile-accordion__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(233,238,249,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  color:rgba(255,255,255,.94);
  font:inherit;
  font-weight:760;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#mobileDrawer .mobile-accordion__toggle:hover,
#mobileDrawer .mobile-accordion__toggle:focus-visible{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-color:rgba(157,115,255,.26);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

#mobileDrawer .mobile-accordion__icon{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(233,238,249,.10);
  background:rgba(255,255,255,.045);
  font-size:1.1rem;
  line-height:1;
  font-weight:900;
}

#mobileDrawer .mobile-accordion.open .mobile-accordion__toggle{
  background:linear-gradient(135deg, rgba(137,83,230,.24), rgba(89,53,186,.22));
  border-color:rgba(157,115,255,.36);
  box-shadow:0 14px 30px rgba(17,10,38,.28);
}

#mobileDrawer .mobile-accordion__panel{
  display:none;
  padding-left:10px;
  gap:8px;
}

#mobileDrawer .mobile-accordion.open .mobile-accordion__panel{
  display:grid;
}