/* ==========================================================================
   PC 端布局层（≥1024px）
   --------------------------------------------------------------------------
   挂载方式（index.html）：
     <link rel="stylesheet" href="style-pc.css?v=N" media="(min-width:1024px)">

   两条铁律：
   1) 本文件所有规则都包在 @media (min-width:1024px) 内，且 link 带 media 条件
      —— 移动端不解析、不命中，手机版效果 0 影响；
   2) 只做"覆盖"，不复制手机版样式。规则一律后加载，同特异性即可胜出；
      需要更高特异性时显式写 body.admin 前缀。

   目录：
     1. 布局变量
     2. 全局外壳（解除 480px 锁 / 内容区）
     3. 顶栏 → 侧栏顶部品牌区
     4. 底部 Tabbar → 左侧固定导航
     5. Toast / 遮罩弹窗 / 下拉刷新
     6. 未登录（登录页）形态
     7. 市场分类卡片网格（栅格先行，其余见后续批次）
   ========================================================================== */

@media (min-width: 1024px) {

/* ---------- 1. 布局变量 ---------- */
:root {
  --pc-side-w: 264px;         /* 左侧导航总宽（232 → 264：顶部「品牌 + 铃铛 + 身份徽标」不再挤成两行） */
  --pc-side-top: 64px;        /* 侧栏顶部品牌区高度 */
  --pc-content-max: 1180px;   /* 内容区最大宽度 */
  --pc-gutter: 40px;          /* 内容区左右内边距 */
}

/* ---------- 2. 全局外壳 ---------- */
html { scrollbar-gutter: stable; }

body {
  /* 手机版 body 是 max-width:480px 的居中窄列，桌面必须解除 */
  max-width: none;
  margin: 0;
  /* 左侧给固定侧栏让位；底部原有的 88px 为移动端浮动 tabbar 预留，桌面归零 */
  padding: 0 0 0 var(--pc-side-w);
  min-height: 100vh;
  overflow-y: scroll;          /* 页面长短切换时避免横向抖动 */
}

/* body.admin #app 在手机版被锁到 520px，桌面统一走内容区上限 */
#app,
body.admin #app {
  max-width: var(--pc-content-max);
  margin: 0 auto;
  padding: 26px var(--pc-gutter) 56px;
}

.screen.active { animation-duration: 0.22s; }

.page-head { padding: 2px 0 18px; }
.page-head h2 { font-size: 24px; }

/* ---------- 3. 顶栏 → 侧栏顶部品牌区 ---------- */
.topbar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--pc-side-w);
  height: var(--pc-side-top);
  margin: 0;
  padding: 0 16px;
  gap: 8px;
  flex-wrap: nowrap;
  border-radius: 0;
  box-shadow: none;
  /* z-index 沿用手机版的 30：必须低于 .mask(50)，否则弹窗遮罩盖不住侧栏 */
}

/* 品牌名单行省略兜底：264px 下正常能完整显示，仅在品牌名超长时截断 */
#brand {
  min-width: 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 管理端品牌是「Token 中转站 + 控制台」两段，竖排显示 */
body.admin #brand {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 0;
}
body.admin #brand b { font-size: 10px; opacity: 0.88; font-weight: 700; }

#topRight { flex-shrink: 0; }

/* ---------- 4. 底部 Tabbar → 左侧固定导航 ---------- */
.tabbar {
  position: fixed;
  left: 0;
  top: var(--pc-side-top);
  bottom: 0;
  width: var(--pc-side-w);
  max-width: none;
  margin: 0;
  padding: 14px 12px 18px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  transform: none;
  border: none;
  border-top: 1px solid var(--c-border-light);
  border-radius: 0;
  background: var(--c-surface);
  box-shadow: 1px 0 0 var(--c-border-light), 12px 0 32px rgba(16, 24, 40, 0.05);
  overflow-y: auto;
  /* z-index 沿用手机版的 40：必须低于 .mask(50) */
}
/* 保留手机版语义：未登录 / 管理员视图各自把对应导航隐藏 */
.tabbar.hidden { display: none; }

.tab-btn {
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 10px;
  padding: 11px 14px;
  font-size: 14px;
  border-radius: 12px;
  white-space: nowrap;
}
.tab-btn span { font-size: 18px; line-height: 1; }
.tab-btn:hover { background: var(--c-primary-bg); }

/* 选中项左侧竖条，比背景色更醒目（沿用手机版 active 底色）。
   currentColor 让管理端深色主题自动取绿色，不串色。 */
.tab-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: currentColor;
}

/* 手机版用「底部短指示条」表示选中；竖排导航里它会跑到文字右侧，禁用后改用左侧竖条 */
.tab-btn.active::after,
body.admin #tabbar-admin .tab-btn.active::after { display: none; }

/* 手机版图标的上浮微动效是给横排底栏做的，竖排下会显得歪 */
body:not(.admin) .tab-btn.active span { transform: none; }

/* ---------- 4b. 管理端（深色控制台）同步竖排 ---------- */
/* admin 里大量 body.admin / #tabbar-admin 前缀的高特异性规则是「横排底栏」专用，
   必须用同等特异性覆盖，否则会退回手机底栏形态。 */
body.admin { padding: 0 0 0 var(--pc-side-w); }

body.admin .topbar {
  height: var(--pc-side-top);
  padding: 0 14px;
  border-radius: 0;
}

body.admin #tabbar-admin.tabbar {
  top: var(--pc-side-top);
  bottom: 0;
  left: 0;
  width: var(--pc-side-w);
  max-width: none;
  transform: none;
  flex-direction: column;
  justify-content: flex-start;
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0;
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.12), 14px 0 34px rgba(0, 0, 0, 0.28);
  padding: 14px 10px 18px;
  overflow-y: auto;
}

body.admin #tabbar-admin .tab-btn {
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  font-size: 14px;
  border-radius: 12px;
}
body.admin #tabbar-admin .tab-btn.active span { transform: none; }

/* ---------- 5. Toast / 遮罩弹窗 / 下拉刷新 ---------- */
/* 手机版 toast 用 left:50% 相对视口居中；桌面要相对「内容区」居中 */
.toast {
  left: calc(var(--pc-side-w) + (100% - var(--pc-side-w)) / 2);
}

/* 遮罩铺满全屏并盖住侧栏（z-index 见上），弹窗按桌面惯例全屏居中 */
.mask { padding: 40px; }

/* 下拉刷新是触摸手势：桌面禁用，避免触屏笔记本误触发 */
#ptr { display: none !important; }

/* ---------- 6. 未登录（登录页）形态 ---------- */
/* 没有 body.auth 之类的登录态类名，用 :has() 反向判断，零 JS 改动。
   :has() 不被支持时整条失效 → 退化为「带侧栏 + 卡片居中」，仍然可用。 */
body:has(#view-auth.active) { padding-left: 0; }
body:has(#view-auth.active) .topbar { display: none; }
body:has(#view-auth.active) #app { padding-top: 0; }
body:has(#view-auth.active) #view-auth .card {
  max-width: 460px;
  margin: 12vh auto 0;
  padding: 30px 28px;
}
body:has(#view-auth.active) #view-auth .auth-title { font-size: 26px; }

/* ---------- 7. 市场分类卡片网格 ---------- */
.market-cat-head { margin: 2px 0 14px; }
.market-cat-head .mch-title { font-size: 16px; }

.cat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* 分类套餐弹窗：手机上 400px 够用，桌面上容纳 2 列套餐卡 */
.cat-plan-box { max-width: 720px; }

/* ---------- 8. 其余弹窗宽度重定标 ---------- */
/* 手机版按 340~480px 设计，桌面上长 URL / 多字段会挤成一团 */
#cred-mask { padding: 40px 24px; }
#cred-mask .cred-box { max-width: 760px; }
.pay-box { max-width: 440px; }
.msg-box { max-width: 720px; }
.admin-user-detail-box { max-width: 640px; }
/* 批量生成结果弹窗：只有一列兑换码，640 会散开，单独收窄（同特异性靠后加载胜出） */
body.admin .code-gen-box { max-width: 460px; }

/* ---------- 9. 手机版横向滑动条 → 桌面折行展示 ---------- */
/* 这些容器靠 overflow-x:auto 左右滑，鼠标滚轮横向滚动体验差，桌面改为自动折行 */
.rev-daily-rail,
.odf-rail,
.pricing-cats {
  flex-wrap: wrap;
}

/* ---------- 10. 手机版「撑满整行」的组件在桌面收窄 ---------- */
/* 下载按钮：手机上整行色块是视觉重心，桌面 800px 宽会变成一条横杠 */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 14px 30px;
}
/* 分段切换器：不让两个 tab 各占半个屏幕 */
.docs-tabs { max-width: 460px; }
/* 兑换码输入行：输入框 800px 太长，阅读动线断裂 */
.redeem-bar { max-width: 620px; }
/* 设置页「保存 / 重新加载」：从 1fr 1fr 改为按内容宽度靠左 */
body.admin #view-a-settings .cfg-actions {
  grid-template-columns: auto auto;
  justify-content: start;
}
/* 键值行：手机版靠 space-between 把值推到右边，宽屏下标签与值隔着 700px */
.kv { justify-content: flex-start; gap: 16px; }
.kv b { text-align: left; }
/* 分段切换器（钱包流水/订单、活动审核状态）：不让 2~3 个 tab 各占半个屏幕 */
.wallet-tabs { max-width: 520px; }

/* 指南正文：限制阅读宽度，宽屏下 1040px 的行长会让人读串行 */
.docs-pane > .card { max-width: 820px; }

/* 分类套餐弹窗内部：桌面按 2 列排套餐卡 */
.cat-plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* 桌面没有触摸反馈，补 hover 提示（手机端本来就没有 hover，不受影响） */
.me-item:hover { background: var(--c-primary-bg); }

/* ---------- 11. 会员优惠（个人中心资料卡 / 套餐折后价 / 管理端配置卡） ---------- */
/* 侧栏顶部单行放「品牌 + 铃铛 + 身份徽标」，徽标做得更精致一点 */
#topRight { gap: 6px; }
.role-chip {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 8px;
  margin-right: 0;
}
.role-chip .rc-ic { font-size: 11px; }
.role-chip.is-vip { box-shadow: 0 1px 8px rgba(245, 158, 11, 0.35); }

/* 个人中心资料卡：桌面拆成左右两栏 —— 左「资料 + 注册时间」，右「会员进度」。
 * 会员区隐藏（活动下架）时用 :has() 自动回退成单栏，避免右侧留白。 */
.me-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(340px, 1.15fr);
  column-gap: 34px;
  align-items: start;
  padding: 20px 24px;
}
.me-card:not(:has(.vip-card:not(.hidden))) { display: block; }
.me-id { grid-column: 1; grid-row: 1; }
.me-id-txt .profile-name { font-size: 20px; }
.me-meta { grid-column: 1; grid-row: 2; }
.vip-card {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0;
  padding: 14px 16px;
}
.vip-card-head .vip-card-title { font-size: 14.5px; }

/* 活动页「会员优惠」卡：内容区 1180px 宽会把三个数据块拉成 350px 的大空盒，
 * 桌面限制单块与进度条宽度并靠左，保持「数据条」的紧凑观感。 */
.vip-act-facts { grid-template-columns: repeat(3, minmax(0, 210px)); justify-content: start; }
.vip-act .vip-bar { max-width: 660px; }
/* 套餐卡在桌面栅格里更宽，折扣提示可完整展示（不再省略） */
.plan-vip-tip { font-size: 11px; }
/* 管理端会员优惠配置：两列表单在宽屏下不必撑满整行 */
.vip-cfg .act-cfg-panel { max-width: 720px; }
/* 购买弹窗内的折扣行：与 .kv 的桌面左对齐口径保持一致，金额不贴到最右 */
#wallet-pay-mask .kv b { margin-left: auto; }

/* ---------- 12. 管理端总览（桌面栅格：KPI 4 列 / 指标 3 列 / 钱包榜 2 列） ---------- */
/* 手机端是「KPI 2×2 → 单列卡片」，桌面靠宽度一次铺开，一眼看完关键数字。 */
body.admin #view-a-overview .page-head { padding: 2px 0 18px; }
body.admin #view-a-overview .ovp-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
/* 总营收主卡占两列：金额更大、收款/退款构成并排 */
body.admin #view-a-overview .ovp-kpi-main { grid-column: span 2; }
body.admin #view-a-overview .ovp-kpi { padding: 16px 18px 17px; }
body.admin #view-a-overview .ovp-lb { font-size: 12px; }
body.admin #view-a-overview .ovp-num { font-size: 26px; }
body.admin #view-a-overview .ovp-kpi-main .ovp-num { font-size: 36px; }
body.admin #view-a-overview .ovp-split { gap: 26px; }
body.admin #view-a-overview .ovp-split b { font-size: 14px; }
body.admin #view-a-overview .ovp-hint { font-size: 10.5px; }
/* 区块节奏：桌面收紧到 14px，避免一段一段被大留白切碎 */
body.admin #view-a-overview .ovp-block { margin-top: 14px; }
body.admin #view-a-overview .ovp-card { padding: 14px 16px 12px; }
body.admin #view-a-overview .ovp-card .ovp-block-head { margin-bottom: 6px; flex-wrap: wrap; }
body.admin #view-a-overview .ovp-block-head h3 { font-size: 13.5px; }
body.admin #view-a-overview .ovp-block-head > span { font-size: 11px; }
body.admin #view-a-overview .ovp-cards {
  gap: 12px;
  margin-top: 14px;
}
/* 每日营收：两端统一为「横向滑动条」——桌面也保持一行横排，天数多了左右滑，
 * 不再折行成第二排（折行会让最后一行只剩 1~2 张卡，看着很散）。 */
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail .rdc { flex: 0 0 78px; }
/* 桌面保留一条细滚动条：鼠标用户看得出来可以左右拖 */
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail::-webkit-scrollbar { display: block; height: 6px; }
body.admin #view-a-overview #admin-rev-daily .rev-daily-rail::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 3px;
}
/* 钱包余额榜：桌面两列并排，减少纵向滚动 */
body.admin #view-a-overview #admin-wallet-rank.wallet-rank:has(.wr-item) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}
/* 今日速览：桌面收成「一条横向信息带」——4 段共用一张卡、1px 分隔线，
 * 4 个 270px 宽的独立浅色盒会把整行撑得很空。 */
body.admin #view-a-overview .ovp-day {
  display: flex;
  gap: 1px;
  margin-bottom: 14px;
  padding-bottom: 0;
  overflow: hidden;
  background: #334155;
  border: 1px solid #334155;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
body.admin #view-a-overview .ovp-day-cell {
  flex: 1 1 0;
  padding: 14px 16px 15px;
  border: none;
  border-radius: 0;
  background: #1e293b;
}
body.admin #view-a-overview .ovp-day-lb { font-size: 11px; }
body.admin #view-a-overview .ovp-day-num { font-size: 24px; }
body.admin #view-a-overview .ovp-day-sub { font-size: 10px; }

/* 两个榜单并排：内容宽度相近（一列套餐名 + 一列用户名），
 * 单列铺满时每行会被拉成 1100px 的长条。 */
body.admin #view-a-overview .ovp-rank-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
/* 分析卡：横向滑动卡片条（与手机同一形态）。
 * 桌面 4 卡正好铺满一行（flex: 1 1 0），屏幕更窄时保持 250px 最小宽度并可左右滑；
 * 卡内是「标签左 / 数值右」的键值行，一行 8 条像报表，不是 8 个碎格子。 */
body.admin #view-a-overview .ovp-analysis {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
/* 210px：1024 的 680px 内容区正好放下 3 张完整卡，再窄才需要滑 */
body.admin #view-a-overview .ovp-analysis > .ovp-card { flex: 1 1 0; min-width: 210px; }
/* 桌面卡片足够宽，口径说明重新显示 */
body.admin #view-a-overview .ovp-analysis .ovp-block-head > span { display: inline; }
body.admin #view-a-overview .ovp-analysis .ovp-metric b { font-size: 15.5px; }
body.admin #view-a-overview .ovp-analysis .ovp-metric span { font-size: 11.5px; }
body.admin #view-a-overview .ovp-analysis::-webkit-scrollbar { display: block; height: 6px; }
body.admin #view-a-overview .ovp-analysis::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 3px;
}
/* 套餐销量 / 钱包榜：桌面列表行更宽松 */
body.admin #view-a-overview .ovp-rank-row { padding: 11px 14px; }
body.admin #view-a-overview .ovp-rank-name { font-size: 13px; }

/* ---------- 13. 长列表两列栅格 ---------- */
/* 手机版这些列表是「单列卡片流」，每张卡横跨 1100px 后内部两端会被拉开 800px 以上，
 * 按钮则被拉成整行横杠。桌面统一改为自适应栅格（auto-fill 让它随 1024/1440/1920 自动增列），
 * 栅格内的 margin-bottom 全部归零，行间距交给 gap，避免「底部间距翻倍」。 */
/* 用 :has(条目) 而不是 :not(.note) —— 管理端这些容器渲染数据后仍保留 .note.state 的类名，
 * 只有「有真实条目」时才切成栅格；空/加载/错误状态继续沿用手机版的居中 flex。 */
#plan-area,
#inactive-area,
#wallet-tx-list,
#wallet-order-list,
#activity-list,
body.admin #admin-users-list:has(.admin-user-card),
body.admin #admin-codes-list:has(.code-item),
body.admin #view-a-codes #admin-codes-list:has(.code-item),
body.admin #view-a-codes #admin-codes-list.note.state:has(.code-item),
body.admin #admin-purchase-list:has(.purchase-card),
body.admin #admin-pricing-list:has(.price-card),
body.admin #view-a-pricing #admin-pricing-list:has(.price-card),
body.admin #admin-act-list:has(.act-card),
body.admin #admin-act-list:has(.act-sub-item),
body.admin #admin-recharge-list:has(.rchg-item) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}
/* 管理端卡片信息密度更高，列宽略放大 */
body.admin #admin-users-list:has(.admin-user-card),
body.admin #admin-codes-list:has(.code-item),
body.admin #view-a-codes #admin-codes-list:has(.code-item),
body.admin #view-a-codes #admin-codes-list.note.state:has(.code-item) {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
body.admin #admin-purchase-list:has(.purchase-card) { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
body.admin #admin-pricing-list:has(.price-card),
body.admin #admin-act-list:has(.act-card),
body.admin #admin-act-list:has(.act-sub-item) {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

/* 栅格内条目不再靠 margin 撑间距 */
#plan-area > *,
#inactive-area > *,
#wallet-tx-list > *,
#wallet-order-list > *,
#activity-list > *,
body.admin #admin-users-list:has(.admin-user-card) > *,
body.admin #admin-codes-list:has(.code-item) > *,
body.admin #admin-purchase-list:has(.purchase-card) > *,
body.admin #admin-pricing-list:has(.price-card) > *,
body.admin #admin-recharge-list:has(.rchg-item) > *,
body.admin #admin-act-list:has(.act-card) > * { margin-bottom: 0; }

/* 占整行的元素：空/错误状态卡、「加载更多」按钮、失效套餐入口、活动页会员卡、活动发放汇总 */
#plan-area > .card,
#inactive-area > .card,
#wallet-tx-list > .card,
#wallet-order-list > .card,
#activity-list > .card,
#admin-act-list > .card,
#admin-act-list .act-sum,
#plan-area > .inactive-entry,
#activity-list > .vip-act,
#admin-users-list > .load-more,
#admin-codes-list > .load-more,
#admin-purchase-list > .load-more,
#admin-recharge-list > .load-more,
#admin-act-list > .load-more { grid-column: 1 / -1; }

/* 套餐卡：进度条与「调用凭证」按钮跟着卡宽走，不再是一条 1000px 的横杠 */
#plan-area .mypkg-actions,
#inactive-area .mypkg-actions { justify-content: flex-start; }
#plan-area .mypkg-actions .btn,
#inactive-area .mypkg-actions .btn {
  flex: 0 0 auto;
  min-width: 180px;
  width: auto;
  padding: 11px 22px;
}

/* 活动卡：奖励金额是「色块标签」，不该拉成整行红条 */
.act-card .act-hero { display: inline-flex; align-items: baseline; }
/* 管理端活动配置卡：三个数据块限宽靠左（与 .vip-act-facts 同口径） */
body.admin #view-a-activity .act-cfg-facts > span { flex: 0 1 210px; }

/* 管理端用户卡：5 个操作按钮在窄卡里自动折行，不要挤出卡片 */
.admin-user-card .ui-actions { flex-wrap: wrap; }

/* 套餐管理（价格）：一行 4 个控件在 400px 卡里会挤，允许折行 */
body.admin #view-a-pricing .pc-row3 { flex-wrap: wrap; }

/* ---------- 14. 单卡片 / 表单：桌面收窄，避免「内容只占左边一半」 ---------- */
/* 钱包余额卡：整幅宽蓝色横条在桌面上过于抢眼，收成一张「大卡片」 */
.wallet-head-card { max-width: 520px; }
/* 充值引导文案：手机版一行读到底没问题，桌面上 800px 行长看得很累 */
.wallet-tip { max-width: 560px; }

/* 兑换页：卡片外壳跟着内容一起收窄（手机版是满宽卡片，桌面右半边全是空白） */
#view-redeem > .card { max-width: 640px; }

/* 在线测试：两个按钮并排、清空按钮收成小按钮 */
#view-docs #docs-pane-test .card { max-width: 760px; }
#view-docs .btn-row .btn {
  width: auto;
  flex: 0 0 auto;
  padding: 12px 24px;
}
#view-docs .btn-row .btn-sm { margin-top: 10px; }
#view-docs .btn.btn-sm { display: inline-flex; width: auto; }

/* 管理端系统设置：4 张表单卡收窄，长文本域不再横跨 800px */
body.admin #view-a-settings .cfg-card { max-width: 760px; }

/* ---------- 15. PC 吸顶页头 ---------- */
/* 长列表滚动后标题、刷新、返回按钮会一起滚走，用户既看不到自己在哪个页面，
 * 也无法「回到顶部再刷新」。桌面把页头吸顶，手机端不受影响（规则只在 PC 层）。 */
.page-head {
  position: sticky;
  top: 0;
  z-index: 6;                    /* 低于侧栏 30 / 遮罩 50，只压在卡片之上 */
  padding: 12px 0 14px;
  background: rgba(240, 242, 248, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06);
}
body.admin .page-head {
  position: sticky;              /* 覆盖 style.css 里的 body.admin .page-head{position:relative} */
  top: 0;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.14);
}
/* 页头已吸顶，原来那条渐隐分割线会随页面滚动留下一道亮边，去掉 */
body.admin .page-head::after { display: none; }
/* 登录页没有侧栏与滚动列表，页头不需要吸顶 */
body:has(#view-auth.active) .page-head { position: static; background: none; box-shadow: none; }

/* ---------- 16. 退出登录 → 侧栏底部 ---------- */
/* 手机端仍在「我的」页 / 管理端设置页底部（DOM 未动，只是桌面隐藏）；
 * 桌面把它放进固定侧栏底部，随时可点，不用滚到页面最末。 */
#side-logout {
  display: flex;                 /* 覆盖 index.html 上的 hidden（UA 规则弱于作者规则） */
  align-items: center;
  gap: 10px;
  position: fixed;
  left: 12px;
  bottom: 16px;
  width: calc(var(--pc-side-w) - 24px);
  padding: 11px 14px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 12px;
  background: var(--c-surface);
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 41;                   /* 高于侧栏 40，低于遮罩 50 */
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
#side-logout span:first-child { font-size: 16px; line-height: 1; }
#side-logout:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.5); }
body.admin #side-logout {
  background: #1e293b;
  border-color: rgba(239, 68, 68, 0.32);
  color: #f87171;
}
body.admin #side-logout:hover { background: rgba(239, 68, 68, 0.14); }
/* 给侧栏底部留出按钮高度，避免最后一个导航项被压住 */
.tabbar,
body.admin #tabbar-admin.tabbar { padding-bottom: 78px; }
/* 退出登录在桌面已进侧栏，页面内这两处入口隐藏 */
body.admin .admin-exit { display: none; }
#view-me .me-item.danger[onclick="logout()"] { display: none; }
/* 登录页无侧栏，按钮一并隐藏 */
body:has(#view-auth.active) #side-logout { display: none; }

} /* @media (min-width: 1024px) */

/* 1024~1279 的窄桌面：内容区只有 ~680px，KPI 四列会把金额挤到换行，
 * 这一段降为两列（主卡整行 + 两张辅卡并排），1280 以上再回到四列。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.admin #view-a-overview .ovp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin #view-a-overview .ovp-kpi-main { grid-column: 1 / -1; }
  body.admin #view-a-overview .ovp-num { font-size: 22px; }
  body.admin #view-a-overview .ovp-kpi-main .ovp-num { font-size: 32px; }
  body.admin #view-a-overview .ovp-cards { gap: 12px; }
  /* 榜单单列；今日速览与分析卡都保持横排（680px 下分别放得下 4 段 / 3 张卡） */
  body.admin #view-a-overview .ovp-rank-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.admin #view-a-overview .ovp-analysis .ovp-metric b { font-size: 15px; }
}