:root{
  --blue:#185fa5; --blue-d:#0c447c; --blue-bg:#e6f1fb;
  --green:#0f6e56; --green-bg:#e1f5ee;
  --amber:#854f0b; --amber-bg:#faeeda;
  --red:#a32d2d; --red-bg:#fcebeb;
  --purple:#534ab7; --purple-bg:#eeedfe;
  --bg:#f4f6f9; --card:#fff; --border:#e4e8ee; --border2:#d6dce5;
  --text:#1f2937; --muted:#6b7280; --hint:#9aa3af;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* 单据附件 */
.att-prev{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.att-chip{background:var(--blue-bg); color:var(--blue-d); border:1px solid #cfe0f3; border-radius:14px; padding:2px 10px; font-size:12px;}
.att-row{margin-top:5px; display:flex; flex-wrap:wrap; gap:6px;}
.att-link{display:inline-block; background:var(--green-bg); color:var(--green); border:1px solid #bfe6da; border-radius:4px; padding:1px 8px; font-size:12px; text-decoration:none;}
.att-link:hover{filter:brightness(0.96);}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6;}
.hidden{display:none !important;}

/* ---------- 按钮 ---------- */
.btn{border:1px solid var(--border2); background:#fff; color:var(--text); padding:8px 16px; border-radius:8px; font-size:13.5px; cursor:pointer; transition:.15s; font-family:inherit;}
.btn:hover{border-color:var(--blue); color:var(--blue);}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn.primary:hover{background:var(--blue-d); color:#fff;}
.btn.success{background:var(--green); border-color:var(--green); color:#fff;}
.btn.success:hover{opacity:.9; color:#fff;}
.btn.warn{background:var(--amber); border-color:var(--amber); color:#fff;}
.btn.danger{background:var(--red); border-color:var(--red); color:#fff;}
.btn.ghost{background:transparent;}
.btn.ghost-light{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); color:#fff;}
.btn.ghost-light:hover{background:rgba(255,255,255,.28); color:#fff; border-color:#fff;}
.btn.sm{padding:5px 11px; font-size:12.5px;}
.btn.block{width:100%; padding:11px; font-size:15px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ---------- 登录页 ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; background:linear-gradient(135deg,#0c447c 0%,#185fa5 55%,#378add 100%);}
.login-card{width:820px; max-width:100%; background:#fff; border-radius:16px; padding:32px 36px; box-shadow:0 12px 40px rgba(12,68,124,.25);}
.login-head{text-align:center; margin-bottom:26px;}
.login-head h1{font-size:24px; font-weight:600; color:var(--blue-d);}
.login-head p{font-size:12.5px; color:var(--muted); margin-top:5px; letter-spacing:.5px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%; padding:11px 13px; border:1px solid var(--border2); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--text);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue);}
.field textarea{min-height:60px; resize:vertical;}
.login-err{color:var(--red); font-size:12.5px; min-height:20px; margin-bottom:6px;}

.demo-accounts{margin-top:28px; border-top:1px solid var(--border); padding-top:20px;}
.da-title{font-size:13px; font-weight:600; color:var(--blue-d); margin-bottom:10px;}
.da-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.da-table th{background:#f7f9fc; color:var(--muted); font-weight:600; text-align:left; padding:7px 10px; border-bottom:1px solid var(--border);}
.da-table td{padding:7px 10px; border-bottom:1px solid var(--border);}
.da-table tbody tr{cursor:pointer;}
.da-table tbody tr:hover{background:var(--blue-bg);}
.da-table b{color:var(--blue); font-family:ui-monospace,Menlo,Consolas,monospace;}
.da-tip{margin-top:10px; font-size:12px; color:var(--muted); background:#f7f9fc; border-left:3px solid var(--blue); padding:8px 12px; border-radius:0 6px 6px 0;}

/* ---------- 顶栏 ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:60px; background:linear-gradient(90deg,#0c447c,#185fa5); color:#fff; position:sticky; top:0; z-index:20;}
.brand{display:flex; align-items:center; gap:12px;}
.logo{background:rgba(255,255,255,.18); border-radius:8px; padding:6px 12px; font-weight:700; font-size:14px; letter-spacing:1px;}
.bt{font-size:15.5px; font-weight:600;}
.bs{font-size:11.5px; opacity:.8;}
.user-box{display:flex; align-items:center; gap:12px;}
.u-info{text-align:right;}
.un{font-size:13.5px; font-weight:600;}
.ur{font-size:11.5px; opacity:.85;}

/* ---------- 布局 ---------- */
.main{display:flex; min-height:calc(100vh - 60px);}
.sidebar{width:210px; flex-shrink:0; background:#fff; border-right:1px solid var(--border); padding:14px 10px;}
.sidebar .grp{font-size:11px; color:var(--hint); padding:12px 12px 6px; letter-spacing:1px;}
.sidebar .mi{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text); cursor:pointer; margin-bottom:2px;}
.sidebar .mi:hover{background:#f4f6f9;}
.sidebar .mi.active{background:var(--blue-bg); color:var(--blue); font-weight:600;}
.sidebar .mi .dot{width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0;}
.content{flex:1; padding:20px 24px; overflow-x:auto;}

/* ---------- 页面元素 ---------- */
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px;}
.page-head h2{font-size:18px; font-weight:600;}
.page-head .sub{font-size:12.5px; color:var(--muted); margin-top:3px;}
.perm-note{font-size:12px; color:var(--muted); background:#f7f9fc; border:1px dashed var(--border2); border-radius:8px; padding:7px 12px; margin-bottom:14px;}
.perm-note b{color:var(--blue);}

.panel{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 20px;}
.panel+.panel{margin-top:14px;}
.panel h3{font-size:15px; font-weight:600; margin-bottom:4px;}
.panel .pd{font-size:12.5px; color:var(--muted); margin-bottom:12px;}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px;}
.stat{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px;}
.stat .k{font-size:12px; color:var(--muted);}
.stat .v{font-size:22px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums;}
.stat .v.sm{font-size:17px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:9px 11px; text-align:left; border-bottom:1px solid var(--border);}
th{background:#fafbfc; color:var(--muted); font-weight:600; font-size:12.5px; white-space:nowrap;}
tbody tr:hover{background:#fafcff;}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;}
.acts{white-space:nowrap;}
.acts .btn{margin-right:5px;}
.empty{text-align:center; color:var(--hint); padding:32px 0; font-size:13px;}

.tag{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:500; white-space:nowrap;}
.tag.submitted{background:var(--blue-bg); color:var(--blue);}
.tag.reviewed{background:var(--purple-bg); color:var(--purple);}
.tag.matched{background:var(--amber-bg); color:var(--amber);}
.tag.posted{background:var(--amber-bg); color:var(--amber);}
.tag.checked{background:var(--green-bg); color:var(--green);}
.tag.paid,.tag.settled,.tag.executed,.tag.received{background:var(--green-bg); color:var(--green);}
.tag.rejected,.tag.returned{background:var(--red-bg); color:var(--red);}
.tag.pending,.tag.pending_cfo{background:var(--amber-bg); color:var(--amber);}
.tag.approved{background:var(--blue-bg); color:var(--blue);}
.tag.invoiced{background:var(--purple-bg); color:var(--purple);}
.tag.在用{background:var(--green-bg); color:var(--green);}
.tag.pending{background:var(--amber-bg); color:var(--amber);}
.tag.已处置{background:#f0f2f5; color:var(--muted);}
.tag.gray{background:#f0f2f5; color:var(--muted);}

.ai{border:1px solid var(--border); border-left:4px solid var(--green); border-radius:8px; padding:9px 12px; margin-top:8px; background:#fbfefd; font-size:12.5px;}
.ai.warn{border-left-color:var(--amber); background:var(--amber-bg);}
.ai.reject{border-left-color:var(--red); background:var(--red-bg);}
.ai b{display:block; margin-bottom:3px;}
.ai ul{margin-left:17px;}
.ai li{margin:2px 0;}

.flow-line{font-size:12px; color:var(--muted);}
.flow-line span{display:inline-block; margin-right:6px;}

.balance-ok{border:1px solid var(--green); background:var(--green-bg); border-radius:10px; padding:12px 16px; font-weight:600; color:var(--green);}
.balance-no{border:1px solid var(--red); background:var(--red-bg); border-radius:10px; padding:12px 16px; font-weight:600; color:var(--red);}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.form-grid .full{grid-column:1/-1;}

/* 凭证样式 */
.voucher{background:#fff; border:1px solid var(--border2); border-radius:8px; overflow:hidden;}
.voucher .vh{background:#f7f9fc; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.voucher .vh b{color:var(--blue-d);}
.voucher table td,.voucher table th{padding:7px 12px;}

/* ---------- 弹窗 ---------- */
.modal-mask{position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:center; z-index:60; padding:40px 20px; overflow:auto;}
.modal{background:#fff; border-radius:14px; width:680px; max-width:100%; box-shadow:0 20px 50px rgba(0,0,0,.2);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);}
.modal-head h3{font-size:16px; font-weight:600;}
.modal-head .x{background:none; border:none; font-size:24px; color:var(--muted); cursor:pointer; line-height:1;}
.modal-body{padding:20px 22px; max-height:64vh; overflow:auto;}
.modal-foot{padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px;}

/* ---------- Toast ---------- */
.toast{position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1f2937; color:#fff; padding:11px 22px; border-radius:10px; font-size:13.5px; z-index:99; opacity:0; transition:.25s; pointer-events:none; max-width:80vw;}
.toast.show{opacity:1;}
.toast.err{background:var(--red);}
.toast.ok{background:var(--green);}

@media (max-width:900px){
  .main{flex-direction:column;}
  .sidebar{width:100%; border-right:none; border-bottom:1px solid var(--border); display:flex; overflow-x:auto;}
  .sidebar .grp{display:none;}
  .sidebar .mi{white-space:nowrap;}
  .grid2,.form-grid{grid-template-columns:1fr;}
}