/* One continuous glass surface, adapted from the reference to the Club's routes. */
.topbar.steel-glassbar{height:72px;max-width:1400px;width:calc(100% - 48px);margin:18px auto 0;top:18px;padding:0 20px;gap:20px;border:1px solid #ffffff26;border-radius:16px;background:linear-gradient(120deg,#ffffff0c,transparent 55%),rgba(19,20,24,.68)!important;backdrop-filter:blur(28px) saturate(115%);-webkit-backdrop-filter:blur(28px) saturate(115%);box-shadow:0 12px 40px #0004,inset 0 1px 0 #ffffff16}
.topbar.steel-glassbar>.brand .steel-brand-logo{width:172px;max-height:48px}
.steel-glassbar #mainNav{margin-inline:auto;gap:4px;padding:4px;position:relative;border:0;border-radius:10px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.steel-glassbar #mainNav .steel-nav-item{padding:11px 14px;gap:7px;font-size:14px;min-height:44px;border-radius:9px;color:#c4c5cf;transition:color 160ms ease}
.steel-glassbar #mainNav .steel-nav-item img{display:block;width:18px;height:18px;opacity:.75}
.steel-glassbar #mainNav .steel-nav-item:is(.active,.is-active){color:#fff}
.steel-glassbar #mainNav .steel-nav-indicator{display:none}
.topbar.steel-glassbar>.header-actions{gap:10px;flex-shrink:0}
.steel-glassbar .header-actions .btn{border-radius:10px;min-height:42px}
.steel-glassbar .header-actions .btn-ghost{border-color:#ffffff20;background:#ffffff05;padding-inline:15px}
.steel-glassbar .steel-user-pill{border-radius:10px;min-height:44px}
.steel-glassbar a:focus-visible,.steel-glassbar button:focus-visible{outline:2px solid #c1a1f0;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.steel-glassbar #mainNav .steel-nav-item:hover{color:#fff}.steel-glassbar .header-actions .btn-ghost:hover{background:#ffffff0c;border-color:#ffffff40}}
@media(min-width:1051px) and (max-width:1250px){.topbar.steel-glassbar{gap:10px;padding-inline:14px;width:calc(100% - 28px)}.steel-glassbar #mainNav .steel-nav-item{padding-inline:10px;font-size:13px}.topbar.steel-glassbar>.brand .steel-brand-logo{width:156px}.topbar.steel-glassbar>.header-actions{gap:7px}}
@media(max-width:1050px){.steel-glassbar #mainNav{display:none}.steel-glassbar #mainNav.open{display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;padding:10px;gap:4px;background:rgba(22,23,29,.97);border:1px solid #ffffff28;border-radius:14px;box-shadow:0 20px 45px #0006;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}.steel-glassbar #mainNav .steel-nav-item{padding:12px 14px}.steel-glassbar #mainNav .steel-nav-item img{display:block}.steel-glassbar #mainNav .steel-nav-indicator{display:none}.steel-glassbar #mainNav.open .steel-nav-item.is-active{background:#ffffff0c}.steel-glassbar .mobile-menu{display:grid;border-radius:10px;width:42px;height:42px}}
/* Mobile uses the bottom dock: the logo scrolls and the account stays available. */
@media(max-width:760px){
  .topbar.steel-glassbar{position:relative;top:auto;height:calc(76px + env(safe-area-inset-top,0px));width:100%;margin:0;padding:env(safe-area-inset-top,0px) max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));gap:8px;border:0;border-radius:0;background:transparent!important;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .topbar.steel-glassbar>.brand .steel-brand-logo{width:180px;max-height:58px}
  .topbar.steel-glassbar>.header-actions{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));z-index:60;margin-left:0;gap:6px}
  .steel-glassbar #mainNav,.steel-glassbar #mainNav.open,.steel-glassbar .mobile-menu{display:none}
  .steel-glassbar .steel-user-pill>span:last-child{display:none}
  .steel-glassbar .steel-user-pill{padding:4px;min-height:44px;width:44px;justify-content:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .steel-glassbar .steel-user-pill .avatar{width:32px;height:32px}
  .steel-glassbar .header-actions .desktop-auth{display:none}
}
@media(max-width:360px){.topbar.steel-glassbar>.brand .steel-brand-logo{width:154px}}
@media(prefers-reduced-motion:reduce){.steel-glassbar #mainNav .steel-nav-indicator{display:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.topbar.steel-glassbar,.steel-glassbar #mainNav.open{background:#1b1c21!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:#ffffff66}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar.steel-glassbar{background:#1b1c21!important}}
/* Reference motion: a growing underline per tab and a light sweep over Login. */
.steel-glassbar #mainNav .steel-nav-item{isolation:isolate}
.steel-glassbar #mainNav .steel-nav-item>span,.steel-glassbar #mainNav .steel-nav-item>img{transition:transform 200ms var(--ease-out,cubic-bezier(.23,1,.32,1)),opacity 160ms ease}
.steel-glassbar #mainNav .steel-nav-item::after{content:'';display:block;position:absolute;left:14px;right:14px;top:auto;bottom:5px;width:auto;height:2px;border:0;border-radius:2px;background:linear-gradient(90deg,#e9e3f4,#baa2dd);transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform 200ms var(--ease-out,cubic-bezier(.23,1,.32,1)),opacity 160ms ease;pointer-events:none}
.steel-glassbar #mainNav .steel-nav-item.is-active::after{transform:scaleX(1);opacity:.6}
.steel-glassbar #mainNav .steel-nav-item:focus-visible::after{transform:scaleX(1);opacity:1;transition:none}
.steel-glassbar .steel-login-motion{position:relative;isolation:isolate;overflow:hidden;transition:transform 200ms var(--ease-out,cubic-bezier(.23,1,.32,1)),background-color 160ms ease,border-color 160ms ease}
.steel-glassbar .steel-login-motion::before{content:'';position:absolute;inset:-30% -20%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff08 42%,#ffffff32 50%,#ffffff08 58%,transparent 70%);transform:translateX(-110%);opacity:0;transition:transform 250ms var(--ease-out,cubic-bezier(.23,1,.32,1)),opacity 160ms ease}
.steel-glassbar .steel-login-motion::after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #ffffff70;border-radius:inherit;box-shadow:inset 0 1px 8px #ffffff12;opacity:0;transition:opacity 160ms ease}
.steel-glassbar .steel-login-motion:focus-visible::after{opacity:1}
.steel-glassbar .steel-login-motion:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  .steel-glassbar #mainNav .steel-nav-item:hover::after{transform:scaleX(1);opacity:1}
  .steel-glassbar #mainNav .steel-nav-item:hover>span{transform:translateY(-2px)}
  .steel-glassbar #mainNav .steel-nav-item:hover>img{transform:translateY(-3px) scale(1.08);opacity:1}
  .steel-glassbar .steel-login-motion:hover{transform:translateY(-2px) scale(1.035);border-color:#ffffff65}
  .steel-glassbar .steel-login-motion:hover::before{transform:translateX(110%);opacity:1}
  .steel-glassbar .steel-login-motion:hover::after{opacity:1}
  .steel-glassbar .steel-login-motion:hover:active{transform:scale(.97)}
}
@media(prefers-reduced-motion:reduce){
  .steel-glassbar #mainNav .steel-nav-item>span,.steel-glassbar #mainNav .steel-nav-item>img{transform:none!important;transition:opacity 160ms ease}
  .steel-glassbar #mainNav .steel-nav-item::after{transition:opacity 160ms ease}
  .steel-glassbar .steel-login-motion{transform:none!important;transition:background-color 160ms ease,border-color 160ms ease}
  .steel-glassbar .steel-login-motion::before{display:none}
}