/* 通用组件层：按钮、标签、导航均使用语义 Token。 */
.btn,
.nav button,
.tab,
.filter-chip,
.source-chip,
.icon-button {
  transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}

.btn {
  border-radius: var(--radius-control);
  font-weight: var(--weight-medium);
  border-color: var(--color-border-default);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
}

.btn.primary {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: #fff;
}

.btn:hover:not(:disabled) { border-color: var(--color-border-strong); background: var(--color-surface-subtle); color: var(--color-text-primary); }
.btn.primary:hover,
.btn.primary:hover:not(:disabled) {
  background: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: #fff;
}
.btn:focus-visible, .nav button:focus-visible, .icon-button:focus-visible { outline: 3px solid rgb(24 24 27 / 18%); outline-offset: 2px; }
.btn:active:not(:disabled), .icon-button:active { transform: translateY(1px); }
.btn.warn { background: var(--color-state-warning); border-color: var(--color-state-warning); }
.btn.text-button { border-color: transparent; background: transparent; color: var(--color-text-secondary); padding-inline: var(--space-2); }
.btn.text-button:hover { background: var(--color-action-primary-soft); border-color: transparent; }

.tag.ok { color: var(--color-state-success); border-color: #b8e5d1; background: var(--color-state-success-soft); }
.tag.warn { color: var(--color-state-warning); border-color: #f0cc9f; background: var(--color-state-warning-soft); }
.tag.bad { color: var(--color-state-danger); border-color: #f0bcbc; background: var(--color-state-danger-soft); }

.icon-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-size: 16px;
}
.icon-button:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); background: var(--color-action-primary-soft); }