/* ============================================================
   生产线快速响应平台 · 手机端
   最大宽 480px 居中，手机优先；样式沿用 UI 原型
   ============================================================ */
:root{
  --bg:#F4F3EF; --surface:#FFFFFF; --line:#E3E1DA; --line-strong:#C9C7BE; --soft:#FAFAF8;
  --text:#23231F; --muted:#6B6A63; --hint:#9A988F;
  --primary:#185FA5; --primary-soft:#E6F1FB; --primary-deep:#0C447C;
  --danger:#A32D2D; --danger-soft:#FCEBEB; --danger-deep:#791F1F;
  --warn:#BA7517; --warn-soft:#FAEEDA; --warn-deep:#633806;
  --ok:#0F6E56; --ok-soft:#E1F5EE; --ok-deep:#085041;
  --purple:#534AB7; --purple-soft:#EEEDFE; --purple-deep:#3C3489;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:15px;
}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
button,input,textarea{font-family:inherit}

/* ---------- 外壳：最大 480 居中 ---------- */
.app-shell{
  position:relative;width:100%;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line),0 12px 40px -20px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
}
.hidden{display:none !important}

/* ---------- 顶部 appbar ---------- */
.appbar{
  position:sticky;top:0;z-index:30;
  height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface);
}
.appbar .who{font-size:12px;color:var(--muted);min-width:0;display:flex;align-items:center;gap:6px}
.appbar .who b{color:var(--text);font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .act{font-size:13px;color:var(--primary);background:none;border:none;cursor:pointer;padding:6px 2px;display:flex;align-items:center;gap:4px}
.appbar .back-link{font-size:13px;color:var(--primary);background:none;border:none;cursor:pointer;padding:6px 2px}
#appbarStep2{justify-content:flex-start;gap:8px;padding-left:0}
#appbarStep2 .who{margin-right:auto}
.appbar .back-icon{
  width:48px;height:52px;flex:none;margin-left:-4px;
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.appbar .back-icon svg{width:22px;height:22px;stroke:var(--primary);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.appbar .menu-btn{
  width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.appbar .menu-btn svg{width:18px;height:18px;stroke:var(--text);stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- 菜单弹层 ---------- */
.menu-pop{
  position:absolute;top:54px;right:12px;z-index:50;width:168px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.25);overflow:hidden;
}
.menu-pop button{
  width:100%;text-align:left;padding:13px 16px;font-size:14px;border:none;background:none;
  color:var(--text);cursor:pointer;
}
.menu-pop button:hover{background:var(--soft)}
.menu-pop button.danger-item{color:var(--danger)}
.menu-mask{position:fixed;inset:0;z-index:40}

/* ---------- 主体滚动区 ---------- */
.screen{flex:1;display:none;flex-direction:column}
.screen.on{display:flex}
.body-pad{flex:1;padding:16px 16px 110px;overflow-x:hidden}
h2.q{font-size:19px;font-weight:600}
p.sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.65}

/* ---------- 底部固定操作区（步骤页提交/下一步按钮） ---------- */
.foot{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:20;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface);
}

/* ---------- 按钮（沿用原型） ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:52px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font-size:16px;font-weight:600;cursor:pointer;
}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;height:56px}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;height:56px}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;height:56px}
.btn.ghost{height:44px;font-size:13px;font-weight:500;color:var(--muted);border-color:var(--line)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{height:44px;font-size:14px;border-radius:10px;font-weight:600}
.btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 分段 tabs ---------- */
.tabs{display:flex;background:#F0EEE7;border-radius:11px;padding:4px;margin-bottom:16px}
.tab{flex:1;text-align:center;font-size:13.5px;font-weight:600;padding:10px 0;border-radius:8px;color:var(--muted);cursor:pointer}
.tab.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* ---------- 线体按钮 ---------- */
.lns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ln{
  height:52px;border:1px solid var(--line-strong);border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;
  color:var(--muted);background:var(--surface);cursor:pointer;
}
.ln.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ln.on.warnln{background:var(--warn);border-color:var(--warn)}

/* 字段标题行 + 右侧快捷链接 */
.fld-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.fld-head label{margin-bottom:0}
.head-links{display:flex;gap:10px;flex:none}
.head-links .reuse{font-size:11.5px;white-space:nowrap}
.head-links .reuse.ocr{margin-left:0}

/* ---------- 表单 ---------- */
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;font-weight:600}
.fld label em{font-style:normal;color:var(--hint);font-weight:400}
.inp{
  width:100%;height:48px;border:1px solid var(--line-strong);border-radius:11px;
  padding:0 14px;font-size:15px;background:var(--surface);color:var(--text);
}
textarea.inp{height:auto;min-height:92px;padding:12px 14px;line-height:1.6;resize:vertical}
.inp::placeholder{color:var(--hint)}
.inp:focus{outline:none;border-color:var(--primary)}
.fld .hint-line{font-size:11.5px;color:var(--hint);margin-top:6px}
.reuse{font-size:12.5px;color:var(--primary);text-decoration:underline;text-underline-offset:3px;background:none;border:none;cursor:pointer;padding:0}
.reuse.ocr{color:var(--purple);margin-left:12px;font-weight:600}
.reuse.ocr:disabled{opacity:.5}
.auto-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--hint);margin-top:8px;gap:10px}

/* ---------- chips ---------- */
.grp{margin-bottom:14px}
.grp .gl{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:8px}
.grp .gl em{font-style:normal;font-size:11px;color:var(--hint);font-weight:400;margin-left:5px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  font-size:13px;padding:8px 13px;border-radius:9px;border:1px solid var(--line);
  color:var(--muted);background:var(--surface);cursor:pointer;user-select:none;
}
.chip.on{background:var(--danger-soft);border-color:#F09595;color:var(--danger-deep);font-weight:600}
.chip.blue.on{background:var(--primary-soft);border-color:#85B7EB;color:var(--primary-deep)}

/* ---------- 不良数量 ---------- */
.count-row{display:flex;align-items:center;gap:12px}
.count-row .num{
  width:88px;height:48px;border:1px solid var(--line-strong);border-radius:11px;
  text-align:center;font-size:20px;font-weight:600;
}
.count-row .num:focus{outline:none;border-color:var(--primary)}
.count-row .u{font-size:13px;color:var(--muted)}

/* ---------- 照片 ---------- */
.photo-grid{display:flex;gap:8px;flex-wrap:wrap}
.photo-thumb{position:relative;width:76px;height:76px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb .del{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(122,31,31,.9);color:#fff;font-size:13px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.photo-add{
  width:76px;height:76px;border:1px dashed var(--line-strong);border-radius:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);background:var(--surface);cursor:pointer;
}
.photo-add svg{width:22px;height:22px;stroke:var(--muted);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.photo-add span{font-size:10.5px}

/* ---------- 产线验证照片 ---------- */
.vp-block{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.vp-label{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
.vp-label em{font-style:normal;font-weight:400;color:var(--hint);font-size:11px;margin-left:4px}
.vp-grid{display:flex;gap:8px;flex-wrap:wrap}
.vp-thumb{position:relative;width:76px;height:76px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.vp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vp-del{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(122,31,31,.9);color:#fff;font-size:13px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.vp-add{
  width:76px;height:76px;border:1px dashed var(--line-strong);border-radius:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);background:var(--surface);cursor:pointer;
}
.vp-add svg{width:22px;height:22px;stroke:var(--primary);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vp-add span{font-size:10px;color:var(--primary)}
.vp-saved{margin-top:8px}
.vp-saved-t{font-size:12px;color:var(--muted);margin-bottom:5px}
.vp-imgs{display:flex;gap:6px;flex-wrap:wrap}
.vp-img{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}

/* ---------- 快捷短语（发提醒） ---------- */
.quick{display:flex;flex-direction:column;gap:8px}
.qb{
  text-align:left;border:1px solid var(--line-strong);border-radius:12px;
  padding:13px 15px;font-size:14px;font-weight:600;background:var(--surface);
  color:var(--text);cursor:pointer;
}
.qb small{display:block;font-size:11px;color:var(--hint);font-weight:400;margin-top:3px}
.qb.on{background:var(--warn-soft);border-color:#EF9F27;color:var(--warn-deep)}

/* ---------- 播报预览 ---------- */
.speak{border:1px solid #F5D9A8;background:var(--warn-soft);border-radius:12px;padding:13px 14px;margin-top:14px}
.speak .h{font-size:11px;color:var(--warn-deep);font-weight:600}
.speak .c{font-size:14.5px;color:var(--warn-deep);margin-top:6px;line-height:1.65}
.speak .r{font-size:11px;color:var(--warn-deep);opacity:.85;margin-top:8px}

/* ---------- 卡片（待办 / 我的） ---------- */
.section-title{
  font-size:14px;font-weight:600;margin:18px 0 10px;display:flex;align-items:center;gap:8px;
}
.section-title:first-child{margin-top:2px}
.section-title::before{content:"";width:3px;height:14px;background:var(--primary);border-radius:2px}
.section-title .cnt{font-size:11px;font-weight:500;color:var(--muted)}

.card{
  border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:10px;background:var(--surface);
}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.card .code{font-size:12.5px;font-weight:600;color:var(--muted)}
.card .ttl{font-size:15px;font-weight:600;line-height:1.5}
.card .meta{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.7}
.card .meta b{color:var(--text);font-weight:600}
.card .qty-bad{color:var(--danger-deep);font-weight:600}

.summary{
  border:1px solid var(--line);border-left:4px solid var(--danger);
  border-radius:12px;padding:12px 13px;background:#FFFCFC;margin-bottom:12px;
}
.summary .sn{font-size:14px;font-weight:600}
.summary .dt{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.7}
.summary .dt b{color:var(--danger)}

/* 状态 pill */
.pill{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:5px;white-space:nowrap}
.pill.g{background:var(--ok-soft);color:var(--ok-deep)}
.pill.o{background:var(--warn-soft);color:var(--warn-deep)}
.pill.b{background:var(--primary-soft);color:var(--primary-deep)}
.pill.r{background:var(--danger-soft);color:var(--danger-deep)}
.pill.p{background:var(--purple-soft);color:var(--purple-deep)}

/* 卡片内操作区 */
.card-actions{display:flex;gap:8px;margin-top:12px}
.card-actions .btn{flex:1}
.card .sub-form{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.verify-progress{
  background:var(--primary-soft);border-radius:10px;padding:10px 12px;margin-top:10px;
  font-size:13px;color:var(--primary-deep);font-weight:600;display:flex;align-items:center;justify-content:space-between;
}
.resolved-banner{
  margin-top:10px;background:var(--ok-soft);color:var(--ok-deep);border-radius:10px;
  padding:11px 12px;font-size:13.5px;font-weight:600;text-align:center;
}
.mech-read{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.7}
.mech-read b{color:var(--text)}

/* ---------- 喇叭确认区 ---------- */
.bc-block{
  border:1px solid #F5D9A8;background:var(--warn-soft);border-radius:13px;padding:13px 14px;margin-bottom:12px;
}
.bc-block .bc-head{font-size:12px;font-weight:600;color:var(--warn-deep);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.bc-block .bc-text{font-size:14px;color:var(--warn-deep);line-height:1.65;font-weight:600}
.bc-block .btn{margin-top:11px;height:44px;font-size:14px;background:var(--surface);border-color:#EF9F27;color:var(--warn-deep)}

/* ---------- 空状态 / 加载 ---------- */
.empty{text-align:center;color:var(--hint);font-size:13px;padding:44px 20px;line-height:1.8}
.loading{text-align:center;color:var(--hint);font-size:13px;padding:30px 0}

/* ---------- 登录页 ---------- */
.login-wrap{flex:1;display:flex;flex-direction:column;padding:40px 28px 32px}
.login-logo{
  width:58px;height:58px;border-radius:15px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.login-logo svg{width:30px;height:30px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.login-wrap h1{font-size:21px;font-weight:600}
.login-wrap .tip{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.7;margin-bottom:28px}
.login-error{
  display:none;background:var(--danger-soft);color:var(--danger-deep);
  border-radius:10px;padding:10px 13px;font-size:13px;margin-bottom:14px;line-height:1.6;
}
.login-error.on{display:block}
.login-wrap .btn{margin-top:6px}
.login-wrap .credit{margin-top:20px;text-align:center;font-size:12px;color:#9A988F;letter-spacing:.3px}

/* ---------- 客户只读：照片网格 ---------- */
.cust-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.cust-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#EDEBE3}

/* ---------- 弹层（修改密码） ---------- */
.modal-mask{position:fixed;inset:0;z-index:60;background:rgba(30,28,22,.42);display:flex;align-items:flex-end;justify-content:center}
.modal{
  width:100%;max-width:480px;background:var(--surface);border-radius:18px 18px 0 0;
  padding:20px 18px calc(18px + env(safe-area-inset-bottom));
}
.modal h3{font-size:16.5px;font-weight:600;margin-bottom:16px}
.modal .modal-actions{display:flex;gap:10px;margin-top:6px}
.modal .modal-actions .btn{flex:1}
.modal-error{display:none;font-size:12.5px;color:var(--danger);margin-bottom:10px}
.modal-error.on{display:block}
.modal-ok{display:none;font-size:12.5px;color:var(--ok-deep);margin-bottom:10px}
.modal-ok.on{display:block}

/* ---------- 顶部导航 tabbar ---------- */
.tabbar{
  position:sticky;top:52px;z-index:25;
  display:flex;border-bottom:1px solid var(--line);background:var(--surface);
}
.tabbar .tb{
  flex:1;height:44px;border:none;background:none;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;
}
.tabbar .tb svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tabbar .tb.on{color:var(--primary);font-weight:600;border-bottom-color:var(--primary)}

/* ---------- toast ---------- */
.toast-box{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:8px;width:max-content;max-width:92%;
}
.toast{
  background:rgba(35,35,31,.92);color:#fff;font-size:13.5px;padding:11px 18px;border-radius:10px;
  line-height:1.5;box-shadow:0 8px 24px -8px rgba(0,0,0,.4);animation:toast-in .18s ease;
}
.toast.ok{background:rgba(15,110,86,.95)}
.toast.err{background:rgba(122,31,31,.95)}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- 响应式微调 ---------- */
@supports not (min-height:100dvh){.app-shell{min-height:100vh}}

.login-wrap .icp{margin-top:6px;text-align:center;font-size:11px;color:#9A988F;letter-spacing:.3px}