/* ROBLPANG 2026-10-19 header legibility hotfix.
   The nav gained more than eight links; keeping repeat(8) in the old header
   caused extra links to wrap over the next row and overlap the account tools.
   A dedicated second row with horizontal overflow is safer at every desktop width. */
@media (min-width:861px){
  body:not(.mobile-app-chat) .topbar{
    height:113px!important;min-height:113px!important;
  }
  body:not(.mobile-app-chat) .topbar-inner{
    position:relative!important;box-sizing:border-box!important;
    display:flex!important;flex-wrap:nowrap!important;
    align-items:center!important;gap:clamp(7px,.9vw,15px)!important;
    height:113px!important;min-height:113px!important;
    width:min(calc(100% - 30px),1580px)!important;
    max-width:1580px!important;
    margin-inline:auto!important;padding:0 0 43px!important;
    overflow:visible!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.brand.brand-logo{
    flex:0 0 clamp(110px,9vw,150px)!important;
    min-width:100px!important;max-width:150px!important;overflow:visible!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.brand.brand-logo img{
    width:100%!important;max-width:150px!important;height:auto!important;
    object-fit:contain!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.topnav{
    box-sizing:border-box!important;position:absolute!important;
    left:0!important;right:0!important;bottom:5px!important;top:auto!important;
    display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;
    align-items:center!important;grid-template-columns:none!important;
    width:100%!important;height:39px!important;min-height:39px!important;
    margin:0!important;padding:3px 7px!important;gap:5px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    scrollbar-width:thin!important;scrollbar-color:rgba(177,215,237,.48) transparent!important;
    border:1px solid rgba(190,226,245,.2)!important;
    border-radius:10px!important;background:rgba(14,57,80,.29)!important;
    white-space:nowrap!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.topnav>a{
    box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;
    justify-content:center!important;flex:0 0 auto!important;min-width:max-content!important;
    width:auto!important;max-width:none!important;
    height:30px!important;min-height:30px!important;
    padding:0 12px!important;margin:0!important;
    overflow:visible!important;text-overflow:clip!important;
    font-size:12px!important;line-height:1.2!important;letter-spacing:-.01em!important;
    word-break:keep-all!important;white-space:nowrap!important;
    border-radius:8px!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.topnav>a:hover,
  body:not(.mobile-app-chat) .topbar-inner>.topnav>a.active{
    background:rgba(8,48,75,.5)!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.top-spacer{flex:1 1 auto!important;min-width:3px!important}
  body:not(.mobile-app-chat) .topbar-inner>.search{
    flex:0 1 230px!important;min-width:128px!important;
    max-width:230px!important;width:auto!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.auth-area{
    display:flex!important;flex:0 1 auto!important;align-items:center!important;
    justify-content:flex-end!important;min-width:0!important;gap:6px!important;
    max-width:calc(100% - 170px)!important;
    overflow-x:auto!important;overflow-y:visible!important;
    scrollbar-width:none!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.auth-area>*{flex-shrink:0!important}
  body:not(.mobile-app-chat) .topbar-inner>.auth-area::-webkit-scrollbar{display:none}
}
@media (min-width:861px) and (max-width:1120px){
  body:not(.mobile-app-chat) .topbar-inner>.search{display:none!important}
  body:not(.mobile-app-chat) .topbar-inner>.brand.brand-logo{
    flex-basis:114px!important;min-width:114px!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.topnav>a{
    padding-inline:10px!important;font-size:11.5px!important;
  }
}
@media (min-width:761px) and (max-width:860px){
  body:not(.mobile-app-chat) .topbar{height:70px!important;min-height:70px!important}
  body:not(.mobile-app-chat) .topbar-inner{
    height:70px!important;min-height:70px!important;
    padding:0!important;align-items:center!important;
  }
  body:not(.mobile-app-chat) .topbar-inner>.topnav{display:none!important}
  body:not(.mobile-app-chat) .topbar-inner>.search{display:none!important}
}
/* Keep tooltip/popover text and controls from overlapping in account tools. */
.topbar .topnav a,.topbar .auth-area a,.topbar .auth-area button{
  white-space:nowrap!important;word-break:keep-all!important;
}