/* 咸鱼 2026-10-29（13）：手机底栏 + 「更多」底部面板（行为见 31-tabbar.js）。只在 ≤980px 出现。 */
/* 咸鱼 2026-11-02：电脑端底栏会以没样式的一排字露在页面最底下（tailwind.css 里没有隐藏规则），这里兜住 */
.mobile-primary-nav { display: none; }
@media (max-width: 980px) {
  body.has-tabbar { --bottom-nav-h: 58px; }

  /* 底栏：四个常用页 + 更多 */
  body.has-tabbar .mobile-primary-nav:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* 宝宝 11-02：游客只有 4 个，原来写死 5 列右边空一格；按个数平分 */
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(22, 15, 24, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--hairline);
  }
  .xy-tab-btn { all: unset; position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; color: var(--text-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .xy-tab-btn svg { width: 22px; height: 22px; }
  .xy-tab-btn.is-on { color: var(--accent); }
  .xy-tab-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 10px; }
  .xy-tab-dot { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger, #e5566f); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }

  /* 三条杠由「更多」接替 */
  body.has-tabbar #mobileMenu { display: none; }

  /* 「更多」（咸鱼 2026-10-29 第三版）：照 iOS「更多」/ 微信「我」做成整页列表，盖住顶栏、停在底栏上面。
     大标题「更多」→「我」的卡（点了进个人中心）→ 分类一组一组的圆角列表（彩色小图标 + 名字 + 红点 + ›）→ 最底下单独一组「退出登录」 */
  .xy-more {
    position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); z-index: 59;
    background: radial-gradient(120% 40% at 50% 0%, rgba(244, 179, 207, .08), transparent 60%), var(--bg, #0d0a0f);
    animation: xyMoreIn .18s ease-out;
  }
  .xy-more:focus { outline: none; }
  .xy-more-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top) + 18px) 16px 24px; }
  .xy-more-title { margin: 0 4px 14px; font: 700 26px/1.2 "XY Serif", "Songti SC", serif; letter-spacing: 2px; color: var(--text-1); }
  /* 「我」的卡：和个人中心头卡同一张粉卡（粉底 --focus-bg、右边吉祥物水印、白圈头像、衬线名字、白色小胶囊） */
  .xy-more-me { all: unset; box-sizing: border-box; position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 14px 16px 16px; border-radius: 22px;
    background: var(--focus-bg); color: var(--focus-ink); box-shadow: 0 22px 44px -30px rgba(244, 179, 207, .5); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
  button.xy-more-me:active { transform: scale(.985); }
  /* 鱼丸整只站在右边、箭头前面（宝宝 11-02：不要淡、不要被压），只淡掉最外一圈纯底色藏方边 */
  .xy-more-me-art { flex: none; order: 1; width: 86px; aspect-ratio: 1; margin: -8px 0 -8px auto; background: url("../xianyu-logo-640.webp?v=20261108-b103") center / cover no-repeat; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); mask-composite: intersect; }
  .xy-more-me .xy-ava { flex: none; width: 54px; height: 54px; font-size: 21px; font-family: var(--font-serif); background: var(--sakura-900); color: var(--sakura-50); box-shadow: 0 0 0 3px rgba(255, 255, 255, .75), 0 12px 24px -12px rgba(58, 20, 40, .7); }
  .xy-more-me-txt { display: grid; gap: 6px; min-width: 0; }
  .xy-more-me-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1.2 var(--font-serif); letter-spacing: .06em; color: var(--focus-ink); }
  .xy-more-me-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .xy-more-me-tags em { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .62); color: var(--sakura-700); font-size: 11.5px; font-style: normal; font-weight: 600; }
  .xy-more-me-go { flex: none; order: 2; width: 18px; height: 18px; color: var(--focus-ink-2); }
  /* 分类列表 */
  .xy-more-group { --c: 244, 179, 207; margin-top: 18px; }
  .xy-more-group[data-cat="customer"] { --c: 190, 168, 255; }
  .xy-more-group[data-cat="finance"] { --c: 240, 200, 140; }
  .xy-more-group[data-cat="people"] { --c: 140, 215, 190; }
  .xy-more-group[data-cat="mine"] { --c: 150, 192, 250; }
  .xy-more-group[data-cat="system"] { --c: 205, 188, 222; }
  .xy-more-label { margin: 0 16px 6px; font-size: 12px; color: var(--text-4); letter-spacing: .08em; }
  .xy-more-list { overflow: hidden; border-radius: 16px; background: rgba(255, 244, 250, .045); box-shadow: inset 0 0 0 1px rgba(255, 236, 246, .07); }
  .xy-more-row { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px 0 14px; color: var(--text-1); font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .xy-more-row + .xy-more-row::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: rgba(255, 236, 246, .07); }
  .xy-more-row:active { background: rgba(255, 244, 250, .07); }
  .xy-more-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
  .xy-more-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, rgba(var(--c), .95), rgba(var(--c), .65)); color: #2a1420; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
  .xy-more-ico svg { width: 17px; height: 17px; }
  .xy-more-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .xy-more-row .xy-tab-dot { position: static; flex: none; }
  .xy-more-chev { flex: none; width: 17px; height: 17px; color: var(--text-4); }
  .xy-more-row.is-on .xy-more-name { color: var(--accent); font-weight: 600; }
  .xy-more-list--out { margin-top: 24px; }
  .xy-more-out { justify-content: center; color: #ff8fa3; font-weight: 600; }
  @keyframes xyMoreIn { from { opacity: 0; transform: translateY(8px); } }
}
@media (prefers-reduced-motion: reduce) { .xy-more { animation: none; } }