/* ==========================================================================
   主题：现代系统风
   --------------------------------------------------------------------------
   上一版严格照抄秒哒的「白色极简」（全白 + 1px 边框 + 零阴影），
   手机上看还行，但整体偏素、层次不清，桌面上更是拉成一条窄柱子。

   这一版在保留原有信息结构的前提下做三件事：
     1. 建立层次 —— 浅灰页面底 + 纯白卡片 + 克制的阴影，靠明度而不是靠描边区分层级
     2. 强化对比 —— 主色实心化（主按钮、选中态、左侧导航），语义色更饱和
     3. 双端适配 —— 桌面端换左侧竖向导航 + 订单卡片多列网格；手机端维持单列底部标签栏
   ========================================================================== */

:root{
  /* —— 层次：底 → 卡 → 填充 —— */
  --bg:#F1F3F7;          /* 页面底色 */
  --card:#FFFFFF;        /* 卡片 / 面板 / 弹层 */
  --fill:#F6F8FB;        /* 卡片内部的次级填充块 */
  --line:#E4E8EF;        /* 主要边界 */
  --line-2:#EEF1F6;      /* 弱边界（卡片内分隔） */

  /* —— 文字 —— */
  --text:#0F172A;
  --text-2:#334155;
  --muted:#64748B;
  --faint:#94A3B8;

  /* —— 主色：唯一信号色 —— */
  --brand:#1D4ED8;
  --brand-600:#2563EB;
  --brand-soft:#E8EEFD;
  --brand-ink:#1E3A8A;

  /* —— 语义色 —— */
  --danger:#DC2626;
  --danger-soft:#FEF2F2;
  --ok:#15803D;
  --ok-soft:#F0FDF4;
  --warn:#C2410C;
  --warn-soft:#FFF7ED;
  --violet:#7C3AED;
  --violet-soft:#F5F3FF;
  --cyan:#0891B2;
  --cyan-soft:#ECFEFF;

  /* —— 阴影：桌面端靠它把卡片"抬"起来 —— */
  --sh-1:0 1px 2px rgba(15,23,42,.06);
  --sh-2:0 2px 8px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sh-3:0 16px 40px rgba(15,23,42,.18);

  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;

  --tabbar-h:58px;
  --sidenav-w:0px;       /* 桌面端由媒体查询改写 */
  --content-max:880px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
/* 金额、数量一律用等宽数字，竖排时能对齐 */
b,.money-item b,.sh-profit,.stat .v,.card-sub b{font-variant-numeric:tabular-nums;}

.wrap{
  max-width:var(--content-max);margin:0 auto;padding:0 16px;
  padding-bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
}

/* ---------- 顶栏 ---------- */
header{
  position:sticky;top:0;z-index:20;background:var(--card);
  border-bottom:1px solid var(--line);padding:13px 16px 12px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
header .inner{max-width:var(--content-max);margin:0 auto;display:flex;align-items:center;gap:10px;}
h1{
  font-size:17px;font-weight:700;margin:0;flex:1;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:9px;
}
/* 标题前的品牌色竖条：一眼锚定当前页 */
h1::before{
  content:"";flex:none;width:4px;height:17px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand-600),var(--brand));
}

.banner{background:var(--danger-soft);color:var(--danger);font-size:13px;padding:10px 16px;border-bottom:1px solid #FADADA;}

/* ---------- 底部标签栏（手机） ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);
  border-top:1px solid var(--line);display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 3px rgba(15,23,42,.04);
}
.tabbar button{
  flex:1;border:none;background:none;font-family:inherit;cursor:pointer;
  padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--faint);font-size:11px;line-height:1.2;position:relative;
  transition:color .15s;
}
.tabbar button.on{color:var(--brand);font-weight:600;}
.tabbar svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tabbar .tb-dot{
  position:absolute;top:5px;left:50%;margin-left:5px;
  min-width:16px;height:16px;border-radius:8px;background:var(--danger);color:#fff;
  font-size:10px;line-height:16px;text-align:center;padding:0 4px;font-weight:600;
  box-shadow:0 0 0 2px var(--card);
}

/* ---------- 搜索 ---------- */
.toolbar{display:flex;gap:8px;margin:16px 0 14px;align-items:center;}
.search-box{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:0 12px;box-shadow:var(--sh-1);
}
.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.search-box .s-ic{width:17px;height:17px;flex:none;fill:none;stroke:var(--faint);stroke-width:1.9;stroke-linecap:round;}
.search-box input{
  flex:1;min-width:0;border:none;background:none;padding:11px 0;
  font-family:inherit;font-size:14.5px;color:var(--text);outline:none;
}
.search-box input::placeholder{color:var(--faint);}
.toolbar .btn-search{
  flex:none;border:1px solid var(--brand);background:var(--brand);color:#fff;font-family:inherit;
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:var(--radius-sm);cursor:pointer;
  box-shadow:var(--sh-1);transition:background .15s;
}
.toolbar .btn-search:hover{background:var(--brand-600);}
input,select,textarea{
  font-family:inherit;font-size:15px;color:var(--text);
  border:1px solid var(--line);background:var(--card);
  border-radius:var(--radius-sm);padding:10px 12px;width:100%;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
textarea{resize:vertical;min-height:72px;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);
  border-radius:var(--radius-sm);padding:9px 14px;font-size:14px;font-family:inherit;
  cursor:pointer;white-space:nowrap;line-height:1.2;transition:background .15s,border-color .15s,color .15s;
}
.btn:active{transform:translateY(.5px);}
.btn:hover{background:var(--fill);}
/* 主按钮：实心主色 —— 页面上最明确的一个信号 */
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;box-shadow:var(--sh-1);}
.btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600);}
.btn.sm{padding:6px 12px;font-size:13px;}
.btn.danger{color:var(--danger);border-color:#F6D4D4;background:var(--card);}
.btn.danger:hover{background:var(--danger-soft);}
.btn.block{width:100%;}
.btn.ghost{background:transparent;color:var(--muted);border-color:transparent;box-shadow:none;}
.btn.ghost:hover{background:var(--fill);color:var(--text-2);}

/* ---------- 订单卡片 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px 14px 17px;margin-bottom:12px;cursor:pointer;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:box-shadow .18s,transform .18s;
  /* 卡片自己当查询容器：金额四宫格该摆 4 列还是 2×2，
     取决于「这张卡有多宽」，而不是「屏幕有多宽」。
     桌面端是网格，卡片宽度随列数变，用视口断点判断一定会错。 */
  container-type:inline-size;
}
/* 左侧状态色条：不占布局，靠 inset 阴影画出来 */
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--line);transition:background .18s;
}
.card.is-alert::before{background:var(--danger);}
.card.is-unsettled::before{background:var(--cyan);}
.card.is-done::before{background:var(--ok);}
.card.is-alert{border-color:#F6C7C7;}
.card.is-unsettled{border-color:#BEE3EF;}
.card.is-done{border-color:#C9EBD3;}

.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.card-no{
  font-size:13.5px;font-weight:600;color:var(--text-2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.card-tags{display:flex;align-items:center;gap:4px;flex:none;flex-wrap:wrap;justify-content:flex-end;}

.tag{
  display:inline-block;font-size:11.5px;padding:3px 9px;border-radius:999px;
  white-space:nowrap;font-weight:600;background:var(--fill);color:var(--muted);
  border:1px solid transparent;
}
.tag-gray{background:var(--fill);color:var(--muted);border-color:var(--line-2);}
.tag-ok{background:var(--ok-soft);color:var(--ok);border-color:#BBF7D0;}
.tag-warn{background:var(--warn-soft);color:var(--warn);border-color:#FED7AA;}
.tag-free{background:var(--ok-soft);color:var(--ok);border-color:#BBF7D0;}
.tag-comm{background:var(--brand-soft);color:var(--brand);border-color:#C7D7FA;}

.card-date{font-size:12.5px;color:var(--faint);margin-top:-5px;font-variant-numeric:tabular-nums;}

.card-main{display:flex;gap:12px;align-items:flex-start;}
.card-thumb{
  width:64px;height:64px;flex:none;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--line-2);background:var(--fill);position:relative;
  display:flex;align-items:center;justify-content:center;cursor:zoom-in;
}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb-none{font-size:11px;color:var(--faint);}
.thumb-more{
  position:absolute;right:0;bottom:0;background:rgba(15,23,42,.72);color:#fff;
  font-size:11px;line-height:1.5;padding:0 5px;border-top-left-radius:7px;font-weight:600;
}
.card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.card-title{
  font-size:16px;font-weight:700;color:var(--brand-ink);line-height:1.35;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.card-sub{
  display:flex;align-items:center;flex-wrap:wrap;
  font-size:13px;color:var(--muted);
}
.card-sub b{font-weight:600;}
/* 每个片段整体不折行，只在片段之间断行 —— 否则「¥43/¥39」会被拦腰截断。
   分隔点挂在片段**尾部**：万一换行，是行尾多个点，而不是行首冒出一个孤零零的「·」。 */
.card-sub .seg{white-space:nowrap;}
.card-sub .seg:not(:last-child)::after{content:'·';margin:0 6px;color:#CBD5E1;}
.sub-k{color:var(--faint);}
.c-blue{color:#1D4ED8;}
.c-cyan{color:#0E7490;}
.c-green{color:#15803D;}
.c-orange{color:#C2410C;}

/* 客户信息块 */
.cust-box{
  background:#EFF8FF;border:1px solid #D7EBFA;border-radius:var(--radius-sm);
  padding:9px 13px;display:flex;flex-direction:column;gap:2px;
}
.cust-head{font-size:11.5px;font-weight:700;color:#0369A1;letter-spacing:.04em;}
.cust-name{font-size:14.5px;color:var(--text);word-break:break-all;font-weight:500;}
.cust-mark{font-size:12.5px;color:var(--muted);}

/* 四项金额：底色更实，边框同色系，一眼分清四类钱 */
.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.money-item{
  border-radius:var(--radius-sm);padding:9px 12px;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:1px;background:var(--fill);
}
.money-item span{font-size:11.5px;font-weight:500;opacity:.85;}
.money-item b{font-size:16.5px;font-weight:700;line-height:1.3;}
.m-blue{background:#EFF6FF;border-color:#C7DBFB;}
.m-blue span,.m-blue b{color:#1D4ED8;}
.m-green{background:#F0FDF4;border-color:#BBF7D0;}
.m-green span,.m-green b{color:#15803D;}
.m-orange{background:#FFF7ED;border-color:#FED7AA;}
.m-orange span,.m-orange b{color:#C2410C;}
.m-purple{background:#F5F3FF;border-color:#DDD6FE;}
.m-purple span,.m-purple b{color:#7C3AED;}

/* 物流凭证行 */
.track-row{
  background:#EFF6FF;border:1px solid #C7DBFB;border-radius:var(--radius-sm);
  padding:8px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:zoom-in;
}
.track-row.plain{background:var(--fill);border-color:var(--line-2);cursor:default;}
.track-name{font-size:13px;color:#1D4ED8;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.track-row.plain .track-name{color:var(--muted);font-weight:500;}
.track-hint{font-size:11.5px;color:#60A5FA;flex:none;}

/* 卡片操作条 */
/* margin-top:auto 让「复制文案 / 编辑」永远贴卡片底部：
   网格里同一行卡片高度会被拉齐，内容短的卡片不至于按钮悬在半空 */
.card-ops{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--line-2);margin-top:auto;}
.card-ops .btn{flex:1;}

/* ---------- 图片灯箱 ---------- */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(9,12,20,.95);display:flex;flex-direction:column;}
.lb-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;flex:none;
}
.lb-count{color:#fff;font-size:14px;opacity:.85;font-variant-numeric:tabular-nums;}
.lb-close{
  border:none;background:rgba(255,255,255,.14);color:#fff;font-size:16px;
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-family:inherit;line-height:1;
}
.lb-close:hover{background:rgba(255,255,255,.24);}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 8px;}
/* 注意：这里**不**禁用 -webkit-touch-callout —— 微信内长按弹出原生「保存图片」
   是最可靠的保存通路，我们的自定义下载只是增强，不能把它挡掉。 */
.lb-img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
/* 图挂了（例如原图已失效）时给个明确交代，别留一片空白 */
.lb-img.is-broken{display:none;}
.lb-broken{display:none;color:rgba(255,255,255,.7);font-size:14px;text-align:center;line-height:2;}
.lb-broken.on{display:block;}
.lb-prev,.lb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  border:none;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  width:42px;height:42px;border-radius:50%;cursor:pointer;font-family:inherit;
}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.26);}
.lb-prev{left:10px;}
.lb-next{right:10px;}
.lb-foot{flex:none;padding:14px 16px calc(20px + env(safe-area-inset-bottom));text-align:center;}
.lb-save{
  border:none;background:var(--brand);color:#fff;
  font-family:inherit;font-size:15px;font-weight:600;padding:11px 36px;
  border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--sh-2);
}
.lb-save:hover{background:var(--brand-600);}
.lb-tip{color:rgba(255,255,255,.55);font-size:12px;margin-top:10px;}

/* ---------- 统计页 ---------- */
.stat-alert{
  display:flex;align-items:center;gap:12px;background:var(--warn-soft);border:1px solid #FDBA74;
  border-radius:var(--radius);padding:13px 15px;margin-bottom:14px;cursor:pointer;text-align:left;
  width:100%;font-family:inherit;box-shadow:var(--sh-1);transition:background .15s;
}
.stat-alert:hover{background:#FFEDD5;}
.sa-ic{
  width:40px;height:40px;border-radius:11px;background:#F97316;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.sa-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sa-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sa-title{font-size:15px;font-weight:700;color:#C2410C;display:flex;align-items:center;gap:8px;}
.sa-badge{background:#F97316;color:#fff;border-radius:999px;padding:0 8px;font-size:12px;font-weight:700;line-height:18px;font-style:normal;}
.sa-sub{font-size:12.5px;color:#EA8C3A;}
.sa-arrow{color:#FDBA74;font-size:20px;flex:none;}

/* 时间筛选：选中态是唯一的实心色块 */
.range-bar{
  display:flex;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:4px;gap:3px;margin-bottom:14px;box-shadow:var(--sh-1);
}
.range-bar button{
  flex:1;border:none;background:none;font-family:inherit;font-size:13.5px;color:var(--muted);
  padding:9px 0;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s;
}
.range-bar button:hover{background:var(--fill);color:var(--text-2);}
.range-bar button.on{background:var(--brand);color:#fff;font-weight:600;box-shadow:var(--sh-1);}

.range-custom{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.range-custom input{
  flex:1;min-width:0;font-family:inherit;font-size:13.5px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);color:var(--text);
}

/* 主利润卡 */
.stat-hero{
  background:linear-gradient(135deg,#1E3A8A 0%,#1D4ED8 55%,#3B82F6 100%);
  border-radius:var(--radius-lg);padding:24px 18px 18px;color:#fff;margin-bottom:14px;
  box-shadow:0 10px 26px rgba(29,78,216,.28);
}
.sh-label{font-size:13px;opacity:.85;}
.sh-profit{font-size:36px;font-weight:700;color:#FCD34D;letter-spacing:-.02em;margin:3px 0 14px;line-height:1.1;}
.sh-split{
  display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 14px;margin-bottom:14px;
}
.sh-split .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.sh-split .c span{font-size:12px;opacity:.85;}
.sh-split .c b{font-size:15px;font-weight:700;}
.sh-split .op{opacity:.6;}
.sh-rule{height:1px;background:rgba(255,255,255,.22);margin-bottom:14px;}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px;}
.sh-grid .c{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.sh-grid .c span{font-size:12px;opacity:.85;}
.sh-grid .c b{font-size:19px;font-weight:700;}
.c-red{color:#FCA5A5;}

/* 明细网格 */
.stat-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px;box-shadow:var(--sh-1);}
.stat .k{font-size:12.5px;color:var(--muted);margin-bottom:4px;}
.stat .v{font-size:18px;font-weight:700;line-height:1.25;color:var(--text);}

.empty{
  text-align:center;color:var(--muted);padding:64px 20px;font-size:14px;line-height:1.9;
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
}

/* 新建按钮 */
.fab{
  position:fixed;right:18px;bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-600),var(--brand));color:#fff;
  border:none;font-size:27px;line-height:1;cursor:pointer;z-index:30;font-family:inherit;
  box-shadow:0 8px 20px rgba(29,78,216,.36);transition:transform .15s,box-shadow .15s;
}
.fab:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(29,78,216,.42);}

.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(15,23,42,.9);color:#fff;padding:12px 22px;border-radius:var(--radius-sm);
  font-size:14px;z-index:200;max-width:80%;text-align:center;box-shadow:var(--sh-3);
}

/* ---------- 弹层 ---------- */
.sheet{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;}
.sheet .panel{
  background:var(--card);width:100%;max-width:var(--content-max);border-radius:18px 18px 0 0;
  max-height:92vh;overflow-y:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:var(--sh-3);
}
.sheet .panel h2{font-size:17px;margin:0 0 16px;font-weight:700;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px;font-weight:500;}
.row{display:flex;gap:10px;align-items:center;}
.row>*{flex:1;min-width:0;}
.row .btn{flex:none;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.actions{display:flex;gap:10px;margin-top:20px;}
.actions .btn{flex:1;}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;}
.muted{color:var(--muted);}

/* ---------- 鞋号明细 ---------- */
.size-summary{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;
  font-size:13.5px;line-height:1.7;background:var(--fill);word-break:break-all;
}
.size-summary b{float:right;color:var(--brand);font-weight:700;}
.size-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.size-list{border:1px solid var(--line);border-radius:var(--radius-sm);max-height:46vh;overflow-y:auto;}
.size-row{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-bottom:1px solid var(--line-2);}
.size-row:last-child{border-bottom:none;}
.size-name{font-size:14.5px;font-weight:500;min-width:56px;}
.size-name.on{color:var(--brand);}
.size-ops{display:flex;align-items:center;gap:7px;}
.size-ops input{width:60px;text-align:center;padding:6px 4px;font-weight:600;font-size:15px;}
.size-ops .btn{padding:4px 10px;font-size:15px;line-height:1;}
.tpl-total{text-align:right;font-size:14px;color:var(--muted);margin-top:10px;}
.tpl-total b{color:var(--brand);font-size:17px;}

/* ---------- 开关 ---------- */
/* 注意：.field label 会命中这里，必须用同等或更高特异性覆盖 display */
.field label.switch,
label.switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;margin-bottom:0;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch span{
  flex:none;width:44px;height:25px;border-radius:999px;background:#CBD5E1;
  position:relative;transition:background .18s;margin-top:1px;
}
.switch span::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .18s;box-shadow:var(--sh-1);
}
.switch input:checked + span{background:var(--brand);}
.switch input:checked + span::after{transform:translateX(19px);}
.switch em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.55;}

/* ---------- 复制预览 ---------- */
.copy-preview{
  margin-top:14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px;background:var(--fill);font-size:12.5px;color:var(--muted);
}
.copy-preview pre{
  margin:0;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--text);line-height:1.65;
}

/* ---------- 登录页 ---------- */
.login-page{
  position:fixed;inset:0;z-index:100;
  background:linear-gradient(160deg,#EEF2FB 0%,var(--bg) 45%);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.login-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:38px 28px 28px;width:100%;max-width:392px;box-shadow:var(--sh-3);
}
.login-brand{font-size:21px;font-weight:700;text-align:center;margin-bottom:7px;}
.login-brand::after{
  content:"";display:block;width:36px;height:3px;border-radius:2px;margin:12px auto 0;
  background:linear-gradient(90deg,var(--brand-600),var(--brand));
}
.login-sub{font-size:13.5px;color:var(--muted);text-align:center;margin:10px 0 26px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500;}
.login-error{color:var(--danger);font-size:13px;min-height:20px;line-height:1.5;margin-bottom:4px;}
.login-boot{background:var(--danger-soft);color:var(--danger);border:1px solid #F3C9C4;border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px;line-height:1.65;margin-bottom:16px;text-align:left;}
.login-boot code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;}
.login-hint{font-size:12.5px;color:var(--muted);text-align:center;margin-top:20px;line-height:1.8;}
.login-hint b{color:var(--brand);font-weight:600;}

/* ---------- 分组标题 ---------- */
.sec-title{
  font-size:13px;font-weight:700;color:var(--text-2);margin:20px 0 10px;
  letter-spacing:.02em;display:flex;align-items:center;gap:8px;
}
.sec-title:first-child{margin-top:4px;}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- 列表行 ---------- */
.tpl-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;cursor:default;}
.tpl-main{flex:1;min-width:0;}
.tpl-main h3{margin:0 0 4px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tpl-ops{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:none;}
.tpl-ops .btn{padding:5px 9px;font-size:12.5px;}

/* ---------- 地址簿条目 ---------- */
.addr-head{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.addr-name{
  font-size:15.5px;font-weight:600;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.addr-count{
  flex:none;background:var(--brand-soft);color:var(--brand);
  font-size:12px;font-weight:700;border-radius:8px;padding:2px 8px;
}
.addr-edit{margin-left:auto;flex:none;font-size:13px;color:var(--brand);font-weight:600;}
.addr-content{font-size:14px;color:var(--muted);line-height:1.65;word-break:break-all;}

/* ---------- 「我的」页 ---------- */
.mine-head{
  padding:22px 20px;display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh-1);margin-top:16px;
}
.mine-avatar{
  width:54px;height:54px;border-radius:16px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;flex:none;box-shadow:0 6px 14px rgba(29,78,216,.3);
}
.mine-info{min-width:0;}
.mine-name{font-size:18px;font-weight:700;}
.mine-role{font-size:13px;color:var(--muted);margin-top:3px;}
.mine-group{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;
  background:var(--card);box-shadow:var(--sh-1);
}
.mine-group-title{font-size:12.5px;color:var(--muted);padding:16px 4px 8px;letter-spacing:.02em;font-weight:600;}
.mine-foot{text-align:center;color:var(--faint);font-size:12px;padding:22px 0 8px;}
.mine-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;background:var(--card);
  font-size:15px;color:var(--text);font-family:inherit;width:100%;
  border-left:none;border-right:none;border-top:none;text-align:left;
  transition:background .15s;
}
.mine-row:last-child{border-bottom:none;}
.mine-row:hover{background:var(--fill);}
.mine-row .mr-label{font-weight:500;}
.mine-row .mr-val{font-size:13.5px;color:var(--muted);}
.mine-row .mr-arrow{color:#CBD5E1;font-size:16px;flex:none;}

/* ==========================================================================
   响应式：平板
   ========================================================================== */
@media (min-width:700px){
  :root{--content-max:760px;}
  /* 弹层改居中对话框，不再从底部升起 */
  .sheet{align-items:center;padding:24px;}
  .sheet .panel{
    max-width:680px;border-radius:20px;max-height:86vh;
    padding:24px 24px calc(24px);
  }
  .grid2{gap:14px;}
  .card-sub{font-size:13.5px;}
}

/* 金额四宫格：只在卡片「真的够宽」时才排成 4 列。
   四个数字是 tabular-nums 的金额串（如 ¥1,335.00），没有空格、不能折行，
   最小内容宽约 108px/格 —— 4 格 + 3 道 7px 间隙 = 453px，再加卡片左右内边距 32px，
   即卡片本身至少约 490px 才塞得下。468px 是留了余量的容器阈值，
   不到就退回 2×2，绝不溢出。 */
@container (min-width:468px){
  .money-grid{grid-template-columns:repeat(4,1fr);}
}

/* ==========================================================================
   响应式：桌面（底部标签栏 → 左侧竖向导航；列表 → 多列网格）
   ========================================================================== */
@media (min-width:1024px){
  :root{
    --sidenav-w:226px;
    --content-max:1180px;
    --tabbar-h:0px;       /* 桌面端没有底部栏，内容区不用为它留白 */
  }
  body{padding-left:var(--sidenav-w);}

  /* 左侧导航 */
  .tabbar{
    top:0;bottom:0;right:auto;left:0;width:var(--sidenav-w);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    border-top:none;border-right:1px solid var(--line);
    padding:24px 14px 18px;gap:5px;box-shadow:none;
  }
  .tabbar::before{
    content:"鞋类订单管理";
    display:block;font-size:15.5px;font-weight:700;color:var(--text);
    padding:0 12px 20px;letter-spacing:.02em;
  }
  .tabbar button{
    flex:none;flex-direction:row;justify-content:flex-start;gap:11px;
    padding:11px 12px;border-radius:10px;font-size:14.5px;width:100%;
    color:var(--text-2);font-weight:500;
  }
  .tabbar button:hover{background:var(--fill);color:var(--text);}
  .tabbar button.on{
    background:var(--brand);color:#fff;font-weight:600;
    box-shadow:0 4px 12px rgba(29,78,216,.28);
  }
  .tabbar svg{width:19px;height:19px;flex:none;}
  .tabbar .tb-dot{position:static;margin-left:auto;box-shadow:0 0 0 2px var(--brand);}
  .tabbar button:not(.on) .tb-dot{box-shadow:0 0 0 2px var(--card);}

  .wrap{padding:0 28px;padding-bottom:48px;}
  header{padding:16px 28px;}
  h1{font-size:19px;}
  h1::before{height:19px;}

  /* 订单 / 提醒：多列网格，一屏看更多单。
     下限取 500px 而不是 372px —— 372px 的卡片塞不下金额四宫格（见上方容器查询注释），
     会横向溢出被裁。宁可少一列，也不要让「我的利润」被切掉。
     同列卡片高度自动拉齐，配合 .card-ops 的 margin-top:auto，操作按钮整齐对齐底部。 */
  #list.view-orders,
  #list.view-remind{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(500px,1fr));
    gap:14px;
  }
  #list.view-orders .card,
  #list.view-remind .card{margin-bottom:0;}
  #list.view-remind .sec-title{grid-column:1 / -1;margin-top:10px;}
  #list.view-orders .empty,
  #list.view-remind .empty{grid-column:1 / -1;}
  /* 地址簿也铺成网格 */
  #list.view-addresses{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:12px;align-items:start;
  }
  #list.view-addresses .card{margin-bottom:0;}
  #list.view-addresses .sec-title{grid-column:1 / -1;}
  #list.view-addresses .empty{grid-column:1 / -1;}

  /* 统计页：主卡左右分栏 + 4 列指标 */
  #list.view-stats{max-width:1040px;}
  .stat-hero{
    display:grid;grid-template-columns:300px 1fr;gap:4px 32px;
    align-items:center;padding:28px 30px;
  }
  .sh-label{grid-column:1;grid-row:1;}
  .sh-profit{grid-column:1;grid-row:2;font-size:42px;margin:4px 0 0;}
  .sh-split{grid-column:2;grid-row:1 / span 2;margin-bottom:0;padding:14px 18px;}
  .sh-rule{display:none;}
  .sh-grid{
    grid-column:1 / -1;grid-row:3;margin-top:22px;padding-top:20px;
    border-top:1px solid rgba(255,255,255,.22);
    grid-template-columns:repeat(4,1fr);
  }
  .stat-detail{grid-template-columns:repeat(4,1fr);gap:12px;}

  /* 「我的」页收窄，别拉成整屏宽 */
  #list.view-mine{max-width:660px;}

  .toolbar{margin:20px 0 16px;}
  .fab{right:32px;bottom:32px;width:56px;height:56px;font-size:28px;}

  .toast{top:auto;bottom:48px;transform:translateX(-50%);}
}

/* 超宽屏：内容区放宽，让订单网格自然多挤出一列。
   3 列需要 3×500 + 2×14 = 1528px 的内容宽度，加上侧栏 226 与滚动条，
   视口到 1840 左右才够，所以断点定在这里。 */
@media (min-width:1440px){
  :root{--content-max:1360px;}
}
@media (min-width:1840px){
  :root{--content-max:1680px;}
}

/* ==========================================================================
   深色模式
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0E14;--card:#151922;--fill:#1C212C;
    --line:#252B37;--line-2:#1F242F;
    --text:#EDEFF3;--text-2:#C3CAD6;--muted:#8E97A6;--faint:#6B7484;
    --brand:#4C82F7;--brand-600:#5E90F8;--brand-soft:#1B2740;--brand-ink:#93B4F5;
    --danger:#F87171;--danger-soft:#2A1618;--ok:#4ADE80;--ok-soft:#12251A;
    --warn:#FDBA74;--warn-soft:#2A1D12;--violet:#C4A5F7;--violet-soft:#1E1729;
    --cyan:#67E8F9;--cyan-soft:#0E2530;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 8px rgba(0,0,0,.5);
    --sh-3:0 16px 40px rgba(0,0,0,.6);
  }
  .cust-box{background:#12212E;border-color:#1E3A5F;}
  .cust-head{color:#7DD3FC;}
  .cust-name{color:var(--text);}
  .m-blue{background:#141F2E;border-color:#1E3A5F;}
  .m-blue span,.m-blue b{color:#93B4F5;}
  .m-green{background:#132118;border-color:#1F3D2A;}
  .m-green span,.m-green b{color:#6EE7A8;}
  .m-orange{background:#241A12;border-color:#4A2E1A;}
  .m-orange span,.m-orange b{color:#FDBA74;}
  .m-purple{background:#1E1729;border-color:#3B2A52;}
  .m-purple span,.m-purple b{color:#C4A5F7;}
  .track-row{background:#141F2E;border-color:#1E3A5F;}
  .track-name{color:#93B4F5;}
  .track-hint{color:#5B7CA8;}
  .tag-free{background:#132118;color:#6EE7A8;border-color:#1F3D2A;}
  .tag-ok{background:#132118;color:#6EE7A8;border-color:#1F3D2A;}
  .tag-warn{background:#241A12;color:#FDBA74;border-color:#4A2E1A;}
  .tag-comm{background:#1B2740;color:#93B4F5;border-color:#243B63;}
  .card.is-alert{border-color:#7F1D1D;}
  .card.is-unsettled{border-color:#155E75;}
  .card.is-done{border-color:#1E4630;}
  .card::before{background:var(--line);}
  .card.is-alert::before{background:#EF4444;}
  .card.is-unsettled::before{background:#22D3EE;}
  .card.is-done::before{background:#34D399;}
  .banner{border-color:#5A2626;}
  .login-boot{background:#2A1A1A;border-color:#5A2626;color:#F8A9A9;}
  .login-boot code{background:rgba(255,255,255,.1);}
  .switch span{background:#3A404A;}
  .switch span::after{background:#C8CDD4;}
  .mine-row .mr-arrow{color:#3A404A;}
  .stat-alert:hover{background:#33220F;}
  .range-bar button:hover{background:var(--fill);}
  .btn.danger{border-color:#4A2222;}
  .login-page{background:linear-gradient(160deg,#101623 0%,var(--bg) 45%);}
}