/* ============================================================
   产品界面（.ui）
   按《鼎汉智能客户管理系统 用户操作手册 V1.0》还原的真实版面。
   手册原始截图因转换时缺中文字体全部成了豆腐块，无法直接使用；
   这里用 HTML/CSS 按同一套版面与字段重建，数据沿用手册中的演示数据。

   对外表述一律用「产品界面」，不写「实拍截图」—— 它是重建，不是照片。
   拿到重新拍摄的截图后，整块替换为 <img> 即可，外层 .ui__win 保持不变。
   ============================================================ */

/* 产品界面内部只有一级小字 12px。它是"截图里的东西"，与页面五级字阶分开。
   v20 之前是 12/11 两级 —— 差 1px，看不出层级只看得出乱。
   现在层级靠字重与颜色区分（表头 600、单元格 400、次要信息用 --ui-muted）。 */
:root{--ui-t:12px}

/* ---------------- 窗口外框 ---------------- */
.ui__win{
  border-radius:var(--r);overflow:hidden;background:var(--ui-card);
  border:1px solid var(--ui-line);box-shadow:var(--sh-ui);
}
.ui__win img{display:block;width:100%;height:auto}

/* 顶栏 */
.ui__bar{
  display:flex;align-items:center;gap:10px;
  padding:0 16px;height:42px;background:var(--ui-bar);
  font-size:var(--ui-t);color:rgba(255,255,255,.92);letter-spacing:.01em;
}
.ui__bar b{font-weight:600}
.ui__bar span{margin-left:auto;color:rgba(255,255,255,.5);font-size:var(--ui-t)}

/* 工作区 */
.ui__body{
  background:var(--ui-bg);padding:14px;
  font-size:var(--ui-t);line-height:1.5;color:var(--ui-ink);
  font-variant-numeric:tabular-nums;
}

/* ---------------- 统计卡（工作台顶部四张）---------------- */
.ui__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ui__stat{
  display:flex;align-items:center;gap:11px;
  background:var(--ui-card);border:1px solid var(--ui-line);
  border-radius:var(--r-s);padding:12px 13px;
}
.ui__stat i{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:block;
}
.ui__stat b{display:block;font-size:var(--t3);font-weight:600;line-height:1.15;letter-spacing:-.01em}
.ui__stat em{display:block;margin-top:3px;font-size:var(--ui-t);font-style:normal;color:var(--ui-muted)}

/* ---------------- 表格 ---------------- */
.ui__panel{
  background:var(--ui-card);border:1px solid var(--ui-line);
  border-radius:var(--r-s);padding:13px;
}
.ui__panel + .ui__panel{margin-top:10px}
.ui__h{
  display:flex;align-items:baseline;gap:9px;margin-bottom:11px;
  font-size:var(--ui-t);font-weight:600;
}
.ui__h small{font-weight:400;font-size:var(--ui-t);color:var(--ui-muted)}

.ui__t{width:100%;border-collapse:collapse;font-size:var(--ui-t);white-space:nowrap}
.ui__t th{
  text-align:left;font-weight:600;color:var(--ui-ink);
  padding:0 10px 9px 0;border-bottom:1px solid var(--ui-line);
}
.ui__t td{padding:9px 10px 9px 0;border-bottom:1px solid var(--ui-line);color:var(--ui-ink)}
.ui__t tr:last-child td{border-bottom:0}
.ui__t .num{font-variant-numeric:tabular-nums}
.ui__t .sum td{font-weight:600;border-top:1px solid var(--ui-line);border-bottom:0;padding-top:11px}
.ui__t .mut{color:var(--ui-muted)}

/* 状态标签 */
.ui__tag{
  display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:var(--ui-t);line-height:1.5;white-space:nowrap;
}
.ui__tag--ok{background:var(--ok-w);color:var(--ok)}
.ui__tag--warn{background:var(--warn-w);color:var(--warn)}
.ui__tag--bad{background:var(--bad-w);color:var(--bad)}
.ui__tag--info{background:#eaf0ff;color:var(--ui-blue)}

/* ---------------- 筛选行 ---------------- */
.ui__filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.ui__inp{
  flex:1 1 150px;min-width:0;height:28px;border-radius:6px;
  border:1px solid var(--ui-line);background:#fff;
  display:flex;align-items:center;padding:0 10px;
  font-size:var(--ui-t);color:var(--ui-muted);
}
.ui__inp--s{flex:0 0 108px}
.ui__btn{
  flex:0 0 auto;height:28px;padding:0 18px;border-radius:6px;
  background:var(--ui-blue);color:#fff;font-size:var(--ui-t);
  display:flex;align-items:center;
}

/* ---------------- 客户详情头 ---------------- */
.ui__head{margin-bottom:12px}
.ui__head h5{
  display:flex;align-items:center;gap:10px;
  margin:0;font-size:var(--ui-t);font-weight:600;
}
.ui__head p{margin:6px 0 0;font-size:var(--ui-t);color:var(--ui-muted)}

/* ---------------- 分页 ---------------- */
.ui__page{
  margin-top:11px;text-align:center;font-size:var(--ui-t);color:var(--ui-muted);
}
.ui__page b{
  display:inline-block;min-width:18px;padding:1px 5px;margin:0 2px;border-radius:4px;
  background:var(--ui-blue);color:#fff;font-weight:500;
}

/* ---------------- 条形分布（提成比 / 业绩排名）---------------- */
.ui__bars{display:grid;gap:9px}
.ui__bars div{display:grid;grid-template-columns:76px 1fr 54px;align-items:center;gap:10px;font-size:var(--ui-t)}
.ui__bars span{height:9px;border-radius:3px;background:var(--ui-blue);display:block}
.ui__bars em{font-style:normal;color:var(--ui-muted);text-align:right}

/* ---------------- 说明脚注 ---------------- */
.ui__note{
  margin-top:12px;font-size:var(--t5);color:var(--muted);line-height:1.65;
}

/* ---------------- 响应式 ---------------- */
@media (max-width:900px){
  .ui__stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  /* 表格在窄屏自行横向滚动，页面本身不横向滚动 */
  .ui__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ui__body{padding:10px}
  .ui__stat b{font-size:var(--t4)}
}