/* Top bar v3: every tab always shows its name (no guessing what an icon means).
   Wide screens: icon + name on one line. Medium: names only. Laptops/small screens: the tabs get their own row
   under the logo and buttons. Tablets/phones: the bottom bar (already labeled). */
.top .tab span,.top .tab[aria-current="page"] span,.top .wrap:has(.hpill.packs) .tab span{display:inline!important}
.top .tabs{overflow:visible;flex-wrap:nowrap}
.top .tab{padding:9px 12px!important;font-size:15px;font-weight:700}
/* names only, no icons */
.top .tab svg{display:none}
@media (min-width:1600px){.top .wrap{max-width:1580px}}
/* not enough room for one line: tabs drop to a second row, centered */
@media (min-width:900px) and (max-width:1599px){
  .top .wrap{flex-wrap:wrap!important;row-gap:4px;padding-bottom:6px}
  .top .tabs{order:10;flex:1 0 100%;justify-content:center;margin:0;gap:4px;padding-top:6px;border-top:1px solid rgba(140,170,255,.15)}
  .top .tab{padding:8px 14px!important}
}
@media (min-width:900px) and (max-width:1099px){.top .tab{padding:8px 10px!important;font-size:14px}.top .tabs{gap:2px}}