.menu-toggle,.menu-backdrop,.mobile-nav-head{display:none}

@media(max-width:960px){
 body.menu-open{overflow:hidden}
 .topbar,.role-parent .topbar{position:sticky;align-items:center;flex-direction:row;min-height:68px;padding:9px 16px}
 .topbar .brand{position:relative;z-index:74;min-width:0}
 .topbar .brand-title{overflow:hidden;max-width:240px;text-overflow:ellipsis;white-space:nowrap}
 .menu-toggle{position:relative;z-index:74;display:grid;flex:0 0 44px;width:44px;height:44px;margin-left:auto;padding:11px;border:1px solid #e3e6eb;border-radius:14px;background:#fff;box-shadow:0 5px 14px rgba(16,24,40,.07);cursor:pointer;place-content:center;gap:5px}
 .menu-toggle span{display:block;width:21px;height:2px;border-radius:9px;background:#253047;transition:transform .22s ease,opacity .18s ease,width .22s ease}
 .menu-toggle span:nth-child(2){width:15px;margin-left:auto}
 .menu-toggle.is-open span:first-child{width:21px;transform:translateY(7px) rotate(45deg)}
 .menu-toggle.is-open span:nth-child(2){opacity:0}
 .menu-toggle.is-open span:last-child{width:21px;transform:translateY(-7px) rotate(-45deg)}
 .topbar .nav,.role-parent .topbar .nav{
  position:fixed;z-index:73;top:0;right:0;bottom:0;display:flex;width:min(88vw,390px);height:100dvh;padding:0 18px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;flex-direction:column;align-items:stretch;gap:7px;background:#fff;box-shadow:-30px 0 70px rgba(13,20,34,.2);transform:translateX(105%);transition:transform .28s cubic-bezier(.22,.8,.25,1)
 }
 .topbar .nav.is-open,.role-parent .topbar .nav.is-open{transform:translateX(0)}
 .topbar .nav a,.role-parent .topbar .nav a,.role-parent .nav a:not(.logout){display:flex;flex:0 0 auto;width:100%;min-height:50px;padding:12px 14px;border:1px solid transparent;border-radius:13px;color:#344054;font-size:14px;font-weight:750}
 .topbar .nav a:hover,.topbar .nav a:focus-visible{border-color:#f0d5d8;background:#fff4f5;color:#b71824}
 .topbar .nav .logout,.role-parent .topbar .nav .logout{margin:12px 0 0;border:1px solid #f1c9cd;background:#fff7f7;color:#b71824}
 .mobile-nav-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:88px;margin:0 -18px 11px;padding:calc(18px + env(safe-area-inset-top)) 18px 16px;border-bottom:1px solid #eaecf0;background:rgba(255,255,255,.97);backdrop-filter:blur(14px)}
 .mobile-nav-head div{display:grid}
 .mobile-nav-head span{color:#bd1824;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
 .mobile-nav-head strong{margin-top:3px;color:#172033;font-size:18px;letter-spacing:-.02em}
 .mobile-nav-head button{display:grid;width:38px;height:38px;padding:0;border:0;border-radius:12px;background:#f2f4f7;color:#475467;font-size:25px;line-height:1;cursor:pointer;place-items:center}
 .menu-backdrop{position:fixed;z-index:72;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:rgba(13,19,31,.5);opacity:0;visibility:hidden;backdrop-filter:blur(4px);transition:opacity .24s ease,visibility .24s ease}
 body.menu-open .menu-backdrop{opacity:1;visibility:visible}
 .auth-journey .menu-toggle,.auth-journey .menu-backdrop{display:none}
}

@media(max-width:600px){
 .topbar,.role-parent .topbar{padding:9px 12px}
 .topbar .logo{width:40px;height:40px;border-radius:13px}
 .topbar .brand-title{max-width:190px;font-size:15px}
 .topbar .brand-sub{display:none}
 .menu-toggle{width:42px;height:42px;border-radius:13px}
}

@media(max-width:360px){.topbar .brand-title{max-width:150px}}
@media(prefers-reduced-motion:reduce){.topbar .nav,.menu-toggle span,.menu-backdrop{transition:none}}