/* ==========================================================================
   美线海运报价查询 · 视觉系统  v2
   关键词：浅色商务 / 海洋蓝 · 分层留白 · 低噪声阴影 · 一致的圆角与间距
   注意：本文件所有类名都被 app.js / 测试脚本引用，改类名前先跑 tools/ 下的冒烟脚本
   ========================================================================== */

:root {
  /* 底色与层次 */
  --bg: #f1f5fa;
  --card: #ffffff;
  --line: #e4eaf4;
  --line-2: #edf2f9;
  --text: #111a2b;
  --text-2: #39445a;
  --muted: #6d7889;
  --muted-2: #9aa5b8;

  /* 品牌 */
  --brand: #1257c4;
  --brand-d: #0b3d92;
  --brand-l: #3f82e6;
  --brand-soft: #eaf1fd;
  --brand-soft-2: #f6f9ff;
  --brand-line: #c6daf8;

  /* 语义色 */
  --ok: #0c8a5f;
  --ok-soft: #e7f7f0;
  --ok-line: #bfe7d6;
  --warn: #b07000;
  --warn-soft: #fdf4e3;
  --warn-line: #f1e0bc;
  --danger: #c62a2a;
  --danger-soft: #fdeded;
  --danger-line: #f4cccc;

  /* 圆角 */
  --r-xs: 7px;
  --r-sm: 9px;
  --r: 12px;
  --r-md: 14px;
  --r-lg: 18px;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(17, 32, 64, .05);
  --sh-2: 0 1px 2px rgba(17, 32, 64, .04), 0 10px 30px -18px rgba(17, 32, 64, .28);
  --sh-3: 0 2px 4px rgba(17, 32, 64, .04), 0 16px 40px -20px rgba(17, 32, 64, .32);
  --sh-4: 0 30px 70px -24px rgba(11, 26, 58, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 480px at 6% -8%, #dfeafa 0%, rgba(223, 234, 250, 0) 62%),
    radial-gradient(900px 440px at 98% -6%, #e2f1f8 0%, rgba(226, 241, 248, 0) 58%),
    linear-gradient(180deg, #f5f8fc 0%, #edf2f9 100%);
  background-attachment: fixed;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px 60px; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 26px -22px rgba(17, 32, 64, .5);
}
.topbar::before {
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, #1257c4 0%, #3f82e6 44%, #1fb0c6 100%);
}
.topbar-in {
  max-width: 1060px; margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: linear-gradient(145deg, #2f78e6, #0b3d92);
  box-shadow: 0 6px 14px -7px rgba(18, 87, 196, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.brand-t { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.brand-s { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.tabs {
  margin-left: auto; display: flex; gap: 3px;
  background: #eef2f8; border: 1px solid var(--line); padding: 4px;
  border-radius: 12px; box-shadow: inset 0 1px 2px rgba(17, 32, 64, .04);
}
.tab {
  border: 0; background: transparent; padding: 7px 15px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: background .14s, color .14s, box-shadow .14s;
}
.tab:hover { color: var(--text-2); background: rgba(255, 255, 255, .72); }
.tab.on {
  background: #fff; color: var(--brand); font-weight: 650;
  box-shadow: 0 1px 2px rgba(17, 32, 64, .12), 0 4px 12px -7px rgba(17, 32, 64, .3);
}

/* ---------- 页头 ---------- */
.page-head { margin: 26px 2px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-head h2 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
.page-head h2::before {
  content: ''; width: 4px; height: 18px; border-radius: 3px; flex: none;
  background: linear-gradient(180deg, var(--brand-l), var(--brand));
}
.page-head .ph-sub { margin: 6px 0 0 13px; color: var(--muted); font-size: 12.5px; }
.page-head .ph-aside { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* ---------- 卡片面板 ---------- */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; margin-top: 16px; box-shadow: var(--sh-2);
}
.panel-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin: 0 0 14px; display: flex; align-items: center; gap: 9px; letter-spacing: -.005em;
}
.panel-title::before {
  content: ''; width: 4px; height: 15px; border-radius: 3px; flex: none;
  background: linear-gradient(180deg, var(--brand-l), var(--brand));
}
.panel-title .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field > label {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  margin-bottom: 10px; letter-spacing: .01em;
}
.field > label::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px; flex: none;
  background: var(--brand-line);
}

/* ---------- 选择胶囊 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
  padding: 7px 15px; border-radius: 999px; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: all .13s; white-space: nowrap; box-shadow: var(--sh-1);
}
.chip:hover { border-color: var(--brand-line); background: var(--brand-soft-2); color: var(--brand); }
.chip.on {
  background: linear-gradient(180deg, #2a72e0, #1257c4); border-color: #1257c4;
  color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px -7px rgba(18, 87, 196, .8);
}
.chips.sm .chip { padding: 5px 12px; font-size: 12px; }

/* ---------- 输入与搜索 ---------- */
.search-wrap { position: relative; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 40px 12px 14px; font-size: 14px; font-family: inherit;
  background: #fff; color: var(--text); outline: none;
  transition: border-color .13s, box-shadow .13s;
}
input:focus { border-color: var(--brand); box-shadow: 0 0 0 3.5px rgba(18, 87, 196, .13); }
input::placeholder { color: var(--muted-2); }
.clear {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  border: 0; background: #eef1f6; color: var(--muted); width: 24px; height: 24px;
  border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
}
.clear:hover { background: #e2e8f2; color: var(--text); }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--sh-3); max-height: 292px; overflow: auto; padding: 5px;
}
.suggest-item { padding: 9px 11px; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.suggest-item:hover, .suggest-item.hi { background: var(--brand-soft); }
.suggest-item .s-en { font-weight: 600; font-size: 13px; }
.suggest-item .s-cn { color: var(--muted); font-size: 12px; }
.suggest-item .s-reg { margin-left: auto; font-size: 11px; color: var(--brand); background: var(--brand-soft); padding: 1px 7px; border-radius: 5px; flex: none; }

/* ---------- 按钮 ---------- */
.actions { display: flex; gap: 10px; margin-top: 18px; }
.btn-primary {
  flex: 1; border: 0; color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 650; padding: 13px 20px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #2a72e0, #1257c4);
  box-shadow: 0 8px 18px -9px rgba(18, 87, 196, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .13s, box-shadow .13s, transform .08s;
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 22px -9px rgba(18, 87, 196, .85), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: #b9c4d6; box-shadow: none; cursor: not-allowed; }
.btn-ghost {
  border: 1px solid var(--line); background: #fff; color: var(--text-2); font-family: inherit;
  font-size: 14px; padding: 13px 20px; border-radius: 11px; cursor: pointer;
  box-shadow: var(--sh-1); transition: all .13s;
}
.btn-ghost:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft-2); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 7px; }

/* ---------- 查价结果 ---------- */
.result { margin-top: 16px; }
.res-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-2);
}
.res-head {
  padding: 17px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfeff, #f8fbfe);
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.res-lane { font-size: 18px; font-weight: 720; letter-spacing: -.015em; }
.res-lane .arrow { color: var(--brand); margin: 0 7px; font-weight: 400; }
.res-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.res-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 11.5px; padding: 3px 9px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: #eef1f6; color: var(--muted); }
.badge.region { background: var(--brand-soft); color: var(--brand); }
.badge.info { background: var(--brand-soft); color: var(--brand); }

/* 柜型价格卡：数量由后台柜型字典决定，自适应列数（柜型多时自动换行） */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); }
.price-box { padding: 17px 20px; background: #fff; transition: background .13s; }
.price-box.sel { background: linear-gradient(180deg, #f3f8ff, #e9f1ff); box-shadow: inset 0 0 0 1.5px var(--brand); }
.price-box.sel .price-label { color: var(--brand); }
.price-box.sel .price-val { color: var(--brand); }
.price-label { font-size: 12px; color: var(--muted); font-weight: 650; letter-spacing: .01em; }
.price-val { font-size: 28px; font-weight: 720; letter-spacing: -.02em; margin-top: 5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-val .cur { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-right: 3px; }
.price-box.sel .price-val .cur { color: var(--brand); opacity: .75; }
.price-val.empty { font-size: 16px; color: var(--muted); font-weight: 500; }

.res-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: #fdfefe; }
.meta-cell { padding: 12px 20px; border-right: 1px solid var(--line-2); }
.meta-cell:last-child { border-right: 0; }
.meta-k { font-size: 11.5px; color: var(--muted); }
.meta-v { font-size: 13px; font-weight: 600; margin-top: 2px; }
.res-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; background: #fafcfe; }

.empty-state {
  padding: 36px 20px; text-align: center; color: var(--muted);
  background: linear-gradient(180deg, #fdfeff, #fafcfe);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.empty-state b { color: var(--text); display: block; margin-bottom: 5px; font-size: 14px; }

.alt-list { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.alt-head { padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--muted); background: #fafcfe; border-bottom: 1px solid var(--line); }
.alt-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .12s; }
.alt-row:last-child { border-bottom: 0; }
.alt-row:hover { background: var(--brand-soft-2); }
.alt-pod { font-weight: 600; font-size: 13px; }
.alt-cn { color: var(--muted); font-size: 12px; }
.alt-p { margin-left: auto; font-weight: 650; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.alt-p .cur { font-size: 11px; color: var(--muted); font-weight: 500; }
/* 全部起运港比价：右侧按柜型并排显示价格 */
.alt-prices { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.alt-prices .alt-p { margin-left: 0; display: flex; flex-direction: column; align-items: flex-end; min-width: 82px; }
.alt-prices .alt-p .ct { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.alt-prices .alt-p.on { color: var(--brand); }
.alt-prices .alt-p .none { color: var(--muted); font-weight: 400; }

/* ---------- 常出货路径 ---------- */
.hot { display: flex; flex-wrap: wrap; gap: 8px; }
.hot-item {
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 13px;
  cursor: pointer; font-family: inherit; text-align: left; font-size: 12.5px;
  box-shadow: var(--sh-1); transition: all .13s;
}
.hot-item:hover { border-color: var(--brand-line); background: var(--brand-soft-2); box-shadow: 0 4px 12px -8px rgba(18, 87, 196, .5); }
.hot-item .hp { font-weight: 650; color: var(--brand); }
.hot-item .hd { color: var(--muted); }
.hot-more {
  font-family: inherit; font-size: 12.5px; color: var(--brand);
  background: var(--brand-soft-2); border: 1px dashed var(--brand-line);
  border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: all .13s;
}
.hot-more:hover { background: var(--brand-soft); border-style: solid; }

/* ---------- 登录门禁 ---------- */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.auth-tab {
  border: 0; background: #eef2f8; color: var(--muted); padding: 8px 17px;
  border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 13px; transition: all .13s;
}
.auth-tab.on { background: linear-gradient(180deg, #2a72e0, #1257c4); color: #fff; font-weight: 650; box-shadow: 0 6px 14px -8px rgba(18, 87, 196, .8); }
.auth-sub { display: flex; gap: 14px; margin-bottom: 14px; font-size: 12.5px; }
.auth-sub button { border: 0; background: none; padding: 0 0 3px; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 12.5px; border-bottom: 2px solid transparent; }
.auth-sub button.on { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.form-row input { padding-right: 14px; }
.otp-row { display: flex; gap: 8px; }
.otp-row input { flex: 1; }
.msg { padding: 10px 13px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; border: 1px solid transparent; }
.msg.err { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.msg.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.msg.info { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.msg.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.link-btn { border: 0; background: none; color: var(--brand); cursor: pointer; font-family: inherit; font-size: 12.5px; padding: 0; text-decoration: underline; }

/* ---------- 上传 ---------- */
.user-row { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.user-row .u { color: var(--text); font-weight: 600; }
.dropzone {
  border: 2px dashed var(--brand-line); border-radius: var(--r-md);
  background: linear-gradient(180deg, #f8fbff, #f2f7fe);
  padding: 36px 20px; text-align: center; cursor: pointer; transition: all .15s;
}
.dropzone:hover, .dropzone.over { background: var(--brand-soft); border-color: var(--brand); }
.dropzone .dz-t { font-weight: 650; font-size: 14.5px; }
.dropzone .dz-s { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.dropzone .dz-ico {
  font-size: 22px; width: 46px; height: 46px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--brand-line); border-radius: 13px;
  box-shadow: var(--sh-1);
}

.report { margin-top: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fbfdff, #f5f9fd); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 15px;
}
.stat .k { font-size: 11.5px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 720; margin-top: 3px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.warn-list { background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; }
.warn-list .wt { font-size: 12.5px; font-weight: 650; color: var(--warn); margin-bottom: 6px; }
.warn-list ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: #7a5300; max-height: 168px; overflow: auto; }
.warn-list li { margin-bottom: 2px; }

table.prev { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.prev th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f7fafd;
  position: sticky; top: 0; z-index: 1;
}
table.prev td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.prev tr:hover td { background: #f7fafd; }
.tbl-scroll { max-height: 322px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

.batch-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.batch-row:last-child { border-bottom: 0; }
.batch-main { min-width: 0; }
.batch-t { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.batch-s { color: var(--muted); font-size: 12px; margin-top: 2px; }
.batch-act { margin-left: auto; flex: none; }

.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  animation: sp .7s linear infinite; vertical-align: -2px; margin-right: 7px;
}
@keyframes sp { to { transform: rotate(360deg); } }

.footnote { text-align: center; color: var(--muted-2); font-size: 12px; margin-top: 26px; }
.footnote .flink { color: var(--brand); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brand-line); }
.footnote .flink:hover { border-bottom-color: var(--brand); }

/* ---------- 登录后用户信息 ---------- */
.user-chip {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 11px;
  padding: 4px 5px 4px 12px; font-size: 12.5px; box-shadow: var(--sh-1); flex: none;
}
.user-chip .uc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px rgba(12, 138, 95, .14); }
.user-chip .u {
  color: var(--text); font-weight: 600; max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip .role-badge {
  font-size: 11px; line-height: 1.7; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: #f7f9fc; flex: none;
}
.user-chip .role-badge.is-admin { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.user-chip .role-badge.is-viewer { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.user-chip .role-badge.is-super { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }

.gate-hero { text-align: center; padding: 34px 16px 26px; }
.gate-lock {
  font-size: 24px; line-height: 1; margin: 0 auto 14px; width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #eaf1fd, #dde9fa);
  border: 1px solid var(--brand-line); border-radius: 16px;
  box-shadow: var(--sh-1);
}
.gate-hero h1 { font-size: 23px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 9px; }
.gate-hero p { color: var(--muted); font-size: 13.5px; line-height: 1.8; margin: 0 auto; max-width: 580px; }
.gate-hero p b { color: var(--text); }

.gate-tip { margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* 登录页：表单卡与说明卡居中收窄，避免在宽屏上拉得太开 */
#gateView .panel { margin-left: auto; margin-right: auto; }
#authPanel { max-width: 470px; }
.gate-steps { max-width: 700px; }
#gateView .gate-steps { margin-top: 16px; }

.gate-steps .step-row {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; color: var(--muted); line-height: 1.75;
  padding: 11px 0; border-bottom: 1px dashed var(--line);
}
.gate-steps .step-row:last-child { border-bottom: 0; padding-bottom: 0; }
.gate-steps .step-row b { color: var(--text); }
.step-n {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: linear-gradient(180deg, #eaf1fd, #dde9fa); border: 1px solid var(--brand-line);
  color: var(--brand);
  font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 3px;
}

/* ---------- 权限管理 ---------- */
.perm-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.perm-act .btn-sm:disabled { opacity: .45; cursor: not-allowed; }

.adder {
  display: flex; gap: 8px; margin-top: 14px; padding: 12px;
  border: 1px solid var(--line-2); background: #f9fbfe; border-radius: var(--r-md);
}
.adder input { flex: 1 1 auto; min-width: 0; padding: 11px 13px; font-size: 13.5px; }
.adder select {
  flex: none; border: 1px solid var(--line); border-radius: 10px; padding: 11px 10px;
  font-family: inherit; font-size: 13.5px; background: #fff; color: var(--text); cursor: pointer;
}
.adder select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3.5px rgba(18, 87, 196, .13); }
.adder .btn-sm { flex: none; padding: 11px 16px; }
.hint-line { color: var(--muted); font-size: 12px; margin-top: 10px; line-height: 1.65; }

/* ---------- 报价说明标签 ---------- */
.rk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; line-height: 1.5; padding: 3px 10px; border-radius: 8px;
  border: 1px solid transparent; white-space: nowrap; max-width: 100%;
}
.rk b { font-weight: 650; }
.rk .rk-t { font-weight: 400; opacity: .92; overflow: hidden; text-overflow: ellipsis; }
.rk-info { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.rk-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.rk-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.rk-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.rk-muted { background: #eef1f6; color: var(--muted); border-color: #e0e5ee; }
.rk-sm { font-size: 11px; padding: 1px 7px; border-radius: 6px; gap: 3px; }

.remarks { display: flex; flex-wrap: wrap; gap: 7px; }

.remark-block { padding: 13px 20px; border-top: 1px solid var(--line); background: #fafcfe; }
.remark-block.is-batch {
  margin-bottom: 12px; border: 1px solid var(--brand-line); border-radius: var(--r-md);
  background: linear-gradient(180deg, #f4f8ff, #eaf1fd); padding: 13px 16px;
}
.remark-block.is-batch .remark-head .rh-t { color: var(--brand); }
.remark-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.remark-head .rh-t { font-size: 12px; font-weight: 700; color: var(--text); }
.remark-head .rh-s { font-size: 11.5px; color: var(--muted); }
.remark-head .btn-xs { margin-left: auto; }
.remark-empty { color: var(--muted); font-size: 12.5px; }

.alt-rk { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.prev-rk { white-space: normal !important; max-width: 280px; color: var(--muted); }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(13, 22, 40, .48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-box {
  position: relative; background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 580px;
  max-height: 88vh; display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--sh-4);
}
.modal-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 17px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfeff, #f8fbfe);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal-title { font-size: 15px; font-weight: 700; }
.modal-sub { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }
.modal-x {
  margin-left: auto; border: 0; background: #f1f4f9; color: var(--muted);
  width: 28px; height: 28px; border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer; flex: none;
  transition: all .12s;
}
.modal-x:hover { background: #e6eaf2; color: var(--text); }
.modal-body { padding: 16px 18px; overflow: auto; }
.modal-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: #fafcfe; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.modal-foot .btn-primary { flex: 0 0 auto; padding: 10px 24px; font-size: 14px; }
.modal-foot .btn-ghost { padding: 10px 18px; font-size: 14px; }

.rm-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.rm-row .rm-tag {
  flex: 0 0 152px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 8px;
  font-family: inherit; font-size: 13px; background: #fff; color: var(--text); cursor: pointer;
}
.rm-row .rm-tag:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3.5px rgba(18, 87, 196, .13); }
.rm-row .rm-text { flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: 13.5px; }
.rm-hint { color: var(--muted); font-size: 12px; margin-top: 12px; line-height: 1.6; }

/* ---------- 现舱池 ---------- */
.sp-stats .stat-grid { margin-bottom: 10px; }
.sp-stats .stat .v .unit { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 1px; }
#spStats .stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
#spStats .stat:nth-child(3n+1)::before { background: linear-gradient(180deg, #3f82e6, #1257c4); }
#spStats .stat:nth-child(3n+2)::before { background: linear-gradient(180deg, #23b7a5, #0c8a5f); }
#spStats .stat:nth-child(3n+3)::before { background: linear-gradient(180deg, #8b7bf0, #5b4fd6); }

.sp-tally { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tally-i {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 11px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; box-shadow: var(--sh-1);
}
.sp-tally-i b { color: var(--text); font-weight: 650; font-size: 13px; }

.sp-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.sp-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none;
}
.sp-chk input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; margin: 0; }
.sp-tools .btn-sm { margin-left: auto; flex: 0 0 auto; padding: 8px 15px; }

.sp-list { margin-top: 16px; }

.sp-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 17px 20px 13px; margin-bottom: 14px; box-shadow: var(--sh-2);
  transition: box-shadow .15s;
}
.sp-card:hover { box-shadow: var(--sh-3); }
.sp-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #2a72e0, #1fb0c6);
}
.sp-card.is-dim { opacity: .66; }
.sp-card.is-dim::before { background: linear-gradient(90deg, #c3cbda, #dde3ee); }

.sp-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sp-lane { font-size: 16.5px; font-weight: 720; letter-spacing: -.015em; }
.sp-lane .arrow { color: var(--brand); margin: 0 6px; font-weight: 400; }
.sp-lane .sp-cn { color: var(--muted); font-size: 13px; font-weight: 500; margin-left: 4px; }
.sp-tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.sp-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sp-slot {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: linear-gradient(180deg, #f2f7ff, #e9f1ff);
  border: 1px solid var(--brand-line); color: var(--brand);
  border-radius: 9px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sp-slot b { font-weight: 700; }
.sp-slot.out {
  background: #f3f5f9; border-color: var(--line); color: var(--muted); font-weight: 500;
}
.sp-noslot { color: var(--muted); font-size: 12.5px; }

.sp-rk { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.sp-note {
  margin-top: 10px; font-size: 12.5px; color: var(--muted);
  background: #fafcfe; border: 1px dashed var(--line); border-radius: 9px;
  padding: 8px 12px; line-height: 1.6;
}

.sp-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-2);
}
.sp-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* 查价结果卡里的现舱提示 */
.sp-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 20px; border-top: 1px solid var(--brand-line);
  background: linear-gradient(90deg, #eef5ff, #f6faff);
}
.sp-hint-t { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.sp-hint-s { font-size: 12px; color: var(--brand); opacity: .85; }
.sp-hint .btn-xs { margin-left: auto; background: #fff; }

/* 弹窗表单：两列布局 + 原生控件样式 */
.sp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sp-sec {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; color: var(--text);
  margin: 16px 0 9px; padding-top: 13px; border-top: 1px solid var(--line);
}
.sp-sec .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.form-row select,
.form-row input[type=date],
.form-row input[type=number] {
  width: 100%; border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 14px; font-size: 14px; font-family: inherit;
  background: #fff; color: var(--text); outline: none;
  transition: border-color .13s, box-shadow .13s;
}
.form-row select:focus,
.form-row input[type=date]:focus,
.form-row input[type=number]:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3.5px rgba(18, 87, 196, .13);
}
input[type=number] { -moz-appearance: textfield; }

.sp-ctlab {
  flex: 0 0 148px; font-size: 13px; font-weight: 650; color: var(--text);
  display: flex; align-items: center;
}
.sp-unit { flex: none; font-size: 12.5px; color: var(--muted); min-width: 14px; }
#spSlots .rm-text { padding: 9px 12px; font-size: 13.5px; }

/* ---------- 细滚动条 ---------- */
.suggest::-webkit-scrollbar, .modal-body::-webkit-scrollbar,
.tbl-scroll::-webkit-scrollbar, .warn-list ul::-webkit-scrollbar { width: 9px; height: 9px; }
.suggest::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb,
.tbl-scroll::-webkit-scrollbar-thumb, .warn-list ul::-webkit-scrollbar-thumb {
  background: #ccd6e6; border-radius: 9px; border: 2px solid #fff;
}
.suggest::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track,
.tbl-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .wrap { padding: 0 14px 48px; }
  .topbar-in { padding: 10px 14px; gap: 10px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
  .page-head { margin-top: 18px; }
  .page-head h2 { font-size: 18px; }
  .prices { grid-template-columns: repeat(2, 1fr); }
  .res-meta { grid-template-columns: repeat(2, 1fr); }
  .meta-cell:nth-child(2) { border-right: 0; }
  .meta-cell { padding: 11px 16px; }
  .stat-grid { grid-template-columns: 1fr; }
  .brand-s { display: none; }
  .res-badges { margin-left: 0; width: 100%; }
  .res-head, .res-foot, .remark-block, .price-box, .meta-cell { padding-left: 16px; padding-right: 16px; }
  .sp-hint { padding-left: 16px; padding-right: 16px; }
  .user-chip { margin-left: 8px; padding: 3px 4px 3px 9px; }
  .user-chip .u { max-width: 96px; }
  /* 窄屏顶栏：品牌一行，页签单独一行可横滑 */
  .topbar-in { flex-wrap: wrap; row-gap: 8px; }
  .tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
  .user-chip { margin-left: auto; }
  .gate-hero h1 { font-size: 19px; }
  .alt-prices { margin-left: 0; width: 100%; justify-content: flex-start; }
  .alt-prices .alt-p { align-items: flex-start; }
  .adder { flex-direction: column; }
  .adder .btn-sm { width: 100%; }
  .perm-act { justify-content: flex-start; }
  .rm-row { flex-wrap: wrap; }
  .rm-row .rm-tag { flex: 1 1 100%; }
  .modal-box { max-height: 92vh; }
  .remark-head .btn-xs { margin-left: 0; }
  .sp-form { grid-template-columns: 1fr; }
  .sp-tags { margin-left: 0; width: 100%; }
  .sp-foot { align-items: flex-start; }
  .sp-acts { margin-left: 0; width: 100%; }
  .sp-tools .btn-sm { margin-left: 0; width: 100%; }
  .sp-hint .btn-xs { margin-left: 0; }
  .tab { padding: 6px 11px; font-size: 12.5px; }
}

/* ==========================================================================
   船司本地费用参考（查价结果里的参考区块 + 商务后台的维护列表）
   ========================================================================== */

.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 查价结果卡里的参考区块 ---------- */
.lc-block {
  margin: 13px 20px 0; padding: 13px 15px 12px;
  background: linear-gradient(180deg, #f8fbff, #f3f8ff);
  border: 1px solid var(--brand-line); border-radius: var(--r-md);
}
.lc-block::before {
  content: ''; display: block; height: 2px; margin: -13px -15px 11px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(90deg, #1257c4, #1fb0c6);
  opacity: .55;
}
.lc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-ico { font-size: 14px; line-height: 1; }
.lc-t { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.lc-sum {
  margin-left: auto; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-2);
}
.lc-sum b { font-size: 15.5px; color: var(--brand-d); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lc-sum-s { font-size: 11.5px; color: var(--muted); }
.lc-empty { margin-top: 9px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

.lc-block .tbl-scroll { max-height: none; margin-top: 10px; background: #fff; border-radius: var(--r); }
table.lc-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.lc-tbl th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px;
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: #f8fafd;
}
table.lc-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.lc-tbl tr:last-child td { border-bottom: 0; }
table.lc-tbl .num { white-space: nowrap; }
table.lc-tbl .num b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lc-name { font-weight: 620; color: var(--text); }
.lc-code {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line);
  vertical-align: 1px;
}
.lc-note { display: inline-block; margin-left: 7px; font-size: 11.5px; color: var(--muted); }
.lc-u { color: var(--muted); white-space: nowrap; font-size: 12px; }
.lc-per { font-size: 11px; color: var(--muted); margin-left: 3px; }
.lc-dim { color: var(--muted-2); font-size: 12px; }
.lc-amt-all { margin-top: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lc-hint { margin-top: 9px; font-size: 11.5px; color: var(--muted); line-height: 1.65; }

/* ---------- 商务后台：已录入列表 ---------- */
.lc-topline { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.lc-topline b { color: var(--text); font-variant-numeric: tabular-nums; }
.lc-grp { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 12px; background: var(--card); }
.lc-grp-h {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 14px; background: linear-gradient(180deg, #f8fbff, #f3f7fd);
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.lc-grp-h b { color: var(--text); font-weight: 700; }
.lc-grp-n { margin-left: auto; font-size: 12px; color: var(--muted); }
.lc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2);
}
.lc-row:last-child { border-bottom: 0; }
.lc-row:hover { background: #fafcfe; }
.lc-row.is-off { opacity: .58; }
.lc-row-m { min-width: 0; flex: 1 1 auto; }
.lc-row-n { font-size: 13.5px; font-weight: 620; color: var(--text); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lc-row-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lc-row-a {
  flex: 0 0 auto; max-width: 300px; text-align: right;
  font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.lc-cur { font-size: 11px; color: var(--muted); }
.lc-row-d { flex: 0 0 auto; display: flex; gap: 6px; }

/* ---------- 编辑弹窗里的柜型价格子 ---------- */
.lc-amt-head { margin: 14px 0 8px; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
#lcAmounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.lc-amt-cell {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-soft-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 10px; margin: 0;
}
.lc-amt-cell .lc-ctlab { flex: 0 0 auto; font-size: 12.5px; font-weight: 650; color: var(--text); min-width: 46px; }
.lc-amt-cell input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 6px 8px; font-size: 13.5px; font-family: inherit; text-align: right;
  background: #fff; color: var(--text);
}
.lc-amt-cell input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lc-amt-1 { display: flex; align-items: center; gap: 9px; }
.lc-amt-1 input {
  flex: 1 1 auto; min-width: 0;
}
.lc-unit-tag { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---------- 小的拖放区 ---------- */
.dropzone.dz-sm { padding: 20px 18px; }
.dropzone.dz-sm .dz-ico { width: 38px; height: 38px; font-size: 18px; margin-bottom: 8px; border-radius: 11px; }
.dropzone.dz-sm .dz-t { font-size: 13.5px; }
.dropzone.dz-sm .dz-s { font-size: 12px; max-width: 640px; margin: 6px auto 0; line-height: 1.65; }

@media (max-width: 720px) {
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lc-block { margin-left: 16px; margin-right: 16px; padding: 12px 13px 11px; }
  .lc-block::before { margin: -12px -13px 10px; }
  .lc-sum { margin-left: 0; width: 100%; }
  .lc-row { flex-wrap: wrap; gap: 8px; }
  .lc-row-a { max-width: none; text-align: left; }
  .lc-row-d { margin-left: 0; }
  .lc-grp-n { margin-left: 0; }
  #lcAmounts { grid-template-columns: 1fr 1fr; }
}

/* ============ 批量修改（本地费用 / 报价批次） ============ */
/* 注意：下面 .batch-note / .batch-acts 都设了 display，会盖过 [hidden] 的 UA 样式，必须显式补回 */
.batch-bar[hidden], .batch-note[hidden], .batch-acts[hidden] { display: none; }
.batch-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 13px;
}
.batch-bar .btn-sm { flex: 0 0 auto; padding: 7px 14px; font-size: 13px; }
.batch-note {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12.5px; color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 9px; padding: 6px 11px;
  font-variant-numeric: tabular-nums;
}
.batch-note b { font-weight: 700; }
.batch-note.is-zero { color: var(--muted); background: #f4f7fb; border-color: var(--line); }
.batch-acts {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 9px; border: 1px dashed var(--brand-line);
  border-radius: 11px; background: var(--brand-soft-2);
}
.batch-acts .btn-xs { flex: 0 0 auto; }
.batch-acts .btn-xs:disabled { opacity: .45; cursor: not-allowed; }

.btn-danger {
  border: 1px solid var(--danger-line); background: #fff; color: var(--danger);
  font-family: inherit; padding: 4px 10px; font-size: 12px; border-radius: 7px;
  cursor: pointer; box-shadow: var(--sh-1); transition: all .13s;
}
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* 行首勾选框 */
.row-chk {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  background: #f4f7fb; border: 1px solid var(--line); margin: 0;
  transition: all .12s;
}
.row-chk:hover { border-color: var(--brand-line); background: var(--brand-soft-2); }
.row-chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.lc-row.is-sel, .batch-row.is-sel { background: var(--brand-soft-2); }
.lc-row.is-sel { box-shadow: inset 3px 0 0 var(--brand); }
.batch-row.is-sel { box-shadow: inset 3px 0 0 var(--brand); border-radius: 0 10px 10px 0; }
.batch-row.is-sel .row-chk, .lc-row.is-sel .row-chk { border-color: var(--brand); background: #fff; }

/* 变更预览 */
.batch-pv-top { font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.batch-pv-top b { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.batch-pv-none { font-size: 12.5px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 10px; padding: 10px 12px; }
.batch-pv-wrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
table.batch-pv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.batch-pv thead th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--muted);
  background: linear-gradient(180deg, #f8fbff, #f3f7fd);
  padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.batch-pv td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.batch-pv tbody tr:last-child td { border-bottom: 0; }
table.batch-pv td:first-child { color: var(--text-2); width: 40%; }
.pv-chip {
  display: inline-block; font-size: 11.5px; color: var(--muted);
  background: #f5f8fc; border: 1px solid var(--line-2); border-radius: 7px;
  padding: 3px 8px; margin: 2px 4px 2px 0; font-variant-numeric: tabular-nums;
}
.pv-chip s { color: var(--muted-2); text-decoration: line-through; }
.pv-chip b { color: var(--ok); font-weight: 700; }
.batch-pv-more { font-size: 11.5px; color: var(--muted); padding: 7px 12px; background: #fafcfe; border-top: 1px solid var(--line-2); }

/* 改属性弹窗的字段行 */
.bfld { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bfld-k {
  flex: 0 0 122px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; margin: 0;
}
.bfld-k input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.bfld-v { flex: 1 1 auto; min-width: 0; }
.bfld-v select, .bfld-v input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text);
}
.bfld-v select:focus, .bfld-v input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px rgba(18, 87, 196, .13); }
#baAmounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
#baAmountWrap .form-row { margin-top: 10px; }

/* 调价弹窗 */
.lp-modes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-mode {
  flex: 1 1 220px; display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px;
  cursor: pointer; background: #fff; margin: 0; transition: all .13s;
}
.lp-mode:hover { border-color: var(--brand-line); background: var(--brand-soft-2); }
.lp-mode input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer; flex: none; }
.lp-mode span { display: flex; flex-direction: column; gap: 2px; }
.lp-mode b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.lp-mode em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.lp-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(18, 87, 196, .08); }
.lp-quick { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.lp-ctr { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-ct {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px;
  font-size: 13px; background: #fff; color: var(--text-2); transition: all .12s;
}
.lp-ct:hover { border-color: var(--brand-line); background: var(--brand-soft-2); }
.lp-ct input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.lp-ct:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
#lcBatchModal .modal-box, #lcPriceModal .modal-box { max-width: 760px; }

/* 轻提示条 */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px);
  z-index: 90; max-width: min(560px, 90vw);
  background: rgba(17, 26, 43, .93); color: #fff;
  font-size: 13px; line-height: 1.5; padding: 10px 16px; border-radius: 11px;
  box-shadow: 0 12px 30px -12px rgba(10, 20, 40, .6);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-warn { background: rgba(176, 112, 0, .95); }

@media (max-width: 720px) {
  .batch-bar { gap: 8px; }
  .batch-acts { width: 100%; }
  .bfld { flex-wrap: wrap; gap: 6px; }
  .bfld-k { flex: 0 0 auto; }
  .bfld-v { flex: 1 1 100%; }
  .lp-mode { flex: 1 1 100%; }
  table.batch-pv td:first-child { width: auto; }
  .row-chk { width: 24px; height: 24px; }
}

/* ============ 二级页签（商务上传 / 系统设置） ============ */
.subnav {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 7px; margin-bottom: 16px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid var(--line); border-radius: 15px;
  box-shadow: var(--sh-1);
  backdrop-filter: blur(8px);
}
.subtab {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2);
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: 9px 14px; cursor: pointer; white-space: nowrap;
  transition: all .14s;
}
.subtab:hover { color: var(--brand); background: var(--brand-soft-2); }
.subtab.on {
  color: var(--brand); background: #fff;
  border-color: var(--brand-line);
  box-shadow: 0 2px 8px -3px rgba(18, 87, 196, .3), inset 0 -2px 0 var(--brand);
}
.subtab-n {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: #f2f6fc; border: 1px solid var(--line-2);
  border-radius: 20px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.subtab.on .subtab-n { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }
.subpane { display: block; }
.subpane[hidden] { display: none; }

/* ============ 折叠说明块 ============ */
details.fold { margin: 0 0 13px; }
details.fold > summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft-2); border: 1px solid var(--brand-line);
  border-radius: 9px; padding: 6px 12px; cursor: pointer;
  list-style: none; user-select: none; transition: all .13s;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: var(--brand-soft); }
details.fold > summary .fold-c { font-size: 10px; transition: transform .16s; transform: rotate(-90deg); }
details.fold[open] > summary .fold-c { transform: rotate(0deg); }
details.fold[open] > summary { margin-bottom: 10px; }
details.fold > *:last-child { margin-bottom: 0; }

/* ============ 手动新增航线弹窗 ============ */
#laneModal .modal-box, #dictBatchModal .modal-box, #btBatchModal .modal-box { max-width: 760px; }
#lnPrices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
#lnPrices .lc-amt { margin: 0; }
.ln-pv { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ln-pv-k { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ln-pv-k small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.ln-pv-v { flex: 0 0 auto; }
.ln-pv-v.is-dup { color: var(--warn); font-weight: 700; }

/* ==========================================================================
   【v1.9】权限管理 · 用户与动态 / 市场洞察 / 查价历史 / 价格动态
   ========================================================================== */

/* ---------- 通用统计条 ---------- */
.stat-bar { margin-bottom: 12px; }
.stat-bar .stat-grid { margin-bottom: 0; }

/* ---------- 权限管理：在线状态 ---------- */
.uo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: 0 0 auto; display: inline-block; }
.uo-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.uo-dot.recent { background: var(--brand-l); box-shadow: 0 0 0 3px var(--brand-soft); }
.uo-dot.idle { background: var(--muted-2); }

/* ---------- 权限管理：操作流水 ---------- */
.audit-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.audit-row:last-child { border-bottom: 0; }
.audit-ico {
  flex: 0 0 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.audit-b { flex: 1 1 auto; min-width: 0; }
.audit-t { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word; }
.audit-s { font-size: 12px; color: var(--muted); margin-top: 1px; word-break: break-word; }
.audit-time { flex: 0 0 auto; font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 工具条 ---------- */
.ins-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ins-toolbar > .search-wrap { flex: 1 1 240px; min-width: 180px; }

/* ---------- 【v1.9】左侧功能板块导航栏 ---------- */
.app-split { display: flex; gap: 20px; align-items: flex-start; }
.app-main { flex: 1 1 auto; min-width: 0; }
.side-nav { flex: 0 0 178px; width: 178px; position: sticky; top: 76px; }
/* 有侧栏时整个画布加宽，主内容宽度跟没侧栏时基本一致（不挤压查价 / 上传表） */
body.has-nav .wrap { max-width: 1248px; }
body.has-nav .topbar-in { max-width: 1248px; }   /* 顶栏与内容左右对齐 */

/* 六个板块竖排（沿用 .tab / .tab.on 的高亮配色，只改排布） */
.side-nav-cap {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; padding: 0 5px 7px;
}
.side-nav .tabs {
  margin-left: 0; flex-direction: column; gap: 3px;
  background: #eef2f8; padding: 6px; border-radius: 12px;
}
.side-nav .tab {
  width: 100%; text-align: left; padding: 9px 12px;
  border-radius: 9px; font-size: 13.5px; font-weight: 600;
}
.side-nav[hidden] { display: none; }

/* ---------- 首页「当前市场动态」横幅 ---------- */
.ins-hero {
  position: relative; margin-bottom: 16px; padding: 15px 46px 15px 18px;
  background: linear-gradient(135deg, #e9f0fd 0%, #f6f9ff 58%, #ffffff 100%);
  border: 1px solid var(--brand-line); border-radius: var(--r-md);
  box-shadow: var(--sh-1); overflow: hidden;
}
.ins-hero::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand-l), var(--brand-d));
}
.ins-hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ins-hero-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--brand-d);
  background: #fff; border: 1px solid var(--brand-line);
  border-radius: 20px; padding: 2px 10px;
}
.ins-hero-t { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -.01em; }
.ins-hero-s { font-size: 13px; color: var(--text-2); line-height: 1.65; }
.ins-hero-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; }
.ins-hero-meta { font-size: 11.5px; color: var(--muted); }
.ins-hero-x {
  position: absolute; right: 10px; top: 10px;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .8);
  color: var(--muted); font-size: 15px; line-height: 1; font-family: inherit;
}
.ins-hero-x:hover { color: var(--danger); border-color: var(--danger-line); background: #fff; }

/* ---------- 市场洞察列表 ---------- */
.ins-list { display: flex; flex-direction: column; gap: 12px; }
.ins-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: var(--sh-1);
  display: flex; gap: 14px; align-items: flex-start;
  transition: border-color .14s, box-shadow .14s;
}
.ins-card:hover { border-color: var(--brand-line); box-shadow: var(--sh-2); }
.ins-card.is-pin { border-left: 3px solid var(--brand); }
.ins-card-ico {
  flex: 0 0 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 19px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.ins-card-b { flex: 1 1 auto; min-width: 0; }
.ins-card-t { font-size: 14.5px; font-weight: 680; color: var(--text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ins-card-s { font-size: 12.8px; color: var(--text-2); margin-top: 5px; line-height: 1.62; }
.ins-card-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.ins-card-act { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* ---------- 报告详情正文渲染 ---------- */
.ins-body { font-size: 13.5px; line-height: 1.78; color: var(--text-2); word-break: break-word; }
.ins-body h2 { font-size: 15px; color: var(--text); margin: 18px 0 8px; font-weight: 700; }
.ins-body h2:first-child { margin-top: 0; }
.ins-body h3 { font-size: 13.5px; color: var(--text); margin: 14px 0 6px; font-weight: 650; }
.ins-body p { margin: 0 0 10px; }
.ins-body ul { margin: 6px 0 11px; padding-left: 20px; }
.ins-body li { margin-bottom: 4px; }
.ins-body strong { color: var(--text); font-weight: 680; }
.ins-body table { width: 100%; border-collapse: collapse; margin: 11px 0; font-size: 12.5px; }
.ins-body th, .ins-body td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; }
.ins-body th { background: var(--brand-soft-2); font-weight: 650; color: var(--text); }
.ins-file-box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--brand-soft-2); border: 1px solid var(--brand-line);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px;
}
.ins-file-ico { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: #fff; border: 1px solid var(--brand-line); }
.ins-file-b { flex: 1 1 auto; min-width: 0; }
.ins-file-n { font-size: 13px; font-weight: 650; color: var(--text); word-break: break-all; }
.ins-file-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ins-preview { width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.ins-preview-img { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); display: block; margin: 0 auto; }

/* ---------- 查价历史 ---------- */
.qh-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.qh-tabs { display: inline-flex; gap: 6px; background: #f2f6fc; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.qh-tab {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 6px 13px; cursor: pointer; white-space: nowrap; transition: all .14s;
}
.qh-tab:hover { color: var(--brand); }
.qh-tab.on { color: var(--brand); background: #fff; border-color: var(--brand-line); box-shadow: 0 1px 5px -2px rgba(18, 87, 196, .35); }
.qh-bar > .btn-ghost { margin-left: auto; }

.qh-list { display: flex; flex-direction: column; }
.qh-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.qh-item:last-child { border-bottom: 0; }
.qh-b { flex: 1 1 auto; min-width: 0; }
.qh-route { font-size: 13.5px; font-weight: 640; color: var(--text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.qh-route .qh-ct { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 6px; padding: 1px 7px; }
.qh-meta { font-size: 11.8px; color: var(--muted); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
.qh-price { flex: 0 0 auto; text-align: right; }
.qh-price .v { font-size: 15px; font-weight: 720; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.qh-price .v small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 1px; }
.qh-price .d { font-size: 11px; font-weight: 650; margin-top: 1px; font-variant-numeric: tabular-nums; }
.qh-price .d.up { color: var(--danger); }
.qh-price .d.down { color: var(--ok); }
.qh-act { flex: 0 0 auto; display: flex; gap: 6px; }

/* ---------- 价格动态条形 ---------- */
.trend-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.trend-head .big { font-size: 20px; font-weight: 730; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.trend-head .cmp { font-size: 12.5px; font-weight: 650; }
.trend-head .cmp.up { color: var(--danger); }
.trend-head .cmp.down { color: var(--ok); }
.trend-head .cmp.flat { color: var(--muted); }
.trend-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.trend-lb { flex: 0 0 100px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-bar { flex: 1 1 auto; height: 9px; border-radius: 6px; background: #f2f6fc; border: 1px solid var(--line-2); overflow: hidden; }
.trend-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--brand-l), var(--brand)); }
.trend-bar i.is-latest { background: linear-gradient(90deg, #f0a03c, #d97a12); }
.trend-val { flex: 0 0 88px; text-align: right; font-size: 12.5px; font-weight: 660; font-variant-numeric: tabular-nums; }
.trend-note { margin-top: 10px; }

/* ---------- 其它 ---------- */
.in-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
  margin-top: 16px; user-select: none;
}
.in-check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
#insightModal .modal-box, #insightViewModal .modal-box, #trendModal .modal-box { max-width: 820px; }
#inArticlePane, #inFilePane { margin-top: 4px; }

@media (max-width: 720px) {
  .subnav { gap: 6px; padding: 6px; }
  .subtab { flex: 1 1 46%; font-size: 12.5px; padding: 8px 10px; }
  #lnPrices { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

  .ins-hero { padding: 14px 40px 14px 15px; }
  .ins-hero-t { font-size: 14.5px; }
  .ins-card { flex-wrap: wrap; }
  .ins-card-act { flex-direction: row; width: 100%; }
  .ins-card-act .btn-ghost { flex: 1 1 auto; }
  .qh-item { flex-wrap: wrap; }
  .qh-price { text-align: left; }
  .qh-act { width: 100%; }
  .qh-act .btn-ghost { flex: 1 1 auto; }
  .trend-lb { flex: 0 0 74px; font-size: 11px; }
  .trend-val { flex: 0 0 74px; font-size: 12px; }
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ins-preview { height: 52vh; }
}

/* ---------- 【v1.9】窄屏：左侧导航折回内容上方（横向滚动条） ---------- */
@media (max-width: 1100px) {
  /* 列方向必须 stretch，否则导航与主内容都会收缩成内容宽度 */
  .app-split { flex-direction: column; gap: 14px; align-items: stretch; }
  .side-nav { flex: none; width: 100%; position: static; top: auto; }
  body.has-nav .wrap, body.has-nav .topbar-in { max-width: 1060px; }

  .side-nav-cap { display: none; }
  .side-nav .tabs {
    flex-direction: row; gap: 3px; padding: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .side-nav .tab { width: auto; flex: 0 0 auto; padding: 7px 14px; font-size: 13px; }
}

/* ==========================================================================
   【v2.0】订单跟踪 / 客户 CRM
   ========================================================================== */

/* ---------- 工具条 ---------- */
.od-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.od-tools select {
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  font-family: inherit; font-size: 13px; color: var(--text-2); background: #fff; cursor: pointer;
}
.od-tools select:focus { outline: none; border-color: var(--brand-l); box-shadow: 0 0 0 3px var(--brand-soft); }
.od-tools .sp-chk { margin-right: auto; }

/* ---------- 订单表格（宽表：横向滚动 + 表头/客户列固定） ---------- */
.od-table-wrap {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  box-shadow: var(--sh-1); overflow: auto; max-height: 70vh;
}
.od-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 2200px; }
.od-table th {
  position: sticky; top: 0; z-index: 3; background: #f4f8fd;
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  text-align: left; padding: 9px 10px; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.od-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--line-2); color: var(--text-2);
  vertical-align: top; white-space: nowrap; background: var(--card);
}
.od-table tbody tr:last-child td { border-bottom: 0; }
.od-table th.od-stick { z-index: 4; }
.od-table .od-stick { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--line-2); }
/* 操作列固定在右侧：列再多，明细 / 导出 / 编辑 / 删除始终可见 */
.od-table th.od-ops-stick { z-index: 4; }
.od-table .od-ops-stick {
  position: sticky; right: 0; z-index: 2; background: var(--card);
  box-shadow: -1px 0 0 var(--line-2);
}
.od-table tbody tr:hover td.od-ops-stick { background: #f8fbff; }
.od-table tr.is-eta td.od-ops-stick { background: #fefaf2; }
.od-table tr.is-over td.od-ops-stick { background: #fdf5f5; }
.od-table tr.is-eta:hover td.od-ops-stick { background: #fdf5e8; }
.od-table tr.is-over:hover td.od-ops-stick { background: #fdeeee; }
.od-cust { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: normal; max-width: 190px; }
.od-sub { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 3px; white-space: normal; max-width: 190px; }
.od-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.od-table .od-no { text-align: right; color: var(--muted); }
/* ETA POD：日期下方挂到港倒计时徽标（不额外占列） */
.od-eta-cell { white-space: nowrap; }
.od-eta-cell .od-eta-badge { display: block; margin-top: 4px; }
.od-rmk { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.od-dash { color: #b9c3d4; }
.od-nowrap { white-space: nowrap; }
.od-remark { font-size: 12px; color: var(--muted); margin-top: 8px; white-space: normal; max-width: 900px; }
.od-ops { display: flex; gap: 5px; }
.od-ops .btn-sm { padding: 3px 8px; font-size: 12px; }
/* 预警行：橙 = 7 天内到港，红 = 已到港未还柜；左侧色条钉在固定列上 */
.od-table tr.is-eta td { background: #fefaf2; }
.od-table tr.is-over td { background: #fdf5f5; }
.od-table tbody tr:hover td { background: #f8fbff; }
.od-table tr.is-eta:hover td { background: #fdf5e8; }
.od-table tr.is-over:hover td { background: #fdeeee; }
.od-table tr.is-eta td.od-stick { background: #fefaf2; }
.od-table tr.is-over td.od-stick { background: #fdf5f5; }
.od-table tr.is-eta td.od-stick { box-shadow: inset 3px 0 0 var(--warn), 1px 0 0 var(--line-2); }
.od-table tr.is-over td.od-stick { box-shadow: inset 3px 0 0 var(--danger), 1px 0 0 var(--line-2); }
/* 明细行：全部时间节点 + 备注 */
.od-detail td { background: #fbfdff !important; border-top: 1px dashed var(--line); }
.od-detail .od-stick { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.od-detail .od-nodes { margin-top: 0; white-space: normal; }
.od-empty-row td { white-space: normal; padding: 0; }
.od-nodes { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.od-node { font-size: 12px; color: var(--muted); white-space: nowrap; }
.od-node b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.od-eta-badge { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 3px 10px; white-space: nowrap; border: 1px solid; display: inline-block; }
.od-eta-badge.is-eta { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.od-eta-badge.is-over { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.od-eta-badge.is-ok { background: #f4f7fb; color: var(--muted); border-color: var(--line); }
.od-status { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--brand-soft); color: var(--brand-d); }
.od-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 客户卡片 ---------- */
.cm-list { display: flex; flex-direction: column; gap: 12px; }
.cm-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px 18px; }
.cm-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cm-co { font-size: 15px; font-weight: 700; color: var(--text); }
.cm-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-meta { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.cm-meta b { color: var(--text-2); font-weight: 600; }
.cm-ops { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cm-follow-wrap { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.cm-fl { display: flex; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.cm-fl:last-child { border-bottom: 0; }
.cm-fl-d { flex: 0 0 86px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-fl-n { flex: 1 1 auto; color: var(--text-2); word-break: break-word; }
.cm-add { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.cm-add input { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font-family: inherit; font-size: 13px; color: var(--text); background: #fff; }
.cm-add input:focus { outline: none; border-color: var(--brand-l); box-shadow: 0 0 0 3px var(--brand-soft); }
.cm-add input[type="date"] { flex: 0 0 150px; }
.cm-add input[type="text"] { flex: 1 1 200px; min-width: 0; }

/* ---------- 等级 / 意图 小徽标 ---------- */
.grade-chip { font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 2px 9px; border: 1px solid; white-space: nowrap; }
.grade-normal { background: #f4f7fb; color: var(--muted); border-color: var(--line); }
.grade-important { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.grade-vip { background: #f3ecff; color: #6b3fc4; border-color: #ded0f7; }
.grade-s { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.stage-chip { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: #f4f7fb; color: var(--text-2); border: 1px solid var(--line); }
.stage-chip.st-deal { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.stage-chip.st-lost { background: #f5f5f7; color: var(--muted); border-color: var(--line); }
.stage-chip.st-quote { background: var(--brand-soft); color: var(--brand-d); border-color: var(--brand-line); }

/* ---------- 弹窗表单栅格 ---------- */
.modal-box.modal-wide { max-width: 920px; }
.fm-cap { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 18px 0 9px; }
.fm-cap:first-child { margin-top: 0; }
.fm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fm-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fm-f label { font-size: 12px; color: var(--muted); font-weight: 600; }
.fm-f input, .fm-f select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  font-family: inherit; font-size: 13.5px; color: var(--text); background: #fff;
}
.fm-f input:focus, .fm-f select:focus { outline: none; border-color: var(--brand-l); box-shadow: 0 0 0 3px var(--brand-soft); }
.fm-f.fm-2 { grid-column: span 2; }
.fm-f.fm-3 { grid-column: span 3; }
.fm-f .req { color: var(--danger); }

/* ---------- 表单里可自行增删的「其他信息」字段 ---------- */
.fm-cap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fm-cap-row .hint { margin-left: 8px; }
.ef-menu {
  margin-top: 8px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: #fff; box-shadow: 0 10px 26px rgba(20, 40, 80, .12);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ef-menu-h { width: 100%; font-size: 12px; font-weight: 700; color: var(--muted); }
.ef-mitem {
  font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
}
.ef-mitem:hover { border-color: var(--brand-line); background: var(--brand-soft-2); color: var(--brand); }
.ef-menu-none { font-size: 12px; color: var(--muted); }
.ef-menu-custom {
  flex: 1 1 100%; display: flex; gap: 6px; align-items: center;
  margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.ef-menu-custom input { flex: 1 1 auto; min-width: 0; }
.ef-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ef-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fbfdff;
}
.ef-name { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ef-tag {
  font-style: normal; font-size: 10.5px; color: var(--brand); background: var(--brand-soft);
  border-radius: 4px; padding: 1px 5px; margin-left: 5px;
}
.ef-val {
  font: inherit; font-size: 13px; width: 168px; padding: 5px 8px; background: #fff;
  color: var(--text); border: 1px solid var(--line); border-radius: 7px;
}
.ef-val:focus { outline: none; border-color: var(--brand-l); box-shadow: 0 0 0 3px var(--brand-soft); }
.ef-x {
  width: 26px; height: 28px; line-height: 1; font-size: 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted);
}
.ef-x:hover { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.ef-empty {
  margin-top: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-sm); background: #fbfdff;
}

/* ---------- 订单批量导入预览 ---------- */
.imp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.imp-chip {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: #fff; color: var(--text-2);
}
.imp-chip b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.imp-chip.is-new { border-color: var(--brand-line); background: var(--brand-soft-2); }
.imp-chip.is-new b { color: var(--brand-d); }
.imp-chip.is-upd { border-color: var(--ok-line); background: var(--ok-soft); }
.imp-chip.is-upd b { color: var(--ok); }
.imp-chip.is-bad { border-color: var(--danger-line); background: var(--danger-soft); }
.imp-chip.is-bad b { color: var(--danger); }
.imp-list { max-height: 340px; overflow: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.imp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.imp-table th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 650; color: var(--text-2);
  background: #f6f9fd; border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap;
}
.imp-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); color: var(--text-2); vertical-align: top; }
.imp-table tr:last-child td { border-bottom: none; }
.imp-table tr.is-bad td { background: var(--danger-soft); }
.imp-table .imp-no { color: var(--muted); font-variant-numeric: tabular-nums; width: 40px; }
.imp-table .imp-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.imp-badge { font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 2px 8px; border: 1px solid; white-space: nowrap; }
.imp-badge.is-new { color: var(--brand-d); border-color: var(--brand-line); background: var(--brand-soft-2); }
.imp-badge.is-upd { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.imp-badge.is-bad { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.imp-why { color: var(--danger); font-size: 12px; }

@media (max-width: 1100px) {
  .fm-grid { grid-template-columns: repeat(2, 1fr); }
  .fm-f.fm-3 { grid-column: span 2; }
  .od-table { min-width: 1500px; }
  .od-table-wrap { max-height: none; }
}

@media (max-width: 720px) {
  .od-cust, .od-sub { max-width: 150px; }
  .ef-val { width: 132px; }
  .ef-menu-custom input { flex: 1 1 100%; }
  .fm-grid { grid-template-columns: 1fr; }
  .fm-f.fm-2, .fm-f.fm-3 { grid-column: span 1; }
  .od-tools .sp-chk { margin-right: 0; width: 100%; }
  .od-tools .btn-sm { flex: 1 1 auto; }
  .cm-add input[type="date"] { flex: 1 1 130px; }
}