@charset "utf-8";
/* ==========================================================================
   yz-admin-responsive.css  ·  芸众后台「移动端自适应增强层」 v1.0
   建造日期：2026-09-23      适用：芸众云店 v2.3.x 后台（Laravel blade + Bootstrap3 + AdminLTE + ElementUI2）
   --------------------------------------------------------------------------
   【设计原则】
     1. 本文件所有规则一律包在 @media (max-width:991px) 内
        → 电脑端（>=992px）100% 零影响，绝对不动现有布局
     2. 最小侵入：不修改任何业务页面 blade，只做"外层容器样式覆盖"
     3. 借力 Bootstrap3 原生栅格 —— 原站问题根源是 webstyle.css 里
        html,body{min-width:1000px} 把视口强行撑到 1000px，导致 md 断点被误触发、
        栅格永远不堆叠。解除它之后，col-md-* 会自动塌成单列，大部分适配自动完成
     4. 覆盖一律用 !important（原 CSS 加载更早、特异性更高，必须硬压）
     5. 触控友好：输入框字号 >=16px（防 iOS 聚焦自动放大）、可点区域 >=36px
   --------------------------------------------------------------------------
   【开关】见 layouts/adminResponsive.blade.php
   ========================================================================== */

@media (max-width: 991px) {

  /* ======================================================================
     一、解除全站固定宽度（★ 最关键的一节，不解除后面全白干）
     源头：static/css/webstyle.css
       第 3  行 html,body{min-width:1000px}
       第 33 行 .rightlist{min-width:960px}
       第 62 行 .topmenu_header{min-width:1000px}
       第 271行 .w1200{min-width:1000px}
       第 288行 .plug-list{min-width:600px}
       第 351行 xxx{min-width:960px}
     ====================================================================== */
  html,
  body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  .wrapper,
  .w1200,
  .plug-list,
  .rightlist,
  .rightlist2,
  .topmenu_header,
  .topmenubg,
  .topmenubg_yy,
  #sidebar,
  #sidebar_section {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* rightlist2 原本 margin:52px 6px 6px 250px（给左侧 250px 菜单留位） */
  .rightlist2 {
    margin: 8px !important;
    padding-bottom: 30px !important;
  }

  /* 左右固定定位的老版工具条在手机上会挡住内容，收起 */
  .topmenubg,
  .topmenubg_yy {
    display: none !important;
  }

  /* ======================================================================
     二、主内容区占满整屏
     .main-panel 定义在 static/assets/css/material-dashboard.css:6846
     另有 base.blade.php 内联 style 写死 width:calc(100% - 96px)
     ====================================================================== */
  .main-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .main-panel > .content,
  .content,
  .vue-page,
  .page-content,
  .main-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 10px 8px 24px 8px !important;
    box-sizing: border-box;
  }

  .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0 !important;
  }

  /* 栅格列的内边距收紧，窄屏下省出可用宽度 */
  [class*="col-xs-"],
  [class*="col-sm-"],
  [class*="col-md-"],
  [class*="col-lg-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* ======================================================================
     三、侧边导航 → 抽屉化
     原生：#sidebar > section.sidebar  position:fixed; width:96px; top:50px
          显示由 Vue 的 isExpand 控制（:style="{display:isExpand?'block':'none'}"）
     这里只调"尺寸与层级"，不跟 Vue 抢显隐逻辑
     ====================================================================== */
  #sidebar_section {
    left: 0 !important;
    transform: none !important;
    width: 140px !important;
    max-width: 140px !important;
    z-index: 2050 !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .35) !important;
  }

  .sidebar .sidebar-wrapper {
    width: 100% !important;
    padding-bottom: 60px !important;
  }

  /* 二级侧边栏（.sidebar2）：紧接一级栏右侧，铺满剩余宽度。
     背景：原生窄屏（material-dashboard.css 的 @media max-width:991px）里
           .sidebar{display:none; left:-62px; transform:translateX(60px)}，
           而 .sidebar2 元素同时带 .sidebar 类 → 被一起隐藏，
           手机端二级菜单"根本不存在"（2026-09-23 用户反馈：只看到主栏目）。
     这里只调尺寸与定位；显隐由 adminResponsive.blade.php 的
     bindSecondSidebar() 跟随 #sidebar_section。
     不新增元素、不新增内容、不发任何接口 —— 仍是服务端渲染的那一份菜单。 */
  .sidebar2,
  .sidebar.sidebar2 {
    display: block !important;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    margin-left: 140px !important;
    width: calc(100vw - 140px) !important;
    max-width: 300px !important;
    height: calc(100vh - 50px) !important;
    padding-top: 0 !important;
    z-index: 2049 !important;
    background: #f5f5f5 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .24) !important;
    border-radius: 0 14px 14px 0 !important;
  }

  .sidebar2 .sidebar-wrapper {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    margin-left: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    overflow-y: auto !important;
  }

  .sidebar2 .nav li > a {
    padding-left: 8px !important;
  }

  /* ======================================================================
     四、顶部栏 / 头部
     ====================================================================== */
  .navbar,
  .yz-menu-header,
  .topmenu_header {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ⚠️ 早期版本在这里写了一条「把 .navbar-right 整块隐藏」的规则，注释还错写成
     "官方自带规则，保持一致" —— 结果把右上角的账号、头像、退出系统一起藏掉了，
     手机上根本退不出去（2026-09-23 用户反馈）。
     该规则已删除；改为在本文件末尾把它放出来（只显示原 DOM，不新增任何元素）。 */

  .page-header {
    padding-bottom: 6px !important;
    margin: 12px 0 10px !important;
    font-size: 18px !important;
  }

  /* ======================================================================
     五、表格 → 横向滚动（不换行、不撑破页面）
     ====================================================================== */
  .table-responsive,
  .table-wrap,
  .el-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table.table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  table.table > thead,
  table.table > tbody,
  table.table > tfoot {
    display: table;
    width: 100%;
    min-width: 560px; /* 保证列有最小宽度，避免挤压成竖条 */
  }

  table.table th,
  table.table td {
    white-space: nowrap;
    font-size: 13px !important;
    padding: 8px 8px !important;
  }

  table.table td .btn,
  table.table td .label {
    font-size: 12px !important;
    padding: 3px 7px !important;
  }

  /* 表格上方的批量操作按钮条：允许换行，别横向溢出 */
  .batch-bar,
  .table-tools,
  .btn-group {
    flex-wrap: wrap;
  }

  /* ======================================================================
     六、表单控件（触控友好）
     iOS Safari 对 <16px 的输入框会在聚焦时自动放大页面，必须顶到 16px
     ====================================================================== */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .form-control {
    height: auto !important;
    min-height: 38px !important;
  }

  textarea.form-control {
    min-height: 90px !important;
  }

  .form-group {
    margin-bottom: 12px !important;
  }

  /* 单行多列表单（label 左/输入右）在窄屏堆叠 */
  .form-horizontal .control-label {
    text-align: left !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .form-horizontal .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 查询区里的固定小宽输入框，统一放宽 */
  .form-inline .form-control,
  .search-box .form-control {
    width: 100% !important;
  }

  /* ======================================================================
     七、按钮 / 可点区域
     ====================================================================== */
  .btn {
    min-height: 36px !important;
    padding: 7px 13px !important;
    font-size: 14px !important;
    margin-bottom: 6px;
  }

  .btn-xs {
    min-height: 28px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
  }

  /* 开关类组件（honeySwitch / bootstrap-switch）适当放大，方便点 */
  .honeySwitch,
  .bootstrap-switch {
    transform: scale(1.06);
    transform-origin: left center;
  }

  /* ======================================================================
     八、弹窗 / 抽屉 / 提示层 → 全屏友好
     ====================================================================== */
  .modal {
    padding-left: 0 !important;
  }

  .modal-dialog {
    width: auto !important;
    max-width: none !important;
    margin: 8px !important;
  }

  .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 12px !important;
  }

  /* ElementUI 对话框 */
  .el-dialog {
    width: 94% !important;
    max-width: 94% !important;
    margin-top: 4vh !important;
  }

  .el-dialog__body {
    max-height: 68vh;
    overflow-y: auto;
    padding: 14px !important;
  }

  .el-message-box {
    width: 90% !important;
    max-width: 90% !important;
  }

  .el-drawer {
    width: 88% !important;
  }

  /* 老版 layer 弹层（后台大量使用） */
  .layui-layer {
    max-width: 96vw !important;
    box-sizing: border-box;
  }

  .layui-layer-content {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* SweetAlert2（全局提示） */
  .swal2-popup {
    width: 92% !important;
    max-width: 92% !important;
    padding: 1.2em 1em !important;
  }

  /* ======================================================================
     九、图片 / 媒体兜底：绝不允许撑破页面
     ====================================================================== */
  .content img,
  .main-panel img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 分页条：手机上居中换行，数字按钮不要溢出 */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination > li > a,
  .pagination > li > span {
    padding: 6px 10px !important;
  }

  /* ======================================================================
     十、富文本编辑器（ueditor / wangEditor）宽度自适应
     ====================================================================== */
  #edui1,
  #edui1_iframeholder,
  .edui-editor,
  .w-e-text-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #edui1_toolbarbox {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}
/* ===================== @media (max-width:991px) 结束 ===================== */


/* ==========================================================================
   十一、超窄屏（手机竖屏 <576px）补充
   ========================================================================== */
@media (max-width: 575px) {

  .content,
  .main-panel > .content,
  .vue-page {
    padding: 8px 6px 20px 6px !important;
  }

  /* 表格最小宽度略降，尽量少横滚 */
  table.table > thead,
  table.table > tbody,
  table.table > tfoot {
    min-width: 500px;
  }

  /* 搜索区 .row 收一收 */
  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .el-dialog {
    width: 96% !important;
    max-width: 96% !important;
  }

  h1, h2, h3 { font-size: 18px !important; }
  h4, h5, h6 { font-size: 15px !important; }
}


/* ==========================================================================
   十二、v1.1 追加 —— 列表页可用性关键改造
   背景（实测 390px 视口 · 商品列表）：
     #app > div > .third-list
        ├ .tabs-div   47px   顶部页签
        ├ .form-list  904px  ← 筛选区，堆叠后高达 900px，把数据挤出首屏！
        └ .table-list 428px  ← 表格
     结论：不折叠筛选区，手机上永远"看不到数据"。改为默认折叠、按需展开。
   （.form-list 折叠由 adminResponsive.blade.php 里的 JS 加 .yz-collapsed 类触发）
   ========================================================================== */
@media (max-width: 991px) {

  /* ---------- 筛选区折叠 ---------- */
  .form-list {
    transition: max-height .26s ease, opacity .2s ease;
    max-height: 4000px;          /* 展开态上限，足够容纳所有筛选项 */
    overflow: hidden;
  }

  .form-list.yz-collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 折叠开关条 */
  .yz-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 10px 0;
    padding: 10px 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    font-size: 14px;
    color: #3f6ad8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .yz-filter-bar:active { background: #f2f5fb; }

  .yz-filter-bar .yz-fb-arrow {
    display: inline-block;
    transition: transform .22s ease;
    font-size: 12px;
  }

  .yz-filter-bar.yz-open .yz-fb-arrow { transform: rotate(180deg); }

  /* ---------- 顶部页签（上架中 / 仓库中 / 全部商品…）横向滚动 ---------- */
  .tabs-div {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs-div::-webkit-scrollbar { display: none; }
  .tabs-div > * { flex: 0 0 auto; }

  /* ---------- 底部固定分页条 ---------- */
  body { padding-bottom: 88px !important; }

  .vue-page {
    padding: 4px 6px !important;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
  }

  /* 分页控件窄屏精简：隐藏"跳至/每页条数"，保留上一页/页码/下一页 */
  .el-pagination { padding: 0 !important; }
  .el-pagination__jump,
  .el-pagination__sizes { display: none !important; }

  /* ---------- 顶部一次性提示条（功能引导） ---------- */
  #yz-top-tip {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2060;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(33, 33, 33, .94);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  #yz-top-tip .yz-tt-close {
    flex: 0 0 auto;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 12px;
    padding: 2px 9px;
    text-decoration: none;
    font-size: 12px;
  }

}


/* ==========================================================================
   十三、v1.2 追加 —— 实测（390px）暴露的溢出/遮挡问题专项修复
   诊断依据（diag.py 输出）：
     z=1221 top=42 h=50  nav.navbar.navbar-transparent.navbar-absolute  ← 固定顶栏
     .tabs-div top=70                                                      ← 被顶栏压住
     div.alert.alert-warning  w=500                                        ← 警告框超宽
     div.el-input-group       w=350                                        ← 输入组超宽
     div.tox-toolbar__group   w=442                                        ← 富文本工具栏超宽
     div.float-doc-entry      z=1100 top=396 (52x52)                       ← 悬浮入口挡内容
   ========================================================================== */
@media (max-width: 991px) {

  /* ---------- 1. 提示 / 警告 / 说明框不超宽 ---------- */
  .alert,
  .alert-warning,
  .alert-info,
  .alert-danger,
  .alert-success,
  .notice,
  .tips,
  .tips-box {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ---------- 2. ElementUI 输入类组件统一占满 ---------- */
  .el-input,
  .el-input-group,
  .el-input-number,
  .el-select,
  .el-date-editor,
  .el-range-editor,
  .el-cascader,
  .el-autocomplete,
  .el-time-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .el-range-editor.el-input__inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .el-input-group__prepend,
  .el-input-group__append {
    padding: 0 8px !important;
    font-size: 13px !important;
  }

  /* 输入框作为行内控件时（如"每页 N 条"），不要强行 100% */
  .el-pagination .el-input,
  .el-input--mini,
  .el-input--small {
    width: auto !important;
  }

  /* ---------- 3. 富文本编辑器（TinyMCE / ueditor）工具栏换行 ---------- */
  .tox-toolbar,
  .tox-toolbar__primary,
  .tox-toolbar__overflow,
  .tox-toolbar__group {
    flex-wrap: wrap !important;
  }

  .tox-tinymce,
  .tox-editor-container {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ---------- 4. 官方悬浮帮助入口：从屏幕中部挪到右下（避免压住正文） ---------- */
  .float-doc-entry {
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 152px !important;
    transform: scale(.85);
    transform-origin: right bottom;
  }

  /* ---------- 5. 表格横向可滑提示（由 JS 在确实溢出时插入） ---------- */
  .yz-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 0 0;
    font-size: 12px;
    color: #909399;
    user-select: none;
  }

  /* ---------- 6. 内容区避开固定顶栏（JS 会补算精确值，这里兜底） ---------- */
  .content > .rightlist,
  .main-panel > .content {
    scroll-margin-top: 60px;
  }
}


/* ==========================================================================
   十四、v1.3 追加 —— ★ 手机表单「label 吃满宽度」通病（影响面最广的一条）
   实例（finance/balance/index.blade.php 页面内联样式）：
       .el-form-item__label { width: 300px; text-align: right; }
   在 390px 屏幕上：label 独占 300px → 内容区只剩 70px
   → 警示框被压成 70px 宽、文字竖排成一列（详见前后对比截图）
   这是芸众后台大量页面的通病（表单 label 按桌面 300px 写死）。
   统一处理：手机端 label 改为「独占一行、左对齐」，内容区 100% 宽。
   ========================================================================== */
@media (max-width: 991px) {

  .el-form-item__label {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 0 5px 0 !important;
    line-height: 1.5 !important;
    box-sizing: border-box;
  }

  .el-form-item__content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 行内表单（查询区）的 label 同样处理 */
  .el-form--inline .el-form-item,
  .el-form--inline .el-form-item__label {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* 说明性文字块：桌面写死宽度（如 .note-span 290px）在窄屏放开 */
  .note-span,
  .tip-span,
  .tips-span,
  .desc-span,
  .text-span {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-right: 0 !important;
  }

  /* 提示 / 警示框：绝不允许被压成窄条（否则文字竖排） */
  .alert,
  .alert-warning,
  .alert-info,
  .alert-danger,
  .alert-success {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    word-break: break-word;
    white-space: normal;
  }

  /* 表单里的小控件不因 label 独立而错位 */
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-select,
  .el-form-item__content > .el-textarea {
    width: 100% !important;
  }

  /* 固定底部的"提交"条：桌面写法 width:calc(100% - 266px) 在手机上只剩 124px */
  .confirm-btn,
  .con .confirm-btn,
  .submit-bar,
  .footer-btn {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* 图片上传框等比缩小 */
  .upload-box,
  .upload-boxed {
    width: 110px !important;
    height: 110px !important;
  }

  /* 官方悬浮帮助入口弱化，别抢视线 */
  .float-doc-entry {
    opacity: .62;
  }

  /* ---------- ★ 关键：清掉"为桌面 label 让位"的 margin-left ----------
     实测 .alert 的 computed mar = 0px 0px 20px 300px（左 300px）
     父容器可用宽 370px → 370-300 = 70px  → 警示文字被压成竖排一条
     同类写法在芸众后台极多（label 300/290/200px），统一归零。
     注：JS 还会做一层"margin-left > 100px 自动归零"的兜底，见 adminResponsive.blade.php
     ------------------------------------------------------------------ */
  .alert,
  .alert-warning,
  .alert-info,
  .alert-danger,
  .alert-success,
  .el-form-item__content {
    margin-left: 0 !important;
  }
}


/* ==========================================================================
   十五、v1.4 追加 —— 子页面（详情 / 编辑 / 列表）专项
   实测依据（audit.py 体检 · 390px 视口）：
     [会员列表] div.vue-title-content 14x128   → 「会员查询」竖排成一列字
                span.spanClass         33x224  → 统计表头「总数:13」竖排
                div.total-head         795px   → 筛选区没折叠，数据被挤出首屏
     [商品列表] form.el-form--inline    972px   → 筛选区没折叠（类名不同，旧选择器漏抓）
                a「搜索 / 导出」        173x16 → 点击区太小
     [商品编辑] div.el-form-item        450px   → 被父级 overflow 裁掉 → 看不到内容
                div.form-item_tips     700px   → 说明文字被裁掉
     [会员详情] 页高 3796px，a「充值」80x16 → 又小又深，用户找不到入口
   根因：
     static/yunshop/css/total.css
       .vue-title        { display:flex }        无 flex-wrap → 子项被挤成竖排
       .vue-title-content{ flex:1 1 0% }         被右侧按钮区压到 14px
     大量页面内联样式把 el-form-item / tips 写成 450px / 700px 固定宽
   ========================================================================== */
@media (max-width: 991px) {

  /* ---------- 1. 列表页标题行：修「一个字一行」的竖排 ---------- */
  .vue-title {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px;
    height: auto !important;
    line-height: 1.5 !important;
  }

  .vue-title-left {
    flex: 0 0 auto !important;
    margin-top: 1px !important;
  }

  .vue-title-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* 标题行里的按钮组（第 3 个子 div）：独占下一行并自动换行 */
  .vue-title > div:not(.vue-title-left):not(.vue-title-content) {
    flex: 0 0 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px 10px;
  }
  .vue-title > div:not(.vue-title-left):not(.vue-title-content) > * {
    margin-right: 0 !important;
    flex: 0 0 auto;
    min-height: 34px;
  }

  /* ---------- 2. 统计表头行（span.spanClass）：横向滚动，不竖排 ---------- */
  .vue-title.yz-title-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vue-title.yz-title-scroll::-webkit-scrollbar { height: 0 !important; }
  .vue-title.yz-title-scroll > span,
  .vue-title.yz-title-scroll > .spanClass,
  .vue-title.yz-title-scroll > .spanClass.titleE {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding-right: 10px;
  }

  /* ---------- 3. 弹层（编辑弹窗 / 会员详情抽屉）宽度适配 ---------- */
  .el-dialog {
    width: 94% !important;
    max-width: 560px !important;
    margin: 6vh auto 20px !important;
  }
  .el-dialog__header { padding: 14px 16px 10px !important; }
  .el-dialog__body {
    max-height: 64vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px !important;
  }
  .el-dialog__footer { padding: 10px 14px 14px !important; }
  .el-dialog__footer .el-button { min-height: 38px; }

  .el-drawer { width: 92% !important; max-width: 480px; }
  .el-drawer__body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .el-message-box { width: 88% !important; max-width: 400px !important; }
  .el-message-box__content { padding: 14px 18px !important; }

  /* 弹层内的表单也按窄屏排版 */
  .el-dialog .el-form-item__label,
  .el-drawer .el-form-item__label,
  .el-message-box .el-form-item__label {
    float: none !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }
  .el-dialog .el-form-item__content,
  .el-drawer .el-form-item__content,
  .el-message-box .el-form-item__content {
    margin-left: 0 !important;
  }

  /* ---------- 4. 固定宽度表单元素（450px / 700px）不再被父级裁掉 ---------- */
  .el-form-item,
  .el-form-item__label,
  .el-form-item__content,
  .el-form-item__error,
  .form-item_tips,
  .form-item_tip,
  .form-item-tips,
  .tips-item {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .el-form-item__content > .el-input,
  .el-form-item__content > .el-input-group,
  .el-form-item__content > input,
  .el-form-item__content > textarea,
  .el-form-item__content > .el-textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  .form-item_tips,
  .form-item_tip,
  .form-item-tips {
    width: auto !important;
    white-space: normal !important;
    line-height: 1.6 !important;
  }

  /* ---------- 5. 文字型操作链接：点击区加大（原 16px 高，手指点不准） ---------- */
  a.yz-tap,
  button.yz-tap,
  span.yz-tap {
    display: inline-flex !important;
    align-items: center;
    min-height: 34px;
    padding-top: 3px;
    padding-bottom: 3px;
    box-sizing: border-box;
  }

  /* ---------- 6. 长页面「分区导航」（解决手机上找不到功能入口） ---------- */
  #yz-nav-ball {
    position: fixed;
    right: 14px;
    bottom: 218px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #2c3e50;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    z-index: 2058;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #yz-nav-ball:active { background: #1a252f; }

  #yz-nav-mask {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 2400;
  }

  #yz-nav-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-height: 64vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    z-index: 2401;
    padding-bottom: 8px;
  }
  #yz-nav-panel .yz-np-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #23303b;
    border-bottom: 1px solid #f0f2f5;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
  }
  #yz-nav-panel .yz-np-close {
    color: #909399;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
  }
  #yz-nav-panel .yz-np-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 15px;
    color: #303133;
    border-bottom: 1px solid #f7f8fa;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #yz-nav-panel .yz-np-item:active { background: #f5f7fa; }
  #yz-nav-panel .yz-np-sub {
    font-size: 12px;
    color: #b4bec8;
    margin-left: 8px;
    flex: none;
  }
  #yz-nav-panel .yz-np-empty {
    padding: 22px 16px;
    text-align: center;
    color: #909399;
    font-size: 14px;
  }
}


/* ==========================================================================
   十六、v1.5 追加 —— 筛选区折叠的 CSS 规则补齐
   问题：v1.4 把 JS 的 FILTER_SEL 扩到了 .el-form--inline / .total-head .inputs，
         实测 class="el-form--inline yz-collapsed" 已正确加上，
         但 CSS 里只写了 .form-list.yz-collapsed 的规则 → 折叠不生效。
   本段让 CSS 选择器与 adminResponsive.blade.php 的 FILTER_SEL 严格对齐。
   ========================================================================== */
@media (max-width: 991px) {

  /* ---------- 筛选区容器：统一过渡 ---------- */
  .form-list,
  .search-box,
  .filter-list,
  .screen-list,
  .yz-filter-form,
  .total-head .inputs,
  .total-head > .inputs,
  form.el-form--inline {
    transition: max-height .26s ease, opacity .2s ease;
    max-height: 4000px;
    overflow: hidden;
  }

  /* ---------- 折叠态 ---------- */
  .form-list.yz-collapsed,
  .search-box.yz-collapsed,
  .filter-list.yz-collapsed,
  .screen-list.yz-collapsed,
  .yz-filter-form.yz-collapsed,
  .total-head .inputs.yz-collapsed,
  .total-head > .inputs.yz-collapsed,
  form.el-form--inline.yz-collapsed {
    opacity: 0;
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* 折叠后里面的 el-row / el-form-item 也不要再撑高度 */
  .yz-collapsed .el-row,
  .yz-collapsed .el-form-item,
  .yz-collapsed .input-w {
    margin-bottom: 0 !important;
  }

  /* ---------- ElementUI 分页按钮点击区加大（实测 30x28 太小） ---------- */
  .el-pagination button,
  .el-pagination .btn-prev,
  .el-pagination .btn-next {
    min-width: 34px !important;
    height: 34px !important;
  }

  /* ---------- 底部固定分页条不遮挡内容末尾 ---------- */
  .vue-page {
    padding-bottom: 4px;
  }
  .content > .rightlist:last-child,
  .main-panel .content > *:last-child {
    padding-bottom: 70px;
  }
}


/* ==========================================================================
   十七、v1.6 追加 —— 表格「操作列」吸附右侧（治本：解决"找不到功能入口"）
   实测（会员列表 390px 视口）：
     表格 12 列共 1300px，「操作」列（含【详情】按钮）在最右侧
     → 用户必须横向滑到底才能看到 → "手机上看不到会员详情入口"
   策略由 JS 分级判定（见 adminResponsive.blade.php setupTables）：
     · 操作列宽 ≤ 150px → 整列 position:sticky 钉在右侧，始终可见
     · 操作列宽 >  150px → 不吸附（会占掉大半屏），改为可点击的横滑引导条
   ========================================================================== */
@media (max-width: 991px) {

  /* ---------- 操作列吸附 ---------- */
  .el-table.yz-pin-last .el-table__header th:last-child,
  .el-table.yz-pin-last .el-table__body td:last-child {
    position: sticky !important;
    right: 0 !important;
    background: #fff !important;
    box-shadow: -6px 0 10px -6px rgba(0, 0, 0, .22);
  }
  .el-table.yz-pin-last .el-table__header th:last-child { z-index: 4 !important; }
  .el-table.yz-pin-last .el-table__body td:last-child { z-index: 3 !important; }

  .el-table.yz-pin-last .el-table__row:hover td:last-child,
  .el-table.yz-pin-last .el-table__body tr.hover-row td:last-child {
    background: #f7f9fa !important;
  }
  .el-table.yz-pin-last .el-table__body tr.current-row td:last-child {
    background: #ecf5ff !important;
  }

  /* 吸附列里的按钮/链接紧凑一点，别把列撑太宽 */
  .el-table.yz-pin-last .el-table__body td:last-child .el-button,
  .el-table.yz-pin-last .el-table__body td:last-child a,
  .el-table.yz-pin-last .el-table__body td:last-child .el-link {
    padding-left: 3px !important;
    padding-right: 3px !important;
    margin-left: 0 !important;
    font-size: 13px !important;
  }
  .el-table.yz-pin-last .el-table__body td:last-child .cell {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* ---------- 横滑引导条（可点击版） ---------- */
  .yz-scroll-hint {
    text-align: center;
  }
  .yz-scroll-hint.yz-hint-jump {
    color: #29ba9c !important;
    font-weight: 500;
    padding: 9px 0 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .yz-scroll-hint.yz-hint-jump:active { opacity: .6; }
}


/* ==========================================================================
   十八、v1.7 追加 —— 抽屉/弹窗内「多列挤压」治本
   ★ 实测根因（会员详情抽屉，390px 视口）：
     .top-box.content 是 flex 行 + nowrap，里面三列：
        头像列(~63px) + .top-center 数据列(flex:1.5) + 功能菜单列(flex:1.8)
     三列 min-width:auto 无法收缩，总宽 ≈481px > 抽屉可用 319px
     → 功能菜单列被挤到 34px 宽、每个按钮 14x84（文字竖排成一条）
     → 按钮实际渲染在 x=448（视口只有 390）→ **完全在屏幕外**
     这就是欣哥反馈的「功能铵键等根本看不到 / 想充值找不到入口」。
   修法：抽屉内该三列改单列堆叠；数据列 3 个一行；功能菜单变横向按钮组。
   ========================================================================== */
@media (max-width: 991px) {

  /* ---------- 1. 抽屉/弹窗本体禁止横向滚动 ---------- */
  .el-drawer.rtl, .el-drawer.ltr, .el-drawer.ttb, .el-drawer.btt {
    overflow-x: hidden !important;
  }
  .el-drawer__body, .el-dialog__body { overflow-x: hidden !important; }

  /* ---------- 2. 会员详情抽屉顶部：三列 → 单列堆叠 ---------- */
  .el-drawer .top-box.content {
    flex-wrap: wrap !important;
  }
  .el-drawer .top-box.content > div,
  .el-drawer .top-box.content > .top-center {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ---------- 3. 顶部数据条：每行 3 个（积分/订单总额/余额/订单总量/优惠券/收入总额） ---------- */
  .el-drawer .top-center { flex-wrap: wrap !important; }
  .el-drawer .top-center > div { flex-wrap: wrap !important; width: 100% !important; }
  .el-drawer .top-center > div > div {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    min-width: 0 !important;
  }

  /* ---------- 4. 功能菜单：竖排一条 → 横向按钮组 ----------
     支付密码 / 充值积分 / 充值余额 / 登录密码 / 优惠券明细 /
     会员订单 / 余额明细 / 积分明细 / 收入明细 / 提现记录 / 海报分享记录 */
  .el-drawer .top-box.content > div:last-child > div {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .el-drawer .top-box.content > div:last-child > div > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    min-height: 34px;
    padding: 0 2px;
    font-size: 14px;
  }

  /* ---------- 5. 通用兜底：JS 标记的越界 flex 行 ---------- */
  .yz-wrap-row { flex-wrap: wrap !important; }
  .yz-wrap-row > * { min-width: 0 !important; }
  .yz-wrap-row-strong { flex-wrap: wrap !important; }
  .yz-wrap-row-strong > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* ==========================================================================
   十九、v1.8 修正 —— 干掉 v1.7 顺带撑宽的「装饰分隔线」
   ★ 自查发现：会员详情抽屉 .top-center 里有两根桌面用的竖线分隔条
       <div style="width: 2px; background: #BABABA; height: 40px;"></div>
     v1.7 的 `.el-drawer .top-center > div { width: 100% }` 把它们从 2px
     撑成 307x40 的纯灰色横条（截图里两道灰杠就是这么来的）。
     处理：这类纯装饰细线在手机上直接隐藏（零信息量）。
   ========================================================================== */
@media (max-width: 991px) {

  /* 2px 宽 + 40px 高的装饰竖线 → 隐藏 */
  .el-drawer [style*="width: 2px"][style*="height: 40px"],
  .el-drawer [style*="width:2px"][style*="height:40px"],
  .el-dialog [style*="width: 2px"][style*="height: 40px"],
  .el-dialog [style*="width:2px"][style*="height:40px"] {
    display: none !important;
  }

  /* 兜底：抽屉/弹窗内任何 inline 声明 width:2px 的细线，锁死宽度不被撑开
     （提高特异度到 3 个 class，压过 v1.7 的 `.el-drawer .top-center > div`） */
  .el-drawer .top-center [style*="width: 2px"],
  .el-drawer .top-center [style*="width:2px"],
  .el-drawer .top-box [style*="width: 2px"],
  .el-drawer .top-box [style*="width:2px"] {
    flex: 0 0 2px !important;
    width: 2px !important;
    max-width: 2px !important;
    min-width: 0 !important;
  }
}


/* ==========================================================================
   二十、v1.10 修正 —— 撤销 v1.7 给「可换行行」子项的 min-width:0
   ★ 自查发现（订单列表卡片 390px）：
     v1.7 的 `.yz-wrap-row > * { min-width: 0 }` 会**强行把 flex 子项压到
     内容宽度以下**，导致里面的 nowrap 文字互相压在一起。
     实测订单卡片出现 5 处文字重叠（线上现状是 0 处）：
        实付：5960.00  ×  微信用户      （重叠 31px）
        微信用户       ×  未支付        （11px）
        商品小计        ×  确认支付      （23px）
        运费：￥0.00   ×  待付款        （42px）
        应付款          ×  待付款        （42px）
   正确思路：这类「左边信息 + 右边操作」的行，应该让子项 **换行** 而不是
   **被压缩**。所以只保留 flex-wrap:wrap，把 min-width 还原成 auto
   （auto = 不允许被压到内容宽度以下 → 放不下就自动换到下一行）。
   压缩型（子项整行 100%）的兜底只留给 `.yz-wrap-row-strong`。
   ========================================================================== */
@media (max-width: 991px) {

  .yz-wrap-row > * {
    min-width: auto !important;
  }

  /* 换行后仍越界的行，升级为「每项独占一行」——这才是真正安全的兜底 */
  .yz-wrap-row-strong > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   二十一、v1.12 —— 复杂卡片改「横向滑动」而非「换行」
   实测（订单列表卡片 390px）：结构复杂、内部写死宽度的卡片一旦被强制
   flex-wrap:wrap，会出现 11 处文字重叠（微信用户 × 未支付 等）。
   隔离验证：去掉换行标记 → 重叠 0；加回来 → 重叠 11。
   所以整页内容区对这类「宽块卡片」只加横向滑动，完全不改内部布局。
   ========================================================================== */
@media (max-width: 991px) {
  .yz-scroll-x {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
  }
  /* 让用户知道这一块能左右滑 */
  .yz-scroll-x::-webkit-scrollbar { height: 4px; }
  .yz-scroll-x::-webkit-scrollbar-thumb { background: #c8c8c8; border-radius: 2px; }
}


/* ==========================================================================
   手机端顶栏：恢复「用户信息 + 退出系统」（2026-09-23 修复）
   —— 芸众原版在 ≤991px 把 .navbar-right 整块 display:none，
      导致手机上既看不到账号头像，也找不到「退出系统」，退不出去。
      这里只把原 DOM 放出来（零新增元素、零新增接口、零新页面），
      点一下头像就是原版那个下拉：切换平台 / 个人信息 / 更新缓存 / 更新授权 / 退出系统。
   ========================================================================== */
@media (max-width: 991px) {
  /* 固定顶栏回到视口顶部：窄屏下 .wrapper 从 y=50 起（给顶栏预留的位置），
     而 .navbar 是 position:fixed 且没设 top，会沿用「文档流原位」被画到 y=50，
     于是顶栏上方空出一条 50px 白带。设 top:0 后顶栏正好压住那块预留区。 */
  .yz-menu-header nav.navbar,
  .yz-menu-header .navbar.navbar-absolute {
    top: 0 !important;
  }
  .yz-menu-header .navbar-right {
    display: flex !important;
    align-items: center;
    height: 50px;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  /* 手机上放不下的大搜索框和快捷入口收起来 */
  .yz-menu-header .navbar-right .menu-search-pane { display: none !important; }
  .yz-menu-header .navbar-right > .nav-op { display: none !important; }
  /* 下载 / AI 图标也收起，保留消息铃铛 */
  .yz-menu-header .navbar-right > div:nth-child(3) > i.iconfont,
  .yz-menu-header .navbar-right > div:nth-child(3) > img.ai-icon { display: none !important; }
  .yz-menu-header .navbar-right .member-pane {
    display: flex !important;
    align-items: center;
    padding: 0 10px;
  }
  .yz-menu-header .navbar-right .member-box { display: block !important; text-align: right; line-height: 1.25; }
  .yz-menu-header .navbar-right .member-box > div { color: #fff; font-size: 12px; }
  .yz-menu-header .navbar-right .member_head {
    width: 32px !important; height: 32px !important;
    border-radius: 50%; margin-left: 8px; display: block !important;
  }
  /* 左侧「全部应用 + 插件列表」允许收缩，不再把右侧挤出去 */
  #plugin_section { min-width: 0 !important; overflow: hidden !important; }
}

@media (max-width: 991px) {

  /* 背景固定会让手机端滚动时闪，改成跟随滚动 */
  .all { background-attachment: scroll !important; }

  /* 顶部「总驾驶舱 / 订单视角 / …」：一行横滑，不再写死 786px */
  .all #app .top-pane {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: stretch !important;
    padding-top: 14px !important;
  }
  .all #app .top-pane .tab-lan {
    width: auto !important;
    min-width: max-content !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    margin: 0 !important;
    column-gap: 26px;
  }
  .all #app .top-pane .tabs-name,
  .all #app .top-pane .active-tabs-name {
    font-size: 15px !important;
    white-space: nowrap;
  }

  /* 原来是 3 列 / 2 列并排的卡片行 → 改成竖着排 */
  .all #app div:has(> .left-turnover-box),
  .all #app div:has(> .oder-analysis),
  .all #app div:has(> .plugin-left),
  .all #app div:has(> .member-box),
  .all #app .bottom-pane { display: block !important; }

  /* 每张卡片占满整宽 */
  .all #app .left-turnover-box,
  .all #app .map-box,
  .all #app .turnover-analysis-right,
  .all #app .oder-analysis,
  .all #app .member-box,
  .all #app .plugin-left,
  .all #app .qr-right {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }

  /* 中国地图：原版写死 700×500，手机上撑满并压扁 */
  .all #app .map-box #chinaMap { width: 100% !important; }   /* 先只改宽度，高度留给原版 */

  /* 卡片里并排的两个小数字卡：仍保持一行两个 */
  .all #app .order-list { display: flex !important; }
  .all #app .order-num { width: 48% !important; min-width: 0 !important; }
}

/* ==========================================================================
   概况（数据大屏）补充：卡片标题不再被下拉框挤成竖排（2026-09-23）
   —— 「订单分析」「会员分析」标题原本被压成 20px 宽、一字一行，这里让它不收缩、不换行
   ========================================================================== */
@media (max-width: 991px) {
  .all #app .oder-analysis > div:first-child > span,
  .all #app .member-box > div:first-child > span {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  /* 卡片顶部那一行允许换行，避免左右两块互相挤 */
  .all #app .oder-analysis > div:first-child,
  .all #app .member-box > div:first-child { flex-wrap: wrap !important; }
}

/* ==========================================================================
   概况（数据大屏）补充 2：卡片行里「没有类名」的子卡片也要占满整宽（2026-09-23）
   —— 第二行第三张卡（原 25% 宽）在源码里没有 class，只写在内联 style 上，
      单靠类名选不到，会残留 88px 宽的挤压条。这里按结构把整行的子项都摊开。
   ========================================================================== */
@media (max-width: 991px) {
  .all #app div:has(> .left-turnover-box) > *,
  .all #app div:has(> .oder-analysis) > *,
  .all #app div:has(> .plugin-left) > *,
  .all #app .bottom-pane > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px 0 !important;
  }
}

/* ====== 2026-09-23 v1.7 追加：列表页卡片化 ====== */
@media (max-width: 991px) {
/* ==========================================================================
   9. ★★ 列表页「表格 → 卡片 + 点展开」（v1.7 · 2026-09-23）
   ⚠️ 两条踩坑记录（都实测过，别再犯）：
     ① 作用域**不要**用 `.all #app` 前缀 —— 实测商品列表页身上没有 `.all`
        （只有概况大屏有），带前缀整段 CSS 会静默失效。
     ② 分组规则必须写成 `.el-table.yz-cards tr.el-table__row > td[data-yz-g=…]`。
        基础规则 `.el-table.yz-cards tr.el-table__row > td`（display:block）权重是
        (0,3,2)，比 `.el-table.yz-cards td[attr]`（0,3,1）还高 → 会反过来压掉 display:grid，
        表现是「字段名和值被拆成两行居中显示」。少算一个类就会踩。
   用户反馈：「商品列表这种形式不行，还要左右移动才能找到想看的，
             能不能每个列表点展开来做」
   → 每行变一张卡片：默认只留「选择/图片/名称」+ 最多 3 个关键字段，
     其余字段收进「展开全部字段」，展开后按 字段名：值 逐行列出（原控件照旧可用）。
     表头隐藏（每个值自带字段名了），整页不再需要横滑。
   生效前提：由 JS 给 table 加 .yz-cards、给 td 加 data-yz-g 分组（见 blade 第 5f 节）
   ========================================================================== */

.el-table.yz-cards { overflow: visible !important; }

/* 表头不再需要（每个字段自带名字）；固定列副本（如有）也藏掉，主表里有同样内容 */
.el-table.yz-cards .el-table__header-wrapper,
.el-table.yz-cards .el-table__fixed,
.el-table.yz-cards .el-table__fixed-right { display: none !important; }

.el-table.yz-cards .el-table__body-wrapper {
  overflow: visible !important; width: 100% !important;
  height: auto !important; max-height: none !important;
}
.el-table.yz-cards table.el-table__body {
  display: block !important; width: 100% !important; min-width: 0 !important;
  table-layout: auto !important;
}
.el-table.yz-cards colgroup,
.el-table.yz-cards col { display: none !important; }
.el-table.yz-cards tbody { display: block !important; }

/* ---------------- 一行 = 一张卡片 ---------------- */
.el-table.yz-cards tr.el-table__row {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start; column-gap: 0;
  background: #fff !important;
  border: 1px solid #e7eaee; border-radius: 10px;
  margin: 0 0 11px !important; padding: 11px 12px 9px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.el-table.yz-cards tr.el-table__row:hover,
.el-table.yz-cards tr.el-table__row.hover-row { background: #fff !important; }

/* 单元格全部还原成普通块（分组规则写在下面，权重更高） */
.el-table.yz-cards tr.el-table__row > td {
  display: block !important; width: auto !important; min-width: 0 !important;
  border: 0 !important; padding: 0 !important; margin: 0;
  position: static !important; background: transparent !important;
  text-align: left !important; white-space: normal !important;
  font-size: 13px; line-height: 1.7; color: #333;
}
.el-table.yz-cards tr.el-table__row > td .cell {
  display: block !important; padding: 0 !important; margin: 0 !important;
  white-space: normal !important; overflow: visible !important;
  text-overflow: clip !important; text-align: inherit !important;
  line-height: inherit; word-break: break-word;
}
.el-table.yz-cards tr.el-table__row > td .cell > * { max-width: 100%; }

/* ---------------- 卡片头部：选择 / 图片 / 名称 ---------------- */
.el-table.yz-cards tr.el-table__row > td[data-yz-g="sel"] {
  grid-column: 1; grid-row: 1; min-width: 30px !important;
  padding-top: 5px !important; text-align: center !important;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="img"] { grid-column: 2; grid-row: 1; margin-right: 9px; }
.el-table.yz-cards tr.el-table__row > td[data-yz-g="img"] img {
  width: 56px !important; height: 56px !important; border-radius: 8px;
  object-fit: cover; display: block;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="title"] {
  grid-column: 3; grid-row: 1;
  font-size: 15px !important; font-weight: 600; color: #1f2329 !important; line-height: 1.4;
  display: -webkit-box !important;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.el-table.yz-cards tr.el-table__row.yz-open > td[data-yz-g="title"] { -webkit-line-clamp: 99; }
/* 名称列里自带头像的（会员列表那种「头像+名字+手机」）→ 头像缩成圆形小图 */
.el-table.yz-cards tr.el-table__row > td[data-yz-g="title"] img {
  float: left; width: 46px !important; height: 46px !important; border-radius: 50%;
  margin: 1px 9px 4px 0; object-fit: cover;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="title"] .cell br { display: none; }
.el-table.yz-cards tr.el-table__row > td[data-yz-g="title"] .el-button,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="title"] i { margin-left: 4px; }

/* ---------------- 字段行：字段名 + 值（两列，同一行） ---------------- */
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"],
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: 5.4em minmax(0, 1fr);
  align-items: center; column-gap: 6px; text-align: left !important;
  padding-top: 1px !important;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"]::before,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"]::before {
  content: attr(data-yz-label);
  color: #8c939d; font-size: 12px; font-weight: 400; line-height: 1.7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 收起的字段 */
.el-table.yz-cards tr.yz-card:not(.yz-open) > td[data-yz-g="more"] { display: none !important; }
/* 空字段不显示（省得刷一屏空白行） */
.el-table.yz-cards tr.el-table__row > td[data-yz-empty="1"] { display: none !important; }
/* 字段值里的彩色标签/徽章（「积分：xxx」「余额：xxx」「总店」这种）压小 + 横排，
   否则一个字段占掉两整行（实测会员列表）。
   做法：值区改成可换行的 flex 行 → 多个徽章自动并排、放不下才换行。 */
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] .cell,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] .cell {
  display: flex !important; flex-wrap: wrap; align-items: center;
  column-gap: 6px; row-gap: 2px; font-size: 12px; line-height: 1.75;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] .cell > *,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] .cell > * {
  margin: 0 !important; max-width: 100%;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] .cell > .item,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] .cell > .item,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] .cell > span,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] .cell > span {
  display: inline-block !important;
  margin: 1px 0 !important; padding: 1px 7px !important;
  border-radius: 4px; font-size: 12px !important; line-height: 1.6 !important;
  max-width: 100%;
}
/* 字段里的行内编辑控件 */
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] input,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] input {
  width: auto !important; min-width: 60px; max-width: 100%; height: 26px; padding: 0 6px;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] .el-button,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] .el-button { margin: 2px 4px 2px 0 !important; }
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] .el-switch,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] .el-switch { transform: scale(.9); transform-origin: left center; }
.el-table.yz-cards tr.el-table__row > td[data-yz-g="meta"] .el-checkbox,
.el-table.yz-cards tr.el-table__row > td[data-yz-g="more"] .el-checkbox { margin-right: 10px; }

/* ---------------- 操作区（始终可见，常用操作不用先展开） ---------------- */
.el-table.yz-cards tr.el-table__row > td[data-yz-g="act"] {
  grid-column: 1 / -1;
  margin-top: 8px; padding-top: 8px !important;
  border-top: 1px dashed #eef0f3 !important;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="act"] .cell {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
.el-table.yz-cards tr.el-table__row > td[data-yz-g="act"] .el-button { margin: 0 !important; }
/* 操作列里的勾选类小项（新品/热卖/推荐/促销…）收起时先不显示，展开才出现 */
.el-table.yz-cards tr.yz-card:not(.yz-open) > td[data-yz-g="act"] .el-checkbox { display: none !important; }

/* ---------------- 「展开全部字段」开关 ---------------- */
.el-table.yz-cards .yz-card-toggle {
  grid-column: 1 / -1;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed #eef0f3;
  text-align: center; font-size: 13px; color: #3a7afe;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.el-table.yz-cards .yz-card-toggle .yz-ct-arrow {
  display: inline-block; margin-left: 5px; font-size: 11px; transition: transform .2s;
}
.el-table.yz-cards tr.yz-open .yz-card-toggle .yz-ct-arrow { transform: rotate(180deg); }
.el-table.yz-cards tr.yz-open .yz-card-toggle { color: #8c939d; }
.el-table.yz-cards .yz-card-toggle:active { opacity: .6; }

/* 卡片模式下不再需要"左右滑动查看"引导条 */
.el-table.yz-cards .yz-scroll-hint { display: none !important; }
}

/* ==========================================================================
   10. ★★ 顶栏「全部应用」入口 + 全部应用抽屉（drawer_dialog）手机端适配
   （v1.8 · 2026-09-24）
   用户反馈：「手机端没有看到全部应用，哪怕用留一个图标，让应用有下接出来」
   ── 现状（实测）：PC 端入口在侧栏顶部（.nav-top，screenWidth>=991），点开抽屉；
      手机端同一位置的 nav-top 是「开侧栏」（screenWidth<991）—— 手机端抽屉没有入口；
      而顶栏里的 .application-pane（全部应用图标）被 #plugin_section 的
      flex:1 1 0% + overflow:hidden 压到 35px，图标只露 12px、文字全被裁。
   ── 改法（只调样式，不新增元素/页面/接口）：
      ① 顶栏留出「全部应用」图标（48px 点击区，只显图标不显文字）
      ② 抽屉全屏 + 竖向堆叠 + 应用列表单列（原版 .center-box 宽 calc(100% - 350px)，
         在 390 屏只剩 29px，文字会一字一行竖排）
   ⚠️ 两条踩坑记录（都实测过，别再犯）：
      ① 抽屉内部规则**必须**带 .drawer-bg 前缀 —— .side-navigation / .side-list
         与侧栏同名，不带前缀会把侧栏一起改掉。
      ② .center-box 原版带 margin: 20px 30px，改成 width:100%后总宽 450px 溢出，
         会把同级 .side-navigation / .fixed-side 一起拖偏 15px（x=-15）。必须同时 margin: 0。
   ========================================================================== */

@media (max-width: 991px) {
  /* ---------- ① 顶栏腾位 + 「全部应用」只留图标 ---------- */
  .yz-menu-header nav.navbar > .nav-top.yz-menu { margin: 0 6px 0 10px !important; }
  #plugin_section {
    flex: 0 0 48px !important; min-width: 48px !important;
    width: 48px !important; max-width: 48px !important;
  }
  #plugin_section .application-pane {
    width: 48px !important; height: 50px !important;
    padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  #plugin_section .application-pane > span { display: none !important; }
  #plugin_section .application-pane .icon-img {
    width: 22px !important; height: 22px !important; margin: 0 !important; display: block !important;
  }
  /* 后面的插件名列表在手机上收起（不占位） */
  #plugin_section > div:last-child { display: none !important; }

  /* ---------- ② 全部应用抽屉：全屏 + 竖向堆叠 ---------- */
  .drawer-bg .el-drawer { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .drawer-bg .el-drawer__body { padding: 0 !important; overflow: visible !important; }
  .drawer-bg .drawer-pane {
    flex-direction: column !important; width: 100% !important;
    height: calc(100vh - 50px) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 「全部应用 / 最近访问页面」两个 tab → 顶部横排并吸顶 */
  .drawer-bg .side-navigation {
    min-width: 0 !important; width: 100% !important; max-width: 100% !important;
    height: auto !important; display: flex !important; flex-direction: row !important;
    overflow: visible !important;
    position: -webkit-sticky !important; position: sticky !important;
    top: 0 !important; z-index: 6 !important;
  }
  .drawer-bg .side-navigation .side-list {
    flex: 1 1 0 !important; padding: 14px 8px !important; justify-content: center !important;
  }
  .drawer-bg .side-navigation .side-list .icon-icon_more11 { display: none !important; }
  /* 中间内容区自适应（原版 calc(100% - 350px) 在手机上只剩 29px） */
  .drawer-bg .center-box {
    width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important;
    margin: 0 !important; padding: 12px 14px 0 !important; box-sizing: border-box !important;
  }
  .drawer-bg .search-content-box {
    height: auto !important; max-height: none !important;
    overflow: visible !important; margin-top: 18px !important;
  }
  .drawer-bg .center-box .column-container {
    column-count: 1 !important; column-gap: 0 !important; width: 100% !important;
  }
  .drawer-bg .search-content-box .item { margin-bottom: 16px !important; }
  .drawer-bg .classy-vox { margin-bottom: 8px !important; }
  .drawer-bg .recently-visited { margin-top: 18px !important; }
  /* 右侧固定栏 → 挪到内容末尾 */
  .drawer-bg .fixed-side {
    width: 100% !important; max-width: 100% !important; margin-top: 0 !important;
    padding: 0 14px 28px !important; box-sizing: border-box !important;
  }
  /* 关闭按钮固定在 tab 条右侧（不压顶栏账号区） */
  .drawer-bg .fixed-side .icon-guanbi-li {
    position: fixed !important; top: 58px !important; right: 10px !important;
    z-index: 7 !important; margin: 0 !important; padding: 8px !important;
  }
  .drawer-bg .fixed-side .icon-guanbi-li .icon-guanbi { font-size: 16px !important; color: #fff !important; }
  /* 「最近访问页面」 tab */
  .drawer-bg .current-history {
    width: 100% !important; max-width: 100% !important;
    padding: 16px 14px !important; box-sizing: border-box !important;
  }
  .drawer-bg .history-list { height: auto !important; max-height: none !important; }
}

/* ── 补充：手机端顶栏提到侧栏之上（v1.8.1 · 2026-09-24）
   实测发现：侧栏展开后顶栏左上角的应用侧栏开关（.nav-top.yz-menu）被
   #sidebar_section（z-index 2050）盖住 —— elementFromPoint(10,15) 返回 SECTION.sidebar，
   点不到！点二级栏空白也无响应 → 侧栏展开后无法关闭（只能点菜单项跳转）。
   修法：顶栏 z-index 1221 → 2060（> 侧栏 2050）。侧栏顶部 50px 本就是空白
   （sidebar-wrapper 的 padding-top），所以视觉上零变化。
   🔴 别用 .sidebar 选择器（同时命中 .sidebar2），这里写的是 .yz-menu-header。 */
@media (max-width: 991px) {
  /* ⚠️ .yz-menu-header 本身是 static（无 position）→ 在它上写 z-index 无效（试过，侧栏照样盖住）。
     真正 fixed 的是里面的 nav.navbar（见上方「top:0 那条），必须写在它上。 */
  .yz-menu-header nav.navbar,
  .yz-menu-header .navbar.navbar-absolute {
    z-index: 2060 !important;
  }
}

/* ==========================================================================
   2026-09-24 v1.9 —— 顶栏图标对齐 + 概况页各视角手机端堆叠（第十四轮）
   根因①：「三条杠」容器 .nav-top.yz-menu 带 top:15px + 高 50px，视觉中心落在 40；
          「全部应用」是 0/50 中心 25 → 两个图标差 15px，肉眼一看就歪。
   根因②：概况页 5 个视角 tab 共 428px > 可用 350px → 「财务视角」被挤出屏。
   根因③：概况页 tab2~5 的行容器仍是横向并排（内联 display:flex），
          且 .goods-data/.order_rank/.rank_box/.product-review/.order_view_analysis
          原生 width:25%、financial_list 内 4 卡 24.5% 都是百分比 → 实测溢出到 808px。
   作用域一律 .all #app（仅概况页有 .all），电脑端零影响。
   ========================================================================== */
@media (max-width: 991px) {

  /* ---- ① 顶栏：三条杠归位到与「全部应用」同一垂直中心（都是 25px） ---- */
  .yz-menu-header .nav-top.yz-menu {
    top: 0 !important;
    left: 0 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 50px !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  /* !! 这里绝对不要给 i 写 display —— 汉堡里是两个图标由 v-show 控制
     （icon-gengdufenlei / icon-guanbi），一旦写 display 就会压掉 v-show 的
     内联 display:none，「三条杠」和「叉」会同时显示（v1.9.1 已修此回归）。 */
  .yz-menu-header .nav-top.yz-menu i {
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .yz-menu-header #plugin_section {
    height: 50px !important;
    align-items: center !important;
  }
  .yz-menu-header #plugin_section .application-pane {
    height: 50px !important;
    line-height: 1 !important;
  }

  /* ---- ② 概况页：5 个视角 tab 挤进一屏（原来 428px 溢出，财务视角看不见） ---- */
  .all #app .top-pane .tab-lan {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    column-gap: 0 !important;
    padding: 0 14px !important;
  }
  .all #app .top-pane .tabs-name,
  .all #app .top-pane .active-tabs-name {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* ---- ③ 概况页：各视角内容行 → 竖向堆叠 + 子块铺满 ---- */
  .all #app div:has(> .goods-data),
  .all #app div:has(> .goods-in-num),
  .all #app div:has(> .rank_box),
  .all #app div:has(> .order_rank),
  .all #app div:has(> .product-review),
  .all #app div:has(> .order_view_analysis),
  .all #app div:has(> .oder-analysis),
  .all #app div:has(> .member-box),
  .all #app div:has(> .map-box),
  .all #app div:has(> .left-turnover-box),
  .all #app div:has(> .turnover-analysis-right),
  .all #app div:has(> div[style*="width: 24.5%"]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .all #app .goods-data,
  .all #app .goods-in-num,
  .all #app .rank_box,
  .all #app .order_rank,
  .all #app .product-review,
  .all #app .order_view_analysis,
  .all #app div[style*="width: 24.5%"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 商品视角「商品总数」装饰层是固定 450×450，屏内会顶出去 → 等比收进容器 */
  .all #app div[style*="width: 450px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}

/* ==========================================================================
   2026-09-24 v1.9.1 —— 第十四轮补丁（顶栏回归修复 + 概况页残余溢出）
   (a) v1.9 给汉堡 <i> 加的 display:block!important 压掉了 v-show 的 display:none，
       导致「三条杠」与「叉」同时出现 → 去掉 display，只留字号。
   (b) 商品视角 #good_pie（echarts 环形图）是 500×500 固定尺寸 + absolute，
       顶到 r=525 出屏 → 收进容器、等比缩放。
   (c) 财务/会员统计里的 30% 小卡片是 content-box，3 个 + 24px padding 就撑破 350
       容器（实测第 3 个 x=363 r=427）→ box-sizing:border-box + 行允许换行。
   ========================================================================== */
@media (max-width: 991px) {

  /* (a) v-show 的 display:none 必须放行：只调字号，不碰 display */
  .yz-menu-header .nav-top.yz-menu i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* (b) 商品视角环形图容器 + 内部 echarts 层，全部收进容器 */
  .all #app #good_pie {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto !important;
  }
  .all #app #good_pie > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }
  .all #app #good_pie canvas {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* (c) 概况页内联百分比宽度的卡片统一按 border-box 算，并允许所在行换行 */
  .all #app .member-box div[style*="display: flex"][style*="justify-content: space-between"],
  .all #app .oder-analysis div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }
  .all #app div[style*="width: 30%"],
  .all #app div[style*="width: 25%"],
  .all #app div[style*="width: 24.5%"],
  .all #app div[style*="width: 48%"],
  .all #app div[style*="width: 49%"] {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   2026-09-24 v1.9.2 —— 第十四轮补丁 2：财务/会员数据统计的 30% 小卡片溢出
   原版那一排「收入笔数 / 支出笔数 / 收入金额」：
     行容器 = div[style="display:flex;margin: 16px 0;"]  ← 注意没有 justify-content
     子卡片 = width:30%; padding:18px 12px(content-box); margin-right:20px
   实际占用 3 x (105 + 24 + 20) = 447px > 350px 容器 → 第 3 张被顶到 x=364，右边 37px 出屏。
   v1.9.1 那条选择器带 [style*="justify-content: space-between"]，这行不匹配 → 漏网。
   修法：按「直接子元素里有 30% 卡片」锁定行容器，子卡改 flex 均分 + border-box。
   ========================================================================== */
@media (max-width: 991px) {
  .all #app div:has(> div[style*="width: 30%"]) {
    flex-wrap: wrap !important;
  }
  .all #app div:has(> div[style*="width: 30%"]) > div[style*="width: 30%"] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-right: 12px !important;
  }
  .all #app div:has(> div[style*="width: 30%"]) > div[style*="width: 30%"]:last-child {
    margin-right: 0 !important;
  }
}


/* ==========================================================================
   2026-09-24 v2.0 —— 第十五轮 A：订单列表（order.shop-order-list.index）手机端重排
   原版 shop-list.blade.php 的 .list-con 是 6 列横向 flex：
     商品区(flex:3;min-width:400px) + 会员 + 支付方式(min-w:90) + 金额(min-w:120)
     + 状态(min-w:120) + 操作(min-w:80)  →  min-width 合计 930px
   手机容器只有 350px → 实测状态列落在 x=564（屏幕外），用户"列表里看不到状态"；
   卡片头部右侧「关闭订单」按钮区(min-width:150px)同样被顶出屏（只露一个"关"字）。
   纯 CSS 重排，不动 HTML：
     ① 头部允许换行，按钮区独占一行
     ② .list-con 改竖向堆叠，各列 min-width 归零
     ③ 状态列（第 5 个 .list-con-member-info，绿色 [[item.status_name]]）
        用 order:-1 提到卡片最前，并做成绿底白字徽标
     ④ 商品行价格列换行到下一行，不再被切
   ⚠️ 状态列用 :nth-of-type(5) 定位 —— 若官方更新改了列序，此选择器要跟着改。
   ========================================================================== */
@media (max-width: 991px) {
  /* ① 卡片头部 */
  #app .vue-main .list-info {
    flex-wrap: wrap !important;
  }
  #app .vue-main .list-info > div[style*="min-width:150px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    margin-top: 4px !important;
  }
  /* ② 主体 6 列 -> 竖排 */
  #app .vue-main .list-con {
    flex-direction: column !important;
  }
  #app .vue-main .list-con > div:not(.list-con-member-info) {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #app .vue-main .list-con > .list-con-member-info {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
    padding: 6px 10px !important;
    text-align: left !important;
  }
  /* ③ 状态列提到最前 + 绿色徽标 */
  #app .vue-main .list-con > .list-con-member-info:nth-of-type(5) {
    order: -1 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    border-top: 0 !important;
    padding: 10px 10px 2px !important;
  }
  #app .vue-main .list-con > .list-con-member-info:nth-of-type(5) > div {
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  #app .vue-main .list-con > .list-con-member-info:nth-of-type(5) > div > div {
    display: inline-block !important;
    background: #29BA9C !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    line-height: 22px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  /* ④ 商品行：图 + 名一行，价格换行到下一行 */
  #app .vue-main .list-con-goods {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
  }
  #app .vue-main .list-con-goods-text {
    min-width: 0 !important;
  }
  #app .vue-main .list-con-goods-price {
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 0 0 !important;
    border: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  #app .vue-main .list-con-goods-price > div {
    margin-right: 16px !important;
  }
  /* 会员信息内层那圈 min-width:70% 的居中留白也去掉 */
  #app .vue-main .list-con-member-info > div[style*="min-width:70%"] {
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   2026-09-24 v2.1 —— 第十五轮 B：概况页固定高度卡片 + 30% 小卡
   (1) 概况页 10 个组件把统计卡高度写死 480px（440px 有 3 个）。
       手机端卡片宽度只有 350、文字换行后内容实际需要 531~551px，
       超出部分 overflow:visible 直接压在下一区块上 → 用户看到"错位"。
       实测：order_data_analysis 卡 ch=480 / sh=551，member-box ch=480 / sh=531。
       修法：height:auto + min-height 保底（内容少时布局与原来一致，内容多时自动撑开）。
   (2) 「收入笔数…」那排小卡是 width:30% + margin-right:20px，
       手机端 5 张挤一行（每张仅 ~60px）→ 文字换行重叠成一团。
       修法：每行 2 张（flex:1 1 calc(50% - 10px) + gap），高度自适应。
   (3) 上面放开高度后，图表容器 height:calc(100% - 90px) 失去基准会塌成 0，
       统一给个 200px 保底，保证 echarts 仍可见。
   ========================================================================== */
@media (max-width: 991px) {
  /* (1) 固定高度统计卡放开 */
  .all #app div[style*="height: 480px"] {
    height: auto !important;
    min-height: 480px !important;
  }
  .all #app div[style*="height: 440px"] {
    height: auto !important;
    min-height: 440px !important;
  }
  /* (2) 30% 小卡每行 2 张（覆盖 v1.9.2 的 flex:1 1 0 挤一行） */
  .all #app div:has(> div[style*="width: 30%"]) {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .all #app div:has(> div[style*="width: 30%"]) > div[style*="width: 30%"] {
    flex: 1 1 calc(50% - 10px) !important;
    width: auto !important;
    max-width: calc(50% - 10px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 76px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  /* (3) 图表容器保底高度 */
  .all #app div[style*="height: calc(100%"] {
    height: auto !important;
    min-height: 200px !important;
  }
}