/* Shared top tab bar linking the site's tools. Loaded by every page, so it only
   relies on tokens both page stylesheets define (--line, --surface, --surface-2, --accent). */

.app-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 16px auto 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 500 15px/1.2 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

.app-tabs a {
  flex: 1 1 auto;
  padding: 8px 20px;
  border-radius: 999px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  opacity: .72;
  transition: background-color .15s, opacity .15s;
}

.app-tabs a:hover { background: var(--surface-2); opacity: 1; }

.app-tabs a[aria-current] {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  opacity: 1;
}

@media (max-width: 480px) {
  .app-tabs { font-size: 14px; }
  .app-tabs a { padding: 8px 12px; }
}