/* ==========================================================================
   演示页切换器 —— 固定右下角。
   这是 demo 的导航外壳，不属于产品 UI：故意用中性深色，和任何一个
   产品页面（后台控制台的蓝、C 端的暖色）都能区分开。
   所有页面共用这一份样式，改这里即可全局生效。
   ========================================================================== */

/* z-index 30：夹在页面内的浮层（下拉、底部购买条 = 20）和各产品的模态遮罩
   （底部弹层 = 50、抽屉 = 80、气泡 = 95、微信收银台 = 100）之间。
   放在遮罩之上会露出一个没被压暗的角落，看着像渲染坏了；放在遮罩之下才是
   正确的层级 —— 模态打开时就该连 demo 外壳一起压暗。 */
.dnav{
  position:fixed;right:20px;bottom:20px;z-index:30;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:13px;line-height:1.4;text-align:left;
}
.dnav *{box-sizing:border-box}

/* ---- 收起态的胶囊按钮 ---- */
.dnav-btn{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 11px;
  border:0;border-radius:999px;background:#1f2937;color:#fff;
  font:inherit;font-weight:500;cursor:pointer;
  box-shadow:0 6px 20px rgba(15,23,42,.28);
}
.dnav-btn:hover{background:#111827}
.dnav-btn:focus-visible{outline:2px solid #1677ff;outline-offset:2px}
.dnav-ico,.dnav-chev{width:15px;height:15px;flex:none;opacity:.88}
.dnav-chev{transition:transform .16s ease}
.dnav-btn[aria-expanded="true"] .dnav-chev{transform:rotate(180deg)}
.dnav-cur{white-space:nowrap}

/* ---- 展开的页面列表 ---- */
.dnav-menu{
  position:absolute;right:0;bottom:calc(100% + 8px);width:274px;padding:6px;
  max-height:calc(100vh - 96px);overflow-y:auto;
  border-radius:12px;background:#fff;border:1px solid #e4e8f0;
  box-shadow:0 16px 40px rgba(15,23,42,.22);
}
.dnav-menu[hidden]{display:none!important}
/* 分组标题：第一组贴顶，后面的组拉开距离并加一条分隔线 */
.dnav-hd{
  margin:5px 8px;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;color:#8a94a6;
}
.dnav-hd + .dnav-it{margin-top:1px}
.dnav-hd:not(:first-child){
  margin-top:11px;padding-top:11px;border-top:1px solid #eef1f6;
}

.dnav-it{
  display:flex;align-items:center;gap:10px;padding:8px;
  border-radius:8px;text-decoration:none;color:#1f2937;
}
.dnav-it:hover{background:#f2f5fa}
.dnav-it:focus-visible{outline:2px solid #1677ff;outline-offset:-2px}
.dnav-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dnav-txt b{font-weight:500;font-size:13px;color:inherit}
.dnav-txt i{
  font-style:normal;font-size:11.5px;color:#8a94a6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dnav-tick{width:15px;height:15px;flex:none;color:#1677ff;visibility:hidden}
.dnav-it[aria-current="page"]{background:#eef4ff}
.dnav-it[aria-current="page"] .dnav-tick{visibility:visible}
.dnav-it[aria-current="page"] .dnav-txt b{color:#1677ff;font-weight:600}

/* 窄屏：只留图标，别挡住页面内容 */
@media (max-width:640px){
  .dnav{right:12px;bottom:12px}
  .dnav-cur{display:none}
  .dnav-btn{padding:0 11px}
  .dnav-menu{width:min(252px,calc(100vw - 24px))}
}

@media (prefers-reduced-motion:reduce){
  .dnav-chev{transition:none}
}