@layer components {
  .btn {
    --_bg: transparent; --_fg: var(--text); --_bd: var(--line-strong);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-sm);
    font-weight: 600; font-size: var(--t-sm); line-height: 1; text-decoration: none; white-space: nowrap;
    color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd);
    overflow: hidden; isolation: isolate; cursor: pointer; user-select: none;
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
  .btn .icon { width: 18px; height: 18px; }

  /* 实心青：文字必须用 --btn-ink（#070B12）；光扫用伪元素 translateX */
  .btn-solid { --_bg: var(--cyan); --_fg: var(--btn-ink); --_bd: var(--cyan); }
  .btn-solid::after {
    content: ""; position: absolute; inset: -1px auto -1px -40%; width: 40%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent);
    transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease-out);
  }
  .btn-solid:hover::after { transform: translateX(380%); }
  .btn-solid:hover { box-shadow: var(--glow); }
  html[data-surface="paper"] .btn-solid { --_bg: var(--cyan-ink); --_fg: #FFFFFF; --_bd: var(--cyan-ink); }

  .btn-ghost { --_bd: var(--line-strong); }
  .btn-ghost:hover { --_bd: var(--cyan-ink); color: var(--cyan-ink); }

  .btn-amber { --_bg: var(--amber); --_fg: var(--btn-ink); --_bd: var(--amber); }

  .btn-link { --_bd: transparent; padding-inline: var(--s-1); color: var(--cyan-ink); min-height: 36px; }
  .btn-link:hover { text-decoration: underline; transform: none; }

  .btn-sm { min-height: 36px; padding-inline: var(--s-4); font-size: var(--t-xs); }
  .btn-lg { min-height: 52px; padding-inline: var(--s-6); font-size: var(--t-base); }
  .btn-icon { padding: 0; width: 44px; }
  .btn-block { width: 100%; }

  .btn-group { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
  .btn:hover .arrow { transform: translateX(3px); }

  /* 行内图标按钮（复制等），触控 ≥44px */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: var(--r-sm); color: var(--muted); border: 1px solid transparent;
    transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
  }
  .icon-btn:hover { color: var(--cyan-ink); border-color: var(--line-strong); background: var(--raised); }
  .icon-btn[data-copied="true"] { color: var(--ok); }
}