/* ============================================================
   WLD-SPM 前端样式 · 遵循《万里达VI》标准色系
   红 #D21B1B / 蓝 #003686 / 黄 #F0D000 / 橙 #E94820 / 绿 #304521
   ============================================================ */
:root{
  --red:#D21B1B; --blue:#003686; --yellow:#F0D000; --orange:#E94820; --green:#304521;
  --ink:#1F2329; --ink2:#51565D; --ink3:#8A9099;
  --line:#E4E7EB; --bg:#F0F2F5; --card:#FFFFFF;
  --red-t:#FBEDED; --blue-t:#EAF0F9; --green-t:#EFF3EC; --orange-t:#FDF0EC; --yellow-t:#FEFAE4;
  --r:10px; --sh:0 1px 3px rgba(0,0,0,.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC",-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.6;
}
#app{max-width:680px; margin:0 auto; min-height:100vh; background:var(--bg); position:relative;}

/* ---------- 顶栏 ---------- */
.hd{position:sticky; top:0; z-index:20; background:var(--red); color:#fff; padding:12px 16px 12px; display:flex; align-items:center; gap:10px;}
.hd .brand{font-weight:700; font-size:16px; letter-spacing:.5px;}
.hd .brand small{font-weight:400; font-size:11px; opacity:.8; margin-left:6px; font-family:Georgia,serif;}
.hd .sp{flex:1;}
.hd .ico{position:relative; font-size:18px; cursor:pointer; padding:2px 4px;}
.hd .dot{position:absolute; top:-2px; right:-2px; background:var(--yellow); color:#5a4b00; font-size:10px; font-weight:700; border-radius:9px; padding:0 5px; line-height:15px;}
.hd.blue{background:var(--blue);}
.back{font-size:20px; cursor:pointer; padding-right:4px; line-height:1;}
.hd .title{font-size:16px; font-weight:600;}

/* ---------- 内容区 ---------- */
.content{padding:12px 14px 84px;}
.sec-t{font-size:15px; font-weight:700; margin:16px 0 8px; display:flex; align-items:center;}
.sec-t::before{content:""; width:3px; height:14px; background:var(--red); border-radius:2px; margin-right:8px;}
.sec-t .more{margin-left:auto; font-size:12px; font-weight:400; color:var(--red); cursor:pointer;}

/* ---------- 卡片 ---------- */
.card{background:var(--card); border-radius:var(--r); padding:14px; box-shadow:var(--sh); margin-bottom:10px;}
.card.tight{padding:10px 12px;}
.row{display:flex; align-items:center; gap:8px;}
.row.between{justify-content:space-between;}
.muted{color:var(--ink3); font-size:12px;}
.mt6{margin-top:6px;} .mt10{margin-top:10px;} .mt14{margin-top:14px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}

/* ---------- 指标卡 ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.stat{background:var(--card); border-radius:var(--r); padding:12px 8px; text-align:center; box-shadow:var(--sh); cursor:pointer;}
.stat b{display:block; font-size:21px; font-weight:700; line-height:1.25;}
.stat span{font-size:11px; color:var(--ink3);}
.stat.red b{color:var(--red);} .stat.blue b{color:var(--blue);}
.stat.orange b{color:var(--orange);} .stat.green b{color:var(--green);}
.stat.gray b{color:var(--ink2);} .stat.small b{font-size:16px;}

/* ---------- 状态徽章 ---------- */
.badge{display:inline-block; font-size:11px; font-weight:600; padding:1px 8px; border-radius:9px; white-space:nowrap;}
.bg-gray{background:#EEEEF0; color:#51565D;}
.bg-orange{background:var(--orange-t); color:var(--orange);}
.bg-blue{background:var(--blue-t); color:var(--blue);}
.bg-green{background:var(--green-t); color:#4A6B37;}
.bg-red{background:var(--red-t); color:var(--red);}
.bg-yellow{background:var(--yellow-t); color:#8A7A00;}

/* ---------- 订单/任务卡 ---------- */
.oc{background:var(--card); border-radius:var(--r); padding:13px 14px; box-shadow:var(--sh); margin-bottom:10px; cursor:pointer; border-left:3px solid transparent;}
.oc.pri{border-left-color:var(--red);}
.oc .no{font-family:Consolas,Menlo,monospace; font-weight:700; font-size:13.5px; color:var(--ink);}
.oc .cust{font-size:13px; color:var(--ink2); margin-top:5px;}
.oc .amt{font-size:15px; font-weight:700; color:var(--red);}
.oc .sub{font-size:12px; color:var(--ink3); margin-top:3px;}
.warnline{color:var(--red); font-weight:600;}
.warnline.y{color:#8A7A00;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:5px; border:0; border-radius:8px;
  padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s;}
.btn:active{opacity:.82;}
.btn-primary{background:var(--red); color:#fff;}
.btn-blue{background:var(--blue); color:#fff;}
.btn-green{background:var(--green); color:#fff;}
.btn-ghost{background:#fff; color:var(--red); border:1px solid var(--red);}
.btn-plain{background:var(--bg); color:var(--ink2);}
.btn-sm{padding:6px 12px; font-size:12.5px; border-radius:7px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.btnbar{display:flex; gap:10px; margin-top:14px;}
.btnbar .btn{flex:1;}

/* ---------- 表单 ---------- */
.fld{margin-bottom:10px;}
.fld label{display:block; font-size:12px; color:var(--ink3); margin-bottom:4px;}
.fld label b{color:var(--red);}
input,select,textarea{width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--ink); outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);}
textarea{min-height:64px; resize:vertical;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{border:1px solid var(--line); background:#fff; border-radius:15px; padding:5px 12px; font-size:12.5px;
  color:var(--ink2); cursor:pointer;}
.chip.on{background:var(--red); border-color:var(--red); color:#fff; font-weight:600;}
.chip.b{border-radius:6px;}
.opt{border:1px solid var(--line); background:#fff; border-radius:7px; padding:6px 10px; font-size:12.5px; cursor:pointer;}
.opt.on{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600;}
.hint{font-size:11.5px; color:var(--ink3); margin-top:4px;}
.err{font-size:12px; color:var(--red); margin-top:4px;}

/* ---------- 进度 ---------- */
.pbar{height:9px; border-radius:5px; background:var(--bg); overflow:hidden;}
.pbar i{display:block; height:100%; background:var(--blue); border-radius:5px; transition:width .3s;}
.pbar i.ok{background:#4A6B37;} .pbar i.warn{background:var(--orange);}

/* ---------- 时间轴 ---------- */
.tl{position:relative; padding-left:20px;}
.tl::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line);}
.tl-i{position:relative; padding:6px 0 6px 4px;}
.tl-i::before{content:""; position:absolute; left:-19px; top:13px; width:9px; height:9px; border-radius:50%;
  background:#fff; border:2px solid var(--ink3);}
.tl-i.b::before{border-color:var(--blue);} .tl-i.g::before{border-color:#4A6B37;}
.tl-i.r::before{border-color:var(--red);} .tl-i.o::before{border-color:var(--orange);}
.tl-i .t{font-size:12.5px; color:var(--ink);}
.tl-i .d{font-size:11px; color:var(--ink3);}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed; bottom:0; left:0; right:0; max-width:680px; margin:0 auto; background:#fff;
  border-top:1px solid var(--line); display:flex; padding:6px 0 max(6px,env(safe-area-inset-bottom)); z-index:30;}
.tabbar a{flex:1; text-align:center; font-size:11px; color:var(--ink3); text-decoration:none; padding:2px 0;}
.tabbar a i{display:block; font-size:19px; font-style:normal; line-height:1.2;}
.tabbar a.on{color:var(--red); font-weight:700;}

/* ---------- 悬浮按钮 ---------- */
.fab{position:fixed; right:calc(50% - 340px + 16px); bottom:76px; width:52px; height:52px; border-radius:50%;
  background:var(--red); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(210,27,27,.4); cursor:pointer; z-index:25; border:0;}
@media(max-width:712px){.fab{right:16px;}}

/* ---------- 弹层 ---------- */
.mask{position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:50; display:flex; align-items:flex-end; justify-content:center;}
.sheet{background:#fff; width:100%; max-width:680px; border-radius:14px 14px 0 0; padding:16px 16px 22px; max-height:86vh; overflow:auto;}
.sheet h3{font-size:16px; margin-bottom:12px;}
.sheet .close{float:right; color:var(--ink3); cursor:pointer; font-size:18px; line-height:1;}
.toast{position:fixed; left:50%; top:44%; transform:translateX(-50%); background:rgba(31,35,41,.9); color:#fff;
  padding:10px 18px; border-radius:8px; font-size:13.5px; z-index:99; max-width:76vw; text-align:center;}
.toast.err{background:rgba(210,27,27,.94);}

/* ---------- 下拉/表格 ---------- */
.rank{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);}
.rank:last-child{border-bottom:0;}
.rank .n{width:20px; height:20px; border-radius:50%; background:var(--bg); color:var(--ink2); font-size:11px;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto;}
.rank .n.top{background:var(--red); color:#fff;}
.rank .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px;}
.rank .vl{font-size:13px; font-weight:700; color:var(--ink);}
.rank .mv{width:52px; height:6px; border-radius:3px; background:var(--bg); overflow:hidden;}
.rank .mv i{display:block; height:100%; background:var(--red);}
.rank .mv i.blue{background:var(--blue);}

/* ---------- 柱状图 ---------- */
.chart{display:flex; align-items:flex-end; gap:6px; height:132px; padding-top:8px;}
.chart .bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.chart .bar i{display:block; width:100%; max-width:34px; background:#E9A0A0; border-radius:4px 4px 0 0; min-height:3px;}
.chart .bar.on i{background:var(--red);}
.chart .bar span{font-size:10px; color:var(--ink3); margin-top:5px;}
.chart .bar em{font-size:9.5px; color:var(--ink3); font-style:normal; margin-bottom:2px;}

/* ---------- 登录页 ---------- */
.login{padding:40px 22px;}
.login .lg{text-align:center; margin-bottom:26px;}
.login .lg .m{font-size:26px; font-weight:700; color:var(--red); letter-spacing:1px;}
.login .lg .e{font-family:Georgia,serif; font-size:12px; color:var(--blue); letter-spacing:1px;}
.login .lg .s{font-size:12.5px; color:var(--ink3); margin-top:8px;}
.acc{display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--r); padding:13px 14px;
  box-shadow:var(--sh); margin-bottom:9px; cursor:pointer;}
.acc .av{width:38px; height:38px; border-radius:50%; background:var(--red); color:#fff; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.acc .av.b{background:var(--blue);} .acc .av.g{background:var(--green);}
.acc .av.o{background:var(--orange);} .acc .av.gy{background:#8A9099;}
.acc .nm{font-size:14.5px; font-weight:600;}
.acc .ds{font-size:12px; color:var(--ink3);}
.acc .go{margin-left:auto; color:var(--ink3); font-size:16px;}

/* ---------- 空态 ---------- */
.empty{text-align:center; padding:44px 20px; color:var(--ink3);}
.empty i{display:block; font-size:34px; font-style:normal; margin-bottom:10px; opacity:.5;}
.empty p{font-size:13px;}
.loading{text-align:center; padding:30px; color:var(--ink3); font-size:13px;}

/* ---------- 详情头 ---------- */
.dh{background:var(--red); color:#fff; border-radius:var(--r); padding:16px; margin-bottom:10px;}
.dh.blue{background:var(--blue);} .dh.green{background:var(--green);} .dh.gray{background:#5A6069;}
.dh .n{font-family:Consolas,Menlo,monospace; font-size:16px; font-weight:700;}
.dh .l{font-size:12.5px; opacity:.92; margin-top:5px;}
.dh .b{background:rgba(255,255,255,.24); border-radius:9px; padding:1px 9px; font-size:11.5px; float:right;}
.kv{display:grid; grid-template-columns:76px 1fr; gap:5px 10px; font-size:13px;}
.kv dt{color:var(--ink3); font-size:12px;}
.kv dd{color:var(--ink); word-break:break-all;}

/* ---------- 部门进度块 ---------- */
.depts{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.dept{border-radius:8px; padding:9px 6px; text-align:center; background:var(--bg);}
.dept b{display:block; font-size:12.5px; margin-bottom:2px;}
.dept span{font-size:11px;}
.dept.d-done{background:var(--green-t); color:#4A6B37;}
.dept.d-run{background:var(--blue-t); color:var(--blue);}
.dept.d-wait{background:#F1F2F4; color:var(--ink3);}
.dept.d-bad{background:var(--red-t); color:var(--red);}
.dept.d-warn{background:var(--yellow-t); color:#8A7A00;}

/* ---------- 附件（拍照 / 文件） ---------- */
.uploader{display:inline-block;}
.atts{display:flex; flex-wrap:wrap; gap:10px;}
.att-i{position:relative; width:88px; display:flex; flex-direction:column; align-items:center; background:#F6F7F9; border:1px solid var(--line); border-radius:9px; padding:6px; text-align:center;}
.att-i a{width:74px; height:74px; border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff;}
.att-i .ath{width:100%; height:100%; object-fit:cover;}
.att-i .athf{font-size:12px; font-weight:700; color:var(--blue); background:var(--blue-t); border-radius:6px; padding:20px 10px;}
.att-i .meta{width:100%; margin-top:4px;}
.att-i .meta b{display:block; font-size:10.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.att-i .meta span{font-size:9.5px; color:var(--ink3);}
.att-i .del{position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:var(--red); color:#fff; font-size:11px; line-height:18px; text-align:center; cursor:pointer; box-shadow:var(--sh);}