/* ============================================================
   组件库 —— 对齐 Preadmin / Kanakku 视觉语言
   ============================================================ */

/* ───────── 卡片 ───────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card--hover:hover{box-shadow:var(--sh-2);border-color:var(--line-strong);}
.card--flush{overflow:visible;}
.card__head{
  display:flex;align-items:center;justify-content:space-between;gap: 12px;
  padding: 16px 20px;
  border-bottom:1px solid var(--line-soft);
  flex:none;
}
.card__title{
  font-size: 16px;font-weight:600;color:var(--ink-900);
  display:flex;align-items:center;gap: 8px;line-height: 1.35;
  flex-wrap:wrap;white-space:nowrap;min-width:0;
}
.card__title .ic{color:var(--ink-400);display:grid;place-items:center;}
.card__title .ic svg{width:16px;height:16px;}
.card__sub{font-size: 13px;color:var(--ink-400);font-weight:400;margin-left:2px;white-space:normal;}
.card__actions{display:flex;align-items:center;gap: 8px;flex:none;}
.card__body{padding: 20px;flex:1;min-height:0;display:flex;flex-direction:column;}
.card__body>*{min-width:0;}
.card__body--tight{padding: 16px;}
.card__body--flush{padding: 0;}
.card__body--center{justify-content:center;}
.card__foot{
  padding: 12px 20px;border-top:1px solid var(--line-soft);
  background:var(--surface-2);flex:none;
  display:flex;align-items:center;justify-content:space-between;gap: 10px;
  font-size: 12px;color:var(--ink-500);
}

/* ───────── 按钮 ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap: 6px;
  height:34px;padding: 0 12px;border-radius: var(--r-md);
  font-size: 13px;font-weight:500;color:var(--ink-700);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-1);
  cursor:pointer;white-space:nowrap;
  transition:.16s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink-900);}
.btn:active{transform:translateY(.5px);}
.btn--primary{
  background:linear-gradient(180deg,#8351FD,#7539FF);
  border-color:#6a2ef0;color:#fff;box-shadow:var(--sh-pri);
}
.btn--primary:hover{background:linear-gradient(180deg,#8B5CFF,#6a2ef0);border-color:#5B21D6;color:#fff;}
.btn--danger{background:linear-gradient(180deg,#F34242,#EF1E1E);border-color:#d93030;color:#fff;box-shadow:0 6px 16px -8px rgba(239,30,30,.6);}
.btn--danger:hover{color:#fff;}
.btn--ok{background:linear-gradient(180deg,#37a465,#27AE60);border-color:#1f8e4d;color:#fff;box-shadow:0 6px 16px -8px rgba(39,174,96,.6);}
.btn--ok:hover{color:#fff;}
.btn--dark{background:var(--secondary);border-color:var(--secondary);color:#fff;}
.btn--dark:hover{background:var(--ink-800);border-color:var(--ink-800);color:#fff;}
.btn--ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-500);}
.btn--ghost:hover{background:var(--ink-100);color:var(--ink-900);}
.btn--soft{background:var(--pri-100);border-color:transparent;color:var(--pri);box-shadow:none;}
.btn--soft:hover{background:var(--pri-200);color:var(--pri);}
.btn--sm{height:28px;padding: 0 10px;font-size: 12px;border-radius: var(--r-sm);}
.btn--sm svg{width:13px;height:13px;}
.btn--lg{height:40px;padding: 0 16px;font-size: 14px;}
.btn--block{width:100%;}
.btn--icon{width:34px;padding: 0;}
.btn--icon.btn--sm{width:28px;}

.btn-group{display:inline-flex;border-radius: var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1);}
.btn-group .btn{border:none;border-radius: 0;box-shadow:none;background:var(--surface);}
.btn-group .btn + .btn{border-left:1px solid var(--line);}
.btn-group .btn.is-on{background:var(--pri-100);color:var(--pri);}

/* ───────── 徽章 / 标签（soft 风格） ───────── */
.bdg{
  display:inline-flex;align-items:center;gap: 4px;
  height:22px;padding: 0 8px;border-radius: var(--r-xs);
  font-size: 12px;font-weight:600;letter-spacing:.01em;
  background:var(--ink-100);color:var(--ink-600);
  border:1px solid transparent;white-space:nowrap;flex:none;
}
.bdg svg{width:11px;height:11px;}
.bdg--blue{background:var(--pri-100);color:var(--pri);}
.bdg--teal{background:var(--teal-100);color:var(--teal);}
.bdg--green{background:var(--ok-100);color:var(--ok);}
.bdg--amber{background:var(--warn-100);color:var(--warn);}
.bdg--red{background:var(--dang-100);color:var(--dang);}
.bdg--violet{background:var(--violet-100);color:var(--violet);}
.bdg--cyan{background:var(--cyan-100);color:var(--cyan);}
.bdg--gray{background:var(--ink-100);color:var(--ink-500);}
.bdg--solid{background:var(--pri);color:#fff;}
.bdg--lg{height:26px;font-size: 12px;padding: 0 12px;border-radius: var(--r-sm);}
.bdg--sm{height:18px;font-size: 11px;padding: 0 6px;border-radius: 4px;}
.bdg--outline{background:transparent;border-color:var(--line);color:var(--ink-500);}

.chip{
  display:inline-flex;align-items:center;gap: 4px;
  height:26px;padding: 0 12px;border-radius: var(--r-full);
  font-size: 12px;color:var(--ink-600);
  background:var(--surface);border:1px solid var(--line);
  cursor:pointer;transition:.15s var(--ease);
}
.chip:hover{border-color:var(--pri-200);color:var(--pri);background:var(--pri-100);}
.chip svg{width:13px;height:13px;flex:none;}
.chip.is-on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:500;}
.chip--static{cursor:default;}
.chip--static:hover{border-color:var(--line);color:var(--ink-600);background:var(--surface);}
.tag{
  display:inline-flex;align-items:center;height:20px;padding: 0 8px;border-radius: var(--r-xs);
  font-size: 11px;font-weight:500;color:var(--ink-500);
  background:var(--ink-050);border:1px solid var(--line);
}
.tag--outline{background:transparent;}

/* ───────── KPI（对标参考模板：圆形色标 + 左下角弧形装饰） ───────── */
.kpi{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius: var(--r-lg);
  padding: 16px 20px 28px;box-shadow:var(--sh-1);
  transition:.2s var(--ease);
  --kpi-accent:var(--pri);
}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-1px);}
.kpi::before{
  content:"";position:absolute;left:0;bottom:0;width:38px;height:22px;
  background:var(--kpi-accent);border-radius: 0 100% 0 0;opacity:.85;z-index:0;
}
.kpi__top{display:flex;align-items:flex-start;justify-content:space-between;gap: 8px;position:relative;z-index:1;}
.kpi__label{font-size: 13px;color:var(--ink-500);font-weight:500;letter-spacing:.005em;}
.kpi__ico{
  width:40px;height:40px;border-radius: 50%;display:grid;place-items:center;flex:none;
  background:var(--kpi-accent);color:#fff;
  box-shadow:0 6px 14px -6px var(--kpi-accent);
}
.kpi__ico svg{width:19px;height:19px;}
.kpi__val{
  font-family:var(--ff-num);font-size: 26px;font-weight:700;color:var(--ink-900);
  letter-spacing:-.02em;line-height: 1.2;margin-top: 10px;position:relative;z-index:1;
  display:flex;align-items:baseline;gap: 4px;
}
.kpi__unit{font-size: 13px;color:var(--ink-400);font-weight:500;font-family:var(--ff);}
.kpi__foot{display:flex;align-items:center;gap: 8px;flex-wrap:wrap;row-gap: 4px;margin-top: 10px;font-size: 12px;color:var(--ink-400);position:relative;z-index:1;}
.kpi__delta{
  display:inline-flex;align-items:center;gap: 4px;height:22px;padding: 0 8px;border-radius: var(--r-xs);
  font-size: 12px;font-weight:700;font-family:var(--ff-num);
  background:var(--ok-100);color:var(--ok);
}
.kpi__delta--up{background:var(--ok-100);color:var(--ok);}
.kpi__delta--down{background:var(--dang-100);color:var(--dang);}
.kpi__delta--flat{background:var(--ink-100);color:var(--ink-500);}
.kpi--ok{--kpi-accent:var(--ok);}
.kpi--warn{--kpi-accent:var(--warn);}
.kpi--dang{--kpi-accent:var(--dang);}
.kpi--teal{--kpi-accent:var(--teal);}
.kpi--violet{--kpi-accent:var(--violet);}
.kpi--indigo{--kpi-accent:var(--indigo);}
.kpi--orange{--kpi-accent:var(--orange);}
.kpi--dark{background:var(--secondary);border-color:var(--secondary);}
.kpi--dark .kpi__label{color:#AAB0B6;}
.kpi--dark .kpi__val{color:#fff;}
.kpi--dark .kpi__foot{color:#90979F;}

/* ───────── 表格 ───────── */
.tbl-wrap{
  overflow-x:auto;overflow-y:hidden;
  background:
    linear-gradient(90deg,#fff 40%,rgba(255,255,255,0)) left center,
    linear-gradient(270deg,#fff 40%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(16,24,40,.10),rgba(16,24,40,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(16,24,40,.10),rgba(16,24,40,0)) right center;
  background-repeat:no-repeat;
  background-size:32px 100%,32px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll;
}
.tbl{font-size: 13px;min-width:100%;}
.tbl--wide{min-width:1120px;}
.tbl thead th{
  position:sticky;top:0;z-index:2;
  text-align:left;font-weight:600;font-size: 13px;color:var(--ink-900);
  background:var(--surface-2);
  padding: 12px 16px;white-space:nowrap;
  border-bottom:1px solid var(--line);
  letter-spacing:.01em;
}
.tbl thead th.is-sortable{cursor:pointer;user-select:none;}
.tbl thead th.is-sortable:hover{color:var(--pri);}
.tbl thead th .sort-ico{display:inline-block;width:9px;margin-left:3px;opacity:.45;}
.tbl tbody td{
  padding: 12px 16px;border-bottom:1px solid var(--line-soft);
  color:var(--ink-600);vertical-align:middle;
}
.tbl tbody tr{transition:background .12s;}
.tbl tbody tr:hover{background:var(--surface-2);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr.is-clickable{cursor:pointer;}
.tbl tbody tr.is-selected{background:var(--pri-100) !important;}
.tbl tbody tr.is-locked td{background:#FFFBF7;}
.tbl tbody tr.is-locked:hover td{background:#FFF7EF;}
.tbl .col-num{text-align:right;font-family:var(--ff-num);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tbl .col-act{text-align:right;white-space:nowrap;}
.tbl td .mono{white-space:nowrap;}
.tbl td .cell-code{white-space:nowrap;}
.tbl .col-act .btn{opacity:.6;transition:.15s;}
.tbl tr:hover .col-act .btn{opacity:1;}
.tbl__primary{color:var(--ink-900);font-weight:600;}
.tbl__sub{font-size: 12px;color:var(--ink-400);margin-top: 2px;}
.tbl--compact tbody td{padding: 8px 12px;}
.tbl--compact thead th{padding: 10px 12px;}
.tbl--hover-none tbody tr:hover{background:transparent;}
.tbl--rowlines-strong tbody td{border-bottom-color:var(--line);}

.cell-stack{display:flex;flex-direction:column;gap: 2px;min-width:128px;}
.cell-code{
  font-family:var(--ff-num);font-size: 12px;color:var(--ink-600);
  letter-spacing:.01em;white-space:nowrap;
}
.cell-code--link{color:var(--pri);cursor:pointer;font-weight:600;}
.cell-code--link:hover{text-decoration:underline;}

/* 迷你进度条 */
.bar{height:5px;border-radius: 999px;background:var(--ink-100);overflow:hidden;min-width:56px;flex:1;}
.bar i{display:block;height:100%;border-radius: 999px;background:var(--pri);transition:width .5s var(--ease);}
.bar--ok i{background:var(--ok);}
.bar--warn i{background:var(--warn);}
.bar--dang i{background:var(--dang);}
.bar--teal i{background:var(--teal);}
.bar-row{display:flex;align-items:center;gap: 8px;}
.bar-row span{font-size: 12px;color:var(--ink-500);font-family:var(--ff-num);flex:none;}

/* 表格分页 */
.tbl-pager{
  display:flex;align-items:center;justify-content:space-between;gap: 12px;
  padding: 12px 20px;border-top:1px solid var(--line-soft);background:var(--surface);
  font-size: 12px;color:var(--ink-500);
}
.pager{display:flex;align-items:center;gap: 4px;}
.pager__btn{
  min-width:28px;height:28px;padding: 0 8px;border-radius: var(--r-sm);
  display:grid;place-items:center;font-size: 12px;color:var(--ink-600);
  font-family:var(--ff-num);transition:.14s;border:1px solid transparent;
}
.pager__btn:hover{background:var(--surface-2);border-color:var(--line);}
.pager__btn.is-on{background:var(--pri-100);border-color:var(--pri-200);color:var(--pri);font-weight:700;}

/* ───────── 表单 ───────── */
.field{display:flex;flex-direction:column;gap: 6px;min-width:0;}
.field__label{font-size: 13px;color:var(--ink-700);font-weight:500;display:flex;align-items:center;gap: 4px;}
.field__label .req{color:var(--dang);}
.field__hint{font-size: 11px;color:var(--ink-400);line-height: 1.5;}
.field__err{font-size: 11px;color:var(--dang);}
.inp,.sel,.txa{
  width:100%;height:36px;padding: 0 12px;
  border:1px solid var(--line);border-radius: var(--r-md);
  background:var(--surface);color:var(--ink-900);font-size: 13px;
  transition:.15s var(--ease);
}
.inp::placeholder,.txa::placeholder{color:var(--ink-300);}
.inp:hover,.sel:hover,.txa:hover{border-color:var(--line-strong);}
.inp:focus,.sel:focus,.txa:focus{
  outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(117,57,255,.12);
}
.inp[readonly]{background:var(--surface-2);color:var(--ink-500);}
.txa{height:auto;min-height:76px;padding: 10px 12px;resize:vertical;line-height: 1.6;}
.sel{
  appearance:none;cursor:pointer;padding-right: 28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%2390979F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
}
.inp--sm,.sel--sm{height:30px;font-size: 13px;}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap: 16px;}
.form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.form-grid--1{grid-template-columns:minmax(0,1fr);}
.span-2{grid-column:span 2;} .span-3{grid-column:span 3;}
@media (max-width:720px){.form-grid,.form-grid--3{grid-template-columns:minmax(0,1fr);}.span-2,.span-3{grid-column:span 1;}}

.check{display:inline-flex;align-items:center;gap: 8px;cursor:pointer;font-size: 13px;color:var(--ink-700);user-select:none;}
.check input{width:15px;height:15px;accent-color:var(--pri);cursor:pointer;margin:0;}
.radio-card{
  display:flex;align-items:flex-start;gap: 10px;padding: 12px;
  border:1px solid var(--line);border-radius: var(--r-md);cursor:pointer;
  transition:.15s var(--ease);background:var(--surface);
}
.radio-card:hover{border-color:var(--pri-200);background:var(--pri-100);}
.radio-card input{margin-top: 2px;accent-color:var(--pri);flex:none;}
.radio-card__t{font-size: 13px;font-weight:600;color:var(--ink-900);}
.radio-card__d{font-size: 12px;color:var(--ink-400);margin-top: 2px;line-height: 1.5;}
.radio-card.is-on{border-color:var(--pri);background:var(--pri-100);box-shadow:0 0 0 3px rgba(117,57,255,.08);}

.switchbox{display:inline-flex;align-items:center;gap: 8px;cursor:pointer;font-size: 13px;}
.switchbox__t{
  width:34px;height:19px;border-radius: 999px;background:var(--ink-200);position:relative;flex:none;transition:.2s var(--ease);
}
.switchbox__t::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius: 50%;
  background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.3);transition:.2s var(--ease);
}
.switchbox input{display:none;}
.switchbox input:checked + .switchbox__t{background:var(--pri);}
.switchbox input:checked + .switchbox__t::after{transform:translateX(15px);}

/* 工具条 */
.toolbar{
  display:flex;align-items:center;gap: 10px;flex-wrap:wrap;
  padding: 12px 20px;border-bottom:1px solid var(--line-soft);
  background:var(--surface);
}
.toolbar__search{position:relative;width:240px;}
.toolbar__search .inp{padding-left: 34px;background:var(--surface-2);border-color:transparent;}
.toolbar__search .inp:focus{background:var(--surface);}
.toolbar__search svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink-400);pointer-events:none;
}
.toolbar__spacer{flex:1;}
.toolbar__label{font-size: 12px;color:var(--ink-400);}

/* ───────── 弹窗 ───────── */
.modal-root{position:fixed;inset:0;z-index:200;pointer-events:none;}
.modal-veil{
  position:absolute;inset:0;background:rgba(5,19,33,.45);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  pointer-events:auto;
  animation:veilIn .2s var(--ease);
  display:flex;align-items:center;justify-content:center;padding: 24px;
}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.modal{
  width:560px;max-width:100%;max-height:calc(100vh - 48px);
  background:var(--surface);border-radius: var(--r-2xl);
  box-shadow:var(--sh-4);display:flex;flex-direction:column;overflow:hidden;
  animation:modalIn .26s var(--ease-out);
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal--md{width:560px;} .modal--lg{width:760px;} .modal--xl{width:960px;} .modal--sm{width:420px;}
.modal__head{
  padding: 16px 20px 16px;border-bottom:1px solid var(--line-soft);flex:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap: 12px;
}
.modal__title{font-size: 16px;font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap: 8px;}
.modal__title svg,.drawer__title svg{width:17px;height:17px;flex:none;color:var(--pri);}
.modal__sub{font-size: 13px;color:var(--ink-400);margin-top: 4px;font-weight:400;}
.modal__x{
  width:30px;height:30px;border-radius: var(--r-md);display:grid;place-items:center;
  color:var(--ink-400);flex:none;transition:.15s;
}
.modal__x:hover{background:var(--ink-100);color:var(--ink-700);}
.modal__x svg{width:16px;height:16px;}
.modal__body{padding: 20px;overflow-y:auto;flex:1;}
.modal__foot{
  padding: 12px 20px;border-top:1px solid var(--line-soft);background:var(--surface-2);
  display:flex;align-items:center;justify-content:flex-end;gap: 8px;flex:none;
}
.modal__foot .foot-l{margin-right:auto;font-size: 12px;color:var(--ink-400);}

/* ───────── 抽屉 ───────── */
.drawer-root{position:fixed;inset:0;z-index:190;pointer-events:none;}
.drawer-veil{position:absolute;inset:0;background:rgba(5,19,33,.38);pointer-events:auto;animation:veilIn .2s var(--ease);}
.drawer{
  position:absolute;right:0;top:0;bottom:0;
  width:var(--dw,660px);max-width:96vw;
  background:var(--surface);box-shadow:var(--sh-4);
  display:flex;flex-direction:column;
  animation:drawerIn .3s var(--ease-out);
}
@keyframes drawerIn{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
.drawer__head{
  padding: 16px 20px;border-bottom:1px solid var(--line);flex:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap: 12px;
  background:var(--surface);
}
.drawer__title{font-size: 16px;font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap: 8px;}
.drawer__sub{font-size: 13px;color:var(--ink-400);margin-top: 4px;}
.drawer__body{flex:1;overflow-y:auto;padding: 20px 20px 28px;}
.drawer__foot{padding: 12px 20px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;gap: 8px;justify-content:flex-end;flex:none;}

/* ───────── 提示 ───────── */
.toast-root{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap: 8px;align-items:center;pointer-events:none;}
.toast{
  display:flex;align-items:center;gap: 8px;
  padding: 10px 16px;border-radius: var(--r-md);
  background:var(--ink-900);color:#fff;font-size: 13px;
  box-shadow:var(--sh-3);pointer-events:auto;
  animation:toastIn .24s var(--ease-out);
  max-width:460px;
}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.toast.is-out{animation:toastOut .2s var(--ease) forwards;}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}
.toast svg{width:16px;height:16px;flex:none;}
.toast--ok svg{color:#4FD08A;} .toast--warn svg{color:#F5C451;} .toast--dang svg{color:#F34242;}

/* ───────── 描述列表 ───────── */
.desc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap: 0;}
.desc--1{grid-template-columns:minmax(0,1fr);}
.desc--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.desc__item{padding: 10px 0;border-bottom:1px solid var(--line-soft);min-width:0;}
.desc__item:last-child{border-bottom:none;}
/* 末项落单时铺满整行，避免右侧整块空白 */
.desc__item:last-child:nth-child(odd){grid-column:1/-1;}
.desc__k{font-size: 12px;color:var(--ink-400);margin-bottom: 4px;}
.desc__v{font-size: 13px;color:var(--ink-800);font-weight:500;word-break:break-word;}
.desc__v--mono{font-family:var(--ff-num);letter-spacing:.01em;}
.desc__item--span{grid-column:1/-1;}

/* ───────── 时间轴 ───────── */
.tl{position:relative;padding-left: 20px;}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--line);}
.tl__item{position:relative;padding-bottom: 16px;}
.tl__item:last-child{padding-bottom: 0;}
.tl__dot{
  position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius: 50%;
  background:#fff;border:2.5px solid var(--ink-300);
}
.tl__dot--ok{border-color:var(--ok);background:var(--ok);box-shadow:0 0 0 3px rgba(39,174,96,.14);}
.tl__dot--pri{border-color:var(--pri);background:var(--pri);box-shadow:0 0 0 3px rgba(117,57,255,.14);}
.tl__dot--warn{border-color:var(--warn);background:var(--warn);box-shadow:0 0 0 3px rgba(226,185,59,.16);}
.tl__dot--dang{border-color:var(--dang);background:var(--dang);box-shadow:0 0 0 3px rgba(239,30,30,.14);}
.tl__t{font-size: 13px;color:var(--ink-900);font-weight:600;display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.tl__d{font-size: 13px;color:var(--ink-500);margin-top: 4px;line-height: 1.6;}
.tl__meta{font-size: 12px;color:var(--ink-400);margin-top: 4px;display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.tl__act{margin-top: 8px;font-size: 12px;color:var(--ink-600);background:var(--surface-2);border:1px solid var(--line);border-radius: var(--r-md);padding: 8px 10px;line-height: 1.6;}

/* ───────── 步骤条 ───────── */
.steps{display:flex;align-items:flex-start;gap: 0;}
.step{flex:1;position:relative;text-align:center;min-width:0;}
.step__dot{
  width:28px;height:28px;border-radius: 50%;margin:0 auto 8px;
  display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--line-strong);
  font-size: 12px;font-weight:700;color:var(--ink-400);
  font-family:var(--ff-num);position:relative;z-index:2;
}
.step__dot svg{width:14px;height:14px;}
.step__t{font-size: 12px;color:var(--ink-500);font-weight:500;padding: 0 4px;}
.step__d{font-size: 11px;color:var(--ink-400);margin-top: 4px;padding: 0 4px;line-height: 1.5;}
.step::before{
  content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;
  background:var(--line);z-index:1;
}
.step:first-child::before{display:none;}
.step.is-done::before{background:var(--ok);}
.step.is-done .step__dot{background:var(--ok);border-color:var(--ok);color:#fff;}
.step.is-done .step__t{color:var(--ink-800);font-weight:600;}
.step.is-active .step__dot{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 0 0 4px rgba(117,57,255,.14);}
.step.is-active .step__t{color:var(--pri);font-weight:600;}
.step.is-warn .step__dot{background:var(--warn);border-color:var(--warn);color:#fff;}
.step.is-warn .step__t{color:var(--warn);font-weight:600;}

/* ───────── 单据链 ───────── */
.chain{display:flex;align-items:center;gap: 6px;flex-wrap:wrap;}
.tbl .chain{flex-wrap:nowrap;}
.chain__node{
  display:inline-flex;align-items:center;gap: 4px;
  height:24px;padding: 0 10px;border-radius: var(--r-sm);
  font-size: 12px;font-family:var(--ff-num);letter-spacing:.01em;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-600);
  cursor:pointer;transition:.15s var(--ease);white-space:nowrap;
}
.chain__node:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-100);}
.chain__node b{font-weight:600;font-family:var(--ff);color:var(--ink-400);font-size: 11px;}
.chain__node--cur{border-color:var(--pri);background:var(--pri-100);color:var(--pri);font-weight:600;}
.chain__node--ok{border-color:var(--ok-200);background:var(--ok-100);color:var(--ok);}
.chain__node--dang{border-color:var(--dang-200);background:var(--dang-100);color:var(--dang);}
.chain__arrow{color:var(--ink-300);font-size: 11px;flex:none;}
.chain--sm .chain__node{height:22px;font-size: 11px;padding: 0 8px;}

/* 表格内的紧凑单据链（迷你步骤条） */
.chainmini{display:flex;align-items:center;flex-wrap:nowrap;gap: 0;}
.chainmini__s{
  display:inline-flex;align-items:center;justify-content:center;
  height:20px;padding: 0 6px;border-radius: var(--r-xs);white-space:nowrap;
  font-size: 11px;line-height: 1;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-400);
  cursor:pointer;transition:.15s var(--ease);
}
.chainmini__s:hover{border-color:var(--pri);color:var(--pri);}
.chainmini__s.is-done{background:var(--ok-100);border-color:transparent;color:var(--ok);font-weight:600;}
.chainmini__s.is-cur{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600;}
.chainmini__s.is-wait{color:var(--ink-300);}
.chainmini__sep{
  width:8px;height:1.5px;background:var(--ink-200);margin:0 2px;flex:none;position:relative;
}
.chainmini__sep::after{
  content:"";position:absolute;right:-1px;top:-2px;
  border:2.5px solid transparent;border-left-color:var(--ink-200);
}

/* ───────── 提示条 ───────── */
.note{
  display:flex;align-items:flex-start;gap: 10px;
  padding: 12px 12px;border-radius: var(--r-md);
  font-size: 13px;line-height: 1.6;
  background:var(--pri-100);color:var(--ink-700);border:1px solid var(--pri-200);
}
.note svg{width:16px;height:16px;flex:none;margin-top: 2px;color:var(--pri);}
.note b{font-weight:600;}
.note--warn{background:var(--warn-100);color:var(--ink-700);border-color:var(--warn-200);}
.note--warn svg{color:var(--warn);}
.note--ok{background:var(--ok-100);color:var(--ink-700);border-color:var(--ok-200);}
.note--ok svg{color:var(--ok);}
.note--dang{background:var(--dang-100);color:var(--ink-700);border-color:var(--dang-200);}
.note--dang svg{color:var(--dang);}
.note--gray{background:var(--surface-2);color:var(--ink-600);border-color:var(--line);}
.note--gray svg{color:var(--ink-400);}

/* ───────── 分隔标题 ───────── */
.sec-title{
  display:flex;align-items:center;gap: 10px;
  font-size: 13px;font-weight:600;color:var(--ink-700);
  letter-spacing:.01em;margin-bottom: 12px;
}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line);}
.sec-title__n{font-size: 11px;color:var(--ink-400);font-weight:500;font-family:var(--ff-num);}

/* ───────── 空态 ───────── */
.empty{padding: 48px 20px;text-align:center;color:var(--ink-400);}
.empty__ico{
  width:48px;height:48px;border-radius: var(--r-lg);margin:0 auto 12px;
  background:var(--surface-2);display:grid;place-items:center;color:var(--ink-300);
}
.empty__ico svg{width:24px;height:24px;}
.empty__t{font-size: 14px;color:var(--ink-600);font-weight:600;}
.empty__d{font-size: 12px;margin-top: 4px;}

/* ───────── 列表项 ───────── */
.list{display:flex;flex-direction:column;flex:1;}
.list__item{
  display:flex;align-items:center;gap: 12px;
  padding: 12px 20px;border-bottom:1px solid var(--line-soft);
  transition:background .12s;cursor:pointer;
}
.list__item:last-child{border-bottom:none;}
.list__item:hover{background:var(--surface-2);}
.list__ico{
  width:34px;height:34px;border-radius: 50%;flex:none;display:grid;place-items:center;
  background:var(--pri-100);color:var(--pri);
}
.list__ico svg{width:16px;height:16px;}
.list__ico--ok{background:var(--ok-100);color:var(--ok);}
.list__ico--warn{background:var(--warn-100);color:var(--warn);}
.list__ico--dang{background:var(--dang-100);color:var(--dang);}
.list__ico--teal{background:var(--teal-100);color:var(--teal);}
.list__body{flex:1;min-width:0;}
.list__t{font-size: 13px;color:var(--ink-900);font-weight:600;display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.list__d{font-size: 12px;color:var(--ink-400);margin-top: 4px;display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.list__r{flex:none;text-align:right;}

/* ───────── 权限矩阵 ───────── */
.matrix{width:100%;font-size: 13px;border-collapse:separate;border-spacing:0;}
.matrix th,.matrix td{border-bottom:1px solid var(--line-soft);padding: 10px 12px;text-align:center;}
.matrix thead th{background:var(--surface-2);font-size: 12px;color:var(--ink-500);font-weight:600;position:sticky;top:0;z-index:1;}
.matrix tbody th{text-align:left;font-weight:500;color:var(--ink-800);background:var(--surface-2);position:sticky;left:0;z-index:1;font-size: 12px;}
.matrix td.on{color:var(--ok);} .matrix td.off{color:var(--ink-200);}
.matrix td svg{width:15px;height:15px;margin:0 auto;}
.matrix tbody tr:hover td{background:var(--pri-100);}
.matrix tbody tr:hover th{background:var(--pri-100);}

/* ───────── 统计条 ───────── */
.stat-strip{display:flex;gap: 0;border:1px solid var(--line);border-radius: var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-1);flex-wrap:wrap;}
.stat-strip__i{flex:1 1 0;min-width:120px;padding: 12px 16px;border-right:1px solid var(--line-soft);}
.stat-strip__i:last-child{border-right:none;}
@media (max-width:900px){
  .stat-strip__i{flex:1 1 50%;border-bottom:1px solid var(--line-soft);}
}
.stat-strip__k{font-size: 12px;color:var(--ink-400);}
.stat-strip__v{font-family:var(--ff-num);font-size: 20px;font-weight:700;color:var(--ink-900);letter-spacing:-.01em;margin-top: 4px;}
.stat-strip__d{font-size: 12px;margin-top: 4px;}

/* ───────── 分栏标签页 ───────── */
.vtabs{display:flex;flex-direction:column;gap: 12px;}
.vtabs__list{display:flex;gap: 2px;border-bottom:1px solid var(--line);}
.vtabs__tab{
  padding: 8px 12px;font-size: 13px;color:var(--ink-500);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom: -2px;transition:.15s;font-weight:500;
}
.vtabs__tab:hover{color:var(--ink-900);}
.vtabs__tab.is-active{color:var(--pri);border-bottom-color:var(--pri);font-weight:600;}

/* ───────── 飞检横幅 ───────── */
.inspect-veil{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:300;
  animation:toastIn .3s var(--ease-out);
}
.inspect-veil__inner{
  display:flex;align-items:center;gap: 12px;padding: 12px 16px;
  background:var(--ink-900);color:#fff;border-radius: var(--r-lg);box-shadow:var(--sh-4);
  max-width:640px;
}
.inspect-veil__inner svg{width:22px;height:22px;color:#FDBA74;flex:none;}
.inspect-veil__inner b{display:block;font-size: 14px;}
.inspect-veil__inner span{font-size: 12px;color:#AAB0B6;line-height: 1.5;display:block;margin-top: 2px;}

/* ───────── 键盘提示面板 ───────── */
.omni-panel{
  width:600px;max-width:92vw;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
}
.omni-search{display:flex;align-items:center;gap: 10px;padding: 12px 16px;border-bottom:1px solid var(--line);}
.omni-search svg{width:17px;height:17px;color:var(--ink-400);flex:none;}
.omni-search input{flex:1;border:none;outline:none;font-size: 14px;background:transparent;color:var(--ink-900);}
.omni-search input::placeholder{color:var(--ink-300);}
.omni-list{overflow-y:auto;padding: 8px;}
.omni-group{font-size: 10px;font-weight:700;letter-spacing:.1em;color:var(--ink-400);padding: 10px 10px 4px;}
.omni-item{
  display:flex;align-items:center;gap: 10px;padding: 8px 10px;border-radius: var(--r-md);
  cursor:pointer;font-size: 13px;color:var(--ink-700);
}
.omni-item:hover,.omni-item.is-sel{background:var(--pri-100);color:var(--pri);}
.omni-item svg{width:16px;height:16px;flex:none;opacity:.7;}
.omni-item__k{margin-left:auto;font-size: 11px;color:var(--ink-400);font-family:var(--ff-num);}