/* ===========================================
   通用样式 - H5 + PC管理后台 都用
   =========================================== */
:root{
  --bg: #f6f7fb;
  --bg-deep: #0a0e1a;
  --card: #ffffff;
  --card-dark: #151a2c;
  --border: rgba(255,255,255,.08);
  --border-light: #ececec;
  --text: #1a1d29;
  --text-deep: #e6e8ee;
  --sub: #8a93a6;
  --sub-light: #6c7388;
  --p: #4f8cff;
  --p2: #8b5cff;
  --success: #2ecc71;
  --warn: #ff9f40;
  --danger: #ff5566;
  --shadow: 0 4px 16px rgba(20,28,52,.06);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
body{padding-bottom:env(safe-area-inset-bottom)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;outline:none;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* ============== Toast ============== */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);background:rgba(20,28,52,.92);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;z-index:9999;opacity:0;pointer-events:none;transition:all .25s;max-width:80vw;text-align:center}
.toast-show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ============== Modal ============== */
.m-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
.m-dialog{background:#fff;border-radius:16px;width:100%;max-width:340px;overflow:hidden;animation:mIn .25s}
@keyframes mIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.m-hd{font-size:16px;font-weight:600;padding:18px 18px 8px;text-align:center}
.m-bd{padding:8px 18px 18px;color:var(--sub-light);font-size:14px;line-height:1.6;text-align:center}
.m-ft{display:flex;border-top:1px solid var(--border-light)}
.m-btn{flex:1;padding:14px;font-size:15px;color:var(--text)}
.m-btn-primary{color:var(--p);border-left:1px solid var(--border-light);font-weight:600}
.m-btn:active{background:rgba(0,0,0,.04)}

/* ============== H5 通用 ============== */
.h5-app{min-height:100vh;background:var(--bg);display:flex;flex-direction:column;max-width:480px;margin:0 auto;position:relative;padding-bottom:60px}
.h5-hd{padding:14px 16px 10px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:50}
.h5-hd .ti{font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px}
.h5-hd .ri{font-size:13px;color:var(--sub)}
.h5-bd{padding:14px 14px 80px;flex:1}

.h5-ft{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border-light);display:flex;max-width:480px;margin:0 auto;z-index:50}
.h5-ft .tab{flex:1;padding:10px 4px;text-align:center;color:var(--sub);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px}
.h5-ft .tab .ico{font-size:22px}
.h5-ft .tab.active{color:var(--p)}

/* ============== Card / Block ============== */
.card{background:#fff;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:14px;border-bottom:1px solid #f1f2f6}
.row:last-child{border-bottom:none}
.row .lbl{color:var(--sub-light)}
.row .val{font-weight:500}

/* ============== Buttons ============== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:22px;font-size:14px;font-weight:500;background:var(--p);color:#fff;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn-outline{background:transparent;color:var(--p);border:1px solid var(--p)}
.btn-light{background:#eaf0ff;color:var(--p)}
.btn-success{background:var(--success);color:#fff}
.btn-warn{background:var(--warn);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:6px 12px;font-size:12px}

/* ============== Form ============== */
.field{margin-bottom:14px}
.field .lab{display:block;font-size:13px;color:var(--sub-light);margin-bottom:6px;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;background:#f4f6fb;border-radius:10px;font-size:15px;color:var(--text);border:1px solid transparent;transition:all .2s}
.field input:focus,.field textarea:focus{border-color:var(--p);background:#fff}
.field textarea{resize:vertical;min-height:80px}
.field input[type=number]{font-size:18px;font-weight:600}

/* ============== Tag ============== */
.tag{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;background:#eef0f5;color:#666}
.tag-pending{background:#fff5e8;color:#ff9f40}
.tag-leader{background:#fff0ec;color:#ff5566}
.tag-assigned{background:#fff0e0;color:#ff7a00}
.tag-taken{background:#e8f3ff;color:#4f8cff}
.tag-progress{background:#f0e8ff;color:#8b5cff}
.tag-done{background:#e7f8ef;color:#2ecc71}
.tag-canceled{background:#f1f2f6;color:#999}
.tag-return{background:#fff8e6;color:#ff8800;border:1px dashed #ff8800}
.tag-returned{background:#ffe7e7;color:#d63031}
.tag-return-rej{background:#f1f2f6;color:#777}
.tag-express{background:linear-gradient(90deg,#ff7a00,#ff3d00);color:#fff;animation:shimmer 2s infinite linear}
@keyframes shimmer{0%{opacity:1}50%{opacity:.85}100%{opacity:1}}

/* ============== Express toggle ============== */
.expr-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fff5e8,#fff0d0);border:1.5px dashed #ff9f40;border-radius:14px;padding:14px 16px;margin-bottom:14px}
.expr-bar .lbl{font-size:14px;font-weight:600;color:#ff7a00;display:flex;align-items:center;gap:8px}
.expr-bar .lbl small{display:block;font-size:11px;color:#999;font-weight:400;margin-top:2px}
.expr-bar .sw{width:44px;height:24px;border-radius:12px;background:#d0d5dd;cursor:pointer;position:relative;transition:all .25s}
.expr-bar .sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:all .25s}
.expr-bar.on .sw{background:#ff7a00}
.expr-bar.on .sw::after{left:22px}

/* ============== Photo upload (V4) ============== */
.upload-photo{border:2px dashed #d0d5dd;border-radius:12px;padding:18px;text-align:center;color:var(--sub-light);cursor:pointer;background:#fafbfc;transition:.2s}
.upload-photo:hover{border-color:var(--p);background:#fff}
.upload-photo.has{border-style:solid;border-color:var(--p);background:#fff;padding:8px}
.upload-photo img{max-width:100%;max-height:200px;border-radius:8px;display:block;margin:0 auto}
.upload-photo .icn{font-size:30px;margin-bottom:6px}

/* ============== Process flow (timeline) ============== */
.flow-time{position:relative;padding-left:24px;margin:8px 0}
.flow-time::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:#e5e7eb}
.flow-time .dot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--p)}
.flow-time .dot.done{background:var(--p)}
.flow-time .dot.cur{background:#fff;box-shadow:0 0 0 4px rgba(36,75,255,.15)}
.flow-time .lbl{font-size:13px;color:var(--p);font-weight:500}
.flow-time .lbl small{display:block;color:var(--sub-light);font-size:11px;font-weight:400;margin-top:2px}
.flow-time.fade .dot{opacity:.4}

/* ============== Bulk action bar ============== */
.bulk-bar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border-light);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(20,28,52,.04)}
.bulk-bar .sel-count{font-size:13px;color:var(--p);font-weight:600}
.bulk-bar .spacer{flex:1}

/* ============== Checkbox ============== */
.bk-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:2px solid #d0d5dd;border-radius:6px;cursor:pointer;background:#fff;flex-shrink:0}
.bk-check.on{background:var(--p);border-color:var(--p);color:#fff}

/* ============== Order list (li checkbox版) ============== */
.li.sel{padding-left:6px}
.li.sel.on{outline:2px solid var(--p);outline-offset:-2px}

/* ============== List item ============== */
.li{background:#fff;border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.li .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.li .hd .l{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.li .addr{font-size:12px;color:var(--sub-light);margin:4px 0;line-height:1.5}
.li .addr b{display:inline-block;width:50px;color:var(--sub)}
.li .ft{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px dashed #eee}
.li .ft .fee{color:var(--p);font-size:16px;font-weight:700}
.li .ft .ts{font-size:11px;color:var(--sub-light)}

/* ============== Tabs ============== */
.tabs{display:flex;background:#fff;border-radius:10px;padding:4px;margin-bottom:14px;box-shadow:var(--shadow)}
.tabs .tab{flex:1;text-align:center;padding:8px 0;font-size:13px;border-radius:7px;color:var(--sub-light);transition:all .2s}
.tabs .tab.active{background:var(--p);color:#fff;font-weight:500}

/* ============== Empty ============== */
.empty{text-align:center;padding:60px 20px;color:var(--sub-light)}
.empty .ic{font-size:48px;opacity:.5;margin-bottom:12px}
.empty .de{font-size:13px}

/* ============== Profile header ============== */
.profile-hd{background:linear-gradient(135deg,#4f8cff,#8b5cff);color:#fff;padding:24px 18px 30px;border-radius:0 0 22px 22px;text-align:center;position:relative}
.profile-hd .av{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.2);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:32px}
.profile-hd .nm{font-size:18px;font-weight:600;margin-bottom:4px}
.profile-hd .ph{font-size:13px;opacity:.85}
.profile-hd .out{position:absolute;top:18px;right:18px;font-size:13px;opacity:.8;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:14px}

/* ============== Stats ============== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stats .s{background:#fff;border-radius:12px;padding:14px 8px;text-align:center;box-shadow:var(--shadow)}
.stats .s .n{font-size:22px;font-weight:700;color:var(--p);margin-bottom:4px}
.stats .s .l{font-size:12px;color:var(--sub-light)}

/* ============== QR Poster ============== */
.qr-poster{background:#fff;border-radius:14px;padding:18px;text-align:center;margin:14px 0;box-shadow:var(--shadow)}
.qr-poster img{width:180px;height:180px;display:block;margin:0 auto 10px;border-radius:8px}
.qr-poster .po-ti{font-size:16px;font-weight:600;margin-bottom:4px;color:var(--p)}
.qr-poster .po-de{font-size:12px;color:var(--sub-light);margin-bottom:12px}
.qr-link{display:flex;align-items:center;background:#f4f6fb;border-radius:8px;padding:8px 10px;font-size:12px;color:var(--sub-light);margin-top:10px}
.qr-link .ln{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============== 规格卡片 ============== */
.sz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sz-card{position:relative;background:#f7faff;border:2px solid transparent;border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s}
.sz-card:hover{border-color:#d6e4ff;transform:translateY(-1px)}
.sz-card.active{border-color:var(--p);background:#eaf0ff;box-shadow:0 0 0 3px rgba(79,140,255,.15)}
.sz-card .sz-ic{font-size:32px;margin-bottom:6px}
.sz-card .sz-nm{font-size:14px;font-weight:600;color:var(--text)}
.sz-card .sz-de{font-size:11px;color:var(--sub-light);margin:3px 0 8px;line-height:1.4}
.sz-card .sz-pr{display:inline-block;padding:4px 10px;border-radius:10px;background:#fff;color:var(--p);font-weight:700;font-size:15px}
.sz-card.active .sz-pr{background:var(--p);color:#fff}

/* ============== PC Admin ============== */
.pc{display:flex;min-height:100vh;background:var(--bg)}
.pc-side{width:220px;background:#fff;border-right:1px solid var(--border-light);padding:18px 0}
.pc-side .lo{padding:0 18px 18px;font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--p)}
.pc-side .lo-ic{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#4f8cff,#8b5cff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.pc-side .nav a{display:flex;align-items:center;gap:10px;padding:11px 18px;color:var(--sub-light);font-size:14px;border-left:3px solid transparent;cursor:pointer}
.pc-side .nav a:hover{background:#f6f7fb}
.pc-side .nav a.active{background:#eaf0ff;color:var(--p);border-left-color:var(--p);font-weight:500}
.pc-side .nav .ic{font-size:16px}
.pc-main{flex:1;padding:18px 24px;overflow:auto}
.pc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.pc-hd .ti{font-size:20px;font-weight:600}
.pc-hd .ri{display:flex;align-items:center;gap:10px}
.pc-card{background:#fff;border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.pc-tb{width:100%;border-collapse:collapse}
.pc-tb th{text-align:left;padding:10px 12px;font-size:12px;color:var(--sub-light);background:#fafbfc;border-bottom:1px solid var(--border-light);font-weight:500}
.pc-tb td{padding:12px;font-size:13px;border-bottom:1px solid #f5f6fa;vertical-align:middle}
.pc-tb tr:hover td{background:#fafbfc}
.pc-tb .av-cl{display:flex;align-items:center;gap:8px}
.pc-tb .av-cl .av{width:30px;height:30px;border-radius:8px;background:#eef0f5;display:flex;align-items:center;justify-content:center;font-size:16px}
.av.av-img{background-size:cover;background-position:center;color:transparent;font-size:0;overflow:hidden}
.pc-search{padding:8px 14px;background:#f4f6fb;border-radius:8px;font-size:13px;min-width:200px}
.pc-acts{display:flex;gap:6px}
.pc-acts .a{padding:5px 10px;border-radius:6px;font-size:12px;background:#f4f6fb;color:var(--sub-light);cursor:pointer;transition:.2s}
.pc-acts .a:hover{background:#eaf0ff;color:var(--p)}
.pc-acts .a.danger:hover{background:#ffeef0;color:var(--danger)}
.pc-acts .a.warn:hover{background:#fff5e8;color:var(--warn)}
.pc-acts .a.ok:hover{background:#e7f8ef;color:var(--success)}

.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.charts .ch{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.charts .ch .lbl{font-size:13px;color:var(--sub-light);margin-bottom:6px}
.charts .ch .num{font-size:24px;font-weight:700;color:var(--p)}
.charts .ch .sub{font-size:11px;color:var(--sub);margin-top:4px}

/* ============== 服务区域 下拉多选 ============== */
.area-cascade{border:1px solid var(--border-light);border-radius:10px;padding:12px;background:#fafbfc}
.area-picker{position:relative}
.area-picker-hd{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;background:#f4f6fb;border-radius:10px;font-size:14px;color:var(--text);cursor:pointer;border:1px solid transparent;transition:all .2s}
.area-picker-hd:hover{border-color:var(--p)}
.area-picker-dd{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border-light);border-radius:10px;box-shadow:0 8px 24px rgba(20,28,52,.12);max-height:260px;overflow-y:auto;z-index:10;padding:8px}
.area-grp-title{font-size:12px;color:var(--sub-light);font-weight:600;padding:8px 6px 4px}
.area-grp{display:flex;flex-direction:column;gap:2px;padding:0 0 8px}
.area-check{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--text);cursor:pointer;transition:.15s}
.area-check:hover{background:#f6f7fb}
.area-check.on{background:#eaf0ff;color:var(--p)}
.area-check input{accent-color:var(--p);width:16px;height:16px;cursor:pointer}

/* 区域页 tag 配色 */
.tag-blue{background:#e8f3ff;color:#4f8cff}
.tag-green{background:#e7f8ef;color:#2ecc71}


@media(max-width:1024px){.pc-side{width:100%;padding:10px;display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border-light)}.pc-side .lo{flex-shrink:0;margin-right:14px}.pc-side .nav{flex:1;display:flex}.pc-side .nav a{border-left:none;border-bottom:3px solid transparent;padding:8px 12px;font-size:13px;padding:6px 10px;white-space:nowrap}.pc-side .nav a.active{border-bottom-color:var(--p)}.pc-main{padding:14px}.pc-card{padding:14px;overflow-x:auto}.pc-card .pc-tb{min-width:600px}.pc-hd{gap:8px;margin-bottom:12px;flex-direction:column;align-items:flex-start}.pc-hd .ti{font-size:17px}.pc-hd .ri{width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px}.pc-tb th,.pc-tb td{padding:8px 6px;font-size:12px}.btn{padding:14px 0;font-size:14px}.pc-search{min-width:0;width:100%}}