/* 自用订单助手 - 管理端·专业深蓝主题
   定位:与客户端同一套设计系统(圆角/间距/字号/图标/状态语义共用),仅品牌主色区分——
   客户端橙红(促转化),管理端深蓝(长时间作业、冷静、可信)。
   注意:金额 --price 刻意保留暖色,在冷色界面中作强调,并与客户端"钱=暖色"认知一致。 */
:root {
  --brand: #1257C9;
  --brand-deep: #0B3E9E;
  --brand-soft: #EAF2FF;
  --brand-grad-a: #2E7CF6;
  --brand-grad-b: #0B3E9E;
  --price: #FF5000;
  --bg: #F5F6F7;
  --card: #fff;
  --text: #1F2329;
  --muted: #8A919A;
  --line: #EDEEF0;
  --danger: #FA2C19;
  --radius-card: 16px;
  --radius-input: 10px;
  --radius-pill: 24px;
  --shadow-card: 0 1px 3px rgba(31,35,41,0.05);
  /* 深蓝主题专属:顶栏实色、表头底、行悬停、导航悬停(冷色,避免蓝底泛脏) */
  --topbar-bg: #0F3D91;
  --th-bg: #EFF5FD;
  --row-hover: #F5F9FF;
  --nav-hover: #F2F7FF;
  /* 顶栏实际高度:JS 用 ResizeObserver 实测写入,避免折行后吸顶错位 */
  --topbar-h: 58px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
h2 { font-size: 18px; color: var(--text); }
h3 { font-size: 16px; color: var(--text); margin-bottom: 14px; }

/* 登录 */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--topbar-bg); padding: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.login-wrap[hidden] { display: none; }
.login-card { background: #fff; border-radius: var(--radius-card); padding: 36px 32px; width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(0,0,0,0.14); }
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand .brand-mark { width: 52px; height: 52px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.login-brand h1 { font-size: 20px; color: var(--text); }
.login-brand p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 6px 0; }

/* 顶栏(实色深蓝:B 端作业工具,比渐变更克制) */
.topbar { background: var(--topbar-bg); color: #fff; padding: 12px 20px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 40; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.22); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-title { font-size: 16px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 12px; font-size: 13px; opacity: 0.9; flex-shrink: 0; }
.topbar-right .btn { white-space: nowrap; }
#adminName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16em; }
/* 顶栏标题后的身份标注:一眼看出当前操作人是什么角色(独立于标题,窄屏标题省略时也不被截掉) */
.role-badge { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5;
  background: rgba(255,255,255,0.22); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.role-badge[data-role-code="boss"] { background: #FFB020; color: #4A2B00; border-color: #FFB020; }
.role-badge[data-role-code="finance"] { background: #34C759; color: #05340F; border-color: #34C759; }
.role-badge[data-role-code="production"] { background: #4C9AFF; color: #04264F; border-color: #4C9AFF; }
.role-badge[data-role-code="service"] { background: #B47CFF; color: #2A0B4D; border-color: #B47CFF; }

/* 顶栏「设置」下拉:整合修改密码/退出 */
.tb-menu-wrap { position: relative; }
.tb-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 148px; padding: 6px; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,0.18); }
.tb-menu[hidden] { display: none; }
.tb-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); padding: 10px 12px; border-radius: 8px; white-space: nowrap; }
.tb-menu button:hover { background: #f2f4f7; }

/* 内联图标(统一为客户端风格 SVG) */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.16em; fill: currentColor; flex-shrink: 0; }

/* 布局 */
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h)); }
.sidebar { width: 180px; background: var(--card); border-right: 1px solid var(--line); padding: 12px 8px; flex-shrink: 0; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); overflow-y: auto; align-self: flex-start; }
.nav-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 11px 14px; border: none; background: none; border-radius: var(--radius-input); font-size: 14px; line-height: 1; cursor: pointer; color: var(--text); margin-bottom: 4px; }
.nav-item:hover { background: var(--nav-hover); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.ni-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; }
.ni-ico svg { width: 20px; height: 20px; display: block; }
.content { flex: 1; padding: 20px; min-width: 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.pane-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 搜索框+放大镜:按钮内嵌在输入框右端,不额外占位 */
.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box input { padding-right: 36px; }
.search-btn { position: absolute; right: 3px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.search-btn svg { width: 16px; height: 16px; }
.search-btn:active { background: var(--line); }
/* 「导出记录/导出工单Excel」容器:桌面端透传,按钮照旧平铺在工具条 */
.toolbar-more-actions { display: contents; }
/* 「更多筛选」summary:桌面端隐藏(见下方 821px 媒体查询),这里只管图标按钮本身的图标尺寸 */
.toolbar-more > summary svg { width: 18px; height: 18px; display: block; }
/* 工具条控件统一:输入框/下拉/按钮同高(34px)、同圆角、同边框。下拉的箭头见下方"下拉统一外观"。 */
.toolbar input, .toolbar select { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-input); font-size: 13px; font-family: inherit; color: var(--text); background-color: #fff; }
.toolbar .btn { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; }
.toolbar-date { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.toolbar-date input[type="date"] { padding: 0 8px; min-height: auto; }
/* 移动端"更多筛选":桌面端始终展开(整块透传进工具条,不留盒子)。
   <details> 未展开时浏览器会隐藏其内容(新版 Chromium 走 ::details-content),所以除了 display:contents 还要显式放开内容。 */
@media (min-width: 821px) {
  /* 桌面端控件多、窄屏会折行:整体靠右,让主按钮始终贴在右边缘,与单行时位置一致 */
  .toolbar { justify-content: flex-end; }
  .toolbar .toolbar-more, .toolbar .toolbar-more > .toolbar-more-body { display: contents; }
  .toolbar .toolbar-more > summary { display: none; }
}
/* 独立成条:不支持 ::details-content 的浏览器会整条丢弃,不能和上面的选择器写在同一条规则里 */
@media (min-width: 821px) {
  .toolbar .toolbar-more::details-content { display: contents; content-visibility: visible; }
}
.list-count { font-size: 12px; color: var(--muted); margin: 4px 2px 6px; }
.list-error { padding: 20px; text-align: center; color: var(--danger); background: #fff; border-radius: var(--radius-input); }

/* 按钮 */
.btn { border: none; border-radius: var(--radius-input); padding: 9px 16px; font-size: 14px; cursor: pointer; font-weight: 600; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { background: var(--brand-deep); }
.btn-ghost { background: #eef1f5; color: var(--text); }
.btn-small { padding: 7px 12px; font-size: 13px; }
.btn-danger { background: #fdeaea; color: var(--danger); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 表格 */
.table-wrap { background: var(--card); border-radius: var(--radius-card); overflow: auto; box-shadow: var(--shadow-card); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef2f6; white-space: nowrap; }
th { background: var(--th-bg); color: var(--muted); font-weight: 600; position: sticky; top: 0; }
tr:hover td { background: var(--row-hover); }
td .btn { margin-right: 4px; }
.link { color: var(--brand); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.status-pending { background: #fff4e0; color: #b07d12; }
/* 已确认/待核对:原为蓝色,品牌转深蓝后改靛紫避让(浅紫底+深紫字,靠明度与色相双重区分) */
.status-confirmed { background: #F0EBFF; color: #5B44D9; }
.status-progress { background: #e6f7f5; color: #0f9c8d; }
.status-done { background: #e8f6e8; color: #2f9e44; }
.status-cancelled { background: #fdeaea; color: #c92a2a; }
.empty-row td { text-align: center; color: var(--muted); padding: 26px; }
/* 无表格包裹的空态(工序/售后用 div.empty-row) */
div.empty-row { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.money { font-weight: 600; color: var(--text); }

/* 表单 */
.form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.form-row .field { flex: 1; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field span { font-size: 13px; color: var(--text); font-weight: 600; }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: var(--radius-input); padding: 9px 10px; font-size: 16px; outline: none; background: #fbfdff; }
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field.check { flex-direction: row; align-items: center; gap: 8px; }
.field.check input { width: auto; }
.dyn-fieldset { border: 1px dashed var(--line); border-radius: var(--radius-input); padding: 12px; margin-bottom: 12px; }
.dyn-fieldset legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.dyn-fieldset .field { margin-bottom: 0; margin-top: 8px; }
.dyn-fieldset .check { margin-bottom: 6px; }

/* ============ 下拉统一外观 ============
   浏览器原生 select 自带系统箭头和系统描边,和同排的输入框、按钮不是一个观感(浅边框/圆角对不上),
   所以整站去掉原生外观,统一用设计系统的圆角、边框与线性箭头。放在表单规则之后,避免被 background 简写覆盖。 */
.toolbar select, .field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8 9.5 4.5' fill='none' stroke='%238A919A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px 11px;
  cursor: pointer;
}

/* ============ 手写签名区(核对收款/归档/复核/例外开工 共用) ============ */
.sign-host { margin: 12px 0 4px; }
.sign-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
/* 文字一律单行不折行;手机上按钮均分宽度,三个/四个签名方式都要在一行放下 */
.sign-tab { border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; white-space: nowrap; min-width: 0; text-align: center; }
/* 手机扫码签只在电脑端出现:手机扫不了自己屏幕上的二维码(JS 里也做了兜底与回落) */
@media (hover: none) and (pointer: coarse) {
  .sign-tab[data-sign-mode="qr"] { display: none !important; }
}
.sign-tab.active { background: var(--brand-soft); border-color: #C9DEFF; color: var(--brand-deep); }
@media (max-width: 560px) {
  .sign-tabs { gap: 4px; }
  .sign-tab { flex: 1 1 0; padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 375px) {
  .sign-tab { font-size: 12px; }
}
.sign-pad-wrap { position: relative; border: 1px dashed #C9CFD6; border-radius: var(--radius-input); background: #fff; overflow: hidden; }
/* 签名基准线:只是视觉引导,不画进导出的位图 */
.sign-pad-wrap::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 28%; border-top: 1px dashed #E5E8EB; pointer-events: none; }
.sign-canvas { display: block; width: 100%; touch-action: none; -webkit-touch-callout: none; user-select: none; cursor: crosshair; }
.sign-pad-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #B7BDC4; font-size: 13px; pointer-events: none; }
.sign-pad-wrap.has-ink .sign-pad-placeholder { display: none; }
.sign-pad-tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sign-pad-tip { font-size: 12px; color: var(--muted); }
.sign-hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 8px; }
/* 触屏设备(手机/平板):手机端只要求手写,不显示"选填密码" */
@media (hover: none) and (pointer: coarse) {
  .sign-extra-pw { display: none; }
}

/* 扫码签 / 指纹签面板 */
.qr-sign { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.qr-sign-img { width: 200px; height: 200px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-input); background: #fff; display: flex; align-items: center; justify-content: center; }
.qr-sign-img img { width: 100%; height: 100%; display: block; border-radius: var(--radius-input); }
.qr-sign-img:empty::after { content: "二维码"; color: #C6CBD1; font-size: 13px; }
.qr-sign-side { flex: 1 1 200px; min-width: 180px; }
.qr-sign-status { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.qr-sign-status.ok { color: #2f9e44; }
.qr-sign-status.warn { color: var(--brand-deep); }
.qr-sign-tip { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.finger-sign { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.finger-status { font-size: 13px; color: var(--text); }
.finger-status.ok { color: #2f9e44; font-weight: 600; }
.finger-status.warn { color: var(--danger); }
.sign-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 6px; }
/* 手机端签名页:不需要"手机扫码签"这一项 */
.sign-host[data-simple="1"] [data-sign-mode="qr"] { display: none; }
@media (max-width: 560px) {
  .qr-sign { flex-direction: column; align-items: center; }
  .qr-sign-img { width: 168px; height: 168px; }
}

/* ============ 待办条(订单页顶部) ============ */
/* 把"现在该做什么"放在最上面:待核对收款是第一待办,以前它只是一个灰按钮 */
.todo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.todo-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 14px; font-size: 13px; color: var(--text); font-family: inherit;
}
.todo-chip b { font-size: 14px; font-weight: 700; color: var(--text); }
.todo-chip:hover { border-color: var(--brand); color: var(--brand-deep); }
.todo-chip.primary { background: var(--brand-soft); border-color: #C9DEFF; color: var(--brand-deep); }
.todo-chip.primary b { color: var(--brand-deep); }
.todo-empty { font-size: 13px; color: var(--muted); }

/* ============ 收款面板(订单详情) ============ */
.pay-panel { border: 1px solid var(--line); border-radius: var(--radius-input); padding: 12px 14px; margin-bottom: 14px; background: #fafcfe; }
.pay-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pay-panel-head .btn { margin-left: auto; }
.pay-figures { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.pay-figures b { color: var(--text); font-size: 14px; }
.pay-figures .pay-ok { color: #2f9e44; }
.pay-figures .pay-warn { color: var(--danger); }
.pay-line { font-size: 13px; color: var(--text); line-height: 1.7; }
.pay-hint { font-size: 13px; color: #b07d12; background: #fff4e0; border-radius: 8px; padding: 6px 10px; margin-top: 8px; }

/* 在途单据提示条(钉钉式:单据状态挂在业务对象上) */
.ap-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between;
  background: var(--brand-soft); color: var(--brand-deep); border: 1px solid #C9DEFF;
  border-radius: var(--radius-input); padding: 10px 12px; margin-bottom: 14px; font-size: 13px;
}
/* 文字整体靠左成组,按钮单独靠右(不用 space-between 把句子拉散) */
.ap-banner-text { flex: 1 1 auto; min-width: 0; }

/* 弹窗内行内告警(带直达动作,替代干巴巴的一条 toast) */
.inline-alert {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between;
  background: #fdeaea; border: 1px solid #F8C9C9; border-radius: var(--radius-input);
  padding: 10px 12px; margin-top: 12px; font-size: 13px;
}
.inline-alert .err-text { color: var(--danger); font-weight: 600; }

/* ============ 钉钉式垂直流程时间线 ============ */
.flow-section { margin-bottom: 16px; }
.flow-hint { font-weight: 400; color: var(--brand-deep); margin-left: 10px; }
.flow-tl { list-style: none; position: relative; margin: 4px 0 0; }
.flow-node { position: relative; display: flex; gap: 12px; padding: 0 0 16px 0; }
.flow-node:last-child { padding-bottom: 0; }
/* 竖线:连到下一个节点(最后一个不画) */
.flow-node:not(:last-child)::before {
  content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line);
}
.flow-node.done:not(:last-child)::before { background: #BBD3F7; }
.flow-dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #eef1f5; color: var(--muted); font-size: 12px; font-weight: 700;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.flow-dot .ic { width: 13px; height: 13px; }
.flow-node.done .flow-dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 1px var(--brand); }
.flow-node.current .flow-dot { background: #fff; box-shadow: 0 0 0 3px #C9DEFF; }
.flow-node.reject .flow-dot { background: var(--danger); color: #fff; box-shadow: 0 0 0 1px var(--danger); }
.flow-body { flex: 1; min-width: 0; padding-top: 1px; }
.flow-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-title { font-size: 14px; font-weight: 600; color: var(--text); }
.flow-time { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.flow-who { font-size: 13px; color: var(--text); margin-top: 2px; }
/* 审批链(钉钉风格):头像 + 姓名 + 步骤,箭头相连;待复核位为灰底"?" */
.flow-approvers { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ap-step { display: inline-flex; align-items: center; gap: 7px; }
.av-wrap { position: relative; flex: none; }
.av-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--av, #3370ff); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; user-select: none; }
.av-badge.ghost { background: #eef1f6; color: #98a2b3; font-weight: 500; }
.av-mark { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #0fa35b; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.av-mark .ic { width: 9px; height: 9px; }
.ap-meta { display: inline-flex; flex-direction: column; line-height: 1.3; }
.ap-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ap-role { font-size: 11.5px; color: var(--muted); }
.ap-step.pending .ap-name { color: var(--muted); font-weight: 500; }
.ap-arrow { width: 22px; height: 1px; background: var(--line); flex: none; position: relative; }
.ap-arrow::after { content: ""; position: absolute; right: 0; top: -2.5px; border: 3px solid transparent; border-right-width: 0; border-left-color: var(--line); }
.flow-note { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.6; word-break: break-word; }
.flow-sign { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.flow-sign img { max-height: 56px; max-width: 200px; border-bottom: 1px solid var(--line); }
.flow-act { margin-top: 8px; }
.flow-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); }
.flow-tag.ok { background: #e8f6e8; color: #2f9e44; }
.flow-tag.warn { background: #fff4e0; color: #b07d12; }
.flow-tag.bad { background: #fdeaea; color: #c92a2a; }
.flow-tag.muted { background: #eef1f5; color: var(--muted); }
/* 当前节点整块轻高亮,便于扫一眼就定位 */
.flow-node.current .flow-body { background: var(--brand-soft); border-radius: var(--radius-input); padding: 8px 10px; margin: -8px 0 -4px; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(31,35,41,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-mask[hidden] { display: none; }
/* 撤回申请小窗:叠在审批详情弹窗之上 */
#withdrawModal { z-index: 110; }
/* 全局兜底:.field 的 flex、.modal-actions .btn-primary 的 inline-block 等 display 声明会盖掉 UA 的 [hidden],
   导致 JS 里 el.hidden=true 失效(审批弹窗「你只能撤回」却仍显示「复核通过并执行」即此坑),全局显式还原 */
[hidden] { display: none !important; }
.modal { background: #fff; border-radius: var(--radius-card); padding: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 560px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.14); }
.modal-wide { max-width: min(960px, 94vw); }
.modal-center { max-width: 420px; text-align: center; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.modal-actions .btn-primary { text-decoration: none; display: inline-block; }
/* 订单详情卡:吸顶标题栏 + 右上角关闭按钮(长卡片滚动时始终可见) */
.modal-detail { padding: 0; }
.modal-detail .modal-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px 22px; background: #fff; border-bottom: 1px solid #edf0f4; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.modal-detail .modal-head h3 { margin: 0; min-width: 0; }
.modal-detail #orderDetailBody { padding: 16px 22px 0; }
.modal-detail .modal-actions { margin-top: 0; padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px)); }
.modal-x { flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid #d9dfe7; border-radius: 50%; background: #fff; color: #46525f; font-size: 20px; line-height: 34px; text-align: center; cursor: pointer; }
.modal-x:hover { background: #f3f6f9; }
.qr-link { font-size: 12px; color: var(--muted); word-break: break-all; margin: 6px 0; }

/* 订单详情 */
.detail-meta { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 12px; }
.detail-items { border: 1px solid var(--line); border-radius: var(--radius-card); overflow-x: auto; margin-bottom: 16px; }
.detail-items table { font-size: 13px; min-width: 700px; }
.progress-form { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 4px; }
.progress-form h4 { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.save-ok { color: #2f9e44; font-size: 13px; font-weight: 600; margin-left: 10px; }
.save-err { color: var(--danger); font-size: 13px; font-weight: 600; margin-left: 10px; }
.timeline { border-left: 2px solid var(--brand); margin-left: 6px; padding-left: 16px; display: flex; flex-direction: column; gap: 12px; }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -22.5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.tl-title { font-weight: 600; font-size: 13px; }
.tl-desc { font-size: 13px; color: var(--text); }
.tl-tracking { font-size: 13px; color: var(--text); font-weight: 600; }
.tl-time { font-size: 11px; color: var(--muted); }
.progress-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.progress-actions .field { margin-bottom: 0; flex: 1; min-width: 130px; }

/* 付款状态徽章 */
.pay-none { background:#f1f3f5; color:#868e96; }
.pay-await { background:#fff4e0; color:#b07d12; }
.pay-review { background:#F0EBFF; color:#5B44D9; }
.pay-partial { background:#E6F7F5; color:#0F9C8D; }
.pay-paid { background:#e8f6e8; color:#2f9e44; }

/* ============ 付款门禁(定金开工 / 尾款发货) ============ */
.gate-panel { border: 1px solid #FFE2B8; background: #FFFBF3; border-radius: var(--radius-input); padding: 10px 12px; margin-bottom: 14px; }
.gate-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text); }
.gate-row + .gate-row { margin-top: 8px; }
.gate-tip { color: var(--muted); font-size: 12px; }
.gate-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.gate-state.ok { color: #2f9e44; }
.gate-state.block { color: #b07d12; }
.gate-state.exempt { color: var(--brand-deep); }
.tag.gate-exempt { background: #FFF1E9; color: #C2410C; }

/* 门禁锁定态(未达开工条件时替代进度表单) */
.gate-locked { border: 1px dashed #FFD8A8; background: #FFFBF3; border-radius: var(--radius-input); padding: 14px; margin-top: 4px; }
.gate-locked > b { display: block; font-size: 14px; color: #b07d12; margin-bottom: 6px; }
.gate-locked p { font-size: 13px; color: var(--text); line-height: 1.7; }
.gate-locked-tip { color: var(--muted); margin-top: 4px; }
.gate-locked-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pay-voucher { margin: 8px 0; }
.pay-voucher-img { max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--line); display: block; margin-bottom: 6px; cursor: zoom-in; }
.pay-voucher-link { font-size: 13px; color: var(--brand); text-decoration: underline; }
.pay-voucher-none { color: var(--muted); font-size: 13px; margin: 8px 0; }

/* 凭证查看器:整屏看图(PDF 由服务端渲染成页面图,微信内也能直接看,不必跳浏览器) */
.vv-mask { background: rgba(15,18,22,0.9); }
.vv-box { width: 100%; max-width: min(880px, 96vw); max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; gap: 10px; position: relative; }
.vv-stage { flex: 1; min-height: 0; overflow: auto; background: #fff; border-radius: 12px; display: flex; align-items: flex-start; justify-content: center; padding: 8px; }
.vv-stage img { max-width: 100%; height: auto; display: block; }
.vv-close { position: absolute; top: -8px; right: -2px; z-index: 2; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); color: #1f2329; font-size: 15px; cursor: pointer; }
.vv-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vv-page { color: #fff; font-size: 13px; font-weight: 600; }
.vv-orig { color: #fff; font-size: 12px; text-decoration: underline; opacity: 0.85; }
.pay-reject { color: var(--danger); font-size: 13px; margin: 8px 0; }

/* 订单分页控件 */
.orders-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
.orders-pager-btn { border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 13px; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.orders-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.orders-pager-btn:not(:disabled):hover { background: var(--brand-soft); color: var(--brand-deep); }
.orders-pager-info { font-size: 13px; color: var(--muted); }

/* 权限点 chip */
.perm-chip { display:inline-block; background:#eef1f5; color:#4a5568; font-size:11px; padding:2px 8px; border-radius:10px; margin:2px 4px 2px 0; }
/* 收款设置卡片 */
.pay-config-item { border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; background:#fafcfe; }
.pay-config-head { font-size:15px; margin-bottom:8px; color:var(--text); }
.pay-config-item .btn { margin-top:8px; }

/* 收款二维码上传 */
.qr-upload { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.qr-preview { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.qr-none { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; background: #fafcfe; }
.qr-file-input { font-size: 13px; }
.qr-file-tip { font-size: 12px; color: var(--muted); }

/* ============ 订单卡片(移动端;桌面端隐藏) ============ */
.order-cards { display: none; }
.ord-card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.ord-card:active { background: #f7f8fa; }
/* 行内按钮区不继承卡片的手型指针(按钮自己是 pointer),整行可点进详情 */
tbody tr[data-order-card] { cursor: pointer; }
.ord-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ord-no { font-weight: 700; font-size: 14px; word-break: break-all; }
.ord-sub { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ord-mid { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord-amount { font-size: 16px; font-weight: 700; color: var(--price); }
.ord-count { font-size: 12px; color: var(--muted); }
.ord-time { margin-top: 6px; font-size: 12px; color: var(--muted); }
.ord-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ord-actions .btn { flex: 1 1 auto; min-height: 40px; }

/* ============ 移动端适配 ============ */
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  /* 导航条横向滚动:右侧渐隐提示可滑动 + 吸附 */
  .sidebar { width: 100%; display: flex; gap: 4px; border-right: none; border-bottom: 1px solid var(--line); padding: 8px; overflow-x: auto; position: sticky; top: var(--topbar-h); height: auto; align-self: auto; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
  .sidebar::-webkit-scrollbar { width: 0; height: 0; }
  .nav-item { flex-direction: column; justify-content: center; gap: 3px; margin-bottom: 0; white-space: nowrap; flex: 1 1 0; min-width: 68px; min-height: 54px; padding: 7px 6px; font-size: 12px; scroll-snap-align: start; }
  .nav-badge { position: absolute; top: 4px; right: 8px; margin-left: 0; }   /* 角标挂右上角,不随列布局掉底 */
  .nav-item.active { font-weight: 600; }
  .ni-ico { width: 20px; height: 20px; }
  .ni-ico svg { width: 18px; height: 18px; }
  .content { padding: 14px; }
  .form-row { flex-direction: column; gap: 0; }
  .pane-head { align-items: stretch; }
  .pane-head h2 { flex: 1 1 100%; }
  /* 筛选区压缩为两行:①搜索框(内嵌放大镜)整行 ②状态/付款/更多并排一行(高度42→38) */
  #tab-orders .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; width: 100%; }
  #tab-orders .toolbar input, #tab-orders .toolbar select { width: 100%; min-height: 38px; height: 38px; }
  #tab-orders .search-box { grid-column: 1 / -1; width: 100%; }
  #tab-orders .search-btn { width: 32px; height: 32px; right: 3px; }
  .btn-small { min-height: 40px; }
  .orders-pager-btn { min-height: 44px; padding: 10px 18px; }
  .modal-wide { max-width: 100%; max-height: 94vh; max-height: 94dvh; }

  /* 更多筛选:移动端收成 44px 图标按钮;点开后整块跨全行,面板在下方展开 */
  #tab-orders .toolbar-more { grid-column: 3; width: auto; }
  #tab-orders .toolbar-more > summary { display: flex; align-items: center; justify-content: center; width: 100%; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-input); background: #fff; color: var(--text); cursor: pointer; list-style: none; }
  #tab-orders .toolbar-more > summary::-webkit-details-marker { display: none; }
  #tab-orders .toolbar-more > summary::after { content: none; }
  #tab-orders .toolbar-more[open] { grid-column: 1 / -1; }
  #tab-orders .toolbar-more[open] > summary { width: 44px; margin-left: auto; background: var(--brand-soft); color: var(--brand); }
  #tab-orders .toolbar-more > .toolbar-more-body { display: none; }
  #tab-orders .toolbar-more[open] > .toolbar-more-body { display: block; padding: 8px 0 2px; }
  #tab-orders .toolbar-more-body .toolbar-date { display: flex; margin-bottom: 8px; }
  #tab-orders .toolbar-more-body .toolbar-date input { flex: 1 1 0; min-width: 0; height: 38px; min-height: 38px; }
  #tab-orders .toolbar-more-body select { width: 100%; margin-bottom: 8px; height: 38px; min-height: 38px; }
  #tab-orders .toolbar-more-actions { display: flex; gap: 8px; }
  #tab-orders .toolbar-more-actions .btn { flex: 1 1 0; min-height: 38px; height: 38px; }
  /* 其他页签的工具条(如审批中心搜索)保持单控件整行 */
  .toolbar { display: grid; grid-template-columns: 1fr; width: 100%; }
  .toolbar > input, .toolbar > select { width: 100%; min-height: 38px; height: 38px; }

  /* 表格 → 卡片堆叠(列名以 data-label 呈现) */
  .table-wrap, .detail-items { background: transparent; box-shadow: none; border: none; overflow: visible; }
  .table-wrap table, .detail-items table { display: block; width: 100%; min-width: 0; font-size: 13px; }
  .table-wrap thead, .detail-items thead { display: none; }
  .table-wrap tbody, .table-wrap tr, .table-wrap td,
  .detail-items tbody, .detail-items tr, .detail-items td { display: block; width: 100%; }
  .table-wrap tr, .detail-items tr { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 10px; padding: 4px 12px; }
  /* 标签/值两列:grid + minmax(0,1fr) 保证长内容(权限点、原因)可换行不撑破 */
  .table-wrap td, .detail-items td { display: grid; grid-template-columns: minmax(4.5em, auto) minmax(0, 1fr); align-items: baseline; gap: 10px; border-bottom: 1px dashed var(--line); padding: 9px 0; white-space: normal; text-align: right; word-break: break-word; }
  .table-wrap tr td:last-child, .detail-items tr td:last-child { border-bottom: none; }
  .table-wrap td::before, .detail-items td::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; }
  .table-wrap td[data-label="操作"], .table-wrap td.td-main, .detail-items td.td-main { grid-template-columns: minmax(0, 1fr); }
  .table-wrap td[data-label="操作"] { justify-items: end; gap: 8px; padding-top: 10px; }
  .table-wrap td[data-label="操作"]::before { display: none; }
  .table-wrap td[data-label="操作"] .btn { min-height: 40px; }
  /* 汇总行(tfoot)不参与卡片堆叠 */
  .table-wrap tfoot, .detail-items tfoot { display: block; }
  .detail-items tfoot tr { background: var(--card); box-shadow: var(--shadow-card); border-radius: var(--radius-card); padding: 4px 12px; margin-bottom: 10px; }
  .detail-items tfoot td { display: flex; justify-content: space-between; gap: 12px; }
  .detail-items tfoot td[colspan] { border-bottom: none; }
  .table-wrap .empty-row td, .detail-items .empty-row td { text-align: center; padding: 22px 0; }
  .table-wrap .empty-row td::before, .detail-items .empty-row td::before { display: none; }
  .table-wrap .empty-row td { grid-template-columns: minmax(0, 1fr); }
  /* 长文本列(名称/工地)左对齐更易读 */
  .table-wrap td.td-main, .detail-items td.td-main { justify-content: flex-start; }
  .table-wrap td.td-main::before, .detail-items td.td-main::before { display: none; }

  /* 订单:隐藏表格,改卡片 */
  #orderTableWrap > table { display: none; }
  #orderTableWrap { background: transparent; box-shadow: none; overflow: visible; }
  .order-cards { display: block; }
}

@media (max-width: 560px) {
  /* 顶栏保持单行:标题省略号让位给按钮,避免折行导致吸顶高度变化 */
  .topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-title { font-size: 14px; }
  .topbar-right { flex: 0 0 auto; gap: 6px; }
  #adminName { display: none; }
  .content { padding: 10px; }
  /* 订单筛选区沿用 820px 断点的两行 3 列布局,此处无需再覆盖;其他工具条已在上方断点设为单列 */
  .login-card { padding: 26px 18px; }
  th, td { padding: 9px 10px; }
  /* 弹窗按钮竖排铺满,避免三个按钮挤一行;恰好两个按钮时(.duo)左右各半只占一行 */
  .modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .modal-actions .btn { width: 100%; min-height: 44px; }
  .modal-actions.duo { flex-direction: row-reverse; gap: 10px; }
  .modal-actions.duo .btn { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ============ 审批中心 / 归档(涉钱动作双人复核) ============ */
/* 导航待办角标 */
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 9px; line-height: 1;
}
.nav-badge[hidden] { display: none; }   /* 为 0 时隐藏(display 声明会盖掉 UA 的 [hidden],必须显式还原) */

/* 收款节点内嵌金额块(整合原独立收款面板);约定定金行内嵌输入框 */
.deposit-edit input { width: 100px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 13px; outline: none; }
/* 发货节点内嵌的物流信息小表单 */
.ship-mini { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ship-mini[hidden] { display: none; }
.ship-mini input { width: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 13px; outline: none; }
.ship-mini input:focus { border-color: var(--brand); }
/* 发货方式切换(发快递 / 客户自提):自提无需快递信息 */
.ship-mode { display: flex; gap: 6px; flex-basis: 100%; }
.ship-mode-btn { border: 1px solid var(--line); background: #fff; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.ship-mode-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ship-express { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.ship-express[hidden] { display: none; }
/* 车架号节点内嵌的录入行:输入/标记「无需」→ 点「确认」才提交(防误触) */
.frame-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.frame-line { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; }
.frame-line .frame-name { color: var(--muted); }
/* 输入/无需/确认三个控件同一行、同高(34px)同圆角;输入框占满剩余宽度 */
.frame-entry { display: flex; gap: 6px; align-items: center; }
.frame-entry .frame-input { flex: 1 1 0; min-width: 0; width: auto; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-input); font-size: 13px; outline: none; background: #fff; }
.frame-line input:focus { border-color: var(--brand); }
.frame-entry .frame-input:disabled { background: #f5f6f7; color: var(--muted); }
.frame-entry .btn { height: 34px; min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
.frame-line b { color: var(--text); }
/* 「无需车架号」按钮选中态与已标记样式 */
.frame-na-btn.active { background: var(--brand-soft); border-color: #C9DEFF; color: var(--brand-deep); }
.frame-na-tag { font-size: 12px; color: var(--muted); background: #eef1f5; border-radius: var(--radius-pill); padding: 2px 8px; }
/* 明细表格里的紧凑形态:同高同排 */
td .frame-entry { min-width: 220px; }
td .frame-entry .btn { padding: 0 10px; }
.flow-body .pay-figures { margin: 6px 0 2px; gap: 14px; }
.flow-body .pay-line { margin-top: 2px; }
.flow-body .pay-reject, .flow-body .pay-hint { margin: 4px 0 0; }
.nav-item { position: relative; }

/* 子标签(待我复核 / 我发起 / 已办结) */
.ap-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ap-tab {
  border: 1px solid var(--line); background: #fff; color: var(--text);
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer;
}
.ap-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 待处理行高亮,便于扫列表 */
.ap-row-pending td { background: #FFFBF0; }

/* 审批详情摘要 */
.ap-summary { background: var(--brand-soft); border-radius: var(--radius-input); padding: 12px 14px; margin-bottom: 12px; }
.ap-amount { font-size: 22px; font-weight: 800; color: var(--brand-deep); line-height: 1.2; }
.ap-meta { font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.6; }

/* 签名区与说明 */
.sign-box { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
.sign-box .field:last-child { margin-bottom: 4px; }
.sign-tip { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 8px 0 0; }

/* 订单详情顶部归档提示条 */
.archive-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between;
  background: #FFF4E0; color: #8a6516; border: 1px solid #FFE2B8;
  border-radius: var(--radius-input); padding: 10px 12px; margin-bottom: 14px; font-size: 13px;
}
/* 已归档订单卡/行弱化 */
.ord-card.ord-archived { opacity: 0.72; }

/* 轻提示(替代阻塞式 alert,审批/归档等高频操作反馈用) */
.admin-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 200; max-width: min(92vw, 520px);
  background: rgba(31,35,41,0.92); color: #fff; font-size: 13px; line-height: 1.5;
  padding: 10px 16px; border-radius: var(--radius-pill);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.admin-toast.err { background: var(--danger); }


/* ---------- 核对收款:金额提为视觉重点 ---------- */
.pay-amount-hero { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 12px; background: var(--brand-soft); border-radius: var(--radius-card); }
.pay-amount-label { font-size: 12px; color: var(--muted); }
.pay-amount-value { font-size: 26px; font-weight: 800; color: var(--price); line-height: 1.2; }
.pay-amount-hint { font-size: 12px; color: var(--muted); }

/* ---------- 驳回原因弹框 ---------- */
.reject-tip { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.field textarea { font-family: inherit; resize: vertical; }

/* ---------- 手写区:登录密码二次确认折叠 ---------- */
.sign-extra-toggle { background: none; border: none; color: var(--brand); font-size: 12px; font-weight: 600; padding: 4px 0; cursor: pointer; font-family: inherit; }
.sign-extra-pw[hidden] { display: none; }

/* ---------- 页脚说明文字降级,不与操作区抢注意力 ---------- */
.sign-hint, .sign-tip { font-size: 12px; color: #9AA2AA; line-height: 1.55; }
.sign-tip { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }


/* ---------- 整单流程:会签节点(已核对 / 待复核) ---------- */
.flow-cs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flow-cs-item { display: flex; gap: 8px; align-items: flex-start; }
.flow-cs-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: #C9CFD6;
}
.flow-cs-item.done .flow-cs-dot { background: var(--brand); }
.flow-cs-item.todo .flow-cs-dot { background: #fff; box-shadow: inset 0 0 0 2px #C9CFD6; }
.flow-cs-body { min-width: 0; }
.flow-cs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-cs-name { font-size: 13px; font-weight: 600; color: var(--text); }
.flow-cs-label { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); }
.flow-cs-label.done { background: #e8f6e8; color: #2f9e44; }
.flow-cs-label.todo { background: #fff4e0; color: #b07d12; }
.flow-cs-time { font-size: 12px; color: var(--muted); }
.flow-cs-hint { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.flow-cs-sign { margin-top: 6px; }
.flow-cs-sign img { max-height: 56px; max-width: 200px; border-bottom: 1px solid var(--line); }

/* ============ 详情三段式(P2):状态头 + 横向步骤条 + 折叠档案区 + 定金行 ============ */
.detail-status-head { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-input); padding: 10px 12px; margin-bottom: 12px; }
.detail-status-line { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.detail-status-line b { color: var(--muted); font-weight: 600; margin-right: 6px; }
.flow-stepper { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.flow-step { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; background: var(--th-bg); color: var(--muted); border: 1px solid transparent; }
.flow-step em { font-style: normal; }
.flow-step u { text-decoration: none; font-size: 11px; opacity: .9; }
.flow-step .ic { width: 13px; height: 13px; }
.flow-step.done { background: #E8F6E8; color: #2F9E44; }
.flow-step.current { background: #FFF4E0; color: #B07D12; border-color: #FFE2B8; }
.flow-step.reject { background: #FDECEC; color: var(--danger); }
.flow-step.todo { color: var(--muted); }
.flow-arrow { color: var(--muted); font-size: 12px; }
.detail-action-zone { margin: 12px 0 4px; }
details.arch-sec { border: 1px solid var(--line); border-radius: var(--radius-input); padding: 0 12px; margin-top: 10px; background: var(--card); }
details.arch-sec > summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 13px; color: var(--text); list-style: none; display: flex; align-items: center; }
details.arch-sec > summary::-webkit-details-marker { display: none; }
details.arch-sec > summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; }
details.arch-sec[open] > summary::after { transform: rotate(90deg); }
details.arch-sec .arch-body { padding: 2px 0 12px; }
.deposit-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--text); }
.deposit-line input { width: 110px; border: 1px solid var(--line); border-radius: var(--radius-input); padding: 6px 8px; font-size: 13px; outline: none; }

/* ================= 消息与售后(客服会话) ================= */
.svc-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: stretch; min-height: 60vh; }
.svc-side { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.svc-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-bottom: 1px solid var(--border, #eef0f3); background: #fafbfc; }
.svc-filters select, .svc-filters input {
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 6px 8px; font-size: 13px;
  background: #fff; color: var(--text, #1f2937); min-width: 0; font-family: inherit;
}
.svc-filters input { grid-column: 1 / -1; }
.svc-thread-list { overflow-y: auto; max-height: calc(76vh - 60px); }
.svc-t-item { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border, #eef0f3); background: #fff; padding: 10px 12px; cursor: pointer; font-family: inherit; }
.svc-t-item:hover { background: #f8fafc; }
.svc-t-item.active { background: #eef4ff; }
.svc-t-top { display: flex; align-items: center; gap: 6px; }
.svc-t-order { font-size: 14px; color: var(--text, #1f2937); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-t-unread { flex: 0 0 auto; }
.svc-t-customer { font-size: 12px; color: var(--muted, #6b7280); margin-top: 3px; }
.svc-t-last { font-size: 13px; color: var(--text, #374151); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-t-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--muted, #6b7280); }
.svc-t-assignee { flex: 1; }
.svc-t-time { flex: 0 0 auto; }

.svc-chat { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: #fff; display: flex; flex-direction: column; overflow: hidden; min-height: 60vh; max-height: 82vh; }
.svc-chat-empty { margin: auto; color: var(--muted, #9ca3af); font-size: 14px; }
.svc-chat-head { padding: 12px 14px; border-bottom: 1px solid var(--border, #eef0f3); background: #fafbfc; }
.svc-chat-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--text, #1f2937); }
.svc-chat-sub { font-size: 12px; color: var(--muted, #6b7280); margin-top: 5px; line-height: 1.6; }
.svc-af-reason { font-size: 12px; color: var(--text, #374151); background: #f4f5f7; border-radius: 8px; padding: 7px 10px; margin-top: 7px; line-height: 1.6; }
.svc-chat-tools { display: flex; gap: 8px; margin-top: 8px; }
.svc-af-actions { display: flex; gap: 8px; margin-top: 8px; }
.svc-chat .svc-msgs { flex: 1; }

/* 消息气泡(与客户端同风格) */
.svc-msgs { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f8fa; flex: 1; min-height: 220px; }
.svc-row { display: flex; }
.svc-row.mine { justify-content: flex-end; }
.svc-row.theirs { justify-content: flex-start; }
.svc-bubble { max-width: 76%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.55; background: #fff; color: var(--text, #1f2937); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.svc-row.mine .svc-bubble { background: var(--primary, #2563eb); color: #fff; border-bottom-right-radius: 4px; }
.svc-row.theirs .svc-bubble { border-bottom-left-radius: 4px; }
.svc-text { white-space: pre-wrap; word-break: break-word; }
.svc-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.svc-msg-img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; cursor: zoom-in; display: block; }
.svc-time { font-size: 10px; opacity: .7; margin-top: 4px; text-align: right; }
.svc-sys { align-self: center; max-width: 90%; font-size: 12px; color: var(--muted, #6b7280); background: #eceff3; border-radius: 999px; padding: 4px 12px; text-align: center; }
.svc-closed-tip { padding: 9px 14px; font-size: 12px; color: var(--muted, #6b7280); background: #fafbfc; border-top: 1px solid var(--border, #eef0f3); }

/* 回复输入区 */
.svc-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border, #eef0f3); background: #fff; }
.svc-attach, .svc-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.svc-attach { background: #f2f4f7; color: #475467; }
.svc-send { background: var(--primary, #2563eb); color: #fff; }
.svc-send:disabled { opacity: .55; cursor: default; }
.svc-composer textarea { flex: 1; border: 1px solid var(--border, #e5e7eb); border-radius: 19px; padding: 9px 14px; font-size: 14px; font-family: inherit; color: var(--text, #1f2937); resize: none; max-height: 96px; line-height: 1.45; }
.svc-composer textarea:focus { border-color: var(--primary, #2563eb); outline: none; }

/* 订单详情内嵌客户消息块 */
.svc-mini { border: 1px solid var(--border, #eef0f3); border-radius: 8px; padding: 9px 11px; margin-top: 8px; }
.svc-mini-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc-mini-head .svc-t-time { flex: 1; text-align: right; }
.svc-mini-last { font-size: 13px; color: var(--text, #374151); margin-top: 6px; }

/* 移动端:单栏堆叠 */
@media (max-width: 860px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-thread-list { max-height: 40vh; }
}