:root{
  --primary:#1677ff; --primary-hover:#0e63d6; --primary-soft:#e8f1ff; --primary-dim:#bcd7ff;
  --bg:#f4f6fa; --card:#ffffff; --line:#e6eaf0; --line-strong:#d4dae3;
  --text:#1f2633; --text-2:#5b6472; --text-3:#97a0ad;
  --ok:#1a7f43; --ok-bg:#e9f7ef;
  --warn:#d46b08; --warn-bg:#fff4e6; --warn-line:#ffe1a8;
  --err:#cf1322; --err-bg:#fdecec;
  --radius:10px; --radius-sm:8px;
  --shadow:0 2px 10px rgba(24,44,80,.06);
  --shadow-hover:0 6px 20px rgba(24,44,80,.12);
  --shadow-lg:0 10px 34px rgba(24,44,80,.18);
  --fs:15px; --fs-sm:13px; --fs-lg:20px; --fs-xl:26px;
  --ctl-h:44px; --btn-h:46px;
  --font:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);font-size:var(--fs);color:var(--text);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.ico{display:inline-block;vertical-align:-.18em;flex:none}
.hidden{display:none !important}
.mono{font-variant-numeric:tabular-nums}
.right{text-align:right}
.center{text-align:center}
.muted{color:var(--text-3)}
.nowrap{white-space:nowrap}
.mt{margin-top:16px}.mt-sm{margin-top:8px}.mt-lg{margin-top:24px}
.mb{margin-bottom:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:140px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* 顶部栏 */
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  background:var(--primary);color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 10px rgba(15,60,140,.2);
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:#fff}
.topbar .brand:hover{text-decoration:none}
.topbar .logo{
  width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
}
.topbar .spacer{flex:1}
.topbar .user{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.topbar .user .name{opacity:.95}
.topbar .btn-top{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);
  color:#fff;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--fs-sm);
}
.topbar .btn-top:hover{background:rgba(255,255,255,.26);text-decoration:none}

/* 页面容器 */
.page{max-width:1180px;margin:0 auto;padding:16px 16px 70px}
.page-head{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.page-head h2{font-size:var(--fs-lg);font-weight:600}
.crumb{font-size:var(--fs-sm);color:var(--text-3);display:flex;align-items:center;gap:6px}
.crumb a{color:var(--text-3)}
.crumb a:hover{color:var(--primary)}
.medal{
  width:38px;height:38px;border-radius:10px;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:none;
}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.card-head{
  padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.card-body{padding:18px}
.card + .card{margin-top:16px}
.sec-title{font-size:16px;font-weight:600;margin:22px 0 12px;padding-left:11px;border-left:4px solid var(--primary);line-height:1.3}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--btn-h);padding:0 20px;border:1px solid var(--primary);background:var(--primary);
  color:#fff;border-radius:var(--radius-sm);font-size:var(--fs);font-family:inherit;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);text-decoration:none}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--primary)}
.btn.ghost:hover{background:var(--primary-soft)}
.btn.plain{background:var(--card);color:var(--text-2);border-color:var(--line-strong)}
.btn.plain:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}
.btn.danger{background:#ff4d4f;border-color:#ff4d4f}
.btn.danger:hover{background:#d9363e;border-color:#d9363e}
.btn.block{width:100%}
.btn.sm{height:34px;padding:0 13px;font-size:var(--fs-sm);border-radius:6px}
.btn.lg{height:50px;font-size:16px;padding:0 28px}

/* 表单 */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:var(--fs-sm);color:var(--text-2)}
.field .req::after{content:"*";color:var(--err);margin-left:3px}
.ctl{
  height:var(--ctl-h);padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--card);color:var(--text);font-size:var(--fs);font-family:inherit;
  width:100%;outline:none;transition:.15s;
}
.ctl:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ctl:disabled{background:#f5f7fa;color:var(--text-3)}
textarea.ctl{height:auto;padding:10px 12px;resize:vertical;line-height:1.6}
select.ctl{
  appearance:none;padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
input[type=file].ctl{padding:8px 12px;height:auto;line-height:1.5}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form-grid .span2{grid-column:span 2}
.form-grid .span3{grid-column:span 3}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:8px;font-size:var(--fs);cursor:pointer;user-select:none}
.check input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}

/* 工具条 */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .ctl{width:auto;min-width:150px}
.toolbar > .field{flex-direction:row;align-items:center;gap:8px}
.toolbar > .field > label{white-space:nowrap}
.toolbar .spacer{flex:1}

/* 表格 */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs);min-width:600px}
table.tbl th,table.tbl td{padding:12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl th{background:#f7f9fc;color:var(--text-2);font-weight:600;font-size:var(--fs-sm);position:sticky;top:0}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:#f5f9ff}
table.tbl td.num,table.tbl th.num{text-align:right}
table.tbl td.ops{white-space:nowrap}
table.tbl td.ops .btn{margin-right:6px}
table.tbl td.ops .btn:last-child{margin-right:0}
table.tbl input.ctl{height:36px;min-width:80px}
.tbl-empty{padding:44px 16px;text-align:center;color:var(--text-3)}
.tbl-empty .big{font-size:30px;margin-bottom:8px;opacity:.5}

/* 标签 */
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:var(--fs-sm);background:var(--primary-soft);color:var(--primary);line-height:1.7}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.err{background:var(--err-bg);color:var(--err)}
.tag.dim{background:#f1f3f6;color:var(--text-3)}

/* 分页 */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 0;color:var(--text-2);font-size:var(--fs-sm);flex-wrap:wrap}
.pager .btns{display:flex;gap:8px;align-items:center}
.pager .pno{min-width:32px;text-align:center;color:var(--text-2)}

/* 提示条 */
.alert{display:flex;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);font-size:var(--fs-sm);margin-bottom:16px;align-items:flex-start}
.alert.info{background:var(--primary-soft);border:1px solid var(--primary-dim);color:#0b4fb3}
.alert.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:#8a5a00}
.alert.err{background:var(--err-bg);border:1px solid #ffc9c9;color:#a8071a}
.alert.ok{background:var(--ok-bg);border:1px solid #b7e3c9;color:var(--ok)}
.alert .ico{margin-top:3px}

/* 页签（功能切换，区别于步骤条） */
.tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tab{padding:9px 18px;font-size:var(--fs);color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none;transition:color .15s}
.tab:hover{color:var(--primary)}
.tab.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* 步骤条 */
.steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.step{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2)}
.step.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.step .no{width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-size:12px}
.step.on .no{background:rgba(255,255,255,.28);color:#fff}

/* 导航卡片 */
.nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:26px 12px;text-align:center;cursor:pointer;transition:.18s;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.nav-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--primary);text-decoration:none}
.nav-item .ico-box{width:54px;height:54px;border-radius:15px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
.nav-item .nm{font-weight:600;font-size:var(--fs)}
.nav-item .ds{font-size:var(--fs-sm);color:var(--text-3)}
.nav-item.lock .ico-box{background:#f1f3f6;color:var(--text-3)}
.nav-item.lock .nm{color:var(--text-2)}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(15,25,45,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal{background:var(--card);border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column}
.modal.wide{max-width:760px}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-body{padding:20px;overflow:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.icon-btn{width:34px;height:34px;border:0;background:transparent;color:var(--text-3);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f1f3f6;color:var(--text)}

/* 全局提示 */
#toastBox{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  min-width:220px;max-width:80vw;padding:11px 18px;border-radius:var(--radius-sm);
  background:#fff;box-shadow:var(--shadow-lg);font-size:var(--fs);
  display:flex;align-items:center;gap:9px;border-left:4px solid var(--primary);
  animation:toastIn .22s ease;
}
.toast.ok{border-left-color:var(--ok);color:var(--ok)}
.toast.err{border-left-color:var(--err);color:var(--err)}
.toast.warn{border-left-color:var(--warn);color:var(--warn)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* 加载遮罩 */
#loadMask{position:fixed;inset:0;background:rgba(255,255,255,.6);z-index:250;display:flex;align-items:center;justify-content:center}
.spinner{width:34px;height:34px;border:3px solid var(--primary-soft);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 统计卡 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.stat .k{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:6px}
.stat .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .v.ok{color:var(--ok)}.stat .v.warn{color:var(--warn)}.stat .v.err{color:var(--err)}

/* 上传框 */
.drop{
  border:2px dashed var(--line-strong);border-radius:var(--radius);padding:30px;text-align:center;
  color:var(--text-3);background:#fbfcfe;transition:.15s;cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.drop .big{font-size:30px;margin-bottom:8px}

/* 登录页 */
.login-page{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,#1677ff 0%,#0b4fb3 100%);
}
.login-box{width:100%;max-width:410px;background:#fff;border-radius:16px;padding:36px 30px;box-shadow:0 18px 50px rgba(9,30,66,.28)}
.login-box .brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.login-box .brand .logo{width:60px;height:60px;border-radius:16px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
.login-box h1{font-size:23px;font-weight:700;text-align:center}
.login-box .sub{text-align:center;color:var(--text-3);font-size:var(--fs-sm);margin-top:4px}
.login-box .field{margin-bottom:16px}
.login-box .tip{text-align:center;color:var(--text-3);font-size:var(--fs-sm);margin-top:18px;line-height:1.7}

/* 版权页脚 */
.page-foot{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding:14px 0 4px;color:var(--text-3);font-size:var(--fs-sm)}
.page-foot .cp-logo{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.page-foot .cp-author{color:var(--text-2);font-weight:600}
.login-page .page-foot{margin-top:22px;padding:0;color:rgba(255,255,255,.85)}
.login-page .page-foot .cp-author{color:#fff}

@media (max-width:900px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid .span3{grid-column:span 2}
  .nav-grid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .form-grid{grid-template-columns:1fr}
  .form-grid .span2,.form-grid .span3{grid-column:span 1}
  .nav-grid{grid-template-columns:repeat(2,1fr)}
  .topbar{padding:10px 12px}
  .topbar .brand .nm{font-size:15px}
  .topbar .user .name{display:none}
  .page{padding:12px 12px 60px}
  .card-pad,.card-body{padding:14px}
  .toolbar .ctl{flex:1;min-width:0}
  .toolbar > .field{flex:1}
  .form-actions .btn{flex:1}
  .modal{max-width:100%}
  .stats{grid-template-columns:1fr 1fr}
}