/* ===== 重庆渝玫特科技有限公司 · 采购管理系统 ===== */
:root{
  --bg:#eef2f7; --panel:#fff; --panel-2:#f7f9fc; --line:#dde4ee; --line-2:#eaeff6;
  --text:#16202e; --muted:#6b7a8d; --muted-2:#93a1b3;
  --primary:#1f5fa9; --primary-2:#2b7fd4; --primary-soft:#e8f0fa;
  --teal:#0f9b8e; --teal-soft:#e2f5f2;
  --ok:#1f8a5b; --ok-soft:#e4f5ec;
  --warn:#c2761b; --warn-soft:#fdf2e2;
  --danger:#c0392b; --danger-soft:#fbeae8;
  --purple:#6b4fd1; --purple-soft:#efeafd;
  --sidebar:#0f2438; --sidebar-2:#17334d;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(16,32,58,.06), 0 6px 20px rgba(16,32,58,.06);
  --shadow-lg:0 10px 40px rgba(16,32,58,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); font-size:13.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- 布局 ---------- */
#app{display:grid;grid-template-columns:214px 1fr;height:100vh;overflow:hidden}
.sidebar{background:var(--sidebar);display:flex;flex-direction:column;overflow:hidden}
.brand{display:flex;gap:10px;align-items:center;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-mark{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:linear-gradient(135deg,#2b7fd4,#0f9b8e);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.brand-txt{display:flex;flex-direction:column;min-width:0}
.brand-txt strong{color:#fff;font-size:14px;letter-spacing:.5px;white-space:nowrap}
.brand-txt span{color:#7f9ab5;font-size:11px;white-space:nowrap}
#nav{flex:1;overflow-y:auto;padding:10px 8px}
#nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:#a9bdd2;text-decoration:none;cursor:pointer;font-size:13px;margin-bottom:2px;transition:.14s;position:relative}
#nav a i{font-style:normal;width:16px;text-align:center;opacity:.85;font-size:13px}
#nav a:hover{background:rgba(255,255,255,.06);color:#fff}
#nav a.active{background:linear-gradient(90deg,rgba(43,127,212,.35),rgba(43,127,212,.08));color:#fff;box-shadow:inset 2px 0 0 var(--primary-2)}
#nav hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:10px 6px}
#nav .dot{position:absolute;right:9px;background:var(--warn);color:#fff;font-size:10.5px;font-weight:700;border-radius:9px;padding:1px 6px;min-width:18px;text-align:center;display:none;line-height:1.5}
#nav .dot.on{display:block}
.side-foot{padding:10px 16px;border-top:1px solid rgba(255,255,255,.07);color:#6e8aa5;font-size:11.5px}

.main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}
.tb-left h1{margin:0;font-size:17px;font-weight:600}
.tb-left p{margin:2px 0 0;color:var(--muted);font-size:12px}
.tb-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.content{flex:1;overflow-y:auto;padding:18px 22px 60px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;padding:7px 13px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text);transition:.14s;white-space:nowrap;font-size:13px}
.btn:hover{border-color:var(--primary-2);color:var(--primary);background:#fbfdff}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-2);border-color:var(--primary-2);color:#fff}
.btn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.teal:hover{filter:brightness(1.08);color:#fff}
.btn.danger{color:var(--danger);border-color:#f0cdc8;background:#fff}
.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--panel-2);color:var(--primary)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:6px}
.btn.xs{padding:1px 7px;font-size:11px;border-radius:5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fcfdff,#f8fafd)}
.card-h h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-h h3 .tag{font-size:11px;font-weight:400;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:1px 9px}
.card-b{padding:14px 16px}
.card-b.p0{padding:0}
.card-hint{padding:9px 16px;background:#fbfcfe;border-top:1px solid var(--line-2);color:var(--muted);font-size:12px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(16,32,58,.12);border-color:#c9d9ec}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.kpi.c-warn::after{background:var(--warn)} .kpi.c-ok::after{background:var(--ok)}
.kpi.c-teal::after{background:var(--teal)} .kpi.c-danger::after{background:var(--danger)}
.kpi.c-purple::after{background:var(--purple)}
.kpi .l{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:5px}
.kpi .v{font-size:25px;font-weight:700;margin:4px 0 2px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px}
.kpi .s{font-size:11.5px;color:var(--muted-2)}

/* ---------- 流程条 ---------- */
.flow{display:flex;gap:0;overflow-x:auto;padding:4px 0 2px}
.flow .st{flex:1 0 116px;text-align:center;position:relative;padding:0 4px}
.flow .st::before{content:"";position:absolute;top:17px;left:0;right:0;height:2px;background:var(--line);z-index:0}
.flow .st:first-child::before{left:50%} .flow .st:last-child::before{right:50%}
.flow .st .n{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;margin:0 auto 6px;position:relative;z-index:1;font-weight:700;font-size:12px;color:var(--muted)}
.flow .st.hot .n{border-color:var(--primary);background:var(--primary);color:#fff}
.flow .st.warn .n{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.flow .st .t{font-size:12px;font-weight:600}
.flow .st .c{font-size:11.5px;color:var(--muted)}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow:auto;max-height:none}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.tbl th{position:sticky;top:0;background:#f6f9fc;z-index:2;text-align:left;padding:9px 10px;font-weight:600;color:#43536b;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12px}
table.tbl td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr:hover{background:#f8fbff}
table.tbl tbody tr.sel{background:var(--primary-soft)}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl td.ctr,table.tbl th.ctr{text-align:center}
table.tbl tfoot td{background:#f8fafd;font-weight:600;border-top:1px solid var(--line)}
table.tbl .sub{color:var(--muted-2);font-size:11.5px}
table.tbl input[type=number],table.tbl input[type=text]{padding:4px 6px;font-size:12.5px}

/* ---------- 状态药丸 ---------- */
.pill{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.p-gray{background:#eef1f5;color:#65758a;border-color:#e2e7ee}
.p-blue{background:var(--primary-soft);color:var(--primary);border-color:#cfe0f3}
.p-teal{background:var(--teal-soft);color:var(--teal);border-color:#c6ece6}
.p-ok{background:var(--ok-soft);color:var(--ok);border-color:#c9ebd9}
.p-warn{background:var(--warn-soft);color:var(--warn);border-color:#f2dfc0}
.p-danger{background:var(--danger-soft);color:var(--danger);border-color:#f2cec9}
.p-purple{background:var(--purple-soft);color:var(--purple);border-color:#ddd4f9}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:12px;color:var(--muted);font-weight:600}
.field label .req{color:var(--danger)}
input[type=text],input[type=number],input[type=date],input[type=email],select,textarea{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 9px;background:#fff;outline:none;transition:.14s;width:100%
}
input:focus,select:focus,textarea:focus{border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(43,127,212,.13)}
textarea{resize:vertical;min-height:58px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hint{color:var(--muted);font-size:11.5px;margin:-6px 0 10px}
.check{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;margin:0}

/* ---------- 工具条 ---------- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .grow{flex:1}
.toolbar input[type=text],.toolbar select{width:auto;min-width:130px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.seg button{border:0;background:#fff;padding:6px 12px;cursor:pointer;color:var(--muted);border-right:1px solid var(--line);font-size:12.5px}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--primary);color:#fff}

/* ---------- 模态 ---------- */
.mask{position:fixed;inset:0;background:rgba(13,26,44,.45);display:grid;place-items:center;z-index:200;padding:24px;animation:fade .14s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:pop .16s}
@keyframes pop{from{transform:scale(.97) translateY(6px);opacity:.6}to{transform:none;opacity:1}}
.modal.md{max-width:720px} .modal.lg{max-width:980px} .modal.xl{max-width:1240px}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.modal-h h3{margin:0;font-size:15px;font-weight:600}
.modal-h .x{cursor:pointer;color:var(--muted);font-size:20px;line-height:1;border:0;background:none;padding:0 4px}
.modal-b{padding:16px 18px;overflow-y:auto;flex:1}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line-2);background:#fbfcfe}
.modal-f .left{margin-right:auto;display:flex;gap:8px}

/* ---------- Toast ---------- */
#toastRoot{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#16202e;color:#fff;padding:9px 16px;border-radius:8px;box-shadow:var(--shadow-lg);font-size:13px;animation:drop .18s;max-width:70vw}
@keyframes drop{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.toast.ok{background:#17724a} .toast.err{background:#a83226} .toast.warn{background:#a8660f}

/* ---------- 空状态 ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--muted-2)}
.empty .ic{font-size:34px;opacity:.5;margin-bottom:8px}
.empty p{margin:0 0 12px}

/* ---------- 连接状态条 ---------- */
.conn-bar{display:none;align-items:center;gap:10px;padding:9px 18px;background:#a83226;color:#fff;font-size:12.5px;position:sticky;top:0;z-index:300;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.conn-bar.on{display:flex}
.conn-bar .ic{font-size:15px;line-height:1}
.conn-bar .conn-tip{margin-left:auto;opacity:.85;font-size:11.5px}
.conn-bar .conn-tip b{font-weight:700}
.conn-bar .btn.primary{background:#fff;border-color:#fff;color:#a83226;font-weight:600}
.conn-bar .btn.primary:hover{background:#ffe9e6;border-color:#ffe9e6;color:#a83226}

/* ---------- 侧边栏：分组标题 + 项目工作区 ---------- */
#nav .nav-sec{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 11px 5px;color:#5d7a97;font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;font-weight:700;
}
#nav .nav-sec:first-child{padding-top:2px}
.nav-cur{padding:0 4px 6px}
.nav-cur .nc-lbl{
  color:#5d7a97;font-size:10.5px;letter-spacing:1px;font-weight:700;
  padding:0 2px 5px;text-transform:uppercase;
}
.nav-cur .nc-name{color:#6f8cae;font-size:10.5px;padding:5px 2px 0;line-height:1.4}
.nav-cur .nc-name:empty{display:none}
#nav.noproj .nav-cur{opacity:.82}
.nav-cur select{
  width:100%;padding:7px 9px;font-size:12.5px;border-radius:7px;cursor:pointer;
  background:#122b42;border:1px solid rgba(255,255,255,.14);color:#e8f1fb;
}
.nav-cur select option{background:#122b42;color:#e8f1fb}
#nav .nav-proj a{color:#8fb0cd}
#nav .nav-proj a.active{color:#fff}
#nav.noproj .nav-proj a{opacity:.45}
#nav.noproj .nav-proj a:hover{opacity:1}
.nav-empty{
  margin:2px 10px 6px;padding:8px 10px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.16);
  color:#7f9ab5;font-size:11px;line-height:1.6;
}
.nav-empty b{color:#a9c7e4}
#nav.hasproj .nav-empty{display:none}

/* ---------- 供应商对账 ---------- */
.recon-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media (max-width:900px){.recon-sum{grid-template-columns:repeat(2,1fr)}}
.recon-sum .rs{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff}
.recon-sum .rs .l{color:var(--muted);font-size:11.5px}
.recon-sum .rs .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.recon-sum .rs.hi{background:#f2f8ff;border-color:#cfe4fa}
.recon-sum .rs.hi .v{color:var(--primary)}
.recon-sum .rs.neg .v{color:var(--danger)}

/* ---------- 供应商送货单 ---------- */
.dn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px}
.dn-card{
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
}
.dn-thumb{
  height:132px;background:#f2f5f9;display:grid;place-items:center;overflow:hidden;
  border-bottom:1px solid var(--line-2);cursor:pointer;position:relative;
}
.dn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dn-thumb .ph{font-size:30px;opacity:.4;color:var(--muted)}
.dn-thumb .zo{position:absolute;right:6px;bottom:6px;background:rgba(15,36,56,.72);color:#fff;
  font-size:11px;padding:2px 7px;border-radius:20px}
.dn-meta{padding:8px 10px;display:flex;flex-direction:column;gap:3px;font-size:12px;flex:1}
.dn-meta .nm{font-weight:600;word-break:break-all;line-height:1.35}
.dn-meta .sub2{color:var(--muted);font-size:11px}
.dn-foot{display:flex;gap:6px;align-items:center;padding:7px 10px;border-top:1px solid var(--line-2);background:#fbfcfe}
.dn-drop{
  border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;
  cursor:pointer;background:#fbfdff;transition:.15s;
}
.dn-drop:hover{border-color:var(--primary-2);background:#f6faff}
.dn-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dn-pick .item{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;background:#fff;font-size:12px;max-width:100%;
}
.dn-pick .item img{width:34px;height:34px;object-fit:cover;border-radius:5px;border:1px solid var(--line-2)}
.dn-pick .item .ph2{width:34px;height:34px;display:grid;place-items:center;background:#f2f5f9;border-radius:5px;font-size:16px}
.dn-pick .item .x{color:var(--danger);cursor:pointer;font-weight:700;padding:0 2px}
.lightbox{position:fixed;inset:0;background:rgba(10,20,32,.88);z-index:9999;display:grid;place-items:center;padding:26px}
.lightbox img{max-width:94vw;max-height:88vh;border-radius:8px;background:#fff}
.lightbox .cls{position:absolute;top:16px;right:22px;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.lightbox .nm{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#cfe0f3;font-size:13px}

/* ---------- 项目工作台 ---------- */
.ph-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ph-head .nm{font-size:19px;font-weight:700}
.ph-head .cd{color:var(--muted);font-size:12px}
.ph-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ph-tile{
  border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:#fff;
  cursor:pointer;transition:.15s;position:relative;
}
.ph-tile:hover{border-color:#c9d9ec;transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,32,58,.09)}
.ph-tile .t{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.ph-tile .v{font-size:21px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.ph-tile .d{font-size:11.5px;color:var(--muted-2)}
.ph-tile .gap{position:absolute;top:10px;right:11px;font-size:11px;color:var(--warn)}

/* ---------- 项目卡片 ---------- */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.proj-card {
  border: 1px solid var(--line, #e5eaf0);
  border-radius: 11px;
  background: #fff;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proj-card.on {
  border-color: var(--primary, #2b6cb0);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .12);
}
.proj-card .pc-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.proj-card .pc-name { font-size: 15px; font-weight: 700; color: #1f2937; line-height: 1.4; }
.proj-card .pc-code { font-size: 11.5px; color: #8b98a8; margin-top: 2px; }
.proj-card .pc-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12.5px;
  color: #4b5563;
}
.proj-card .pc-kv > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #eef1f5; padding-bottom: 3px; }
.proj-card .pc-kv span { color: #8b98a8; }
.proj-card .pc-kv b { color: #1f2937; font-variant-numeric: tabular-nums; }
.proj-card .pc-kv b.warn { color: #c2410c; }
.proj-card .pc-bar { display: flex; align-items: center; gap: 8px; }
.proj-card .pc-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.proj-card .pstep {
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f3f5f8;
  color: #9aa7b6;
  border: 1px solid #eceff3;
}
.proj-card .pstep.on { background: #eaf4ff; color: #2b6cb0; border-color: #cfe4fa; }
.proj-card .pc-foot { display: flex; align-items: center; gap: 6px; padding-top: 2px; border-top: 1px solid #f0f3f7; margin-top: 2px; padding-top: 9px; }
.proj-tag { background: #eef4fb; color: #3b6ea5; border: 1px solid #d8e6f6; }

/* ---------- 邮件预览弹窗 ---------- */
.mail-head { display: grid; gap: 9px; }
.mail-attach {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: #f6f9fc;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  font-size: 13px;
}
.mail-attach .ic { font-size: 17px; }
.mail-body {
  width: 100%;
  min-height: 250px;
  padding: 11px 12px;
  border: 1px solid var(--line, #dfe6ee);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.75;
  resize: vertical;
  box-sizing: border-box;
}
.mail-warn { display: flex; align-items: center; gap: 8px; }

/* ---------- 其他 ---------- */
.muted{color:var(--muted)}
.small{font-size:11.5px}
.mono{font-family:Consolas,"Courier New",monospace;font-size:12px}
.nowrap{white-space:nowrap}
.row-flex{display:flex;align-items:center;gap:8px}
.amt{font-variant-numeric:tabular-nums;font-weight:600}
.amt.big{font-size:15px}
.drop-mask{position:fixed;inset:0;background:rgba(31,95,169,.9);color:#fff;display:none;place-items:center;z-index:500;font-size:22px;font-weight:600;border:4px dashed rgba(255,255,255,.6)}
.drop-mask.on{display:grid}
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
@media (max-width:1180px){.split{grid-template-columns:1fr}}
.bar{height:6px;border-radius:4px;background:#e9eef5;overflow:hidden;min-width:56px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--ok));border-radius:4px}
.bar.warn i{background:linear-gradient(90deg,#e0a53f,var(--warn))}
.steps{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.steps .s{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding:4px 11px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.steps .s.on{background:var(--primary-soft);border-color:#cfe0f3;color:var(--primary);font-weight:600}
.steps .s.done{color:var(--ok);border-color:#c9ebd9;background:var(--ok-soft)}
.kv{display:grid;grid-template-columns:88px 1fr;gap:6px 12px;font-size:12.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.mini-tbl{width:100%;font-size:12.5px;border-collapse:collapse}
.mini-tbl th{text-align:left;color:var(--muted);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line-2);font-size:11.5px}
.mini-tbl td{padding:6px 8px;border-bottom:1px solid var(--line-2)}
.mini-tbl tr:last-child td{border-bottom:0}
.alert{display:flex;gap:9px;padding:10px 13px;border-radius:var(--radius-sm);font-size:12.5px;margin-bottom:12px;align-items:flex-start}
.alert.warn{background:var(--warn-soft);color:#8a5210;border:1px solid #f0dcbd}
.alert.info{background:var(--primary-soft);color:#1a4f8c;border:1px solid #cfe0f3}
.alert.ok{background:var(--ok-soft);color:#146b45;border:1px solid #c9ebd9}
.alert.err{background:var(--danger-soft);color:#8f2a1e;border:1px solid #f2cec9}
.cat-chip{display:inline-block;background:#eef3f9;border:1px solid #e0e8f2;color:#4a5b71;border-radius:5px;padding:0 6px;font-size:11.5px;margin-right:4px}
.grp{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:9px;overflow:hidden}
.grp-h{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fafcfe;border-bottom:1px solid var(--line-2)}
.grp-h .nm{font-weight:600}
.grp-h .grow{flex:1}

/* ===== 登录页 ===== */
.login-body{
  background:
    radial-gradient(1100px 520px at 12% -8%, #1b4b7d 0%, rgba(27,75,125,0) 62%),
    radial-gradient(900px 460px at 92% 108%, #0f6f68 0%, rgba(15,111,104,0) 60%),
    #0d1c2c;
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.login-wrap{width:100%;max-width:392px}
.login-card{
  background:var(--panel);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.42);
  padding:30px 30px 20px;animation:lf-in .34s ease-out;
}
@keyframes lf-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.login-brand{display:flex;gap:12px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line-2);margin-bottom:22px}
.login-brand .brand-mark{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:linear-gradient(135deg,#2b7fd4,#0f9b8e);color:#fff;display:grid;place-items:center;font-weight:700;font-size:19px}
.login-brand .brand-txt{display:flex;flex-direction:column;min-width:0}
.login-brand .brand-txt strong{font-size:16px;letter-spacing:.5px;color:var(--text)}
.login-brand .brand-txt span{font-size:11.5px;color:var(--muted)}
.login-form{display:flex;flex-direction:column;gap:14px}
.lf{display:flex;flex-direction:column;gap:6px}
.lf>span:first-child{font-size:12.5px;color:var(--muted);font-weight:600}
.lf input{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:#fbfdff;
  outline:none;transition:.15s;width:100%;
}
.lf input:focus{border-color:var(--primary-2);background:#fff;box-shadow:0 0 0 3px rgba(43,127,212,.13)}
.lf-pw{position:relative;display:block}
.lf-pw input{padding-right:54px}
.pw-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--muted);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:5px;
}
.pw-eye:hover{color:var(--primary);background:var(--primary-soft)}
.login-err{color:var(--danger);font-size:12.5px;min-height:17px;line-height:1.4}
.login-btn{justify-content:center;padding:11px;font-size:14px;letter-spacing:3px;margin-top:2px}
.login-btn:disabled{opacity:.72;cursor:default}
.login-foot{
  display:flex;flex-direction:column;gap:3px;align-items:center;margin-top:20px;padding-top:14px;
  border-top:1px solid var(--line-2);color:var(--muted-2);font-size:11.5px;text-align:center;
}
.login-foot .bad{color:var(--danger)}
.login-foot .beian a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;padding-bottom:1px}
.login-foot .beian a:hover{color:var(--txt,#333)}
@media (max-width:430px){.login-card{padding:24px 20px 16px}}

/* ===== 侧边栏：当前登录用户 ===== */
.side-user{
  display:flex;align-items:center;gap:9px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.07);
  color:#a9bdd2;font-size:12px;
}
.side-user .su-av{
  width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:linear-gradient(135deg,#2b7fd4,#0f9b8e);
  color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;
}
.side-user .su-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.side-user .su-tx b{color:#eaf2fa;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .su-tx em{font-style:normal;color:#6e8aa5;font-size:11px}
.side-user button{
  border:0;background:rgba(255,255,255,.08);color:#b9cde1;border-radius:6px;padding:4px 8px;
  cursor:pointer;font-size:11.5px;white-space:nowrap;
}
.side-user button:hover{background:rgba(255,255,255,.17);color:#fff}

/* ===== 强制改密 / 账号管理弹窗内的行 ===== */
.pw-strength{font-size:11.5px;color:var(--muted);margin-top:2px}
.pw-strength .ok{color:var(--ok)}
.pw-strength .bad{color:var(--danger)}
.role-chip{display:inline-block;border-radius:5px;padding:1px 7px;font-size:11.5px;font-weight:600}
.role-chip.admin{background:var(--purple-soft);color:#4c33a8}
.role-chip.user{background:#eef3f9;color:#4a5b71}
.dis-chip{display:inline-block;border-radius:5px;padding:1px 7px;font-size:11.5px;background:#f1f3f6;color:#8b95a3}
.dis-chip.on{background:var(--danger-soft);color:var(--danger)}

/* ===== 移动端响应式（手机竖屏 / 横屏 + 小平板） ===== */
/* 汉堡按钮与抽屉遮罩：桌面端默认隐藏，窄屏下生效 */
.nav-toggle{
  display:none;flex:0 0 38px;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;border-radius:8px;font-size:19px;line-height:1;
  cursor:pointer;color:var(--text);margin-right:10px;
}
.nav-mask{
  display:none;position:fixed;inset:0;background:rgba(13,26,44,.45);z-index:90;
}

@media (max-width:1024px){
  /* 主内容占满全屏，侧边栏变成左侧抽屉 */
  #app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:234px;z-index:100;
    transform:translateX(-103%);transition:transform .22s ease;
    box-shadow:0 0 44px rgba(0,0,0,.35);
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .nav-mask{display:block}
  .nav-toggle{display:inline-flex}

  /* 顶栏与内容区收紧，给窄屏腾出空间 */
  .topbar{padding:10px 12px;gap:10px}
  .tb-left{flex:1;min-width:0}
  .tb-left h1{font-size:15px}
  .tb-left p{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .content{padding:14px 12px 44px}

  /* 多列表单 / 布局在窄屏下堆叠成一列 */
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .toolbar{flex-wrap:wrap}
  .card-h{flex-wrap:wrap}

  /* 表格允许横向滑动（触屏顺滑） */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 弹窗适配小屏 */
  .modal{max-width:96vw;max-height:94vh}
  .modal-b{padding:14px 14px}
  .modal-f{flex-wrap:wrap}

  /* KPI 卡片在窄屏更紧凑 */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

  /* 流程条、对账汇总可横向滑动 */
  .flow{overflow-x:auto;-webkit-overflow-scrolling:touch}
}