/* =============================================================
   PFA 设计系统
   1. 设计令牌  2. 基础  3. 布局  4. 侧栏  5. 顶栏
   6. 卡片  7. 按钮  8. 表单  9. 表格  10. 标签
   11. 提示条  12. 弹窗  13. Toast  14. 空态与骨架
   15. 数据可视化  16. 工具类  17. 响应式  18. 打印
   ============================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 主色阶 */
  --brand-50:#EEF4FC;  --brand-100:#D6E4F7; --brand-200:#ADC9EE;
  --brand-400:#4E86CE; --brand-600:#1E5AA8; --brand-800:#153F76; --brand-900:#0F2A4A;
  /* 中性阶 */
  --n-25:#FBFCFD; --n-50:#F5F7FA; --n-100:#EDF1F5; --n-200:#E2E8F0;
  --n-300:#CBD5E1; --n-400:#94A3B8; --n-500:#64748B; --n-600:#475569; --n-900:#111C2E;
  /* 语义色 */
  --ok-50:#E7F6F0; --ok-600:#1A9068; --ok-800:#13654B;
  --warn-50:#FDF4E5; --warn-600:#C07A16; --warn-800:#7C4E0C;
  --danger-50:#FDECEC; --danger-600:#D14343; --danger-800:#8E2B2B;
  --info-50:#EEF4FC; --info-600:#1E5AA8; --info-800:#153F76;
  --violet-50:#F0EEFC; --violet-600:#5A4AB5;

  /* 语义别名 */
  --bg:var(--n-50);
  --surface:#FFFFFF;
  --surface-2:var(--n-25);
  --line:var(--n-200);
  --line-strong:var(--n-300);
  --text:var(--n-900);
  --text-2:var(--n-600);
  --text-3:var(--n-400);
  --brand:var(--brand-600);

  /* 间距（4 的倍数） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  /* 圆角 */
  --r-sm:6px; --r-md:9px; --r-lg:13px; --r-xl:18px;
  /* 阴影 */
  --sh-sm:0 1px 2px rgba(17,28,46,.05);
  --sh-md:0 4px 14px rgba(17,28,46,.09);
  --sh-lg:0 14px 44px rgba(17,28,46,.16);
  /* 字号 */
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13.5px; --fs-md:15px; --fs-lg:19px; --fs-xl:26px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
  --nav-w:232px; --top-h:60px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. 基础 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-weight:600;line-height:1.4}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:inherit;font-size:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:5px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--n-400);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. 布局 ---------- */
.shell{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:var(--s6) var(--s8) 72px;max-width:1360px;width:100%}

/* ---------- 4. 侧栏 ---------- */
.side{width:var(--nav-w);flex:0 0 var(--nav-w);background:var(--brand-900);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30}
.side-brand{padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid rgba(255,255,255,.07)}
.side-brand .t{font-size:var(--fs-md);font-weight:600;color:#fff;letter-spacing:.2px;display:flex;align-items:center;gap:var(--s2)}
.side-brand .t svg{stroke:var(--brand-200)}
.side-brand .s{font-size:10.5px;color:#6B87A8;letter-spacing:1.2px;margin-top:3px}
.side-nav{padding:var(--s3) var(--s2);flex:1;overflow-y:auto}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)}
.nav-grp{font-size:10.5px;color:#5C7796;letter-spacing:1.3px;padding:var(--s4) var(--s3) var(--s2);font-weight:500}
.nav-it{display:flex;align-items:center;gap:10px;padding:9px var(--s3);border-radius:var(--r-md);
  color:#B4C7DB;font-size:var(--fs-base);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);
  margin-bottom:1px;user-select:none;border:none;background:none;width:100%;text-align:left}
.nav-it:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-it.on{background:var(--brand-600);color:#fff;font-weight:500}
.nav-it .n{margin-left:auto;font-size:10.5px;background:rgba(255,255,255,.12);
  padding:1px 7px;border-radius:9px;font-variant-numeric:tabular-nums}
.nav-it.on .n{background:rgba(255,255,255,.24)}
.nav-it .n.hot{background:var(--warn-600);color:#fff}
.side-foot{padding:var(--s3) var(--s4);border-top:1px solid rgba(255,255,255,.07);
  font-size:10.5px;color:#63798F;line-height:1.8}
.side-foot b{color:#8FA8C0;font-weight:500}

/* ---------- 5. 顶栏 ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:var(--s3) var(--s8);
  min-height:var(--top-h);display:flex;align-items:center;gap:var(--s4);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.top-title{min-width:0}
.top-title h1{font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-title p{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ctx-pick{display:flex;align-items:center;gap:var(--s2);background:var(--n-50);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:3px 3px 3px var(--s3)}
.ctx-pick > span{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;display:flex;align-items:center;gap:5px}
.ctx-pick select{border:none;background:transparent;padding:5px var(--s2);font-size:var(--fs-sm);
  color:var(--text);max-width:190px;cursor:pointer;font-weight:500}
.ctx-pick select:focus{outline:none}
.dot-stat{width:7px;height:7px;border-radius:50%;background:var(--ok-600);flex:0 0 7px}
.dot-stat.off{background:var(--warn-600)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);padding:4px 10px;
  border-radius:20px;background:var(--info-50);color:var(--info-800);font-weight:500;white-space:nowrap}
.chip.g{background:var(--ok-50);color:var(--ok-800)}
.chip.a{background:var(--warn-50);color:var(--warn-800)}
.chip.r{background:var(--danger-50);color:var(--danger-800)}

/* ---------- 6. 卡片 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5) var(--s5);margin-bottom:var(--s4);box-shadow:var(--sh-sm)}
.card.flush{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.card-h h3{font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:var(--s2)}
.card-h h3 svg{stroke:var(--text-3)}
.card-h .hint{font-size:var(--fs-xs);color:var(--text-3);margin-left:auto}
.grid{display:grid;gap:var(--s4)}
.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))}
.hr{height:1px;background:var(--line);margin:var(--s4) 0}

/* 统计卡 */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.stat .k{font-size:var(--fs-xs);color:var(--text-2);display:flex;align-items:center;gap:5px}
.stat .k svg{stroke:var(--text-3)}
.stat .v{font-size:var(--fs-xl);font-weight:600;margin-top:var(--s2);letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;line-height:1.2}
.stat .v small{font-size:var(--fs-sm);font-weight:400;color:var(--text-3);margin-left:3px}
.stat .n{font-size:var(--fs-xs);color:var(--text-3);margin-top:5px}
.stat.danger .v{color:var(--danger-600)}
.stat.warn .v{color:var(--warn-600)}
.stat.ok .v{color:var(--ok-600)}

/* 上下文卡 */
.ctx{display:flex;gap:var(--s8);flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.ctx > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ctx .lbl{font-size:var(--fs-xs);color:var(--text-3);display:flex;align-items:center;gap:4px}
.ctx b{font-weight:600;font-size:var(--fs-base)}

/* ---------- 7. 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  padding:7px var(--s4);border-radius:var(--r-md);font-size:var(--fs-base);
  cursor:pointer;transition:all .15s var(--ease);white-space:nowrap;font-weight:400}
.btn:hover{border-color:var(--brand-400);color:var(--brand);background:var(--brand-50)}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover{border-color:var(--line-strong);color:var(--text);background:var(--surface)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.btn.danger{border-color:#E8BEBE;color:var(--danger-600)}
.btn.danger:hover{background:var(--danger-50);border-color:var(--danger-600)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--n-100);color:var(--text)}
.btn.sm{padding:5px 10px;font-size:var(--fs-sm);gap:4px}
.btn.sm svg{width:14px;height:14px;flex:0 0 14px}
.btn.icon{padding:6px;border-color:transparent}
.btn.icon:hover{background:var(--n-100)}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* ---------- 8. 表单 ---------- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label{font-size:var(--fs-xs);color:var(--text-2);display:flex;align-items:center;gap:4px}
.field > label .req{color:var(--danger-600)}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:var(--r-md);font-size:var(--fs-base);background:var(--surface);color:var(--text);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--n-400)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-50)}
.field textarea{resize:vertical;min-height:64px;line-height:1.7}
.field .err{font-size:var(--fs-xs);color:var(--danger-600);display:none;align-items:center;gap:4px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger-600);background:#FFFBFB}
.field.bad .err{display:flex}
.field .tip{font-size:var(--fs-xs);color:var(--text-3)}
.frm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.frm.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp2{grid-column:span 2}.sp3{grid-column:span 3}
.checks{display:flex;gap:var(--s4);flex-wrap:wrap}
.checks label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);cursor:pointer;
  padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);transition:all .15s}
.checks label:hover{border-color:var(--brand-400)}
.checks input{width:14px;height:14px;accent-color:var(--brand);cursor:pointer}
.checks label:has(input:checked){background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-800)}

/* ---------- 9. 表格 ---------- */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
table.t th{text-align:left;font-weight:500;font-size:var(--fs-xs);color:var(--text-2);
  padding:10px var(--s4);background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;z-index:1}
table.t td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--n-100);vertical-align:top}
table.t tbody tr:last-child td{border-bottom:none}
table.t tbody tr{transition:background .12s}
table.t tbody tr:hover{background:var(--brand-50)}
table.t tbody tr.cur{background:#F3F8FF}
table.t tbody tr.cur:hover{background:#EBF3FF}
table.t td.num{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:var(--fs-sm)}
.mono{font-family:var(--mono);font-size:var(--fs-sm)}
.cell-main{font-weight:500}
.cell-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}

/* ---------- 10. 标签 ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);padding:2px 8px;
  border-radius:var(--r-sm);background:var(--n-100);color:var(--text-2);white-space:nowrap;line-height:1.7}
.tag svg{width:11px;height:11px;flex:0 0 11px;stroke-width:2}
.tag.ok{background:var(--ok-50);color:var(--ok-800)}
.tag.no{background:var(--danger-50);color:var(--danger-800)}
.tag.w{background:var(--warn-50);color:var(--warn-800)}
.tag.b{background:var(--info-50);color:var(--info-800)}
.tag.v{background:var(--violet-50);color:var(--violet-600)}
.docno{font-family:var(--mono);font-size:var(--fs-xs);color:var(--info-800);
  background:var(--info-50);padding:2px 7px;border-radius:var(--r-sm);white-space:nowrap}
.pill{display:inline-flex;align-items:center;font-size:var(--fs-xs);padding:1px 7px;border-radius:9px;
  background:rgba(255,255,255,.12)}

/* ---------- 11. 提示条 ---------- */
.notice{border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--fs-base);
  line-height:1.7;display:flex;gap:10px;margin-bottom:var(--s4);align-items:flex-start}
.notice svg{flex:0 0 17px;width:17px;height:17px;margin-top:2px;stroke-width:1.8}
.notice.i{background:var(--info-50);color:var(--info-800)}
.notice.w{background:var(--warn-50);color:var(--warn-800)}
.notice.n{background:var(--danger-50);color:var(--danger-800)}
.notice.g{background:var(--ok-50);color:var(--ok-800)}
.notice b{font-weight:600}
.diff{border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s2) var(--s3);font-size:var(--fs-sm);
  border-left:3px solid var(--danger-600);background:#FFF6F6}
.diff.soft{border-left-color:var(--warn-600);background:#FFFCF5}

/* ---------- 12. 弹窗 ---------- */
.mask{position:fixed;inset:0;background:rgba(15,42,74,.42);backdrop-filter:blur(2px);
  z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:5vh var(--s4);
  overflow-y:auto;animation:fade .16s var(--ease)}
.modal{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  width:100%;max-width:640px;animation:pop .2s var(--ease);margin:auto 0}
.modal.wide{max-width:860px}
.modal.narrow{max-width:420px}
.modal-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line)}
.modal-h h3{font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:var(--s2)}
.modal-h h3 svg{stroke:var(--text-3)}
.modal-x{margin-left:auto}
.modal-b{padding:var(--s5);max-height:68vh;overflow-y:auto}
.modal-f{padding:var(--s4) var(--s5);border-top:1px solid var(--line);display:flex;gap:var(--s2);justify-content:flex-end}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- 13. Toast ---------- */
.toasts{position:fixed;right:var(--s5);bottom:var(--s5);z-index:80;display:flex;
  flex-direction:column;gap:var(--s2);align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;background:var(--brand-900);color:#fff;padding:10px var(--s4);
  border-radius:var(--r-md);font-size:var(--fs-sm);max-width:400px;box-shadow:var(--sh-md);
  display:flex;align-items:flex-start;gap:var(--s2);animation:slide .2s var(--ease)}
.toast svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px}
.toast.ok{background:var(--ok-800)}
.toast.no{background:var(--danger-800)}
.toast.w{background:var(--warn-800)}
.toast .x{margin-left:var(--s2);opacity:.6;cursor:pointer;background:none;border:none;color:inherit;padding:0}
.toast .x:hover{opacity:1}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ---------- 14. 空态与骨架 ---------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s10) var(--s5);color:var(--text-3);text-align:center;gap:var(--s3)}
.empty svg{width:52px;height:52px;stroke:var(--n-300);stroke-width:1.2}
.empty .t{font-size:var(--fs-base);color:var(--text-2);font-weight:500}
.empty .s{font-size:var(--fs-sm);max-width:320px;line-height:1.7}
.sk{background:linear-gradient(90deg,var(--n-100) 25%,var(--n-50) 37%,var(--n-100) 63%);
  background-size:400% 100%;animation:shim 1.3s ease-in-out infinite;border-radius:var(--r-sm)}
.sk.line{height:11px;margin-bottom:var(--s3)}
.sk.line.w60{width:60%}.sk.line.w40{width:40%}.sk.line.w80{width:80%}
.sk.block{height:92px;margin-bottom:var(--s3)}
@keyframes shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.3);
  border-top-color:currentColor;border-radius:50%;animation:sp .68s linear infinite;flex:0 0 13px}
.spin.dk{border-color:var(--line-strong);border-top-color:var(--brand)}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 15. 数据可视化 ---------- */
.gauge{position:relative;width:78px;height:78px;flex:0 0 78px}
.gauge svg{transform:rotate(-90deg)}
.gauge .bg{fill:none;stroke:var(--n-100);stroke-width:8}
.gauge .fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.gauge .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .txt b{font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.gauge .txt small{font-size:10px;color:var(--text-3);margin-top:1px}
.meter{display:flex;flex-direction:column;gap:5px}
.meter .lbl{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-2)}
.meter .lbl b{font-variant-numeric:tabular-nums;color:var(--text)}
.meter .track{height:8px;border-radius:4px;background:var(--n-100);overflow:hidden;position:relative}
.meter .fill{height:100%;border-radius:4px;transition:width .5s var(--ease)}
.meter .mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--n-400);opacity:.75}
.meter .mark::after{content:attr(data-l);position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:9.5px;color:var(--text-3);white-space:nowrap}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

/* ---------- 15b. 申报任务看板与预警 ---------- */
.board{display:flex;gap:var(--s3);overflow-x:auto;padding-bottom:var(--s4);align-items:flex-start}
.bcol{flex:0 0 236px;background:var(--n-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3)}
.bcol-h{display:flex;align-items:center;gap:var(--s2);padding:2px var(--s1) var(--s3);font-size:var(--fs-sm)}
.bcol-h b{font-weight:600}
.bcol-h em{font-style:normal;font-size:11px;color:var(--text-3);margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0 7px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s2);cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.tcard:hover{border-color:var(--brand-400);box-shadow:var(--sh-sm)}
.tcard:last-child{margin-bottom:0}
.tcard .t1{font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.tcard .t2{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px}
.tcard .t3{display:flex;align-items:center;gap:6px;margin-top:var(--s2);flex-wrap:wrap}
.tcard .t4{margin-top:var(--s3)}
.alert-row{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);border-bottom:1px solid var(--n-100);border-left:3px solid transparent}
.alert-row:last-child{border-bottom:none}
.alert-row.high{border-left-color:var(--danger-600);background:#FFFBFB}
.alert-row.mid{border-left-color:var(--warn-600);background:#FFFDF8}
.chk{display:flex;align-items:flex-start;gap:var(--s3);padding:9px 0;border-bottom:1px solid var(--n-100)}
.chk:last-child{border-bottom:none}
.chk input[type=checkbox]{width:15px;height:15px;margin-top:3px;accent-color:var(--brand);cursor:pointer;flex:0 0 15px}
.chk .nm{flex:1;min-width:0;font-size:var(--fs-sm)}
.chk .nm small{display:block;color:var(--text-3);font-size:var(--fs-xs);margin-top:2px}
.chk.done .nm{color:var(--text-3);text-decoration:line-through}
.chk.od .nm{color:var(--danger-600)}
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--n-200)}
.tl-i{position:relative;padding:var(--s2) 0;font-size:var(--fs-sm)}
.tl-i::before{content:"";position:absolute;left:-19px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--brand-400);border:1.5px solid var(--surface)}

/* ---------- 16. 工具类 ---------- */
.row{display:flex;align-items:center;gap:var(--s2)}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.mut{color:var(--text-3)}
.sm{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}
.mb2{margin-bottom:var(--s2)}.mb3{margin-bottom:var(--s3)}.mb4{margin-bottom:var(--s4)}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}
.search{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:6px 10px;background:var(--surface);min-width:210px;transition:all .15s}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.search svg{stroke:var(--text-3);flex:0 0 15px;width:15px;height:15px}
.search input{border:none;outline:none;flex:1;font-size:var(--fs-base);background:transparent;min-width:0}
.select-mini{border:1px solid var(--line-strong);border-radius:var(--r-md);padding:6px 9px;
  font-size:var(--fs-sm);background:var(--surface);color:var(--text);cursor:pointer}
.select-mini:focus{outline:none;border-color:var(--brand)}
.toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.toolbar .spacer{margin-left:auto}
.srched{background:var(--warn-50);border-radius:3px;padding:0 2px}

/* ---------- 17. 响应式 ---------- */
@media(max-width:1240px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1080px){
  .side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s var(--ease);
    box-shadow:var(--sh-lg)}
  .side.open{transform:none}
  .content{padding:var(--s4) var(--s5) 64px}
  .top{padding:var(--s3) var(--s5)}
  .g3{grid-template-columns:1fr}
  .frm{grid-template-columns:1fr}
  .sp2,.sp3{grid-column:span 1}
  .burger{display:inline-flex!important}
  .scrim{position:fixed;inset:0;background:rgba(15,42,74,.4);z-index:29;animation:fade .16s}
}
@media(max-width:760px){
  .g4,.g2{grid-template-columns:1fr}
  .top-title p{display:none}
  .ctx{gap:var(--s4)}
  .ctx-pick select{max-width:120px}
  .toasts{left:var(--s4);right:var(--s4);bottom:var(--s4);align-items:stretch}
  .toast{max-width:none}
}
.burger{display:none;align-items:center;justify-content:center;padding:6px;border:1px solid var(--line-strong);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.mob-only{display:none}
@media(max-width:1080px){.mob-only{display:inline-flex}}

/* ---------- 18. 打印 ---------- */
@media print{
  .side,.top,.toasts,.toolbar,.no-print{display:none!important}
  body{background:#fff}
  .content{padding:0;max-width:none}
  .card{border:none;box-shadow:none;padding:0;margin:0 0 var(--s4)}
  .card.flush{border:none}
  .mask{position:static;background:none;padding:0}
  .modal{box-shadow:none;max-width:none}
}