.hero { position: relative !important; }
.heroSettingsButton {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 124px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--edge-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: var(--elevation-1);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.heroSettingsButton svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent2); }
.heroSettingsButton:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--surface-sub); box-shadow: var(--elevation-2); }
.heroSettingsButton.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent), var(--elevation-1); }
.heroSettingsButton:focus-visible { outline: 3px solid color-mix(in srgb,var(--accent) 34%,transparent); outline-offset: 3px; }

/* Five primary destinations stay in one full-width row. */
.tabs {
  width: min(900px, calc(100vw - 22px)) !important;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) !important;
}
.tabs .tab { min-width: 130px !important; }

@media(max-width:620px){
  .hero { padding-top: 58px !important; }
  .tabs { overflow-x: auto !important; grid-template-columns: repeat(5, minmax(130px,1fr)) !important; }
}

/* Settings is icon-only, matching the notification + account buttons (42x42, 20px icon). */
.heroSettingsButton{ min-width:42px!important; min-height:42px!important; gap:0!important; padding:9px!important; }
.heroSettingsButton > span:not(.traditionalGear){ display:none!important; }
.heroSettingsButton .traditionalGear{ width:20px!important; height:20px!important; flex:0 0 20px!important; font-size:1.2rem!important; }
.heroSettingsButton .traditionalGear.svgGear{ width:20px!important; height:20px!important; }
.heroSettingsButton .traditionalGear.svgGear svg{ width:20px!important; height:20px!important; }
@media(max-width:620px){ .heroSettingsButton{ top:12px; left:12px; } }