.btn {
  width: 100%;
  height: calc(26px * var(--ui-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 var(--gap-16);
  cursor: pointer;
  font-size: var(--font-11);
  font-weight: 600;
  text-decoration: none;
}

.btn:disabled {
  cursor: default;
  opacity: 0.55;
}

/* 键盘焦点环（与 .page-jump-btn / audits 惯例同款 outline 手法）：
   .btn 族此前零焦点样式，属键盘可达性缺口 */
.btn:focus-visible {
  outline: calc(1.5px * var(--ui-scale)) solid var(--color-primary);
  outline-offset: calc(1px * var(--ui-scale));
}

/* 动作档尺寸变体：工具栏/表单动作按钮（添加/上传/保存设置/发送测试邮件等）统一规格
   ——高 30、内距 0·12、字号 10、宽度 auto（覆写基类表单默认的 width:100% 与 26 档）；
   固定宽度属布局语境，由页面按设计稿单独声明 */
.btn--sm {
  width: auto;
  height: calc(30px * var(--ui-scale));
  padding: 0 var(--gap-12);
  font-size: var(--font-10);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
}

.btn-secondary {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* 主操作按钮（各页工具栏「激活/成为卖家/添加产品/添加信息/添加卖家」主 CTA）：
   88×30 rx radius-sm 紫底 #121212 字 font-11/600/.022em——此前五页各写一份逐字重复实现
   （subscriptions-activate__btn / channels-become-btn / products-add-btn / support-add-btn /
   purchase-add-seller-btn），收敛为全局基类；近规格变体（80 宽 / 88×32 等）以页面覆盖表达 */
.btn-action {
  width: calc(88px * var(--ui-scale));
  height: calc(30px * var(--ui-scale));
  flex: 0 0 calc(88px * var(--ui-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #121212;
  font-size: var(--font-11);
  font-weight: 600;
  letter-spacing: 0.022em;
  cursor: pointer;
  text-decoration: none;
}

.btn-action:disabled {
  opacity: 0.6;
}

/* 跳页/翻页图标按钮基类（Security/Devices/Users/Audits 分页与 pagination-bar 同族）：
   盒心/底色/光标统一，尺寸、圆角、svg 尺寸与禁用态手法由各档页面规则覆盖；
   focus-visible 焦点环为全族统一（原仅 Audits 有，补齐不对称） */
.page-jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
}

.page-jump-btn:focus-visible {
  outline: calc(1.5px * var(--ui-scale)) solid var(--color-primary);
  outline-offset: calc(1px * var(--ui-scale));
}

/* 标签移除微型钮（purchase-tag__remove / settings-suffix-tag__remove 两份逐字重复收敛）：
   12×12 透明底 50% 白 + 8×8 svg */
.tag-remove {
  width: calc(12px * var(--ui-scale));
  height: calc(12px * var(--ui-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.tag-remove svg {
  width: calc(8px * var(--ui-scale));
  height: calc(8px * var(--ui-scale));
}

/* 红色幽灵删除按钮（购买设置.svg wechat_btn_delete / 购买设置7.svg btn_delete_wechat_card）：
   20×20 rx4 + #ff5f5f 15% 底 + 居中 X。X 走 SvgIconRegistry "delete-x" SVG 描边而非文字 ×，
   保证跨字体几何恒定（文字 × 的墨水盒随字体回退漂移，无法稳定居中）。
   页面如需别的尺寸/图标大小，覆写宽高与 svg 尺寸即可 */
.delete-btn {
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: calc(4px * var(--ui-scale));
  background: rgba(255, 95, 95, 0.15);
  color: #ff5f5f;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.delete-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 通用展开按钮（购买设置.svg purchase-seller__expand / 帮助中心.svg chevron-btn 标准）：
   26×26 rx6 + #171717 底 + 26×26 右向箭头（stroke 1.25 圆头），悬停 #1d1d1d。
   Purchase / Products / Resets / Help 各页卡片右缘的「查看详情」入口统一使用本组件
   （ SvgIconRegistry "chevron-expand" 图标），页面类仅保留定位/边距覆盖，
   不再各写一份底色/尺寸/悬停样式导致规格漂移 */
.expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(26px * var(--ui-scale));
  width: calc(26px * var(--ui-scale));
  height: calc(26px * var(--ui-scale));
  padding: 0;
  border: 0;
  border-radius: calc(6px * var(--ui-scale));
  background: var(--color-surface-alt);
  color: var(--color-text);
  cursor: pointer;
}

.expand-btn:hover {
  background: var(--color-surface-hover);
}

.expand-btn svg {
  display: block;
  width: calc(26px * var(--ui-scale));
  height: calc(26px * var(--ui-scale));
}

/* 卡片右上角保存按钮（原定义寄居 profile.css，被 Profile/Settings/Security/Purchase 四页
   依赖，属全局组件归位迁移，规则内容不变）：
   常态隐藏，各页 dirty 类（app-card--dirty / settings-card--dirty /
   security-card--twofactor--dirty）经下方合并规则统一显隐 */
.app-card__save {
  display: none;
  width: calc(56px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  padding: 0;
  border: 0;
  border-radius: calc(4px * var(--ui-scale));
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--font-9);
  font-weight: 600;
  cursor: pointer;
  margin-top: calc(4px * var(--ui-scale));
}

/* 卡片右上角「添加」按钮：与保存钮同视觉（下载设置4.svg btn_add），但语义是
   列表卡弹窗常驻入口（如 /Releases 运行库/产品下载卡），不参与 dirty 显隐 */
.app-card__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(56px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  padding: 0;
  border: 0;
  border-radius: calc(4px * var(--ui-scale));
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--font-9);
  font-weight: 600;
  cursor: pointer;
  margin-top: calc(4px * var(--ui-scale));
}

.app-card--profile.app-card--dirty .app-card__save,
.app-card--settings.app-card--dirty .app-card__save,
.settings-card--dirty .app-card__save,
.security-card--twofactor--dirty .app-card__save,
.purchase-card--dirty .app-card__save,
.releases-card--dirty .app-card__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 行内图标按钮组（通用组件）：行卡片右侧的编辑/删除小图标钮，
   32×32、编辑 rx8 紫底（悬停加深）、删除 rx6 红底（左距 8、悬停加深）。
   旧类名以 support- 页面前缀寄居 support.css 与页面耦合，已更名 icon-btn 归位通用
   （使用方：/Support 帮助信息行、/Releases 运行库与产品下载行；新页面直接复用） */
.icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(32px * var(--ui-scale));
  height: calc(32px * var(--ui-scale));
  border: 0;
  cursor: pointer;
  padding: 0;
}

.icon-btn svg {
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
}

.icon-btn--edit {
  border-radius: var(--radius-md);
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

/* 悬停仅加深底色（5% → 20%），与删除钮（10% → 20%）同一效果，不加描边 */
.icon-btn--edit:hover {
  background: rgba(180, 160, 251, 0.2);
}

.icon-btn--delete {
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  margin-left: var(--gap-8);
}

.icon-btn--delete:hover {
  background: rgba(255, 119, 119, 0.2);
}
