/* ============================================================================
   报价通 QuoteFlow · 前端设计系统
   ----------------------------------------------------------------------------
   与已定稿原型一致的视觉语言：蓝白后台风。
   移动端单据一律「字段行式卡片」（.mcard + .mrow），禁止多列表格。
   价格涨跌按国内惯例：涨=红、跌=绿。
   ============================================================================ */

/* ------------------------------- 变量 ------------------------------- */
:root {
  --primary: #2F6FE4;
  --primary-d: #1E56BE;
  --primary-l: #EAF1FE;
  --primary-l2: #F5F8FF;

  --green: #17A34A;
  --green-l: #E8F7EE;
  --red: #E33D3D;
  --red-l: #FDECEC;
  --orange: #E08A00;
  --orange-l: #FEF4E2;
  --cyan: #0E9CB0;
  --cyan-l: #E4F7FA;
  --purple: #7C5CE0;
  --purple-l: #F1EDFE;

  --t1: #1F2937;
  --t2: #4B5563;
  --t3: #9AA3B2;
  --t4: #C4CAD6;

  --bd: #E5E8EF;
  --bd-s: #EFF2F7;
  --bg: #F5F7FB;
  --card: #FFFFFF;

  --r: 10px;
  --r-s: 8px;
  --r-l: 14px;
  --sh: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sh-l: 0 8px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);

  --side-w: 216px;
  --num-font: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

/* ------------------------------- 基础 ------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--t1);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
.hide { display: none !important; }
.num { font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.muted { color: var(--t3); }
.nowrap { white-space: nowrap; }
.tc { text-align: center; }
.tr { text-align: right; }
.grow { flex: 1; }
.row { display: flex; gap: 12px; align-items: center; }
.row-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sp { flex: 1; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.fs20 { font-size: 20px; } .fs18 { font-size: 18px; } .fs16 { font-size: 16px; }
.fs13 { font-size: 13px; } .fs12 { font-size: 12px; } .fs11 { font-size: 11px; }
.bold { font-weight: 600; }
.c-red { color: var(--red); } .c-green { color: var(--green); } .c-orange { color: var(--orange); }
.c-primary { color: var(--primary); } .c-t2 { color: var(--t2); } .c-t3 { color: var(--t3); }

/* 涨跌（国内惯例） */
.up { color: var(--red); }
.down { color: var(--green); }
.flat { color: var(--t3); }

/* ------------------------------- 按钮 ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--bd); border-radius: var(--r-s);
  background: #fff; color: var(--t1);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: .15s; white-space: nowrap; user-select: none;
}
.btn:hover { border-color: var(--t4); background: #FAFBFD; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn.pri { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.pri:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn.ghost { background: #fff; border-color: var(--primary); color: var(--primary); }
.btn.ghost:hover { background: var(--primary-l); }
.btn.dang { background: #fff; border-color: #F3C4C4; color: var(--red); }
.btn.dang:hover { background: var(--red-l); }
.btn.warn { background: #fff; border-color: #F5DFB8; color: var(--orange); }
.btn.warn:hover { background: var(--orange-l); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn.lg { height: 42px; padding: 0 22px; font-size: 15px; border-radius: var(--r); }
.btn.block { width: 100%; }
.btn-link {
  background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 13px; padding: 0 4px; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.dang { color: var(--red); }
.btn-link.mute { color: var(--t3); }
.btn-link:disabled { color: var(--t4); cursor: not-allowed; text-decoration: none; }

/* ------------------------------- 表单 ------------------------------- */
.inp, .sel, .ta {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--bd); border-radius: var(--r-s);
  background: #fff; color: var(--t1); outline: none; transition: .15s;
  max-width: 100%;
}
.ta { height: auto; padding: 8px 10px; min-height: 72px; resize: vertical; line-height: 1.6; }
.inp:focus, .sel:focus, .ta:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,111,228,.12); }
.inp:disabled, .sel:disabled { background: #F7F8FA; color: var(--t3); }
.inp.err, .sel.err { border-color: var(--red); }
.inp::placeholder { color: var(--t4); }
.sel { padding-right: 26px; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%239AA3B2'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; }
.inp.sm, .sel.sm { height: 28px; font-size: 12px; padding: 0 8px; }
.inp.sm { padding-right: 8px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12.5px; color: var(--t2); font-weight: 500; }
.field > label .req { color: var(--red); margin-left: 2px; }
.field .hint { font-size: 11.5px; color: var(--t3); line-height: 1.5; }
.field .errmsg { font-size: 11.5px; color: var(--red); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }

.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.chk input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: #D5DAE3; border-radius: 22px; transition: .2s; }
.switch i::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::before { transform: translateX(18px); }

/* ------------------------------- 标签 ------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  height: 21px; padding: 0 8px; border-radius: 11px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: #F1F3F7; color: var(--t2);
}
.tag.blue { background: var(--primary-l); color: var(--primary); }
.tag.green { background: var(--green-l); color: var(--green); }
.tag.red { background: var(--red-l); color: var(--red); }
.tag.orange { background: var(--orange-l); color: var(--orange); }
.tag.cyan { background: var(--cyan-l); color: var(--cyan); }
.tag.purple { background: var(--purple-l); color: var(--purple); }
.tag.gray { background: #F1F3F7; color: var(--t2); }
.tag.lg { height: 25px; font-size: 12.5px; padding: 0 10px; border-radius: 13px; }
.tag .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tagbar { display: flex; gap: 8px; flex-wrap: wrap; }

/* 状态色统一映射（js 里用 statusTag() 调） */
.st-pending { background: var(--orange-l); color: var(--orange); }
.st-confirmed { background: var(--green-l); color: var(--green); }
.st-shipped { background: var(--cyan-l); color: var(--cyan); }
.st-delivered { background: var(--purple-l); color: var(--purple); }
.st-completed { background: #F1F3F7; color: var(--t2); }
.st-revising { background: var(--red-l); color: var(--red); }
.st-draft { background: #F1F3F7; color: var(--t3); }
.st-cancelled { background: #F1F3F7; color: var(--t4); text-decoration: line-through; }

/* ------------------------------- 卡片 ------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--bd-s);
  border-radius: var(--r-l); box-shadow: var(--sh);
  overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card > h3 {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 18px; margin: 0;
  font-size: 15px; border-bottom: 1px solid var(--bd-s);
}
.card > h3 .more { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--primary); cursor: pointer; }
.card > h3 .sub { font-size: 12px; color: var(--t3); font-weight: 400; }
.card-b { padding: 18px; }
.card-b.tight { padding: 0; }
.card-hint {
  padding: 10px 18px; font-size: 12px; color: var(--t3);
  background: var(--primary-l2); border-bottom: 1px solid var(--bd-s); line-height: 1.6;
}

/* 统计卡 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat {
  background: #fff; border: 1px solid var(--bd-s); border-radius: var(--r-l);
  padding: 15px 16px; box-shadow: var(--sh); cursor: default;
}
.stat.clickable { cursor: pointer; transition: .15s; }
.stat.clickable:hover { border-color: #CFE0FF; box-shadow: var(--sh-l); }
.stat .s-l { font-size: 12.5px; color: var(--t3); display: flex; align-items: center; gap: 5px; }
.stat .s-v { font-size: 24px; font-weight: 700; margin-top: 5px; line-height: 1.2; font-family: var(--num-font); }
.stat .s-v small { font-size: 12px; font-weight: 500; margin-left: 3px; color: var(--t3); }
.stat .s-d { font-size: 11.5px; color: var(--t3); margin-top: 3px; }

/* ------------------------------- 表格 ------------------------------- */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  background: #FAFBFD; color: var(--t2); font-weight: 600; font-size: 12.5px;
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--bd);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--bd-s); vertical-align: middle; }
table.tbl tbody tr:hover { background: #FAFCFF; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td.r, table.tbl th.r { text-align: right; font-family: var(--num-font); }
table.tbl td.c, table.tbl th.c { text-align: center; }
table.tbl td.nw { white-space: nowrap; }
table.tbl .ops { display: flex; gap: 2px; white-space: nowrap; }
table.tbl.compact th, table.tbl.compact td { padding: 7px 10px; font-size: 12.5px; }
.empty { padding: 44px 20px; text-align: center; color: var(--t3); font-size: 13px; }
.empty .ico { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }

/* 分页 */
.pager { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--bd-s); flex-wrap: wrap; }
.pager .info { font-size: 12.5px; color: var(--t3); }
.pager .pages { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.pager .pg {
  min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--bd); border-radius: 6px;
  background: #fff; color: var(--t2); font-size: 12.5px; cursor: pointer;
}
.pager .pg:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pager .pg.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager .pg:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------- 布局 ------------------------------- */
.shell { display: flex; min-height: 100vh; }
.side {
  width: var(--side-w); flex: none; background: #fff; border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.side .brand {
  display: flex; align-items: center; gap: 9px;
  padding: 17px 18px; border-bottom: 1px solid var(--bd-s);
}
.side .brand .logo {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--primary), #5B93F0);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.side .brand b { font-size: 15px; letter-spacing: .2px; }
.side .brand small { display: block; font-size: 10.5px; color: var(--t3); font-weight: 400; }
.side nav { flex: 1; overflow-y: auto; padding: 10px 8px; }
.side nav .grp {
  font-size: 10.5px; color: var(--t4); font-weight: 600; letter-spacing: .5px;
  padding: 12px 10px 5px; text-transform: uppercase;
}
.side nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--r-s); color: var(--t2);
  font-size: 13.5px; margin-bottom: 1px; cursor: pointer;
}
.side nav a:hover { background: var(--primary-l2); color: var(--primary); text-decoration: none; }
.side nav a.on { background: var(--primary-l); color: var(--primary); font-weight: 600; }
.side nav a .ic { width: 17px; text-align: center; font-size: 14px; flex: none; }
.side nav a .badge {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 10px; min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 600;
}
.side .sfoot { padding: 10px; border-top: 1px solid var(--bd-s); font-size: 11.5px; color: var(--t3); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 58px; flex: none; background: #fff; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 16.5px; }
.topbar .crumb { font-size: 12px; color: var(--t3); }
.topbar .user { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; }
.topbar .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-l); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; flex: none;
}
.topbar .bell { position: relative; cursor: pointer; font-size: 17px; padding: 3px 5px; }
.topbar .bell .dot {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.content { padding: 20px 22px 40px; flex: 1; min-width: 0; }
.page { display: none; }
.page.on { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* 工具条 */
.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px; background: #fff; border: 1px solid var(--bd-s);
  border-radius: var(--r-l); box-shadow: var(--sh); margin-bottom: 16px;
}
.toolbar .inp, .toolbar .sel { min-width: 120px; }

/* Tab */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd-s); padding: 0 18px; background: #fff; flex-wrap: wrap; }
.tabs a {
  padding: 12px 14px; font-size: 13.5px; color: var(--t2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--primary); text-decoration: none; }
.tabs a.on { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }

/* 空状态 / 提示条 */
.note {
  display: flex; gap: 9px; padding: 12px 14px; border-radius: var(--r-s);
  font-size: 12.5px; line-height: 1.65; margin-bottom: 14px;
  background: var(--primary-l2); border: 1px solid #DCE7FB; color: var(--t2);
}
.note.warn { background: #FFFBF0; border-color: #F5E2B8; }
.note.danger { background: #FEF6F6; border-color: #F5CFCF; }
.note.ok { background: #F2FBF5; border-color: #CBEBD6; }
.note b { color: var(--t1); }

/* ------------------------------- 弹层 ------------------------------- */
.mask {
  position: fixed; inset: 0; background: rgba(17, 24, 39, .45);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadein .15s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: var(--r-l); box-shadow: var(--sh-l);
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
  animation: pop .18s;
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal.wide { max-width: 860px; }
.modal.narrow { max-width: 440px; }
.modal > header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--bd-s); }
.modal > header b { font-size: 15.5px; }
.modal > header .x { margin-left: auto; cursor: pointer; color: var(--t3); font-size: 19px; line-height: 1; }
.modal > header .x:hover { color: var(--t1); }
.modal > .body { padding: 20px; overflow-y: auto; flex: 1; }
.modal > footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--bd-s); background: #FCFDFE;
  border-radius: 0 0 var(--r-l) var(--r-l); flex-wrap: wrap;
}
.modal > footer .left { margin-right: auto; font-size: 12px; color: var(--t3); align-self: center; }

/* 右侧抽屉（订单详情用，宽屏更舒服） */
.drawer-mask { position: fixed; inset: 0; background: rgba(17,24,39,.4); z-index: 100; animation: fadein .15s; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw);
  background: #fff; z-index: 101; display: flex; flex-direction: column;
  box-shadow: -8px 0 30px rgba(16,24,40,.14); animation: slidein .22s;
}
@keyframes slidein { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer > header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--bd-s); gap: 10px; }
.drawer > header .x { margin-left: auto; cursor: pointer; color: var(--t3); font-size: 19px; }
.drawer > .body { padding: 18px 20px 40px; overflow-y: auto; flex: 1; }
.drawer > footer { padding: 13px 20px; border-top: 1px solid var(--bd-s); display: flex; gap: 8px; flex-wrap: wrap; background: #FCFDFE; }

/* toast */
.toasts { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: #1F2937; color: #fff; padding: 10px 18px; border-radius: 22px;
  font-size: 13px; box-shadow: var(--sh-l); animation: drop .2s; max-width: 90vw;
}
.toast.ok { background: #12813C; }
.toast.err { background: #C62B2B; }
.toast.warn { background: #B4750A; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* loading */
.loading { padding: 40px; text-align: center; color: var(--t3); font-size: 13px; }
.spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px;
  border: 2px solid var(--bd); border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #F2F4F7 25%, #E9ECF2 37%, #F2F4F7 63%);
  background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 6px; height: 14px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------- 移动端字段行式卡片 ------------------------- */
/* 规范：手机端单据一律用这套（.mcard + .mrow），5 列以上的表格禁止出现 */
.mcard {
  background: #fff; border: 1px solid var(--bd-s); border-radius: var(--r-l);
  margin-bottom: 12px; overflow: hidden; box-shadow: var(--sh);
}
.mcard .mc-h {
  display: flex; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid var(--bd-s); background: #FCFDFE; gap: 8px;
}
.mcard .mc-h b { font-size: 13.5px; }
.mcard .mc-h small { font-size: 11.5px; color: var(--t3); font-weight: 400; margin-left: auto; }
.mrow {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid #F4F6FA; font-size: 13.5px;
}
.mrow:last-child { border-bottom: none; }
.mrow .k { color: var(--t3); flex: none; font-size: 12.5px; }
.mrow .v { margin-left: auto; text-align: right; word-break: break-word; min-width: 0; }
.mrow .v b { font-weight: 600; }
.mrow .v .red { color: var(--red); font-weight: 700; font-family: var(--num-font); }
.mrow.stack { flex-direction: column; align-items: stretch; gap: 4px; }
.mrow.stack .v { margin-left: 0; text-align: left; }
.mrow.hi { background: #FBFCFF; }
.mrow .unit { color: var(--t3); font-size: 11.5px; margin-left: 3px; }

.mcard .mc-sum {
  display: flex; align-items: center; padding: 12px 14px; background: #FBFCFF;
  font-size: 13px; gap: 10px; border-top: 1px solid var(--bd-s);
}
.mcard .mc-sum .rg { margin-left: auto; color: var(--red); font-weight: 700; font-family: var(--num-font); font-size: 15px; }
.mcard .mc-foot { padding: 10px 14px; font-size: 11.5px; color: var(--t3); line-height: 1.7; border-top: 1px dashed #EEF0F4; background: #FCFDFE; }

/* 明细行（下单 / 制单） */
.itm { padding: 12px 14px; border-bottom: 1px solid var(--bd-s); }
.itm:last-child { border-bottom: none; }
.itm .ih { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.itm .ih b { font-size: 13.5px; }
.itm .ih .seq {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--primary-l); color: var(--primary);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.itm .ih .del { margin-left: auto; }
.itm .sub { font-size: 11.5px; color: var(--t3); }
.frow { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid #F4F6FA; }
.frow > label { width: 74px; flex: none; font-size: 12.5px; color: var(--t3); }
.frow > .fv { flex: 1; text-align: right; min-width: 0; font-size: 13.5px; }
.frow > .u { color: var(--t3); font-size: 11.5px; flex: none; }
.minp {
  width: 100%; max-width: 150px; height: 30px; padding: 0 9px; text-align: right;
  border: 1px solid var(--bd); border-radius: 7px; background: #fff; outline: none; font-size: 13.5px;
  font-family: var(--num-font);
}
.minp:focus { border-color: var(--primary); background: #FCFDFF; }
.minp.txt { font-family: inherit; text-align: left; max-width: none; }
.frow.hi { background: #F7FAFF; }

/* 底部固定操作条（移动端） */
.fixbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 10px; padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--bd);
  backdrop-filter: blur(8px);
}
.fixbar .btn { flex: 1; height: 42px; font-size: 15px; border-radius: var(--r); }
.fixbar .btn.wide { flex: 2; }
.has-fixbar { padding-bottom: 84px; }

/* 移动端顶栏 */
.mtop {
  position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: 48px;
}
.mtop .back { font-size: 19px; color: var(--t1); cursor: pointer; line-height: 1; }
.mtop b { font-size: 15.5px; }
.mtop .rt { margin-left: auto; font-size: 12px; color: var(--t3); }

/* 移动端底部导航 */
.mnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: #fff; border-top: 1px solid var(--bd);
  padding-bottom: env(safe-area-inset-bottom);
}
.mnav a {
  flex: 1; text-align: center; padding: 7px 0 6px; font-size: 10.5px; color: var(--t3); cursor: pointer;
}
.mnav a .ic { display: block; font-size: 19px; line-height: 1.25; filter: grayscale(1); opacity: .55; }
.mnav a.on { color: var(--primary); font-weight: 600; }
.mnav a.on .ic { filter: none; opacity: 1; }
.mnav a:hover { text-decoration: none; }

/* 分段控件 */
.seg { display: flex; gap: 0; background: #F1F3F7; padding: 3px; border-radius: 9px; overflow-x: auto; }
.seg a {
  flex: 1; text-align: center; padding: 7px 10px; font-size: 12.5px; color: var(--t2);
  border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.seg a.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.seg a:hover { text-decoration: none; }

/* 步骤条 */
.steps { display: flex; align-items: center; gap: 0; padding: 14px 14px; overflow-x: auto; }
.steps .s { display: flex; align-items: center; gap: 6px; flex: none; }
.steps .s .n {
  width: 22px; height: 22px; border-radius: 50%; background: #E9ECF2; color: var(--t3);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.steps .s.on .n { background: var(--primary); color: #fff; }
.steps .s.done .n { background: var(--green-l); color: var(--green); }
.steps .s .t { font-size: 11.5px; color: var(--t3); white-space: nowrap; }
.steps .s.on .t { color: var(--primary); font-weight: 600; }
.steps .s.done .t { color: var(--t2); }
.steps .ln { width: 18px; height: 1px; background: var(--bd); margin: 0 6px; flex: none; }

/* 进度条 */
.progress { display: flex; gap: 5px; padding: 12px 14px; align-items: center; }
.progress .p { flex: 1; height: 4px; border-radius: 2px; background: #E9ECF2; position: relative; }
.progress .p.on { background: var(--primary); }
.progress .p.done { background: var(--green); }
.progress .pt { font-size: 11.5px; color: var(--t3); white-space: nowrap; }

/* 时间轴 */
.tl { position: relative; padding-left: 18px; }
.tl .ti { position: relative; padding-bottom: 15px; }
.tl .ti::before {
  content: ''; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #D5DAE3; border: 2px solid #fff; box-shadow: 0 0 0 1px #D5DAE3;
}
.tl .ti.done::before { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.tl .ti.cur::before { background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tl .ti:not(:last-child)::after {
  content: ''; position: absolute; left: -14px; top: 14px; bottom: 0; width: 1px; background: var(--bd);
}
.tl .ti b { font-size: 13px; display: block; }
.tl .ti small { font-size: 11.5px; color: var(--t3); display: block; line-height: 1.6; }

/* 权限勾选网格 */
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.permgl { font-size: 11.5px; color: var(--t4); font-weight: 600; letter-spacing: .4px;
  padding: 10px 0 4px; grid-column: 1 / -1; border-top: 1px solid var(--bd-s); margin-top: 4px; }
.permgl:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.permgl .sensitive { color: var(--orange); margin-left: 4px; }

/* 价格行 */
.pricerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pricebox { display: inline-flex; align-items: baseline; gap: 5px; }
.pricebox .pn { font-family: var(--num-font); font-weight: 700; font-size: 15px; color: var(--red); }
.pricebox .pu { font-size: 11px; color: var(--t3); }
.codebox {
  background: var(--primary-l2); border: 1px dashed #C9DBF8; border-radius: var(--r-s);
  padding: 10px 12px; font-family: var(--num-font); font-size: 12px; word-break: break-all; line-height: 1.6;
}
/* 单据字段行（客户确认页 / 详情单据） */
.doc-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #F0F2F7; }
.doc-row:last-child { border-bottom: none; }
.doc-row .dk { color: #8a8a7a; font-size: 12.5px; flex: none; }
.doc-row .dv { margin-left: auto; text-align: right; font-weight: 500; word-break: break-word; }
.doc-row .dv.amount { color: var(--red); font-weight: 700; font-family: var(--num-font); }

/* ------------------------------- 登录页 ------------------------------- */
.login-wrap { min-height: 100vh; display: flex; }
.login-left {
  flex: 1; background: linear-gradient(150deg, #1E4FA8 0%, #2F6FE4 55%, #5B93F0 100%);
  color: #fff; padding: 54px 52px; display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.login-left .lg { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.login-left .lg .lgo {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700;
}
.login-left h2 { font-size: 27px; line-height: 1.35; margin-bottom: 12px; }
.login-left p { font-size: 14px; opacity: .82; line-height: 1.8; max-width: 440px; }
.login-left ul { list-style: none; padding: 0; margin: 26px 0 0; }
.login-left li { font-size: 13.5px; opacity: .9; margin-bottom: 10px; display: flex; gap: 9px; align-items: flex-start; }
.login-left li .tick { opacity: .85; }
.login-right {
  width: 460px; flex: none; background: #fff; display: flex; flex-direction: column; justify-content: center;
  padding: 44px 46px;
}
.login-right h3 { font-size: 21px; margin-bottom: 5px; }
.login-right .sub { color: var(--t3); font-size: 13px; margin-bottom: 22px; }
.roleswitch { display: flex; gap: 6px; margin-bottom: 20px; background: #F1F3F7; padding: 4px; border-radius: 10px; }
.roleswitch a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; font-size: 13px; color: var(--t2); cursor: pointer; }
.roleswitch a.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.login-right .field { margin-bottom: 15px; }
.login-right .inp { height: 42px; font-size: 14.5px; }
.login-tip {
  margin-top: 18px; padding: 12px 14px; background: var(--primary-l2);
  border: 1px solid #DCE7FB; border-radius: var(--r-s); font-size: 12px; color: var(--t2); line-height: 1.75;
}
.login-tip code { background: #fff; padding: 1px 5px; border-radius: 4px; font-family: var(--num-font); font-size: 11.5px; }
.login-foot { margin-top: 22px; font-size: 11.5px; color: var(--t3); text-align: center; line-height: 1.8; }
@media (max-width: 900px) {
  .login-left { display: none; }
  .login-right { width: 100%; padding: 34px 24px; }
}

/* ------------------------------- 客户端 H5 ------------------------------- */
.cl-body { background: #EEF2F8; min-height: 100vh; }
.cl-wrap { max-width: 480px; margin: 0 auto; background: #EEF2F8; min-height: 100vh; }
.cl-top {
  background: linear-gradient(135deg, #2F6FE4, #5B93F0); color: #fff;
  padding: 18px 16px 44px; border-radius: 0 0 20px 20px;
}
.cl-top .biz { display: flex; align-items: center; gap: 10px; }
.cl-top .biz .lg {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.cl-top .biz b { font-size: 15px; }
.cl-top .biz small { display: block; font-size: 11px; opacity: .8; }
.cl-top .ttl { font-size: 19px; font-weight: 600; margin-top: 16px; }
.cl-top .desc { font-size: 12px; opacity: .8; margin-top: 3px; }
.cl-pull { margin-top: -32px; padding: 0 12px 90px; }
.cl-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(16,24,40,.07); margin-bottom: 12px; }
.cl-card .ch { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid var(--bd-s); }
.cl-card .ch b { font-size: 14px; }
.cl-card .ch small { margin-left: auto; font-size: 11px; color: var(--t3); }
.cl-card .cb { padding: 4px 0; }
.cl-card .cf { padding: 11px 15px; border-top: 1px solid var(--bd-s); font-size: 11.5px; color: var(--t3); line-height: 1.7; background: #FCFDFE; }
.cl-ad { border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: #fff; position: relative; }
.cl-ad img { width: 100%; display: block; }
.cl-ad .admark { position: absolute; right: 7px; bottom: 7px; background: rgba(0,0,0,.35); color: #fff; font-size: 9.5px; padding: 1px 6px; border-radius: 4px; }
.qrow { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #F4F6FA; }
.qrow:last-child { border-bottom: none; }
.qrow .q1 { flex: 1; min-width: 0; }
.qrow .q1 b { font-size: 14.5px; display: block; }
.qrow .q1 .sub { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.qrow .q2 { text-align: right; flex: none; }
.qrow .q2 .pp { font-family: var(--num-font); font-weight: 700; font-size: 17px; }
.qrow .q2 .pp.mine { color: var(--red); }
.qrow .q2 .pu { font-size: 10.5px; color: var(--t3); }
.qrow .q2 .tr { font-size: 11px; margin-top: 1px; }
.orow { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-bottom: 1px solid #F4F6FA; cursor: pointer; }
.orow:last-child { border-bottom: none; }
.orow .o1 { flex: 1; min-width: 0; }
.orow .o1 b { font-size: 14px; display: block; }
.orow .o1 small { font-size: 11.5px; color: var(--t3); display: block; margin-top: 2px; }
.orow .o2 { text-align: right; flex: none; }
.orow .o2 b { font-family: var(--num-font); font-size: 15px; }
.mine-hero {
  background: linear-gradient(135deg, #2F6FE4, #5B93F0); color: #fff;
  padding: 22px 16px 52px; border-radius: 0 0 20px 20px;
}
.mine-hero .u { display: flex; align-items: center; gap: 12px; }
.mine-hero .u .av {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}
.mine-hero .u b { font-size: 16.5px; }
.mine-hero .u small { display: block; font-size: 11.5px; opacity: .82; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex;
  background: #fff; border-top: 1px solid var(--bd); max-width: 480px; margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { flex: 1; text-align: center; padding: 7px 0 6px; font-size: 10.5px; color: var(--t3); cursor: pointer; }
.tabbar a .ic { display: block; font-size: 19px; filter: grayscale(1); opacity: .5; line-height: 1.3; }
.tabbar a.on { color: var(--primary); font-weight: 600; }
.tabbar a.on .ic { filter: none; opacity: 1; }
.tabbar a:hover { text-decoration: none; }

/* 金额强调 */
.amount { color: var(--red); font-weight: 700; font-family: var(--num-font); }
.amount-lg { color: var(--red); font-weight: 700; font-family: var(--num-font); font-size: 21px; }

/* 打印 */
@media print {
  .side, .topbar, .toolbar, .pager, .btn, .fixbar, .tabbar, .back { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}