/* ==========================================================================
   设计令牌 Design Tokens  v2.0
   依据《干系人管理系统 · UI 重构设计方案》第二章
   原则：单一强调色 + 一套语义色 + 一套角色色，三者职责不重叠
   ========================================================================== */
:root{
  /* ── 品牌 / 交互（唯一强调色，只表示「可点击」） ── */
  --primary:#0066CC;
  --primary-focus:#0071E3;
  --primary-active:#0055AD;
  --primary-on-dark:#2997FF;
  --accent-tint:#EAF3FD;

  /* ── 表面 ── */
  --canvas:#F5F5F7;          /* 页面底色 */
  --surface:#FFFFFF;         /* 卡片 / 面板 / 顶栏 / 抽屉 */
  --surface-pearl:#FAFAFC;   /* 图谱画布 / 内嵌区 */
  --surface-tile:#272729;    /* 深色承载面 */
  --fill:#F5F5F7;            /* 内嵌填充：输入框 / 工具胶囊 / 头像底 */
  --fill-hover:#FAFAFC;      /* 行悬停 */

  /* ── 文字 ── */
  --ink:#1D1D1F;
  --ink-2:#6E6E73;
  --ink-3:#7A7A7A;
  --ink-on-dark:#FFFFFF;
  --ink-on-dark-2:#CCCCCC;

  /* ── 描边：唯一分隔手段 ── */
  --hairline:#E0E0E0;
  --divider-soft:#F0F0F0;

  /* ── 语义状态色（态度与业务状态一律用它，不与强调色争抢） ── */
  --pos:#1E8E3E;        --pos-tint:#E7F4EB;   /* 支持 / 已完成 / 通过 */
  --warn:#B26A00;       --warn-tint:#FDF3E3;  /* 中立 / 风险预警 / 待处理 */
  --neg:#D93025;        --neg-tint:#FCEBE9;   /* 反对 / 逾期 / 阻塞 / 删除 */
  --info:#0066CC;       --info-tint:#EAF3FD;  /* 进行中 / 审批中 */
  --mute:#7A7A7A;       --mute-tint:#F0F0F0;  /* 未表态 / 待办 / 草稿 */

  /* ── 角色标识色（IPAD 角色环） ── */
  --role-decider:#B26A00;
  --role-initiator:#1E8E3E;
  --role-approver:#0066CC;
  --role-participant:#86868B;
  --role-decider-tint:#FDF3E3;
  --role-initiator-tint:#E7F4EB;
  --role-approver-tint:#EAF3FD;
  --role-participant-tint:#F0F0F0;

  /* ── 图谱连线 ── */
  --edge:#C7C7CC;
  --edge-highlight:var(--primary);

  /* ── 字体层级（全站只出现这 9 档） ── */
  --font-sans:'Noto Sans SC','PingFang SC','Microsoft YaHei','Source Han Sans SC',-apple-system,'Segoe UI',sans-serif;
  --font-num:'Inter','SF Pro Text',-apple-system,'Segoe UI',sans-serif;

  --fs-display:32px;  --fw-display:600;  --lh-display:40px;
  --fs-h1:22px;       --fw-h1:600;       --lh-h1:30px;
  --fs-h2:17px;       --fw-h2:600;       --lh-h2:24px;
  --fs-h3:15px;       --fw-h3:600;       --lh-h3:22px;
  --fs-body:14px;     --fw-body:400;     --lh-body:22px;
  --fs-body-s:14px;   --fw-body-s:600;   --lh-body-s:22px;
  --fs-caption:12px;  --fw-caption:400;  --lh-caption:18px;
  --fs-micro:11px;    --fw-micro:500;    --lh-micro:16px;
  --fs-num:13px;      --fw-num:500;      --lh-num:18px;

  /* ── 间距（基准 8） ── */
  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-xxl:48px;

  /* ── 圆角 ── */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px;

  /* ── 阴影：全站只有两种 ── */
  --shadow-l1:0 2px 8px rgba(0,0,0,.06);
  --shadow-l2:0 3px 15px rgba(0,0,0,.18);

  /* ── 尺寸 ── */
  --h-topbar:56px;
  --h-control:36px;
  --h-control-sm:32px;
  --h-control-lg:44px;
  --h-rail:64px;
  --w-list:288px;
  --w-drawer:400px;
  --row-h:56px;
  --row-h-compact:44px;
}

/* ==========================================================================
   排版工具类
   ========================================================================== */
.t-display{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-display)}
.t-h1{font-size:var(--fs-h1);font-weight:var(--fw-h1);line-height:var(--lh-h1)}
.t-h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);line-height:var(--lh-h2)}
.t-h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);line-height:var(--lh-h3)}
.t-body{font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body)}
.t-caption{font-size:var(--fs-caption);font-weight:var(--fw-caption);line-height:var(--lh-caption)}
.t-micro{font-size:var(--fs-micro);font-weight:var(--fw-micro);line-height:var(--lh-micro)}
/* 数字列等宽对齐 */
.num,.t-num{font-size:var(--fs-num);font-weight:var(--fw-num);font-variant-numeric:tabular-nums;font-family:var(--font-num)}

/* ==========================================================================
   组件基元
   ========================================================================== */

/* 主行动：胶囊，每屏只有一个 */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--h-control);padding:0 22px;border:0;border-radius:var(--r-pill);
  background:var(--primary);color:#fff;font-size:var(--fs-body);font-weight:600;
  cursor:pointer;transition:background .15s,transform .08s;white-space:nowrap}
.btn-primary:hover{background:var(--primary-focus)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{background:var(--divider-soft);color:var(--ink-3);cursor:not-allowed}

/* 次级：8px 圆角描边 */
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--h-control);padding:0 18px;border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:var(--fs-body);
  cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}

/* 幽灵 */
.btn-ghost{border:0;background:none;color:var(--primary);font-size:var(--fs-body);cursor:pointer;padding:0}
.btn-ghost:hover{text-decoration:underline}

/* 危险 */
.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--h-control);padding:0 18px;border:0;border-radius:var(--r-sm);
  background:var(--neg-tint);color:var(--neg);font-size:var(--fs-body);font-weight:500;cursor:pointer}
.btn-danger:hover{background:#F8DAD6}

/* 图标按钮 36×36 圆形 */
.btn-icon{width:var(--h-control);height:var(--h-control);border:0;border-radius:var(--r-pill);
  background:var(--fill);color:var(--ink-2);font-size:18px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0}
.btn-icon:hover{background:var(--accent-tint);color:var(--primary)}

/* 徽章：浅底深字胶囊 */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:500;line-height:1;white-space:nowrap}
.badge-pos{background:var(--pos-tint);color:var(--pos)}
.badge-warn{background:var(--warn-tint);color:var(--warn)}
.badge-neg{background:var(--neg-tint);color:var(--neg)}
.badge-info{background:var(--info-tint);color:var(--info)}
.badge-mute{background:var(--mute-tint);color:var(--mute)}

/* 卡片：白底 + 1px 描边，无装饰性阴影 */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:24px}
.card-lg{border-radius:var(--r-lg);padding:24px}
.card-click{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.card-click:hover{box-shadow:var(--shadow-l1);border-color:#D5D5D8}

/* 统计卡：标签 + 大数值 + 环比 */
.stat-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:20px}
.stat-label{font-size:var(--fs-caption);color:var(--ink-2)}
.stat-value{font-size:var(--fs-display);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:var(--lh-display)}
.stat-delta{font-size:var(--fs-caption);font-weight:500}
.stat-delta.pos{color:var(--pos)} .stat-delta.neg{color:var(--neg)} .stat-delta.warn{color:var(--warn)}

/* 表单控件 */
.field{display:flex;flex-direction:column;gap:var(--sp-xxs);margin-bottom:var(--sp-md)}
.field>label{font-size:var(--fs-micro);font-weight:500;color:var(--ink-2)}
.field .req{color:var(--neg)}
.input,.select,.textarea{height:var(--h-control);padding:0 12px;border:1px solid var(--hairline);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:var(--fs-body);
  font-family:inherit;outline:none;transition:border-color .15s;width:100%}
.textarea{height:auto;min-height:88px;padding:10px 12px;line-height:var(--lh-body);resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary-focus)}
.input.invalid,.select.invalid,.textarea.invalid{border-color:var(--neg)}
.field-error{font-size:var(--fs-caption);color:var(--neg)}
.input:disabled,.select:disabled{background:var(--fill);color:var(--ink-3);cursor:not-allowed}

/* 开关 */
.switch{position:relative;width:44px;height:24px;border-radius:var(--r-pill);background:var(--hairline);
  cursor:pointer;transition:background .2s;flex-shrink:0;border:0}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .2s}
.switch.on{background:var(--primary)}
.switch.on::after{transform:translateX(20px)}

/* 表格 */
.table{width:100%;border-collapse:collapse;background:var(--surface)}
.table thead th{height:40px;padding:0 var(--sp-sm);text-align:left;font-size:var(--fs-micro);
  font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--hairline);white-space:nowrap}
.table tbody td{height:var(--row-h);padding:0 var(--sp-sm);font-size:var(--fs-body);color:var(--ink);
  border-bottom:1px solid var(--divider-soft)}
.table tbody tr:hover{background:var(--fill-hover)}
.table tbody tr.clickable{cursor:pointer}
.table .col-num{text-align:right;font-variant-numeric:tabular-nums}

/* 进度条 */
.progress{height:6px;border-radius:var(--r-pill);background:var(--divider-soft);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--primary)}

/* 空状态 */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-xs);
  padding:var(--sp-xxl) var(--sp-lg);text-align:center}
.empty-icon{font-size:48px;line-height:1;color:var(--ink-3)}
.empty-title{font-size:var(--fs-h2);font-weight:600;color:var(--ink)}
.empty-desc{font-size:var(--fs-caption);color:var(--ink-2)}

/* 骨架屏 */
.skeleton{background:var(--divider-soft);border-radius:var(--r-xs);animation:sk-pulse 1.4s ease-in-out infinite}
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Toast：白底 + 左侧 3px 语义色竖条 */
.toast-v2{background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--primary);
  border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--shadow-l1);min-width:280px;max-width:380px}

/* 分段切换 */
.segmented{display:inline-flex;padding:2px;background:var(--fill);border-radius:var(--r-sm)}
.segmented>button{border:0;background:none;padding:6px 14px;border-radius:6px;font-size:var(--fs-caption);
  color:var(--ink-2);cursor:pointer}
.segmented>button.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--shadow-l1)}