.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px;
  border-bottom: 1px solid var(--mw-line-strong);
}
.tab-btn {
  padding: 0 16px; min-height: 40px; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-bottom-color: transparent;
  border-radius: 10px 10px 0 0;
  background: transparent; color: var(--mw-muted);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.tab-btn:hover { background: var(--mw-surface-sunken); color: var(--mw-ink); }


.tab-btn[aria-selected="true"] {
  background: var(--mw-surface); color: var(--mw-accent-ink);
  border-color: var(--mw-line-strong); border-bottom-color: var(--mw-surface);
  box-shadow: inset 0 2px 0 0 var(--mw-accent);
}

.tab-btn:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: -2px; }

.tab-btn .tab-n {
  font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: var(--mw-neutral-soft); color: var(--mw-muted); font-variant-numeric: tabular-nums;
}
.tab-btn[aria-selected="true"] .tab-n { background: var(--mw-accent-soft); color: var(--mw-accent-ink); }

.tab-btn.has-wait .tab-n { background: var(--mw-warn-soft); color: var(--mw-warn-ink); }


@media (max-width: 520px) {
  .tabs { border-bottom: none; gap: 6px; }
  .tab-btn { margin-bottom: 0; border-radius: 10px; border-color: var(--mw-line); }
  .tab-btn[aria-selected="true"] { border-color: var(--mw-line-strong); border-bottom-color: var(--mw-line-strong); }
}


.tabs.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tabs.scroll .tab-btn { flex: 0 0 auto; }