/* ============================================================
   Web v3 壳层：桌面侧栏 / 移动底栏 / 页面容器 / 通用组件
   页面业务样式继续由 app.css 与 pages-v3.css 提供。
   ============================================================ */

:root {
  --radius: 8px;
  --topbar-h: 60px;
  --topnav-h: 46px;
  --content-max: 1280px;

  /* 壳层色板：对齐小程序 bottom-nav / nav-bar 的「玻璃胶囊」语言。
     小程序取值：--navigation-surface rgba(255,255,255,.5)（深色 rgba(30,30,46,.5)）、
     --navigation-outline rgba(226,232,240,.75)、选中底 rgba(249,115,22,.11)/深色 .2。 */
  --shell-glass: rgba(255, 255, 255, .82);
  --shell-glass-soft: rgba(255, 255, 255, .56);
  --shell-chip: rgba(100, 116, 139, .08);
  --shell-line: rgba(100, 116, 139, .12);
  --shell-accent-soft: rgba(249, 115, 22, .11);
  --shell-gloss: rgba(255, 255, 255, .55);
}
html[data-theme="dark"] {
  --shell-glass: rgba(30, 30, 46, .84);
  --shell-glass-soft: rgba(30, 30, 46, .58);
  --shell-chip: rgba(148, 163, 184, .10);
  --shell-line: rgba(148, 163, 184, .16);
  --shell-accent-soft: rgba(249, 115, 22, .20);
  --shell-gloss: rgba(255, 255, 255, .07);
}

html { scroll-behavior: smooth; }
body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 52%, transparent), transparent 320px),
    var(--bg);
}

.app-shell { min-height: 100vh; }
.main-content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 18px) 16px calc(84px + env(safe-area-inset-bottom));
}

.topbar {
  height: var(--topbar-h);
  gap: 12px;
  padding: 0 18px;
  background: var(--shell-glass);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--shell-line);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
}
/* 浅色主题的斜向玻璃高光：直接搬小程序 .nav-glass-sheen 的 108deg 渐变 */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 8%, rgba(255, 255, 255, .16) 24%, rgba(255, 255, 255, .03) 42%, transparent 57%, rgba(255, 255, 255, .10) 78%, transparent 92%);
}
html[data-theme="dark"] .topbar::before { display: none; }
.topbar > * { position: relative; z-index: 1; }

.brand { min-width: 0; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: .5px; }
/* 小程序 nav-bar-avatar：圆形、2rpx 白描边、aspectFill */
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
html[data-theme="dark"] .brand-logo { background: #1a1a2e; border-color: rgba(255, 255, 255, .14); }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 小程序顶栏只有 logo + 标题，没有「WEB」徽标 */
.brand-tag { display: none; }

.topbar-search {
  width: min(280px, 24vw);
  /* 不参与收缩：宽度压力全部落到顶部分类上，「被挤压」才有确定信号 */
  flex: 0 0 auto;
  height: 34px;
  margin-left: auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--shell-chip);
  color: var(--text-3);
  text-align: left;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.topbar-search:hover {
  color: var(--text-2);
  background: var(--bg-card);
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
}
.topbar-search span { flex: 1; font-size: 13px; }
.topbar-search kbd {
  padding: 1px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--shell-gloss);
  color: var(--text-3);
  font-size: 10px;
  font-family: inherit;
}

.topbar-actions { margin-left: 6px; gap: 7px; }
.topbar-quick {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--shell-chip);
  color: var(--text-2);
  font-size: 13px;
}
.topbar-quick:hover { color: var(--text); background: var(--bg-hover); }
.topbar-quick .ui-icon { width: 17px; height: 17px; }

/* 对齐小程序 .navbar-icon-box：灰底圆角块，无描边 */
.icon-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--shell-chip);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .16s ease, color .16s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:active { transform: scale(.96); }
.icon-btn:focus { outline: none; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--btn-ring); }
.topbar-login {
  height: 32px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

/* 顶栏一族的键盘焦点：用内嵌 ring，避免 outline-offset 撑出 topbar 被裁切 */
.topbar-quick:focus, .topnav-trigger:focus, .topbar-login:focus, .mobile-tabbar a:focus { outline: none; }
.topbar-quick:focus-visible, .topnav-trigger:focus-visible, .topbar-login:focus-visible {
  outline: none;
  box-shadow: var(--btn-ring);
}

/* ── 顶部二级导航（桌面分组下拉）────────────── */
.topnav { display: none; }
.topnav-group { position: relative; height: 100%; display: flex; align-items: center; flex: 0 0 auto; }
.topnav-trigger {
  height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 分类名不换行：否则空间不够时标题会在 32px 高的胶囊里折成 2~4 行 */
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .16s ease, color .16s ease;
}
.topnav-trigger:hover { color: var(--text); background: var(--bg-hover); }
.topnav-group.active > .topnav-trigger { color: var(--brand); background: var(--shell-accent-soft); }
.topnav-group.open > .topnav-trigger { color: var(--text); background: var(--bg-hover); }
.topnav-caret { width: 12px; height: 12px; opacity: .6; transition: transform .18s ease; }
.topnav-group.open > .topnav-trigger .topnav-caret { transform: rotate(180deg); }
.topnav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  min-width: 230px;
  max-width: min(680px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
  display: none;
  grid-auto-rows: min-content;
  gap: 3px;
}
html[data-theme="dark"] .topnav-panel { box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }
/* 触发器与面板之间留 8px 视觉间隙，用透明桥接层保证 hover 不中断 */
.topnav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.topnav-group.open .topnav-panel { display: grid; }
.topnav-panel.cols-1 { grid-template-columns: minmax(210px, 1fr); }
.topnav-panel.cols-2 { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
.topnav-panel.cols-3 { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
.topnav-group:nth-last-child(-n+2) > .topnav-panel { left: auto; right: 0; }
/* 动态分组较多时，右半区分组的面板改为右对齐，避免溢出视口右缘 */
.topnav-group.align-right > .topnav-panel { left: auto; right: 0; }
.topnav-item {
  min-height: 40px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.35;
  transition: background-color .16s ease, color .16s ease;
}
.topnav-item:hover { background: var(--bg-hover); color: var(--text); }
.topnav-item.active { background: var(--shell-accent-soft); color: var(--brand); font-weight: 700; }
html[data-theme="dark"] .topnav-item.active { color: #fb923c; }
.nav-icon-box {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  transition: background-color .16s ease;
}
.topnav-item:hover .nav-icon-box { background: var(--shell-chip); }
.nav-icon { width: 20px; height: 20px; object-fit: contain; }

/* 「更多」下拉：放不下的分组折叠进来，保留分类名 */
.topnav-more-panel { min-width: 260px; align-content: start; }
.topnav-more > .topnav-panel { left: auto; right: 0; }
.topnav-more-section { display: grid; align-content: start; gap: 2px; }
.topnav-more-section + .topnav-more-section { margin-top: 4px; }
.topnav-more-title { padding: 7px 10px 3px; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.topnav-more-items { display: grid; gap: 2px; }

.mobile-tabbar { display: none; }
/* 向下滚动时底栏收起，向上滚动/回到顶部时再出现（仅移动端显示，见下方媒体查询） */
.mobile-tabbar { transition: transform .22s ease; }
.mobile-tabbar.tabbar-hidden { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .mobile-tabbar { transition: none; } }

.app-footer {
  /* .app-shell 是 flex column，margin:0 auto 会让页脚收缩成内容宽；
     显式 100% 才能让左右两列真正撑到内容区两端 */
  width: 100%;
  max-width: var(--content-max);
  /* 底部留白要盖过右下角 quick-nav（两个 40px 圆钮 + 72px 偏移 ≈ 160px），
     否则滚到底时浮动按钮会压住右列的联系方式与语言切换 */
  padding: 22px 18px calc(168px + env(safe-area-inset-bottom));
  align-items: stretch;
  text-align: left;
}
/* 页脚：左列（品牌 + 声明 + 联系方式 + 备案）／右列（小程序码 + 语言切换） */
.footer-main {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}
.footer-col-info { flex: 1 1 auto; min-width: 0; }
.footer-col-side {
  flex: 0 0 auto;
  width: 176px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
/* 品牌行：logo + 标题/副标题在左，邮箱图标靠右（宽度跟声明对齐，图标才落在「右边」） */
.footer-brand { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; }
.footer-logo { width: 42px; height: 42px; object-fit: contain; }
.footer-brand-text { min-width: 0; flex: 1 1 auto; }
.footer-brand strong { display: block; color: var(--text); font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: .2px; }
.footer-tagline { display: block; margin-top: 3px; color: var(--text-3); font-size: 12px; line-height: 1.4; }
/* 品牌区下的浅色分割线 */
.footer-rule { max-width: 560px; height: 1px; margin-top: 14px; background: var(--line); }

/* 小程序码常显（原「小程序码」弹窗入口已下线） */
.footer-qr { margin: 0; text-align: center; }
.footer-qr img {
  display: block;
  /* figure 的宽度由更长的说明文字撑开，图片是 block，必须自居中才不会贴左 */
  margin: 0 auto;
  width: 140px;
  height: 140px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}
.footer-qr figcaption { margin-top: 6px; color: var(--text-3); font-size: 11px; }

/* 邮箱图标：只剩图标、不带文字，靠品牌行右端；邮箱不明文（地址分片在 footer.php 的 data-mu/data-md 里） */
.footer-contact-mail {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--text-2);
  text-decoration: none; transition: color .15s, border-color .15s, background .15s;
}
.footer-contact-mail svg { display: block; width: 17px; height: 17px; }
.footer-contact-mail:hover { color: var(--brand); border-color: var(--brand); background: var(--bg-card); }
.footer-contact-mail:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(249, 115, 22, .18); }

/* 语言切换：页脚右列底部 */
.footer-lang { display: inline-flex; }
.footer-lang .ow-lang-switch { background: transparent; border: 1px solid var(--line); padding: 1px; }
.footer-lang .ow-lang-btn { font-size: 11px; padding: 4px 9px; }
.footer-lang .ow-lang-btn.active { color: #fff; }

/* 声明与备案在左列内左对齐（覆盖 ui-sync.css 的居中规则）；
   2026-10-21：整体加大加粗，和小程序「我的」页脚的观感对齐（原 11px / --text-3 太淡） */
.footer-disclaimer, .footer-unofficial, .footer-anti-addiction { max-width: 560px; margin: 10px 0 0; color: var(--text-2); font-size: 12.5px; font-weight: 600; line-height: 1.7; }
.footer-unofficial { margin-top: 4px; }
.footer-anti-addiction { margin-top: 4px; }
/* 防沉迷三段（适龄提示 / 健康游戏忠告 / 心态倡导）：段间 6px 分开，段内靠 line-height 收口；
   适龄提示提一档色阶，监管要求的那句话要在页脚里先被看见。 */
.footer-anti-addiction p { margin: 0; }
.footer-anti-addiction p + p { margin-top: 6px; }
.footer-anti-addiction p:first-child { color: var(--text-2); }
.footer-beian { margin-top: 8px; color: var(--text-3); font-size: 11px; }
.footer-beian a { color: var(--text-3); text-decoration: none; }
.footer-beian a:hover { color: var(--text-2); }
.footer-beian-sep { margin: 0 8px; opacity: .4; }

/* ── 快捷搜索 ─────────────────────────────── */
.command-root {
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: min(14vh, 120px) 16px 16px;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(4px);
}
.command-panel {
  width: min(620px, 100%);
  max-height: min(620px, 78vh);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
  display: flex;
  flex-direction: column;
}
.command-input-wrap {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.command-input-wrap .ui-icon { width: 18px; height: 18px; opacity: .65; }
.command-input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}
.command-close { border: 0; background: transparent; color: var(--text-3); font-size: 20px; }
.command-list { overflow-y: auto; padding: 8px; }
.command-group-title { padding: 9px 10px 5px; color: var(--text-3); font-size: 11px; font-weight: 700; }
.command-item {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.command-item:hover, .command-item.active { color: var(--text); background: var(--bg-hover); }
.command-item .ui-icon { width: 18px; height: 18px; }
.command-item small { margin-left: auto; color: var(--text-3); font-size: 11px; }
.command-empty { padding: 34px 16px; color: var(--text-3); text-align: center; }

/* ── 通用 v3 组件 ─────────────────────────── */
.v3-page { width: 100%; }
.v3-page-head {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.v3-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.v3-page-head h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.18; }
.v3-page-head p { margin-top: 5px; color: var(--text-2); font-size: 13px; }
.v3-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-section { margin-top: 22px; }
.v3-section-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v3-section-head h2 { font-size: 17px; }
.v3-section-head span { color: var(--text-3); font-size: 12px; }
.v3-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.v3-toolbar {
  margin-bottom: 12px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.v3-search {
  min-width: 220px;
  flex: 1;
  height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-soft);
}
.v3-search .ui-icon { width: 17px; height: 17px; opacity: .65; }
.v3-search input, .v3-search select {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.v3-chipbar { display: flex; flex-wrap: wrap; gap: 7px; }
.v3-chip {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 12.5px;
}
.v3-chip:hover { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); color: var(--text); }
.v3-chip.active {
  border-color: color-mix(in srgb, var(--brand) 52%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, var(--bg-card));
  color: var(--brand);
  font-weight: 700;
}
.v3-state { padding: 44px 16px; color: var(--text-3); text-align: center; }
.v3-state strong { display: block; margin-bottom: 5px; color: var(--text-2); font-size: 15px; }
.v3-state .btn { margin-top: 12px; }
.v3-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}
.v3-tag.hot { color: #b45309; background: rgba(245, 158, 11, .14); }
.v3-tag.ok { color: #15803d; background: rgba(34, 197, 94, .13); }
.v3-tag.err { color: #b91c1c; background: rgba(239, 68, 68, .12); }
.v3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.v3-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.v3-tool {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  box-shadow: var(--shadow);
}
.v3-tool:hover { border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); transform: translateY(-1px); }
.v3-tool-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 7px;
  border-radius: 7px;
  background: var(--bg-soft);
  object-fit: contain;
}
.v3-tool-copy { min-width: 0; flex: 1; }
.v3-tool-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 750; }
.v3-tool-desc {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3-tool-arrow { align-self: center; color: var(--text-3); font-size: 18px; }

/* 功能中心：对齐小程序 feature-grid —— 两列竖排卡片，图标在上、名称与两行描述在下，无箭头无勾选 */
.v3-feature-grid .v3-tool {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
}
.v3-feature-grid .v3-tool-copy { width: 100%; }
.v3-feature-grid .v3-tool-arrow { display: none; }

.v3-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v3-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v3-stat {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
}
.v3-stat-label { color: var(--text-3); font-size: 11px; }
.v3-stat-value { margin-top: 4px; font-size: 20px; font-weight: 800; line-height: 1.1; }
.v3-stat-unit { margin-left: 3px; color: var(--text-3); font-size: 11px; font-weight: 500; }

/* 桌面（≥1024）正文全宽居中，二级导航并入顶栏常驻。 */
@media (min-width: 1024px) {
  .main-content {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding: calc(var(--topbar-h) + 22px) 28px 38px;
  }
  .main-content > * { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
  /* 上面的 auto 外边距居中只对块级盒子有效：input 的 UA 默认 display 是 inline-block，
     行内级盒子的 auto 外边距会被算成 0，直接挂在 .main-content 下的 .input 搜索框就贴到
     padding 边缘、偏离居中内容列（2026-10-22 营业中页搜索框歪到页面左侧）。
     .input 的约定本来就是「独占一行、占满宽度」，这里显式提为块级，让它跟同层其它块一起居中。 */
  .main-content > .input { display: block; }
  /* 页脚同样铺到内容区两端，子元素不再各自居中（左右两列需要等宽对齐）；
     底部留白避让桌面 quick-nav（right/bottom 24 + 88 高） */
  .app-footer {
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    padding: 24px 30px 132px;
  }
  .app-footer > * { max-width: none; margin-left: 0; margin-right: 0; }
  .topbar { gap: 10px; }
  .topnav {
    display: flex;
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin-left: clamp(20px, 2.6vw, 44px);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topnav-inner {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  /* 顶栏空间不够、分类放不下时：搜索栏与「全部功能」都收成图标按钮，
     把宽度让给顶部分类（由 app-shell.js 按实际溢出写入 .is-compact）。 */
  .topbar.is-compact .topbar-search {
    width: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
  }
  .topbar.is-compact .topbar-search span,
  .topbar.is-compact .topbar-search kbd { display: none; }
  .topbar.is-compact .topbar-quick {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .topbar.is-compact .topbar-quick-text { display: none; }
  .mobile-tabbar { display: none; }
  #toastRoot { top: calc(var(--topbar-h) + 12px); }
}

@media (max-width: 1023px) {
  .topbar-search { width: min(300px, 40vw); }
  .topbar-quick { display: none; }
  /* 移动底栏对齐小程序 .navigation-pill：悬浮胶囊 + 半透明玻璃 + 橙色软底选中 */
  .mobile-tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 120;
    padding: 6px;
    border: 1px solid var(--shell-line);
    border-radius: 999px;
    background: var(--shell-glass-soft);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .14), inset 0 1px 0 var(--shell-gloss);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  html[data-theme="dark"] .mobile-tabbar { box-shadow: 0 8px 28px rgba(0, 0, 0, .36), inset 0 1px 0 var(--shell-gloss); }
  .mobile-tabbar a {
    position: relative;
    min-height: 48px;
    padding: 5px 4px;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-3);
    font-size: 10px;
    transition: background-color .16s ease, color .16s ease;
  }
  .mobile-tabbar a.active {
    color: var(--brand);
    background: var(--shell-accent-soft);
    font-weight: 700;
  }
  .mobile-tabbar .ui-icon { width: 20px; height: 20px; }
  .mobile-inbox-badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 4px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--err);
  }
  /* 页脚一段式：手机与平板都单列顺排、整段居中（只有 ≥1024 桌面才用左右两栏）。
     品牌（含右侧邮箱图标）→ 分割线 → 声明 → 备案 → 小程序码 → 语言，全部居中对称 */
  .footer-main { flex-direction: column; align-items: stretch; gap: 18px; text-align: center; }
  .footer-brand { justify-content: center; }
  /* 手机上整行居中：图标跟在标题右边，不再靠右端 */
  .footer-contact-mail { margin-left: 0; }
  .footer-col-side { width: 100%; align-items: center; gap: 10px; }
  .footer-qr { text-align: center; }
  .footer-lang { align-self: center; }
  /* 声明有 max-width，stretch 撑不到底；用 auto 外边距保证段落块本身也是居中 */
  .footer-disclaimer, .footer-unofficial, .footer-anti-addiction { margin-left: auto; margin-right: auto; }
  .footer-beian { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .footer-beian-sep { display: none; }
}

@media (max-width: 719px) {
  .main-content { padding-left: 12px; padding-right: 12px; }
  .topbar { padding: 0 10px; gap: 8px; }
  /* 小程序顶栏是 logo + 标题，标题在手机上也要保留 */
  .brand { font-size: 14px; }
  .brand-name { display: block; }
  .topbar-search { width: 34px; padding: 0; justify-content: center; margin-left: auto; border-radius: 10px; }
  .topbar-search span, .topbar-search kbd { display: none; }
  .topbar-login { display: none; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-btn { width: 34px; height: 34px; }
  .v3-page-head { align-items: flex-start; flex-direction: column; }
  .v3-grid-2, .v3-grid-3, .v3-grid-4 { grid-template-columns: 1fr; }
  /* 页脚单列结构见 @media (max-width:1023px)；这里只收紧手机上的尺寸 */
  .footer-qr img { width: 112px; height: 112px; padding: 4px; border-radius: 10px; }
  .footer-qr figcaption { font-size: 10px; }
  .footer-contact-mail { width: 30px; height: 30px; }
  .footer-contact-mail svg { width: 16px; height: 16px; }
  .footer-logo { width: 38px; height: 38px; }
  .footer-lang .ow-lang-btn { font-size: 10px; padding: 3px 6px; }
}