
@layer uiControls {
  body[data-workspace] #top #main-nav {
    --qa-nav-selected:#007074;
    background:var(--ui-panel)!important;
    border:1px solid color-mix(in srgb,var(--ui-brand) 24%,var(--ui-border))!important;
    border-radius:20px!important;
  }
  body[data-workspace] #top #main-nav>:is(a,button).on {
    background:var(--qa-nav-selected)!important;
    color:#fff!important;
  }
  body[data-workspace] #top #main-nav>:is(a,button).on :is(.nav-i,.nav-ic,.nav-w,svg) {color:#fff!important;}
  body[data-workspace] #top #main-nav>a.on::before {display:none!important;}
  body[data-workspace] #top #main-nav>:is(a,button):focus-visible {outline:2px solid var(--ui-brand)!important;outline-offset:2px!important;}
  @media(min-width:700px) {
    body[data-workspace] #top #main-nav {
      --qa-rail-scale:min(var(--ref-scale),calc(var(--qa-rail-available) / 840))!important;
      padding:8px 6px!important;
    }
    body[data-workspace] #top #main-nav>a[href="/settings"] {margin-top:12px!important;position:relative!important;}
    body[data-workspace] #top #main-nav>a[href="/settings"]::after {
      content:""!important;display:block!important;position:absolute!important;
      inset:-7px 6px auto!important;height:1px!important;background:var(--ui-rule)!important;
    }
  }
  @media(max-width:699px) {
    body[data-workspace] #top #main-nav {border-radius:14px!important;}
  }
}
