/* ============ 基础 ============ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;background:#f4f6fa;color:#1c2434;font-size:14px;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hide{display:none!important}

/* ============ 登录 / 注册 ============ */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;background:linear-gradient(135deg,#eef4ff 0%,#f7f9fc 55%,#eef7f3 100%)}
.auth-card{width:100%;max-width:880px;background:#fff;border-radius:16px;overflow:hidden;display:flex;box-shadow:0 20px 60px rgba(28,45,80,.13);border:1px solid #e3e8f0}
.auth-side{width:330px;flex:0 0 330px;background:linear-gradient(150deg,#2563eb,#3f7ff0 45%,#4f9cf9);color:#fff;padding:36px 30px;display:flex;flex-direction:column;justify-content:space-between}
.auth-side .lg{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;margin-bottom:18px}
.auth-side h2{font-size:21px;font-weight:650;line-height:1.4;margin-bottom:10px}
.auth-side p{font-size:13px;line-height:1.85;color:#d9e6fd}
.auth-side ul{list-style:none;margin-top:20px}
.auth-side li{font-size:12.5px;color:#e3edfe;padding:5px 0 5px 20px;position:relative}
.auth-side li:before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7)}
.auth-side .ft{font-size:11.5px;color:#c3d8fb;line-height:1.7}
.auth-body{flex:1;padding:34px 34px 28px;min-width:0}
.auth-body h3{font-size:18px;font-weight:650;margin-bottom:6px}
.auth-body .desc{font-size:12.5px;color:#8b98ab;margin-bottom:22px;line-height:1.6}
.auth-tabs{display:flex;gap:6px;background:#f2f5fa;padding:4px;border-radius:9px;margin-bottom:20px}
.auth-tabs div{flex:1;text-align:center;padding:7px 0;border-radius:7px;font-size:13px;color:#5b6b83;cursor:pointer;user-select:none}
.auth-tabs div.on{background:#fff;color:#2563eb;font-weight:600;box-shadow:0 1px 3px rgba(28,45,80,.09)}
.code-row{display:flex;gap:8px}
.code-row input{flex:1}
.code-row .btn{flex:0 0 auto;min-width:112px;justify-content:center}
.auth-alt{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:#b3bdcc;font-size:12px}
.auth-alt:before,.auth-alt:after{content:"";height:1px;background:#e8edf4;flex:1}
.btn-wx{width:100%;justify-content:center;padding:10px;font-size:13.5px;color:#0f9d58;border-color:#c9e8d7;background:#f6fdf9}
.btn-wx:hover{background:#eefaf3;border-color:#a8dcc1}
.auth-tip{font-size:11.5px;color:#a3aebd;line-height:1.7;margin-top:14px;text-align:center}
.err{color:#e5484d;font-size:12px;margin-top:7px;min-height:16px}
.field-err{color:#e5484d;font-size:11.5px;margin-top:4px}

/* 待审批 / 完善资料 */
.gate-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.gate{width:100%;max-width:470px;background:#fff;border-radius:14px;border:1px solid #e3e8f0;padding:34px 30px;text-align:center;box-shadow:0 14px 40px rgba(28,45,80,.1)}
.gate .ic{width:58px;height:58px;border-radius:50%;background:#eef4ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px}
.gate h3{font-size:18px;margin-bottom:10px}
.gate p{font-size:13px;color:#6b7a90;line-height:1.85}
.gate .box{margin-top:20px;text-align:left}

/* ============ 主框架 ============ */
.app{display:flex;min-height:100vh}
.side{width:212px;flex:0 0 212px;background:#fff;border-right:1px solid #e3e8f0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:15px 14px;border-bottom:1px solid #eef1f6}
.brand .logo{width:33px;height:33px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#4f9cf9);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 33px}
.brand b{display:block;font-size:13.5px;line-height:1.3}
.brand small{color:#8b98ab;font-size:11px}
nav{padding:9px 8px;flex:1;overflow:auto}
nav a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;color:#4a5872;cursor:pointer;font-size:13.5px;margin-bottom:2px;user-select:none}
nav a:hover{background:#f2f5fa}
nav a.on{background:#e8f0fe;color:#2563eb;font-weight:600}
nav .ico{width:16px;text-align:center;font-size:13px}
nav .grp{font-size:11px;color:#a9b4c4;padding:12px 11px 5px;letter-spacing:.5px}
.user-box{padding:11px 13px;border-top:1px solid #eef1f6;display:flex;gap:9px;align-items:center}
.user-box .av{width:32px;height:32px;border-radius:50%;background:#e8f0fe;color:#2563eb;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:0 0 32px}
.user-box b{font-size:12.5px;display:block;line-height:1.35}
.user-box small{font-size:11px;color:#8b98ab}
.user-box .out{margin-left:auto;color:#a3aebd;cursor:pointer;font-size:12px;padding:3px 5px}
.user-box .out:hover{color:#e5484d}
/* 手机端抽屉菜单按钮（桌面隐藏） */
.navbtn{display:none;width:34px;height:34px;flex:0 0 34px;border:1px solid #dfe6ef;background:#fff;border-radius:9px;align-items:center;justify-content:center;flex-direction:column;gap:3px;cursor:pointer;padding:0}
.navbtn i{display:block;width:15px;height:2px;background:#33415c;border-radius:2px;transition:transform .2s,opacity .2s}
.navmask{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:#fff;border-bottom:1px solid #e3e8f0;position:sticky;top:0;z-index:20;gap:12px;flex-wrap:wrap}
.topbar h1{font-size:16.5px;font-weight:600;white-space:nowrap}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.view{padding:16px 20px 50px}
.card{background:#fff;border:1px solid #e3e8f0;border-radius:10px;padding:14px 16px;margin-bottom:14px}
.card h2{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.card h2 .bar{width:3px;height:13px;background:#2563eb;border-radius:2px}
.card h2 .sub{font-weight:400;color:#8b98ab;font-size:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 10px;background:#f7f9fc;color:#5b6b83;font-weight:600;border-bottom:1px solid #e3e8f0;white-space:nowrap;font-size:12.5px}
td{padding:8px 10px;border-bottom:1px solid #eef1f6;vertical-align:middle}
tbody tr:hover td{background:#fafbfd}
tbody tr:last-child td{border-bottom:none}
/* 可排序表头：点击三态（升序 → 降序 → 恢复默认），未排序时显示淡色双向箭头 */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:#2563eb;background:#eef4ff}
th.sortable .sico{font-style:normal;font-size:9px;color:#b6c0cf;margin-left:4px;vertical-align:1px}
th.sortable.on{color:#2563eb}
th.sortable.on .sico{color:#2563eb}
.num{text-align:right;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;border:1px solid #d9e0ea;background:#fff;color:#33415c;cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap}
.btn:hover{border-color:#b9c5d6;background:#f7f9fc}
.btn.pri{background:#2563eb;border-color:#2563eb;color:#fff}
.btn.pri:hover{background:#1d55c9;border-color:#1d55c9}
.btn.danger{color:#e5484d;border-color:#f3c7c8}
.btn.danger:hover{background:#fdf3f3}
.btn.sm{padding:3px 8px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* 键盘操作时的可见焦点（鼠标点击不显示，避免干扰） */
.btn:focus-visible,button:focus-visible,nav a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid #e3e8f0;border-radius:10px;padding:13px 15px;position:relative;overflow:hidden}
.kpi .lab{font-size:12px;color:#8b98ab;margin-bottom:6px}
.kpi .val{font-size:21px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.kpi .val small{font-size:12px;font-weight:400;color:#8b98ab;margin-left:3px}
.kpi .tag{position:absolute;right:12px;top:12px;font-size:11px;padding:2px 7px;border-radius:20px;background:#eef4ff;color:#2563eb}
.kpi.hl{background:linear-gradient(135deg,#2563eb,#4f9cf9);border-color:transparent}
.kpi.hl .lab{color:#dbe8fd}.kpi.hl .val{color:#fff}.kpi.hl .val small{color:#c9dcfb}.kpi.hl .tag{background:rgba(255,255,255,.22);color:#fff}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12.5px;color:#5b6b83}
.field label i{color:#e5484d;font-style:normal}
input,select,textarea{padding:7px 10px;border:1px solid #d9e0ea;border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:#1c2434;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
input[readonly]{background:#f7f9fc;color:#5b6b83}
select{cursor:pointer}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;background:#eef1f6;color:#5b6b83;white-space:nowrap}
.pill.blue{background:#e8f0fe;color:#2563eb}
.pill.green{background:#e6f6ee;color:#0f9d58}
.pill.orange{background:#fef3e2;color:#c77700}
.pill.red{background:#fdecec;color:#d93a3f}
.pill.purple{background:#f0ebfd;color:#6d43d6}
.pill.cyan{background:#e0f5f8;color:#0e7c8a}
.empty{text-align:center;color:#9aa7b8;padding:34px 10px;font-size:13px}
.mask{position:fixed;inset:0;background:rgba(24,35,52,.42);display:none;align-items:flex-start;justify-content:center;z-index:100;overflow:auto;padding:36px 16px}
.mask.on{display:flex}
.modal{background:#fff;border-radius:12px;width:100%;max-width:820px;box-shadow:0 20px 60px rgba(20,30,50,.25);overflow:hidden}
.modal.wide{max-width:1080px}
.modal .mh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #eef1f6}
.modal .mh b{font-size:15px}
.modal .mh .x{cursor:pointer;color:#8b98ab;font-size:20px;line-height:1;padding:0 4px}
.modal .mh .x:hover{color:#e5484d}
.modal .mb{padding:16px 18px;max-height:70vh;overflow:auto}
.modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid #eef1f6;background:#fafbfd}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:#1c2434;color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:300;max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 回到顶部：滚动超过一屏才出现 */
.totop{position:fixed;right:18px;bottom:26px;width:40px;height:40px;border-radius:50%;border:1px solid #d9e0ea;background:#fff;
  color:#33415c;box-shadow:0 8px 22px rgba(28,45,80,.16);cursor:pointer;font-size:17px;line-height:1;font-family:inherit;
  padding:0;display:none;align-items:center;justify-content:center;z-index:80}
.totop.on{display:flex}
.totop:hover{border-color:#2563eb;color:#2563eb}
.loading{position:fixed;inset:0;background:rgba(244,246,250,.75);display:none;align-items:center;justify-content:center;z-index:400}
.loading.on{display:flex}
.spin{width:30px;height:30px;border:3px solid #d6e2f5;border-top-color:#2563eb;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hint{font-size:12px;color:#8b98ab;line-height:1.65}
.sep{height:1px;background:#eef1f6;margin:12px 0}
.row-flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mb8{margin-bottom:8px}
.right{text-align:right}
.mini{font-size:11.5px;color:#8b98ab}
.tablewrap{overflow:auto;border-radius:8px}
.legend{display:flex;gap:14px;font-size:12px;color:#5b6b83;margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.doc-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;line-height:1.9}
.doc-head div span{color:#8b98ab;display:inline-block;min-width:60px}
.total-line{display:flex;justify-content:space-between;padding:10px 12px;background:#f7f9fc;border-radius:8px;margin-top:10px;font-size:14px}
.total-line b{color:#2563eb;font-size:17px}
/* 完成率进度条（运营概览「配送完成情况」） */
.bar-track{height:6px;background:#eef1f6;border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:#2563eb;border-radius:4px}
/* 结算单版式（打印件 / 导出件与屏幕上完全一致）：标题 → 抬头 → 四段明细 */
.sheet-title{text-align:center;font-size:19px;font-weight:700;padding:6px 0 2px}
.sheet-no{text-align:center;margin-bottom:10px}
.sheet-sec{display:flex;align-items:center;gap:7px;margin:16px 0 7px;font-size:13.5px;font-weight:600;color:#2b3a51}
.sheet-sec .bar{width:3px;height:14px;border-radius:2px;background:#2563eb;flex:none}
.sheet-sec .sub{font-weight:400;font-size:12px;color:#8b98ab}
.warn-card{border-color:#f6d3a8!important;background:#fffaf2!important}
/* 权限矩阵 */
.perm-table td,.perm-table th{text-align:center}
.perm-table td:first-child,.perm-table th:first-child{text-align:left}
.perm-table input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:#2563eb}
.lock-note{background:#f7f9fc;border:1px dashed #d9e0ea;border-radius:8px;padding:14px;text-align:center;color:#8b98ab;font-size:13px}
/* 系统设置：开关 */
.center{text-align:center}
.sw{position:relative;display:inline-block;width:38px;height:21px;vertical-align:middle}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#d3dbe6;border-radius:20px;transition:background .2s;cursor:pointer}
.sw i:before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(28,45,80,.2)}
.sw input:checked + i{background:#2563eb}
.sw input:checked + i:before{transform:translateX(17px)}
.sw input:disabled + i{opacity:.45;cursor:not-allowed}
.mod-name{font-weight:600;font-size:13px}
/* 概览「客户在库件数分布 / 库龄分布」：横向排行条（客户数可达上百，纵向柱状图会被压成负数宽度而崩掉） */
.ranklist{display:flex;flex-direction:column;gap:7px}
.ranklist.scroll{max-height:368px;overflow-y:auto;padding-right:6px}
.rankrow{display:grid;grid-template-columns:20px 128px 1fr 86px 48px;align-items:center;gap:8px;font-size:12px;line-height:1.5}
.rankrow.nono{grid-template-columns:92px 1fr 86px 48px}
.rankrow .rk{color:#98a4b6;text-align:right;font-variant-numeric:tabular-nums}
.rankrow .nm{color:#33415c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankrow .track{height:10px;background:#eef1f6;border-radius:6px;overflow:hidden}
.rankrow .track i{display:block;height:100%;border-radius:6px}
.rankrow .vv{text-align:right;font-weight:600;color:#1f2d45;font-variant-numeric:tabular-nums}
.rankrow .pct{text-align:right;color:#98a4b6;font-variant-numeric:tabular-nums}
.rankfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
/* 打印样式统一放在文件末尾（覆盖响应式断点，见文件底部「打印 / 导出 PDF」） */
@media (max-width:900px){
  /* ---------- 顶栏：品牌 + 抽屉菜单 + 账号 ---------- */
  .app{flex-direction:column}
  .side{width:100%;flex:none;height:54px;position:sticky;top:0;z-index:60;flex-direction:row;align-items:center;
    padding:0 8px;overflow:visible;border-right:none;border-bottom:1px solid #e3e8f0;box-shadow:0 1px 3px rgba(28,45,80,.05)}
  .brand{flex:1 1 auto;min-width:0;padding:0;border-bottom:none;gap:9px}
  .brand .logo{width:30px;height:30px;flex:0 0 30px;font-size:14px;border-radius:8px}
  .brand b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand small{display:none}
  .navbtn{display:flex}
  /* 导航变下拉抽屉，收起时完全不占位 */
  nav{display:none;position:absolute;left:0;right:0;top:54px;z-index:2;max-height:calc(100vh - 54px);overflow:auto;
    background:#fff;border-bottom:1px solid #e3e8f0;box-shadow:0 16px 32px rgba(20,30,50,.16);padding:6px 8px 10px;flex-direction:column}
  .side.open nav{display:flex}
  nav a{padding:11px 12px;font-size:14px;margin-bottom:1px}
  nav .grp{display:block;padding:10px 12px 4px}
  .navmask{display:none;position:fixed;left:0;right:0;top:54px;bottom:0;background:rgba(24,35,52,.34);z-index:1}
  .side.open .navmask{display:block}
  .side.open .navbtn i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .side.open .navbtn i:nth-child(2){opacity:0}
  .side.open .navbtn i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .user-box{padding:0;border-top:none;margin-left:6px;gap:7px;flex:0 0 auto}
  .user-box > div{display:none}
  .user-box .av{width:28px;height:28px;flex:0 0 28px;font-size:12px}
  .user-box .out{margin-left:0;padding:6px 9px;font-size:12px;border-radius:7px;background:#f2f5fa}
  .side-foot{display:none}

  /* ---------- 页头与内容区 ---------- */
  .topbar{top:54px;padding:9px 12px;gap:8px;z-index:30}
  .topbar h1{font-size:15.5px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .toolbar{gap:6px}
  .view{padding:12px 12px 56px;padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .card{padding:12px;border-radius:9px;margin-bottom:12px}
  .card h2{font-size:13.5px;flex-wrap:wrap;gap:5px}
  .card h2 .sub{font-size:11.5px}
  .empty{padding:26px 10px}

  /* ---------- 栅格 ---------- */
  .g3,.g4,.g5,.g6{grid-template-columns:1fr 1fr}

  /* ---------- 表格：横向滑动 + 首列吸附 ---------- */
  .tablewrap{-webkit-overflow-scrolling:touch}
  table{font-size:12.5px}
  th,td{padding:7px 8px}
  th{font-size:12px}
  .tablewrap th:first-child,.tablewrap td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #eef1f6}
  .tablewrap th:first-child{background:#f7f9fc}
  .tablewrap tbody tr:hover td:first-child{background:#fafbfd}

  /* ---------- 表单与按钮：16px 防 iOS 聚焦缩放，放大点按区域 ---------- */
  input,select,textarea{font-size:16px;padding:8px 10px}
  .btn{padding:8px 12px;font-size:13px}
  .btn.sm{padding:6px 10px;font-size:12px;border-radius:7px}
  .btn:active,.btn:hover{background:#eef2f8}
  .btn.pri:active,.btn.pri:hover{background:#1d55c9;border-color:#1d55c9}
  .btn.danger:active,.btn.danger:hover{background:#fdf3f3}
  *{-webkit-tap-highlight-color:transparent}

  /* ---------- 弹窗：全屏面板，头尾固定、中部滚动 ---------- */
  .mask{padding:0;align-items:stretch}
  .modal{max-width:100%;height:100%;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
  .modal.wide{max-width:100%}
  .modal .mh{padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top));flex:0 0 auto}
  .modal .mh b{font-size:14.5px}
  .modal .mh .x{font-size:24px;padding:0 6px}
  .modal .mb{padding:12px 14px;max-height:none;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}
  .modal .mf{padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));flex:0 0 auto}
  .modal .mf .btn{flex:1 1 auto;justify-content:center}

  /* ---------- KPI ---------- */
  .kpi{padding:11px 12px}
  .kpi .val{font-size:19px;letter-spacing:0}
  .kpi .tag{right:10px;top:10px}

  /* ---------- 登录 / 注册 ---------- */
  .auth-wrap{padding:14px;align-items:flex-start}
  .auth-card{flex-direction:column;border-radius:14px}
  .auth-side{width:100%;flex:none;padding:22px 20px}
  .auth-side h2{font-size:18px;margin-bottom:6px}
  .auth-side p{font-size:12.5px;line-height:1.75}
  .auth-side ul,.auth-side .ft{display:none}
  .auth-body{padding:22px 18px}
  .auth-tabs div{padding:9px 0;font-size:13.5px}
  .code-row .btn{min-width:96px;padding:8px 10px}
  .gate{padding:26px 20px}

  /* ---------- 单据头 / 合计行 ---------- */
  .doc-head{flex-direction:column;gap:2px;font-size:12.5px;line-height:1.8}
  .total-line{font-size:13px}

  /* ---------- 概览排行条 ---------- */
  .ranklist.scroll{max-height:300px}
  .rankrow{grid-template-columns:18px 112px 1fr 76px;gap:6px}
  .rankrow.nono{grid-template-columns:92px 1fr 76px}
  .rankrow .pct{display:none}
  .rankfoot{flex-wrap:wrap}

  .toast{bottom:22px;bottom:calc(22px + env(safe-area-inset-bottom));max-width:92vw;padding:10px 16px}
  .totop{right:12px;bottom:calc(20px + env(safe-area-inset-bottom));width:38px;height:38px;font-size:16px}
  /* 排序箭头在窄屏上更小，避免表头被撑宽 */
  th.sortable .sico{font-size:8px;margin-left:3px}
}

/* ---------- 手机（竖屏）细调 ---------- */
@media (max-width:641px){
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .view{padding:10px 10px 56px;padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .card{padding:11px}
  .modal .mb{padding:10px 12px}
  .auth-side{padding:18px 16px}
  .topbar{padding:8px 10px}
  /* 排行条改为两行：名称占满宽度，横条落到下一行 */
  .rankrow{grid-template-columns:16px minmax(0,1fr) 66px;gap:3px 8px}
  .rankrow .rk{grid-area:1/1}
  .rankrow .nm{grid-area:1/2}
  .rankrow .vv{grid-area:1/3}
  .rankrow .track{grid-area:2/1/3/4;height:7px}
  .rankrow.nono{grid-template-columns:minmax(0,1fr) 66px}
  .rankrow.nono .nm{grid-area:1/1}
  .rankrow.nono .vv{grid-area:1/2}
  .rankrow.nono .track{grid-area:2/1/3/3}
}

/* ================= 打印 / 导出 PDF =================
   思路：打印时把弹窗之外的一切直接 display:none，弹窗自身还原为普通文档流。
   相比旧的 visibility + position:absolute 方案，可以彻底避免：
   · #mask 固定定位在多页打印时只印第一页 / 内容被 overflow 裁掉
   · 弹窗 max-height:70vh + overflow:auto 导致长单据只打印出可见部分
   · body{overflow:hidden}（弹窗锁滚动）把整页裁成一屏
   body.printing 由 printDoc() 在调起打印前加上、打印结束后移除，
   因此用户直接按 Ctrl+P 打印整页时仍是正常的页面。 */
@page{size:A4;margin:12mm}
@media print{
  html,body{background:#fff!important;height:auto!important}
  body.printing{overflow:visible!important}
  /* 打印时只留弹窗容器，其余顶层节点（应用 / 回顶按钮 / toast / loading…）全部移出排版 */
  body.printing>*:not(#mask){display:none!important}
  body.printing #mask{position:static!important;inset:auto!important;display:block!important;
    background:none!important;padding:0!important;overflow:visible!important}
  body.printing #mask>.modal{position:static!important;width:auto!important;max-width:none!important;
    box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:block!important}
  body.printing #mask>.modal>.mh,body.printing #mask>.modal>.mf{display:none!important}
  body.printing #mask>.modal>.mb{max-height:none!important;overflow:visible!important;padding:0!important}
  .no-print{display:none!important}
  /* ---- 单据本体 ---- */
  .print-area{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .print-area .tablewrap{overflow:visible!important;border:none}
  .print-area table{width:100%;border-collapse:collapse;font-size:11.5px}
  .print-area thead{display:table-header-group}   /* 跨页时每页重复表头 */
  .print-area tr{page-break-inside:avoid;break-inside:avoid}
  .print-area th,.print-area td{padding:5px 6px}
  /* 响应式断点在打印视口（A4≈703px 宽）下也会命中，这里强制回到横向单据版式 */
  .print-area .doc-head{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
    gap:8px 18px!important;font-size:12.5px!important;line-height:1.7!important}
  .print-area .doc-head div span{min-width:62px}
  .print-area .total-line{font-size:13px!important;background:#f2f5fa!important;border:1px solid #dbe3ee;border-radius:6px}
  .print-area .sep{background:#d6dde8!important;margin:9px 0}
  .print-area .pill{border:1px solid rgba(0,0,0,.06);box-shadow:none}
  .print-area .mini{font-size:11px}
  /* 结算单：分段标题不孤行、不被跨页撕开 */
  .print-area .sheet-title{font-size:17px!important;padding:0 0 2px!important}
  .print-area .sheet-sec{margin:11px 0 5px!important;font-size:12.5px!important;
    page-break-after:avoid;break-after:avoid}
  .print-area .sheet-sec .bar{background:#2563eb!important}
  .print-area .sheet-sec .sub{font-size:10.5px!important}
}