/* ============ 合同台账管理系统 · 设计系统（沿用 Zhongyue-Data 视觉规范） ============ */
:root{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --panel-2:#fafbfe;
  --ink:#16202f;
  --ink-2:#3d4a5c;
  --muted:#7b8798;
  --line:#e6eaf2;
  --line-2:#eef1f7;
  --brand:#2f6bff;
  --brand-600:#2158e0;
  --brand-50:#eef3ff;
  --teal:#0ea99b;
  --teal-50:#e7f8f6;
  --amber:#e08a00;
  --amber-50:#fff6e5;
  --red:#d93a3f;
  --red-50:#fdecec;
  --violet:#7a5af8;
  --violet-50:#f1edff;
  --side:#0d1526;
  --side-2:#111c30;
  --side-ink:#a9b6ca;
  --side-ink-2:#e8eefb;
  --radius:10px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-2:0 8px 24px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.06);
  --shadow-3:0 24px 64px rgba(9,18,35,.24);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.hidden{display:none !important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9d2e0;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#aab6c8;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ============ 布局 ============ */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:236px;flex:0 0 236px;background:linear-gradient(180deg,#0d1526 0%,#101c31 100%);
  color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-logo{
  width:32px;height:32px;border-radius:9px;flex:0 0 32px;overflow:hidden;
  background:linear-gradient(135deg,#2f6bff,#5b9dff 55%,#22d3c5);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;letter-spacing:-.5px;
  box-shadow:0 4px 14px rgba(47,107,255,.45)
}
/* 自定义 logo：去掉渐变底与投影，让图片自己撑满方块（透明底 PNG 也不会被染色） */
.brand-logo.has-img{background:transparent;box-shadow:none}
.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand-txt{min-width:0}
.brand-name{color:#fff;font-size:14px;font-weight:700;letter-spacing:.2px;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-sub{font-size:10.5px;color:#6f7f98;letter-spacing:2px;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{flex:1;overflow-y:auto;padding:10px 10px 20px}
.nav::-webkit-scrollbar-thumb{background:#26364f;background-clip:content-box}
.nav-group{margin-top:6px}
.nav-label{font-size:10.5px;color:#5f708a;letter-spacing:1px;padding:12px 12px 6px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;
  color:#c6d2e4;font-size:12.5px;font-weight:600;transition:.14s;user-select:none;position:relative
}
.nav-item:hover{background:rgba(255,255,255,.055);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(47,107,255,.26),rgba(47,107,255,.06));color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;background:var(--brand);border-radius:2px}
.nav-item .ico{width:16px;height:16px;flex:0 0 16px;opacity:.9}
.nav-item .cnt{margin-left:auto;font-size:10.5px;background:rgba(255,255,255,.1);color:#cfe0ff;border-radius:9px;padding:0 6px}
.side-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:#5f708a;display:flex;flex-direction:column;gap:3px;align-items:stretch}
/* 左下角第一行：系统名称（可配）+ 右端文字（可配，默认空）。公司名称（foot_brand_name）已从设置移除，不再展示 */
.sf-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.sf-sys{font-size:11px;font-weight:600;color:#5f708a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-right{flex:0 0 auto;max-width:44%;font-size:11px;color:#5f708a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beian-side{flex:0 0 auto;margin-top:6px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.06);text-align:center;font-size:11px;color:#5f708a;text-decoration:none}
.beian-side:hover{color:#9db0c9}

.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:56px;flex:0 0 56px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;
  position:sticky;top:0;z-index:30
}
.crumb{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;min-width:0}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{color:#c4cddb}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.tb-btn{
  height:32px;padding:0 10px;border-radius:8px;border:1px solid transparent;background:transparent;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;position:relative;
  white-space:nowrap
}
.tb-btn:hover{background:#f2f5fb;border-color:var(--line)}
.tb-badge{
  min-width:15px;height:15px;border-radius:9px;background:var(--red);
  color:#fff;font-size:9.5px;line-height:15px;text-align:center;padding:0 4px;font-weight:600
}
/* 待办里有逾期项时角标更醒目：红色实心 + 轻微呼吸，和「只有消息」区分开 */
.tb-badge.danger{box-shadow:0 0 0 2px rgba(208,52,44,.18)}
/* 录入视角开关（仅管理员）：默认「我的客户」是低调的白底，
   切到「全公司」用琥珀色提醒——这时候能选到别人的客户，得让人一眼看出状态 */
.scope-btn{border:1px solid var(--line);border-radius:999px}
.scope-btn.on{background:#fff7e6;border-color:#f0c58a;color:#a35b00}
.scope-btn.on:hover{background:#fff1d9;border-color:#e3b26a}
/* 窄屏用两字版本，避免把顶栏挤爆 */
.scope-lb-short{display:none}
.search-box{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--line);
  background:#f7f9fd;border-radius:8px;color:var(--muted);width:286px
}
.search-box input{border:0;background:transparent;outline:0;font-size:12.5px;width:100%;color:var(--ink);font-family:inherit;padding:0}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:20px;cursor:pointer;border:0;background:transparent}
.user-chip:hover{background:#f2f5fb}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#2f6bff,#7a5af8);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 26px}
.user-meta{line-height:1.2;text-align:left}
.user-meta b{display:block;font-size:12px;font-weight:600}
.user-meta span{font-size:10.5px;color:var(--muted)}

.page{flex:1;padding:20px 22px 48px;max-width:1560px;width:100%;margin:0 auto}

/* ============ 弹出菜单 ============ */
.pop{
  position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-2);z-index:60;overflow:hidden;animation:fade .14s ease
}
.pop-head{padding:10px 14px;border-bottom:1px solid var(--line-2);background:var(--panel-2)}
.pop-head b{font-size:12.5px;display:block}
.pop-head span{font-size:11px;color:var(--muted)}
.pop-item{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:12.5px;cursor:pointer;color:var(--ink-2);border:0;background:transparent;width:100%;text-align:left}
.pop-item:hover{background:#f5f8fe;color:var(--ink)}
.pop-item.dg{color:var(--red)}
.pop-sep{height:1px;background:var(--line-2);margin:4px 0}

/* ---------- 提醒面板：消息 / 待办 双页签 ---------- */
.notice-pop{width:368px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden}
.n-tabs{
  display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--line-2);
  background:var(--panel-2);flex:0 0 auto
}
.n-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 8px;font-size:12.5px;font-weight:600;color:var(--muted);
  border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer;font-family:inherit
}
.n-tab b{
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--line-2);
  color:var(--ink-2);font-size:10px;line-height:16px;text-align:center;font-weight:700
}
.n-tab.on{color:var(--brand);border-bottom-color:var(--brand);background:var(--panel)}
.n-tab.on b{background:var(--brand);color:#fff}
.n-tab b.dg{background:#fdeceb;color:var(--red)}
.n-tab.on b.dg{background:var(--red);color:#fff}
.n-x{
  width:34px;border:0;background:transparent;color:var(--muted);font-size:17px;
  cursor:pointer;line-height:1;font-family:inherit
}
.n-x:hover{color:var(--ink);background:#eef2f9}
.n-list,.n-empty,.notice-pop .pop-item{flex:0 0 auto}
.n-list{overflow-y:auto;max-height:min(52vh,420px)}
.n-empty{padding:26px 18px;text-align:center;background:var(--panel)}
.n-empty b{display:block;font-size:12.5px;margin-bottom:4px}
.n-empty span{font-size:11.5px;color:var(--muted);line-height:1.7}

.n-item{
  display:flex;align-items:flex-start;gap:9px;padding:10px 14px;width:100%;
  border:0;border-bottom:1px solid var(--line-2);background:transparent;
  text-align:left;cursor:pointer;font-family:inherit
}
.n-item:hover{background:#f5f8fe}
.n-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:0 0 7px;background:var(--brand)}
.n-dot.warn{background:var(--amber)}
.n-dot.danger{background:var(--red)}
.n-main{min-width:0;flex:1}
.n-main b{display:block;font-size:12.5px;font-weight:600;line-height:1.5}
.n-sub{
  display:block;font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:2px;
  /* 长正文最多两行，避免把面板撑成一整屏 */
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
/* 发送人 · 发送时间：谁发的、几点发的，一行交代清楚 */
.n-meta{display:flex;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:10.5px;color:var(--muted);line-height:1.5}
.n-meta em{font-style:normal;font-weight:600;color:var(--ink-2)}
.n-meta time{font-variant-numeric:tabular-nums}
.n-meta time::before{content:'·';margin:0 5px;color:#c9d2e0}

/* 点开即标已读：留在原地灰下去 + 展开全文，避免「点一下内容就没了」 */
.n-item.is-read{cursor:default}
.n-item.is-read .n-dot{background:#cfd8e6}
.n-item.is-read .n-main b{font-weight:500;color:var(--ink-2)}
.n-sub.is-open{display:block;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;white-space:pre-wrap}

/* 待办页签顶部：管理员的「认领申请待审批」提示条，点一下直接开审批窗 */
.n-claim{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:9px 14px;border:0;border-bottom:1px solid #f6e3bd;background:#fffaef;
  font-size:11.5px;color:#8a5200;cursor:pointer;
}
.n-claim:hover{background:#fff3dd}
.n-claim i{
  flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:#f0c67a;color:#7a4700;
  font-style:normal;font-size:11px;line-height:18px;text-align:center;
}
.n-claim span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-claim em{flex:0 0 auto;font-style:normal;font-weight:600}

/* 待办：整行可点（进办理页），行内还有「完成」和「去办理」两个动作 */
.n-todo{display:block;cursor:pointer;border-bottom:1px solid var(--line-2);padding:10px 14px}
.n-todo:hover{background:#fafbff}
.n-todo.od{background:#fffafa}
.n-todo-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.n-todo-h b{font-size:12px}
.n-tag{
  padding:1px 7px;border-radius:10px;font-size:10.5px;font-weight:600;
  background:var(--brand-50);color:var(--brand-600)
}
.n-tag.red{background:#fdeceb;color:var(--red)}
.n-tag.amber{background:#fff6e6;color:#b26a00}
/* 中性标签：消息类型（待办 / 审批 / 通知）、未定期限的日期 */
.n-tag.plain{background:var(--panel-2);color:var(--muted);border:1px solid var(--line);font-weight:500}
.n-main b .n-tag{margin-left:6px;vertical-align:1px}
/* 消息末尾的「去办理 / 去查看」：告诉人点一下会发生什么，而不是点完才知道 */
.n-go{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:600;color:var(--brand-600)}
.n-stage{
  padding:1px 7px;border-radius:6px;font-size:10.5px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)
}
.n-todo .n-sub{display:block;margin-top:4px}
.n-todo-f{display:flex;align-items:center;gap:8px;margin-top:8px}
.n-todo-f .muted{margin-right:auto}
.n-act{
  height:26px;padding:0 11px;border-radius:7px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;font-size:11.5px;cursor:pointer;font-family:inherit
}
.n-act.ghost{
  background:var(--panel);color:var(--ink-2);border-color:var(--line)
}
.n-act:hover{filter:brightness(1.05)}
.n-act.ghost:hover{background:#f2f5fb;color:var(--ink)}
/* 面板底部操作条：两个以上动作并排，不占列表高度 */
.n-foot{display:flex;flex:0 0 auto;border-top:1px solid var(--line-2);background:var(--panel-2)}
.n-foot .pop-item{flex:1 1 0;width:auto;min-width:0;justify-content:center;font-size:11.5px;padding:10px 6px;white-space:nowrap}
.n-foot .pop-item+.pop-item{border-left:1px solid var(--line-2)}
/* 待办页签顶部的到期统计 */
.n-stat{
  display:flex;gap:12px;padding:8px 14px;font-size:11px;color:var(--muted);
  background:var(--panel-2);border-bottom:1px solid var(--line-2)
}
.n-stat b{color:var(--ink);font-weight:700}
.n-stat .od{color:var(--red);font-weight:700}
.n-stat .tm{color:#b06f00;font-weight:700}
/* 面板只列前 30 条，剩下的给个出口，避免让人以为待办被吞了 */
.n-more{padding:9px 14px;font-size:11px;color:var(--muted);text-align:center;background:var(--panel)}
/* 发消息弹窗里的收件人多选 */
.n-pick-list{max-height:148px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px;background:var(--panel)}
.n-pick-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12.5px;cursor:pointer}
.n-pick-row:hover{background:var(--panel-2)}
.n-pick-row em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted)}
.anchor{position:relative}

/* ============ 通用块 ============ */
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-title{font-size:19px;font-weight:700;letter-spacing:-.2px;margin:0}
.page-desc{color:var(--muted);font-size:12.5px;margin:3px 0 0;max-width:820px}
.page-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.card-head h3{margin:0;font-size:13.5px;font-weight:650}
.card-head .sub{color:var(--muted);font-size:11.5px;font-weight:400}
.card-head .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-body{padding:16px}
.card-body.tight{padding:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1280px){.g4{grid-template-columns:repeat(2,minmax(0,1fr));}.split-main{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.g3,.g2{grid-template-columns:minmax(0,1fr)}}

/* KPI */
.kpi{padding:15px 16px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--brand-50);opacity:.7}
.kpi.warn::after{background:var(--amber-50)}
.kpi.dg::after{background:var(--red-50)}
.kpi.ok::after{background:var(--teal-50)}
.kpi .k-label{color:var(--muted);font-size:11.5px;display:flex;align-items:center;gap:5px;position:relative;z-index:1}
.kpi .k-val{font-size:25px;font-weight:700;letter-spacing:-.6px;margin-top:5px;position:relative;font-variant-numeric:tabular-nums;z-index:1}
.kpi .k-val small{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px}
.kpi .k-foot{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.up{color:var(--teal);font-weight:600}
.down{color:var(--red);font-weight:600}

/* 工作台 9 张 KPI：收款与付款分开统计，3 列排 3 行 */
.kpi-grid{margin-bottom:14px}
.kpi.kpi-click{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.kpi.kpi-click:hover{border-color:var(--brand);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.kpi.kpi-click:active{transform:none}
.kpi.kpi-click:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kpi.kpi-click .k-val{color:var(--brand-600)}
.kpi .k-more{
  margin-left:auto;font-size:10.5px;color:var(--brand-600);white-space:nowrap;
  background:#fff;border:1px solid #dbe6ff;border-radius:20px;padding:1px 7px;line-height:1.5
}
.kpi.kpi-click:hover .k-more{background:var(--brand-50);border-color:var(--brand)}

/* KPI 明细抽屉：顶部四个汇总数 + 合同清单 */
.stat-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.stat-sum > div{background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:9px 11px}
.stat-sum span{display:block;font-size:11px;color:var(--muted)}
.stat-sum b{display:block;font-size:15px;margin-top:3px;font-variant-numeric:tabular-nums}
.stat-sum b.hot{color:var(--red)}
.stat-tbl td.strong{font-weight:700;color:var(--ink)}
table.stat-tbl tbody tr[data-id]{cursor:pointer}
table.stat-tbl tbody tr[data-id]:hover{background:var(--brand-50)}
table.stat-tbl td:nth-child(2){min-width:190px}
.stat-note{margin:10px 2px 0;font-size:11.5px;color:var(--muted)}

/* 手机端明细用卡片：表格 7 列在 390px 上只能露出两列，金额得横向拖才看得见 */
.stat-list{display:flex;flex-direction:column;gap:9px}
.stat-card{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--panel);cursor:pointer}
.stat-card:active{background:var(--brand-50)}
.sc-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.sc-no{font-size:11.5px;color:var(--brand);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-amt{margin-left:auto;font-size:13.5px;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-name{font-size:13px;font-weight:600;margin-top:4px;line-height:1.4}
.sc-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.sc-foot{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-top:7px;flex-wrap:wrap}
.sc-foot .od{color:var(--red);font-weight:600}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:12.5px;font-weight:500;
  cursor:pointer;transition:.14s;white-space:nowrap
}
.btn:hover{border-color:#cdd6e6;box-shadow:var(--shadow-1);color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(47,107,255,.28)}
.btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:#f2f5fb;color:var(--ink)}
.btn.danger{color:var(--red);border-color:#f3c9c9;background:#fff}
.btn.danger:hover{background:var(--red-50);color:var(--red)}
.btn.sm{height:27px;padding:0 9px;font-size:12px;border-radius:7px}
.btn.lg{height:38px;padding:0 18px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-group{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.btn-group button{border:0;background:transparent;padding:0 12px;height:30px;font-size:12px;color:var(--ink-2);cursor:pointer}
.btn-group button+button{border-left:1px solid var(--line)}
.btn-group button.on{background:var(--brand-50);color:var(--brand);font-weight:600}

/* 表格 */
.tbl-wrap{overflow:auto;border-radius:0 0 var(--radius) var(--radius)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.tbl th{
  text-align:left;font-weight:600;color:var(--muted);font-size:11px;background:var(--panel-2);
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2;
  letter-spacing:.2px
}
table.tbl th.sortable{cursor:pointer;user-select:none}
table.tbl th.sortable:hover{color:var(--brand)}
table.tbl th .arw{font-size:9px;margin-left:3px;opacity:.7}
table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr:hover{background:#f8faff}
table.tbl tbody tr.row-overdue{background:#fffafa}
/* 草稿行：还没提交，底色压淡一点，和正式合同一眼分开（编号后面挂着「草稿」小标） */
table.tbl tbody tr.row-draft{background:#fcfcfd}
table.tbl tbody tr.row-draft:hover{background:#f8faff}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
table.tbl td.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);white-space:nowrap}

/* 可调列宽的台账表（tbl-cols）：字段之间画一条竖线，这条线本身就是拖动热区 */
table.tbl-cols{table-layout:fixed}
table.tbl-cols th+th,table.tbl-cols td+td{border-left:1px solid var(--line)}
table.tbl-cols td{overflow:hidden;text-overflow:ellipsis}
/* 表头文字放不下就省略（标题在 title 里），否则会溢出压到右边一列 */
table.tbl-cols th .th-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.tbl-cols .cell-main{max-width:none}
table.tbl-cols .rate-cell{min-width:0}
/* 末尾填充列：没有内容，专门吃掉剩余宽度，让前面各列严格按设定宽度排 */
table.tbl-cols .col-fill{padding:0!important;border-left:0}
table.tbl-cols th.col-fill{background:var(--panel-2)}
table.tbl-cols.is-resizing{cursor:col-resize}
.col-grip{position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:col-resize;z-index:3}
.col-grip::after{
  content:"";position:absolute;top:5px;bottom:5px;left:4px;width:2px;border-radius:2px;
  background:transparent;transition:background .12s
}
.col-grip:hover::after,.col-grip.is-active::after{background:var(--brand)}
body.col-resizing,body.col-resizing *{cursor:col-resize!important;user-select:none!important}
.cell-main{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:340px}
.cell-main b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-main span{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link{color:var(--brand);cursor:pointer;font-weight:600}
.link:hover{text-decoration:underline}
.row-acts{display:flex;gap:2px;opacity:.45;transition:.14s;white-space:nowrap}
tr:hover .row-acts{opacity:1}
.row-acts button{border:0;background:transparent;color:var(--brand);cursor:pointer;font-size:11.5px;padding:2px 5px;border-radius:5px;white-space:nowrap}
.row-acts button:hover{background:var(--brand-50)}
.row-acts button.dg{color:var(--red)}
.row-acts button.dg:hover{background:var(--red-50)}

/* 标签 / 状态 */
.pill{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.no-dot::before{display:none}
.pill.green{background:var(--teal-50);color:#0a8d81}
.pill.blue{background:var(--brand-50);color:var(--brand-600)}
.pill.amber{background:var(--amber-50);color:#b06f00}
.pill.red{background:var(--red-50);color:#bf2f34}
.pill.violet{background:var(--violet-50);color:#5b3fd6}
.pill.gray{background:#f1f3f8;color:#6b7789}
.tag-line{border:1px dashed #d6dded;border-radius:5px;padding:1px 7px;font-size:11px;color:var(--muted);white-space:nowrap}
/* 关联合同列：编号本身很长，窄列里末尾省略，完整值挂在 title 上 */
table.tbl-cols .lk-no{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 关联编号 + 多份时的「+N」徽标并排；编号可点（.link）时给手型 */
table.tbl-cols .lk-cell{display:flex;align-items:center;gap:5px;min-width:0}
table.tbl-cols .lk-cell .lk-no{flex:0 1 auto;min-width:0}
table.tbl-cols .lk-cell .tag-line{flex:0 0 auto}
/* 草稿小标贴在合同编号后面，别抢编号的位置 */
table.tbl-cols .dft-tag{
  display:inline-block;margin-left:6px;padding:0 5px;line-height:16px;font-size:10px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  border-color:#cfd8e8;color:#6b7789;vertical-align:1px
}
.tag-solid{background:var(--brand-50);color:var(--brand-600);border:1px solid #d5e2ff;border-radius:5px;padding:1px 7px;font-size:11px;font-weight:600}

/* 进度 */
.bar{height:6px;border-radius:6px;background:#eef1f7;overflow:hidden;min-width:52px}
.bar i{display:block;height:100%;border-radius:6px;background:var(--brand);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bar i.g{background:var(--teal)}
.bar i.a{background:var(--amber)}
.bar i.r{background:var(--red)}
.rate-cell{display:flex;flex-direction:column;gap:4px;min-width:96px}
.rate-cell .rt{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 分页 */
.pager{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.pager .info{font-size:11.5px;color:var(--muted)}
.pager .pgs{margin-left:auto;display:flex;gap:4px;align-items:center}
.pager .pgs button{
  min-width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;
  font-size:12px;color:var(--ink-2);padding:0 7px
}
.pager .pgs button:hover:not([disabled]){border-color:#bcd0f5;color:var(--brand)}
.pager .pgs button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pager .pgs button[disabled]{opacity:.4;cursor:not-allowed}
.pager select{width:auto;height:28px;font-size:12px;padding:0 24px 0 8px}

/* 表单 */
.form{display:grid;gap:14px}
.form-sec{border:1px solid var(--line);border-radius:9px;padding:14px;background:var(--panel-2)}
.form-sec>.sec-title{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.form-sec>.sec-title::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--brand)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-row.one{grid-template-columns:minmax(0,1fr)}
.form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 四列只在 xl 弹窗里用：阶段要紧挨着应收款/应付款日期，放不下就得换行 */
.form-row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){
  .form-row.three,.form-row.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 自动算出来的金额不接受手改：置灰是为了让人一眼看出「这栏不用填」 */
.field .auto-val{background:var(--panel-2);color:var(--ink-2);cursor:not-allowed}

/* 关联对方合同：已添加的编号做成小标签，可点 × 逐个移除（一个项目可能挂多份） */
.lk-picked{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:28px;margin:2px 0 8px}
.lk-chip{display:inline-flex;align-items:center;gap:3px;max-width:100%;padding:2px 3px 2px 9px;border:1px solid var(--line);border-radius:12px;background:var(--brand-50);font-size:12px;line-height:19px}
.lk-chip .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px;font-family:var(--mono);color:var(--brand-600)}
.lk-chip .x{border:0;background:transparent;padding:0 3px;font-size:14px;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.lk-chip .x:hover{color:var(--red);background:var(--red-50)}
.lk-custom{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.lk-custom input{flex:1 1 140px;min-width:0}
.lk-custom .btn{flex:0 0 auto}
/* 手工输入的编号与现有合同撞号：输入框标红 + 下面一行红字，必须改掉才能添加 */
.lk-custom input.is-dup{border-color:var(--red);box-shadow:0 0 0 3px rgba(217,58,63,.12)}
.lk-dup-tip{flex:0 0 100%;display:none;font-size:11.5px;line-height:1.6;color:var(--red)}
.lk-dup-tip.show{display:block}

/* 到款 / 付款计划清单 */
.stage-plan{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.inv-tbl-wrap{margin:4px 0 2px}
.stage-tbl{margin:0;border-radius:0}
.stage-tbl th,.stage-tbl td{padding:7px 9px;vertical-align:middle}
.stage-tbl td input,.stage-tbl td select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:12px;background:var(--panel);color:var(--ink)}
.stage-tbl td input[readonly]{background:var(--panel-2);color:var(--ink-2);cursor:not-allowed}
.stage-tbl td input[type=date]{padding:5px 7px}
.stage-tbl .st-del{padding:3px 8px;font-size:12px}
.stage-foot{display:flex;align-items:center;gap:12px;padding:9px 11px;background:var(--panel-2);border-top:1px solid var(--line)}
.stage-sum{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stage-sum .lbl{color:var(--muted,var(--ink-2))}
.stage-sum b{font-size:13px}
.stage-sum .ok{color:var(--green,#1a9e5c)}
.stage-sum .warn{color:var(--red,#d0342c)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:12px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:4px}
.field label .req{color:var(--red)}
.field .hint{font-size:11px;color:var(--muted);line-height:1.45}
.field .err{font-size:11px;color:var(--red)}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(217,58,63,.1)}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=search],select,textarea{
  height:33px;border:1px solid #dbe1ec;border-radius:7px;padding:0 10px;font-size:12.5px;
  font-family:inherit;color:var(--ink);background:#fff;outline:0;transition:.14s;width:100%
}
textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.55}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%237b8798' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
input[disabled],select[disabled],textarea[disabled]{background:#f5f7fb;color:var(--muted);cursor:not-allowed}
.check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:14px;height:14px;cursor:pointer}
.switch{width:34px;height:19px;border-radius:12px;background:#d5dcea;position:relative;cursor:pointer;transition:.18s;flex:0 0 34px;border:0;padding:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s}
.switch.on{background:var(--brand)}
.switch.on::after{transform:translateX(15px)}
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px}
.filter-bar .grow{flex:1}
.filter-bar input,.filter-bar select{width:auto;height:31px;min-width:132px}
.filter-bar input[type=checkbox]{min-width:0;width:14px;height:14px}
.filter-bar .kw{min-width:256px}
.filter-bar input[type=date]{min-width:128px;width:128px}
.filter-bar select{min-width:140px}
/* 桌面端筛选条件全部平铺：「筛选」按钮与折叠容器都不参与布局
   （display:contents 让子元素直接落进 .filter-bar 的 flex 流里） */
.filter-bar .f-more{display:none}
.filter-bar .filters-more{display:contents}
.filter-bar .f-acts{display:flex;gap:8px;margin-left:auto}

/* 汇总条 */
.summary-strip{display:flex;gap:22px;flex-wrap:wrap;padding:11px 15px;border-bottom:1px solid var(--line-2);background:var(--panel-2);font-size:12px;color:var(--muted)}
.summary-strip b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums;margin-left:3px}

/* 弹窗 / 抽屉 */
.overlay{position:fixed;inset:0;background:rgba(13,21,38,.42);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow:auto;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:13px;box-shadow:var(--shadow-3);width:660px;max-width:100%;animation:pop .2s cubic-bezier(.2,.9,.3,1.2);overflow:hidden;margin:auto}
.modal.lg{width:900px}.modal.xl{width:1080px}.modal.sm{width:440px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* 弹窗需盖在抽屉之上（抽屉从右侧打开后仍可在其上操作表单） */
/* 必须高于 .login-root（z-index:200）：登录页上也有弹窗（恢复码），
   层级低了会被登录页整层盖住，看起来正常但点不到按钮 */
#modal-root .overlay{z-index:260}
.modal-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:14.5px;font-weight:700}
.modal-head .sub{font-size:11.5px;color:var(--muted);margin-left:2px}
.modal-head .x{margin-left:auto;border:0;background:transparent;font-size:17px;color:var(--muted);cursor:pointer;line-height:1;padding:3px 6px;border-radius:6px}
.modal-head .x:hover{background:#f2f5fb;color:var(--ink)}
/* 标题栏右侧自定义区（如「AI 导入」）：撑开剩余空间，关闭按钮紧随其后 */
.modal-head .head-extra{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.modal-head .head-extra + .x{margin-left:0}
.modal-body{padding:18px;max-height:calc(100vh - 230px);overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel-2)}
.modal-foot .left{margin-right:auto;font-size:11.5px;color:var(--muted);display:flex;align-items:center}
/* 表单底部操作条：弹窗与整页新建共用，保持与 .modal-foot 一致的观感 */
.form-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line);background:var(--panel-2)}
.form-foot .left{margin-right:auto;font-size:11.5px;color:var(--muted);display:flex;align-items:center}
/* 阶段计划里「逾期」的日期单元格高亮，配合红色预警标签 */
.cell-overdue{color:var(--red);font-weight:600}
.overlay.drawer-overlay{justify-content:flex-end;padding:0;align-items:stretch}
.drawer{background:#fff;width:620px;max-width:96vw;height:100vh;box-shadow:var(--shadow-3);animation:slideIn .22s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column}
.drawer.wide{width:820px}
/* KPI 明细抽屉：7 列金额表，比合同详情还要宽一档才不用横向拖 */
.drawer.stat-drawer{width:960px}
@keyframes slideIn{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.drawer-head{padding:16px 20px 0;border-bottom:1px solid var(--line)}
.drawer-head .top{display:flex;align-items:flex-start;gap:10px}
.drawer-head h3{margin:0;font-size:15.5px;font-weight:700;line-height:1.4}
.drawer-head .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.drawer-body{flex:1;overflow:auto;padding:16px 20px 32px}

/* Toast */
.toast-root{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:9px 14px;box-shadow:var(--shadow-2);font-size:12.5px;animation:toastIn .22s ease;max-width:560px;pointer-events:auto
}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.toast .ic{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;flex:0 0 17px}
.toast.ok .ic{background:var(--teal)}.toast.err .ic{background:var(--red)}.toast.warn .ic{background:var(--amber)}.toast.info .ic{background:var(--brand)}
.toast .go{margin-left:6px;color:var(--brand);font-weight:600;cursor:pointer}

/* 空状态 */
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .ic{font-size:26px;opacity:.35;margin-bottom:8px}
.empty b{display:block;color:var(--ink-2);font-size:13px;margin-bottom:3px}
.empty span{font-size:12px}

/* 键值对 */
.kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px 14px;font-size:12.5px;margin:0}
.kv dt{color:var(--muted);margin:0}
.kv dd{margin:0;color:var(--ink);word-break:break-word}
.kv dd.mono{font-family:var(--mono);font-size:11.5px}
.kv-2{grid-template-columns:96px minmax(0,1fr) 96px minmax(0,1fr)}
@media(max-width:760px){.kv-2{grid-template-columns:96px minmax(0,1fr)}}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.meta-grid.quad{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:920px){.meta-grid.quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
.meta-item{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--panel-2)}
.meta-item .l{font-size:11px;color:var(--muted)}
.meta-item .v{font-size:13.5px;font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums}

/* 时间线 */
.timeline{position:relative;padding-left:18px;margin:0}
.timeline::before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:1.5px;background:var(--line)}
.tl-item{position:relative;padding:0 0 15px 0}
.tl-item::before{content:"";position:absolute;left:-17px;top:5px;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--brand)}
.tl-item .tm{font-size:11px;color:var(--muted);font-family:var(--mono)}
.tl-item .tx{font-size:12.5px;margin-top:1px}
.tl-item .tx b{font-weight:600}

/* 提示框 */
.hl-box{background:linear-gradient(135deg,#f5f9ff,#fbfdff);border:1px solid #dce8ff;border-radius:9px;padding:12px 14px}
.warn-box{background:#fffbf0;border:1px solid #f6e3b8;border-radius:9px;padding:11px 13px;font-size:12px;color:#8a6100}
.info-box{background:#f4f8ff;border:1px solid #d8e5ff;border-radius:9px;padding:11px 13px;font-size:12px;color:#2f5b9e}
.danger-box{background:#fff6f6;border:1px solid #f6d3d3;border-radius:9px;padding:11px 13px;font-size:12px;color:#a5292d}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{padding:9px 0;border-bottom:1px dashed var(--line);display:flex;gap:9px;align-items:center;font-size:12.5px}
.list-plain li:last-child{border-bottom:0}
.dot-s{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 6px}

/* 图表 */
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px}
.chart-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px}
.axis-text{font-size:10px;fill:#94a1b3}
.bar-value{font-size:10.5px;font-weight:650;fill:#2f6bff;font-variant-numeric:tabular-nums}

/* 并排两张图：左右卡片等高，图与图例在卡片里垂直居中。
   内容是环图的那张天然比柱图矮，不拉伸就会一个高一个低。 */
.split-main.chart-row{align-items:stretch}
.chart-row>.card{display:flex;flex-direction:column}
.chart-row>.card>.card-body{flex:1;display:flex;flex-direction:column;justify-content:center}

/* 便捷类 */
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:8px}
.muted{color:var(--muted)}
.small{font-size:11.5px}
.mono{font-family:var(--mono)}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.right{margin-left:auto}
.nowrap{white-space:nowrap}
.divider{height:1px;background:var(--line-2);margin:14px 0}
.grow{flex:1}
.badge-c{display:inline-flex;min-width:18px;height:18px;border-radius:5px;background:#f1f4fa;color:var(--ink-2);font-size:11px;align-items:center;justify-content:center;padding:0 5px;font-weight:600}

/* 到期提醒 */
.alert-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.alert-item:last-child{border-bottom:0}
.alert-item .t{min-width:0;flex:1}
.alert-item .t b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.alert-item .t span{font-size:11px;color:var(--muted)}
.alert-item .d{font-size:11.5px;font-weight:600;white-space:nowrap}
.alert-item .n-act{flex:0 0 auto}

/* 附件列表 */
.file-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:7px;background:#fff}
.file-item:last-child{margin-bottom:0}
.file-item .ic{width:26px;height:26px;border-radius:6px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 26px;text-transform:uppercase}
.file-item .nm{flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-item .sz{font-size:11px;color:var(--muted);white-space:nowrap}
.drop-zone{border:1px dashed #cfd9ea;border-radius:9px;padding:14px;text-align:center;color:var(--muted);font-size:12px;background:var(--panel-2);cursor:pointer}
.drop-zone:hover{border-color:var(--brand);color:var(--brand-600);background:var(--brand-50)}
/* 编辑合同时把已上传的附件摊在上传框上面：一眼看到有哪些，别重复传 */
.att-box{display:block;margin-top:14px}
.att-box>label{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin-bottom:6px}
.att-head{font-size:11px;color:var(--muted);margin:0 0 6px}
.file-item.att-old{background:var(--panel-2);margin-bottom:6px}
.file-item.att-old .nm{color:var(--brand);text-decoration:none;font-size:12px}
.file-item.att-old .nm:hover{text-decoration:underline}

/* ============ 登录页 ============ */
.login-root{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);background:var(--bg);z-index:200}
.login-brand{
  position:relative;overflow:hidden;color:#fff;padding:52px 56px;display:flex;flex-direction:column;
  background:linear-gradient(150deg,#0b1322 0%,#12213c 48%,#1a2f5c 100%)
}
.login-brand::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;right:-220px;top:-200px;background:radial-gradient(circle,rgba(47,107,255,.42),transparent 62%)}
.login-brand::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:-180px;bottom:-240px;background:radial-gradient(circle,rgba(34,211,197,.24),transparent 62%)}
.login-brand>*{position:relative;z-index:1}
.lb-logo{display:flex;align-items:center;gap:11px}
.lb-logo .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#2f6bff,#5b9dff 55%,#22d3c5);display:grid;place-items:center;font-weight:800;font-size:16px;box-shadow:0 8px 22px rgba(47,107,255,.45);overflow:hidden;flex:0 0 38px}
/* 自定义 logo：透明底 PNG 直接铺满方块，不加底色也不留投影 */
.mark.has-img{background:transparent;box-shadow:none}
.mark img{width:100%;height:100%;object-fit:contain;display:block}
.lb-logo b{font-size:15px;letter-spacing:.3px}
.lb-logo span{display:block;font-size:10.5px;color:#7f90ab;letter-spacing:2.4px;text-transform:uppercase}
.lb-title{font-size:31px;font-weight:700;line-height:1.32;letter-spacing:-.4px;margin:56px 0 12px}
.lb-title em{font-style:normal;background:linear-gradient(90deg,#7ba6ff,#22d3c5);-webkit-background-clip:text;background-clip:text;color:transparent}
.lb-desc{color:#9dabc2;font-size:13px;max-width:430px;line-height:1.85}
.lb-points{margin-top:auto;display:grid;gap:12px;max-width:460px}
.lb-point{display:flex;gap:11px;align-items:flex-start}
.lb-point .i{width:24px;height:24px;border-radius:7px;background:rgba(47,107,255,.18);border:1px solid rgba(122,166,255,.34);color:#9dbdff;display:grid;place-items:center;font-size:11px;flex:0 0 24px;margin-top:1px}
.lb-point b{font-size:12.5px;font-weight:600;color:#e8eefb;display:block}
.lb-point span{font-size:11.5px;color:#8091ab}
.lb-foot{margin-top:34px;font-size:11px;color:#5f708a;display:flex;gap:14px;flex-wrap:wrap}

.login-panel{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#fff}
/* 品牌头只在手机出现，桌面端由左侧整幅面板承担，所以这里只是给表单一个宽度锚点 */
.login-panel>#login-panel{width:100%;max-width:368px}
.login-card{width:100%;max-width:368px}
.login-card h1{font-size:22px;margin:0 0 6px;letter-spacing:-.3px}
.login-card .sub{color:var(--muted);font-size:12.5px;margin:0 0 26px}
.login-form{display:grid;gap:14px}
.login-form .field label{font-size:12px}
.login-form input{height:40px;font-size:13px}
.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:44px}
.pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11.5px;padding:5px 8px;border-radius:6px}
.pwd-eye:hover{background:#f2f5fb;color:var(--ink)}
.login-btn{height:40px;font-size:13px;margin-top:4px;justify-content:center}
.login-msg{font-size:12px;color:var(--red);min-height:18px;line-height:1.5}
/* 免登录下拉：一行放得下，窄屏也不折行 */
.login-remember{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.login-remember label{flex:0 0 auto;color:var(--muted)}
/* background-color 而非 background：简写会把全局的箭头 svg 一起清掉 */
.login-remember select{flex:1;height:38px;font-size:12.5px;padding:0 26px 0 10px;border:1px solid var(--line);border-radius:8px;background-color:#fff;color:var(--ink)}
.login-form .hint{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.5}
.login-caps{margin-top:18px;font-size:11px;color:#a6b1c0;display:flex;gap:12px;flex-wrap:wrap}
/* 用纯 CSS 圆点代替 emoji：缺 emoji 字体的环境（部分 Linux 服务器、精简系统）会显示成方框 */
.login-caps span{display:inline-flex;align-items:center;gap:6px}
.login-caps span::before{content:'';width:4px;height:4px;border-radius:50%;background:#c6d0dd;flex:0 0 4px}
/* 备案号是合规要求，必须清晰可读，所以用比辅助文字更深的灰 */
.beian-login{display:block;margin-top:16px;text-align:center;font-size:12px;color:#7b8794;text-decoration:none}
.beian-login:hover{color:#2f6bff;text-decoration:underline}
/* 手机端登录页的紧凑品牌头，桌面端由左侧整幅品牌面板承担 */
.login-mini{display:none}

/* 只读提示 */
.ro-banner{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #f6e3b8;background:#fffbf0;color:#8a6100;border-radius:9px;font-size:12px;margin-bottom:12px}

/* 安全体检 */
.assess-strip{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center}
.sec-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.sec-item:last-child{border-bottom:0}
.sec-item .ic{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;flex:0 0 16px}
.sec-item.ok .ic{background:var(--teal)}
.sec-item.part .ic{background:var(--amber)}
.sec-item.no .ic{background:var(--red)}
.sec-item .cur{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}

/* 策略项 / 密码规则 */
.pol-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.pol-row:last-child{border-bottom:0}
.pol-row .nm b{font-size:12.5px}
.pol-row .nm span{display:block;font-size:11px;color:var(--muted)}
.pol-row input,.pol-row select{height:31px;font-size:12px}

/* 品牌标识：logo 上传与左侧栏效果预览 */
/* 这一行要放下预览方块 + 两个按钮，右侧 190px 太窄，改成标题在上、控件通栏 */
.pol-row.logo-row{grid-template-columns:minmax(0,1fr)}
.pol-row.logo-row .ctl{grid-column:1/-1;margin-top:9px}
.logo-set{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-pv{
  width:52px;height:52px;flex:0 0 52px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#f7f9fc;display:grid;place-items:center
}
.logo-pv img{width:100%;height:100%;object-fit:contain;display:block}
.logo-pv .lv-txt{
  width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;
  background:linear-gradient(135deg,#2f6bff,#5b9dff 55%,#22d3c5)
}
.logo-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.logo-file{display:none}
.logo-box .hint{flex:1 1 100%;font-size:11px;color:var(--muted);line-height:1.5}
/* 预览按侧栏的真实配色做一小条，避免「保存完才发现名字太长被截断」 */
.brand-pv{
  display:grid;gap:10px;padding:12px 14px;border-radius:10px;color:#fff;
  background:linear-gradient(180deg,#0d1526 0%,#101c31 100%);max-width:320px
}
.bpv-top{display:flex;align-items:center;gap:9px;min-width:0}
.bpv-logo{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  font-weight:800;font-size:13px;background:linear-gradient(135deg,#2f6bff,#5b9dff 55%,#22d3c5)
}
.bpv-logo img{width:100%;height:100%;object-fit:contain;display:block}
.bpv-logo.has-img{background:transparent}
.bpv-top b{display:block;font-size:13px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpv-top span{display:block;font-size:9.5px;color:#6f7f98;letter-spacing:1.6px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpv-foot{border-top:1px dashed rgba(255,255,255,.14);padding-top:9px;display:grid;gap:2px;min-width:0}
.bpv-frow{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.bpv-foot b{font-size:11px;font-weight:600;color:#5f708a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpv-foot span{font-size:10.5px;color:#4d5c74;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpv-foot span:empty{display:none}

.pwd-rule{display:flex;align-items:center;gap:8px;font-size:12px;padding:2px 0;color:var(--ink-2)}
.pwd-rule .ic{width:15px;text-align:center;font-weight:700;flex:0 0 15px}
.pwd-rule.ok .ic{color:#0a8d81}
.pwd-rule.no .ic{color:var(--red)}
.pwd-rule.no{color:var(--muted)}
.pwd-rule.idle{color:var(--muted)}
.pwd-rule.idle .ic{color:#c2ccdb}
.pwd-meter{height:5px;border-radius:3px;background:#eef1f7;overflow:hidden;margin:8px 0 10px}
.pwd-meter i{display:block;height:100%;border-radius:3px;transition:.2s}

/* 响应式 */
.menu-toggle{display:none;border:1px solid var(--line);background:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;color:var(--ink-2);font-size:15px;line-height:1}
@media(max-width:1080px){
  .login-root{grid-template-columns:minmax(0,1fr)}
  .login-brand{display:none}
}
@media(max-width:960px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease}
  .sidebar.open{transform:none;box-shadow:var(--shadow-3)}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .search-box{width:204px}
  .page{padding:16px 14px 40px}
  .topbar{padding:0 14px}
  .modal-body{max-height:calc(100vh - 200px)}
}
/* ============ AI 智能导入 ============ */
.ai-btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid #d9d2ff;background:linear-gradient(180deg,#f7f4ff,#efe9ff);
  color:#5b3fd6;font-weight:600;
}
.ai-btn:hover{background:linear-gradient(180deg,#f2edff,#e6ddff);border-color:#c3b6ff}
.ai-btn:disabled{opacity:.75;cursor:default}
.ai-btn svg{flex-shrink:0}

.ai-spin{
  width:11px;height:11px;border:1.6px solid rgba(91,63,214,.28);border-top-color:#5b3fd6;
  border-radius:50%;display:inline-block;animation:ai-spin .7s linear infinite;
}
@keyframes ai-spin{to{transform:rotate(360deg)}}

.ai-result{
  margin:0 0 16px;padding:11px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);
  font-size:12.5px;line-height:1.65;color:var(--ink-2);
}
.ai-result.ok{border-color:#cfe9e5;background:#f4fbfa}
.ai-result.warn{border-color:#f2e2bd;background:#fffbf1}
.ai-result.bad{border-color:#f6d4d5;background:#fdf6f6}

.ai-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.ai-line svg{color:var(--violet);flex-shrink:0}
.ai-line b{color:var(--ink);font-weight:600;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-meta{color:var(--muted);font-size:11.5px;font-family:var(--mono)}
.ai-line .btn{margin-left:0}
.ai-line .btn:first-of-type{margin-left:auto}

.ai-tag{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;font-size:10.5px;font-weight:600;letter-spacing:.02em}
.ai-tag.ai{background:var(--violet-50);color:#5b3fd6;border:1px solid #ddd4ff}
.ai-tag.rule{background:var(--brand-50);color:var(--brand-600);border:1px solid #d3e0ff}
.ai-tag.bad{background:var(--red-50);color:var(--red);border:1px solid #f6d4d5}

.ai-warn{color:#8a5c00;background:#fff6e5;border:1px dashed #f0d9a8;border-radius:7px;padding:7px 9px;margin:6px 0}
.ai-hint{display:block;color:#96703a;font-size:11.5px;margin-top:3px}
.ai-sum b{color:var(--ink)}
.ai-ow{color:var(--amber)}
.ai-low{color:#8a5c00;margin-top:3px}
.ai-tip{color:var(--muted);font-size:11.5px;margin-top:5px}

/* 被 AI 填过的字段：右上角标 + 淡紫底，让「哪些是机器填的」一眼可见 */
.field.ai-filled{position:relative}
.field.ai-filled input,
.field.ai-filled select,
.field.ai-filled textarea{border-color:#c9bcff;background:#fbf9ff}
.field.ai-filled::before{
  content:"AI";position:absolute;right:1px;top:-2px;
  font-size:9px;font-weight:700;color:#6b4de0;background:#efe9ff;
  border:1px solid #ddd4ff;border-radius:4px;padding:0 4px;line-height:13px;
}
.field.ai-filled.ai-lowconf::before{content:"AI?";color:#8a5c00;background:#fff4d9;border-color:#f0d9a8}
.field.ai-filled.ai-lowconf input,
.field.ai-filled.ai-lowconf select,
.field.ai-filled.ai-lowconf textarea{border-color:#e8cd8f;background:#fffdf6}

/* 工作台：销售 / 采购 双卡 */
.type-card{text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.type-card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.tc-body{padding:14px 16px}
.tc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tc-head b{font-size:13px;color:var(--ink)}
.tc-val{font-size:24px;font-weight:700;color:var(--ink);line-height:1.2}
.tc-val small{font-size:11px;font-weight:500;color:var(--muted);margin-left:4px}
.tc-foot{margin-top:5px;font-size:11.5px;color:var(--muted)}
.tc-foot b{color:var(--ink-2)}
.tc-sep{margin:0 5px;color:var(--line)}

@media(max-width:640px){
  .user-meta{display:none}
  .search-box{display:none}
  .filter-bar .kw{min-width:0;width:100%}
  .summary-strip{gap:14px;font-size:11.5px}
  .kv{grid-template-columns:82px minmax(0,1fr)}
}

/* ============================================================
   详情页分页签（概览 / 收款 / 附件 / 日志）
   桌面与手机共用，手机上横向滚动，不换行挤压
   ============================================================ */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:0 0 auto;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink-2);font-size:12px;cursor:pointer;white-space:nowrap;transition:.14s
}
.tabs button:hover{border-color:#cdd6e6;color:var(--ink)}
.tabs button.on{background:var(--brand-50);border-color:#c9d9ff;color:var(--brand-600);font-weight:600}

/* ============================================================
   移动端 H5 适配（≤820px）
   —— 断点值与 mobile.js 的 MOBILE_BREAKPOINT 必须保持一致
   ============================================================ */
.side-mask{display:none}
.side-close{display:none}
.tabbar{display:none}

/* ---------- 系统设置：分组结构（桌面端展开成一张卡，分组只在手机上生效） ---------- */
.set-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px}
.pol-group,.pol-group-b{display:contents}
.pol-group-t{display:none}
/* 品牌标识排在卡片最下层且只有最高管理员能改，桌面端给这一组补一行小标题做分隔 */
@media (min-width:821px){
  .pol-group.pol-sep .pol-group-t{display:block;padding:16px 0 2px;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.2px}
}
.pol-row .ctl{min-width:0}
.pol-pad{display:block}
.pol-acts-sub{display:flex;gap:8px}
.m-bar,.m-bar-gap{display:none}

@media (max-width:820px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:14px;overflow-x:hidden}
  /* 底部标签栏高度 + iPhone 安全区，给内容留出位置，避免最后一行被挡住 */
  .main-wrap{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .page{padding:12px 12px calc(16px + env(safe-area-inset-bottom));max-width:none}

  /* ---------- 侧栏：抽屉 + 遮罩 ----------
     必须 position:fixed 脱离 flex 流。只靠 translateX 移出屏幕的话，侧栏仍然
     占着 272px 的布局宽度，内容区会被挤成 100 多像素。 */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:min(78vw,272px);flex:none;height:100vh;height:100dvh;
    transform:translateX(-100%);z-index:120;box-shadow:none;
    transition:transform .22s ease
  }
  .sidebar.open{transform:none;box-shadow:var(--shadow-3)}
  .side-mask{
    display:block;position:fixed;inset:0;z-index:110;background:rgba(13,21,38,.5);
    opacity:0;pointer-events:none;transition:opacity .2s ease
  }
  .side-mask.show{opacity:1;pointer-events:auto}
  /* 抽屉里也要有关闭按钮：手机上「我的」打开抽屉后，顶栏的汉堡是隐藏的，
     没有它就只能靠点菜单项跳页才能退出去。 */
  .side-close{
    display:grid;place-items:center;margin-left:auto;flex:0 0 34px;width:34px;height:34px;
    border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#e8eefb;
    font-size:15px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent
  }
  .side-close:active{background:rgba(255,255,255,.22)}
  /* 抽屉打开时锁住背景滚动 */
  body.side-open{overflow:hidden}
  .nav-item{padding:11px 12px;font-size:13.5px}
  .nav-label{padding:14px 12px 6px}

  /* ---------- 顶栏：只留标题 + 提醒 + 头像 ---------- */
  .topbar{height:50px;flex:0 0 50px;padding:0 12px;gap:8px}
  .menu-toggle{display:none}
  .search-box{display:none}
  .crumb{font-size:15px;gap:0}
  .crumb>span{display:none}
  .crumb b{font-size:15.5px;font-weight:700}
  .topbar .tb-btn{height:34px;width:34px;padding:0;justify-content:center;border-radius:9px}
  .topbar .tb-btn>span:not(.tb-badge){display:none}
  /* 视角开关在手机上也要能看出是哪一个：撑开成胶囊，文字换成两字版 */
  .topbar .tb-btn.scope-btn{width:auto;padding:0 9px;gap:5px}
  .topbar .tb-btn.scope-btn>span.scope-lb-short{display:inline}
  .topbar .tb-btn.scope-btn>span.scope-lb{display:none}
  .tb-badge{position:absolute;top:-3px;right:-3px}
  .avatar{width:30px;height:30px;flex:0 0 30px;font-size:12px}
  .user-chip{padding:2px}

  /* 下拉菜单在手机上铺满一行，避免贴边溢出 */
  .pop{
    position:fixed;left:10px;right:10px;top:52px;min-width:0;width:auto !important;
    max-height:min(72vh,520px);overflow:auto
  }

  /* ---------- 页头：标题与操作独占整行 ---------- */
  /* 顶栏已经把当前页名放大加粗写着（见上面 .crumb），页内再顶一行同名大标题纯属重复，
     手机屏幕本来就窄，这一行省下来就是一条列表的可见空间。只留操作按钮。 */
  .page-head{flex-direction:column;gap:10px;margin-bottom:12px}
  .page-head > div:not(.actions){display:none}
  /* 纯标题页（如个人中心）没有操作按钮，把整块收掉，别留一条空行 */
  .page-head:not(:has(.actions)){display:none}
  .page-head .actions{margin-left:0;width:100%;justify-content:stretch;gap:8px}
  /* 两个按钮各占一半；三个按钮时自动折成 2 + 1，不让中文按钮文字被硬挤 */
  .page-head .actions .btn{flex:1 1 calc(50% - 4px);min-width:0;height:36px;font-size:13px}
  .page-title{font-size:18px}
  .page-desc{display:none}

  /* ---------- KPI / 网格 ---------- */
  .grid.g4,.grid.g3,.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px 13px}
  .kpi .k-val{font-size:21px}
  .kpi .k-foot{font-size:11px}
  /* 九张卡在手机上两列，硬按桌面顺序排会出现落单的一张。
     这里换成：总额独占一行打头，其余按「合同 → 已收付 → 未收付 → 逾期」左右成对，
     正好 1 + 4×2 排满，不用横向滚动 */
  .kpi-grid .k-total{grid-column:1/-1;order:0}
  .kpi-grid .k-sale{order:1}
  .kpi-grid .k-pur{order:2}
  .kpi-grid .k-recvd{order:3}
  .kpi-grid .k-paid{order:4}
  .kpi-grid .k-outst{order:5}
  .kpi-grid .k-unpaid{order:6}
  .kpi-grid .k-odrecv{order:7}
  .kpi-grid .k-odpay{order:8}
  /* 明细抽屉：汇总数 2 列；表格去掉「已收/付」一列，避免手机横向滚太远 */
  .stat-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat-sum b{font-size:13.5px}
  .stat-tbl th:nth-child(4),.stat-tbl td:nth-child(4){display:none}
  .drawer.stat-drawer{width:100vw}
  .split-main{gap:10px}
  .card{border-radius:12px}
  .card-head{padding:11px 13px}
  .card-body{padding:13px}

  /* ---------- 筛选栏：搜索框 + 「筛选」同一行，其余折叠 ---------- */
  .filter-bar{padding:10px;gap:8px;border-radius:12px;margin-bottom:10px}
  .filter-bar .kw{flex:1 1 auto;width:auto;min-width:0;height:36px}
  .filter-bar .f-more{display:inline-flex;flex:0 0 auto;height:36px}
  .filter-bar .filters-more{display:none;flex-wrap:wrap;gap:8px;width:100%}
  .filter-bar.open .filters-more{display:flex}
  .filter-bar.open .f-more{background:var(--brand-50);border-color:#c9d9ff;color:var(--brand-600);font-weight:600}
  .filter-bar select,.filter-bar input[type=date]{
    flex:1 1 calc(50% - 4px);min-width:0;width:auto;height:36px
  }
  .filter-bar .f-acts{width:100%;margin-left:0;gap:8px}
  .filter-bar .f-acts .btn{flex:1;height:36px}

  /* ---------- 汇总条：2×2 网格，不再横向挤成一团 ---------- */
  .summary-strip{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;
    padding:10px 12px;font-size:11px;line-height:1.5
  }
  .summary-strip>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .summary-strip b{font-size:13px;margin-left:3px}

  /* ---------- 合同卡片列表 ---------- */
  .list-card{background:transparent;border:0;box-shadow:none}      /* 卡片自身有边框，外层不再套一层 */
  .list-card .summary-strip{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow-1);margin-bottom:10px
  }
  .card-list{display:flex;flex-direction:column;gap:10px}
  .c-card{
    background:var(--panel);border:1px solid var(--line);border-radius:13px;
    padding:13px 14px;box-shadow:var(--shadow-1);cursor:pointer;
    display:flex;flex-direction:column;gap:7px;transition:.14s;
    -webkit-tap-highlight-color:transparent
  }
  .c-card:active{background:#fbfcff;transform:scale(.994)}
  .c-card.od{border-color:#f4cdcd;background:linear-gradient(180deg,#fffafa,#fff)}
  .cc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .cc-no{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
  .cc-name{
    font-size:14.5px;font-weight:650;line-height:1.42;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
  }
  .cc-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cc-amt{display:flex;align-items:baseline;gap:3px}
  .cc-amt b{font-size:18px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
  .cc-amt small{font-size:11px;color:var(--muted)}
  .cc-rate{
    margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-2);
    background:#f2f5fb;border-radius:20px;padding:2px 9px;white-space:nowrap
  }
  .cc-rate.g{background:var(--teal-50);color:#0a8d81}
  .cc-rate.a{background:var(--amber-50);color:#a86900}
  .cc-rate.r{background:var(--red-50);color:#bf2f34}
  .cc-foot{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)}
  .cc-foot .od{color:var(--red);font-weight:600}
  /* 卡片上的关联编号：点它开对面那份合同的详情 */
  .cc-link{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--muted);min-width:0}
  .cc-link b{flex:0 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .cc-link b.link{color:var(--brand)}
  .cc-link span{flex:0 0 auto}
  .cc-acts{
    display:flex;gap:6px;flex-wrap:wrap;
    border-top:1px solid var(--line-2);padding-top:9px;margin-top:3px
  }
  .cc-acts button{
    flex:1 1 0;min-width:66px;height:33px;border:1px solid var(--line);border-radius:9px;
    background:#fff;color:var(--brand-600);font-size:12.5px;font-weight:600;cursor:pointer
  }
  .cc-acts button:active{background:var(--brand-50)}
  .cc-acts button.dg{color:var(--red)}
  .cc-acts button.dg:active{background:var(--red-50)}

  /* 手机上没有表头可点，排序改成一条下拉工具条 */
  .list-sort{
    display:flex;align-items:center;gap:8px;margin-bottom:8px;
    font-size:11.5px;color:var(--muted)
  }
  .list-sort select{width:auto;height:30px;font-size:12px;padding:0 26px 0 9px;background-color:#fff}

  /* ---------- 表格：仍保留滚动的兜底（如阶段计划编辑） ---------- */
  .tbl-wrap{-webkit-overflow-scrolling:touch}
  .tbl-wrap table.tbl{min-width:640px}
  table.tbl th,table.tbl td{padding:9px 10px}

  /* ---------- 详情：阶段计划 / 收款记录卡片 ---------- */
  .stage-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
  .sc-item{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--panel-2)}
  .sc-item.od{border-color:#f4cdcd;background:#fffafa}
  .sc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
  .sc-top b{font-size:13.5px}
  .sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;font-size:11.5px;color:var(--muted)}
  .sc-grid b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .sc-grid .od{color:var(--red)}
  .pay-cards{display:flex;flex-direction:column;gap:8px}
  .pay-item{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--panel-2)}
  .pay-item .pi-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .pay-item .pi-amt{font-size:15px;font-weight:700;color:#0a8d81;font-variant-numeric:tabular-nums}
  .pay-item .pi-meta{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px}
  .pay-item .pi-note{font-size:12px;color:var(--ink-2);margin-top:5px}

  /* ---------- 弹窗：手机上从底部升起，占满宽度 ---------- */
  .overlay{padding:0;align-items:flex-end}
  #modal-root .overlay{padding:0}
  .modal,.modal.sm,.modal.lg,.modal.xl{
    width:100%;max-width:100%;margin:0;border-radius:16px 16px 0 0;
    max-height:94vh;max-height:94dvh;display:flex;flex-direction:column;
    animation:sheetUp .24s cubic-bezier(.2,.9,.3,1)
  }
  @keyframes sheetUp{from{opacity:.6;transform:translateY(18px)}to{opacity:1;transform:none}}
  .modal-head{padding:15px 15px 11px;position:relative;flex:0 0 auto}
  .modal-head::before{
    content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
    width:34px;height:4px;border-radius:3px;background:#e3e8f1
  }
  .modal-head h3{font-size:15px}
  .modal-body{flex:1;max-height:none;padding:14px;overflow:auto;-webkit-overflow-scrolling:touch}
  .modal-foot,.form-foot{
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    flex:0 0 auto;background:#fff;border-top:1px solid var(--line)
  }
  .modal-foot .btn,.form-foot .btn{flex:1;height:40px;font-size:13.5px}
  .form-foot .left{display:none}

  /* ---------- 抽屉：整屏 ---------- */
  .drawer,.drawer.wide{width:100vw;max-width:100vw}
  .drawer-head{padding:14px 14px 0}
  .drawer-head h3{font-size:16px}
  .drawer-body{padding:14px 14px calc(24px + env(safe-area-inset-bottom))}
  .drawer-head .x{height:32px}

  /* ---------- 表单：单列，输入框 16px 防 iOS 自动放大 ---------- */
  .form{gap:12px;grid-template-columns:minmax(0,1fr)}
  /* 单一 track 显式钳到 0，否则表格的最小内容宽会把整张表单撑破 */
  .form>*,.form-sec,.stage-plan,.form-row>*{min-width:0}
  .form-sec{padding:12px;border-radius:10px}
  .form-row,.form-row.three,.form-row.four,.form-row.two{grid-template-columns:minmax(0,1fr)}
  .form-row{margin-top:12px !important}
  input[type=text],input[type=number],input[type=password],input[type=date],input[type=search],select,textarea{
    height:40px;font-size:16px;border-radius:9px
  }
  textarea{padding:9px 11px}
  .field label{font-size:12.5px}
  .field .hint{font-size:11px}
  .btn{height:36px}
  .btn.lg{height:42px}

  /* 阶段计划是可编辑表格，手机上用横向滚动保留列语义 */
  /* 到款/付款计划：手机上一行阶段 = 一张小卡片，不必横向滚动 */
  .stage-plan{overflow:visible;border-radius:11px}
  .stage-tbl{min-width:0;width:100%}
  .stage-tbl thead{display:none}
  .stage-tbl tbody{display:block}
  .stage-tbl tbody tr{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
    padding:11px;border-top:1px solid var(--line)
  }
  .stage-tbl tbody tr:first-child{border-top:0}
  .stage-tbl tbody td{display:block;padding:0}
  .stage-tbl tbody td::before{
    content:attr(data-l);display:block;font-size:11px;color:var(--muted);margin:0 0 4px 2px
  }
  .stage-tbl tbody td:nth-child(3),.stage-tbl tbody td:last-child{grid-column:1/-1}
  .stage-tbl tbody td .st-del{width:100%;height:34px}
  .stage-tbl td input,.stage-tbl td select{height:36px;font-size:14px}
  .stage-foot{flex-wrap:wrap;gap:8px}

  /* ---------- 详情页信息块 ---------- */
  .meta-grid,.meta-grid.quad{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .meta-item{padding:9px 11px}
  .meta-item .v{font-size:14px}
  .kv,.kv-2{grid-template-columns:88px minmax(0,1fr);gap:9px 12px;font-size:13px}

  /* ---------- 系统设置：H5 分组卡片 ---------- */
  .set-head{display:none}
  .set-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .set-main,.set-card{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
  .set-main>.card-head{display:none}
  .set-main>.card-body{padding:0}
  .set-main .form{display:block;gap:0}

  /* 组标题浮在卡片上方，卡片本体只装行 */
  .pol-group{display:block;margin:0 0 16px}
  .pol-group-t{display:block;margin:0 4px 7px;font-size:12px;font-weight:700;color:var(--muted)}
  .pol-group-b{
    display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
    box-shadow:0 1px 2px rgba(16,24,40,.04)
  }

  /* 组内一行 = iOS 列表行：左边标题与说明，右边控件 */
  .pol-row{
    display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:10px;align-items:center;
    padding:11px 13px;border:0;border-bottom:1px solid var(--line-2)
  }
  .pol-row:last-child{border-bottom:0}
  .pol-row .nm b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}
  .pol-row .nm span{display:block;margin-top:2px;font-size:11px;line-height:1.45;color:var(--muted)}
  /* 输入框与下拉统一字号/字体/右对齐：select 之前没跟上 16px，比数字小一圈，
     而且 text-align 是 left，和右边的数字对不齐。background 用 -color 简写，
     否则会把基础样式里的下拉箭头背景图一起抹掉。 */
  .pol-row .ctl input,.pol-row .ctl select{
    width:100%;height:36px;padding:0 9px;border:1px solid var(--line);border-radius:9px;
    background-color:#fff;text-align:right;font-family:inherit;font-size:16px;
    font-weight:400;color:var(--ink);line-height:1.2
  }
  /* 箭头只占 3~11px，文字留 14px 就够，和数字框的 9px 基本齐平 */
  .pol-row .ctl select{text-align:right;padding:0 14px 0 9px;background-position:right 3px center;background-size:8px 5px}
  /* 长文本（域名 / 地址 / Key）在手机上独占一行，方便输入与核对 */
  .pol-row.wide{grid-template-columns:minmax(0,1fr)}
  .pol-row.wide .ctl{grid-column:1/-1;margin-top:1px}
  .pol-row.wide .ctl input{height:40px;text-align:left}
  .pol-row.wide .ctl select{height:40px;text-align:left}

  .pol-pad{padding:12px 13px}
  .pol-pad.mt12{margin-top:0}
  .pol-pad .info-box,.pol-pad .warn-box{margin-top:0;margin-bottom:10px;border-radius:12px}
  .pol-pad>*:last-child{margin-bottom:0}
  .set-main .pol-pad{padding:14px 0 0}

  /* AI / 体检：卡片标题降级为组标题，正文成为卡片 */
  .set-card>.card-head{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:0;margin:0 4px 7px;background:transparent;border:0
  }
  .set-card>.card-head h3{font-size:12px;font-weight:700;color:var(--muted)}
  .set-card>.card-head .sub{display:none}
  .set-card>.card-head .right{margin-left:auto}
  .set-card>.card-head .tag-line{height:20px;font-size:10.5px}
  .set-card>.card-body{
    padding:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
    box-shadow:0 1px 2px rgba(16,24,40,.04)
  }
  .set-card--pad>.card-body{padding:13px}
  .set-card--pad .assess-strip{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .assess-strip svg{width:104px;height:104px}
  .set-card--pad .divider{margin:12px 0 6px}
  .assess-strip{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .sec-item{padding:9px 0;font-size:12.5px;gap:8px;align-items:flex-start;border-bottom:1px solid var(--line-2)}
  .sec-item .nm{flex:1 1 auto;min-width:0;line-height:1.45}
  .sec-item .cur{max-width:48%;overflow:hidden;text-overflow:ellipsis;padding-top:1px}

  /* AI 操作按钮：主按钮通栏，次要按钮平分下一行 */
  .pol-acts{display:grid !important;grid-template-columns:minmax(0,1fr);gap:8px}
  .pol-acts .btn{width:100%;height:38px;margin:0}
  .pol-acts-sub{display:flex;gap:8px}
  .pol-acts-sub .btn{flex:1 1 0;min-width:0;width:auto}
  .pol-acts #ai-msg{text-align:center;margin-top:2px}

  /* 底部常驻保存条：贴在标签栏上方 */
  .m-bar{
    display:block;position:fixed;left:0;right:0;z-index:86;
    bottom:calc(58px + env(safe-area-inset-bottom));
    padding:8px 12px;background:rgba(255,255,255,.95);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line)
  }
  .m-bar .btn{width:100%;height:42px;font-size:14.5px;border-radius:11px}
  .m-bar-gap{display:block;height:64px}

  /* 设置页等地方用的是内联 grid-template-columns，媒体查询权重不够，这里统一塌成单列 */
  body.is-mobile .grid[style*="grid-template-columns"],
  body.is-mobile [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}

  /* ---------- 分页 ---------- */
  .pager{padding:9px 10px;gap:8px}
  .pager .info{font-size:11px;width:100%}
  .pager .pgs{margin-left:0;width:100%;overflow-x:auto;padding-bottom:2px}
  .pager .pgs button{min-width:30px;height:30px}
  .pager select{height:30px}

  /* 附件行：点击区更大，按钮不换行挤压文件名 */
  .file-item{flex-wrap:wrap;gap:8px;padding:10px}
  .file-item .nm{flex:1 1 100%;order:2;white-space:normal;word-break:break-all}
  .file-item .sz{order:3;margin-right:auto}
  .file-item .btn{order:4}

  /* 提醒 / 最近录入行：日期不再折成两行 */
  .alert-item{gap:8px;align-items:flex-start;flex-wrap:wrap}
  .alert-item .t{flex:1 1 auto}
  .alert-item .d{font-size:11px}
  .alert-item .n-act{height:28px;font-size:11.5px}

  .toast{max-width:calc(100vw - 24px);font-size:13px}
  /* toast 是 z-index:300，比抽屉(120)高，会盖住左上角的 ✕。
     默认下移一行避开它；抽屉打开时改到屏幕底部，顺便不压住菜单项 */
  .toast-root{top:70px;transition:top .2s ease}
  body.side-open .toast-root{top:auto;bottom:24px}

  /* ---------- 登录页：单列，顶上一枚小 logo ---------- */
  .login-root{grid-template-columns:minmax(0,1fr)}
  .login-brand{display:none}
  .login-panel{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0 20px 40px}
  .login-panel>#login-panel{max-width:none}
  .login-card{max-width:none;padding-top:0}
  .login-card h1{font-size:22px}
  .login-msg{min-height:20px}
  .login-form input{height:44px;font-size:16px}
  .login-btn{height:44px}
  .login-mini{display:flex;align-items:center;gap:9px;padding-top:11vh;margin-bottom:24px}
  .login-mini .mark{
    width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;
    font-weight:800;font-size:15px;background:linear-gradient(135deg,#2f6bff,#5b9dff 55%,#22d3c5);
    box-shadow:0 6px 18px rgba(47,107,255,.35);overflow:hidden;flex:0 0 36px
  }
  .login-mini b{display:block;font-size:14px;color:var(--ink)}
  .login-mini span{display:block;font-size:9.5px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}

  /* ---------- 底部标签栏 ---------- */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(16,24,40,.05)
  }
  .tabbar .tb-item{
    flex:1;border:0;background:transparent;color:var(--muted);
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:5px 0 3px;font-size:10.5px;font-weight:600;cursor:pointer;border-radius:10px;
    -webkit-tap-highlight-color:transparent;transition:color .14s
  }
  .tabbar .tb-item .ico{width:21px;height:21px}
  .tabbar .tb-item.on{color:var(--brand)}
  .tabbar .tb-item:active{background:#f3f6fd}

  /* ---------- 提醒面板：手机上做成整屏面板，不再挤成小气泡 ---------- */
  .notice-pop{
    position:fixed;inset:0;width:auto;max-width:none;min-width:0;
    max-height:none;border-radius:0;border:0;z-index:120;
    padding-bottom:calc(58px + env(safe-area-inset-bottom))
  }
  .n-tabs{padding-top:env(safe-area-inset-top)}
  .n-tab{padding:13px 8px;font-size:13.5px}
  .notice-pop .n-list{max-height:none;flex:1 1 auto;background:var(--panel)}
  .notice-pop .n-empty{flex:1 1 auto;padding:40px 24px}
  /* 手机上面板铺满屏，底部操作条留在视野内，不会随列表一起滚走 */
  .notice-pop .pop-item,.notice-pop .pop-sep{flex:0 0 auto}
  .n-item{padding:12px 14px}
  .n-todo{padding:12px 14px}
  .n-act{height:30px;padding:0 14px;font-size:12px}
}

/* 小尺寸手机再收一档 */
@media (max-width:380px){
  .grid.g4,.grid.g3,.grid.g2{grid-template-columns:minmax(0,1fr)}
  .summary-strip{grid-template-columns:minmax(0,1fr)}
  .cc-acts button{min-width:0}
  .tabbar .tb-item span{font-size:10px}
}