/* ==========================================================================
   代理客户端 · 桌面端适配层  (desktop.css)
   --------------------------------------------------------------------------
   风格：现代极简（白底 / 细边框 / 小圆角 / 克制留白）
   主色：商务蓝 #2563EB
   范围：仅在 ≥992px 生效，手机端表现完全不变
   回退：删除 index.html 中的 <link> 引用即可完全还原
   --------------------------------------------------------------------------
   内容：① 设计 Token  ② 内容区宽度  ③ 登录页
        ④ 全局打磨   ⑤ 代理首页  ⑥ 「我的」页
        ⑦ 卡密管理（核心重做：6 行 → 1 行紧凑表格）
        ⑧ 底部悬浮导航
   ========================================================================== */

/* ==========================================================================
   1. 设计 Token
   ========================================================================== */
:root {
  /* 品牌色 */
  --ag-primary:       #2563eb;
  --ag-primary-hover: #1d4ed8;
  --ag-primary-soft:  #eff6ff;
  --ag-primary-ring:  rgb(37 99 235 / .20);

  /* 中性色 */
  --ag-text:         #111827;
  --ag-text-muted:   #6b7280;
  --ag-text-caption: #9ca3af;
  --ag-bg:           #ffffff;
  --ag-bg-subtle:    #f9fafb;
  --ag-bg-page:      #f7f8fa;
  --ag-border:       #e5e7eb;
  --ag-border-hover: #d1d5db;

  /* 状态色 */
  --ag-success: #16a34a;  --ag-success-soft: #f0fdf4;
  --ag-warning: #d97706;  --ag-warning-soft: #fffbeb;
  --ag-danger:  #dc2626;  --ag-danger-soft:  #fef2f2;

  /* 字体 */
  --ag-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ag-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* 圆角：极简风格用小圆角 */
  --ag-radius-sm: 4px;
  --ag-radius-md: 6px;
  --ag-radius-lg: 8px;

  /* 阴影：克制到几乎看不见 */
  --ag-shadow-sm: 0 1px 2px rgb(16 24 40 / .04);
  --ag-shadow-md: 0 1px 3px rgb(16 24 40 / .06), 0 1px 2px rgb(16 24 40 / .04);
  --ag-shadow-lg: 0 4px 16px rgb(16 24 40 / .08);

  /* 间距：4px 基准网格 */
  --ag-s1: 4px;  --ag-s2: 8px;  --ag-s3: 12px;
  --ag-s4: 16px; --ag-s5: 24px; --ag-s6: 32px;

  --ag-container: 1200px;
}

/* ==========================================================================
   2. 内容区宽度：宽屏下从固定 944px 放宽
      （1920px 屏原来两侧各空 488px，内容被挤成中间一条）
   ========================================================================== */
@media (min-width: 1400px) {
  uni-page-body { max-width: var(--ag-container) !important; }
}
@media (min-width: 1920px) {
  uni-page-body { max-width: 1400px !important; }
}

/* ==========================================================================
   3. 登录页
   ========================================================================== */
@media (min-width: 768px) {

  /* 3.1 整页居中容器（原为 absolute flex，卡片被拉到 900px 高） */
  .login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 0 !important;
    overflow-y: auto !important;
    background: var(--ag-bg-page) !important;
  }
  .login .u-navbar,
  .login .u-navbar-placeholder { display: none !important; }

  /* 3.2 登录卡片 */
  .login-main {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 40px 32px 36px !important;
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-lg) !important;
    box-shadow: var(--ag-shadow-md) !important;
  }
  .login-logo { display: block !important; margin: 0 auto 24px !important; }

  /* 3.3 输入行（原宽 1390px，占满整屏） */
  .login-list {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    margin-top: 12px !important;
    padding: 0 12px !important;
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .login-list::after { border: 0 !important; display: none !important; }
  .login-list:focus-within {
    border-color: var(--ag-primary) !important;
    box-shadow: 0 0 0 3px var(--ag-primary-ring) !important;
  }
  .login-input,
  .login-list uni-input,
  .login-list .uni-input-input { font-size: 14px !important; }

  /* 3.4 验证码图片定位
         （原 absolute 但父级未定位，会飘到卡片外面） */
  .login .codeimg {
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2;
  }
  .login-list .login-input { padding-right: 108px !important; }
  .login .codeimg,
  .login .codeimg img,
  .login .codeimg uni-image {
    border-radius: var(--ag-radius-sm) !important;
    overflow: hidden !important;
  }

  /* 3.5 主按钮 */
  .login-btn {
    width: 100% !important;
    height: 42px !important;
    margin-top: 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    background: var(--ag-primary) !important;
    background-image: none !important;
    border-radius: var(--ag-radius-md) !important;
    box-shadow: none !important;
    transition: background .15s ease;
  }
  .login-btn:hover,
  .login-btn:active {
    background: var(--ag-primary-hover) !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   4. 全局打磨
   ========================================================================== */
@media (min-width: 768px) {

  /* 4.1 字体栈：原页面兜底到 Times New Roman，中文渲染很差 */
  uni-app, uni-page, uni-view, uni-text, uni-input, uni-picker,
  input, textarea, button, uni-button, .uni-input-input {
    font-family: var(--ag-font) !important;
  }

  /* 4.1b ★ 图标字体必须还原（否则勾选框、返回箭头会显示成「口」）
         ------------------------------------------------------------------
         图标不是图片，而是「图标字体 + 私用区字符」：
             .u-iconfont   → font-family: uicon-iconfont   (uView 勾选/右箭头)
             .iconfont     → font-family: uni               (uni-app 返回箭头)
             .uni-icons    → font-family: uni
         而 !important 的优先级高于选择器具体度 —— 上面 4.1 那条给
         uni-view 加的 font-family 带 !important，会把 vendor 的图标字体
         规则整个压掉，图标字符回落到系统字体；系统字体没有私用区那个
         码位，于是画成缺字方块「口」。
         注意顺序：u-iconfont 必须写在 .iconfont 之后 ——
         [class*="iconfont"] 和 [class*="u-iconfont"] 具体度相同，
         同样带 !important 时靠书写顺序决胜，后者需覆盖前者。 */
  [class*="iconfont"] {
    font-family: uni !important;
  }
  .uni-icons,
  [class*="uni-icons"] {
    font-family: uni !important;
  }
  [class*="weui-icon"] {
    font-family: weui !important;
  }
  .u-iconfont,
  [class*="u-iconfont"],
  uni-view.u-iconfont,
  uni-text.u-iconfont {
    font-family: uicon-iconfont !important;
  }
  /* 数字使用等宽字形：金额、卡号、时间列对齐更整齐 */
  uni-page-body {
    font-variant-numeric: tabular-nums;
    color: var(--ag-text) !important;
    background: var(--ag-bg-page) !important;
  }

  /* 4.2 细滚动条，替代系统粗滚动条 */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: #9ca3af; background-clip: content-box; }
  ::-webkit-scrollbar-corner { background: transparent; }

  /* 4.3 键盘可达性 */
  uni-input:focus-visible,
  button:focus-visible,
  .cu-btn:focus-visible,
  [role="button"]:focus-visible {
    outline: 2px solid var(--ag-primary);
    outline-offset: 2px;
  }

  /* 4.4 悬停/状态过渡 */
  .cu-btn, uni-button { transition: background .15s ease, border-color .15s ease; }

  /* 4.5 长文本不再撑破容器 */
  uni-text, .u-line-1, .u-line-2, .u-title { overflow-wrap: anywhere; }
}

/* ==========================================================================
   5. 代理首页 pages/index/index
      区块：应用分类 / 应用列表 / 应用公告 / 快捷制卡 / 应用数据 / 卡密价格
      用 :has() 精确锁定，绝不影响其它页面
   ========================================================================== */
@media (min-width: 992px) {

  uni-view.body:has(.charts-box) { padding: var(--ag-s5) 0 120px !important; }

  /* 5.1 区块标题：小号加粗 + 左侧蓝条
         （原来只是 14px 纯黑裸文字，没有层级） */
  uni-view.body:has(.charts-box) .title_view {
    height: auto !important;
    margin: 0 0 var(--ag-s3) !important;
    padding: 0 0 0 10px !important;
    border-left: 3px solid var(--ag-primary);
    align-items: center;
  }
  uni-view.body:has(.charts-box) .title_view .title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
    line-height: 1.5 !important;
  }

  /* 5.2 卡片统一：1px 细边框 + 极小阴影 + 6px 圆角 */
  uni-view.body:has(.charts-box) .heart_rate_range,
  uni-view.body:has(.charts-box) .box_view,
  uni-view.body:has(.charts-box) .charts-box {
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
    box-shadow: var(--ag-shadow-sm) !important;
  }
  uni-view.body:has(.charts-box) .heart_rate_range { padding: var(--ag-s3) !important; }

  /* 5.3 应用数据：13 个透明条目 → 统计卡片栅格
         （原来 .item 无背景、3 个一行挤成一堵墙） */
  uni-view.body:has(.charts-box) .heart_rate_range:has(.item) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--ag-s3);
    padding: var(--ag-s4) !important;
  }
  /* 若 .item 被一层 .top 包着，让该层对布局透明，卡片才能进入栅格 */
  uni-view.body:has(.charts-box) .heart_rate_range:has(.item) > .top { display: contents; }

  uni-view.body:has(.charts-box) .heart_rate_range .item {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--ag-s3) var(--ag-s4) !important;
    background: var(--ag-bg-subtle) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease;
  }
  uni-view.body:has(.charts-box) .heart_rate_range .item:hover {
    background: var(--ag-bg) !important;
    border-color: var(--ag-border-hover) !important;
  }
  /* 5.3.1 卡片内部排版层级：标签 12 / 数值 22 / 备注 12 */
  uni-view.body:has(.charts-box) .item .name {
    font-size: 12px !important;
    color: var(--ag-text-muted) !important;
    line-height: 1.5 !important;
  }
  uni-view.body:has(.charts-box) .item .data {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
    line-height: 1.25 !important;
    margin: var(--ag-s1) 0 0 !important;
  }
  uni-view.body:has(.charts-box) .item .data .unit {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--ag-text-muted) !important;
    margin-left: 2px;
  }
  /* ⚠ 修复厂商 bug：.tips 原字号只有 4px，「单价:2」几乎不可见 */
  uni-view.body:has(.charts-box) .item .tips {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--ag-text-caption) !important;
    min-height: 18px;
  }

  /* 5.4 顶部标签切换条不套白卡片 */
  uni-view.body:has(.charts-box) .heart_rate_range:has(._tab-box) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   6. 「我的」页 pages/user/user
      结构：.box > [ .content(资料+余额) , .cell-box(设置列表) ]
      原为单列 944px：设置行标签在左、值在极右，中间空 830px
   ========================================================================== */
@media (min-width: 992px) {

  /* 6.1 两栏：左侧资料卡，右侧设置列表 —— 吃掉两侧空白 */
  uni-view.box:has(.content-user) {
    display: grid !important;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    gap: var(--ag-s5) !important;
    align-items: start !important;
    padding: var(--ag-s5) 0 120px !important;
  }
  uni-view.box:has(.content-user) > .content  { grid-column: 1; }
  uni-view.box:has(.content-user) > .cell-box { grid-column: 2; }
  uni-view.box:has(.content-user) > .loading_page,
  uni-view.box:has(.content-user) > .bottom   { grid-column: 1 / -1; }

  /* 6.2 资料卡：原来 margin-top:37px + 上下内边距 54/30，比例失衡 */
  uni-view.box:has(.content-user) > .content {
    margin: 0 !important;
    padding: var(--ag-s5) var(--ag-s4) !important;
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-lg) !important;
    box-shadow: var(--ag-shadow-sm) !important;
    text-align: center;
  }
  uni-view.box:has(.content-user) .content-user {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto var(--ag-s3) !important;
    box-shadow: 0 0 0 3px var(--ag-bg), 0 0 0 4px var(--ag-border);
  }
  uni-view.box:has(.content-user) .top-name {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
    line-height: 1.5 !important;
    text-align: center;
  }

  /* 6.3 余额 / 子代 / 待定：从散落的裸文字 → 等宽统计块 */
  uni-view.box:has(.content-user) .top-info {
    display: flex !important;
    gap: var(--ag-s2) !important;
    margin: var(--ag-s4) 0 0 !important;
  }
  uni-view.box:has(.content-user) .top-info .top-info-left {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 10px var(--ag-s2) !important;
    background: var(--ag-bg-subtle) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
  }
  uni-view.box:has(.content-user) .top-info .top-info-left .title {
    font-size: 12px !important;
    color: var(--ag-text-muted) !important;
    line-height: 1.5 !important;
  }
  uni-view.box:has(.content-user) .top-info .top-info-left .text {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
    line-height: 1.3 !important;
    margin: var(--ag-s1) 0 0 !important;
  }

  /* 6.4 ⚠ 修复厂商布局 bug：.bottom-view 无宽度约束，
         在 space-between 下塌缩成 11px / 26px 的小色块 */
  uni-view.box:has(.content-user) .content-bottom {
    display: flex !important;
    gap: var(--ag-s2) !important;
    margin: var(--ag-s4) 0 0 !important;
    padding: 0 !important;
  }
  uni-view.box:has(.content-user) .content-bottom .bottom-view {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center;
  }
  uni-view.box:has(.content-user) .content-bottom .bottom-view .title {
    font-size: 12px !important;
    color: var(--ag-text-muted) !important;
    line-height: 1.5 !important;
  }
  uni-view.box:has(.content-user) .content-bottom .bottom-view .title uni-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
  }
  uni-view.box:has(.content-user) .content-bottom .bottom-view .name {
    font-size: 12px !important;
    color: var(--ag-text-caption) !important;
    margin: var(--ag-s1) 0 0 !important;
  }

  /* 6.5 设置列表：行高加大、hover 反馈 */
  uni-view.box:has(.content-user) > .cell-box {
    margin: 0 !important;
    padding: var(--ag-s2) !important;
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-lg) !important;
    box-shadow: var(--ag-shadow-sm) !important;
  }
  uni-view.box:has(.content-user) .u-cell {
    padding: 14px var(--ag-s4) !important;
    border-radius: var(--ag-radius-md);
    transition: background .15s ease;
  }
  uni-view.box:has(.content-user) .u-cell:hover { background: var(--ag-bg-subtle); }
  uni-view.box:has(.content-user) .u-cell .u-cell_title {
    font-size: 14px !important;
    color: var(--ag-text) !important;
  }
  uni-view.box:has(.content-user) .u-cell .u-cell__value {
    font-size: 13px !important;
    color: var(--ag-text-muted) !important;
  }
}

/* ==========================================================================
   7. 卡密管理 pages/member_app/card_list   ★ 核心重做
      ---------------------------------------------------------------------
      改前：一张卡 = 6 行独立的「标签 ───── 值」
            标签在最左、值在最右，中间隔 1000px+ 空白
            单卡 156px 高，23 张要滚 3600px，且卡号重复出现两次
      改后：一张卡 = 一行紧凑表格
            卡号（等宽字体）/ 类型 / 面值 / 状态徽章 / 生成时间 / 使用时间
      ---------------------------------------------------------------------
      ⚠ 必须用 html[data-ag-route="card_list"] 收窄作用域：
        「我的」页也有 .u-cell-box（包着 5 条设置项），
        若不收窄，6 列栅格会被套到设置列表上，导致 992px 横向溢出。
        该属性由 desktop.js 的 tagRoute() 按当前路由写入。
   ========================================================================== */
@media (min-width: 992px) {

  /* 7.1 列表区外层留白 */
  html[data-ag-route="card_list"] uni-page-body { padding: var(--ag-s4) 0 120px !important; }

  /* 7.2 单张卡 = 一个独立卡片块
         （原来所有卡连成一片没有分隔的白色长条） */
  html[data-ag-route="card_list"] uni-view.u-cell-box {
    display: block !important;
    margin: 0 0 var(--ag-s2) !important;
    padding: 0 !important;
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
    box-shadow: none !important;
    transition: border-color .15s ease;
  }
  html[data-ag-route="card_list"] uni-view.u-cell-box:hover {
    border-color: var(--ag-border-hover) !important;
  }

  /* 7.3 六个字段 → 一行栅格 */
  html[data-ag-route="card_list"] uni-view.u-cell-box > .u-cell-item-box {
    display: grid !important;
    grid-template-columns:
      minmax(230px, 1.7fr)
      minmax(86px,  .6fr)
      minmax(62px,  .4fr)
      minmax(72px,  .5fr)
      minmax(138px, .9fr)
      minmax(138px, .9fr);
    align-items: center !important;
    gap: 0 var(--ag-s4);
    padding: var(--ag-s3) var(--ag-s4) !important;
    background: transparent !important;
  }

  /* 7.4 每个字段：去掉原有标签，值左对齐不再飘到最右 */
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell::after { display: none !important; }
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell .u-cell_title { display: none !important; }
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell .u-cell__value {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    font-size: 13px !important;
    color: var(--ag-text) !important;
    line-height: 1.5 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 微型标签：内容由 desktop.js 写入 data-ag-label；无 JS 时不显示，不影响可读性 */
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell .u-cell__value::before {
    content: attr(data-ag-label);
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--ag-text-caption);
    line-height: 1.4;
    margin-bottom: 1px;
  }

  /* 7.5 卡号列：等宽字体 + 加粗 + 可整段选中 */
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell:nth-child(1) .u-cell__value {
    font-family: var(--ag-font-mono) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
    letter-spacing: .01em;
    cursor: text;
    user-select: all;
  }

  /* 7.6 状态列 → 徽章
         默认灰（已使用），加 .ag-unused 变绿（未使用） */
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell:nth-child(4) .u-cell__value {
    display: inline-block !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    background: #f3f4f6 !important;
    color: var(--ag-text-muted) !important;
  }
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell:nth-child(4).ag-unused .u-cell__value {
    background: var(--ag-success-soft) !important;
    color: var(--ag-success) !important;
  }

  /* 7.7 时间列：次要色 */
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell:nth-child(5) .u-cell__value,
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell:nth-child(6) .u-cell__value {
    font-size: 12px !important;
    color: var(--ag-text-muted) !important;
  }
  /* 未使用的卡：使用时间显示为占位灰 */
  html[data-ag-route="card_list"] uni-view.u-cell-box .u-cell:nth-child(6).ag-empty .u-cell__value {
    color: var(--ag-text-caption) !important;
  }

  /* 7.8 搜索栏收窄，不再横跨整个屏幕 */
  .u-search { max-width: 420px; }
  .u-content {
    background: var(--ag-bg-subtle) !important;
    border: 1px solid var(--ag-border) !important;
  }

  /* 7.9 分页条靠右紧凑 */
  .zb-pagination { justify-content: flex-end !important; gap: var(--ag-s2); }
  .zb-pagination .item-total { color: var(--ag-text-muted) !important; }
}

/* ==========================================================================
   8. 底部悬浮导航（首页 / 我的）
      原为 left:72px right:72px → 宽 1296px，比 944px 内容区还宽
   ========================================================================== */
@media (min-width: 992px) {
  uni-view.bottom {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: auto !important;
    min-width: 220px !important;
    max-width: 360px !important;
    padding: 0 var(--ag-s2) !important;
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    box-shadow: var(--ag-shadow-lg) !important;
  }
}

/* ==========================================================================
   8b. 首页「应用数据」→ 发卡记录入口提示
       厂商在这块绑了 @click 跳批次管理，却没有任何可点击的视觉提示。
       提示元素由 desktop.js 注入到 .top 内部（事件冒泡回 .top 完成跳转）。
   ========================================================================== */
@media (min-width: 992px) {

  /* 整块可点击的视觉反馈 */
  uni-view.body:has(.charts-box) .heart_rate_range.ag-clickable {
    transition: border-color .15s ease;
  }
  uni-view.body:has(.charts-box) .heart_rate_range.ag-clickable:hover {
    border-color: var(--ag-primary) !important;
  }
  uni-view.body:has(.charts-box) .heart_rate_range.ag-clickable:hover .item {
    border-color: var(--ag-border) !important;
  }

  /* 提示条：作为栅格的整行元素 */
  uni-view.body:has(.charts-box) .ag-batch-hint {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ag-s1);
    margin-top: var(--ag-s1);
    padding: 7px var(--ag-s3);
    font-size: 12px;
    font-weight: 500;
    color: var(--ag-primary);
    background: var(--ag-primary-soft);
    border: 1px dashed rgb(37 99 235 / .35);
    border-radius: var(--ag-radius-md);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  uni-view.body:has(.charts-box) .ag-batch-hint:hover {
    background: #dbeafe;
    border-color: var(--ag-primary);
  }
  uni-view.body:has(.charts-box) .ag-batch-hint .ag-arrow {
    font-size: 14px;
    line-height: 1;
    transition: transform .15s ease;
  }
  uni-view.body:has(.charts-box) .ag-batch-hint:hover .ag-arrow {
    transform: translateX(3px);
  }
}

/* ==========================================================================
   9. 发卡记录 / 批次管理 pages/member_app/batch_list
      ---------------------------------------------------------------------
      原来是和卡密页一样的毛病：标签在最左、值在最右，中间隔 1000px。
      汇总区 13 个字段 + 每批次 5 个字段，全是 1160px 宽的单行。
      改后：汇总区 = 统计卡片栅格；每个批次 = 一张卡片，
            字段按列排布（标签在上、值在下）；导出按钮 hover 时露出
            （厂商把导出做成了手机左滑手势，电脑上根本按不到）。
   ========================================================================== */
@media (min-width: 992px) {

  html[data-ag-route="batch_list"] uni-page-body { padding: var(--ag-s4) 0 120px !important; }

  /* 9.1 汇总区：13 个字段（含第 13 个才视为汇总块）→ 统计卡片栅格 */
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) {
    background: var(--ag-bg) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
    margin: 0 0 var(--ag-s4) !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) .u-cell-item-box {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: var(--ag-s2);
    padding: var(--ag-s4) !important;
    background: transparent !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) .u-cell {
    display: block !important;
    height: auto !important;      /* 厂商写死 height:25px，会把标签+数值压扁 */
    min-height: 0 !important;
    padding: 10px var(--ag-s3) !important;
    background: var(--ag-bg-subtle) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) .u-cell::after { display: none !important; }
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) .u-cell .u-cell_title {
    display: block !important;
    font-size: 12px !important;
    color: var(--ag-text-muted) !important;
    line-height: 1.5 !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) .u-cell .u-cell__value {
    display: block !important;
    width: auto !important;
    text-align: left !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
    line-height: 1.3 !important;
  }
  /* 未使用（第 12 个）绿色，已使用（第 13 个）次要色 */
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) .u-cell:nth-child(12) .u-cell__value {
    color: var(--ag-success) !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-cell-box:has(.u-cell:nth-child(13)) .u-cell:nth-child(13) .u-cell__value {
    color: var(--ag-text-muted) !important;
  }

  /* 9.2 每个批次 = 一张卡片 */
  html[data-ag-route="batch_list"] .u-swipe-action {
    overflow: hidden !important;
    margin: 0 0 var(--ag-s2) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-md) !important;
    background: var(--ag-bg) !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box,
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box > .u-cell-item-box {
    background: var(--ag-bg) !important;
  }

  /* 9.3 批次内 5 个字段 → 一行栅格（标签在上、值在下） */
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box > .u-cell-item-box {
    display: grid !important;
    grid-template-columns:
      minmax(190px, 1.5fr)   /* 批次号  */
      minmax(70px,  .5fr)    /* 原总数  */
      minmax(80px,  .6fr)    /* 未使用  */
      minmax(80px,  .6fr)    /* 已使用  */
      minmax(160px, 1.4fr);  /* 批次备注 */
    align-items: center !important;
    gap: 0 var(--ag-s4);
    padding: var(--ag-s3) var(--ag-s4) !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell {
    display: block !important;
    width: auto !important;
    height: auto !important;      /* 同上：解除厂商写死的行高 */
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell::after { display: none !important; }
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell .u-cell_title {
    display: block !important;
    font-size: 11px !important;
    color: var(--ag-text-caption) !important;
    line-height: 1.4 !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell .u-cell__value {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    font-size: 13px !important;
    color: var(--ag-text) !important;
    line-height: 1.5 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 批次号用等宽字体 */
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell:nth-child(1) .u-cell__value {
    font-family: var(--ag-font-mono) !important;
    font-weight: 600 !important;
  }
  /* 未使用绿、已使用灰 */
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell:nth-child(3) .u-cell__value {
    color: var(--ag-success) !important;
    font-weight: 600 !important;
  }
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell:nth-child(4) .u-cell__value {
    color: var(--ag-text-muted) !important;
  }
  /* 批次备注可能很长，允许换行 */
  html[data-ag-route="batch_list"] uni-view.u-swipe-content > uni-view.u-cell-box .u-cell:nth-child(5) .u-cell__value {
    white-space: normal;
    color: var(--ag-text-muted) !important;
  }

  /* 9.4 批次行不滑出。
         厂商的导出按钮是 uView 左滑手势（uni-movable-area），原本我让鼠标
         移入整行就滑出 —— 会有个"整行往左窜"的动效，太跳。
         卡密已经由「查看卡密」弹窗解决（第 10 节），导出按需用导Excel即可，
         所以这里直接取消 hover 滑出，保持行静止。

         做法：把滑动窗口压回原位并锁死（含 !important 覆盖行内 transform），
         同时让临时滑出的按钮不可见也不可点，避免残留的不可见按钮被误触。 */
  html[data-ag-route="batch_list"] .u-swipe-action .u-swipe-view {
    transform: translateX(0) !important;
    transition: none !important;
  }
  html[data-ag-route="batch_list"] .u-swipe-action .u-swipe-del {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* 隐藏「导出Txt」：选择器必须比上面那条更具体，
     否则同为 !important 时按具体度比较会被压回去 */
  html[data-ag-route="batch_list"] .u-swipe-action .u-swipe-del.ag-hide {
    display: none !important;
  }
  /* 行尾不再提示「移入可导出」—— 改为批内「查看卡密」弹窗（见第 10 节） */

  /* 9.5 分页条 */
  html[data-ag-route="batch_list"] .zb-pagination {
    justify-content: flex-end !important;
    gap: var(--ag-s2);
  }
}

/* ==========================================================================
   10. 「查看卡密」按钮 + 批次卡密弹窗（均由 desktop.js 注入）
       厂商把导出做成了手机左滑手势，电脑上按不到；改成弹窗直接看卡密。
   ========================================================================== */

/* 10.1 批次卡右下角的「查看卡密」按钮 */
.ag-btn {
  font-family: var(--ag-font);
  font-size: 13px;
  line-height: 1;
  padding: 7px 14px;
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-sm);
  background: var(--ag-bg);
  color: var(--ag-text);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ag-btn:hover { background: var(--ag-bg-subtle); border-color: var(--ag-border-hover); }
.ag-btn:active { background: #f3f4f6; }

.u-swipe-content > .u-cell-box { position: relative; }

/* 批次行右侧常驻操作区（查看卡密 / 导出Txt / 导出Excel）
   不用滑动层 —— 整行静止，按钮一直都在。
   定位父级是 .u-swipe-action（批次卡本体），不能用 .u-cell-box ——
   它不是定位祖先，挂上去按钮会跑到卡片外。 */
.ag-row-actions {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--ag-s2);
}
/* 给右侧按钮让位：批次备注列收窄，别顶到按钮底下 */
.u-swipe-content > .u-cell-box > .u-cell-item-box {
  padding-right: 252px !important;
}

.ag-row-actions .ag-btn { padding: 7px 12px; white-space: nowrap; }

/* 主操作：查看卡密 */
.ag-primary-btn {
  border-color: transparent;
  background: var(--ag-primary-soft);
  color: var(--ag-primary);
  font-weight: 500;
}
.ag-primary-btn:hover {
  background: var(--ag-primary);
  border-color: var(--ag-primary);
  color: #fff;
}

/* 次要操作：两个导出 */
.ag-export-txt,
.ag-export-excel {
  border-color: var(--ag-border);
  background: var(--ag-bg);
  color: var(--ag-text-muted);
}
.ag-export-txt:hover,
.ag-export-excel:hover {
  border-color: var(--ag-border-hover);
  background: var(--ag-bg-subtle);
  color: var(--ag-text);
}
.ag-row-actions .ag-btn:disabled {
  opacity: .55;
  cursor: default;
}

/* 隐藏厂商的「导出Txt」左滑按钮（行内 display:none 压不住 !important，故用类） */
.ag-hide { display: none !important; }

/* 10.2 弹窗骨架 */
.ag-modal { display: none; }
.ag-modal.ag-open { display: block; }
body.ag-modal-lock { overflow: hidden; }

.ag-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgb(17 24 39 / .45);
}

.ag-modal-panel {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(940px, calc(100vw - 48px));
  max-height: min(80vh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--ag-bg);
  border-radius: var(--ag-radius-lg);
  box-shadow: 0 24px 64px rgb(17 24 39 / .28);
  overflow: hidden;
  font-family: var(--ag-font);
  color: var(--ag-text);
  font-size: 13px;
}

.ag-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ag-s4);
  padding: var(--ag-s5) var(--ag-s5) var(--ag-s4);
  border-bottom: 1px solid var(--ag-border);
}
.ag-modal-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.ag-modal-sub {
  margin-top: 4px;
  font-family: var(--ag-font-mono);
  font-size: 12px;
  color: var(--ag-text-muted);
  word-break: break-all;
}
.ag-modal-close {
  flex: none;
  width: 32px;
  height: 32px;
  line-height: 1;
  font-size: 20px;
  color: var(--ag-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--ag-radius-sm);
  cursor: pointer;
}
.ag-modal-close:hover { background: var(--ag-bg-subtle); color: var(--ag-text); }

.ag-modal-body { flex: 1 1 auto; overflow-y: auto; padding: var(--ag-s2) var(--ag-s5); }
.ag-modal-loading,
.ag-modal-empty {
  padding: 56px 0;
  text-align: center;
  color: var(--ag-text-muted);
}

/* 10.3 卡密表格 */
.ag-tbl-head,
.ag-tbl-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(84px, .8fr) minmax(72px, .7fr)
                         minmax(92px, .8fr) minmax(92px, .8fr) 72px;
  align-items: center;
  gap: 0 var(--ag-s3);
}
.ag-tbl-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px var(--ag-s2);
  background: var(--ag-bg);
  border-bottom: 1px solid var(--ag-border);
  font-size: 11px;
  font-weight: 500;
  color: var(--ag-text-caption);
  letter-spacing: .02em;
}
.ag-tbl-row {
  padding: 11px var(--ag-s2);
  border-bottom: 1px solid var(--ag-border);
}
.ag-tbl-row:last-child { border-bottom: 0; }
.ag-tbl-row:hover { background: var(--ag-bg-subtle); }

.ag-card-no {
  font-family: var(--ag-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ag-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.ag-type { color: var(--ag-text); font-size: 12.5px; }
.ag-time { font-size: 12px; color: var(--ag-text-muted); font-variant-numeric: tabular-nums; }

.ag-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-style: normal;
  white-space: nowrap;
}
.ag-pill.ag-unused { background: var(--ag-success-soft); color: var(--ag-success); }
.ag-pill.ag-used   { background: #f3f4f6; color: var(--ag-text-muted); }

.ag-copy { padding: 5px 10px; font-size: 12px; }

/* 10.4 弹窗底栏 */
.ag-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ag-s4);
  padding: var(--ag-s3) var(--ag-s5);
  border-top: 1px solid var(--ag-border);
  background: var(--ag-bg-subtle);
}
.ag-modal-count { font-size: 12px; color: var(--ag-text-muted); }
.ag-modal-pager { display: flex; align-items: center; gap: var(--ag-s2); }
.ag-pageinfo {
  min-width: 56px;
  text-align: center;
  font-size: 12px;
  color: var(--ag-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 10.5 窄屏收一收 */
@media (max-width: 767px) {
  .ag-modal-panel { width: calc(100vw - 24px); max-height: 88vh; }
  .ag-modal-head { padding: var(--ag-s4); }
  .ag-modal-body { padding: var(--ag-s2) var(--ag-s4); }
  .ag-modal-foot { padding: var(--ag-s3) var(--ag-s4); }
  .ag-tbl-head { display: none; }
  .ag-tbl-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px var(--ag-s2);
    padding: 12px var(--ag-s2);
  }
  .ag-card-no { grid-column: 1 / -1; font-size: 13px; }
  .ag-tbl-row > span:nth-child(4),
  .ag-tbl-row > span:nth-child(5) { grid-column: 1 / -1; }
}

/* ==========================================================================
   11. 代理首页 视觉重做（配色 / 层级 / 表单）
       ---------------------------------------------------------------------
       之前遗留的三个问题：
       ① 应用分类选中态还是厂商的红色 #e54d42，和蓝色主题打架
       ② 区块之间没有节奏，6 个区块全是 14px 裸标题 + 无间距
       ③ 「快捷制卡」的提交按钮是 uView 默认样式 —— 白底 + 灰字，
          压在白色卡片上几乎看不见，等于没有按钮
       全部用 :has(.charts-box) 锁在首页，不影响其它页面。
   ========================================================================== */
@media (min-width: 992px) {

  /* 11.1 区块节奏：每个区块之间留白，标题与内容贴紧 */
  uni-view.body:has(.charts-box) > uni-view {
    margin-bottom: var(--ag-s5);
  }
  uni-view.body:has(.charts-box) > uni-view:last-child {
    margin-bottom: 0;
  }
  /* 真实层级是 body > uni-view > uni-view(区块)，上面那条打不到区块 */
  uni-view.body:has(.charts-box) > uni-view > uni-view {
    margin-bottom: var(--ag-s5);
  }
  uni-view.body:has(.charts-box) > uni-view > uni-view:last-child {
    margin-bottom: 0;
  }

  /* 11.2 应用分类 / 应用列表 标签条
         厂商：透明无边框文字，选中色 #e54d42（红）
         改后：浅底胶囊，选中 = 实心蓝胶囊 */
  uni-view.body:has(.charts-box) ._tab-item-box {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--ag-s2);
    padding: 0 !important;
    background: transparent !important;
  }
  uni-view.body:has(.charts-box) ._item {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 var(--ag-s4) !important;
    background: var(--ag-bg-subtle) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: 999px !important;
    color: var(--ag-text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  uni-view.body:has(.charts-box) ._item:hover {
    border-color: var(--ag-border-hover) !important;
    color: var(--ag-text) !important;
  }
  /* ★ 关键：把红色选中态换成主题蓝 */
  uni-view.body:has(.charts-box) ._item._active {
    background: var(--ag-primary) !important;
    border-color: var(--ag-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgb(37 99 235 / .28);
  }
  /* 厂商可能用下划线做选中标记，这里去掉，胶囊已足够 */
  uni-view.body:has(.charts-box) ._item._active::after,
  uni-view.body:has(.charts-box) ._item::after {
    display: none !important;
  }
  uni-view.body:has(.charts-box) ._scroll-content { background: transparent !important; }

  /* 11.3 快捷制卡 表单
         厂商：label 45px、输入框全透明无边框、行高 55px 且行线看不见 */
  uni-view.body:has(.charts-box) .u-form-item {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: 0 !important;
    margin-bottom: var(--ag-s3) !important;
  }
  uni-view.body:has(.charts-box) .u-form-item:last-child { margin-bottom: 0 !important; }
  uni-view.body:has(.charts-box) .u-form-item::after,
  uni-view.body:has(.charts-box) .u-form-item.u-border-bottom::after {
    display: none !important;
  }
  uni-view.body:has(.charts-box) .u-form-item__body {
    padding: 0 !important;
    min-height: 0 !important;
    align-items: center;
  }
  uni-view.body:has(.charts-box) .u-form-item--left {
    flex: 0 0 68px !important;
    width: 68px !important;
    max-width: 68px !important;
    font-size: 13px !important;
    color: var(--ag-text-muted) !important;
    text-align: left !important;
  }
  uni-view.body:has(.charts-box) .u-form-item--right {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 输入框统一成浅底描边小方框 */
  uni-view.body:has(.charts-box) .u-form-item--right uni-input,
  uni-view.body:has(.charts-box) .u-form-item--right .u-input {
    height: 36px !important;
    padding: 0 var(--ag-s3) !important;
    background: var(--ag-bg-subtle) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-sm) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  uni-view.body:has(.charts-box) .u-form-item--right uni-input:focus-within,
  uni-view.body:has(.charts-box) .u-form-item--right .u-input:focus-within {
    background: var(--ag-bg) !important;
    border-color: var(--ag-primary) !important;
    box-shadow: 0 0 0 3px var(--ag-primary-ring) !important;
  }
  uni-view.body:has(.charts-box) .u-form-item--right input,
  uni-view.body:has(.charts-box) .u-form-item--right .uni-input-input {
    height: 34px !important;
    font-size: 13px !important;
    color: var(--ag-text) !important;
    background: transparent !important;
  }
  /* 时长 / 类型 这种左右并排的，中间留点缝 */
  uni-view.body:has(.charts-box) .u-form-item--right > uni-view {
    gap: var(--ag-s2);
  }

  /* ★ 提交按钮：白底灰字 → 主题蓝实心 */
  uni-view.body:has(.charts-box) uni-button.u-btn {
    display: block;
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    margin: var(--ag-s3) 0 0 !important;
    padding: 0 !important;
    background: var(--ag-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--ag-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    box-shadow: 0 1px 2px rgb(17 24 39 / .08);
    cursor: pointer;
    transition: background .15s ease;
  }
  uni-view.body:has(.charts-box) uni-button.u-btn:hover {
    background: var(--ag-primary-hover) !important;
  }
  uni-view.body:has(.charts-box) uni-button.u-btn:active {
    background: #1e40af !important;
  }

  /* 11.4 应用公告 / 应用列表 空状态统一 */
  uni-view.body:has(.charts-box) .box_view {
    padding: var(--ag-s4) !important;
  }

  /* 11.5 底部导航：选中项用主题蓝 */
  uni-view.body .nav-tab-active,
  uni-view.bottom .nav-tab-active {
    color: var(--ag-primary) !important;
  }

  /* 11.6 应用数据 统计格：数字大、标签小、单价弱化
         没有设置价格的卡种由 desktop.js 打上 .ag-dim 隐藏（见 enhanceHomeStats） */
  uni-view.body:has(.charts-box) .heart_rate_range .item.ag-dim {
    display: none !important;
  }
  uni-view.body:has(.charts-box) .heart_rate_range .item {
    transition: border-color .15s ease, background .15s ease;
  }
  uni-view.body:has(.charts-box) .heart_rate_range .item:hover {
    background: var(--ag-bg) !important;
    border-color: var(--ag-border-hover) !important;
  }
  uni-view.body:has(.charts-box) .heart_rate_range .item .name {
    font-size: 12px !important;
    color: var(--ag-text-muted) !important;
    line-height: 1.5 !important;
  }
  uni-view.body:has(.charts-box) .heart_rate_range .item .data {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--ag-text) !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.25 !important;
  }
  uni-view.body:has(.charts-box) .heart_rate_range .item .unit {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--ag-text-muted) !important;
    margin-left: 2px;
  }
  uni-view.body:has(.charts-box) .heart_rate_range .item .tips {
    margin-top: 4px;
    font-size: 12px !important;
    color: var(--ag-text-caption) !important;
  }
}

/* ==========================================================================
   12. 空状态容器溢出修复
       ---------------------------------------------------------------------
       厂商的空状态「没有数据哦~」用了一个 width:1440px 的定宽 flex 容器，
       父级只有 1200px —— 于是整页被撑出 240px 横向滚动条。
       这里让它跟随父级宽度（100%），并把空状态做得体面一点。
       注意：选择器带 uni-page-body 限定，不会误伤有数据时的布局。
   ========================================================================== */
uni-page-body uni-view.u-flex.u-flex-col.u-col-center {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 空状态文案弱化，别用大黑字 */
uni-page-body uni-view.u-flex.u-flex-col.u-col-center > uni-view.u-tips-color,
uni-page-body uni-view.u-flex.u-flex-col.u-col-center .u-tips-color {
  color: var(--ag-text-muted) !important;
}

/* ==========================================================================
   12b. 导航栏右上角「← 返回」按钮（由 desktop.js enhanceNavbar 注入）
        ---------------------------------------------------------------------
        厂商的返回在左上角，只是一个 22x22 没底没字的小图标，不明显；
        右上角 .u-slot-right 完全是空的。这里在右上角补一个明显的返回按钮。
   ========================================================================== */
@media (min-width: 992px) {

  /* 让右侧插槽撑开并靠右 */
  .u-navbar .u-slot-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--ag-s2);
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    padding-right: var(--ag-s4) !important;
  }

  .ag-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    font-family: var(--ag-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ag-text);
    background: var(--ag-bg-subtle);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-sm);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .ag-nav-btn:hover {
    background: var(--ag-primary-soft);
    border-color: var(--ag-primary);
    color: var(--ag-primary);
  }
  .ag-nav-btn:active {
    background: #dbeafe;
  }
  .ag-nav-btn .ag-nav-back-arrow {
    font-size: 15px;
    line-height: 1;
    transition: transform .15s ease;
  }
  .ag-nav-btn:hover .ag-nav-back-arrow {
    transform: translateX(-2px);
  }

  /* 🏠 首页按钮：主题蓝实心，比「返回」更显眼 ——
     二级页底部没有 tabbar，这是唯一能一步回主界面的入口 */
  .ag-nav-home {
    background: var(--ag-primary) !important;
    border-color: var(--ag-primary) !important;
    color: #fff !important;
  }
  .ag-nav-home:hover {
    background: var(--ag-primary-hover) !important;
    border-color: var(--ag-primary-hover) !important;
    color: #fff !important;
  }
  .ag-nav-home:active {
    background: #1e40af !important;
  }
  .ag-nav-btn .ag-nav-home-icon {
    font-size: 15px;
    line-height: 1;
  }
}

/* ==========================================================================
   13. 兜底：任何情况下都不该出现横向滚动条
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
uni-page-body { max-width: 100%; }