/* 布局与业务组件。与 prototype3.html 第三段 style 同源。 */

#login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#e8edf3}
.lg-box{width:376px;background:var(--bx);border:1px solid var(--bd);
  box-shadow:0 2px 6px rgba(0,0,0,.08)}
.lg-hd{padding:16px;background:linear-gradient(180deg,#f4f7fa,#e6edf4);
  border-bottom:1px solid var(--bd);text-align:center}
.lg-hd h1{font-size:17px;color:#1b3a5c}
.lg-hd p{font-size:11px;color:var(--t3);margin-top:2px}
.lg-bd{padding:20px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12px;color:var(--t2);margin-bottom:4px}
.ipt{width:100%;height:30px;border:1px solid var(--bd);border-radius:2px;
  padding:0 8px;font-size:13px;font-family:inherit;outline:none;background:#fff}
.ipt:focus{border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri-l)}
select.ipt{cursor:pointer;height:30px}
input[type=file].ipt{height:auto;padding:4px 6px;line-height:1.4}

.tbar{height:46px;background:linear-gradient(180deg,#2d6fbd 0%,#1a5fb4 100%);
  border-bottom:2px solid #123f77;display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;position:fixed;top:0;left:0;right:0;z-index:30}
.tbar .lg{display:flex;align-items:center;gap:8px;color:#fff}
.tbar .lg b{font-size:15px;font-weight:600}
.tbar .lg span{font-size:11px;color:#c5dcf5}
.tbar .rz{display:flex;align-items:center;gap:10px;color:#e8f1fb;font-size:12px}
.tbar .rz .who{padding-right:10px;border-right:1px solid rgba(255,255,255,.25)}
.tbar .rz a{color:#fff;font-size:12px}
.tbar .rz button{border:none;background:none;color:#fff;font-size:12px;
  font-family:inherit;cursor:pointer;padding:0}
.tbar .rz button:hover{text-decoration:underline}

.side{position:fixed;top:46px;bottom:0;left:0;width:206px;background:var(--bx);
  border-right:1px solid var(--bd);overflow-y:auto;z-index:20}
.mg{border-bottom:1px solid var(--bd2)}
.mg-h{padding:7px 12px;background:var(--hd2);font-size:11px;font-weight:600;
  color:var(--t2);letter-spacing:.3px;display:flex;align-items:center;gap:6px}
.mg-h .cnt{margin-left:auto;font-weight:400;color:var(--t3)}
.mi{padding:6px 12px 6px 22px;font-size:12px;color:var(--t1);cursor:pointer;
  display:flex;align-items:center;gap:6px;border-left:3px solid transparent}
.mi:hover{background:var(--pri-l);text-decoration:none}
.mi.on{background:var(--pri-l);border-left-color:var(--pri);color:var(--pri);font-weight:600}
.mi .dot{width:5px;height:5px;flex-shrink:0;background:var(--bd);border-radius:50%}
.mi.on .dot{background:var(--pri)}
.mi .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi.soon{color:var(--t3)}
.mi.soon .nm{color:var(--t3)}

main{margin-left:206px;padding-top:46px}
.wrap{padding:14px 16px 40px;max-width:1500px}
.crumb{font-size:12px;color:var(--t3);margin-bottom:10px}
.crumb b{color:var(--t1);font-weight:400}
.ph{margin-bottom:12px}
.ph h2{font-size:17px;color:#1b3a5c}
.ph p{font-size:12px;color:var(--t2);margin-top:2px}

/* ---------- 三步条 ---------- */
.flow{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--hd2);
  border:1px solid var(--bd2);margin-bottom:14px;font-size:12px}
.flow .fs{display:flex;align-items:center;gap:6px;color:var(--t2)}
.flow .fn{width:18px;height:18px;background:var(--pri);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.flow .ar{color:var(--bd);margin:0 2px}

/* ---------- 上传表 ---------- */
.up{border:1px solid var(--bd2);border-collapse:collapse;width:100%;font-size:12px}
.up th{padding:6px 10px}
.up td{padding:8px 10px;border:1px solid var(--bd2);vertical-align:middle}
.up .cols code{background:var(--hd2);border:1px solid var(--bd2);padding:0 3px;
  font-size:11px;color:var(--t2);margin-right:3px;display:inline-block}
.up .fname{color:var(--ok);font-weight:600}

/* ---------- 统计块 ---------- */
.sts{display:grid;gap:0;border:1px solid var(--bd);grid-auto-flow:column;
  grid-auto-columns:1fr}
.st{padding:10px 12px;border-right:1px solid var(--bd2);background:#fff}
.st:last-child{border-right:none}
.st .v{font-size:22px;font-weight:600;line-height:1.2}
.st .l{font-size:11px;color:var(--t3)}
.st.ok{background:var(--ok-l)}.st.ok .v{color:var(--ok)}
.st.er{background:var(--er-l)}.st.er .v{color:var(--er)}
.st.wn{background:var(--wn-l)}.st.wn .v{color:var(--wn)}
.st.p{background:var(--pri-l)}.st.p .v{color:var(--pri)}
.st.g{background:#f2f4f6}.st.g .v{color:var(--t2)}

/* ---------- 处理中遮罩 ---------- */
.busy{position:fixed;inset:0;background:rgba(240,242,245,.78);z-index:90;
  display:none;align-items:center;justify-content:center}
.busy.on{display:flex}
.busy-box{background:#fff;border:1px solid var(--bd);box-shadow:0 3px 12px rgba(0,0,0,.12);
  padding:22px 34px;text-align:center;min-width:280px}
.busy-box .t{font-size:13px;font-weight:600;color:#1b3a5c;margin-bottom:10px}
.pb{height:14px;border:1px solid var(--bd);background:#fff;padding:1px}
.pb>i{display:block;height:100%;background:linear-gradient(180deg,#3d86d4,var(--pri));
  width:0;animation:pbrun 1.4s ease-in-out infinite}
@keyframes pbrun{0%{width:8%}50%{width:78%}100%{width:96%}}

/* ---------- 筛选 ---------- */
.flt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;background:var(--hd2);border:1px solid var(--bd2);
  border-bottom:none;font-size:12px}
.flt .ipt{height:26px;font-size:12px;width:auto}
.flt .sp{margin-left:auto;color:var(--t3)}

/* ---------- 弹窗 ---------- */
.mask{position:fixed;inset:0;background:rgba(20,30,40,.45);z-index:100;display:none}
.mask.on{display:block}
.dlg{position:fixed;left:50%;top:10vh;transform:translateX(-50%);background:var(--bx);
  border:1px solid #123f77;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:101;display:none;
  width:600px;max-height:80vh;flex-direction:column}
.dlg.on{display:flex}
.dlg-h{padding:8px 14px;background:linear-gradient(180deg,#2d6fbd,#1a5fb4);color:#fff;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.dlg-h h3{font-size:13px;font-weight:600}
.dlg-h button{border:none;background:none;color:#fff;font-size:17px;cursor:pointer;line-height:1}
.dlg-b{padding:14px;overflow:auto;flex:1}

.mt-empty{padding:36px;text-align:center;color:var(--t3);font-size:12px}
.soon-box{padding:26px;text-align:center}
.soon-box .ic{font-size:26px;color:var(--bd)}
.soon-box h4{font-size:14px;color:#1b3a5c;margin:8px 0 4px}
.soon-box p{font-size:12px;color:var(--t2);max-width:640px;margin:0 auto 4px}

@media(max-width:1100px){.sts{grid-auto-flow:row;grid-auto-columns:auto;
  grid-template-columns:repeat(2,1fr)}.st{border-bottom:1px solid var(--bd2)}}