/* ============================================================
   国家技术转移人才培养基地（云南）· 技术经理人培训平台 2.0
   Design System —— 科技蓝 / 浅色管理台
   ============================================================ */

:root{
  --primary:#1a6ce0; --primary-600:#1455b6; --primary-700:#0e418c;
  --primary-50:#eff6ff; --primary-100:#dbe9fc; --primary-200:#bcd6f8;
  --brand:#e0820f; --brand-bg:#fdf3e3;                 /* 品牌点缀：技术转移橙 */
  --side-a:#0a1f3c; --side-b:#123d64;
  --bg:#f1f5f9; --card:#ffffff; --line:#e3e9f2; --line-2:#eef3f9;
  --t1:#152a41; --t2:#54697f; --t3:#8a9aad; --t4:#aab7c6;
  --ok:#0f9d63; --ok-bg:#e7f7ef; --ok-line:#bfe8d3;
  --warn:#c47d09; --warn-bg:#fdf5e6; --warn-line:#f3ddb0;
  --danger:#d63f3f; --danger-bg:#fdeeee; --danger-line:#f5c9c9;
  --info:#1a6ce0; --info-bg:#ecf3fe; --info-line:#c6dbfb;
  --violet:#6b46c1; --violet-bg:#f2edfd;
  --teal:#0e8f96; --teal-bg:#e6f6f7;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(16,40,80,.05);
  --sh-2:0 1px 2px rgba(16,40,80,.05), 0 4px 14px rgba(16,40,80,.06);
  --sh-3:0 8px 28px rgba(16,40,80,.12);
  --mono:"SF Mono",Consolas,"Roboto Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;line-height:1.6;color:var(--t1);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
ul,ol{list-style:none}
img,svg{display:block}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c6d2e0;border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#a9b9cc;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ============================ 布局 ============================ */
.layout{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{flex:1;padding:18px 22px 44px;max-width:1720px;width:100%}

/* ============================ 侧栏 ============================ */
.side{
  width:238px;flex:0 0 238px;background:linear-gradient(178deg,var(--side-a) 0%,var(--side-b) 100%);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side .brand{height:58px;display:flex;align-items:center;gap:10px;padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.07);flex:0 0 58px}
.side .brand .mk{width:28px;height:28px;flex:0 0 28px;border-radius:7px;position:relative;
  background:linear-gradient(150deg,#3aa0ff,#12539f);box-shadow:0 3px 10px rgba(28,110,220,.45)}
/* 技术转移意象：上升的节点网络 */
.side .brand .mk::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 22% 74%,#eaf5ff 0 2.1px,transparent 2.4px),
    radial-gradient(circle at 50% 50%,#eaf5ff 0 2.1px,transparent 2.4px),
    radial-gradient(circle at 78% 24%,#ffd79a 0 2.4px,transparent 2.7px),
    linear-gradient(45deg,transparent 45.5%,rgba(234,245,255,.85) 46%,rgba(234,245,255,.85) 54%,transparent 54.5%);
}
.side .brand .nm{color:#fff;font-size:13.5px;font-weight:500;letter-spacing:.3px;line-height:1.2}
.side .brand .nm small{display:block;font-size:9.5px;color:#7ba3cd;letter-spacing:1px;font-weight:400}

.idbox{margin:12px 10px 4px;padding:10px 12px;border-radius:9px;
  background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.09)}
.idbox .row1{display:flex;align-items:center;gap:8px}
.idbox .av{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;color:#fff;background:linear-gradient(140deg,#3d9bff,#12539f)}
.idbox .nm{color:#fff;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idbox .rl{color:#7fa6cf;font-size:11px;margin-top:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.idbox .rl .scope{padding:1px 6px;border-radius:20px;background:rgba(58,160,255,.2);color:#8ec4ff;font-size:10px}

.nav{flex:1;overflow-y:auto;padding:2px 10px 22px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);background-clip:content-box}
.nav .grp{color:#5f83ab;font-size:11px;letter-spacing:1.4px;padding:15px 8px 7px;font-weight:400}
.nav .it{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px;border-radius:7px;
  color:#b6cde6;font-size:13px;position:relative;transition:background .15s,color .15s;cursor:pointer}
.nav .it:hover{background:rgba(255,255,255,.075);color:#fff}
.nav .it.on{background:linear-gradient(90deg,rgba(58,160,255,.95),rgba(24,100,196,.7));
  color:#fff;box-shadow:0 4px 14px rgba(16,86,176,.38)}
.nav .it .ic{width:16px;height:16px;flex:0 0 16px;opacity:.92}
.nav .it .ic svg{width:16px;height:16px}
.nav .it .bdg{margin-left:auto;font-size:10px;min-width:18px;text-align:center;
  padding:1px 5px;border-radius:20px;background:#e05a3f;color:#fff;line-height:15px}
.nav .it.on .bdg{background:#fff;color:#12539f}
.nav .it .star{margin-left:auto;font-size:9px;padding:1px 5px;border-radius:4px;
  background:rgba(255,200,87,.18);color:#ffc857;letter-spacing:.5px}
.nav .it.on .star{background:rgba(255,255,255,.25);color:#fff}

/* ============================ 顶栏 ============================ */
.top{height:58px;flex:0 0 58px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 22px;position:sticky;top:0;z-index:20}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--t2);min-width:0}
.crumb b{color:var(--t1);font-weight:500}
.crumb .sep{color:var(--t4)}
.crumb .tagx{font-size:11px;padding:1px 7px;border-radius:20px;background:var(--primary-50);
  color:var(--primary-600);border:1px solid var(--primary-100)}
.topright{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.search{display:flex;align-items:center;gap:7px;width:250px;height:32px;padding:0 11px;
  border:1px solid var(--line);border-radius:8px;background:#f7f9fc;color:var(--t3);transition:.15s}
.search:focus-within{background:#fff;border-color:var(--primary-200);box-shadow:0 0 0 3px var(--primary-50)}
.search input{border:0;background:none;flex:1;font-size:12.5px;min-width:0}
.search input::placeholder{color:var(--t4)}
.icobtn{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--t2);position:relative;transition:.15s}
.icobtn:hover{background:var(--bg);color:var(--primary)}
.icobtn .dot{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;
  background:#e04b3f;border:1.5px solid #fff}
.rolepick{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line);background:#fff;transition:.15s}
.rolepick:hover{border-color:var(--primary-200)}
.rolepick select{border:0;background:none;font-size:12.5px;color:var(--t1);cursor:pointer;
  appearance:none;padding-right:2px;font-weight:500}
.rolepick .caret{color:var(--t3);font-size:9px}
.mebtn{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:linear-gradient(140deg,#3d9bff,#12539f);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}

/* ============================ 页头 ============================ */
.phead{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.phead .tt{flex:1;min-width:240px}
.phead h1{font-size:19px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:9px}
.phead h1 .hint{font-size:11px;font-weight:400;color:var(--t3);border:1px solid var(--line);
  padding:1px 7px;border-radius:20px;background:#fff}
.phead .ds{font-size:12.5px;color:var(--t3);margin-top:4px}
.phead .acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ============================ 按钮 ============================ */
.btn{height:32px;padding:0 14px;border-radius:7px;font-size:12.5px;display:inline-flex;
  align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--t1);
  transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--primary-200);color:var(--primary)}
.btn svg{width:13px;height:13px}
.btn-p{background:linear-gradient(180deg,#2a7dea,#1455b6);border-color:#1455b6;color:#fff;
  box-shadow:0 2px 6px rgba(20,85,182,.28)}
.btn-p:hover{background:linear-gradient(180deg,#2f86f5,#1157bd);color:#fff;border-color:#1157bd}
.btn-g{background:#fff;color:var(--t2)}
.btn-d{background:#fff;color:var(--danger);border-color:var(--danger-line)}
.btn-d:hover{background:var(--danger-bg);color:var(--danger);border-color:#eba8a8}
.btn-s{height:27px;padding:0 10px;font-size:12px;border-radius:6px}
.btn-t{height:auto;padding:2px 0;border:0;color:var(--primary);font-size:12.5px;background:none}
.btn-t:hover{text-decoration:underline;border:0}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ============================ 卡片 ============================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);margin-bottom:14px;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.card-h h3{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-h h3::before{content:"";width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,#3aa0ff,#1455b6)}
.card-h .sub{font-size:12px;color:var(--t3)}
.card-h .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.card-b{padding:16px}
.card-b.np{padding:0}

/* ============================ KPI ============================ */
.kpis{display:grid;gap:12px;margin-bottom:14px}
.kpis.c6{grid-template-columns:repeat(6,1fr)}
.kpis.c5{grid-template-columns:repeat(5,1fr)}
.kpis.c4{grid-template-columns:repeat(4,1fr)}
.kpis.c3{grid-template-columns:repeat(3,1fr)}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  position:relative;overflow:hidden;box-shadow:var(--sh-1)}
.kpi::after{content:"";position:absolute;right:-16px;top:-16px;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,108,224,.09),transparent 70%)}
.kpi .lab{font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:6px}
.kpi .num{font-size:27px;font-weight:600;letter-spacing:-.5px;margin-top:5px;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--t1)}
.kpi .num small{font-size:12px;font-weight:400;color:var(--t3);margin-left:4px;letter-spacing:0}
.kpi .foot{font-size:11.5px;color:var(--t3);margin-top:5px;display:flex;align-items:center;gap:5px}
.kpi .up{color:var(--danger);font-weight:500}
.kpi .down{color:var(--ok);font-weight:500}
.kpi.k-p .num{color:var(--primary-600)}
.kpi.k-ok .num{color:var(--ok)}
.kpi.k-warn .num{color:var(--warn)}
.kpi.k-danger .num{color:var(--danger)}
.kpi.k-violet .num{color:var(--violet)}
.kpi.k-teal .num{color:var(--teal)}

/* KPI 卡可点击（工作台的数字要能跳走：见 view/index/index.html）。
   .kpi 原本是 div 样式，这里补上 <a> 需要的 display/color/text-decoration，
   否则会变成蓝字下划线。右侧的 › 提示"这张卡可以点"。 */
a.kpi{display:block;color:inherit;text-decoration:none;
  transition:border-color .12s,box-shadow .12s,transform .12s}
a.kpi:hover{border-color:var(--primary-200);box-shadow:var(--sh-2);transform:translateY(-2px)}
a.kpi .lab:after{content:"›";margin-left:auto;color:var(--t3);font-size:14px;line-height:1}
a.kpi:hover .lab:after{color:var(--primary)}
/* 正文里的可点击数字（欢迎条） */
.lk{color:var(--primary);cursor:pointer;text-decoration:none}
.lk:hover{text-decoration:underline}

/* ==================== 可输入过滤的下拉（班级选择器） ====================
   由 admin/js/ui.js 的 UI.combo 驱动（[data-combo] 自动初始化）。
   用途：后台 30+ 期培训班，原生 <select> 只能滚动找，改成可打字过滤。
   真值放在 hidden input 里，**沿用原来的 name**，所以后端零改造。 */
.combo{position:relative;display:inline-block;min-width:240px;max-width:100%}
.combo .cb-inp{width:100%;height:32px;padding:6px 26px 6px 11px;font-size:12.5px;
  border:1px solid var(--line);border-radius:7px;background:#fff;
  font-family:inherit;color:var(--t1);cursor:text}
.combo .cb-inp:focus{outline:0;border-color:#9dc4f7;box-shadow:0 0 0 3px var(--primary-50)}
.combo .cb-inp::placeholder{color:var(--t3)}
.combo::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--t3);font-size:11px;line-height:1}
/* ⚠️ 弹层必须**默认收起**：早期只靠 JS 加 .hide 来控制，
   而初始化时从没调用过 show(false)，于是页面一加载列表就是展开的
   （用户反馈「默认所有班级下拉菜单不要展开」）。
   这里把"收起"写进 CSS 默认值，JS 未跑起来也不会再出现展开态； */
.combo .cb-pop{display:none;position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  max-height:272px;overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--sh-2);padding:4px}
.combo .cb-pop:not(.hide){display:block}
.combo .cb-opt{padding:7px 10px;font-size:12.5px;border-radius:6px;cursor:pointer;
  color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo .cb-opt:hover,.combo .cb-opt.cur{background:var(--primary-50);color:var(--primary-600)}
/* 同理：无匹配提示也默认不显示，由 filter() 决定 */
.combo .cb-empty{padding:10px;font-size:12px;color:var(--t3);text-align:center;display:none}
.combo .cb-empty:not(.hide){display:block}

/* ============================ 表格 ============================ */
.tblwrap{overflow-x:auto}
.tbl th{font-size:12px;font-weight:500;color:var(--t2);background:#f7f9fc;text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:12.5px;vertical-align:middle}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:#f8fbff}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{font-variant-numeric:tabular-nums;text-align:right}
.tbl .mono{font-family:var(--mono);font-size:12px;letter-spacing:-.2px}
.tbl .strong{font-weight:500;color:var(--t1)}
.tbl .link{color:var(--primary);cursor:pointer}
.tbl .link:hover{text-decoration:underline}
.tbl .muted{color:var(--t3);font-size:12px}
/* ==================== 操作列：统一按钮化 ====================
   用户要求「所有操作都要用 BUTTON」。
   这里**只改样式不改结构**：14 个列表/详情页的操作项都是 <a>，
   有的是 href="javascript:;" 调 JS，有的是真链接（课程编排/学员）。
   逐个换成 <button> 既无实益又容易踩到表单默认 type=submit 的坑，
   所以统一在这里把它们渲染成和 .btn.btn-s 一致的小按钮。 */
.tbl .ops{display:flex;gap:7px;white-space:nowrap;align-items:center;flex-wrap:wrap}
.tbl .ops a{display:inline-flex;align-items:center;height:27px;padding:0 10px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--t2);font-size:12px;cursor:pointer;line-height:1;
  transition:border-color .15s,color .15s,background .15s}
.tbl .ops a:hover{border-color:var(--primary-200);color:var(--primary);
  text-decoration:none;background:#fff}
.tbl .ops a.dg,.tbl .ops a.btn-d{color:var(--danger);border-color:var(--danger-line)}
.tbl .ops a.dg:hover{background:var(--danger-bg);color:var(--danger);border-color:#eba8a8}
/* 「时间」按钮：排课是编排里最常改的一项，给一点主色，别淹没在三个灰按钮里 */
.tbl .ops a.time{color:var(--primary);border-color:var(--primary-200)}
.tbl .ops a.time:hover{background:var(--primary-50);color:var(--primary)}
/* 置灰的不可用操作（如已通过的报名不能删）也保持按钮外形 */
.tbl .ops a.off,.tbl .ops span.off{display:inline-flex;align-items:center;height:27px;
  padding:0 10px;border:1px dashed var(--line);border-radius:6px;
  color:var(--t3);font-size:12px;cursor:not-allowed;background:#fafbfd}
.tbl .ck{width:14px;height:14px;accent-color:var(--primary);cursor:pointer}
.tbl.cmp th,.tbl.cmp td{text-align:center}
.tbl.cmp th:first-child,.tbl.cmp td:first-child{text-align:left}
.tbl .sub2{font-size:11.5px;color:var(--t3);margin-top:2px}
/* 固定列宽表格：列宽严格按各 th 上的宽度分配（其余列不再抢空间），
   超长内容省略号截断而**不换行**。容器变窄时 .tblwrap 横向滚动。
   用法：<table class="tbl tbl-fixed">，各 th 写死 width。 */
.tbl-fixed{table-layout:fixed;min-width:1124px}
.tbl-fixed th,.tbl-fixed td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 单元格内嵌块级元素需要各自省略（td 的 ellipsis 管不到嵌套块） */
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending{border-bottom:1px dashed var(--danger);color:var(--danger)}

/* ============================ 标签 ============================ */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:1px 8px;border-radius:20px;
  border:1px solid transparent;line-height:18px;white-space:nowrap}
.tag-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.tag-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.tag-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.tag-info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.tag-mute{background:#f2f5f9;color:var(--t2);border-color:var(--line)}
/* .tag 也当链接用（工作台"待审超 3 日"那种可点的徽标），去掉 a 默认下划线 */
a.tag{text-decoration:none}
.tag-violet{background:var(--violet-bg);color:var(--violet);border-color:#ddd0f7}
.tag-teal{background:var(--teal-bg);color:var(--teal);border-color:#b8e6e9}
.tag-brand{background:var(--brand-bg);color:var(--brand);border-color:#f0dcb4}
.tag i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px}

/* ============================ 筛选栏 ============================ */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;
  border-bottom:1px solid var(--line-2);background:#fcfdff}
.fi{display:flex;align-items:center;gap:6px}
.fi .lb{font-size:12.5px;color:var(--t2);white-space:nowrap}
.inp,.sel{height:32px;padding:0 11px;border:1px solid var(--line);border-radius:7px;background:#fff;
  font-size:12.5px;transition:.15s;min-width:0}
.inp:focus,.sel:focus{border-color:var(--primary-200);box-shadow:0 0 0 3px var(--primary-50)}
.inp::placeholder{color:var(--t4)}
.sel{cursor:pointer;padding-right:26px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a9aad' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.filters .sp{margin-left:auto;display:flex;gap:9px;align-items:center}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;background:#fff;overflow:hidden}
.seg button{height:30px;padding:0 13px;font-size:12.5px;color:var(--t2);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--primary-50);color:var(--primary-600);font-weight:500}
.seg.sm button{height:26px;padding:0 10px;font-size:12px}

/* ============================ Tab ============================ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 16px;background:#fff;
  overflow-x:auto}
.tabs .tab{padding:11px 15px;font-size:13px;color:var(--t2);border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;transition:.15s;display:flex;align-items:center;gap:6px}
.tabs .tab:hover{color:var(--primary-600)}
.tabs .tab.on{color:var(--primary-600);border-bottom-color:var(--primary);font-weight:500}
.tabs .tab .n{font-size:11px;padding:0 6px;border-radius:20px;background:#f0f4f9;color:var(--t2);line-height:16px}
.tabs .tab.on .n{background:var(--primary-100);color:var(--primary-600)}
.tabs .tab .n.red{background:var(--danger-bg);color:var(--danger)}

/* ============================ 栅格 ============================ */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.g-3-2{grid-template-columns:3fr 2fr}
.g-5-3{grid-template-columns:5fr 3fr}

/* ============================ 分页 ============================ */
.pager{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--t3)}
.pager .r{margin-left:auto;display:flex;align-items:center;gap:5px}
.pager .pg{min-width:29px;height:29px;padding:0 8px;border:1px solid var(--line);border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--t2);background:#fff;font-size:12.5px}
.pager .pg.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500}
.pager .pg:hover:not(.on){border-color:var(--primary-200);color:var(--primary)}

/* ============================ 进度 / 条 ============================ */
.pg-line{height:6px;border-radius:4px;background:#eef2f8;overflow:hidden;min-width:60px}
.pg-line i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3aa0ff,#1455b6)}
.pg-line.ok i{background:linear-gradient(90deg,#2fc98d,#0f9d63)}
.pg-line.warn i{background:linear-gradient(90deg,#f0b445,#c47d09)}
.pg-line.danger i{background:linear-gradient(90deg,#f37373,#d63f3f)}

.barlist .bl{display:grid;grid-template-columns:88px 1fr 62px;align-items:center;gap:10px;
  margin-bottom:11px;font-size:12.5px}
.barlist .bl .nm{color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barlist .bl .vv{text-align:right;color:var(--t1);font-variant-numeric:tabular-nums;font-weight:500}
.barlist.tight .bl{margin-bottom:9px}

.cols{display:flex;align-items:flex-end;gap:14px;height:180px;padding-top:20px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:8px}
.col .bar{width:100%;max-width:42px;border-radius:4px 4px 0 0;position:relative;
  background:linear-gradient(180deg,#4a9bf0,#1a6ce0)}
.col .bar::after{content:"";position:absolute;inset:0;border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 60%)}
.col .bar span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:11px;
  color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.col .cap{font-size:11.5px;color:var(--t3);white-space:nowrap}
.col.g .bar{background:linear-gradient(180deg,#cfe0f5,#b7cfea)}

/* ============================ 图表容器 ============================ */
.chart{width:100%;height:190px}
.chart.tall{height:230px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--t2);align-items:center;flex-wrap:wrap}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.legend .ln{width:14px;height:2px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.donutwrap{display:flex;align-items:center;gap:22px}
.donut{position:relative;flex:0 0 132px}
.donut .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px}
.donut .ctr b{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums}
.donut .ctr span{font-size:11px;color:var(--t3)}

/* ============================ 描述列表 ============================ */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:12.5px}
.dl dt{color:var(--t3);white-space:nowrap}
.dl dd{color:var(--t1);min-width:0}
.dl.c2{grid-template-columns:auto 1fr auto 1fr}
.panelbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panelbox .ph{padding:9px 14px;background:#f7f9fc;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:8px}
.panelbox .pb{padding:13px 14px}

/* ============================ 表单 ============================ */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 20px}
.form.c3{grid-template-columns:repeat(3,1fr)}
.form .fi2{display:flex;flex-direction:column;gap:6px}
.form .fi2.full{grid-column:1/-1}
.form label{font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:5px}
.form label .req{color:var(--danger)}
.form .inp,.form .sel{height:34px}
.form .inp.full{width:100%}
.form .tip{font-size:11.5px;color:var(--t3)}
.form .tip.err{color:var(--danger)}
.inp.bad{border-color:#e8a8a8;background:#fffafa}
.dupwarn{border:1px solid var(--danger-line);background:var(--danger-bg);border-radius:8px;
  padding:10px 13px;font-size:12.5px;color:#9c2b2b;display:flex;gap:9px;align-items:flex-start;
  margin-top:10px}
.dupwarn svg{flex:0 0 15px;margin-top:2px}
.dupwarn b{color:var(--danger)}

/* ============================ 步骤条 ============================ */
.steps{display:flex;align-items:center;gap:0}
.step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t3);flex:1;min-width:0}
.step .no{width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}
.step .tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step .lnd{flex:1;height:1.5px;background:var(--line);margin:0 12px;min-width:16px}
.step.done .no{background:var(--ok);border-color:var(--ok);color:#fff}
.step.done{color:var(--t2)}
.step.done .lnd{background:var(--ok)}
.step.on .no{background:var(--primary);border-color:var(--primary);color:#fff;
  box-shadow:0 0 0 4px var(--primary-50)}
.step.on{color:var(--primary-600);font-weight:500}

/* ============================ 时间轴 ============================ */
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:1.5px;background:var(--line)}
.tl .ti{position:relative;padding-bottom:16px}
.tl .ti:last-child{padding-bottom:0}
.tl .ti::before{content:"";position:absolute;left:-18px;top:5px;width:8px;height:8px;border-radius:50%;
  background:#fff;border:2px solid var(--line)}
.tl .ti.ok::before{border-color:var(--ok)}
.tl .ti.on::before{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.tl .ti.warn::before{border-color:var(--warn)}
.tl .ti .th{font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:8px}
.tl .ti .td{font-size:11.5px;color:var(--t3);margin-top:2px}
.tl .ti .tc{font-size:12.5px;color:var(--t2);margin-top:5px;background:#f8fafd;border-radius:7px;
  padding:8px 11px}

/* ============================ 提示条 ============================ */
.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:9px;
  font-size:12.5px;border:1px solid;margin-bottom:14px}
.alert svg{flex:0 0 15px;margin-top:2px}
.alert .t{font-weight:500;margin-bottom:2px}
.alert .r{margin-left:auto;white-space:nowrap}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-line);color:#8a5a06}
.alert-info{background:var(--info-bg);border-color:var(--info-line);color:#12488f}
.alert-danger{background:var(--danger-bg);border-color:var(--danger-line);color:#9c2b2b}
.alert-ok{background:var(--ok-bg);border-color:var(--ok-line);color:#0b6f46}

/* ============================ 空状态 ============================ */
.empty{padding:46px 20px;text-align:center;color:var(--t3)}
.empty .ic{width:48px;height:48px;margin:0 auto 12px;border-radius:12px;background:#f4f7fb;
  display:flex;align-items:center;justify-content:center;color:var(--t4)}
.empty .t{font-size:13px;color:var(--t2);margin-bottom:4px}
.empty .d{font-size:12px}

/* ============================ 流水 ============================ */
.feed{font-size:12.5px}
.feed .fd{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line-2)}
.feed .fd:last-child{border-bottom:0}
.feed .tm{color:var(--t3);font-variant-numeric:tabular-nums;flex:0 0 42px}
.feed .nm{color:var(--t1);font-weight:500;flex:0 0 62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .gc{color:var(--t2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .io{flex:0 0 auto}

/* ============================ 热力小格 ============================ */
.heat{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.heat .hc{border-radius:7px;padding:9px 8px;text-align:center;background:#f2f6fb;border:1px solid var(--line-2)}
.heat .hc .n{font-size:11.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat .hc .v{font-size:14px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.heat .hc.h1{background:#eaf3fe;border-color:#d3e5fb}
.heat .hc.h2{background:#d6e8fb;border-color:#b9d5f6}
.heat .hc.h3{background:#bcd7f6;border-color:#9dc2ef}
.heat .hc.h4{background:#9cc0ee;border-color:#7fabe6}
.heat .hc.h4 .n,.heat .hc.h3 .n{color:#2b4f7d}
.heat .hc.h5{background:#6da4e6;border-color:#4b8adb}
.heat .hc.h5 .n,.heat .hc.h5 .v{color:#fff}

/* ============================ 工具条 ============================ */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .r{margin-left:auto;display:flex;align-items:center;gap:9px}

/* ============================ 设计规范页 ============================ */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sw{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.sw .c{height:60px}
.sw .m{padding:9px 11px}
.sw .m b{font-size:12.5px;display:block}
.sw .m span{font-size:11px;color:var(--t3);font-family:var(--mono)}

.spec{display:grid;gap:12px}
.spec .it{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line-2)}
.spec .it:last-child{border:0}
.spec .k{flex:0 0 150px;font-size:12px;color:var(--t3);font-family:var(--mono)}
.spec .v{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--t2)}

.pgcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px;transition:.18s;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.pgcard:hover{border-color:var(--primary-200);box-shadow:var(--sh-2);transform:translateY(-2px)}
.pgcard .no{font-size:11px;font-family:var(--mono);color:var(--t4)}
.pgcard .nm{font-size:14px;font-weight:600;margin:5px 0 4px}
.pgcard .ds{font-size:12px;color:var(--t3);line-height:1.55}
.pgcard .tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.pgcard .flow{position:absolute;right:-8px;top:-8px;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,108,224,.08),transparent 70%)}

/* ============================ 人员主档合并视图 ============================ */
.merge{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.merge .face{width:60px;height:60px;flex:0 0 60px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:22px;color:#fff;font-weight:500;
  background:linear-gradient(140deg,#3d9bff,#12539f)}
.merge .who{flex:1;min-width:220px}
.merge .who .nm{font-size:17px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.merge .who .meta{font-size:12.5px;color:var(--t3);margin-top:5px;display:flex;gap:14px;flex-wrap:wrap}
.merge .who .meta b{color:var(--t2);font-weight:500}
.merge .score{display:flex;gap:22px;flex-wrap:wrap}
.merge .score .s{text-align:center;min-width:64px}
.merge .score .s .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--primary-600)}
.merge .score .s .k{font-size:11.5px;color:var(--t3);margin-top:1px}

/* ============================ 进度环 ============================ */
.ring{--p:0;--sz:64px;--bd:7px;width:var(--sz);height:var(--sz);flex:0 0 var(--sz);border-radius:50%;
  position:relative;background:conic-gradient(var(--primary) calc(var(--p)*1%),#e9eff7 0);
  display:flex;align-items:center;justify-content:center}
.ring::before{content:"";position:absolute;inset:var(--bd);border-radius:50%;background:#fff}
.ring b{position:relative;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--t1)}
.ring.ok{background:conic-gradient(var(--ok) calc(var(--p)*1%),#e9eff7 0)}
.ring.warn{background:conic-gradient(var(--warn) calc(var(--p)*1%),#e9eff7 0)}

/* ============================ 附件行 ============================ */
.attach{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fbfcfe;font-size:12.5px}
.attach + .attach{margin-top:8px}
.attach .fi{width:28px;height:28px;flex:0 0 28px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:600;color:#fff;letter-spacing:.3px}
.attach .fi.doc{background:#2b579a}.attach .fi.pdf{background:#c0392b}.attach .fi.xls{background:#1d6f42}
.attach .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach .sz{color:var(--t3);font-size:11.5px;flex:0 0 auto}
.attach .op{color:var(--primary);flex:0 0 auto;cursor:pointer}
.miss{border-style:dashed;border-color:var(--danger-line);background:var(--danger-bg)}

/* ============================ 移动端预览 ============================ */
.phone{width:300px;border:8px solid #16283d;border-radius:26px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-3)}
.phone .pbar{height:26px;background:#16283d;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:10.5px}
.phone .pbody{padding:12px;background:#f4f7fb;height:520px;overflow-y:auto}
.phone .ph1{background:linear-gradient(140deg,#2a7dea,#1455b6);color:#fff;border-radius:10px;
  padding:14px;margin-bottom:12px}
.phone .ph1 b{font-size:15px;display:block}
.phone .ph1 span{font-size:11.5px;opacity:.85}
.phone .pcard{background:#fff;border-radius:10px;padding:12px;margin-bottom:10px;box-shadow:var(--sh-1)}
.phone .pcard .t{font-size:13px;font-weight:500;margin-bottom:8px}
.phone .prow{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;
  border-bottom:1px dashed var(--line-2)}
.phone .prow:last-child{border:0}
.phone .prow .k{color:var(--t3)}
.phone .pbtn{display:block;width:100%;height:36px;border-radius:8px;background:var(--primary);
  color:#fff;font-size:13px;text-align:center;line-height:36px;margin-top:4px}

/* ============================ SVG 尺寸约束 ============================ */
.search svg{width:13px;height:13px;flex:0 0 13px;color:var(--t3)}
.icobtn svg{width:17px;height:17px}
.alert svg,.dupwarn svg{width:15px;height:15px;flex:0 0 15px}
.btn svg,.btn-t svg{width:13px;height:13px}
.card-h svg,.phead svg{width:14px;height:14px}
.tbl svg{width:13px;height:13px}
.empty .ic svg{width:22px;height:22px}
.attach svg{width:14px;height:14px}

/* ============================ 工具类 ============================ */
.mt0{margin-top:0}.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb14{margin-bottom:14px}
.tc{text-align:center}.tr{text-align:right}
.fx{display:flex}.fc{align-items:center}.fb{justify-content:space-between}
.fw{flex-wrap:wrap}
.gap6{gap:6px}.gap10{gap:10px}.gap14{gap:14px}
.f1{flex:1}.nowrap{white-space:nowrap}
.mono{font-family:var(--mono)}
.t2{color:var(--t2)}.t3{color:var(--t3)}
.fs11{font-size:11.5px}.fs12{font-size:12.5px}.fs14{font-size:14px}.fs17{font-size:17px}
.b5{font-weight:500}.b6{font-weight:600}
.hide{display:none!important}