/* ==================================================================
   misc 区域样式 · 全局控件 / 版本更新 / 灵敏度 / 音频 / 法务页
   ------------------------------------------------------------------
   只使用 tokens.css 的令牌，不新增色值、不新增字号档位、不新增版式体系。
   主题（深浅 / 主题色）沿用 assets/extra.css 的 [data-mode][data-theme]。
   ================================================================== */

/* ---------- 小工具：区块间距 / 弹窗打开时锁滚动 / 轻提示 ---------- */
.u-mb{margin-bottom:clamp(14px,1.8vw,20px)}
.final{margin-inline:auto}
.doc-pb{padding-bottom:var(--sec)}
.sec-gap{margin-top:var(--sec)}
body.is-locked{overflow:hidden}

.hd-auth{display:flex;align-items:center;gap:8px}

.ft-links button{
  font-family:inherit;font-size:inherit;color:inherit;
  transition:color var(--t-fast);
}
.ft-links button:hover{color:var(--blue)}

.misc-toast{
  position:fixed;left:50%;bottom:28px;z-index:400;
  transform:translate(-50%,12px);
  padding:11px 20px;border-radius:999px;
  background:var(--ink);color:var(--card);
  font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.misc-toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- 状态提示块（hub-data.js 的 statusBlock 产出 .hub-state） ---------- */
.hub-state{
  display:flex;align-items:center;gap:10px;
  margin-top:12px;padding:11px 14px;
  border-radius:var(--r-m);background:var(--wash);
  font-size:var(--t-sm);color:var(--t2);line-height:1.6;
}
.hub-state b{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);
  font-size:var(--t-xs);font-weight:500;
}
.hub-state.is-error{background:var(--red-soft);color:var(--red)}
.hub-state.is-error b{background:var(--red);color:var(--card)}
.hub-state.is-empty{background:var(--warn-soft);color:var(--warn)}
.hub-state.is-empty b{background:var(--warn);color:var(--card)}

/* 过期（stale）标注 */
.tag.is-stale{background:var(--warn-soft);color:var(--warn)}
.stale-note{margin-top:8px;font-size:var(--t-xs);color:var(--warn)}

/* ==================================================================
   顶栏扩展：在线人数入口 / 服务状态 / 移动端菜单
   ================================================================== */
.hd-status{display:flex;align-items:center;gap:8px;margin-right:2px}

.hd-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;background:var(--wash);
  font-size:var(--t-xs);color:var(--t2);white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast);
}
.hd-pill:hover{background:var(--blue-soft);color:var(--blue)}
.hd-pill b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}

.hd-dot-wrap{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;background:var(--wash);
  font-size:var(--t-xs);color:var(--t2);white-space:nowrap;
}
.hd-dot-wrap:hover{background:var(--blue-soft);color:var(--blue)}

/* 移动端菜单按钮（仅窄屏出现） */
.hd-menu-btn{display:none}
@media (max-width:680px){
  .hd-menu-btn{display:grid}
  /* 13.7-006：窄屏保留在线胶囊的紧凑形态，不再整块隐藏 */
  .hd-status{gap:6px;margin-right:0}
  .hd-status .hd-dot-wrap{display:none}
  .hd-pill{padding:4px 9px}
  .hd-pill .hd-pill-t{display:none}
}

/* 顶栏弹出面板挂在按钮下方（extra.css 的 .pop 默认是 fixed） */
.hd-pop{position:relative}
.hd-pop .pop{position:absolute;left:auto;right:0;top:calc(100% + 10px);bottom:auto}

/* 移动端抽屉里的导航项 */
.mnav{display:flex;flex-direction:column;gap:2px}
.mnav a,.mnav button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:12px 14px;border-radius:var(--r-m);
  font-size:var(--t-body);color:var(--t1);text-align:left;
  transition:background var(--t-fast);
}
.mnav a:hover,.mnav button:hover{background:var(--wash)}
.mnav a[aria-current="page"]{background:var(--blue-soft);color:var(--blue);font-weight:500}
.mnav-sep{height:1px;background:var(--line-soft);margin:10px 0}

/* ==================================================================
   通用弹窗（登录 / 注册 / 忘记密码 / 更新详情 / 隐私偏好）
   结构与 .drawer 保持一致，只是居中卡片而非右侧抽屉
   ================================================================== */
.modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,32px);
}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:var(--mask)}
.modal-card{
  position:relative;width:min(540px,100%);
  max-height:calc(100vh - clamp(28px,6vw,64px));
  display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r-l);
  box-shadow:var(--sh-2);overflow:hidden;
}
.modal-card.is-wide{width:min(760px,100%)}
.modal-hd{
  padding:20px 24px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.modal-hd h2{font-size:var(--t-h3);font-weight:600;color:var(--ink)}
.modal-hd p{margin-top:3px;font-size:var(--t-xs);color:var(--t2)}
.modal-bd{padding:20px 24px;overflow-y:auto;flex:1}
.modal-ft{
  padding:16px 24px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.modal-ft .ft-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.modal-bd .field{margin-bottom:14px}
.modal-bd .seg{margin-bottom:18px}
.modal-bd .btn-blue{width:100%;height:46px;margin-top:4px}

/* 弹窗内小字说明与 cooldown */
.modal-note{margin-top:12px;font-size:var(--t-xs);color:var(--t2);line-height:1.7}
.cooldown{margin-top:10px;font-size:var(--t-xs);color:var(--warn);display:none}
.cooldown.is-on{display:block}

/* 隐私偏好选项 */
.pref{margin-top:10px}

/* ==================================================================
   版本更新轮播 + 列表 + 详情

   ================================================================== */
.vcar{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden}
.vcar-img{
  display:block;width:100%;aspect-ratio:16/9;
  object-fit:contain;background:var(--wash);
}
.vcar-cap{padding:clamp(16px,2.2vw,24px)}
.vcar-t{font-size:var(--t-h3);font-weight:500;color:var(--ink);line-height:1.5}
.vcar-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:var(--t-xs);color:var(--t2)}
.vcar-d{margin-top:10px;font-size:var(--t-sm);color:var(--t2);line-height:1.8}
.vcar-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,2.2vw,24px);border-top:1px solid var(--line-soft);
}
.vcar-dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vcar-dot{
  width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:background var(--t-fast),width var(--t-fast);
}
.vcar-dot[aria-current="true"]{background:var(--blue);width:18px;border-radius:999px}
.vcar-arrows{display:flex;align-items:center;gap:6px}

.ulist{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--gap-s)}
.ucard{
  display:flex;flex-direction:column;text-align:left;
  background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-1);
  overflow:hidden;transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.ucard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.ucard-img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--wash)}
.ucard-b{padding:13px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.ucard-t{font-size:var(--t-sm);font-weight:500;color:var(--ink);line-height:1.5}
.ucard-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--t2)}
.ucard-d{
  font-size:var(--t-xs);color:var(--t2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.src-note{margin-top:var(--gap-s);font-size:var(--t-xs);color:var(--t2);line-height:1.8}
.src-note a{color:var(--blue);font-weight:500}
.src-note a:hover{text-decoration:underline}

/* ==================================================================
   灵敏度计算器
   ================================================================== */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--gap-s)}
.calc .field{min-width:0}
.formula{
  margin-top:var(--gap);padding:16px 18px;border-radius:var(--r-m);
  background:var(--wash);font-size:var(--t-xs);color:var(--t2);line-height:1.9;
}
.formula b{color:var(--ink);font-weight:500}
.formula code{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink)}

/* ==================================================================
   音频 / 耳机调试
   ================================================================== */
.astep{
  display:flex;align-items:center;gap:clamp(12px,2vw,20px);
  padding:clamp(14px,1.8vw,20px);flex-wrap:wrap;
}
.astep + .astep{border-top:1px solid var(--line-soft)}
.astep-b{flex:1;min-width:200px}
.astep-t{font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.astep-d{margin-top:2px;font-size:var(--t-xs);color:var(--t2);line-height:1.7}
.astep-a{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.freq-val{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--t2);white-space:nowrap}

/* ==================================================================
   法务页（隐私政策 / 服务条款 / 免责声明）
   ================================================================== */
.doc-sole{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:0 var(--pad) var(--sec);
}
/* R5-023：容器与全站外框对齐，正文行宽仍控制在可读范围 */
.doc-sole h2,.doc-sole p,.doc-sole ul,.doc-sole .doc-updated{max-width:92ch}
.doc-sole h2{
  margin-top:clamp(28px,3.4vw,42px);
  font-size:var(--t-h3);font-weight:600;color:var(--ink);line-height:1.5;
}
.doc-sole h2:first-child{margin-top:0}
.doc-sole p{margin-top:8px;font-size:var(--t-body);line-height:1.85;color:var(--t2)}
.doc-sole p b{color:var(--t1);font-weight:500}
.doc-sole ul{margin-top:8px;padding-left:1.1em}
.doc-sole li{font-size:var(--t-body);line-height:1.8;color:var(--t2);margin-top:5px}
.doc-sole li::marker{color:var(--blue-line)}
.doc-updated{
  margin-top:var(--gap);padding:13px 16px;border-radius:var(--r-m);
  background:var(--wash);font-size:var(--t-xs);color:var(--t2);
}

/* ---------- 响应式 ---------- */
@media (max-width:680px){
  .modal{padding:0;align-items:flex-end}
  .modal-card,.modal-card.is-wide{
    width:100%;max-height:92svh;border-radius:var(--r-l) var(--r-l) 0 0;
  }
  .modal-bd{padding:16px 18px}
  .modal-hd{padding:16px 18px}
  .modal-ft{padding:14px 18px}
  .vcar-nav{flex-direction:column;align-items:stretch;gap:10px}
  .vcar-arrows{justify-content:space-between}
  .astep-a{width:100%;justify-content:space-between}
}

/* R10-2：首页公告条 .announce-wrap / .announce 已随「首页极简单框」整块下线，
   公告内容仍在独立页面 updates.html。 */

/* ==================================================================
   R3-026 · 版本更新页卡片（updates.html 专用）
   ------------------------------------------------------------------
   R5-022：首页「版本更新」精简列表已整块移除，对应 .upd / .upd-hd /
   .upd-v / .upd-t / .upd-d / .upd-chev / .upd-body / .upd-full 同步删除；
   下面这套图片骨架仍被 updates.html 的卡片（.ucard-imgbox .upd-img-i）使用。
   ================================================================== */

/* 图片骨架：容器按真实比例占位，图片淡入 */
.upd-img {
  position: relative;
  width: 100%;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--wash);
}
.upd-img.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--wash-deep) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: upd-skeleton 1.2s linear infinite;
}
.upd-img.is-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  font-size: var(--t-xs);
  color: var(--t2);
}
.upd-img-i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-base);
}
.upd-img:not(.is-loading) .upd-img-i { opacity: 1; }
@keyframes upd-skeleton {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .upd-img.is-loading::after { animation: none; }
}

/* 版本更新页卡片图：沿用同一套骨架 */
.ucard-imgbox { border-radius: var(--r-m) var(--r-m) 0 0; }
.ucard .upd-img-i { height: auto; }