@charset "utf-8";
/* ============================================================
   车身广告全链路管理平台 · 移动端统一样式
   设计基准：视口 390px；与 PC 端后台共用设计语言（色板/圆角/层级）
   约定：触控目标 ≥44px；正文 ≥14px；底部 tab 56px + 安全区
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 主色与语义色 */
  --c-primary:#2563eb;
  --c-primary-600:#1d4ed8;
  --c-primary-50:#eff6ff;
  --c-success:#16a34a;
  --c-success-50:#ecfdf5;
  --c-warn:#f59e0b;
  --c-warn-50:#fffbeb;
  --c-danger:#ef4444;
  --c-danger-50:#fef2f2;
  --c-info:#0ea5e9;

  /* 中性色 */
  --bg:#f5f7fa;
  --card:#fff;
  --line:#e8ecf3;
  --line-2:#f0f3f8;
  --t1:#0f172a;   /* 主文本 */
  --t2:#475569;   /* 次文本 */
  --t3:#94a3b8;   /* 辅助/占位 */

  /* 圆角与阴影 */
  --r-sm:8px;
  --r:12px;
  --r-lg:14px;
  --r-pill:999px;
  --sd:0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05);
  --sd-bar:0 -2px 12px rgba(15,23,42,.06);

  /* 尺寸 */
  --appbar-h:48px;
  --tabbar-h:56px;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}

/* ---------- 2. 基础重置 ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.5;color:var(--t1);
  background:var(--bg);
  /* 内容区下方留白：tab 栏 56 + 安全区 + 呼吸位 */
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;font-size:14px;}

/* ---------- 3. 顶部标题栏（返回 / 标题 / 操作） ---------- */
.appbar{
  position:sticky;top:0;z-index:50;
  height:calc(var(--appbar-h) + var(--safe-t));
  padding:var(--safe-t) 8px 0;
  display:flex;align-items:center;gap:4px;
  background:#fff;border-bottom:1px solid var(--line);
}
.appbar.is-fixed{position:fixed;left:0;right:0;}
.appbar__title{
  flex:1;text-align:center;font-size:17px;font-weight:600;letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.appbar__btn{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--t1);font-size:15px;padding:0 8px;
}
.appbar__btn--text{font-size:14px;color:var(--c-primary);font-weight:500;}
.appbar__btn--text.is-disabled{color:var(--t3);pointer-events:none;}
/* 带副标题的标题栏 */
.appbar__titlewrap{flex:1;min-width:0;text-align:center;line-height:1.2;}
.appbar__titlewrap small{display:block;font-size:11px;color:var(--t3);font-weight:400;}

/* ---------- 4. 页面容器 ---------- */
.page{padding:12px 12px 8px;}
.section{margin-bottom:14px;}
.section__head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px;}
.section__title{font-size:15px;font-weight:600;}
.section__title::before{
  content:"";display:inline-block;width:3px;height:14px;border-radius:2px;
  background:var(--c-primary);margin-right:6px;vertical-align:-2px;
}
/* WorkBuddy 20261019 准生产验收：文字链接补齐 36px 触控区（负 margin 抵消视觉位移） */
.section__more{
  font-size:12px;color:var(--t3);
  display:inline-flex;align-items:center;min-height:36px;
  padding:0 6px;margin:-9px -6px -9px 0;
}

/* ---------- 5. 卡片 ---------- */
.card{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sd);
  padding:14px;margin-bottom:10px;
}
.card--flat{box-shadow:none;border:1px solid var(--line);}
.card--pad0{padding:0;overflow:hidden;}

/* 卡片行（标题 + 值 + 箭头） */
.row{display:flex;align-items:center;gap:10px;}
.row + .row{margin-top:10px;}
.row__k{width:76px;flex:none;font-size:13px;color:var(--t3);}
.row__v{flex:1;min-width:0;font-size:14px;color:var(--t1);word-break:break-all;}
.row__v--strong{font-weight:600;}
.row__arrow{flex:none;color:var(--t3);display:flex;}

/* ---------- 6. 数据概览 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.stat{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd);padding:12px 12px 11px;
}
.stat__label{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:4px;}
.stat__num{font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.5px;}
.stat__num small{font-size:12px;font-weight:500;color:var(--t3);margin-left:2px;}
.stat__delta{font-size:11px;color:var(--t3);}
.stat--primary .stat__num{color:var(--c-primary);}
.stat--warn .stat__num{color:var(--c-warn);}
.stat--danger .stat__num{color:var(--c-danger);}
.stat--success .stat__num{color:var(--c-success);}

/* 单行四宫格数字条 */
.stat-bar{display:flex;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd);padding:12px 0;}
.stat-bar__i{flex:1;text-align:center;position:relative;}
.stat-bar__i + .stat-bar__i::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line-2);
}
.stat-bar__n{font-size:18px;font-weight:700;}
.stat-bar__l{font-size:11px;color:var(--t3);margin-top:2px;}

/* ---------- 7. 搜索栏 ---------- */
.search{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;
  background:#fff;border-radius:var(--r-pill);box-shadow:var(--sd);}
.search svg{flex:none;color:var(--t3);}
.search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:var(--t1);
  height:100%;
}
.search input::placeholder{color:var(--t3);}
.search__clear{border:0;background:transparent;color:var(--t3);width:28px;height:44px;display:none;}

/* ---------- 8. 筛选 chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  /* WorkBuddy 20261019 准生产验收：触控区由 32px 提升至 38px（移动端 ≥36px 达标） */
  flex:none;height:38px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;color:var(--t2);font-size:13px;
  display:inline-flex;align-items:center;gap:4px;
}
.chip.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:500;}
.chip__n{font-size:11px;opacity:.8;}
/* 分段控件（工单状态切换） */
.seg{display:flex;background:#fff;border-radius:var(--r);padding:4px;box-shadow:var(--sd);}
.seg__i{
  flex:1;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--t2);border-radius:var(--r-sm);white-space:nowrap;
}
.seg__i.is-active{background:var(--c-primary-50);color:var(--c-primary);font-weight:600;}

/* ---------- 9. 状态徽章 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;
  border-radius:var(--r-sm);font-size:12px;font-weight:500;line-height:1;
}
.badge--primary{background:var(--c-primary-50);color:var(--c-primary);}
.badge--success{background:var(--c-success-50);color:var(--c-success);}
.badge--warn{background:var(--c-warn-50);color:#b45309;}
.badge--danger{background:var(--c-danger-50);color:var(--c-danger);}
.badge--gray{background:#f1f5f9;color:var(--t2);}
.badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
/* 风险标签 */
.tag{
  display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;
  font-size:11px;background:#f1f5f9;color:var(--t2);
}
.tag--danger{background:var(--c-danger-50);color:var(--c-danger);}
.tag--warn{background:var(--c-warn-50);color:#b45309;}
.tag--primary{background:var(--c-primary-50);color:var(--c-primary);}

/* ---------- 10. 列表项（卡片流：状态徽章 + 关键字段 + 箭头） ---------- */
.list{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd);overflow:hidden;}
.item{
  display:flex;align-items:center;gap:10px;padding:14px 12px;min-height:64px;
  border-bottom:1px solid var(--line-2);
}
.item:last-child{border-bottom:0;}
.item:active{background:#fafbfd;}
.item__main{flex:1;min-width:0;}
.item__t{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;}
.item__t span.plate{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3px;}
.item__s{margin-top:5px;font-size:12px;color:var(--t3);display:flex;flex-wrap:wrap;gap:4px 10px;}
.item__arrow{flex:none;color:var(--t3);}
.item__thumb{
  width:52px;height:52px;flex:none;border-radius:10px;
  background:linear-gradient(135deg,#dbeafe,#93c5fd);
  display:flex;align-items:center;justify-content:center;color:#1e40af;font-size:11px;
}
.item--lg{min-height:78px;}

/* 车辆缩略图：CSS 渐变占位（禁止外链资源） */
.thumb-car{
  width:64px;height:48px;flex:none;border-radius:10px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#cfe0ff 0%,#8fb4ff 55%,#5b8def 100%);
}
.thumb-car::after{
  content:"";position:absolute;left:8%;right:8%;bottom:16%;height:34%;
  background:rgba(255,255,255,.85);border-radius:4px 4px 2px 2px;
}
.thumb-car i{
  position:absolute;left:12%;bottom:6%;width:16%;height:12%;border-radius:50% 50% 2px 2px;
  background:#1e293b;box-shadow:34px 0 0 #1e293b;
}

/* ---------- 11. 快捷入口（四宫格） ---------- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sd);padding:14px 6px;}
.quick__i{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;}
.quick__ico{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;
}
.quick__t{font-size:12px;color:var(--t2);}

/* ---------- 12. 步骤条 ---------- */
/* 横向八步 */
.steps{display:flex;gap:0;padding:4px 0 0;}
.steps__i{flex:1;text-align:center;position:relative;}
.steps__i::before{
  content:"";position:absolute;top:11px;left:0;width:100%;height:2px;background:var(--line);
}
.steps__i:first-child::before{left:50%;width:50%;}
.steps__i:last-child::before{width:50%;}
.steps__dot{
  position:relative;z-index:1;width:24px;height:24px;margin:0 auto;border-radius:50%;
  background:#fff;border:2px solid var(--line);color:var(--t3);
  font-size:11px;display:flex;align-items:center;justify-content:center;
}
.steps__i.is-done .steps__dot{background:var(--c-success);border-color:var(--c-success);color:#fff;}
.steps__i.is-current .steps__dot{background:var(--c-primary);border-color:var(--c-primary);color:#fff;box-shadow:0 0 0 4px var(--c-primary-50);}
.steps__i.is-todo .steps__dot{background:#fff;}
.steps__t{font-size:10px;color:var(--t3);margin-top:6px;line-height:1.3;padding:0 2px;}
.steps__i.is-done .steps__t,.steps__i.is-current .steps__t{color:var(--t1);}
.steps__i.is-current .steps__t{font-weight:600;color:var(--c-primary);}

/* 纵向流程（工单轨迹） */
.tl{padding-left:2px;}
.tl__i{display:flex;gap:10px;position:relative;padding-bottom:14px;}
.tl__i:last-child{padding-bottom:0;}
.tl__i::before{
  content:"";position:absolute;left:8px;top:18px;bottom:-2px;width:2px;background:var(--line);
}
.tl__i:last-child::before{display:none;}
.tl__dot{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line);background:#fff;position:relative;z-index:1;margin-top:1px;}
.tl__i.is-done .tl__dot{background:var(--c-success);border-color:var(--c-success);}
.tl__i.is-current .tl__dot{background:var(--c-primary);border-color:var(--c-primary);}
.tl__body{flex:1;min-width:0;margin-top:-1px;}
.tl__t{font-size:14px;font-weight:500;}
.tl__s{font-size:12px;color:var(--t3);margin-top:2px;}

/* ---------- 13. 进度条 ---------- */
.progress{height:6px;border-radius:var(--r-pill);background:#eef2f7;overflow:hidden;}
.progress__bar{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#3b82f6,#2563eb);}
.progress__bar--warn{background:linear-gradient(90deg,#fbbf24,#f59e0b);}
.progress__bar--danger{background:linear-gradient(90deg,#f87171,#ef4444);}
.progress__bar--success{background:linear-gradient(90deg,#4ade80,#16a34a);}

/* ---------- 14. 按钮 ---------- */
.btn{
  min-height:44px;padding:0 16px;border-radius:var(--r);border:1px solid var(--line);
  background:#fff;color:var(--t1);font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn--primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.btn--primary:active{background:var(--c-primary-600);}
.btn--danger{background:#fff;border-color:#fecaca;color:var(--c-danger);}
.btn--success{background:var(--c-success);border-color:var(--c-success);color:#fff;}
.btn--ghost{background:#fff;}
.btn--block{width:100%;}
.btn--pill{border-radius:var(--r-pill);}
.btn--sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:var(--r-sm);}
.btn--lg{min-height:50px;font-size:16px;}
.btn:disabled,.btn.is-disabled{opacity:.45;pointer-events:none;}
.btn-row{display:flex;gap:10px;}
.btn-row .btn{flex:1;}

/* ---------- 15. 底部吸底操作栏 ---------- */
.bottombar{
  position:fixed;left:0;right:0;z-index:60;
  bottom:calc(var(--tabbar-h) + var(--safe-b));
  background:#fff;box-shadow:var(--sd-bar);
  padding:10px 12px calc(10px);
  display:flex;gap:10px;align-items:center;
}
.bottombar__tip{font-size:11px;color:var(--t3);flex:none;}

/* ---------- 16. 底部 Tab 栏（5 tab） ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-top:1px solid var(--line);
  display:flex;
}
.tabbar__i{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--t3);font-size:10px;position:relative;
}
.tabbar__i svg{width:24px;height:24px;}
.tabbar__i.is-active{color:var(--c-primary);}
.tabbar__i .tip{
  position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--c-danger);color:#fff;font-size:10px;line-height:16px;text-align:center;
}

/* ---------- 17. Toast ---------- */
.toast{
  position:fixed;left:50%;z-index:200;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 24px);
  transform:translate(-50%,8px);
  max-width:76vw;padding:10px 16px;border-radius:var(--r);
  background:rgba(15,23,42,.92);color:#fff;font-size:13px;text-align:center;line-height:1.4;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.toast.is-show{opacity:1;transform:translate(-50%,0);}
.toast--ok{background:rgba(22,163,74,.95);}
.toast--warn{background:rgba(180,83,9,.95);}
.toast--err{background:rgba(220,38,38,.95);}
.toast--loading{background:rgba(15,23,42,.92);}

/* ---------- 18. 弹层 / 二次确认（误操作防护） ---------- */
.mask{
  position:fixed;inset:0;z-index:150;background:rgba(15,23,42,.45);
  display:none;align-items:flex-end;
}
.mask.is-show{display:flex;}
.sheet{
  width:100%;background:#fff;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + var(--safe-b));
  animation:sheetUp .22s ease;
}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet__t{font-size:16px;font-weight:600;text-align:center;}
.sheet__d{font-size:13px;color:var(--t2);margin-top:8px;text-align:center;line-height:1.6;}
.sheet__body{margin-top:12px;}
.sheet__opts{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.sheet__opt{
  min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  font-size:14px;background:#fff;text-align:left;
}
.sheet__opt.is-active{border-color:var(--c-primary);background:var(--c-primary-50);color:var(--c-primary);}
.sheet__acts{display:flex;gap:10px;margin-top:14px;}

/* ---------- 19. 空状态 ---------- */
.empty{padding:48px 24px;text-align:center;color:var(--t3);}
.empty__ico{
  width:88px;height:88px;margin:0 auto 14px;border-radius:50%;
  background:linear-gradient(160deg,#f1f5f9,#e2e8f0);
  display:flex;align-items:center;justify-content:center;color:#94a3b8;
}
.empty__t{font-size:15px;color:var(--t2);font-weight:500;}
.empty__d{font-size:13px;margin-top:6px;line-height:1.6;}
.empty .btn{margin-top:16px;}

/* ---------- 20. 骨架屏（加载态） ---------- */
.skel{background:#eef2f7;border-radius:6px;position:relative;overflow:hidden;}
.skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:skel 1.2s infinite;
}
@keyframes skel{100%{transform:translateX(100%);}}
.skel--t{height:14px;}
.skel--n{height:26px;width:80px;}

/* ---------- 21. 提示条 / 告警条 ---------- */
.notice{
  display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);
  font-size:13px;line-height:1.5;
}
.notice--warn{background:var(--c-warn-50);color:#92400e;}
.notice--danger{background:var(--c-danger-50);color:#991b1b;}
.notice--info{background:var(--c-primary-50);color:#1e40af;}
.notice svg{flex:none;margin-top:1px;}
.notice__x{margin-left:auto;flex:none;}

/* ---------- 22. 合规校验清单 ---------- */
.check{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-2);}
.check:last-child{border-bottom:0;}
.check__ico{width:22px;height:22px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.check__ico--ok{background:var(--c-success-50);color:var(--c-success);}
.check__ico--warn{background:var(--c-warn-50);color:#b45309;}
.check__ico--err{background:var(--c-danger-50);color:var(--c-danger);}
.check__body{flex:1;min-width:0;}
.check__t{font-size:14px;}
.check__s{font-size:12px;color:var(--t3);margin-top:2px;}

/* ---------- 23. 网格拍照入口 ---------- */
.shot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.shot__i{
  min-height:96px;border-radius:var(--r);border:1px dashed #cbd5e1;background:#f8fafc;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--t2);
}
.shot__i.is-done{border-style:solid;border-color:#bbf7d0;background:var(--c-success-50);color:#15803d;}
.shot__i.is-bad{border-style:solid;border-color:#fecaca;background:var(--c-danger-50);color:#b91c1c;}
.shot__n{font-size:11px;color:var(--t3);}

/* ---------- 24. 杂项 ---------- */
.hr{height:8px;background:transparent;}
.muted{color:var(--t3);}
.strong{font-weight:600;}
.num{font-variant-numeric:tabular-nums;}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.flex{display:flex;align-items:center;gap:8px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mb10{margin-bottom:10px;}
.center{text-align:center;}
.hide{display:none !important;}
/* 弱网提示条 */
.netbar{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  background:#fff7ed;color:#9a3412;font-size:12px;
}

/* 列表项左侧小图标（用于法务 / 设置等纯文本入口） */
.item__ic{
  width:34px;height:34px;flex:none;border-radius:9px;
  background:var(--c-primary-50);color:var(--c-primary);
  display:flex;align-items:center;justify-content:center;
}