/* ═══════════════ 配色变量（原 themes.css 并入） ═══════════════ */

/* ════════════════════════════════════════════════════════
   单套配色：暖米白护眼浅色方案
   色调方向：暖米白底 + 暖化紫主色，减少蓝光，久看不疲劳
   组件统一使用 --ds-* 变量
   ════════════════════════════════════════════════════════ */

html {
  /* ── 页面与卡片背景（暖米白，替代冷白） ── */
  --ds-yemian-beijing: #f2f0eb;
  --ds-kapian-beijing: #fdfbf7;

  /* ── 文字（暖深棕，替代冷黑） ── */
  --ds-wenzi-zhu: #2c2825;
  --ds-wenzi-ci: #8a8078;
  --ds-wenzi-dan: #b0a898;
  --ds-wenzi-tishi: #9e9488;
  --ds-wenzi-shuliang: #c4bbb0;

  /* ── 边框（暖灰，替代冷灰蓝） ── */
  --ds-biankuang: #dedad2;
  --ds-biankuang-rouhe: #e8e4dc;
  --ds-biankuang-liebiao: #e4e0d8;
  --ds-biankuang-hang: #eae6de;
  --ds-biankuang-yeqian: #e4e0d8;

  /* ── 输入框 ── */
  --ds-shuru-beijing: #f5f2ec;
  --ds-shuru-biankuang: #d8d4cc;
  --ds-shuru-jiaodian-beijing: #fdfbf7;
  --ds-zhanweifu: #b8b0a4;

  /* ── 列表区域 ── */
  --ds-liebiao-biaotou-beijing: #f8f5ef;
  --ds-gequ-beijing: #fdfbf7;
  --ds-gequ-xuanting-beijing: #faf5f0;
  --ds-gequ-wenzi: #8a8078;
  --ds-geming-xuanting: #5c4a9e;
  --ds-geshou-xuanting: #7a68b8;
  --ds-gequ-id: #c4bbb0;
  --ds-gequ-id-xuanting: #a090cc;
  --ds-gequ-id-bofang: #a896d8;
  --ds-gequ-yingzi: rgba(110, 95, 180, 0.13);
  --ds-gequ-yingzi-bofang: #7a68b8;

  /* ── 播放器 ── */
  --ds-bofangqi-beijing: #fdfbf7;
  --ds-bofangqi-biaoti: #2c2825;
  --ds-jindu-cao: #e4dfd6;
  --ds-kongzhi-an: #c4bbb0;

  /* ── 歌词栏 ── */
  --ds-geci-lan-beijing: rgba(253, 251, 247, 0.88);
  --ds-geci-lan-biankuang: rgba(110, 95, 180, 0.12);
  --ds-geci-an-xuanting-beijing: #ede8f8;
  --ds-geci-an-xuanting-wenzi: #7a68b8;

  /* ── 友情 ── */
  --ds-youqing-biaoti: #b8b0a4;

  /* ── 分页按钮 ── */
  --ds-fanye-beijing: #f0ece4;
  --ds-fanye-biankuang: #dedad2;
  --ds-fanye-wenzi: #625a50;
  --ds-fanye-xuanting-beijing: #e8e0f4;
  --ds-fanye-xuanting-biankuang: #b8a8e0;
  --ds-fanye-xuanting-wenzi: #5c4a9e;

  /* ── 友情链接悬停底色（原数据源选择器只剩这一个在用） ── */
  --ds-youqing-xuanting-beijing: #f5f0fc;

  /* ── Tab / 状态 ── */
  --ds-yeqian-wenzi: #2c2825;
  --ds-zhuangtai-wenzi: #5c4a9e;
  --ds-zhuangtai-biankuang: #ddd8f0;

  /* ── 遮罩层 ── */
  --ds-zhezhao-beijing: rgba(242, 240, 235, 0.97);
  --ds-zhezhao-biaoti: #5a5248;
  --ds-zhezhao-guanbi: #b8b0a4;

  /* ── 滚动条 ── */
  --ds-gundongtiao: #d8d0c4;

  /* ── 歌词 ── */
  --ds-geci-hang: #c4bbb0;
  --ds-geci-hang-xuanting: #9888cc;
  --ds-geci-hang-dangqian: #7a68b8;
  --ds-geci-kong: #c4bbb0;

  /* ── 主色调：暖化紫（蓝光减少，偏红紫方向） ── */
  --ds-zhuse: #7a68b8;
  --ds-zhuse-xuanting: #6a5aa8;
  --ds-zhuse-rouhe: #9888cc;
  --ds-zhuse-shen: #5c4a9e;
  --ds-zhuse-shang-wenzi: #ffffff;
  --ds-lianjie-xuanting: #4a3a8c;
  --ds-bofang-lie: #7a68b8;
  --ds-bofang-lie-bofang: #5c4a9e;
}

/* ════════════════════════════════════════════════════════
   全局 & 布局
   字体：优先系统字体，iOS/macOS → San Francisco，
         Windows → 微软雅黑，Android → Roboto/思源
   ════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
a {
  text-decoration: none;
}

a:hover {
  text-decoration: none; /* 悬停时显示下划线，提升可识别性 */
}
body {
  background: var(--ds-yemian-beijing);
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC",
               "Hiragino Sans GB", Roboto, "Noto Sans CJK SC", sans-serif;
  color: var(--ds-wenzi-zhu);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 1rem;
}

/* SVG 图标通用 */
.tubiao {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
}
.tubiao svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════
   容器
   ════════════════════════════════════════════════════════ */
.rongqi {
  width: 100%; max-width: 960px; background: var(--ds-kapian-beijing);
  border-radius: 16px; padding: 1.5rem 1.5rem 1rem;
  display: flex; flex-direction: column; gap: 1rem;
  border: 0.5px solid var(--ds-biankuang);
  margin-bottom: 195px;
}

/* ════════════════════════════════════════════════════════
   首页 portal 卡片
   ════════════════════════════════════════════════════════ */
.menhu-kuai {
  border: 0.5px solid var(--ds-biankuang-rouhe);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
}

/* ════════════════════════════════════════════════════════
   搜索行
   ════════════════════════════════════════════════════════ */
.sousuo-hang { display: flex; gap: 8px; align-items: center; }

.sousuo-kuang { flex: 1; position: relative; min-width: 0; }
.sousuo-kuang input {
  width: 100%; background: var(--ds-shuru-beijing); border: 0.5px solid var(--ds-shuru-biankuang);
  border-radius: 24px; padding: 9px 16px;
  color: var(--ds-wenzi-zhu); font-size: 16px; outline: none;
  font-family: inherit;
}
.sousuo-kuang input::placeholder { color: var(--ds-zhanweifu); }
.sousuo-kuang input:focus { border-color: var(--ds-zhuse); background: var(--ds-shuru-jiaodian-beijing); }

.sousuo-anniu {
  background: var(--ds-zhuse); border: none; border-radius: 24px;
  padding: 9px 20px; color: white; font-size: 14px;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.sousuo-anniu:hover { background: var(--ds-zhuse-xuanting); }

/* ════════════════════════════════════════════════════════
   接口选择按钮
   ════════════════════════════════════════════════════════ */
.jiekou-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.jiekou-anniu {
  border: 0.5px solid var(--ds-shuru-biankuang);
  background: var(--ds-shuru-beijing);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  color: var(--ds-wenzi-zhu);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.jiekou-anniu:hover { border-color: var(--ds-zhuse); }
.jiekou-anniu.xuanzhong {
  background: var(--ds-zhuse);
  color: #fff;
  border-color: var(--ds-zhuse);
}
.jiekou-anniu.bukeyong {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════
   快速搜索词 chip
   ════════════════════════════════════════════════════════ */
.changyongci-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.changyongci-kuai {
  font-size: 14px;
  color: var(--ds-zhuse);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.changyongci-kuai:hover {
  border-bottom-color: var(--ds-zhuse);
  color: var(--ds-zhuse-xuanting);
}

/* ════════════════════════════════════════════════════════
   歌曲列表区域
   ════════════════════════════════════════════════════════ */
.liebiao-qu { border: 0.5px solid var(--ds-biankuang-rouhe); border-radius: 12px; overflow: hidden; }

/* Tab 头 */
.liebiao-toubu {
  border-bottom: 0.5px solid var(--ds-biankuang-yeqian);
  display: flex; justify-content: center; align-items: flex-end;
  padding: 0 14px;
}
.liebiao-toubu.sousuo-moshi {
  justify-content: space-between; align-items: center;
  padding: 10px 14px 9px;
}

.sousuo-jieguo-biaoqian { font-size: 11px; color: var(--ds-wenzi-tishi); letter-spacing: 0.06em; }
.liebiao-shuliang { font-size: 11px; color: var(--ds-wenzi-shuliang); }

/* 歌曲列表（单列表格） */
.gequ-liebiao {
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gequ-liebiao::-webkit-scrollbar { width: 3px; }
.gequ-liebiao::-webkit-scrollbar-thumb { background: var(--ds-gundongtiao); border-radius: 2px; }

/* 正在播放的行若正好是列表最后一行：轮胎圆标(::before)会伸出行底 9px，
   列表容器又恰好齐着行底收口，圆标下半截会被裁掉（整单只有一首歌时必现，
   看起来就是模块底部被截断）。给这种状态留出 padding，让圆标完整显示 */
.gequ-liebiao:has(> .gequ-hang.zhengzai-bofang:last-child) { padding-bottom: 12px; }

/* 表头行 */
.gequ-biaotou {
  display: grid;
  grid-template-columns: 36px 1fr 120px 90px;
  padding: 7px 14px 7px 4px;
  border-bottom: 0.5px solid var(--ds-biankuang-liebiao);
  background: var(--ds-liebiao-biaotou-beijing);
}

/* 每一行 */
.gequ-hang {
  display: grid;
  grid-template-columns: 36px 1fr 120px 90px;
  align-items: center;
  padding: 0 14px 0 4px;
  min-height: 52px;
  background: var(--ds-gequ-beijing);
  font-family: inherit;
  width: 100%;
  color: var(--ds-wenzi-zhu);
  cursor: default;
  margin-top: 5px;/* 整行不可点，只有各cell可点 */
}
.gequ-hang:last-child { border-bottom: none; }
.gequ-hang:hover { background: var(--ds-gequ-xuanting-beijing); }
.gequ-hang.zhengzai-bofang { background: none; }

/* 歌名：文字 + 音质后缀并排；空间不够时 JS 把后缀藏掉，只留歌名省略号 */
.gequ-hang .gequ-ming {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 16px; font-weight: 500; color: var(--ds-gequ-wenzi);
  padding-right: 8px; cursor: pointer;
}
.gequ-hang .gequ-ming .gequ-ming-wenzi {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gequ-hang .gequ-ming:hover { color: var(--ds-geming-xuanting); }
.gequ-hang.zhengzai-bofang .gequ-ming { color: var(--ds-geming-xuanting); }

/* 歌手 */
.gequ-hang .geshou {
  font-size: 16px; color: var(--ds-gequ-wenzi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 8px; cursor: pointer;
}
.gequ-hang .geshou:hover { color: var(--ds-geshou-xuanting); }

/* 歌曲ID */
.gequ-hang .gequ-id {
  font-size: 14px; color: var(--ds-gequ-id);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.gequ-hang .gequ-id:hover { color: var(--ds-gequ-id-xuanting); }
.gequ-hang.zhengzai-bofang .gequ-id { color: var(--ds-gequ-id-bofang); }

/* 播放按钮 */
.gequ-hang .bofang-lie {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.2;
  color: var(--ds-bofang-lie);
  transition: opacity 0.15s;
}
.gequ-hang:hover .bofang-lie { opacity: 0.55; }
.gequ-hang.zhengzai-bofang .bofang-lie { opacity: 1; color: var(--ds-bofang-lie-bofang); }
.gequ-hang .bofang-lie svg { width: 14px; height: 14px; display: block; }

/* ════════════════════════════════════════════════════════
   分页
   ════════════════════════════════════════════════════════ */
.fenye {
  display: none; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 14px 12px;
  border-top: 0.5px solid var(--ds-biankuang-yeqian); flex-wrap: wrap;
}
.fenye.xianshi { display: flex; }

.fanye-anniu {
  background: var(--ds-fanye-beijing); border: 0.5px solid var(--ds-fanye-biankuang); border-radius: 6px;
  min-width: 32px; height: 30px; padding: 0 8px;
  color: var(--ds-fanye-wenzi); font-size: 13px; cursor: pointer; font-family: inherit;
}
.fanye-anniu:hover:not(:disabled) { background: var(--ds-fanye-xuanting-beijing); border-color: var(--ds-fanye-xuanting-biankuang); color: var(--ds-fanye-xuanting-wenzi); }
.fanye-anniu.xuanzhong { background: var(--ds-zhuse); border-color: var(--ds-zhuse); color: var(--ds-zhuse-shang-wenzi); }
.fanye-anniu:disabled { opacity: 0.35; cursor: default; }

/* ════════════════════════════════════════════════════════
   歌词条
   ════════════════════════════════════════════════════════ */
.geci-lan {
  position: fixed;
  bottom: 110px;
  left: 0; right: 0;
  z-index: 998;
  background: var(--ds-geci-lan-beijing);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 0.5px solid var(--ds-geci-lan-biankuang);
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.geci-gunjuan-kuang {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}
.geci-wenzi {
  display: inline-block;
  font-size: 30px;
  color: var(--ds-zhuse);
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.14s;
  letter-spacing: 0.03em;
}
.geci-wenzi.danchu { opacity: 0; }

@keyframes geci-paomadeng {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(0); }
  90%  { transform: translateX(var(--paomadeng-juli, -100px)); }
  100% { transform: translateX(var(--paomadeng-juli, -100px)); }
}
.geci-wenzi.paomadeng {
  animation: geci-paomadeng 8s linear infinite;
}

/* ════════════════════════════════════════════════════════
   状态提示条（播放器上方）
   ════════════════════════════════════════════════════════ */
.zhuangtai-lan {
  display: none;
  font-size: 30px;
  color: var(--ds-zhuangtai-wenzi);
  text-align: center;
  padding: 2px 0 6px;
  border-bottom: 0.5px solid var(--ds-zhuangtai-biankuang);
}
.zhuangtai-lan.xianshi { display: block; }

/* ════════════════════════════════════════════════════════
   播放器
   ════════════════════════════════════════════════════════ */
.bofangqi-lan {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: var(--ds-bofangqi-beijing); border-top: 0.5px solid var(--ds-biankuang);
  padding: 0.75rem 1.5rem;
  display: flex; flex-direction: column; gap: 8px;
}

.bofangqi-biaoti {
  font-size: 17px; font-weight: 500; color: var(--ds-bofangqi-biaoti);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bofangqi-geshou { font-size: 13px; color: var(--ds-wenzi-ci); margin-top: 3px; }

.bofangqi-lianjie {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: color 0.15s;
}
.bofangqi-lianjie:hover { color: var(--ds-lianjie-xuanting); }

/* 进度条 */
.jindu-hang { display: flex; align-items: center; gap: 10px; }
.jindu-shijian { font-size: 11px; color: var(--ds-wenzi-dan); min-width: 32px; }
.jindutiao {
  flex: 1; height: 6px; background: var(--ds-jindu-cao); border-radius: 3px;
  cursor: pointer; position: relative; margin: 10px 0;
}
.jindu-tianchong {
  height: 100%; width: 0%; background: var(--ds-zhuse);
  border-radius: 3px 0 0 3px; pointer-events: none;
}
.jindu-huakuai {
  position: absolute; top: 50%; left: 0%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;   /* 和列表轮胎同一个图标：盒子 24px → 可见圈 22px、线宽 2px；
                                  不加投影——柔光会在圆环四周形成亮圈、盖住紧贴的进度条，列表同款无投影 */
  background: url('/bfq.svg?v=20260921b') center / contain no-repeat;
  pointer-events: none; user-select: none;
}

/* 控制行：左 / 中 / 右 三区，中间控制始终几何居中 */
.kongzhi-hang {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

.bofangqi-zuoce {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(42vw, 360px);
  min-width: 0;
  z-index: 1;
}

.bofangqi-xinxi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 200px;
  line-height: 1.3;
}
.bofangqi-xinxi .bofangqi-biaoti {
  font-size: 14px; font-weight: 500; color: var(--ds-bofangqi-biaoti);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bofangqi-xinxi .bofangqi-geshou {
  font-size: 11px; color: var(--ds-wenzi-ci); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bofangqi-zhongjian {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.bofangqi-youce {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kongzhi-anniu {
  background: none; border: none; color: var(--ds-kongzhi-an); cursor: pointer;
  font-size: 26px; padding: 4px; line-height: 1;
  display: flex; align-items: center;
}
.kongzhi-anniu:hover { color: var(--ds-zhuse); }

.bofang-anniu {
  background: var(--ds-zhuse); border: none; border-radius: 50%;
  width: 50px; height: 50px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: white; font-size: 22px;
}
.bofang-anniu:hover { background: #6a5ec0; }

/* 音质后缀小胶囊（列表歌名后面）：只写文件后缀（flac/mp3/...），等级大家看后缀自己判断；
   空间够才显示——JS 检测塞进去后歌名没被挤截断，桌面手机同一规则 */
.yin-zhi-kuai {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  background: var(--ds-shuru-beijing);
  border: 0.5px solid var(--ds-shuru-biankuang);
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--ds-wenzi-ci);
  white-space: nowrap;
}
.yin-zhi-kuai.xianshi { display: inline-flex; }

/* 中等宽度：音量条收窄，给歌名让位 */
@media (max-width: 900px) {
  .yinliang-hang input[type=range] { width: 50px; }
  .bofangqi-xinxi { max-width: 150px; }
  .chakan-geci-anniu { font-size: 20px; }
}
/* 手机与窄窗口：歌名区收窄，避免压住上一首按钮；音质后缀跟桌面同规则，由 JS 按空间显隐 */
@media (max-width: 750px) {
  .bofangqi-xinxi { max-width: 100px; }
}

/* 音量 */
.yinliang-hang { display: flex; align-items: center; gap: 6px; }
.yinliang-hang .tubiao { font-size: 15px; color: var(--ds-wenzi-dan); }
.yinliang-hang input[type=range] { width: 70px; accent-color: var(--ds-zhuse); }
.yinliang-hang span { font-size: 12px; color: var(--ds-wenzi-dan); min-width: 22px; }

/* ════════════════════════════════════════════════════════
   推荐歌单 / 推荐歌手（艺术家标签）
   ════════════════════════════════════════════════════════ */
.geshou-qukuai {
  border: 0.5px solid var(--ds-biankuang-rouhe);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.geshou-qukuai-biaoti {
  font-size: 12px;
  color: var(--ds-youqing-biaoti);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 0.5px solid var(--ds-biankuang-yeqian);
}

.geshou-liebiao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.geshou-biaoqian {
  font-size: 16px;
  color: var(--ds-zhuse);
  padding: 4px 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.geshou-biaoqian:hover {
  border-bottom-color: var(--ds-zhuse);
}

/* ════════════════════════════════════════════════════════
   友情链接
   ════════════════════════════════════════════════════════ */
.youqing-lianjie {
  border: 0.5px solid var(--ds-biankuang-rouhe);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}
.youqing-lianjie-biaoti {
  font-size: 12px;
  color: var(--ds-youqing-biaoti);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 0.5px solid var(--ds-biankuang-yeqian);
}
.youqing-lianjie-liebiao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.youqing-lianjie-liebiao a {
  font-size: 12px;
  color: var(--ds-zhuse);
  padding: 3px 10px;
  border-radius: 20px;
  text-decoration: none;
}
.youqing-lianjie-liebiao a:hover {
  background: var(--ds-youqing-xuanting-beijing);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════
   响应式
   ════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .zhandian-dingbu {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 56px;
  }
  .zhandian-dingbu-biaoti {
    flex: 1;
    text-align: left;
  }
    .zhanming-yuming {
    display: none;
  }
    .diannao-kejian {
    display: none;
  }
  body { padding: 2px 0.5rem; }
  .rongqi { padding: 1rem; gap: 0.75rem; border-radius: 12px; margin-bottom: 175px; }
  .geci-lan { bottom: 100px; padding: 0 12px; height: 40px; }
  .geci-wenzi { font-size: 16px; }
  .zhuangtai-lan { font-size: 16px; }
  .gequ-liebiao { padding: 0; }
  .gequ-biaotou { grid-template-columns: 32px 1fr 90px; padding: 6px 10px 6px 0; }
  .gequ-hang { grid-template-columns: 32px 1fr 90px; padding: 0 10px 0 0; min-height: 42px;  margin-top: 5px;}
  .gequ-hang .gequ-ming { font-size: 16px; }
  .gequ-hang .geshou { font-size: 12px; }
  .gequ-hang .gequ-id { display: none; }
  .gequ-biaotou .gequ-id-lie { display: none; }
  .bofangqi-lan { padding: 0.6rem 1rem; gap: 6px; }
  .bofangqi-biaoti { font-size: 15px; }
  .kongzhi-hang { min-height: 48px; }
  .bofangqi-zuoce { max-width: 34vw; gap: 8px; }
  .bofangqi-xinxi { display: none; }
  .bofangqi-zhongjian { gap: 1.25rem; }
  .kongzhi-anniu { font-size: 22px; }
  .bofang-anniu { width: 44px; height: 44px; font-size: 20px; }
  .yinliang-hang input[type=range] { width: 40px; }
  .yinliang-hang .tubiao { font-size: 12px; }
  .sousuo-anniu { padding: 9px 14px; font-size: 13px; }
  .yinliang-hang span { display: none; }
  .bofangqi-youce { max-width: 38vw; }
}

/* ════════════════════════════════════════════════════════
   歌手区块（首页）
   ════════════════════════════════════════════════════════ */
.geshou-qukuai {
  border: 0.5px solid var(--ds-biankuang-rouhe);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.geshou-qukuai-biaoti {
  font-size: 12px;
  color: var(--ds-youqing-biaoti);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 0.5px solid var(--ds-biankuang-yeqian);
}

.geshou-liebiao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.geshou-biaoqian {
  font-size: 16px;
  color: var(--ds-zhuse);
  padding: 4px 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.geshou-biaoqian:hover {
  border-bottom-color: var(--ds-zhuse);
}


/* 歌曲列表下划线：默认淡，hover+zhengzai-bofang 深 */
.gequ-hang {
  box-shadow: inset 0 -6px 0 var(--ds-gequ-yingzi);
}
.gequ-hang:hover,
.gequ-hang.zhengzai-bofang {
  box-shadow: inset 0 -6px 0 var(--ds-gequ-yingzi-bofang);
}

/* ── 轮胎（箭头图标 /bfq.svg）：正在播放那一行的粗线上，按真实播放进度从左滚到右 ──
   大小和底部播放器圆圈一致：图标自带留白，盒子 24px 正好画出外径 22px、线宽 2px 的圈；
   圈内米白填充写在图标文件里（#fdfbf7），圆圈外透明——CSS 不要再垫背景色，
   否则圆环四周（尤其压在紫线上的左右两侧）会露出一圈白边；
   也不要加 border——全局 * 选择器不作用于伪元素，加了宽高会超出 --luntai-zhijing、圆心会歪
   --luntai-pianyi 由 bofangqi.js 的 sheZhiLunTaiGun() 写入 */
.gequ-hang.zhengzai-bofang {
  position: relative;      /* 轮胎的定位参照 */
  --luntai-zhijing: 24px;          /* 桌面、手机同尺寸 */
}
.gequ-hang.zhengzai-bofang::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: calc(3px - var(--luntai-zhijing) / 2);   /* 圆心正好压在 6px 粗线中心 */
  width: var(--luntai-zhijing);
  height: var(--luntai-zhijing);
  background: url('/bfq.svg?v=20260921b') center / contain no-repeat;
  transform: translateX(var(--luntai-pianyi, 0px));
  transition: transform 0.25s linear;      /* timeupdate 约 4 次/秒，不加会一跳一跳 */
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gequ-hang.zhengzai-bofang::before { transition: none; }
}

/* ════════════════════════════════════════════════════════
   顶部：站名（电脑居中 / 手机靠左）+ 配色按钮（始终靠右）
   ════════════════════════════════════════════════════════ */
.zhandian-dingbu {
  position: relative;
  width: 100%;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 58px 6px;
  min-height: 36px;
  box-sizing: border-box;
}
.zhandian-dingbu-biaoti {
  flex: 1;
  min-width: 0;
  font-size: 23px;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}
.zhanming-lianjie {
  color: var(--ds-zhuse);
  text-decoration: none;
}
.zhanming-lianjie:hover {
  color: var(--ds-zhuse-shen);
}



/* ════════════════════════════════════════════════════════
   查看歌词 按钮（播放器内）
   ════════════════════════════════════════════════════════ */
.chakan-geci-anniu {
  background: none;
  border: 2px solid rgba(124,111,205,0.6);
  border-radius: 6px;
  color: var(--ds-zhuse-rouhe);
  font-size: 24px;
  padding: 0 14px;
  height: 46px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.chakan-geci-anniu:hover,
.chakan-geci-anniu.dakai { background: var(--ds-geci-an-xuanting-beijing); color: var(--ds-geci-an-xuanting-wenzi); }

.chakan-geci-shouji {
  background: none;
  border: 2px solid rgba(124,111,205,0.6);
  border-radius: 8px;
  color: var(--ds-zhuse-rouhe);
  font-size: 17px;
  padding: 0 8px;
  height: 38px;
  display: none;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.chakan-geci-shouji:hover,
.chakan-geci-shouji.dakai { background: var(--ds-geci-an-xuanting-beijing); color: var(--ds-geci-an-xuanting-wenzi); }

@media (max-width: 640px) {
  .chakan-geci-anniu { display: none; }
  .chakan-geci-shouji { display: flex; }
}

/* ════════════════════════════════════════════════════════
   全屏歌词遮罩层
   ════════════════════════════════════════════════════════ */
.geci-tuceng {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 110px; /* 播放器高度，留出底部播放器 */
  z-index: 1100;
  background: var(--ds-zhezhao-beijing);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.geci-tuceng.dakai { display: flex; }

/* 遮罩层顶部工具栏 */
.geci-tuceng-dingbu {
  width: 100%; max-width: 760px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 12px;
  flex-shrink: 0;
}
.geci-tuceng-biaoti {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-zhezhao-biaoti);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geci-tuceng-guanbi {
  background: none; border: none;
  font-size: 22px; color: var(--ds-zhezhao-guanbi); cursor: pointer;
  padding: 4px 8px; border-radius: 6px; line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.geci-tuceng-guanbi:hover { color: var(--ds-zhuse); background: rgba(124,111,205,0.08); }

/* 歌词滚动区 */
.geci-tuceng-neirong {
  flex: 1; width: 100%; max-width: 760px;
  overflow-y: auto;
  padding: 0 24px 40px;
  display: flex; flex-direction: column; align-items: center;
  scroll-behavior: smooth;
}
.geci-tuceng-neirong::-webkit-scrollbar { width: 4px; }
.geci-tuceng-neirong::-webkit-scrollbar-thumb { background: var(--ds-gundongtiao); border-radius: 2px; }

/* 每一行歌词 */
.geci-zhenghang {
  font-size: 22px;
  color: var(--ds-geci-hang);
  line-height: 2;
  text-align: center;
  padding: 2px 0;
  cursor: pointer;
  transition: color 0.2s, font-size 0.2s;
  width: 100%;
}
.geci-zhenghang:hover { color: var(--ds-geci-hang-xuanting); }
.geci-zhenghang.geci-dangqian {
  color: var(--ds-geci-hang-dangqian);
  font-size: 32px;
  font-weight: 500;
}

/* 无歌词提示 */
.geci-kong {
  color: var(--ds-geci-kong); font-size: 15px; margin-top: 60px; text-align: center;
}

@media (max-width: 640px) {
  .geci-tuceng { bottom: 90px; }
  .geci-zhenghang { font-size: 18px; }
  .geci-zhenghang.geci-dangqian { font-size: 26px; }
  .geci-tuceng-dingbu { padding: 14px 16px 8px; }
  .geci-tuceng-neirong { padding: 0 16px 30px; }
}

/* ════════════════════════════════════════════════════════
   播放器封面图
   ════════════════════════════════════════════════════════ */
.bofangqi-fengmian {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: none;
}

/* 歌词弹窗封面：固定在 header 下方，不随歌词滚动 */
.geci-tuceng-fengmian-kuang {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
}
.geci-tuceng-fengmian {
  width: 100%;
  height: 200px;
  object-fit: contain;
  display: block;
}

/* 移动端：播放器底部封面隐藏 */
@media (max-width: 640px) {
  .bofangqi-zuoce > .bofangqi-fengmian {
    display: none !important;
  }
}

/* 电脑版：播放器底部封面隐藏 */
@media (min-width: 641px) {
  .bofangqi-zuoce > .bofangqi-fengmian {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   用户后台 · 登录/注册页（houtai/denglu.php、zhuce.php）
   作用域收在 .houtai-biaodan 里，不影响 index/编辑页各自内嵌的 houtai- 样式
   ════════════════════════════════════════════════════════ */
.houtai-biaodan {
  max-width: 420px;
  width: 100%;
  margin: 0px auto 0;
  background: var(--ds-kapian-beijing);
  border: 1px solid var(--ds-biankuang-rouhe);
  border-radius: 14px;
  padding: 30px 28px;
}
.houtai-biaodan .houtai-biaoti {
  font-size: 22px;
  color: var(--ds-wenzi-zhu);
  margin-bottom: 18px;
}
.houtai-biaodan .houtai-cuowu {
  background: #fbe9e7;
  color: #b3402f;
  border: 1px solid #f0c8bf;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}
/* 登录方式说明（"本站不设置密码"那一段）：和上面的 .houtai-cuowu 同形状不同配色 ——
   报错是红的，这条是中性的"该这么做"，所以用输入框那套米色底，不抢错误的视觉权重 */
.houtai-biaodan .houtai-shuoming {
  background: var(--ds-shuru-beijing);
  border: 1px solid var(--ds-biankuang);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ds-wenzi-ci);
  margin-bottom: 18px;
}
.houtai-biaodan .houtai-shuoming strong {
  color: var(--ds-wenzi-zhu);
}
.houtai-biaodan .houtai-biaoqian {
  display: block;
  font-size: 13px;
  color: var(--ds-wenzi-ci);
  margin: 14px 0 6px;
}
.houtai-biaodan .houtai-shuru {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--ds-biankuang);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-wenzi-zhu);
}
.houtai-biaodan .houtai-shuru:focus {
  outline: none;
  border-color: var(--ds-zhuse);
}
.houtai-biaodan .houtai-anniu {
  width: 100%;
  margin-top: 22px;
  padding: 11px 0;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background: var(--ds-zhuse);
  color: var(--ds-zhuse-shang-wenzi);
  cursor: pointer;
}
.houtai-biaodan .houtai-anniu:hover {
  background: var(--ds-zhuse-xuanting);
}
.houtai-biaodan .houtai-lianjie {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ds-wenzi-ci);
  text-align: center;
}
.houtai-biaodan .houtai-lianjie a {
  color: var(--ds-zhuse);
}
.houtai-biaodan .houtai-lianjie a:hover {
  color: var(--ds-lianjie-xuanting);
  text-decoration: underline;
}

/* ── 笔画验证码一行：左出题（姓氏大字）+ 中填数 + 右"换一个" ──
   "换一个"是 type="button"，点它走 youxiang_fama.js 的 AJAX 换字，不整页重刷（重刷会丢掉已填邮箱）；
   这一行现在是发码的闸门，必须好点：观感照 .houtai-fama 加 flex-wrap。
   反馈区（.houtai-yanzheng-fk）一律独占第二行、「换一个」始终留在第一行贴右 —— 原来只有 ≤640px
   才这么排，2026-09-28 三组加组框后这一行窄了 32px，"✗ 再数一遍"在行内已经放不下，改成所有宽度通用 */
.houtai-yanzheng {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.houtai-yanzheng-xing {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 0 12px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #33383b;
  background: #f2eee5;
  border: 1px solid var(--ds-biankuang);
  border-radius: 10px;
  user-select: none;
}
/* 笔画数最多三位，输入框给固定窄宽度，不跟着卡片拉伸 */
.houtai-biaodan .houtai-yanzheng-shuru {
  flex: none;
  width: 72px;
  text-align: center;
}
.houtai-yanzheng-shuru::placeholder {
  color: var(--ds-zhanweifu);
}
.houtai-yanzheng-huan {
  flex: none;
  margin-left: auto;
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ds-wenzi-ci);
  background: var(--ds-kapian-beijing);
  border: 1px solid var(--ds-biankuang);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.houtai-yanzheng-huan:hover {
  color: var(--ds-zhuse);
  border-color: var(--ds-zhuse-rouhe);
}
.houtai-yanzheng-shuo {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-wenzi-tishi);
}
/* 即时反馈：bihua_yanzheng.js 往 .houtai-yanzheng 上挂 shi-dui / shi-cuo 两个状态类。
   独占第二行（order 只改视觉顺序，DOM 顺序不动；排法照 .houtai-fama-fk），空着不占位 */
.houtai-yanzheng-fk {
  order: 1;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--ds-wenzi-tishi);
}
.houtai-yanzheng-fk:empty { display: none; }
.houtai-yanzheng.shi-dui .houtai-yanzheng-fk { color: #3c7a4e; }
.houtai-yanzheng.shi-cuo .houtai-yanzheng-fk { color: #a04a4a; }
.houtai-biaodan .houtai-yanzheng.shi-dui .houtai-yanzheng-shuru {
  border-color: #bcdcc4;
  background: #eef8f0;
}
.houtai-biaodan .houtai-yanzheng.shi-cuo .houtai-yanzheng-shuru {
  border-color: #e3c3c3;
  background: #fbf0f0;
}
@media (max-width: 640px) {
  /* 尺寸比原来各收一档（组框占掉 24px 宽）：76/10/61 排不下，72/8/57 在 360 宽的屏上才放得开 */
  .houtai-yanzheng-xing { min-width: 72px; font-size: 24px; }
  .houtai-yanzheng-huan { padding: 0 8px; }
  /* 反馈行字号收到 12px（"独占第二行"的排法见上面基础规则，现在所有宽度都一样） */
  .houtai-yanzheng-fk { font-size: 12px; }
}
/* 极窄屏（≤340px，如 320 宽的老机型）：加组框后行内只有 ~195px，原尺寸（229px）放不下，
   再缩一圈间距/留白/输入框让它仍排成一行（缩后单姓 ~181px，复姓两个字 ~190px 也放得下）。
   输入框左右内边距收到 6px 是为了把"笔画数"三个字的占位文字完整放进 64px 里。不动 341px 以上的取值 */
@media (max-width: 340px) {
  .houtai-yanzheng { gap: 6px; }
  .houtai-yanzheng-xing { min-width: 56px; padding: 0 6px; }
  .houtai-biaodan .houtai-yanzheng-shuru { width: 64px; padding-left: 6px; padding-right: 6px; }
  .houtai-yanzheng-huan { padding: 0 4px; }
}

/* ════════════════════════════════════════════════════════
   登录页 · 发码按钮与倒计时（houtai/denglu.php 的邮箱登录码一行，配 youxiang_fama.js）
   结构：发码行  .houtai-fama      > .houtai-fama-youxiang + .houtai-fama-anniu + .houtai-fama-fk
         闸门行  .houtai-yanzheng  > .houtai-yanzheng-xing + .houtai-yanzheng-shuru + .houtai-yanzheng-fk + .houtai-yanzheng-huan
                   （就是上面那段：发码前的笔画验证码，观感以它为准，本段不再重复定义）
         登录码行 无外层 div       > .houtai-ma-shuru + .houtai-ma-fk（状态类挂在 input 自己身上）
   三行现在各罩一层组框 .houtai-zu（见文件末尾"登录页 · 三个分组框"那段），本段只描述行内部
   观感一律照 .houtai-yanzheng 一行取值（gap 10px / 提示 13px / 圆角 8px），
   颜色和边框一律复用 .houtai-shuru、.houtai-anniu 已有的，不新定义、不改动老规则
   ════════════════════════════════════════════════════════ */
.houtai-fama {
  display: flex;
  flex-wrap: wrap;        /* 挤不下就换行，按钮不会被推出卡片 */
  align-items: stretch;
  gap: 10px;
}
/* 邮箱框：外观吃 .houtai-shuru，这里只补一行里的布局。
   width 必须收回 auto —— .houtai-shuru 的 width:100% 会让 flex-basis 直接占满整行，
   把「发送登录码」按钮挤到第二行去。基准给 12em，剩下的空间靠 grow 撑。 */
.houtai-biaodan .houtai-fama-youxiang {
  width: auto;
  flex: 1 1 12em;
  min-width: 0;           /* 允许被挤窄，邮箱填得再长也不撑破这一行 */
}
/* 发码按钮：.houtai-anniu 是整行的（width 100% + margin-top），放进这行里要收回内容宽 */
.houtai-biaodan .houtai-fama-anniu {
  flex: none;
  width: auto;
  margin-top: 0;
  padding: 10px 16px;
  white-space: nowrap;    /* 「60 秒后可重发」这种字不换行，免得按钮忽高忽低 */
}
/* 兜底：万一哪里只写了 .houtai-fama-anniu、没带 .houtai-anniu，也不至于裸成浏览器默认按钮 */
.houtai-fama .houtai-fama-anniu:not(.houtai-anniu) {
  font-family: inherit;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background: var(--ds-zhuse);
  color: var(--ds-zhuse-shang-wenzi);
  cursor: pointer;
}
/* 请求在途 / 倒计时中：压住 .houtai-biaodan .houtai-anniu:hover 的变色，划过也不点亮 */
.houtai-biaodan .houtai-fama-anniu:disabled {
  background: var(--ds-zhuse);
  opacity: 0.6;
  cursor: not-allowed;
}
/* 发码结果提示：独占一行的小字，留白和字号照 .houtai-yanzheng-fk */
.houtai-fama-fk {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  min-width: 5.5em;
  font-size: 13px;
  color: var(--ds-wenzi-tishi);
}
/* 即时反馈：youxiang_fama.js 往 .houtai-fama 上挂 shi-dui / shi-cuo，配色取上面那对既有值 */
.houtai-fama.shi-dui .houtai-fama-fk { color: #3c7a4e; }
.houtai-fama.shi-cuo  .houtai-fama-fk { color: #a04a4a; }
@media (max-width: 640px) {
  .houtai-fama { gap: 8px; }
  /* 加组框后这一行窄了 24px：邮箱框 + 按钮并排放要 ~296px，手机上放不下，改成上下各占满一行
     （更好点，也避免"按钮孤零零折到第二行"）。>640px 的桌面仍是并排 */
  .houtai-biaodan .houtai-fama-youxiang { flex: 1 1 100%; }
  .houtai-biaodan .houtai-fama-anniu { flex: 1 1 100%; padding: 10px 12px; font-size: 14px; }
  .houtai-fama-fk { min-width: 0; font-size: 12px; }
}

/* ── 登录码一行（.houtai-ma-shuru + .houtai-ma-fk，没有外层 div） ── */
/* 占位符减淡一档：跟 .houtai-yanzheng-shuru、搜索框同一写法同一个色，别一深一浅 */
.houtai-ma-shuru::placeholder {
  color: var(--ds-zhanweifu);
}
/* 提示位独占一行；min-height 先把一行高低占住，出字时不把下面的「验证码」标签顶得一跳一跳 */
.houtai-ma-fk {
  display: block;
  min-height: 1.4em;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ds-wenzi-tishi);
}

/* ── 即时反馈：登录码状态类挂在 input 自己身上（绿/红那两对边框底色照 .houtai-yanzheng 的既有取值）── */
.houtai-ma-shuru.shi-dui + .houtai-ma-fk { color: #3c7a4e; }
.houtai-ma-shuru.shi-cuo + .houtai-ma-fk { color: #a04a4a; }
.houtai-biaodan .houtai-ma-shuru.shi-dui { border-color: #bcdcc4; background: #eef8f0; }
.houtai-biaodan .houtai-ma-shuru.shi-cuo  { border-color: #e3c3c3; background: #fbf0f0; }
@media (max-width: 640px) {
  /* 提示行字号照 .houtai-fama-fk 收到 12px，两处提示保持一致 */
  .houtai-ma-fk { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════
   登录页 · 三个分组框（houtai/denglu.php：邮箱 / 百家姓笔画验证码 / 登录码 各罩一层 .houtai-zu）
   观感照顶部 .houtai-shuoming 那一套（米底 + 最浅边框 + 圆角）：底色只比卡片深一步、框线用
   最浅那档，免得和卡片外框叠成"框套框"。组标题就是原来的 .houtai-biaoqian，进组后上边距收掉；
   每组自己的小字（.houtai-yanzheng-shuo）贴着控件跟在组内。DOM 只多这一层 div，两个 JS 只按
   id 和 .houtai-fama / .houtai-yanzheng / .houtai-ma-fk 取元素，不受影响
   ════════════════════════════════════════════════════════ */
.houtai-biaodan .houtai-zu {
  background: var(--ds-shuru-beijing);
  border: 1px solid var(--ds-biankuang-rouhe);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
/* 组标题：原来 14px 的上边距收掉（组的内边距已经在管这段留白） */
.houtai-biaodan .houtai-zu > .houtai-biaoqian {
  margin: 0 0 8px;
}
/* 登录按钮紧跟最后一组：组下边距 14 + 这里 4 = 18px，和原来离输入框的 22px 观感相当。
   特异性 (0,3,0) 压过上面 .houtai-biaodan .houtai-anniu 的 margin-top: 22px */
.houtai-biaodan .houtai-zu + .houtai-anniu {
  margin-top: 4px;
}
@media (max-width: 640px) {
  /* 手机上组框收一圈（320 宽还会被下面 ≤340px 那条再收一次左右内边距） */
  .houtai-biaodan .houtai-zu { padding: 10px 12px; margin-bottom: 12px; }
}
@media (max-width: 340px) {
  /* 320 宽再让一步：组框左右各收 4px，把笔画行要的 ~190px（复姓两个字）喂进去 */
  .houtai-biaodan .houtai-zu { padding: 10px 8px; }
}

/* ════════════════════════════════════════════════════════
   登录页 · 三步向导（houtai/denglu.php + denglu_buzou.js）
   顶部步骤条（1 输入邮箱 → 2 输入验证码 → 3 输入登录码）：当前步主色加粗、完成步打勾、
   未到的步浅灰；每一步一个面板 .houtai-bu，做完的步收成一条 .houtai-bu-zhaiyao（右侧「改」）。
   显隐由 JS 切 hidden 属性，本段只画样子 —— 带 display 规则的类必须补一条 [hidden] 覆盖，
   否则作者样式会压过 UA 的 [hidden]{display:none}（老坑，别删那两行）
   ════════════════════════════════════════════════════════ */

.houtai-buzou {
  display: flex;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: houtai-bu;
}
.houtai-buzou-xiang {
  position: relative;
  flex: 1;
  padding-top: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--ds-wenzi-tishi);
  counter-increment: houtai-bu;
}
/* 圆圈序号：没到的步浅灰底；当前步主色底；完成的步换成绿底对勾 */
.houtai-buzou-xiang::before {
  content: counter(houtai-bu);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: var(--ds-biankuang);
  color: var(--ds-kapian-beijing);
  font-size: 12px;
  text-align: center;
}
.houtai-buzou-xiang.shi-dangqian { color: var(--ds-wenzi-zhu); font-weight: 600; }
.houtai-buzou-xiang.shi-dangqian::before { background: var(--ds-zhuse); color: var(--ds-zhuse-shang-wenzi); }
.houtai-buzou-xiang.shi-wancheng { color: var(--ds-wenzi-ci); }
.houtai-buzou-xiang.shi-wancheng::before { content: "✓"; background: #3c7a4e; color: #fff; }
@media (max-width: 640px) {
  .houtai-buzou { margin-bottom: 14px; }
  .houtai-buzou-xiang { font-size: 12px; }
}

/* 面板与汇总条的显隐（必须显式写：这两类元素身上有作者的 display 规则，见段头注释） */
.houtai-bu[hidden], .houtai-bu-zhaiyao[hidden] { display: none; }

/* 汇总条：做完的步折成一行 —— 虚线框、比组框矮一档，右侧「改」是个小胶囊按钮 */
.houtai-bu-zhaiyao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ds-shuru-beijing);
  border: 1px dashed var(--ds-biankuang);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ds-wenzi-ci);
}
.houtai-bu-zhaiyao-wen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.houtai-bu-zhaiyao-zhi { color: var(--ds-wenzi-zhu); }
.houtai-bu-gai {
  flex: none;
  padding: 2px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ds-zhuse);
  background: none;
  border: 1px solid var(--ds-biankuang);
  border-radius: 6px;
  cursor: pointer;
}
.houtai-bu-gai:hover { border-color: var(--ds-zhuse-rouhe); }

/* 第 1 步邮箱的即时提示行（独占一行的小字；配色照 .houtai-yanzheng-fk 那对既有值，空着不占位） */
.houtai-youxiang-fk {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ds-wenzi-tishi);
}
.houtai-youxiang-fk:empty { display: none; }
.houtai-youxiang-fk.shi-dui { color: #3c7a4e; }
.houtai-youxiang-fk.shi-cuo { color: #a04a4a; }

/* 面板内的主操作按钮：组框里不需要 22px 那么大的上留白 */
.houtai-biaodan .houtai-bu .houtai-anniu { margin-top: 12px; }

/* 第 1 步的邮箱框：向导里它独自占一行，宽度收回整行、和下面的「下一步」对齐
   （覆盖 .houtai-fama-youxiang 那套 width:auto —— 那是和发码按钮并排时的取值） */
.houtai-biaodan .houtai-bu[data-bu="youxiang"] .houtai-fama-youxiang {
  width: 100%;
}

/* 第 2 步的发码按钮：长成和「下一步」「登录」同款的全宽主按钮
   （覆盖 .houtai-fama-anniu 那套行内尺寸：那是邮箱框和按钮并排时的取值） */
.houtai-biaodan .houtai-bu[data-bu="yanzheng"] .houtai-fama-anniu {
  flex: 1 1 100%;
  width: 100%;
  margin-top: 12px;
  padding: 11px 0;
  font-size: 15px;
}

/* 没到条件的向导按钮压成半透明（划过也不再点亮）：id 选择器保证只压「下一步」和「登录」这两个，
   不碰发码按钮请求在途时那套（.houtai-fama-anniu:disabled 的 0.6 是另一回事） */
#denglu-xiayibu:disabled,
#denglu-denglu:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
#denglu-xiayibu:disabled:hover,
#denglu-denglu:disabled:hover { background: var(--ds-zhuse); }