/* ============================================================
     登录门禁：未登录时隐藏后台 UI，只有登录壳显示。
     body 上有 .authed class 才放行整个 layout 的 CSS / DOM。
  ============================================================ */
  body:not(.authed) .layout,
  body:not(.authed) #topbar,
  body:not(.authed) .sidebar { display: none !important; }

  /* ============================================================
     STAI 标准风格 · Deep Glass 深墨靛蓝（方案 A）
     ============================================================ */
  :root {
    color-scheme: light;
    /* ---- 层级底 ---- */
    --bg: #F1F5FB;
    --bg2: #E8EEF8;
    --side: #141D33;
    --side-grad: linear-gradient(180deg, #141D33 0%, #0C1322 100%);
    --panel: #FFFFFF;
    --line: #DEE7F3;
    --line-soft: #EDF3FA;
    /* ---- 文字四档 ---- */
    --text: #0F172A;
    --text2: #334155;
    --muted: #56657A;
    --muted2: #66748A;
    /* ---- 主色：靛蓝 ---- */
    --accent: #4F46E5;
    --accent-dark: #E0E7FF;   /* 角色 = 主色淡底 */
    --accent-bright: #4338CA; /* 角色 = 强调文字/链接 */
    --accent-deep: #3730A3;
    --amber: #B45309;
    --red: #DC2626;
    --cyan: #22D3EE;
    --status-success: #15803D;
    --scroll-thumb: #C3D4E8;
    /* ---- 圆角：小件 8 / 卡片 10 / 弹窗 14 ---- */
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 14px;
    /* ---- 阴影 ---- */
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-card: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 26px rgba(15, 23, 42, .12);
    /* ---- 侧栏作用域值 ---- */
    --side-border: #0B1120;
    --side-text: #E8EEF8;
    --side-text2: #9DB0C9;
    --side-muted: #8A9DB8;
    --side-panel: rgba(255, 255, 255, .062);
    --side-line: rgba(255, 255, 255, .09);
    --side-sel-bg: rgba(99, 102, 241, .24);
    --side-sel-fg: #C7D2FE;
    --side-success: #34D399;
    --side-logo-glow: rgba(79, 70, 229, .45);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* ---- 页面氛围层：靛蓝网格 34px + 右上光晕 + 浅底渐变 ---- */
  html, body {
    height: 100%;
    background-color: #F1F5FB;
    background-image:
      linear-gradient(rgba(79, 70, 229, .026) 1px, transparent 1px),
      linear-gradient(90deg, rgba(79, 70, 229, .026) 1px, transparent 1px),
      radial-gradient(ellipse at 72% -14%, rgba(79, 70, 229, .13) 0, transparent 55%),
      linear-gradient(180deg, #F7F9FD, #F1F5FB);
    background-size: 34px 34px, 34px 34px, auto, auto;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: var(--text);
    font-size: 14px;
  }
  /* ---- 全局滚动条 ---- */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: #B0C0D8; }

  a, .link { color: var(--accent-bright); cursor: pointer; text-decoration: none; }
  .link:hover { color: var(--accent-deep); }
  .muted { color: var(--muted2); }
  .code { font-family: 'Consolas', 'Courier New', monospace; letter-spacing: .5px; }

  /* ===== 布局骨架 ===== */
  .layout { display: flex; min-height: 100vh; }

  /* ============================================================
     左侧栏 —— 深墨蓝作用域（.tomato-sidebar 标准件）
     ============================================================ */
  .sidebar {
    width: 240px; flex-shrink: 0;
    background: var(--side-grad);
    border-right: 1px solid var(--side-border);
    box-shadow: 4px 0 24px rgba(15, 23, 42, .06);
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  /* ---- 品牌区 ---- */
  .brand {
    padding: 20px 20px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--side-line);
  }
  .brand .logo-img {
    width: 60px; height: 60px; border-radius: 14px; object-fit: cover;
    box-shadow: 0 8px 22px var(--side-logo-glow);
  }
  .brand .brand-text { text-align: center; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
  .brand .name { font-size: 21px; font-weight: 700; color: var(--side-text); line-height: 1.2; letter-spacing: .5px; }
  .brand .slogan { font-size: 11px; color: var(--side-muted); letter-spacing: 1px; }

  .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
  .dot.success { background: var(--side-success); }
  .dot.default { background: var(--side-muted); }

  /* ---- 菜单 ---- */
  .menu { flex: 1; overflow-y: auto; padding: 12px 8px; }
  .menu-item {
    display: flex; align-items: center; gap: 10px;
    margin: 3px 10px; padding: 0 12px; height: 38px;
    border-radius: var(--radius-sm); cursor: pointer; user-select: none;
    color: var(--side-text2); font-size: 15px; font-weight: 600;
    transition: background .18s, color .18s;
  }
  .menu-item:hover { background: rgba(255, 255, 255, .07); color: var(--side-text); }
  .menu-item.active {
    background: var(--side-sel-bg); color: var(--side-sel-fg);
    box-shadow: inset 3px 0 0 0 var(--accent);
  }
  /* 第二十六批：彩色图标（渐变填充），非选中稍压暗，hover/选中点亮 */
  .menu-item svg {
    width: 19px; height: 19px; flex: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .34));
    opacity: .95;
    transition: opacity .18s, filter .18s, transform .18s;
  }
  .menu-item:hover svg, .menu-item.active svg { opacity: 1; }
  .menu-item:hover svg { transform: translateY(-1px) scale(1.05); }
  .menu-item.active svg { filter: drop-shadow(0 0 6px rgba(160, 190, 255, .6)); }

  /* ---- 侧栏底部：管理员身份条 ---- */
  .sidebar .foot {
    margin: 0 14px 14px; padding: 10px 12px;
    background: var(--side-panel); border: 1px solid var(--side-line);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--side-text2);
  }
  .avatar {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    background: linear-gradient(135deg, #6366F1, #4338CA); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .35);
  }
  .foot .who b { color: var(--side-text); font-weight: 600; display: block; line-height: 1.3; }
  .foot .who span { color: var(--side-muted); font-size: 11px; }
  /* 侧栏底部：反馈通道按钮（原管理员身份条改造） */
  .sidebar .foot.fb-btn { cursor: pointer; transition: border-color .15s, background .15s; }
  .sidebar .foot.fb-btn:hover { border-color: rgba(129, 140, 248, .55); background: rgba(99, 102, 241, .18); }
  .foot .fb-ico {
    width: 30px; height: 30px; border-radius: 8px; flex: none; color: #fff;
    background: linear-gradient(135deg, #6366F1, #4338CA);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .35);
  }
  .foot .fb-ico svg { width: 16px; height: 16px; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }

  /* ---- 反馈通道弹窗（下级代理 ↔ 管理员 聊天） ---- */
  .fb-wrap { display: flex; gap: 12px; min-height: 380px; }
  .fb-side { width: 172px; flex: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #FAFCFF; }
  .fb-side-t { font-size: 12px; color: var(--muted2); padding: 2px 6px 8px; }
  .fb-sess {
    padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text2);
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
  }
  .fb-sess:hover { background: var(--accent-dark); }
  .fb-sess.cur { background: var(--accent-dark); color: var(--accent-bright); font-weight: 600; }
  .fb-sess .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
  .fb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
  .fb-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text);
  }
  .fb-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 300px; background: #FAFCFF; }
  .fb-msg { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.6; word-break: break-all; }
  .fb-msg .tm { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }
  .fb-msg.agent { align-self: flex-start; background: #EEF2FF; color: var(--text); border-bottom-left-radius: 4px; }
  .fb-msg.admin { align-self: flex-end; background: linear-gradient(135deg, #6366F1, #4338CA); color: #fff; border-bottom-right-radius: 4px; }
  .fb-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted2); font-size: 13px; padding: 20px; text-align: center; }
  .fb-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
  .fb-input .input { flex: 1; }

  /* ===== 主区 ===== */
  .main { flex: 1; margin-left: 240px; display: flex; flex-direction: column; min-width: 0; }
  .topbar {
    height: 56px; display: flex; align-items: center; gap: 14px;
    padding: 0 24px; position: sticky; top: 0; z-index: 20;
    background: rgba(247, 249, 253, .82); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .topbar .burger { display: none; }
  .topbar .spacer { flex: 1; }
  .date-box {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 5px 12px; font-size: 12px; color: var(--accent-bright);
    font-family: 'Consolas', 'Courier New', monospace; white-space: nowrap;
    background: var(--accent-dark);
  }
  .topbar .admin { display: flex; align-items: center; gap: 8px; color: var(--text2); font-size: 14px; }
  /* ⭐ 第十一批：顶栏余额（账号左侧，电脑端/手机端都显示） */
  .topbar .wallet {
    display: none; align-items: center; gap: 5px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 4px 10px; font-size: 12px; color: var(--text2); white-space: nowrap;
    background: var(--accent-dark);
  }
  .topbar .wallet.on { display: inline-flex; }
  .topbar .wallet b {
    color: var(--accent-bright); font-size: 15px; font-weight: 700;
    font-family: 'Consolas', 'Courier New', monospace; line-height: 1.1;
  }
  .topbar .wallet .u { font-size: 11px; color: var(--text2); }
  /* 手机端顶栏标题（窄屏才显示） */
  .m-title { display: none; font-size: 15px; font-weight: 600; color: var(--text); }

  .content { padding: 20px 24px 12px; max-width: 1560px; margin: 0 auto; width: 100%; flex: 1; display: flex; flex-direction: column; }

  /* ===== 页面骨架：页头（标题 + 副标题） ===== */
  .page { display: none; }
  .page.active { display: flex; flex-direction: column; flex: 1; }
  /* 内容卡片触底：最后一张卡撑满剩余高度，页面不留白 */
  .page.active > .card:last-child { flex: 1; }
  .page-header { margin-bottom: 20px; padding: 0 2px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .page-header h1 { margin: 0; font-size: 24px; font-weight: 600; color: var(--text); }
  .page-header .desc { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

  /* ===== 通用元件 ===== */
  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px 20px;
  }
  .note {
    background: #EEF0FF; border: 1px solid #DDE2FF; color: var(--accent-bright);
    border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px;
    margin-bottom: 16px; line-height: 1.7;
  }

  .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
  /* ⭐ 第二十二批：分排工具栏（账单管理 2 排 / 积分记录 3 排） */
  /* ⭐ 第二十四批：分排只在手机端生效。桌面端必须平铺一排 ——
     这里让 .tb-row 变「透明」（display:contents），其子元素直接参与 .toolbar 的 flex 流，
     效果与第二十二批之前的平铺完全一致；分排规则改到 @media(max-width:640px) 里。 */
  .toolbar.tb-stack { flex-direction: row; align-items: center; }
  .toolbar.tb-stack .tb-row { display: contents; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid var(--line); background: #fff; color: var(--text2);
    border-radius: var(--radius-sm); padding: 7px 12px; font-size: 14px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s; text-align: center;
  }
  .btn:hover { color: var(--accent-bright); border-color: var(--accent); background: #EEF0FF; }
  .btn.primary {
    background: linear-gradient(135deg, #6366F1, #4338CA); border-color: transparent;
    color: #fff; box-shadow: 0 4px 14px rgba(79, 70, 229, .35);
  }
  .btn.primary:hover { filter: brightness(1.07); background: linear-gradient(135deg, #6366F1, #4338CA); }
  .btn.primary:active { filter: brightness(.94); }
  .btn.danger { background: #FEF2F2; border-color: #FECACA; color: var(--red); }
  .btn.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .btn.sm { padding: 4px 9px; font-size: 13px; }
  /* 表格操作列的小按钮（12px 标准操作按钮） */
  .btn.xs { padding: 2px 9px; font-size: 13px; line-height: 19px; }
  .grid td .btn + .btn { margin-left: 5px; }

  /* ===== 提示条（操作反馈） ===== */
  .toast {
    position: fixed; left: 50%; top: 22px; z-index: 200;
    transform: translateX(-50%) translateY(-12px);
    background: rgba(20, 29, 51, .96); color: var(--side-text);
    border: 1px solid rgba(129, 140, 248, .35); border-radius: var(--radius);
    padding: 9px 18px; font-size: 13px; white-space: nowrap;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 26px rgba(15, 23, 42, .12);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* 可点卡密 / 可编辑用户标识 */
  .cc { cursor: pointer; }
  .cc:hover { color: var(--accent-bright); text-decoration: underline dotted; }
  .u { cursor: text; }
  .u:hover { color: var(--text); }
  .sel-info { font-size: 13px; color: var(--muted2); margin-left: 2px; }

  .input, .select {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 7px 12px; font-size: 14px; outline: none; background: #fff; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
  }
  .input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
  .input::placeholder { color: var(--muted2); }

  /* ===== 表格：表头 #F6F8FD / 表体 12px / 行 padding 14px ===== */
  table.grid { width: 100%; border-collapse: collapse; }
  /* 表头与内容统一居中（可按需给单列加 .tl / .tr 覆盖） */
  .grid th {
    background: #F6F8FD; color: var(--text2); font-weight: 600; font-size: 14px;
    border-bottom: 1px solid var(--line); padding: 11px 12px; text-align: center; white-space: nowrap;
  }
  .grid td {
    border-bottom: 1px solid var(--line-soft); padding: 12px; text-align: center;
    font-size: 13px; line-height: 19px; color: var(--text2); white-space: nowrap;
  }
  .grid th.tl, .grid td.tl { text-align: left; }
  .grid th.tr, .grid td.tr { text-align: right; }
  /* 复选框列（窄列，居中后视觉更稳） */
  .grid th:first-child, .grid td:first-child { padding-left: 8px; padding-right: 8px; }
  .grid tbody tr:hover { background: #F6F8FD; }
  .grid td b { color: var(--text); }
  /* 表格容器：任何窗口宽度下都横向滚动，绝不允许表格撑出卡片（缩放溢出修复） */
  .table-wrap { overflow-x: auto; position: relative; }
  /* ⭐ 第十五批：操作列吸附在右侧——窗口窄、表格横向滚动时「详情」按钮始终可见可点 */
  .grid th:last-child, .grid td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: var(--panel);
    box-shadow: -8px 0 10px -8px rgba(15, 23, 42, .18);
  }
  .grid thead th:last-child { background: #F6F8FD; z-index: 3; }
  .grid tbody tr:hover td:last-child { background: #F6F8FD; }
  /* ⭐ 第二十四批：代理端卡密表行内没有勾选格（只有管理员才有），
     表头首格必须一起隐藏，否则整行表头会错位一格；代理端也没有批量删除权限（后端只注册给管理员） */
  html.role-agent #page-cards table.grid thead th.card-chk-th,
  html.role-agent #page-cards .card-batch-del { display: none; }

  /* ===== 标签：radius 6 / 无描边（表格内状态色规范） ===== */
  .tag { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; }
  .tag.ok   { background: #E0E7FF; color: #4338CA; }           /* 表格内主状态统一靛蓝族 */
  .tag.info { background: #EEF1F6; color: var(--muted); }
  .tag.warn { background: #FDF2E4; color: var(--amber); }
  .tag.ban  { background: #FEE9E9; color: var(--red); }

  /* ===== 分页器：当前页靛蓝淡底 + 强调字 ===== */
  .pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 4px 2px; color: var(--muted2); font-size: 13px; }
  .pager .pg {
    min-width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; color: var(--text2);
  }
  .pager .pg:hover { color: var(--accent-bright); border-color: var(--accent); }
  .pager .pg.cur { background: var(--accent-dark); border-color: var(--accent); color: var(--accent-bright); font-weight: 600; }

  /* ===== 统计卡（⭐ 第二十三批：管理员 6 张 / 代理 4 张，由适配层动态渲染） ===== */
  .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
  /* ⭐ 第二十三批：按卡片数量固定列数（6 张不可排成 5+1，4 张不可排成 3+1） */
  .stat-row[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat-row[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1280px) {
    /* 中等宽度：6 张改 3 列 2 行，4 张仍一排 */
    .stat-row[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    /* 手机/窄屏：管理端 3 列 2 行，代理端 4 张一排 */
    .stat-row[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-row[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .stat {
    position: relative; overflow: hidden; text-align: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-card); padding: 14px 14px 13px;
  }
  /* 顶部 3px 色条 */
  .stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
  .stat .k { color: var(--muted); font-size: 14px; white-space: nowrap; }
  .stat .v { font-size: 26px; font-weight: 700; margin-top: 5px; line-height: 1.2; white-space: nowrap; }
  /* 副行：⭐ 第二十三批 单位与口径说明 */
  .stat .s { color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.45; }
  /* 靛蓝 */
  .stat.c-indigo { background: #EEF0FF; border-color: #DDE2FF; }
  .stat.c-indigo::before { background: linear-gradient(90deg, #6366F1, #4338CA); }
  .stat.c-indigo .k { color: #4F46E5; }
  .stat.c-indigo .v { color: var(--accent); }
  /* 绿 */
  .stat.c-green { background: #ECFDF3; border-color: #BBF7D0; }
  .stat.c-green::before { background: linear-gradient(90deg, #34D399, #15803D); }
  .stat.c-green .k { color: #15803D; }
  .stat.c-green .v { color: var(--status-success); }
  /* 琥珀 */
  .stat.c-amber { background: #FEF7E8; border-color: #FBE2B0; }
  .stat.c-amber::before { background: linear-gradient(90deg, #FBBF24, #B45309); }
  .stat.c-amber .k { color: #B45309; }
  .stat.c-amber .v { color: var(--amber); }
  /* 青：开卡量 */
  .stat.c-teal { background: #E9F7F4; border-color: #BFE7DF; }
  .stat.c-teal::before { background: linear-gradient(90deg, #2DD4BF, #0F766E); }
  .stat.c-teal .k { color: #0F766E; }
  .stat.c-teal .v { color: #0F766E; }
  /* 紫：发货/成本 */
  .stat.c-purple { background: #F4EFFF; border-color: #E2D8FB; }
  .stat.c-purple::before { background: linear-gradient(90deg, #A78BFA, #6D28D9); }
  .stat.c-purple .k { color: #6D28D9; }
  .stat.c-purple .v { color: #6D28D9; }
  /* 灰：总盘 */
  .stat.c-gray { background: #F4F5F7; border-color: #E1E3E8; }
  .stat.c-gray::before { background: linear-gradient(90deg, #9CA3AF, #4B5563); }
  .stat.c-gray .k { color: #4B5563; }
  .stat.c-gray .v { color: #374151; }

  /* ===== 弹窗：radius 14 + panel 底 ===== */
  .mask { position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(15, 23, 42, .45); z-index: 100; display: none; align-items: center; justify-content: center; }
  .mask.show { display: flex; }
  /* 删除确认密码要盖在任何来源弹窗之上（自身可能是从卡密详情/代理详情里唤起的） */
  #dlgPwd { z-index: 160; }
  /* 软件权限选择弹窗盖在新增代理/代理详情之上，但低于删除确认 */
  #dlgPerms { z-index: 150; }
  .dialog {
    background: var(--panel); border-radius: var(--radius-lg); width: 620px; max-width: 94vw;
    max-height: 86vh; overflow: auto; padding: 22px 24px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 26px rgba(15, 23, 42, .12);
    border: 1px solid var(--line);
  }
  .dialog h3 { font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--text); }
  .dialog .x { margin-left: auto; cursor: pointer; color: var(--muted2); font-size: 18px; border: none; background: none; }
  .dialog .x:hover { color: var(--accent-bright); }
  .form-item { margin-bottom: 14px; }
  .form-item label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
  .form-item .input, .form-item .select { width: 100%; }
  .meta-line { font-size: 13px; color: var(--text2); padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
  /* ⭐ 第十六批：详情弹窗 kv 信息网格（替代 meta-line 一行式，排版更整齐） */
  .kv { display: grid; grid-template-columns: 92px 1fr; gap: 10px 12px; align-items: center; padding: 4px 0 10px; border-bottom: 1px dashed var(--line-soft); }
  .kv .k { color: var(--muted); font-size: 13px; }
  .kv .v { font-size: 13.5px; color: var(--text); min-width: 0; word-break: break-all; }
  .kv .v .input { padding: 3px 8px; }
  .dlg-ops { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px dashed var(--line-soft); }
  .dlg-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
  /* ⭐ 第十七批：积分操作按钮三色（划拨=绿 / 划扣=红 / 专属价格=琥珀） */
  .dlg-ops .btn { border: 1px solid transparent; }
  .btn.xs.btn-in { background: #E8F7EE; border-color: #B7E4C3; color: #15803D; }
  .btn.xs.btn-in:hover { background: #D5F0DF; border-color: #8FD4A5; color: #116632; }
  .btn.xs.btn-out { background: #FDECEC; border-color: #F3C3C3; color: #DC2626; }
  .btn.xs.btn-out:hover { background: #FADCDC; border-color: #E89B9B; color: #B91C1C; }
  .btn.xs.btn-spec { background: #FFF4DE; border-color: #F0DCAC; color: #B45309; }
  .btn.xs.btn-spec:hover { background: #FEE9C3; border-color: #E3C57F; color: #92400E; }
  /* ⭐ 第十七批：软件权限展示框最多 2 行，超出省略号 */
  .perm-view { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .checks { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0; }
  .checks label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text2); cursor: pointer; }
  .checks input, .grid input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
  /* 全选条（代理列表等） */
  .sel-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 13px; color: var(--text2); }
  .sel-bar .chk-lab { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  .sel-bar input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
  .sel-info { font-size: 12px; color: var(--muted2); }
  /* 指定卡密文本域 */
  .dialog textarea.input {
    height: auto; min-height: 92px; resize: vertical; width: 100%;
    font-family: 'Consolas', 'Courier New', monospace; letter-spacing: 1px; line-height: 1.7;
  }
  /* 统计表合计行 */
  .grid tfoot td {
    background: #F6F8FD; font-weight: 600; color: var(--text); border-top: 1px solid var(--line);
    border-bottom: none;
  }

  /* ===== 流水列表 ===== */
  .flow { list-style: none; }
  .flow li {
    padding: 12px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14px;
    color: var(--text2); display: flex; gap: 12px; align-items: baseline;
  }
  .flow li:last-child { border-bottom: none; }
  .flow .t { color: var(--muted2); flex: none; width: 150px; font-family: 'Consolas', 'Courier New', monospace; }
  .flow .amt-in { color: var(--status-success); font-weight: 600; margin-left: auto; }
  .flow .amt-out { color: var(--red); font-weight: 600; margin-left: auto; }
  .flow li .rowchk { flex: none; align-self: center; }
  /* 流水列表表头行（时间 / 内容 / 积分变动 + 首列全选框，居中加粗） */
  .flow-head {
    display: flex; align-items: center; padding: 9px 4px;
    border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); font-weight: 700;
  }
  .flow-head .chk-lab { flex: none; width: 40px; display: flex; justify-content: center; margin: 0; }
  .flow-head .t { flex: none; width: 150px; text-align: center; }
  .flow-head .ag { flex: none; width: 110px; text-align: center; }
  .flow-head .c { flex: 1; text-align: center; }
  .flow-head .a { flex: none; width: 90px; text-align: center; }
  /* 流水行内容与表头对齐：勾选/时间/代理账号/金额居中，内容列【内容靠左、表头居中】 */
  .flow li { align-items: center; }
  .flow li .rowchk { flex: none; width: 40px; display: flex; justify-content: center; }
  .flow li .t { text-align: center; }
  .flow li .ag { flex: none; width: 110px; text-align: center; color: var(--text); }
  .flow li .c { flex: 1; text-align: left; }
  .flow li .amt-in, .flow li .amt-out { flex: none; width: 90px; margin-left: 0; text-align: center; }
  /* 下拉搜索合一（combobox：输入即模糊查询，点选项即选中） */
  .combo { position: relative; }
  .combo .input { width: 100%; padding-right: 30px; }
  .combo::after {
    content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; pointer-events: none;
    border-right: 1.5px solid var(--muted2); border-bottom: 1.5px solid var(--muted2);
    transform: translateY(-70%) rotate(45deg);
  }
  .combo-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 220;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14); max-height: 210px; overflow: auto; display: none;
  }
  .combo-list.show { display: block; }
  .combo-item { padding: 9px 12px; font-size: 13px; color: var(--text2); cursor: pointer; }
  .combo-item:hover, .combo-item.cur { background: var(--accent-dark); color: var(--accent-bright); }
  .combo-item.hi { background: var(--accent-dark); color: var(--accent-bright); }
  .combo-item.empty { color: var(--muted2); cursor: default; }
  .combo-item.empty:hover { background: none; color: var(--muted2); }
  /* ⭐ 第二十七批：卡密筛选栏可搜索下拉（隐藏原生 select 保值，外面套可输入 combo） */
  .combo.fcombo { width: 168px; flex: none; }
  .combo.fcombo.acct { width: 146px; }
  .combo.fcombo .input { width: 100%; padding-right: 28px; cursor: text; }
  .combo.fcombo .combo-list { max-height: 232px; }
  .combo.fcombo .combo-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .combo.fcombo .combo-item .hit { color: var(--accent-bright); font-weight: 700; }
  .combo.fcombo .combo-item .cnt { float: right; color: var(--muted2); font-size: 12px; font-weight: 400; }
  .combo.fcombo.open::after { transform: translateY(-30%) rotate(225deg); }
  /* ⭐ 第二十八批：专属价格（软件 × 档位表格） */
  .spec-tip { font-size: 12.5px; color: var(--muted2); line-height: 1.7; margin: -2px 0 12px; }
  .spec-tip b { color: var(--accent-bright); font-weight: 700; }
  .spec-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .spec-bar .input { flex: none; width: 220px; height: 34px; }
  .spec-wrap {
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
    max-height: 46vh; overflow: auto;
  }
  .spec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  .spec-table th {
    position: sticky; top: 0; z-index: 2; background: var(--bg2); color: var(--text2);
    font-weight: 600; font-size: 12.5px; padding: 8px 6px; text-align: center; white-space: nowrap;
    border-bottom: 1px solid var(--line);
  }
  .spec-table th.sp-name { text-align: left; padding-left: 14px; }
  .spec-table th em { display: block; font-style: normal; font-size: 10px; font-weight: 400; color: var(--muted2); }
  .spec-table td { padding: 5px 6px; text-align: center; border-bottom: 1px solid var(--line-soft); }
  .spec-table td.sp-name { text-align: left; padding-left: 14px; color: var(--text); white-space: nowrap; }
  .spec-table tr:last-child td { border-bottom: none; }
  .spec-table tbody tr:hover td { background: #F7FAFE; }
  .spec-table input.input {
    width: 78px; height: 30px; padding: 0 6px; border-radius: 7px;
    text-align: center; font-size: 13px;
  }
  .spec-table input.input.set { border-color: var(--accent); color: var(--accent-bright); font-weight: 700; background: #F5F6FF; }
  /* ⭐ 第二十九批补充：与全局定价不一致（＝真改过）的格子 → 红底 + 红字 + 红边，一眼可辨 */
  .spec-table input.input.diff {
    border-color: #E5484D; color: #C81E1E; font-weight: 800; background: #FFF0F0;
    box-shadow: 0 0 0 2px rgba(229, 72, 77, .15);
  }
  .spec-tip .sp-diff-note { color: #C81E1E; }
  .spec-table input.input:disabled { background: var(--bg2); color: var(--muted2); cursor: not-allowed; }
  .spec-table tr.hide { display: none; }
  .spec-empty { padding: 26px 0; text-align: center; color: var(--muted2); font-size: 13px; }
  /* ⭐ 第三十二批：软件分类列 + 分类设置弹窗 */
  .p-cat { white-space: nowrap; }
  .cat-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
  .cat-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .cat-table th {
    position: sticky; top: 0; z-index: 1; background: var(--bg2); text-align: left;
    font-size: 13px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted2);
  }
  .cat-table td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
  .cat-table tr:last-child td { border-bottom: none; }
  .cat-table td:first-child { color: var(--text); white-space: nowrap; }
  .cat-table input.input { width: 100%; height: 32px; font-size: 13.5px; }
  /* ⭐ 第三十三批：分类设置 = 创建分类（新建行 + 合计 + 列表内改名/删除） */
  .cat-new { display: flex; gap: 8px; margin: 10px 0 12px; }
  .cat-new input.input { flex: 1 1 auto; min-width: 0; }
  .cat-new .btn { flex: 0 0 auto; white-space: nowrap; }
  .cat-sum { margin-top: 8px; font-size: 12.5px; color: var(--muted2); }
  .cat-cnt { color: var(--muted2); font-size: 12.5px; white-space: nowrap; }
  .cat-table td:last-child { text-align: right; }
  /* 双击分类格 → 就地下拉 */
  td.p-cat select.cat-pick {
    height: 30px; padding: 0 6px; font-size: 13px; min-width: 96px; max-width: 180px;
  }
  /* ⭐ 第三十六批：产品接入弹窗（登记 产品名称 + 产品ID） */
  .pj-new { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0 12px; flex-wrap: wrap; }
  .pj-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 190px; min-width: 0; }
  .pj-f label { font-size: 12px; color: var(--muted2); }
  .pj-f input.input { width: 100%; height: 34px; }
  .pj-new .btn { flex: 0 0 auto; height: 34px; white-space: nowrap; }
  .pj-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .pj-cnt { color: var(--muted2); font-size: 12.5px; white-space: nowrap; }
  .pj-wrap { max-height: 48vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
  .pj-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; }
  .pj-table th {
    position: sticky; top: 0; z-index: 1; background: var(--bg2); text-align: left;
    font-size: 13px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted2);
    white-space: nowrap;
  }
  .pj-table td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
  .pj-table tr:last-child td { border-bottom: none; }
  .pj-table td.pj-n { color: var(--text); white-space: nowrap; }
  .pj-table td.pj-id { white-space: nowrap; }
  .pj-table td.pj-ops { text-align: right; white-space: nowrap; }
  .pj-table td.pj-ops .btn + .btn { margin-left: 5px; }
  .pj-table td.pj-empty { text-align: center; color: var(--muted2); padding: 26px 0; font-size: 13px; }
  .pj-table .btn-del-pj { color: var(--red); }
  tr.pj-flash td { background: #EFF6FF; transition: background .3s; }
  /* 软件权限选择弹窗（可搜索 + 全选 + 勾选） */
  .perm-list { max-height: 252px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
  .perm-list label {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 13px;
    color: var(--text2); cursor: pointer; border-radius: 6px;
  }
  .perm-list label:hover { background: var(--accent-dark); }
  .perm-list input { accent-color: var(--accent); cursor: pointer; }
  .perm-list label.off { color: var(--muted2); }
  .perm-list label.off:hover { background: var(--line-soft); }
  .perm-view {
    min-height: 38px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px;
    font-size: 12px; color: var(--text2); line-height: 1.7; background: #FAFCFF;
  }

  /* ============================================================
     响应式：电脑端 = 侧栏 + 表格 ｜ 手机端 = 抽屉菜单 + 卡片列表
     ============================================================ */
  .scrim { position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(15, 23, 42, .5); z-index: 25; display: none; }
  .sidebar.open + .scrim { display: block; }
  /* 手机版预览（把同一页面按 390px 视口装进手机框里，方便电脑上看效果） */
  .phone-mask {
    position: fixed; top:0; right:0; bottom:0; left:0; z-index: 300; display: none;
    background: rgba(12, 19, 34, .78); backdrop-filter: blur(3px);
    align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  }
  .phone-mask.show { display: flex; }
  .phone-frame {
    width: 392px; height: min(812px, 82vh); padding: 12px;
    background: #0C1322; border-radius: 38px; border: 1px solid rgba(129, 140, 248, .35);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  }
  .phone-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 27px; background: #F1F5FB; display: block; }
  .phone-mask .hint { color: #C7D2FE; font-size: 13px; }
  /* 被手机框 iframe 加载时（#mobile）不再显示预览按钮，避免套娃 */
  html.embedded .phone-only { display: none !important; }

  @media (max-width: 900px) {
    /* 侧栏 → 抽屉 */
    .sidebar { transform: translateX(-100%); transition: transform .25s; width: 264px; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar .burger { display: inline-flex; width: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; border-radius: 12px; }
    .m-title { display: inline; }
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar .admin .t { display: none; }
    .content { padding: 14px 12px 12px; }
    .phone-only { display: none !important; }
  }

  @media (max-width: 640px) {
    .topbar .date-box { display: none; }
    /* 手机端余额保持可见，收紧尺寸（账号名已隐藏，只留头像） */
    .topbar .wallet { padding: 3px 8px; gap: 4px; }
    .topbar .wallet b { font-size: 14px; }
    .topbar .wallet .u { font-size: 10px; }
    .page-header { flex-wrap: wrap; }
    .page-header h1 { font-size: 20px; }
    .page-header .desc { font-size: 12px; }
    .note { font-size: 12px; padding: 9px 12px; }
    /* 筛选区：输入框整行、按钮两列 */
    .toolbar { gap: 8px; }
    .toolbar .input, .toolbar .select { width: 100% !important; flex: 1 1 100%; height: 38px; }
    .toolbar .btn { flex: 1 1 calc(50% - 4px); height: 38px; }
    .sel-info { flex: 1 1 100%; text-align: center; }
    .fb-wrap { flex-direction: column; min-height: 300px; }
    .fb-side { width: 100%; display: flex; gap: 6px; overflow-x: auto; align-items: center; }
    .fb-side-t { display: none; }
    .fb-sess { flex: none; }
    .fb-msgs { max-height: 220px; }
    /* ---- 卡密管理：四个筛选平铺一排 ｜ 搜索框独占一行 ｜ 四个按钮平铺一排 ---- */
    #page-cards .toolbar { gap: 6px; }
    #page-cards .toolbar .select {
      flex: 1 1 0; min-width: 0; width: auto !important;
      height: 34px; padding: 4px 4px; font-size: 12px;
    }
    /* 第二十七批：产品/账号改 combo 后，仍与另两个筛选平铺一排 */
    #page-cards .toolbar .combo.fcombo {
      flex: 1 1 0; min-width: 0; width: auto !important;
    }
    #page-cards .toolbar .combo.fcombo .input {
      flex: none; width: 100% !important; min-width: 0;
      height: 34px !important; padding: 4px 17px 4px 5px;
      font-size: 16px !important;              /* iOS 铁律：聚焦不得 <16px，否则整页被放大 */
      text-overflow: ellipsis;
    }
    /* 手机端输入框被压到 ~78px，展开面板不能跟着变窄（否则产品名全被截成「STAI番…」） */
    #page-cards .toolbar .combo.fcombo .combo-list {
      left: 0; right: auto;
      min-width: 216px; max-width: calc(100vw - 28px);
    }
    #page-cards .toolbar .combo.fcombo.acct .combo-list { left: auto; right: 0; }
    #page-cards .toolbar .combo.fcombo .combo-item {
      font-size: 14px; padding: 10px 12px;
    }
    /* 第二十八批：手机端专属价格 —— 表格横向滚动，输入框必须 16px（iOS 聚焦不放大） */
    .spec-bar { flex-wrap: wrap; }
    .spec-bar .input { width: 100%; height: 40px !important; font-size: 16px !important; }
    .spec-wrap { max-height: 54vh; }
    .spec-table { min-width: 560px; }
    .spec-table th { padding: 8px 4px; font-size: 12px; }
    .spec-table td.sp-name, .spec-table th.sp-name { padding-left: 10px; }
    .spec-table input.input {
      width: 64px; height: 34px !important;
      font-size: 16px !important;                 /* iOS 铁律 */
      padding: 0 2px;
    }
    /* 第三十二批：手机端分类设置弹窗 */
    .cat-wrap { max-height: 46vh; }
    .cat-table input.input { height: 40px !important; font-size: 16px !important; }  /* iOS 铁律 */
    .cat-table td:first-child { white-space: normal; }
    /* 第三十三批：手机端「新建分类」输入框与就地下拉也要 ≥16px */
    .cat-new { flex-wrap: nowrap; }
    .cat-new input.input { height: 42px !important; font-size: 16px !important; }
    .cat-new .btn { height: 42px; padding: 0 12px; }
    td.p-cat select.cat-pick { height: 38px; font-size: 16px; max-width: 150px; }
    /* 第三十六批：手机端产品接入弹窗（输入框 16px 铁律 + 表格横滚） */
    .pj-dlg .dialog, .pj-dlg { padding: 14px; }
    .pj-f { flex: 1 1 100%; }
    .pj-f input.input { height: 42px !important; font-size: 16px !important; }
    .pj-new .btn { width: 100%; height: 42px; }
    .pj-bar { flex-wrap: wrap; }
    .pj-bar .input { width: 100% !important; height: 40px !important; font-size: 16px !important; }
    .pj-wrap { max-height: 46vh; }
    .pj-table { min-width: 640px; }
    .pj-table th { padding: 8px 8px; font-size: 12px; }
    .pj-table td { padding: 8px; font-size: 13px; }
    .pj-table td.pj-n { white-space: normal; }
    #page-cards .toolbar .input { flex: 1 1 100%; width: 100% !important; height: 38px; }
    #page-cards .toolbar .btn {
      flex: 1 1 calc(25% - 5px); height: 36px; padding: 0 2px; font-size: 12px;
    }
    /* 手机端卡密列：只显示前 4 位（JS 截断）+ 单行不换行 */
    #cardsBody td.code { white-space: nowrap; }
    /* 手机端操作列只保留「详情」，续期走详情弹窗 */
    #cardsBody .c-ops .btn-renew { display: none; }

    /* ---- 首页：日期×2 + 时间范围统计 一排三个；统计今日 + 统计当月 一排两个 ---- */
    #page-stats .toolbar { gap: 6px; }
    #page-stats .toolbar .input {
      flex: 1 1 0; min-width: 96px; width: auto !important;
      height: 36px; padding: 4px 6px; font-size: 12px;
    }
    #page-stats .toolbar .muted { display: none; }
    #page-stats .toolbar .btn { flex: 1 1 calc(33.33% - 4px); height: 36px; padding: 0 2px; font-size: 12px; }
    #page-stats .toolbar #stBtnToday, #page-stats .toolbar #stBtnMonth { flex: 1 1 calc(50% - 4px); }

    /* ---- 代理管理：搜索/级别/状态/新增/刷新/批量删除 六个控件两排三列 ---- */
    #page-agents .toolbar { gap: 6px; }
    #page-agents .toolbar .input, #page-agents .toolbar .select {
      flex: 1 1 calc(33.33% - 4px); min-width: 0; width: auto !important;
      height: 36px; padding: 4px 6px; font-size: 12px;
    }
    #page-agents .toolbar .btn { flex: 1 1 calc(33.33% - 4px); height: 36px; padding: 0 2px; font-size: 12px; }

    /* ---- 账单管理 / 积分记录：筛选三个一排、查询与删除并排 ---- */
    #page-bills .toolbar, #page-deposits .toolbar { gap: 6px; }
    #page-bills .toolbar .input, #page-bills .toolbar .select,
    #page-deposits .toolbar .input, #page-deposits .toolbar .select {
      flex: 1 1 calc(33.33% - 4px); min-width: 0; width: auto !important;
      height: 36px; padding: 4px 6px; font-size: 12px;
    }
    #page-bills .toolbar .muted, #page-deposits .toolbar .muted { display: none; }
    #page-bills .toolbar .btn { flex: 1 1 calc(50% - 4px); height: 36px; }
    #page-deposits .toolbar .btn { flex: 1 1 calc(33.33% - 4px); height: 36px; padding: 0 2px; font-size: 12px; }
    #page-deposits .toolbar .btn:nth-of-type(2), #page-deposits .toolbar .btn.danger { flex: 1 1 calc(50% - 4px); }
    /* 已选计数挪到最后，不打散按钮排布 */
    #page-bills .toolbar .sel-info, #page-deposits .toolbar .sel-info, #page-agents .toolbar .sel-info { order: 10; }

    /* ⭐ 第二十四批：分排只在此（手机端）生效 —— 桌面端已恢复平铺一排 */
    .toolbar.tb-stack { flex-direction: column; align-items: stretch; gap: 8px; }
    .toolbar.tb-stack .tb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

    /* ---- 第二十二批：账单 / 积分记录工具栏「严格按行等分」----
       上面 .toolbar .input/.select 是 flex:1 1 100%（整行），在 .tb-row 里会把每排撑成多行。
       这里改成每排子元素等分（flex:1 1 0）、行内不换行，手机上才是真正的
       账单 2 排 / 积分记录 3 排。 */
    #page-bills .toolbar.tb-stack, #page-deposits .toolbar.tb-stack { gap: 8px; }
    #page-bills .toolbar.tb-stack .tb-row,
    #page-deposits .toolbar.tb-stack .tb-row { flex-wrap: nowrap; gap: 6px; }
    #page-bills .toolbar.tb-stack .tb-row > *,
    #page-deposits .toolbar.tb-stack .tb-row > * {
      flex: 1 1 0; min-width: 0; width: auto !important;
      height: 36px; padding: 4px 6px; font-size: 12px;
    }
    #page-bills .toolbar.tb-stack .tb-row > .sel-info,
    #page-deposits .toolbar.tb-stack .tb-row > .sel-info {
      flex: 0 0 auto; width: auto !important; height: auto; padding: 0;
      text-align: left; order: 0;
    }

    /* ---- 表格保持表格形态：横向滚动 + 紧凑行（内容多时一屏纵览，更好查） ---- */
    .card { padding: 12px; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; }
    table.grid { min-width: 660px; }
    .grid th { padding: 9px 8px; font-size: 12px; }
    .grid td { padding: 9px 8px; }
    .grid td .btn.xs { padding: 3px 7px; font-size: 11px; line-height: 16px; }
    .grid td .btn + .btn { margin-left: 4px; }
    .grid td .link { font-size: 12px; }
    table.grid input[type="checkbox"] { width: 15px; height: 15px; }

    /* 弹窗：上下居中显示（宽度铺满） */
    .mask { align-items: center; }
    .dialog {
      width: 100%; max-width: none; max-height: 86vh; overflow-y: auto;
      border-radius: var(--radius-lg); padding: 18px 16px 22px;
    }
    /* 弹窗内控件放大到触控尺寸 */
    .dialog .btn { height: 40px; font-size: 14px; }
    .dialog .btn.sm { height: 34px; font-size: 13px; }
    .dialog .input, .dialog .select { height: 40px; }
    /* 统计卡：三张平铺一排（紧凑） */
    /* ⭐ 第二十三批：卡片数量增加（管理员 6 张），手机端固定 2 列更易读 */
    .stat-row, .stat-row[data-n] { gap: 8px; }
    .stat-row, .stat-row[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-row[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat { padding: 10px 5px 9px; }
    .stat .k { font-size: 11px; }
    .stat .v { font-size: 17px; margin-top: 4px; }
    .stat .s { font-size: 10px; margin-top: 3px; line-height: 1.35; }
    /* 代理端 4 张一排：列更窄，字号/内边距再收一档 */
    .stat-row[data-n="4"] .stat { padding: 9px 3px 8px; }
    .stat-row[data-n="4"] .stat .k { font-size: 10px; }
    .stat-row[data-n="4"] .stat .v { font-size: 15px; margin-top: 3px; }
    .stat-row[data-n="4"] .stat .s { font-size: 9px; }
    .flow li { flex-wrap: nowrap; }
    .flow .t { width: 150px; }
    .flow .amt-in, .flow .amt-out { margin-left: 0; }
    .flow-head { flex-wrap: nowrap; }
    .flow-head .t { width: 150px; }
    .flow-head .c { flex: 1; }
    /* 流水（账单/积分记录）：保持桌面单行形态，外层容器横向左滑查看 */
    .flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; }
    .flow-scroll .flow-head, .flow-scroll .flow { min-width: 740px; }
    .pager { justify-content: center; flex-wrap: wrap; padding-top: 12px; }
    .toast { max-width: 92vw; white-space: normal; text-align: center; }
    .phone-frame { width: 100vw; height: 100vh; border-radius: 0; padding: 0; border: none; }
    .phone-frame iframe { border-radius: 0; }
    .phone-mask .hint { display: none; }

    /* ⭐ 第二十五批：手机端「看得清 + 点得准」整体放大一档
       （客户反馈：数据字太小 / 菜单按钮点不到 / 输入框光标乱跳） */
    /* 表格：表头 12→13px、数据 12→14px、行内按钮 11→12.5px */
    .grid th { font-size: 13px; padding: 10px 8px; }
    .grid td { font-size: 14px; padding: 11px 8px; }
    .grid td .btn.xs { font-size: 12.5px; line-height: 18px; padding: 4px 8px; }
    .grid td .link { font-size: 13px; }
    /* 流水（账单/积分记录）13→14.5px；时间列同步加宽防裁切 */
    .flow li, .flow-head { font-size: 14.5px; }
    .flow .t, .flow-head .t { width: 168px; }
    .flow-scroll .flow-head, .flow-scroll .flow { min-width: 772px; }
    /* 首页统计卡：标题 11→12px、主数 17→20px、副行 10→11.5px */
    .stat { padding: 11px 5px 10px; }
    .stat .k { font-size: 12px; }
    .stat .v { font-size: 20px; margin-top: 4px; }
    .stat .s { font-size: 11.5px; }
    /* 代理端 4 张一排：列更窄，单独一档（比原来仍大一档） */
    .stat-row[data-n="4"] .stat { padding: 10px 3px 9px; }
    .stat-row[data-n="4"] .stat .k { font-size: 11px; }
    .stat-row[data-n="4"] .stat .v { font-size: 17px; }
    .stat-row[data-n="4"] .stat .s { font-size: 10px; }
    .page-header h1 { font-size: 22px; }
    /* 筛选区控件：下拉/按钮 12→13px，输入框统一 16px（见下） */
    #page-cards .toolbar .select { font-size: 13px; height: 36px; }
    #page-cards .toolbar .btn, #page-stats .toolbar .btn,
    #page-agents .toolbar .btn, #page-bills .toolbar .btn,
    #page-deposits .toolbar .btn { font-size: 13px; }
    #page-bills .toolbar.tb-stack .tb-row > *,
    #page-deposits .toolbar.tb-stack .tb-row > * { font-size: 13px; }
    .sel-info { font-size: 12.5px; }
    /* ⚠️ iOS 铁律：输入框字号 <16px 时，聚焦会自动放大整页 → 放大后点击坐标整体偏移，
       表现就是「光标错位、乱点」。手机端所有文本输入框一律 16px 起。 */
    input:not([type="checkbox"]):not([type="radio"]), textarea { font-size: 16px; }
    /* 各页筛选区是 ID 级选择器（12px），这里用同级选择器盖回来 —— 日期框也要 16px */
    .toolbar .input, .dialog .input,
    #page-cards .toolbar .input, #page-stats .toolbar .input,
    #page-agents .toolbar .input, #page-bills .toolbar .input,
    #page-deposits .toolbar .input,
    #page-bills .toolbar.tb-stack .tb-row > input,
    #page-deposits .toolbar.tb-stack .tb-row > input { font-size: 16px; }
    /* 字号放大后手机端窄控件会裁字：收内边距 + 收日历图标，保证「年/月/日」和下拉文字完整 */
    #page-cards .toolbar .select, #page-agents .toolbar .select,
    #page-bills .toolbar.tb-stack .tb-row > select,
    #page-deposits .toolbar.tb-stack .tb-row > select,
    #page-stats .toolbar .select {
      padding-left: 4px; padding-right: 0; font-size: 12.5px;
    }
    /* 手机端日期框：隐藏原生日历图标（点框体仍会弹选择器），把宽度全让给「年/月/日」 */
    input[type="date"] { padding: 4px; cursor: pointer; }
    input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
    /* 手机端「操作」列会被 applyOpsOrder 移到首位 → 吸附到左侧（沿用第十五批本意：详情始终可点）；
       末列（创建时间/状态）取消右侧吸附，否则会盖住前面几列数据（字变大后尤其明显） */
    #page-cards .grid th:last-child, #page-cards .grid td:last-child,
    #page-agents .grid th:last-child, #page-agents .grid td:last-child {
      position: static; box-shadow: none;
    }
    #page-cards .grid th.card-ops-th, #page-cards .grid td.c-ops,
    #page-agents .grid th.card-ops-th, #page-agents .grid td.a-ops {
      position: sticky; left: 0; z-index: 2; background: var(--panel);
      box-shadow: 8px 0 12px -8px rgba(15, 23, 42, .18);
    }
    #page-cards .grid thead th.card-ops-th, #page-agents .grid thead th.card-ops-th {
      background: #F6F8FD; z-index: 3;
    }

    /* 表格：字变大后按「宁可横向滚动、不压缩截断」处理（卡密 9 列 / 代理 8 列） */
    #page-cards table.grid { min-width: 900px; }
    #page-agents table.grid { min-width: 800px; }
    .dialog .input, .dialog .select { height: 42px; }
  }