/* ==========================================================================
   安欣睿 TMS · 设计体系（Ant Design 5 视觉语言 / 纯原生 CSS）
   --------------------------------------------------------------------------
   不引入任何框架：用 CSS 变量（design token）复刻 Ant Design 的观感。

   ⚠️ 铁律：只改样式，不改任何 class 名与 DOM 结构。
      18 个页面的 innerHTML 手搓表格/表单全部照旧工作。

   文件结构：
     1. Token（颜色 / 圆角 / 阴影 / 间距 / 字号）
     2. 基础重置与排版
     3. 组件（按钮 / 输入 / 表格 / 标签 / 卡片 / 弹窗 / 导航 …）
     4. 业务模块样式（开单 / 签收 / 权限 / 运单详情 …）
     5. 深色模式（[data-theme="dark"] 重定义 token）
     6. 响应式（@media 断点）
   ========================================================================== */

/* ========================= 1. 设计 Token ========================= */
:root {
  /* --- 品牌色：Ant Design 5 日间蓝 #1677ff --- */
  --brand: #1677ff;
  --brand-hover: #4096ff;
  --brand-active: #0958d9;
  --brand-bg: #e6f4ff;
  --brand-bg-hover: #bae0ff;
  --brand-border: #91caff;
  --brand-text: #0958d9;
  --brand2: #0958d9;   /* 兼容旧代码里的深蓝（原 #0842b8） */
  --accent: #1677ff;   /* 兼容内联 style 里的 var(--accent,#1677ff) */

  /* 兼容页面 JS 内联 style 里的历史 token 名（page_trans / page_payout）。
     这些原本没定义、靠 var(--x, #ddd) 的兜底值生效 —— 兜底是写死的浅色，
     深色模式拿不到。这里挂到真 token 上，切主题就能一起变。 */
  --border: var(--line);
  --surface: var(--card);
  --elevated: var(--fill);
  --orange: var(--warn);

  /* --- 功能色 --- */
  --ok: #52c41a;   --ok-bg: #f6ffed;   --ok-border: #b7eb8f;   --ok-text: #389e0d;
  --warn: #faad14; --warn-bg: #fffbe6; --warn-border: #ffe58f; --warn-text: #d46b08;
  --red: #ff4d4f;  --red-bg: #fff2f0;  --red-border: #ffccc7;  --red-text: #cf1322;
  --info: #1677ff; --info-bg: #e6f4ff; --info-border: #91caff; --info-text: #0958d9;

  /* --- 中性色（Ant Design 文字 88/65/45/25 四档） --- */
  --txt: rgba(0, 0, 0, .88);
  --txt2: rgba(0, 0, 0, .65);
  --txt3: rgba(0, 0, 0, .45);
  --txt4: rgba(0, 0, 0, .25);
  --muted: rgba(0, 0, 0, .65);      /* 兼容旧 --muted */

  --line: #d9d9d9;                  /* 边框（输入框/表格外框） */
  --line-split: #f0f0f0;            /* 分割线（表头下沿/卡片边） */
  --bg: #f5f5f5;                    /* 页面底色 */
  --card: #ffffff;                  /* 容器/卡片 */
  --fill: #fafafa;                  /* 表头底、浅填充 */
  --fill-hover: #fafafa;            /* 行 hover */
  --fill-sel: #e6f4ff;              /* 行选中 / 双击行 hover */

  /* --- 圆角：2 / 4 / 6 / 8 四档 --- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;

  /* --- 阴影：一级（卡片）/ 二级（下拉、弹窗） --- */
  --sh-1: 0 1px 2px 0 rgba(0, 0, 0, .03),
          0 1px 6px -1px rgba(0, 0, 0, .02),
          0 2px 4px 0 rgba(0, 0, 0, .02);
  --sh-2: 0 6px 16px 0 rgba(0, 0, 0, .08),
          0 3px 6px -4px rgba(0, 0, 0, .12),
          0 9px 28px 8px rgba(0, 0, 0, .05);

  /* --- 间距：4px 基准 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;

  /* --- 字号 / 行高 --- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --lh: 1.5715;

  /* --- 控件高度（Ant Design 默认 32 / 小 24 / 大 40） --- */
  --h-ctl: 32px;
  --h-ctl-sm: 24px;
  --h-ctl-lg: 40px;

  /* --- 遮罩 --- */
  --mask: rgba(0, 0, 0, .45);

  color-scheme: light;
}

/* ========================= 2. 基础 ========================= */
* { box-sizing: border-box }

body {
  margin: 0;
  font: var(--fs) / var(--lh) -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important }

/* Ant Design 风格细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 4px }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .32) }
::-webkit-scrollbar-corner { background: transparent }

/* ========================= 3. 组件 ========================= */

/* ---------- 登录 ---------- */
.login-wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1677ff, #0958d9);
}
.login-box {
  background: var(--card); padding: 40px 34px; border-radius: var(--r-lg);
  width: 360px; box-shadow: var(--sh-2); text-align: center;
}
.login-logo img { height: 34px; margin-bottom: 10px }
.login-box h2 { margin: 6px 0 2px; font-size: var(--fs-lg); font-weight: 600 }
.login-box .sub { color: var(--txt2); margin: 0 0 20px; font-size: var(--fs-sm) }
.login-box input {
  width: 100%; height: var(--h-ctl-lg); padding: 7px 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--r); font-size: var(--fs);
  outline: none; background: var(--card); color: var(--txt);
}
.login-box input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, .1);
}
.err { color: var(--red); font-size: var(--fs-sm); min-height: 18px }
.hint { color: var(--txt3); font-size: var(--fs-xs); margin-top: var(--sp-2) }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--card); border-bottom: 1px solid var(--line-split);
  padding: 0 var(--sp-4); height: 56px; position: sticky; top: 0; z-index: 50;
  box-shadow: var(--sh-1);
}
.brand img { height: 26px }
.nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap }
.nav .grp { position: relative }
.nav .grp > a {
  padding: 6px 12px; border-radius: var(--r); cursor: pointer; font-size: var(--fs);
  color: var(--txt); white-space: nowrap; display: block; transition: background .2s, color .2s;
}
.nav .grp:hover > a { background: var(--fill); color: var(--brand) }
.nav .grp.on > a { background: var(--brand); color: #fff; font-weight: 500 }
.nav .drop {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--card); border: 1px solid var(--line-split); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); min-width: 160px; padding: var(--sp-1); z-index: 60;
}
.nav .grp:hover .drop { display: block }
.nav .drop a {
  display: block; padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-sm); color: var(--txt);
}
.nav .drop a:hover { background: var(--fill); color: var(--brand) }
.nav .drop a.on { background: var(--brand-bg); color: var(--brand-text); font-weight: 500 }
.who { font-size: var(--fs-sm); color: var(--txt2) }
.right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2) }

/* ---------- 布局 ---------- */
main { padding: var(--sp-4) var(--sp-6); max-width: 1560px; margin: 0 auto }

.card {
  background: var(--card); border: 1px solid var(--line-split);
  border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4);
  box-shadow: var(--sh-1);
}
h3.t {
  margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-2);
}
.row {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--sp-3);
}

/* ---------- 表单控件 ---------- */
input, select, textarea {
  padding: 4px 11px; border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--fs-sm); outline: none; background: var(--card); color: var(--txt);
  font-family: inherit; line-height: 1.5715; transition: border-color .2s, box-shadow .2s;
}
input:not([type="checkbox"]):not([type="radio"]), select { height: var(--h-ctl) }
textarea { min-height: 64px; resize: vertical }
input:hover, select:hover, textarea:hover { border-color: var(--brand-hover) }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, .1);
}
input::placeholder, textarea::placeholder { color: var(--txt4) }
input:disabled, select:disabled, textarea:disabled {
  background: var(--fill); color: var(--txt4); cursor: not-allowed;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; padding: 0; accent-color: var(--brand);
  cursor: pointer; vertical-align: middle;
}
input[type="date"] { min-width: 136px }
.ipt { height: var(--h-ctl) }        /* 业务代码里用到的输入框别名 */

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: var(--h-ctl); padding: 0 15px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt); border-radius: var(--r);
  cursor: pointer; font-size: var(--fs-sm); font-family: inherit; font-weight: 400;
  white-space: nowrap; transition: all .2s;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .02);
}
.btn:hover { border-color: var(--brand-hover); color: var(--brand-hover) }
.btn:active { border-color: var(--brand-active); color: var(--brand-active) }
.btn:disabled { color: var(--txt4); border-color: var(--line); background: var(--fill); cursor: not-allowed }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand) }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff }
.btn.primary:active { background: var(--brand-active); border-color: var(--brand-active) }
.btn.primary:disabled { background: var(--fill); border-color: var(--line); color: var(--txt4) }
.btn.sm { height: var(--h-ctl-sm); padding: 0 7px; font-size: var(--fs-xs); border-radius: var(--r-sm) }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none }
.btn.ghost:hover { background: var(--fill); border-color: var(--line-split) }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff }
.btn.danger:hover { background: #ff7875; border-color: #ff7875; color: #fff }
.btn.block { width: 100%; height: var(--h-ctl-lg); font-size: var(--fs-md); margin-top: var(--sp-1) }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm) }
th, td {
  padding: 9px 12px; border-bottom: 1px solid var(--line-split);
  text-align: left; white-space: nowrap;
}
th {
  background: var(--fill); color: var(--txt); font-weight: 600; position: sticky; top: 0;
  z-index: 2; font-size: var(--fs-sm);
}
th::after {                       /* 表头下方的分割线，sticky 时才不会跟着滚没 */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--line-split);
}
tbody tr { transition: background .2s }
tbody tr:hover { background: var(--fill-hover) }
tbody tr:last-child td { border-bottom: none }
.num { text-align: right; font-variant-numeric: tabular-nums }

.tbl-wrap {
  overflow: auto; max-height: 66vh; border: 1px solid var(--line-split);
  border-radius: var(--r-lg); background: var(--card);
}

/* 负数标红（2026-09-14 毛利分析）：表格 .num 与 KPI 卡都要覆盖。
   .kpi .v 特异性高于 .neg，必须写成 .kpi .v.neg 才生效 —— 只写 .neg 会被吃掉。 */
.neg { color: var(--red) !important; font-weight: 600 }
.kpi .v.neg { color: var(--red) !important }

/* 勾选列：窄一点，别把单号挤出屏幕 */
th.selcol, td.selcol { width: 40px; min-width: 40px; padding: 9px 0 9px 12px; text-align: center }
th.selcol input, td.selcol input { cursor: pointer; width: 16px; height: 16px; vertical-align: middle }
.selbar { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }

/* ---------- 指标卡 ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4) }
.kpi {
  background: var(--card); border: 1px solid var(--line-split);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-1);
}
.kpi .v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3 }
.kpi .l { color: var(--txt2); font-size: var(--fs-xs); margin-top: 2px }
.kpi.red .v { color: var(--red) }    .kpi.orange .v { color: var(--warn) }
.kpi.green .v { color: var(--ok) }   .kpi.blue .v { color: var(--brand) }

/* ---------- 标签 ---------- */
.tag {
  display: inline-flex; align-items: center; padding: 0 8px; height: 22px;
  border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1;
  border: 1px solid transparent; white-space: nowrap;
}
.t-gray   { background: var(--fill);     border-color: var(--line);          color: var(--txt2) }
.t-blue   { background: var(--info-bg);  border-color: var(--info-border);   color: var(--info-text) }
.t-green  { background: var(--ok-bg);    border-color: var(--ok-border);     color: var(--ok-text) }
.t-orange { background: var(--warn-bg);  border-color: var(--warn-border);   color: var(--warn-text) }
.t-red    { background: var(--red-bg);   border-color: var(--red-border);    color: var(--red-text) }

/* ---------- 提醒 ---------- */
.alert {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  border-radius: var(--r); margin-bottom: 6px; cursor: pointer;
  font-size: var(--fs-sm); border: 1px solid transparent; transition: all .2s;
}
.alert:hover { filter: brightness(.97) }
.alert.red    { background: var(--red-bg);  border-color: var(--red-border);  color: var(--red-text) }
.alert.orange { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text) }
.alert.blue   { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text) }

.banner {
  padding: 9px var(--sp-6); background: var(--warn-bg); color: var(--warn-text);
  font-size: var(--fs-sm); border-bottom: 1px solid var(--warn-border);
}
.banner.ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border) }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; background: var(--mask); display: flex;
  align-items: center; justify-content: center; z-index: 200; padding: 20px;
  animation: mfade .18s ease;
}
@keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mpop { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
.modal-box {
  background: var(--card); border-radius: var(--r-lg); width: 560px; max-width: 100%;
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--sh-2);
  animation: mpop .2s ease;
}
/* 注意：下面两条必须写在 .modal-box 块外面。
   曾经误插进声明块中间，被 CSS 解析器吞掉，wide 参数完全失效。 */
#modal.wide .modal-box { width: 900px; max-width: 96% }
#modal.xwide .modal-box { width: 1180px; max-width: 98% }
.modal-head {
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line-split);
  font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center;
}
.modal-head .x {
  margin-left: auto; background: none; border: none; font-size: 20px;
  cursor: pointer; color: var(--txt3); line-height: 1; padding: 0 4px; border-radius: var(--r-sm);
}
.modal-head .x:hover { color: var(--txt); background: var(--fill) }
.modal-body { padding: var(--sp-4) var(--sp-6); overflow: auto; flex: 1 }
.modal-foot {
  padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-split);
  display: flex; gap: var(--sp-2); justify-content: flex-end;
}
.fld { margin-bottom: var(--sp-3) }
.fld label { display: block; font-size: var(--fs-xs); color: var(--txt2); margin-bottom: var(--sp-1) }
.fld input, .fld select, .fld textarea { width: 100% }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-3) }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--sp-3) }
.sec {
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand-text);
  margin: var(--sp-4) 0 var(--sp-2);
  padding-bottom: 5px; border-bottom: 1px solid var(--line-split);
}

/* ---------- 键值网格（运单全量详情） ---------- */
/* 4 列自适应，窄屏自动降列，避免 88 个字段撑爆弹窗 */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; margin-bottom: 4px }
.kv { display: flex; flex-direction: column; padding: 5px 0; border-bottom: 1px dashed var(--line-split) }
.kv .k { font-size: 11px; color: var(--txt3) }
.kv .v { font-size: var(--fs-sm); word-break: break-all }
.kv .v.empty { color: var(--txt4) }
.kv .v.num { font-variant-numeric: tabular-nums; text-align: right }
.kv .v.mono { font-family: ui-monospace, Menlo, Consolas, monospace }
.kv .v.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kv .v.money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600 }

/* ---------- 弹窗内标签页 ---------- */
.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line-split);
  margin: -4px -24px 12px; padding: 0 var(--sp-6); position: sticky; top: -16px;
  background: var(--card); z-index: 5; flex-wrap: wrap;
}
.tabs a {
  padding: 8px 13px; font-size: var(--fs-sm); cursor: pointer; color: var(--txt2);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s;
}
.tabs a:hover { color: var(--brand-hover) }
.tabs a.on { color: var(--brand-text); font-weight: 500; border-bottom-color: var(--brand) }

/* ---------- 时间线（轨迹） ---------- */
.timeline { margin: 4px 0 0; padding: 0 0 0 4px; list-style: none }
.timeline li { position: relative; padding: 0 0 12px 16px; border-left: 2px solid var(--line-split) }
.timeline li:last-child { border-left-color: transparent }
.timeline li::before {
  content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brand);
}
.timeline li:first-child::before { background: var(--ok) }
.timeline .t { font-size: 11px; color: var(--txt3); font-family: ui-monospace, Menlo, Consolas, monospace }

/* 双击行：只给带 .dbl 的表格加手型，避免所有表格都像可点 */
table.dbl tbody tr { cursor: pointer }
table.dbl tbody tr:hover { background: var(--fill-sel) }
.hint-dbl { font-size: 11px; color: var(--txt3); font-weight: 400 }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .85); color: #fff; padding: 9px 16px;
  border-radius: var(--r-lg); z-index: 300; font-size: var(--fs);
  box-shadow: var(--sh-2);
}
.toast.ok { background: var(--ok) }
.toast.err { background: var(--red) }

.muted { color: var(--txt2) }
.sm { font-size: var(--fs-xs) }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace }
.nowrap { white-space: nowrap }
.bar { height: 8px; background: var(--fill); border-radius: var(--r-sm); overflow: hidden }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-sm) }

/* ========================= 4. 业务模块 ========================= */

/* ---------- 地址簿浮层 ----------
   ⚠️ 层级必须盖过 #modal(200)：容器在 index.html 上写了 z-index:260。
      这里只定义条目样式，别在这改 z-index（两处不一致会互相打架）。 */
.ab-item {
  padding: var(--sp-2) 10px; border: 1px solid var(--line-split);
  border-radius: var(--r); margin-bottom: 7px; cursor: pointer; transition: all .2s;
}
.ab-item:hover { background: var(--brand-bg); border-color: var(--brand-border) }
.ab-item .nm { font-size: 13.5px; font-weight: 600 }
.ab-item:hover .nm { color: var(--brand) }

/* ---------- 开单页：地址簿按钮 + 费用合计 ---------- */
.ab-btn {
  position: absolute; right: 0; top: 20px; font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--brand-border); background: var(--brand-bg);
  color: var(--brand-text); border-radius: var(--r-sm); cursor: pointer; line-height: 1.5;
}
.ab-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand) }
.fld { position: relative }
#sf_calc b { font-size: 15px }
#sf_total_money { font-weight: 600; color: var(--brand) }

/* ---------- 运单签收：图片上传与缩略图 ---------- */
.sign-hd {
  background: var(--fill); border: 1px solid var(--line-split); border-radius: var(--r);
  padding: 9px 11px; margin-bottom: var(--sp-3); font-size: var(--fs-sm); line-height: 1.9;
}
.sign-hd .muted { margin-right: 4px }
.sign-drop {
  border: 1px dashed var(--line); border-radius: var(--r-lg); padding: var(--sp-4);
  text-align: center; color: var(--txt2); font-size: var(--fs-sm); cursor: pointer;
  background: var(--fill); transition: all .2s;
}
.sign-drop:hover, .sign-drop.on { border-color: var(--brand); color: var(--brand); background: var(--brand-bg) }
.sign-drop .btn { margin-top: var(--sp-2) }
.sign-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px }
.sign-photo { position: relative; width: 104px }
.sign-photo img {
  width: 104px; height: 104px; object-fit: cover; border-radius: var(--r);
  border: 1px solid var(--line-split); display: block; background: var(--fill);
}
.sign-photo .x {
  position: absolute; right: -6px; top: -6px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: var(--red); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.sign-photo .x:hover { background: #d9363e }
.sign-photo .sm { margin-top: 3px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---------- 员工权限：数据权限三档 + 页面权限勾选树 ---------- */
.scope-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px }
.scope-opt {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--line-split); border-radius: var(--r);
  background: var(--fill); transition: all .2s;
}
.scope-opt:hover { border-color: var(--brand); background: var(--brand-bg) }
.scope-opt input { margin: 0 }
.perm-tree {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--line-split);
  border-radius: var(--r); padding: var(--sp-2) 10px; background: var(--fill);
}
.perm-grp { margin-bottom: var(--sp-2) }
.perm-gh {
  font-size: var(--fs-xs); font-weight: 600; color: var(--brand-text);
  margin-bottom: 4px; display: flex; align-items: center; gap: var(--sp-2);
}
.perm-gh .lnk { color: var(--brand); cursor: pointer; font-weight: 400 }
.perm-gh .lnk:hover { text-decoration: underline }
.perm-items { display: flex; flex-wrap: wrap; gap: 4px 10px }
.perm-item {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs);
  cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); white-space: nowrap;
}
.perm-item:hover { background: var(--brand-bg) }
.perm-item input { margin: 0 }
.perm-item.ao { color: #b03030 }

/* ---------- 运单详情页卡片分区 ---------- */
.sf-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: var(--sp-3) 14px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-bg), var(--card));
  border: 1px solid var(--brand-border); margin-bottom: var(--sp-4);
}
.sf-hero .no { font-size: 19px; font-weight: 700; letter-spacing: .5px }
.sf-hero .rt { font-size: var(--fs-sm); color: var(--txt2); display: flex; align-items: center; gap: 6px }
.sf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-3) }
.sf-card { border: 1px solid var(--line-split); border-radius: var(--r-lg); background: var(--card); overflow: hidden }
.sf-card > h4 {
  margin: 0; padding: 9px var(--sp-3); font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-text); background: var(--fill); border-bottom: 1px solid var(--line-split);
}
.sf-card .body { padding: var(--sp-2) var(--sp-3) }
.sf-card .kv-grid { gap: 0 14px }
.sf-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3) }
.sf-kpi .kpi {
  padding: var(--sp-2) 10px; border-radius: var(--r); background: var(--fill);
  border: 1px solid var(--line-split); text-align: center; box-shadow: none;
}
.sf-kpi .kpi .v { font-size: var(--fs-md); font-weight: 700 }
.sf-kpi .kpi .k { font-size: 11px; color: var(--txt3); margin-top: 2px }


/* ========================= 5. 深色模式 =========================
   颜色都收在 token 里，这里只需重定义变量即可整体换肤。
   注意：文件里那些硬编码 #fff 基本都是前景文字（按钮/导航选中/toast），
   深色背景下保持白色才是对的，所以不去动它们。
   仅少数「浅色底块」（登录框、详情页头部、KPI 等）用 var(--card)/var(--fill)
   之外的写死淡底，需要单独压暗。 */
[data-theme="dark"] {
  --brand: #1668dc; --brand-hover: #3c89e8; --brand-active: #0958d9;
  --brand-bg: #111b26; --brand-bg-hover: #15304a; --brand-border: #15395b;
  --brand-text: #3c89e8;
  --ok: #49aa19;   --ok-bg: #162312;   --ok-border: #274916;   --ok-text: #95de64;
  --warn: #d89614; --warn-bg: #2b1d05; --warn-border: #593d0d; --warn-text: #ffc53d;
  --red: #dc4446;  --red-bg: #2b1214;  --red-border: #5c2223;  --red-text: #ff7875;
  --info: #1668dc; --info-bg: #111b26; --info-border: #15395b; --info-text: #3c89e8;
  --txt: rgba(255, 255, 255, .88);
  --txt2: rgba(255, 255, 255, .65);
  --txt3: rgba(255, 255, 255, .45);
  --txt4: rgba(255, 255, 255, .25);
  --muted: rgba(255, 255, 255, .65);
  --line: #303030; --line-split: #262626;
  --bg: #141414; --card: #1f1f1f;
  --fill: #262626; --fill-hover: #2b2b2b; --fill-sel: #111b26;
  --mask: rgba(0, 0, 0, .65);
  color-scheme: dark;
}
/* 少数写死淡底的块，深色下单独压暗 */
[data-theme="dark"] .login-box { background: var(--card); color: var(--txt) }
[data-theme="dark"] .login-box input { background: #141414; border-color: #303030; color: var(--txt) }
[data-theme="dark"] .sf-hero { background: linear-gradient(135deg, #1b2430, #18202b); border-color: #2b3a4d }
[data-theme="dark"] .sf-card > h4 { background: var(--fill); border-color: var(--line) }
[data-theme="dark"] .sf-kpi .kpi { background: var(--fill) }
[data-theme="dark"] .sign-drop { background: var(--card); border-color: var(--line) }
[data-theme="dark"] .sign-hd { background: var(--fill) }
[data-theme="dark"] .perm-tree,
[data-theme="dark"] .scope-opt { background: #1a1a1a }
[data-theme="dark"] .ab-item:hover,
[data-theme="dark"] .perm-item:hover { background: var(--fill-hover) }
[data-theme="dark"] .bar { background: #303030 }
[data-theme="dark"] .t-gray { background: #2b2b2b; color: rgba(255, 255, 255, .65) }
[data-theme="dark"] .banner { background: #2b1d05; color: #ffc53d; border-color: #593d0d }
[data-theme="dark"] .banner.ok { background: #162312; color: #95de64; border-color: #274916 }

/* ========================= 6. 响应式 =========================
   断点：1024（平板/小屏笔电）、768（手机）。
   表格一律保留横向滚动（.tbl-wrap overflow:auto），不做卡片化——
   运单字段多，卡片化会让一屏只看得到一两条，反而更难用。 */
@media (max-width: 1024px) {
  main { padding: 12px }
  .grid3 { grid-template-columns: 1fr 1fr }
  .tbl-wrap { max-height: 72vh }
}
@media (max-width: 768px) {
  main { padding: 10px }
  h3.t { font-size: 15px; flex-wrap: wrap }
  .topbar { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 8px }
  .nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap }
  .right { margin-left: auto }
  .row { gap: 8px }
  .row > input, .row > select { flex: 1 1 140px; min-width: 0 }
  .grid2, .grid3 { grid-template-columns: 1fr }
  .kpis { gap: 8px }
  table { font-size: 12px }
  th, td { padding: 7px 8px }
  .tbl-wrap { max-height: none; border-radius: var(--r) }
  .modal { padding: 10px }
  .modal-box { width: 100% !important; max-width: 100% !important; max-height: 92vh }
  .modal-body { padding: 12px }
  .modal-foot { padding: 10px 12px }
  /* 手机上按钮点按区域放大，避免误触 */
  .btn { padding: 9px 14px }
  .btn.sm { padding: 7px 10px }
  .sf-hero { flex-direction: column; align-items: flex-start }
  .sf-cards { grid-template-columns: 1fr }
  .tabs { overflow-x: auto; flex-wrap: nowrap }
  .kv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
  .sign-photo, .sign-photo img { width: 88px }
  .sign-photo img { height: 88px }
}

/* 当前页面菜单高亮：浅蓝底 + 左侧竖线，一眼看出身在哪个模块 */
.nav .drop a.on{background:var(--brand-bg);color:var(--brand-text);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand)}
.nav .grp.on > a{background:var(--brand-bg);color:var(--brand-text);font-weight:600}