/*
==========================================================================
   STEAM 修改器程序界面 —— 1:1 对齐 52Box (TrainerBox) 视觉
   配色/圆角/间距/组件均照搬 52Box，禁止自造装饰
==========================================================================
*/

.steam-app-container {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #171d25;
  color: #dcdedf;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  overflow: hidden;
}

.steam-app-container svg { display: block; }
.sa-sidebar-scrim {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  padding: 0;
  border: 0;
  background: rgba(6, 10, 15, 0.48);
  cursor: default;
}

/* ============ 左侧栏 (52Box Sidebar，随应用宽度在 240–300px 之间调整) ============ */
.sa-sidebar {
  position: relative;
  z-index: 40;
  width: clamp(232px, 24%, 282px);
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(44, 51, 61, 0.58);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: #dcdedf;
  transition: width 0.18s ease, box-shadow 0.18s ease;
}

.sa-side-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
  flex: none;
}
.sa-home-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font: 500 13px/1 inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sa-home-btn:hover { background: rgba(255, 255, 255, 0.11); }
.sa-grid-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #8c96a0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sa-grid-btn:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

/* 侧栏折叠保留单一操作入口，避免收起后失去恢复控制 */
.steam-app-container.sa-sidebar-collapsed .sa-sidebar { width: 40px; }
.steam-app-container.sa-sidebar-collapsed .sa-side-top {
  justify-content: center;
  padding: 12px 4px 8px;
}
.steam-app-container.sa-sidebar-collapsed .sa-home-btn,
.steam-app-container.sa-sidebar-collapsed .sa-side-controls,
.steam-app-container.sa-sidebar-collapsed .sa-sidebar-search,
.steam-app-container.sa-sidebar-collapsed .sa-side-list { display: none; }

.sa-side-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px;
  flex: none;
}
.sa-games-label {
  display: flex;
  align-items: center;
  color: #8c96a0;
  font: 600 11px/1 inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sa-side-tools { display: flex; gap: 2px; }
.sa-tool-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #8c96a0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sa-tool-icon:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.sa-tool-icon:focus { outline: none; }
.sa-tool-icon:focus-visible { outline: none; color: #fff; }
/* 最近浏览 / 运行中视图激活态：高亮为白，不加背景块也不用蓝色 */
.sa-tool-icon.on { background: transparent; color: #fff; }
.sa-tool-icon.on:hover { background: transparent; color: #fff; }
/* 运行中：三角图标变绿，与「开始游戏」按钮同色系（不用计数角标） */
.sa-tool-icon.has-running,
.sa-tool-icon.has-running.on { color: #47b04b; }
.sa-tool-icon.has-running:hover { background: transparent; color: #4fc354; }
/* 运行中列表项的停止按钮 */
.sa-side-item.is-running .sa-side-name { color: #a9e07a; }
.sa-side-stop {
  flex: none;
  height: 22px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: #c2cbd2;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.sa-side-stop:hover { border-color: rgba(255, 120, 110, 0.55); background: rgba(255, 90, 80, 0.2); color: #fff; }
.sa-side-stop:focus { outline: none; }

/* 启动冲突确认对话框：统一为公告同款浅色框架 */
.sa-conflict-dialog { width: min(440px, 100%); }
.sa-conflict-title { margin: 0 0 6px; font-size: 14px; font-weight: 650; color: #252c30; }
.sa-conflict-copy { margin: 0; color: #4f585c; font-size: 12px; font-weight: 520; line-height: 1.7; }
.sa-conflict-copy b { color: #1e7a44; font-weight: 650; }
.sa-conflict-actions { gap: 8px; }
.sa-conflict-actions .abtn.gray {
  height: 30px;
  padding: 0 16px;
  border-radius: 8px;
  background: rgba(40, 45, 48, 0.08);
  color: #4f585c;
  font-size: 11px;
}
.sa-conflict-actions .abtn.gray:hover { background: rgba(40, 45, 48, 0.16); color: #252c30; }

.sa-sidebar-search { padding: 0 16px 8px; flex: none; }
.sa-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #414955;
  border-radius: 2px;
  background: #363d48;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s;
}
.sa-search-bar:hover { border-color: rgba(111, 152, 189, 0.7); }
.sa-search-bar:focus-within { border-color: #6f98bd; }
.sa-search-icon { color: #8c96a0; flex: none; }
.sa-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #dcdedf;
  font: 400 13px/1 inherit;
  -webkit-user-select: text;
  user-select: text;
}
.sa-search-input::placeholder { color: #7b8796; }

.sa-side-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 20px;
  margin-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.sa-side-list::-webkit-scrollbar { width: 8px; }
.sa-side-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.sa-side-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

.sa-group { margin-bottom: 4px; }
.sa-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 16px;
  border: none;
  background: transparent;
  color: #8c96a0;
  font: 400 12px/1 inherit;
  cursor: pointer;
  text-align: left;
}
.sa-group-arrow { color: #8c96a0; flex: none; transition: transform 0.2s; }
.sa-group.collapsed .sa-group-arrow { transform: rotate(-90deg); }
.sa-group-name { flex: none; color: #fff; font-size: 14px; }
.sa-group-count { color: #4f5359; font-size: 12px; }
.sa-group-items { list-style: none; margin: 0; padding: 0; }
.sa-group.collapsed .sa-group-items { display: none; }

.sa-side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 16px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background 0.12s;
}
.sa-side-item:hover { background: rgba(255, 255, 255, 0.04); }
.sa-side-item.on { background: rgba(26, 159, 255, 0.1); border-left-color: #1a9fff; }
.sa-side-cover {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 3px;
  overflow: hidden;
  background: #1d2025;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.sa-side-cover img { width: 100%; height: 100%; object-fit: cover; }
.sa-side-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 530;
  letter-spacing: 0.03em;
  color: #b8b6b4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s;
}
.sa-side-item:hover .sa-side-name { color: #fff; }
.sa-side-item.on .sa-side-name { color: #fff; }
/* 会员等级圆点：高级=蓝、超级=绿，与卡片右上角角标同色，便于分辨 */
.sa-side-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.sa-side-dot.advanced { background: #38b6ff; }
.sa-side-dot.super { background: #7cf01b; }
.sa-side-empty { padding: 20px 16px; text-align: center; font-size: 12px; color: #4f5359; }

/* ============ 主区 ============ */
.sa-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #171d25;
  /* 容器查询: 详情/库按自身实际可用宽高自适应, 与左侧游戏列表是否存在无关 */
  container-type: size;
  container-name: samain;
}

.sa-topnav {
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  /* 库头部移入后内容变多，禁止换行并允许内部收缩 */
  min-width: 0;
}
.sa-nav-arrows { display: flex; gap: 4px; margin-right: 22px; flex: none; }
.sa-arrow-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #8f98a0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sa-arrow-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sa-arrow-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sa-nav { display: flex; align-items: center; gap: 28px; height: 100%; }
.sa-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-bottom: 4px;
  border: none;
  background: transparent;
  color: #dbe2e6;
  font-family: "Motiva Sans", "Segoe UI", "San Francisco", Arial, sans-serif;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s;
}
.sa-nav-item:hover { color: #fff; }
.sa-nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  opacity: 0;
}
.sa-nav-item[data-channel="advanced"].on { color: #38b6ff; }
.sa-nav-item[data-channel="advanced"].on::after { opacity: 1; background: #38b6ff; box-shadow: 0 0 12px rgba(56, 182, 255, 0.55); }
.sa-nav-item[data-channel="super"].on { color: #7cf01b; }
.sa-nav-item[data-channel="super"].on::after { opacity: 1; background: #7cf01b; box-shadow: 0 0 12px rgba(124, 240, 27, 0.55); }

/* ============ 列表页 ============ */
.sa-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.sa-page::-webkit-scrollbar { width: 8px; }
.sa-page::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.sa-page-library {
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 120% at 50% 0%, #29384d 0%, #1b2430 40%, #171a1f 100%);
}
.sa-lib-inner { padding: 20px 32px; }

.sa-lib-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1a9fff, #176a9f);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}
.sa-lib-count { font-weight: 400; }

/* 库头部：全部修改器 / 本机游戏 两个同款 tab + 设置齿轮 横向排列 */
/* 库头部已移入顶栏，与前进后退箭头同一行；详情页不显示 */
.sa-lib-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* 顶栏是定高容器，头部不能自带纵向 padding，否则会撑破并偏离居中 */
  height: 100%;
  padding: 0;
}

/* 两个 tab 复用 .sa-lib-badge 的胶囊尺寸/圆角；作为按钮需要重置默认外观 */
.sa-lib-tab {
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, box-shadow 0.15s;
  /* 顶栏内不被 align-items:stretch 之外的因素拉高，保持自身内容高度 */
  flex: none;
  align-self: center;
}
.sa-lib-tab:focus { outline: none; }
/* 激活的 tab：亮蓝渐变（沿用 .sa-lib-badge 默认外观，无需额外声明） */
/* 未激活的 tab：清晰的深色实心（不透明、不发虚），hover 提亮 */
.sa-lib-tab:not(.is-active) {
  background: #2a3138;
  color: #c7d0da;
  box-shadow: none;
}
.sa-lib-tab:not(.is-active):hover { background: #333c45; color: #fff; }
.sa-lib-local-count { font-weight: 400; }
/* 库头部设置齿轮：低调图标按钮 */
/* 圆点含义说明：直接复用卡片角标的 .sa-card-dot 配色，保证与卡片一致 */
/* 图例靠右，齿轮跟随（原促销文案已移除，靠右职责交给图例） */

/* 图例承担靠右职责（原由促销文案的 margin-left:auto 负责） */
.sa-lib-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
  font-size: 13px;
  color: #a4adb6;
  white-space: nowrap;
}
/* 「蓝标 打不开 ⇄ 绿标 可能行」：双向箭头替代一整句说明，
   表达两类修改器可互相替代，用户在一类开不了时知道去试另一类。 */
.sa-legend-swap {
  flex: none;
  padding: 0 1px;
  color: #6f7983;
  font-size: 13px;
  line-height: 1;
  user-select: none;
}
/* 提示词比标签名弱一档，避免和「蓝标/绿标」抢视觉重心 */
.sa-legend-hint {
  font-style: normal;
  font-size: 12px;
  color: #7e8892;
}
/* 详情页只显示当前修改器所属的一类，互换提示与箭头随之隐藏 */
.sa-lib-legend[data-single="1"] .sa-legend-hint,
.sa-lib-legend[data-single="1"] .sa-legend-swap { display: none; }
/* 图例项是纯说明文本，不可点也不可聚焦 */
.sa-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: default;
  user-select: none;
}
/* inline-flex 会覆盖 hidden 属性，需显式声明 */
.sa-legend-item[hidden] { display: none; }
/* 图例圆点：与状态点同一套细白圈 + 柔光，比卡片上略大以匹配字号 */
.sa-lib-legend .sa-card-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.sa-lib-legend .sa-dot-advanced { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 6px rgba(26, 159, 255, 0.75); }
.sa-lib-legend .sa-dot-super { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 6px rgba(124, 200, 53, 0.75); }

.sa-lib-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* 靠右由前面的 .sa-lib-legend（margin-left:auto）负责；
     图例在窄屏隐藏时这里需要接管，见下方 :not(:has()) 兜底 */
  flex: none;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #8b95a1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sa-lib-settings:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sa-lib-settings:focus { outline: none; }

/* 设置面板：统一为公告同款浅色框架 */
.sa-settings-overlay[hidden] { display: none !important; }
.sa-settings-dialog { width: min(480px, 100%); }
.sa-settings-title { margin: 0 0 6px; font-size: 14px; font-weight: 650; color: #252c30; }
.sa-settings-copy { margin: 0 0 14px; color: #4f585c; font-size: 12px; font-weight: 520; line-height: 1.7; }
.sa-settings-row { display: flex; gap: 8px; margin-bottom: 4px; }
.sa-settings-steampath {
  flex: 1;
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(48, 55, 58, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  color: #252c30;
  font-size: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s, background 0.15s;
}
.sa-settings-steampath:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(48, 55, 58, 0.32); }
.sa-settings-steampath:focus { outline: none; border-color: #0a84ff; background: #fff; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2); }
.sa-settings-steampath::placeholder { color: #889396; }
.sa-settings-browse {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 11px;
}
.sa-settings-status { margin: 8px 0 2px; font-size: 11.5px; line-height: 1.5; color: #5f686c; }
.sa-settings-status.ok { color: #237043; font-weight: 600; }
.sa-settings-status.warn { color: #b86000; font-weight: 600; }
.sa-settings-actions { gap: 8px; }
.sa-settings-actions .abtn.gray {
  height: 30px;
  padding: 0 16px;
  border-radius: 8px;
  background: rgba(40, 45, 48, 0.08);
  color: #4f585c;
  font-size: 11px;
}
.sa-settings-actions .abtn.gray:hover { background: rgba(40, 45, 48, 0.16); color: #252c30; }

.sa-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 24px;
  font-size: 12px;
  color: #8f98a0;
}
.sa-sort-value {
  padding: 4px 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  color: #c6d4df;
}

.sa-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  align-content: start;
}

/* GameCard: 复刻 Dock 的 Q 弹物理放大 + 浮起 + 阴影与点击按压回弹 */
.sa-card {
  position: relative;
  aspect-ratio: 460 / 215;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #212429;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
  will-change: transform;
}
.sa-card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 5;
}
.sa-card:active {
  transform: translateY(-2px) scale(0.97);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  transition-duration: 0.1s;
}
.sa-card-cover { position: absolute; inset: 0; background: linear-gradient(135deg, #2a2d34, #1d2025); }
.sa-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.sa-card:hover .sa-card-cover img { transform: scale(1.05); }
.sa-card-shade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 72%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.45) 68%, transparent);
  pointer-events: none;
}
.sa-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s;
  pointer-events: none;
}
.sa-card:hover::after { border-color: rgba(255, 255, 255, 0.2); }
/* 等级标记：标题前的小圆点。
   原先是 45 度斜角横幅，占据封面右上角（游戏 Logo 常在那里），且蓝绿高饱和
   比封面本身更抢眼；每张卡都有反而失去区分度。改为圆点后封面完整、列表清爽，
   等级文字保留在 title 属性里，悬停可见。 */
.sa-card-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: auto;
}
.sa-dot-advanced { 
  background: #38b6ff; 
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 6px rgba(56, 182, 255, 0.75);
}
.sa-dot-super { 
  background: #7cf01b; 
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 6px rgba(124, 240, 27, 0.75);
}
.sa-card-caption { position: absolute; inset-inline: 0; bottom: 0; padding: 10px 12px; z-index: 2; pointer-events: none; }
.sa-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 1px 8px rgba(0, 0, 0, 0.6);
}
/* 名称过长时省略号落在文字上，圆点不被挤掉。
   文字必须包在元素里才能生效：flex 容器里的裸文本节点无法应用 ellipsis。 */
.sa-card-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-card-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #c0c9d2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 1px 8px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-grid-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: #8f98a0; font-size: 13px; }

/* 骨架屏 */
.sa-skel-card { display: flex; flex-direction: column; }
.sa-skel-cover { aspect-ratio: 460 / 215; border-radius: 4px; background: rgba(255, 255, 255, 0.02); }
.sa-skel-title { height: 12px; width: 70%; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.02); }
.sa-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.01) 75%);
  background-size: 200% 100%;
  animation: saShimmer 1.5s infinite linear;
}
@keyframes saShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ============ 详情页 ============ */
.sa-page-detail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, #1f2630 0%, #151a21 55%, #11151b 100%);
}
.sa-page-detail::-webkit-scrollbar { width: 8px; }
.sa-page-detail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.sa-detail-loading {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #b8c1ca;
}
.sa-loader { position: relative; width: 72px; height: 72px; }
.sa-loader-ring {
  position: absolute;
  inset: 0;
  border: 5px solid rgba(26, 159, 255, 0.1);
  border-top-color: #66c0f4;
  border-right-color: #1a9fff;
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(26, 159, 255, 0.28);
  animation: saSpin 1s linear infinite;
}
.sa-loader-ring-inner {
  inset: 16px;
  border-width: 3px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: rgba(26, 159, 255, 0.75);
  border-left-color: rgba(102, 192, 244, 0.7);
  box-shadow: none;
  animation: saSpin 1.35s linear infinite reverse;
}
@keyframes saSpin { to { transform: rotate(360deg); } }
.sa-loader-text { font-size: 13px; letter-spacing: 0.03em; }

/* 使用须知弹窗复用老用户福利弹窗（.lco-notice 系列）的整体规格，
   在正文内追加警示提示框与分节标题，避免整段文字堆叠。 */
.sa-notice-body { display: flex; flex-direction: column; gap: 13px; }
.sa-notice-body p { margin: 0; }

.sa-notice-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(196, 68, 58, 0.3);
  border-left: 3px solid #c4443a;
  border-radius: 7px;
  background: rgba(196, 68, 58, 0.07);
}
.sa-notice-alert-icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c4443a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.sa-notice-alert-text { color: #9b332a; font-size: 12px; font-weight: 560; line-height: 1.6; }
.sa-notice-alert-text strong { color: #7a2721; }

.sa-notice-lead { color: #4f585c; font-size: 12px; font-weight: 520; line-height: 1.8; }
.sa-notice-lead strong { color: #23444f; font-weight: 700; }

.sa-notice-section { padding-top: 12px; border-top: 1px solid rgba(48, 55, 58, 0.14); }
.sa-notice-section h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  color: #23444f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.002em;
}
.sa-notice-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #2f7fd6; }
.sa-notice-section p { color: #4f585c; font-size: 12px; font-weight: 520; line-height: 1.8; }

.sa-detail-content { position: relative; min-height: 100%; }

/* 背景单独裁切，避免模糊封面越过详情内容底边形成拼接条 */
.sa-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* 单张封面 + 单层统一模糊, 从顶部一通到底 (无两层接缝) */
.sa-detail-cover {
  position: absolute;
  inset: -20px;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: blur(6px) saturate(0.96);
  transform: scale(1.03);
  pointer-events: none;
}
/* 单层压暗渐变: 头图区较亮可辨, 往下逐渐压暗到内容底色 */
.sa-detail-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(21, 26, 33, 0.28) 0px,
    rgba(21, 26, 33, 0.35) 150px,
    rgba(21, 26, 33, 0.62) 257px,
    rgba(21, 26, 33, 0.82) 430px,
    #151a21 640px);
}

/* Hero 头图区域 (只承载内容, 背景由统一封面提供) */
.sa-hero {
  position: relative;
  /* 要高于后面的 .sa-detail-body（也是 z-index:1）。两者同级时文档顺序靠后的
     会盖住前者，导致 hero 右上角那个说明气泡被内容区压住 —— 气泡自身的
     z-index 只在 .sa-hero 这个层叠上下文里有效，提不过父级。 */
  z-index: 3;
  flex: none;
}
/* 原为固定 height，加入更新次数一行后改 min-height，避免内容被裁切 */
.sa-hero-top { position: relative; z-index: 2; padding: 20px 20px 12px; min-height: 150px; box-sizing: border-box; }
.sa-hero-name {
  max-width: 720px;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  word-break: break-word;
}
/* 副标题行：英文原名单独一行 */
.sa-hero-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
}
/* 元信息行：会员等级 + 更新次数同处一行，与英文副标题分开 */
.sa-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* 英文原名：标题显示中文时在下方补一行原名，便于用户核对是不是想找的游戏 */
.sa-hero-name-en {
  min-width: 0;
  max-width: 720px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
  word-break: break-word;
}
.sa-appid-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-top: 10px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(216, 226, 234, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sa-appid-btn:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.5); color: #fff; }

/* 更新次数：取历史版本数，让用户直观看到这个修改器的维护频率。
   与会员等级同处 .sa-hero-meta 行内，间距由该行 gap 控制。 */
.sa-hero-updates {
  flex: none;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.74);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
.sa-hero-updates b { font-weight: 700; color: #fff; }

/* 玻璃操作条 (流式: 单行时 68px, 空间不足时自动换行增高, 永不重叠) */
.sa-hero-bar {
  position: relative;
  /* 高于紧随其后的 .sa-hero-tabs（z-index:2）。两者同级时 tabs 在文档顺序上
     靠后会盖住这里，右上角那个说明气泡就被切在 tab 栏下面。 */
  z-index: 4;
  min-height: 68px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(to bottom, rgba(54, 63, 73, 0.45), rgba(32, 38, 45, 0.7));
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.sa-launch-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 120px;
  height: 36px;
  padding: 0 20px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(to right, #47b04b, #257336);
  color: #d2efa9;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background 0.2s, color 0.2s;
}
.sa-launch-btn:disabled { cursor: wait; opacity: 0.82; }
/* 「开始游戏」与右侧箭头是同一块按钮：整组共用一条渐变与一层阴影，中间只用一道竖线分隔，
   因此运行态（红色）、悬停等状态变化会自然覆盖到箭头，不会出现主按钮变红、箭头仍绿的割裂。 */
.sa-launch-group {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  overflow: visible;
}
.sa-launch-group .sa-launch-btn { border-radius: 2px 0 0 2px; box-shadow: none; }
/* 箭头取主按钮渐变的尾端色，与主按钮拼成一整块。运行态由下面的 :has(.stop) 覆写，
   这样红/绿切换只需维护一处颜色，不会出现两半不同色。 */
.sa-launch-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 0 2px 2px 0;
  /* 主按钮渐变在右端收于 #257336，箭头直接续用该色，两者拼成一块无缝的按钮。 */
  background: #257336;
  color: #d2efa9;
  cursor: pointer;
}
.sa-launch-more:hover { background: #29803c; color: #fff; }
/* 运行态主按钮渐变右端是 #732525，箭头同步换色，避免红绿各一半。 */
.sa-launch-group:has(.sa-launch-btn.stop) .sa-launch-more {
  background: #732525;
  color: #efb0a9;
}
.sa-launch-group:has(.sa-launch-btn.stop) .sa-launch-more:hover {
  background: #802929;
  color: #fff;
}

/* 已指定自定义主程序时给箭头一点提示色，让用户知道当前不走 Steam 启动。 */
.sa-launch-group.has-custom .sa-launch-more { color: #ffd479; }
/* 下拉面板：沿用设置弹窗的浅色卡片风格（白底、圆角、蓝色主按钮），与站内其它对话框一致。 */
.sa-launch-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: 320px;
  padding: 16px;
  border-radius: 10px;
  background: #f4f6f8;
  color: #2a3f5a;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.sa-launch-menu-title { font-size: 14px; font-weight: 700; color: #1b2838; }
.sa-launch-menu-copy {
  margin: 6px 0 12px;
  color: #5b6b7f;
  font-size: 12px;
  line-height: 1.6;
}
.sa-launch-status {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fdecea;
  color: #b3261e;
  font-size: 12px;
  line-height: 1.5;
}
.sa-launch-current {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #dfe6ee;
}
.sa-launch-current-path {
  flex: 1;
  overflow: hidden;
  color: #2a3f5a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
.sa-launch-clear {
  flex: none;
  border: none;
  background: transparent;
  color: #8695a8;
  font-size: 12px;
  cursor: pointer;
}
.sa-launch-clear:hover { color: #d5453b; }
.sa-launch-pick {
  width: 100%;
  height: 34px;
  margin-top: 12px;
  border: none;
  border-radius: 6px;
  background: #2f7fe0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sa-launch-pick:hover { background: #2b72c9; }
/* 启动期间按钮文案会随阶段切换（等待游戏 / 注入中 / 分配变量 …）。锁定宽度，
   避免每次阶段跃迁都让按钮和它右侧的布局横向跳动。 */
.sa-launch-btn[data-state="starting"] { min-width: 150px; }
/* 启动/结束期间的转圈图标。整圈作底、粗弧作头，旋转本体即可读出"仍在推进"。 */
.sa-launch-spinner { animation: sa-launch-spin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes sa-launch-spin { to { transform: rotate(360deg); } }
.sa-launch-btn:hover:not(:disabled) { background: linear-gradient(to right, #4fc354, #29803c); color: #fff; }
.sa-launch-btn.stop { background: linear-gradient(to right, #b04747, #732525); color: #efb0a9; min-width: 150px; }
.sa-launch-btn.stop:hover:not(:disabled) { background: linear-gradient(to right, #c34f4f, #802929); color: #fff; }
.sa-hero-right { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.sa-persist { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8f98a0; cursor: pointer; }
.sa-persist-switch {
  width: 32px;
  height: 16px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid #3e444b;
  border-radius: 8px;
  background: #2d3238;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background 0.15s, border-color 0.15s;
}
.sa-persist-switch.on { justify-content: flex-end; background: #1a9fff; border-color: #1a9fff; }
.sa-persist-nob { width: 12px; height: 12px; border-radius: 50%; background: #68727d; transition: background 0.15s; }
.sa-persist-switch.on .sa-persist-nob { background: #fff; }
.sa-persist-switch.on ~ .sa-persist-text { color: #fff; }
.sa-hero-version { display: flex; flex-direction: column; gap: 2px; }
.sa-version-line { font-size: 11px; line-height: 16px; color: #8f98a0; white-space: nowrap; }
.sa-version-line b { color: #dbe2e6; font-weight: 400; }
.sa-hero-actions { display: flex; gap: 4px; }
.sa-hero-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: rgba(58, 65, 74, 0.85);
  color: #c7d5e0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, color 0.15s;
}
.sa-hero-icon:hover { background: #46505c; color: #fff; }

/* Tab 条 */
.sa-hero-tabs {
  position: relative;
  z-index: 2;
  height: 39px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(29, 37, 48, 0.52);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  font-size: 13px;
  color: #8f98a0;
}
.sa-hero-tabs::-webkit-scrollbar { display: none; }
.sa-hero-tab {
  flex: none;
  height: 30px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sa-hero-tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sa-hero-tab.on { background: rgba(255, 255, 255, 0.11); color: #fff; border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.sa-hero-tab-dim { opacity: 0.55; cursor: default; }
.sa-hero-tab-dim:hover { background: transparent; color: #8f98a0; }

/* 详情内容两栏 */
.sa-detail-body { position: relative; z-index: 1; }
.sa-trainer-view { display: flex; gap: 20px; padding: 12px 20px 48px; align-items: flex-start; }
.sa-history-view { display: flex; padding: 12px 20px 48px; }
.sa-history-view[hidden], .sa-trainer-view[hidden] { display: none; }
.sa-detail-side {
  position: sticky;
  top: 12px;
  width: 176px;
  flex: none;
  max-height: calc(100cqh - 70px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(21, 27, 34, 0.38);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}
.sa-detail-side::-webkit-scrollbar { display: none; }
.sa-side-section-title { display: none; }
.sa-side-section-gap { margin-top: 10px; }
.sa-trainer-picker { position: relative; }
.sa-trainer-trigger {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background: #202b3e;
  color: #dbe2e6;
  font: 600 12px/1 inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.15s, border-color 0.15s;
}
.sa-trainer-trigger:hover { background: #26354b; border-color: rgba(255, 255, 255, 0.14); }
.sa-trainer-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-trainer-menu {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid rgba(26, 159, 255, 0.2);
  border-radius: 3px;
  background: #171d24;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  display: none;
  scrollbar-width: none;
}
.sa-trainer-menu::-webkit-scrollbar { display: none; }
.sa-trainer-picker.open .sa-trainer-menu { display: block; }
.sa-trainer-opt {
  height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #8f98a0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sa-trainer-opt:hover { background: rgba(26, 159, 255, 0.1); color: #fff; }
.sa-trainer-opt.active { color: #1a9fff; font-weight: 700; }
.sa-trainer-check { opacity: 0; color: #1a9fff; }
.sa-trainer-opt.active .sa-trainer-check { opacity: 1; }
.sa-trainer-empty { padding: 12px 10px; font-size: 12px; color: #4f5359; }
.sa-cat-list { display: flex; flex-direction: column; gap: 2px; }
.sa-cat-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #8f98a0;
  font: 500 14px/1 inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.sa-cat-icon { flex: none; color: #6b747f; transition: color 0.15s; }
.sa-cat-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sa-cat-btn:hover .sa-cat-icon { color: #dbe2e6; }
.sa-cat-btn.active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sa-cat-btn.active .sa-cat-icon { color: #dbe2e6; }
.sa-cat-btn > span:not(.sa-cat-count) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-cat-count { flex: none; font-size: 11px; color: #4f5359; }
.sa-cat-settings { margin-top: 16px; }
.sa-side-total { margin-top: 4px; padding: 0 10px; font-size: 11px; color: #4f5359; }

/* 右侧修改面板 */
.sa-detail-main {
  flex: 1;
  min-width: 0;
}
.sa-mod-toolbar {
  height: 34px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.sa-mod-counter { font-size: 12px; color: #8f98a0; }
.sa-mod-counter b { color: #fff; font-weight: 700; }
.sa-mod-actions { display: flex; gap: 6px; }

/* 使用说明的悬浮提示。挂在 hero 右上角的图标上，复用 .sa-hero-icon 的外观，
   只额外给个提示色。用自绘气泡而不是原生 title：原生 title 有一秒左右延迟，
   且长文本会被系统截断。 */
.sa-mod-notice {
  position: relative;
  color: #d9a03a;
  cursor: help;
}
.sa-mod-notice[hidden] { display: none; }
.sa-mod-notice:hover { color: #f0b743; }
/* 图标在右上角，气泡必须往左下展开，否则会顶出窗口右边界。 */
.sa-mod-notice-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  /* 固定宽度，不用 max-content：说明里常有长 URL，max-content 会让气泡
     按那一行撑到超出 max-width 再被裁掉，右侧文字就看不见了。 */
  width: 340px;
  padding: 10px 12px;
  border-radius: 10px;
  /* 与系统菜单 .menu-drop 同配方。 */
  background: rgba(242, 242, 246, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  color: #1d1d1f;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  /* 长 URL 没有空格，不强制断字就会撑破容器。 */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
/* 悬停时允许滚动长文本，所以要能接收鼠标事件。 */
.sa-mod-notice:hover .sa-mod-notice-pop { pointer-events: auto; }
.sa-mod-notice:hover .sa-mod-notice-pop,
.sa-mod-notice:focus-visible .sa-mod-notice-pop {
  opacity: 1;
  transform: none;
}
.sa-mod-btn {
  height: 24px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
  color: #8f98a0;
  font: 500 11px/1 inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sa-mod-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sa-mod-toolbar { display: none; }
.sa-cheats-scroll {
  overflow: visible;
  padding: 0 0 16px 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.sa-cheats-scroll::-webkit-scrollbar { width: 8px; }
.sa-cheats-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.sa-cheats { display: flex; flex-direction: column; gap: 12px; }
.sa-cheat-section {
  flex: none;
  /* 原来是 overflow:hidden（为了让圆角裁住内容），但那样会把功能行里说明气泡
     超出卡片的部分一起裁掉。clip + clip-margin 保留圆角裁剪，同时给气泡留出
     溢出空间。 */
  overflow: clip;
  overflow-clip-margin: 320px;
  scroll-margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(21, 27, 34, 0.48);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.sa-cheat-group {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #dbe2e6;
}
.sa-cheat-group-count { font-size: 10px; font-weight: 400; color: #56616d; }
.sa-cheat-group-icon { flex: none; color: #8f98a0; }
.sa-cheat-group-rows { padding: 8px 12px; }
.sa-cheat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  transition: background 0.12s;
}
.sa-cheat-row:hover { background: rgba(255, 255, 255, 0.08); }
.sa-cheat-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* 名字行改成 flex：里面要放说明图标，而图标的气泡不能被名字的 ellipsis 裁掉，
   所以截断交给内层的 .sa-cheat-name-text，容器本身不设 overflow。 */
.sa-cheat-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #dbe2e6;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.sa-cheat-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-cheat-desc { font-size: 11px; color: #6b747f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 每个功能的说明图标。功能行密集，气泡往右下展开并抬高层级，
   否则会被相邻行和控件列压住。 */
.sa-cheat-hint {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  color: rgba(217, 160, 58, 0.75);
  cursor: help;
  outline: none;
}
.sa-cheat-hint:hover, .sa-cheat-hint:focus-visible { color: #f0b743; }
.sa-cheat-hint-pop {
  position: fixed;
  z-index: 10001;
  width: 320px;
  padding: 9px 12px;
  border-radius: 10px;
  /* 配方与系统菜单 .menu-drop 一致：浅色毛玻璃。 */
  background: rgba(242, 242, 246, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  /* 说明里可能有换行和长 URL。 */
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.sa-cheat-hint-pop.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sa-cheat-ctrl { display: flex; justify-content: center; }
.sa-toggle {
  width: 60px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
  color: #8f98a0;
  font: 500 12px/1 inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sa-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sa-toggle.on { background: #1a9fff; border-color: rgba(108, 199, 255, 0.4); color: #fff; }
/* 鼠标点击后不残留焦点框；键盘导航仍保留可见焦点以维持可访问性 */
.sa-toggle:focus { outline: none; }
.sa-toggle:focus-visible { outline: none; border-color: rgba(108, 199, 255, 0.7); box-shadow: 0 0 0 2px rgba(26, 159, 255, 0.35); }
.sa-action-btn,.sa-apply-btn,.sa-step-btn,.sa-unsupported {
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.24);
  color: #b8c0c7;
  font: 600 11px/1 inherit;
}
.sa-action-btn,.sa-apply-btn { min-width: 54px; padding: 0 10px; cursor: pointer; }
.sa-action-btn:hover,.sa-apply-btn:hover { border-color: rgba(108, 199, 255, 0.46); background: rgba(26, 159, 255, 0.18); color: #fff; }
.sa-action-btn:focus,.sa-apply-btn:focus,.sa-step-btn:focus { outline: none; }
.sa-action-btn:focus-visible,.sa-apply-btn:focus-visible,.sa-step-btn:focus-visible {
  outline: none; border-color: rgba(108, 199, 255, 0.7); box-shadow: 0 0 0 2px rgba(26, 159, 255, 0.35);
}
.sa-unsupported:disabled { padding: 0 9px; opacity: 0.48; cursor: not-allowed; }
.sa-number-control { display: flex; align-items: center; height: 28px; }
.sa-step-btn { width: 27px; padding: 0; cursor: pointer; }
.sa-step-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sa-number-input {
  width: 88px;
  height: 26px;
  margin: 0 -1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  color: #dbe2e6;
  font: 600 11px/1 ui-monospace, monospace;
  text-align: center;
  outline: none;
}
.sa-number-input:focus { border-color: rgba(108, 199, 255, 0.58); z-index: 1; }
.sa-number-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.sa-apply-btn { margin-left: 6px; }
.sa-slider-control { display: flex; align-items: center; gap: 9px; min-width: 206px; }
.sa-range-input { 
  width: 154px; 
  height: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer; 
}
.sa-range-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}
.sa-range-input::-moz-range-track {
  width: 100%;
  height: 8px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}
.sa-range-input::-webkit-slider-thumb { 
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px;
  border: none;
  border-radius: 50%;
  background: #1a9fff;
  box-shadow: 0 1px 4px rgba(26, 159, 255, 0.4);
  cursor: pointer;
  outline: none;
}
.sa-range-input::-moz-range-thumb { 
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #1a9fff;
  box-shadow: 0 1px 4px rgba(26, 159, 255, 0.4);
  cursor: pointer;
  outline: none;
}
.sa-range-input:focus { outline: none; }
.sa-range-input:focus::-webkit-slider-thumb { outline: none; }
.sa-range-input:focus::-moz-range-thumb { outline: none; }
.sa-slider-control output { min-width: 44px; color: #8fc8f5; font: 700 11px/1 ui-monospace, monospace; text-align: right; }
.sa-select { position: relative; width: min(230px, 28vw); }
.sa-select-trigger {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: #dbe2e6;
  padding: 0 10px;
  font: 500 11px/1 inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.sa-select-trigger:hover { border-color: rgba(255, 255, 255, 0.22); }
.sa-select-trigger:focus-visible { border-color: rgba(108, 199, 255, 0.58); }
.sa-select-trigger:disabled { opacity: 0.5; cursor: default; }
.sa-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sa-select-arrow {
  flex: none; width: 7px; height: 7px;
  border-right: 1.6px solid rgba(219, 226, 230, 0.7);
  border-bottom: 1.6px solid rgba(219, 226, 230, 0.7);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.sa-select.open .sa-select-arrow { transform: translateY(1px) rotate(-135deg); }
.sa-select-menu {
  position: fixed;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 1px;
  background: rgba(244, 244, 247, 0.98);
  border-radius: 11px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  scrollbar-width: none;
}
.sa-select-menu::-webkit-scrollbar { display: none; }
.sa-select.open .sa-select-menu, .sa-select-menu.open { display: flex; }
.sa-select-option {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #1d1d1f;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  outline: none;
}
.sa-select-option > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-select-option:hover, .sa-select-option:focus-visible { background: #0a84ff; color: #fff; }
.sa-select-option.selected { font-weight: 650; }
.sa-cheat-row.enabled { background: rgba(124, 200, 53, 0.04); }
/* 热键列可含多组「动作 + 按键」（numeric/slider/options 各有增减两组） */
.sa-cheat-key { display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.sa-kbd-action { flex: none; font-size: 11px; color: #6b747f; }
.sa-kbd-action + .sa-kbd { margin-right: 4px; }
.sa-kbd-action + .sa-kbd:last-child { margin-right: 0; }
.sa-kbd {
  min-width: 32px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  color: #dbe2e6;
  font: 700 11px/1.4 monospace;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 历史版本面板 (对齐 52Box HistoryVersionPanel) */
.sa-history-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(21, 27, 34, 0.48);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.sa-history-head {
  flex: none;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.sa-history-head-icon { flex: none; color: #8f98a0; }
.sa-history-current { margin-left: auto; font-size: 11px; font-weight: 400; color: #8f98a0; }
.sa-history-current b { color: #dbe2e6; font-weight: 400; }
.sa-history-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.sa-history-list::-webkit-scrollbar { display: none; }
.sa-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.12s;
}
.sa-history-meta { white-space: nowrap; }
.sa-history-row:hover { background: rgba(255, 255, 255, 0.05); }
.sa-history-date { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.sa-history-badge {
  padding: 1px 6px;
  border: 1px solid rgba(108, 199, 255, 0.4);
  border-radius: 2px;
  background: #1a9fff;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.sa-history-meta { text-align: right; font-size: 12px; color: #8f98a0; font-variant-numeric: tabular-nums; }
.sa-history-switch {
  height: 28px;
  padding: 0 16px;
  border: 1px solid rgba(108, 199, 255, 0.4);
  border-radius: 2px;
  background: #1a9fff;
  color: #fff;
  font: 700 12px/1 inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sa-history-switch:hover { background: #3bb0ff; }
.sa-history-switch.current {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #6b747f;
  cursor: default;
}
.sa-history-empty { padding: 56px 0; text-align: center; color: #8f98a0; font-size: 13px; }

/* 错误面板 */
.sa-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; text-align: center; }
.sa-error-icon { color: #e63c00; }
.sa-error-title { font-size: 15px; font-weight: 500; color: #fff; }
.sa-error-msg {
  max-width: 600px;
  padding: 12px;
  border: 1px solid #31363c;
  border-radius: 6px;
  background: #0c0f13;
  color: #8f98a0;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.sa-error-retry {
  height: 28px;
  padding: 0 16px;
  border: 1px solid rgba(108, 199, 255, 0.4);
  border-radius: 2px;
  background: #1a9fff;
  color: #fff;
  font: 700 12px/1 inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sa-error-retry:hover { background: #3bb0ff; }

/* ========================================================================== 
   自适应
   - App 壳由 ResizeObserver 生成 sa-compact / sa-short 状态
   - 库页与详情页按 sa-main 的真实可用尺寸做容器查询
   ========================================================================== */

/* ---- 窄应用壳 (< 760px): 48px 图标栏 + 覆盖式侧栏抽屉 ---- */
.sa-compact .sa-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(282px, calc(100% - 32px));
  height: 100%;
  box-shadow: 10px 0 28px rgba(0, 0, 0, 0.42), inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
.sa-compact.sa-sidebar-collapsed .sa-sidebar { width: 40px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04); }
.sa-compact .sa-main {
  width: calc(100% - 40px);
  margin-left: 40px;
}
.sa-compact.sa-sidebar-open .sa-sidebar-scrim { display: block; }

/* ---- 主区较宽: 逐级压缩顶部导航与库页网格 ---- */
@container samain (max-width: 900px) {
  .sa-lib-inner { padding: 18px 24px; }
  .sa-grid-container { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
  /* 窄屏先隐藏提示词与箭头，只留「蓝标 绿标」两个标签，
     这样在放不下整句时仍能保留颜色对照关系，比整块消失更有用 */
  .sa-legend-hint,
  .sa-legend-swap { display: none; }
  .sa-lib-legend { gap: 8px; }
}

@container samain (max-width: 720px) {
  .sa-topnav { padding-inline: 12px; }
  .sa-nav-arrows { margin-right: 20px; }
  .sa-nav { gap: 20px; }
  .sa-lib-inner { padding: 16px 18px; }
  .sa-sort-row { margin: 14px 0 18px; }
  .sa-grid-container { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; }
  /* 图例需要约 210px，加上箭头 86 + tab 245 + 齿轮 28 + 内距 64 共约 633px，
     主区收到 720px 以下时余量已经不足，继续保留会把 tab 文字压到截断。
     这里直接隐藏，靠右定位交给齿轮。原来定在 480px 才隐藏，导致
     480~720px 这段区间 tab 被截断、图例贴着顶栏右缘显示。 */
  .sa-lib-legend { display: none; }
  .sa-lib-settings { margin-left: auto; }
}

/* ---- 主区中等: 详情两栏改为整页滚动 + 顶部横向粘性分类条 ---- */
@container samain (max-width: 620px) {
  .sa-trainer-view { flex-direction: column; gap: 12px; padding: 12px 14px 40px; }
  .sa-detail-side {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    max-height: none;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: 6px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .sa-detail-side::-webkit-scrollbar { display: none; }
  .sa-cat-list { flex: none; min-width: max-content; flex-direction: row; flex-wrap: nowrap; gap: 2px; }
  .sa-cat-btn { flex: none; height: 30px; padding-inline: 10px; }
  .sa-cat-btn > span:not(.sa-cat-count) { flex: none; }
  .sa-cat-count, .sa-cat-settings, .sa-side-total { display: none; }
  .sa-detail-main { width: 100%; }
  .sa-cheat-section { scroll-margin-top: 54px; }
  .sa-history-view { padding: 12px 14px 40px; }
  .sa-history-panel { width: 100%; }
}

/* ---- 手机宽度: 导航、头图、修改项和历史版本进一步收敛 ---- */
@container samain (max-width: 480px) {
  .sa-topnav { height: 42px; padding-inline: 8px; }
  .sa-nav-arrows { gap: 0; margin-right: 8px; }
  .sa-arrow-btn { width: 28px; height: 28px; }
  .sa-nav { min-width: 0; gap: 12px; }
  .sa-nav-item { font-size: 16px; white-space: nowrap; }
  .sa-nav-item::after { bottom: 6px; }
  .sa-lib-inner { padding: 14px 12px 20px; }
  /* 手机宽度优先保证 tab 完整，图例让位；齿轮接管靠右 */
  .sa-lib-legend { display: none; }
  .sa-lib-settings { margin-left: auto; }
  /* 顶栏只有 42px，tab 需同步缩小，否则会撑破容器并偏离垂直居中 */
  .sa-lib-head { gap: 6px; }
  .sa-lib-badge { padding: 3px 8px; font-size: 12px; }
  .sa-nav-arrows { margin-right: 6px; }
  .sa-sort-row { margin: 12px 0 14px; }
  .sa-grid-container { grid-template-columns: 1fr; }
  .sa-hero-top { min-height: 128px; height: auto; padding: 14px 14px 10px; }
  .sa-hero-name { font-size: 22px; }
  .sa-hero-bar { padding: 10px 14px; }
  .sa-launch-btn { width: 100%; }
  .sa-hero-right { width: 100%; justify-content: space-between; }
  .sa-hero-tabs { padding-inline: 10px; }
  .sa-hero-tab { padding-inline: 16px; }
  .sa-cheat-group-rows { padding: 6px 8px; }
  .sa-cheat-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px; }
  .sa-cheat-key, .sa-cheat-desc { display: none; }
  .sa-toggle { width: 56px; }
  .sa-history-head { padding-inline: 12px; }
  .sa-history-current { display: none; }
  .sa-history-list { padding: 8px; }
  .sa-history-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 12px; }
  .sa-history-meta { grid-column: 1; text-align: left; }
  .sa-history-switch { grid-column: 2; grid-row: 1 / span 2; padding-inline: 12px; }
}

@container samain (max-width: 360px) {
  .sa-nav { gap: 8px; }
  .sa-nav-item { font-size: 15px; }
  .sa-hero-name { font-size: 19px; }
  .sa-persist { display: none; }
  .sa-hero-actions { display: none; }
  .sa-cheat-group { padding-inline: 10px; }
  .sa-cheat-name { font-size: 13px; }
}

/* ---- 低高度窗口: 仍由详情页整体滚动，仅压缩非关键头部信息 ---- */
.sa-short .sa-hero-top { min-height: 112px; height: auto; padding: 12px 20px 8px; }
.sa-short .sa-hero-name { font-size: 21px; }
.sa-short .sa-hero-version, .sa-short .sa-hero-actions { display: none; }
.sa-short .sa-hero-bar { min-height: 56px; padding-block: 8px; }
/* 窗口很矮时纵向空间紧张，更新次数让位 */
.sa-very-short .sa-hero-top { min-height: 88px; height: auto; padding: 8px 16px 6px; }
.sa-very-short .sa-hero-name { font-size: 18px; }
.sa-very-short .sa-appid-btn, .sa-very-short .sa-persist, .sa-very-short .sa-hero-updates { display: none; }
.sa-very-short .sa-hero-bar { min-height: 0; padding: 6px 16px; }
.sa-very-short .sa-hero-tabs { height: 32px; }
.sa-very-short .sa-hero-tab { height: 26px; padding-inline: 16px; }


@media (prefers-reduced-motion: reduce) {
  .sa-card, .sa-toggle, .sa-launch-btn, .sa-hero-icon, .sa-side-item, .sa-cheat-row { transition: none; }
  .sa-card:hover { transform: none; }
  /* 转圈是"仍在推进"的唯一视觉指示，不能整体去掉；显著降速以减轻动效负担。 */
  .sa-launch-spinner { animation-duration: 2.4s; }
}