/* 下载页「版本选择器」样式
 * 2026-09-12 视觉优化 v2（承接 20260912 初版）：
 *  ① 触发框由通栏改为「限宽 400px + 居中」，两侧留白，不再显得又宽又空；
 *  ② 触发框加彩色渐变描边（紫→橙）+ 左侧彩色 OS 圆点 + 版本/体积彩色胶囊，边缘有颜色元素；
 *  ③ 提示语由左对齐改为居中，并上下留出间距；
 *  ④ 下拉浮层加进入动画、选项加彩色圆点与「推荐」标签。
 * 仅作用于 download.html 的 .ver-select 子树，不影响页面其它元素。 */

/* ---------- 容器：居中 + 限宽 ---------- */
.ver-select {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 20px auto 18px;
  text-align: left;
}

/* ---------- 触发框：彩色渐变描边 + 柔和投影 ---------- */
.ver-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #cfc2ff 0%, #e8def9 48%, #ffd3b3 100%) border-box;
  color: #2a2f45;
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 3px 12px rgba(31, 38, 76, .06);
  transition: background .2s ease, box-shadow .2s ease;
}
.ver-select-trigger:hover {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #7c5cff 0%, #b98cff 50%, #ff9a4d 100%) border-box;
  box-shadow: 0 6px 18px rgba(110, 69, 226, .16);
}
.ver-select-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 92, 255, .20);
}
.ver-select-trigger[aria-expanded="true"] {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #7c5cff 0%, #b98cff 50%, #ff9a4d 100%) border-box;
  box-shadow: 0 0 0 3px rgba(123, 92, 255, .16), 0 6px 18px rgba(110, 69, 226, .14);
}

/* 左侧彩色圆点：系统标识 */
.ver-select-trigger::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5cff, #ff9a4d);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .13);
}

.ver-select-trigger .vs-arch { font-weight: 700; letter-spacing: .2px; }
.ver-select-trigger .vs-ver {
  flex: 0 0 auto;
  color: #6a4bd6;
  background: #f2edff;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12.5px;
  font-weight: 600;
}
.ver-select-trigger .vs-size {
  flex: 0 0 auto;
  color: #8a5a1f;
  background: #fff4e8;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12.5px;
  margin-left: auto;
  white-space: nowrap;
}
.ver-select-trigger .vs-caret {
  flex: 0 0 auto;
  color: #7c5cff;
  font-size: 12px;
  transition: transform .2s ease;
}
.ver-select-trigger[aria-expanded="true"] .vs-caret { transform: rotate(180deg); }

/* ---------- 下拉浮层 ---------- */
.ver-select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(31, 38, 76, .18);
  animation: vsListIn .16s ease;
}
@keyframes vsListIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.ver-select-list[hidden] { display: none; }

.vs-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14.5px;
  color: #2a2f45;
  transition: background .15s ease;
}
/* 选项左侧彩色圆点：64 位紫、32 位橙 */
.vs-option::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9d5ea;
  transition: background .15s ease;
}
.vs-option[data-arch="x64"]::before  { background: linear-gradient(135deg, #7c5cff, #b98cff); }
.vs-option[data-arch="ia32"]::before { background: linear-gradient(135deg, #ffb057, #ff7a3d); }

.vs-option:hover { background: #f6f4fe; }
.vs-option:focus-visible { outline: none; background: #f6f4fe; box-shadow: inset 0 0 0 2px rgba(123, 92, 255, .38); }
.vs-option .vs-arch { font-weight: 700; }
.vs-option .vs-ver { color: #6b7186; font-size: 13px; }
.vs-option .vs-size { color: #6b7186; font-size: 13px; margin-left: auto; white-space: nowrap; }

/* 「推荐」标签：仅自动识别选中的那一项显示 */
.vs-badge {
  display: none;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f2edff;
  color: #6a4bd6;
}
.vs-option[aria-selected="true"] {
  background: linear-gradient(135deg, #7c5cff, #6a4bd6);
  color: #fff;
}
.vs-option[aria-selected="true"]::before { background: #fff; }
.vs-option[aria-selected="true"] .vs-ver,
.vs-option[aria-selected="true"] .vs-size { color: rgba(255, 255, 255, .88); }
.vs-option[aria-selected="true"] .vs-badge { display: inline-block; background: rgba(255, 255, 255, .24); color: #fff; }

/* ---------- 提示语：居中 + 上下留白（固定占位，不挤压下方按钮） ---------- */
.vs-hint {
  margin: 12px auto 0;
  max-width: 400px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b7186;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
/* 提示语前不再加图标（用户反馈去掉 ℹ/⚠ 前缀） */
.vs-hint::before { content: none; }
.vs-hint.vs-hint-warn::before { content: none; }

/* ---------- 窄屏适配 ---------- */
@media (max-width: 520px) {
  .ver-select { max-width: 100%; margin: 16px auto 14px; }
  .ver-select-trigger { font-size: 14px; padding: 11px 12px; }
  .ver-select-trigger .vs-ver,
  .ver-select-trigger .vs-size { font-size: 12px; }
  .vs-hint { max-width: 100%; font-size: 12px; }
}