/*
 * 按钮 4 档 (pangu-btn)
 * ---------------------------------------------------------------------------
 * 来源：component-spec.html 模块 2「按钮矩阵」。
 * primary / secondary / ghost / icon —— 同一动作全站长得一样。
 *
 * 规范表里的 --spec-* 变量在这里换成了 tokens.css 的真实 token。
 * 规范表原文里 :disabled 用了 !important，这里去掉了 —— 全新前缀不需要抢权重。
 *
 * 本轮（任务一返工）只有列表三态和密钥弹窗在用；
 * 全站替换是任务二的事，别一次性全换。
 */

@keyframes pangu-spin {
  to { transform: rotate(360deg); }
}

.pangu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pangu-space-2);
  font-family: inherit;
  font-size: var(--pangu-fs-sm);
  font-weight: 600;
  line-height: 1;
  height: 36px;
  padding: 0 var(--pangu-space-4);
  border-radius: var(--pangu-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.pangu-btn .material-symbols-outlined {
  font-size: 18px;
}

.pangu-btn:focus-visible {
  box-shadow: var(--pangu-focus-ring);
}

/* -- 1. primary：每页最多一个 -- */
.pangu-btn-primary {
  background: var(--pangu-brand);
  color: var(--pangu-text-on-brand);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 113, 227, 0.35);
}

.pangu-btn-primary:hover:not(:disabled):not(.state-disabled) {
  background: var(--pangu-brand-hover);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 16px -2px rgba(0, 113, 227, 0.45);
  transform: translateY(-0.5px);
}

.pangu-btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* -- 2. secondary -- */
.pangu-btn-secondary {
  background: var(--pangu-material-button);
  color: var(--pangu-text);
  border-color: var(--pangu-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pangu-btn-secondary:hover {
  background: var(--pangu-bg-hover);
  border-color: var(--pangu-border-strong);
  color: var(--pangu-text);
  transform: translateY(-0.5px);
}

.pangu-btn-secondary:active {
  transform: translateY(1px);
}

/* -- 3. ghost -- */
.pangu-btn-ghost {
  background: transparent;
  color: var(--pangu-text-2);
  border-color: transparent;
}

.pangu-btn-ghost:hover {
  background: var(--pangu-bg-hover);
  color: var(--pangu-text);
}

.pangu-btn-ghost:active {
  background: var(--pangu-bg-hover);
  color: var(--pangu-text);
  transform: translateY(1px);
}

/* -- 4. icon：正方形，只有图标 -- */
.pangu-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--pangu-radius-sm);
  background: var(--pangu-bg-hover);
  color: var(--pangu-text-2);
  border-color: var(--pangu-border);
}

.pangu-btn-icon:hover {
  background: var(--pangu-surface);
  color: var(--pangu-text);
  border-color: var(--pangu-brand);
  transform: translateY(-0.5px);
}

.pangu-btn-icon:active {
  transform: translateY(1px);
}

/* ==========================================================================
   尺寸档：变体管「长什么样」，尺寸管「多大」，两者正交
   ---------------------------------------------------------------------------
   默认 36px 是规范表模块 2 定的页面级动作尺寸（页头、弹窗底部、工具行）。
   但卡片内、表格行内的动作按钮原本就是小号的，一刀切 36px 会显得笨重
   （用户 2026-09-06 指出：数据概览的「测速/复制」被撑大了）。

   尺寸按 8095本地源码 里的原值对齐：
     接入信息 测速/复制 32px · 邀请返利复制 32px · 模型广场分段 32px  → sm
     密钥表格图标 28px · 订单号复制 ~20px                          → xs
     弹窗关闭 32/34/36/42px 五花八门                               → sm（统一 32）
   ========================================================================== */
.pangu-btn-sm {
  height: 32px;
  padding: 0 var(--pangu-space-3);
  gap: var(--pangu-space-1);
  font-size: 13px;
}

.pangu-btn-sm .material-symbols-outlined {
  font-size: 16px;
}

.pangu-btn-icon.pangu-btn-sm {
  width: 32px;
  padding: 0;
}

/* 卡片底部 / 收银台里那种整条铺满的主操作 */
.pangu-btn-block {
  width: 100%;
}

.pangu-btn-xs {
  height: 28px;
  padding: 0 var(--pangu-space-2);
  gap: var(--pangu-space-1);
  font-size: var(--pangu-fs-xs);
  border-radius: var(--pangu-radius-xs);
}

.pangu-btn-xs .material-symbols-outlined {
  font-size: 16px;
}

/* 纯图标的极小档才是正方形；带文字的 xs 保留上面的左右内边距。
   （这里原本是一段重复粘贴，选择器被注释黏成了后代选择器，
   导致所有 .pangu-btn-xs 都被压成 28px 宽。2026-09-06 修复。）*/
.pangu-btn-icon.pangu-btn-xs {
  width: 28px;
  padding: 0;
}

/* -- 破坏性动作：规范表 4 档里没有 danger 档，用状态修饰符实现，
      避免删除/取消这类按钮丢掉红色语义 -- */
.pangu-btn.is-danger {
  color: var(--pangu-danger-ink);
  border-color: var(--pangu-danger);
  background: var(--pangu-danger-soft);
}

.pangu-btn.is-danger:hover {
  color: var(--pangu-text-on-brand);
  border-color: var(--pangu-danger);
  background: var(--pangu-danger);
}

.pangu-btn-primary.is-danger {
  color: var(--pangu-text-on-brand);
  background: var(--pangu-danger);
  border-color: var(--pangu-danger);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(215, 0, 21, 0.35);
}

.pangu-btn-primary.is-danger:hover {
  background: var(--pangu-danger-ink);
  border-color: var(--pangu-danger-ink);
}

/* -- 反馈三层第 2 层：就地成功（点「复制」后按钮自己变「已复制 ✓」1.8 秒）-- */
.pangu-btn.is-copied {
  color: var(--pangu-success-ink);
  border-color: var(--pangu-success);
  background: var(--pangu-success-soft);
}

.pangu-btn.is-copied .material-symbols-outlined {
  color: var(--pangu-success-ink);
}

/* -- 状态 -- */
.pangu-btn:disabled,
.pangu-btn.state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* PortalCore.lockSubmit() 提交时加的是 .is-busy */
.pangu-btn.state-loading,
.pangu-btn.is-busy {
  cursor: wait;
  pointer-events: none;
  opacity: 0.7;
}

.pangu-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--pangu-radius-full);
  animation: pangu-spin 0.65s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pangu-btn { transition: none; }
  .pangu-btn:hover, .pangu-btn:active { transform: none; }
  .pangu-btn-spinner { animation-duration: 2s; }
}