.btn,
.btn-platform {
  min-height: var(--density-control-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border-radius: var(--radius-control);
  border-width: 1px;
  background: transparent;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

.btn:hover,
.btn-platform:hover {
  transform: none;
  box-shadow: none;
}

.btn:active,
.btn.active,
.btn-platform:active,
.btn-platform.active {
  transform: none;
  box-shadow: none;
}

.btn.is-loading {
  pointer-events: none;
  transform: none;
  box-shadow: none;
  opacity: 0.82;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.68;
  transform: none;
  box-shadow: none;
}

.btn:focus-visible,
.btn-platform:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus-success-sm);
}

.btn-close {
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.btn-close:hover {
  background-color: var(--color-surface-hover);
}

.btn-close:focus:not(:focus-visible),
.btn-close:active {
  outline: 0;
  box-shadow: none;
}

.btn-close:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus-success-sm);
}

.btn-sm {
  min-height: var(--density-control-height-sm);
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-md,
.btn:not(.btn-sm):not(.btn-lg) {
  min-height: var(--density-control-height-md);
  padding: 0.5rem 0.95rem;
}

.btn-outline-success {
  border-color: var(--color-border-success-strong);
  color: var(--color-success);
  background: transparent;
  transition: var(--transition-hover-normal);
}

.btn-outline-success:hover {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}

.btn-outline-success:active,
.btn-outline-success.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-outline-success:focus,
.btn-outline-success:focus-visible {
  box-shadow: var(--shadow-focus-success-sm);
}

/**
 * 管理列表分页「跳转」：与行内「编辑」一致的 outline-success，hover 实心。
 * 依赖 list.js 为提交按钮添加 .admin-page-jump-btn。
 */
.user-admin-page form.js-user-admin-pagination-form .admin-page-jump-btn.btn {
  --smartpu-green: var(--user-admin-primary, var(--color-success));
  background: transparent;
  color: var(--smartpu-green);
  border-color: var(--smartpu-green);
}

.user-admin-page form.js-user-admin-pagination-form .admin-page-jump-btn.btn:hover,
.user-admin-page form.js-user-admin-pagination-form .admin-page-jump-btn.btn:focus-visible {
  background: var(--smartpu-green);
  border-color: var(--smartpu-green);
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
 * 全站：Tabler .btn-primary → 平台成功色（HTML 仍为 btn-primary）
 * hover / focus-visible / active / disabled 与门户绿体系一致
 * -------------------------------------------------------------------------- */

.btn-primary,
.btn-success {
  --tblr-btn-bg: transparent;
  --tblr-btn-color: var(--color-success);
  --tblr-btn-border-color: var(--color-border-success-strong);
  background-color: transparent;
  border-color: var(--color-border-success-strong);
  color: var(--color-success);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}

.btn-primary:active,
.btn-primary.active,
.btn-success:active,
.btn-success.active,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-success:disabled,
.btn-success.disabled {
  background-color: transparent;
  border-color: var(--color-border-success-strong);
  color: var(--color-success);
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  --tblr-btn-color: var(--tblr-secondary-fg);
  --tblr-btn-bg: var(--tblr-secondary);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--tblr-secondary-fg);
  --tblr-btn-hover-bg: var(--tblr-secondary-darken);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: var(--tblr-secondary-fg);
  --tblr-btn-active-bg: var(--tblr-secondary-darken);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-disabled-color: var(--tblr-secondary-fg);
  --tblr-btn-disabled-bg: var(--tblr-secondary);
  --tblr-btn-disabled-border-color: transparent;
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-outline-secondary {
  --tblr-btn-color: var(--tblr-secondary);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--tblr-secondary);
  --tblr-btn-hover-color: var(--tblr-secondary-fg);
  --tblr-btn-hover-bg: var(--tblr-secondary);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: var(--tblr-secondary-fg);
  --tblr-btn-active-bg: var(--tblr-secondary);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-disabled-color: var(--tblr-secondary);
  --tblr-btn-disabled-bg: transparent;
  --tblr-btn-disabled-border-color: var(--tblr-secondary);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
}

.btn-secondary:active,
.btn-secondary.active,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background-color: var(--tblr-btn-active-bg);
  border-color: var(--tblr-btn-active-border-color);
  color: var(--tblr-btn-active-color);
}

.btn-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-danger) 58%, transparent);
  color: var(--color-danger);
}

.btn-outline-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-danger) 58%, transparent);
  color: var(--color-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-danger:hover,
.btn-danger:focus {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.btn-warning,
.btn-outline-warning {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-warning) 62%, transparent);
  color: var(--color-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-text-inverse);
}

.btn-platform.btn-fill,
.btn-fill.btn-success,
.btn-fill.btn-primary {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}

.btn-platform.btn-fill:hover,
.btn-fill.btn-success:hover,
.btn-fill.btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-success) 88%, white);
  border-color: color-mix(in srgb, var(--color-success) 88%, white);
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
 * Canonical button implementation
 *
 * Governance:
 * - New UI should use .btn-ui plus existing Tabler semantic variants.
 * - Existing .btn / .btn-sm / .btn-primary classes remain fully supported.
 * - This layer is additive for gradual migration; do not remove legacy classes
 *   until templates have migrated and visual QA has passed.
 * -------------------------------------------------------------------------- */

:root {
  --app-button-height-sm: var(--density-control-height-sm);
  --app-button-height-md: var(--density-control-height-md);
  --app-button-height-lg: var(--density-control-height-lg);
  --app-button-height-toolbar: var(--density-toolbar-height);
  --app-button-radius: var(--radius-control);
  --app-button-gap: var(--space-2, 8px);
  --app-button-padding-x-sm: 0.75rem;
  --app-button-padding-x-md: 0.95rem;
  --app-button-padding-x-lg: 1.15rem;
  --app-button-bg: var(--color-surface-raised);
  --app-button-border: var(--color-border-default);
  --app-button-color: var(--color-text-primary);
  --app-button-focus-ring: var(--color-border-success);
  --app-button-transition: var(--transition-hover-normal);
}

.btn-ui {
  min-height: var(--app-button-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-button-gap);
  padding: 0.5rem var(--app-button-padding-x-md);
  border: 1px solid var(--app-button-border);
  border-radius: var(--app-button-radius);
  background: var(--app-button-bg);
  color: var(--app-button-color);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: var(--app-button-transition);
}

.btn-ui:hover {
  color: var(--app-button-color);
  border-color: var(--color-border-default);
  background: var(--interaction-hover-background);
  transform: none;
  box-shadow: none;
}

.btn-ui:active,
.btn-ui.active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-ui:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus-success-sm);
}

.btn-ui:disabled,
.btn-ui.disabled,
.btn-ui[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.62;
  transform: none;
  box-shadow: none;
}

.btn-ui.is-loading {
  pointer-events: none;
  opacity: 0.82;
  transform: none;
  box-shadow: none;
}

.btn-ui-sm {
  min-height: var(--app-button-height-sm);
  padding: 0.375rem var(--app-button-padding-x-sm);
  font-size: 0.8125rem;
}

.btn-ui-lg {
  min-height: var(--app-button-height-lg);
  padding: 0.65rem var(--app-button-padding-x-lg);
  font-size: 0.95rem;
}

.btn-ui-toolbar {
  min-height: var(--app-button-height-toolbar);
  padding: 0.375rem 0.875rem;
  font-size: var(--font-toolbar);
}

/* Context adapters for existing markup. Button sizing and interaction belongs
 * here even when the surrounding layout lives in card/filter/table components.
 */
.dashboard-page.dashboard-tables-align .dashboard-panel-header .btn {
  height: 32px;
  padding: 0 12px;
  line-height: 30px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.filter-actions .btn {
  min-height: var(--density-toolbar-height);
  height: var(--density-toolbar-height);
  padding: 6px 16px;
}

.filter-multi__actions .btn,
.filter-multi__header--actions .btn-ui-toolbar {
  justify-content: center;
  width: 100%;
  min-height: var(--app-form-height-sm);
  height: var(--app-form-height-sm);
  padding-inline: var(--space-2);
}

.filter-panel-header .btn {
  height: 32px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.table-scfi-card .btn-outline-success {
  color: var(--color-success);
  border-color: var(--color-border-success-strong);
  background: var(--color-surface-default);
}

.table-scfi-card .btn-outline-success:hover,
.table-scfi-card .btn-outline-success:focus-visible,
.table-scfi-card .btn-outline-success:active,
.table-scfi-card .btn-outline-success.active {
  color: var(--color-text-inverse);
  background: var(--color-success);
  border-color: var(--color-success);
  box-shadow: none;
}

.table-scfi-card .btn-outline-success:focus-visible {
  box-shadow: var(--shadow-focus-success-sm);
}

.app-pagination-right .btn {
  height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.btn-ui-icon {
  width: var(--app-button-height-md);
  min-width: var(--app-button-height-md);
  height: var(--app-button-height-md);
  min-height: var(--app-button-height-md);
  padding: 0;
}

.btn-ui-sm.btn-ui-icon {
  width: var(--app-button-height-sm);
  min-width: var(--app-button-height-sm);
  height: var(--app-button-height-sm);
  min-height: var(--app-button-height-sm);
}

.btn-ui-lg.btn-ui-icon {
  width: var(--app-button-height-lg);
  min-width: var(--app-button-height-lg);
  height: var(--app-button-height-lg);
  min-height: var(--app-button-height-lg);
}

/* Compatibility: when .btn-ui is paired with Tabler variants, keep Tabler's
 * semantic color contract while applying canonical sizing/rhythm.
 */
.btn-primary.btn-ui,
.btn-success.btn-ui {
  background-color: transparent;
  border-color: var(--color-border-success-strong);
  color: var(--color-success);
}

.btn-primary.btn-ui:hover,
.btn-primary.btn-ui:focus,
.btn-success.btn-ui:hover,
.btn-success.btn-ui:focus {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}

.btn-outline-success.btn-ui {
  background: transparent;
  border-color: var(--color-border-success-strong);
  color: var(--color-success);
}

.btn-outline-success.btn-ui:hover,
.btn-outline-success.btn-ui:focus-visible {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}

.btn-outline-secondary.btn-ui {
  background: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-outline-secondary.btn-ui:hover,
.btn-outline-secondary.btn-ui:focus-visible {
  background: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
}

.btn-outline-secondary.btn-ui:active,
.btn-outline-secondary.btn-ui.active {
  background: var(--tblr-btn-active-bg);
  border-color: var(--tblr-btn-active-border-color);
  color: var(--tblr-btn-active-color);
}

.btn-ghost-secondary {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost-secondary:hover,
.btn-ghost-secondary:focus {
  background: var(--color-surface-hover);
  border-color: var(--color-border-muted);
  color: var(--color-text-primary);
}