:root{
  --bg:#f5f7fa; --panel:#ffffff; --line:#e4e8ef; --line2:#eef1f6;
  --text:#1f2937; --text2:#5b6675; --muted:#8a94a6;
  --primary:#2f6feb; --primary-soft:#eaf1fe;
  --ok:#0f9960; --ok-soft:#e7f6ef;
  --warn:#c77700; --warn-soft:#fdf3e2;
  --danger:#d64545; --danger-soft:#fdeceb;
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
body{background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:600}
small{color:var(--muted);font-size:12px}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--panel);border-bottom:1px solid var(--line);padding:12px 24px;
  position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;border-radius:9px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:18px;font-weight:700}
.brand h1{font-size:17px;letter-spacing:.3px}
.brand p{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:9px}
.nav button{border:0;background:transparent;padding:7px 16px;border-radius:7px;cursor:pointer;
  color:var(--text2);font-size:13px;font-family:inherit}
.nav button:hover{color:var(--text)}
.nav button.active{background:var(--panel);color:var(--primary);font-weight:600;box-shadow:var(--shadow)}

/* 顶栏小区切换 */
.commbox{display:flex;align-items:center;gap:8px}
.commbox .comm-label{font-size:11.5px;color:var(--muted);white-space:nowrap}
.comm-dd{position:relative}
.comm-current{display:inline-flex;align-items:center;gap:8px;min-width:150px;max-width:230px;
  height:34px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  appearance:none;-webkit-appearance:none;
  color:var(--text);font:600 13px/1 inherit;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background .15s}
.comm-current:hover{border-color:var(--primary)}
.comm-current .cn{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comm-current .cc{flex:0 0 auto;font-size:11px;color:var(--muted);font-weight:500}
.comm-current .caret{flex:0 0 auto;width:0;height:0;border:4px solid transparent;
  border-top-color:var(--muted);margin-top:3px;transition:transform .18s}
.comm-dd.open .comm-current{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.comm-dd.open .comm-current .caret{transform:rotate(180deg);border-top-color:var(--primary)}
.comm-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;width:max-content;max-width:320px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(16,24,40,.14);padding:6px;z-index:60;
  animation:commIn .14s ease-out}
@keyframes commIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.comm-menu .cm-head{font-size:11.5px;color:var(--muted);padding:6px 10px 6px}
.comm-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  cursor:pointer;font-size:13px;color:var(--text)}
.comm-item:hover{background:var(--bg)}
.comm-item .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 auto}
.comm-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comm-item .cd{font-size:11px;color:var(--muted)}
.comm-item .ck{width:16px;height:16px;flex:0 0 auto;color:var(--primary);font-weight:700;font-size:13px}
.comm-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.comm-item.active .dot{background:var(--primary);box-shadow:0 0 0 3px rgba(47,111,235,.18)}
.comm-item.active .cd{color:var(--primary)}
.comm-menu .cm-empty{padding:14px 10px;text-align:center;color:var(--muted);font-size:12.5px}

/* 顶栏用户信息 */
.userbox{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;font-weight:700;font-size:14px}
.uinfo{display:flex;flex-direction:column;line-height:1.25;margin-right:2px}
.uinfo b{font-size:13px}
.uinfo span{font-size:11.5px;color:var(--muted)}

/* 登录 */
.login-mask{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:linear-gradient(135deg,#eef3fb 0%,#f7f9fc 100%)}
.login-mask[hidden]{display:none}
.login-box{width:380px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 48px rgba(16,24,40,.14);padding:28px}
.login-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.login-head .logo.big{width:48px;height:48px;font-size:22px;border-radius:12px}
.login-head h2{font-size:17px}
.login-head p{font-size:12.5px;color:var(--muted);margin-top:2px}
.btn.block{width:100%;height:40px;font-size:14.5px;margin-top:6px}
.captcha-row{display:flex;gap:8px;align-items:center}
.captcha-row input{flex:1}
.captcha-row img{height:40px;border-radius:6px;border:1px solid var(--line);cursor:pointer;background:#fff}

/* 员工管理 */
.subtabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:9px;margin-bottom:14px;width:max-content}
.subtabs button{border:0;background:transparent;padding:6px 16px;border-radius:7px;cursor:pointer;
  color:var(--text2);font-size:13px;font-family:inherit}
.subtabs button.active{background:var(--panel);color:var(--primary);font-weight:600;box-shadow:var(--shadow)}
.tabpane{display:none}
.tabpane.active{display:block}
.perm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.perm-grid label{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid var(--line2);
  border-radius:8px;cursor:pointer;font-size:13px;background:#fff}
.perm-grid label:hover{border-color:var(--primary)}
.perm-grid input{margin-top:3px}
.perm-grid .pk{font-weight:600}
.perm-grid .pd{font-size:11.5px;color:var(--muted)}
.mini-check{margin-left:10px;font-size:12px;font-weight:400;color:var(--text2);
  display:inline-flex;align-items:center;gap:4px}
.mini-check input{margin:0}
.perm-tags{display:flex;flex-wrap:wrap;gap:4px}
.perm-tags span{font-size:11.5px;background:var(--primary-soft);color:var(--primary);
  border-radius:5px;padding:1px 6px}

main{max-width:1400px;margin:0 auto;padding:20px 24px 60px}
.view{display:none}
.view.active{display:block}

/* 卡片 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.card h3{font-size:14px;margin-bottom:12px;color:var(--text)}
.hint{color:var(--text2);font-size:12.5px;background:var(--bg);border:1px solid var(--line2);
  border-radius:8px;padding:10px 12px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.kpi .label{font-size:12.5px;color:var(--muted)}
.kpi .value{font-size:24px;font-weight:650;margin-top:6px;letter-spacing:-.4px}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.blue .value{color:var(--primary)}
.kpi.red  .value{color:var(--danger)}
.kpi.green .value{color:var(--ok)}

/* 表格 */
.table-wrap{overflow:auto}
.table-wrap.big{max-height:62vh}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--text2);background:var(--bg);
  padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;z-index:2}
td{padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
tbody tr:hover{background:#fafbfd}
.num{text-align:right;font-variant-numeric:tabular-nums}
.link{color:var(--primary);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}
.empty{padding:26px;text-align:center;color:var(--muted)}

/* 标签 */
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500}
.tag.gray{background:var(--bg);color:var(--text2)}
.tag.blue{background:var(--primary-soft);color:var(--primary)}
.tag.green{background:var(--ok-soft);color:var(--ok)}
.tag.red{background:var(--danger-soft);color:var(--danger)}
.tag.orange{background:var(--warn-soft);color:var(--warn)}

/* 表单控件 */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
input,select{border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:13px;
  font-family:inherit;background:#fff;color:var(--text);outline:none}
input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
input[type=search]{width:230px}
.btn{border:1px solid var(--line);background:#fff;padding:7px 15px;border-radius:7px;
  cursor:pointer;font-size:13px;font-family:inherit;color:var(--text)}
.btn:hover{border-color:#c9d2e0;background:#fafbfd}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:#2560d4}
.btn.danger{color:var(--danger);border-color:#f0c9c8}
.btn.sm{padding:4px 10px;font-size:12px}
.sumbar{color:var(--text2);font-size:12.5px;margin-bottom:10px;display:flex;gap:18px;flex-wrap:wrap}
.sumbar b{color:var(--text);font-weight:600}

/* 分页 */
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.pager button{border:1px solid var(--line);background:#fff;padding:5px 11px;border-radius:6px;
  cursor:pointer;font-size:12.5px;font-family:inherit}
.pager button.active{background:var(--primary);border-color:var(--primary);color:#fff}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.pager .info{color:var(--muted);font-size:12.5px;margin-right:auto}

/* 弹层（居中 dialog） */
.mask{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px}
.mask[hidden]{display:none}
.dialog{background:#fff;border-radius:12px;width:520px;max-width:100%;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 20px 48px rgba(16,24,40,.18)}
.dialog.wide{width:860px}
.dialog-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:16px}
.close{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--muted)}
.close:hover{color:var(--text)}
.dialog-body{padding:18px 20px;overflow:auto}
.dialog-foot{padding:12px 20px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:10px}

/* 详情内容 */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px;margin-bottom:18px}
.dl div{font-size:13px}
.dl .k{color:var(--muted);font-size:12px}
.dl .v{color:var(--text);word-break:break-all}
.sec-title{font-size:13px;font-weight:600;color:var(--text2);margin:16px 0 8px;
  padding-left:8px;border-left:3px solid var(--primary)}
.charge{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.charge .box{background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:10px 12px}
.charge .box .k{font-size:12px;color:var(--muted)}
.charge .box .v{font-size:17px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}

/* 表单 */
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.row2 > label{display:grid;grid-template-rows:auto 1fr;align-items:end;gap:5px}
.row2.align-start > label{align-items:start}
.row2 input,.row2 select{height:34px;box-sizing:border-box}
.req{color:var(--danger);font-weight:700;margin-left:1px}
.label-text{display:inline-flex;align-items:center;gap:1px;line-height:1.2;white-space:nowrap}
input.readonly{background:var(--bg);color:var(--text);cursor:default}
.tip{font-size:12.5px;color:var(--text2);background:var(--bg);border:1px solid var(--line2);
  border-radius:7px;padding:9px 11px}
.tip.err{color:var(--danger);background:var(--danger-soft);border-color:#f5d5d4}
.ac{position:relative}
.ac .item{position:absolute;z-index:5;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:7px;box-shadow:var(--shadow);max-height:200px;overflow:auto;top:2px}
.ac .item div{padding:7px 10px;cursor:pointer;font-size:13px}
.ac .item div:hover{background:var(--primary-soft)}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  background:#1f2937;color:#fff;padding:10px 20px;border-radius:8px;font-size:13.5px;z-index:200;
  box-shadow:0 8px 24px rgba(16,24,40,.24)}
.toast[hidden]{display:none}

/* 分项收款 */
.pay-items{display:flex;flex-direction:column;gap:8px}
.pay-item{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border:1px solid var(--line2);
  border-radius:8px;background:#fff;transition:.15s}
.pay-item:hover{border-color:var(--primary)}
.pay-item.disabled{background:var(--bg);opacity:.7;border-style:dashed}
.pay-item.disabled .name{color:var(--muted)}
.pay-item-row{display:flex;align-items:center;gap:8px;width:100%}
.pay-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.pay-item .name{min-width:68px;font-size:13.5px;color:var(--text);font-weight:500}
.pay-meta{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:3px;flex-wrap:wrap}
.pay-meta b{color:var(--text);font-weight:600;margin-left:2px}
.pay-item .discount-wrap,.pay-item .input-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0}
.pay-item .discount-wrap span,.pay-item .input-wrap span{color:var(--muted);font-size:12px}
.pay-item .pay-discount{width:54px;text-align:right;border:1px solid var(--line);border-radius:6px;
  padding:5px 6px;font-size:13px}
.pay-item .pay-amt{width:100px;text-align:right;border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;font-size:13.5px;font-variant-numeric:tabular-nums}
.pay-item .pay-amt:disabled,.pay-item .pay-discount:disabled{background:var(--bg);color:var(--muted)}
.pay-item .paid-tag{margin-left:auto;font-size:11px;color:var(--ok);background:var(--ok-soft);padding:2px 8px;border-radius:10px}
.pay-total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  padding:11px 14px;border-radius:8px;background:var(--primary-soft);border:1px solid #d2e0fc}
.pay-total span:first-child{font-size:13px;color:var(--text2);font-weight:500}
.pay-total .totals{display:flex;align-items:center;gap:18px}
.pay-total .totals span{font-size:13px;color:var(--text2)}
.pay-total .totals b{font-size:16px;font-weight:650;color:var(--primary);font-variant-numeric:tabular-nums;margin-left:3px}

/* 日期选择器 */
input.date-input{cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 8px center/16px 16px;padding-right:30px}
input.date-input::placeholder{color:var(--muted)}
.pay-hint{font-size:12px;color:var(--muted);margin:-4px 0 10px}
.dp-popup{position:fixed;z-index:300;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(16,24,40,.18);padding:16px;width:300px;max-width:calc(100vw - 20px);font-size:13px;
  box-sizing:border-box;overflow:hidden;animation:dpIn .14s ease-out}
@keyframes dpIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 4px}
.dp-head button{width:28px;height:28px;border:1px solid var(--line2);background:#fff;border-radius:8px;
  cursor:pointer;color:var(--text2);font-size:18px;line-height:1;display:grid;place-items:center;transition:.15s}
.dp-head button:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.dp-title{font-weight:650;color:var(--text);font-size:14px}
.dp-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:8px;width:100%}
.dp-weekdays span{text-align:center;font-size:11.5px;color:var(--muted);padding:5px 0;font-weight:500}
.dp-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:100%}
.dp-day{height:36px;min-width:0;display:grid;place-items:center;border-radius:9px;cursor:pointer;font-size:13px;
  color:var(--text);background:transparent;transition:background .12s}
.dp-day:hover{background:var(--primary-soft)}
.dp-day.empty{pointer-events:none;visibility:hidden}
.dp-day.today{box-shadow:inset 0 0 0 2px var(--primary);color:var(--primary);font-weight:700}
.dp-day.selected{background:var(--primary);color:#fff;font-weight:700;box-shadow:none}
.dp-day.selected:hover{background:#2560d4}
.dp-foot{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--line2)}
.dp-foot button{border:0;background:transparent;color:var(--primary);cursor:pointer;font-size:13px;padding:5px 10px;border-radius:6px;transition:.12s}
.dp-foot button:hover{background:var(--primary-soft)}

/* 房屋标记 */
.tags-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:180px}
.tags-cell .house-tag{font-size:11px;padding:2px 7px;border-radius:10px;background:var(--primary-soft);color:var(--primary);white-space:nowrap}
.tags-cell .house-tag.lawyer{background:var(--danger-soft);color:var(--danger)}
.tags-cell .house-tag.sue{background:var(--warn-soft);color:var(--warn)}
.tags-cell .house-tag.paid{background:var(--ok-soft);color:var(--ok)}
.tags-cell .tag-edit{width:22px;height:22px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--muted);cursor:pointer;font-size:12px;display:grid;place-items:center;flex-shrink:0}
.tags-cell .tag-edit:hover{border-color:var(--primary);color:var(--primary)}
.tag-checks{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tag-checks label{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line2);border-radius:8px;cursor:pointer;font-size:13px;background:#fff}
.tag-checks label:hover{border-color:var(--primary)}
.tag-checks input{width:16px;height:16px;accent-color:var(--primary);margin:0}
tbody tr.row-lawyer{background:#fff7ed}
tbody tr.row-sued{background:#fef2f2}
tbody tr.row-lawyer:hover{background:#ffedd5}
tbody tr.row-sued:hover{background:#fee2e2}
tbody tr.row-paid{background:#f0fdf4}
tbody tr.row-paid:hover{background:#dcfce7}