/* ============================================================================
   客服外包 · 浅色商业主题（2026-11-06）
   做法：只覆盖视觉，不动任何布局结构与 JS。
   基础样式沿用 index.html 内联的浅色体系，这里做统一与收紧。
   ========================================================================== */

:root{
  --brand:#0E7A5F;          /* 主色：深墨绿 */
  --brand-d:#0B6550;
  --brand-l:#E8F3EF;
  --brand-b:#BFDCD2;

  --bg:#F5F6F8;
  --card:#FFFFFF;
  --line:#E6E8EC;
  --line2:#EFF1F4;

  --tx:#1F2329;
  --tx2:#5A6472;
  --tx3:#8A93A0;

  --ok:#1E7B45; --ok-bg:#E8F5EC;
  --warn:#B45309; --warn-bg:#FDF3E3;
  --bad:#B42318; --bad-bg:#FDECEA;

  --th-bg:#F2F4F7;
  --th-tx:#5A6472;
  --row-hover:#FAFCFD;

  --r-card:10px;
  --r-ctl:7px;
  --pad-x:18px;
  --pad-y:14px;
  --gap:14px;
  --sh:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
}

/* ---------- 基础 ---------- */
html,body{
  background:var(--bg) !important;
  color:var(--tx) !important;
  font-size:13.5px !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* 去掉一切毛玻璃 / 背景图：这是原来卡顿的主因 */
*{backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
body{background-image:none !important}

/* ---------- 左侧导航 ---------- */
.side{
  flex:0 0 214px !important; width:214px !important;
  background:var(--card) !important; border-right:1px solid var(--line) !important;
}
.brand{padding:16px 16px 13px !important; border-bottom:1px solid var(--line2) !important}
.brand b{font-size:14px !important; font-weight:600 !important; letter-spacing:.2px}
.brand span{font-size:11.5px !important; color:var(--tx3) !important; margin-top:3px !important}

.nav{padding:8px 8px 12px !important; gap:1px !important}
.tbtn{
  height:36px !important; border-radius:7px !important;
  font-size:13px !important; color:var(--tx2) !important;
  padding:0 10px !important;
  border:0 !important; background:transparent !important;
  box-shadow:none !important; text-align:left;
}
.tbtn:hover{background:#F4F6F8 !important; color:var(--tx) !important}
.tbtn.on,.tbtn.on:hover{background:var(--brand-l) !important; color:var(--brand) !important; font-weight:600 !important}
.tbtn.parent{font-size:13.5px !important; font-weight:600 !important; color:var(--tx) !important; height:40px !important}
.tbtn.parent.on{color:var(--brand) !important}
.tbtn.child{height:34px !important; font-size:12.8px !important; padding-left:48px !important}  /* 2026-11-07 右移两个汉字 */

/* ---------- 顶栏 / 页面头 ---------- */
.main{background:var(--bg) !important}
.pagehd h1, h1{font-size:17px !important; font-weight:600 !important; letter-spacing:.2px; color:var(--tx) !important}
.sub,.muted,h2.sub{color:var(--tx3) !important}

/* ---------- 卡片 ---------- */
.card,.kpi,.panel,.box,.chartbox{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card) !important;
  box-shadow:var(--sh) !important;
}
.card>h2,.card>h3{font-size:13.5px !important; font-weight:600 !important; color:var(--tx) !important}

/* KPI 数字 */
.kpi .v,.num,.big{color:var(--tx) !important; font-variant-numeric:tabular-nums}
.kpi .l,.kpi .lb{color:var(--tx3) !important; font-size:12px !important}

/* ---------- 表格 ---------- */
table{font-size:13px !important; border-collapse:collapse}
th{
  background:var(--th-bg) !important; color:var(--th-tx) !important;
  font-size:12px !important; font-weight:600 !important;
  border-bottom:1px solid #E2E6EC !important; border-top:0 !important;
  padding:9px 12px !important; white-space:nowrap; vertical-align:middle;
  letter-spacing:.2px;
}
td{
  padding:9px 12px !important; border-bottom:1px solid var(--line2) !important;
  color:var(--tx) !important; vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
tbody tr:hover td,tr:hover>td{background:var(--row-hover) !important}
tbody tr:last-child td{border-bottom:0 !important}
tr.tot td,tr.sum td,tr.sttot>td{
  background:#F7F9FA !important; color:var(--tx) !important; font-weight:600 !important;
}

/* 数字列 */
td.r,td.num,th.r,th.num{text-align:right}

/* ---------- 表单控件 ---------- */
input,select,textarea{
  border:1px solid var(--line) !important; border-radius:var(--r-ctl) !important;
  background:#fff !important; color:var(--tx) !important;
  font-size:12.8px !important; height:32px;
  padding:0 9px !important;
}
textarea{height:auto; padding:7px 9px !important}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--brand-b) !important;
  box-shadow:0 0 0 3px var(--brand-l) !important;
}
input[type=checkbox],input[type=radio]{height:auto; accent-color:var(--brand)}

/* ---------- 按钮：只保留两级 ---------- */
button,.btn{
  height:32px !important; padding:0 14px !important;
  border-radius:var(--r-ctl) !important;
  font-size:13px !important; font-weight:500 !important;
  border:1px solid var(--line) !important;
  background:#fff !important; color:var(--tx) !important;
  cursor:pointer;
}
button:hover,.btn:hover{border-color:#CFD6DF !important; background:#FBFCFD !important}
button.pri,.btn.pri,button.primary,.btn.primary,button.green,.btn.green{
  background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important;
}
button.pri:hover,.btn.pri:hover,button.primary:hover,.btn.primary:hover{background:var(--brand-d) !important}
button.sm,.btn.sm{height:28px !important; padding:0 10px !important; font-size:12.5px !important}
button.ghost,.btn.ghost{border-color:transparent !important; background:transparent !important; color:var(--tx2) !important}

/* ---------- 提示条 / 标签 ---------- */
.tip,.banner,.notice{
  background:#F7F9FA !important; border:1px solid var(--line) !important;
  color:var(--tx2) !important; border-radius:8px !important;
}
.pill,.tag{border-radius:20px !important; font-size:11.5px !important; padding:1px 8px !important}
.pill.ok{background:var(--ok-bg) !important; color:var(--ok) !important}
.pill.no{background:var(--bad-bg) !important; color:var(--bad) !important}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:#D5DAE1; border-radius:6px; border:2px solid #fff}
::-webkit-scrollbar-thumb:hover{background:#C2C9D2}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 图表 ---------- */
svg text{fill:var(--tx3) !important}
svg .hbl,svg .hval{fill:var(--tx2) !important}

input::placeholder,textarea::placeholder{color:#A8B0BB !important}

/* ---------- 提示条（原来是刺眼的淡黄块） ---------- */
.note{
  background:#F7F9FA !important; border:1px solid #EDF0F3 !important;
  border-left:3px solid var(--brand-b) !important;
  color:var(--tx2) !important; border-radius:8px !important;
  padding:9px 12px !important; font-size:12.5px !important; margin:10px 0 12px !important;
}
/* ---------- 次要按钮：白底细边，不用"纯文字链接" ---------- */
.btn.ghost{
  background:#fff !important; border:1px solid var(--line) !important;
  color:var(--tx2) !important; height:28px !important; padding:0 11px !important;
  font-size:12.5px !important;
}
.btn.ghost:hover{background:#F7F9FA !important; color:var(--tx) !important; border-color:#D8DDE4 !important}