:root{
  --bg:#f5f6f7;
  --panel:#fff;
  --line:#e5e6eb;
  --line-2:#eef0f2;
  --text:#1f2329;
  --text-2:#4e5969;
  --muted:#8f959e;
  --blue:#1677ff;
  --blue-soft:#e8f1ff;
  --green:#00b42a;
  --green-soft:#e8ffea;
  --orange:#ff7d00;
  --orange-soft:#fff7e8;
  --red:#f53f3f;
  --red-soft:#ffece8;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--text);
  font:12.5px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
code{background:#f2f3f5;padding:1px 5px;border-radius:3px;font-size:12px;color:var(--text-2)}
a{color:var(--blue);text-decoration:none}
b{font-weight:600}

/* ===== 布局 ===== */
.app{display:flex;height:100vh;overflow:hidden}
.side{width:196px;flex:none;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.side-brand{display:flex;align-items:center;gap:9px;padding:14px 16px 12px}
.logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#1677ff,#4aa8ff);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.side-brand b{display:block;font-size:13.5px;line-height:1.2}
.side-brand small{color:var(--muted);font-size:11px}
.side-nav{flex:1;overflow:auto;padding:4px 8px}
.grp{font-size:11px;color:var(--muted);padding:12px 8px 5px;letter-spacing:.4px}
.nav{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:4px;color:var(--text-2);font-size:13px;cursor:pointer;user-select:none}
.nav i{font-style:normal;width:14px;color:var(--muted);font-size:12px;text-align:center}
.nav:hover{background:#f7f8fa}
.nav.active{background:var(--blue-soft);color:var(--blue);font-weight:600}
.nav.active i{color:var(--blue)}
.side-foot{padding:10px 14px;border-top:1px solid var(--line-2);color:var(--muted);font-size:11px;display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:52px;flex:none;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 16px}
.topbar h1{font-size:14px;margin:0;font-weight:600}
.top-actions{display:flex;gap:8px}

.view{display:none;flex:1;min-height:0;overflow:hidden}
.view.active{display:flex;flex-direction:column}
.cols{display:grid;grid-template-columns:268px minmax(0,1fr) 252px;gap:10px;padding:10px;flex:1;min-height:0}

/* ===== 面板 ===== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;
  min-height:0;overflow:hidden}
.list-panel,.rail{min-height:0}
.detail-panel{min-height:0;overflow:auto}
.panel-hd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-2);flex:none}
.panel-hd b{font-size:13px}
.panel-hd .muted{margin-left:auto;font-size:11px}
.panel-hd.bt{border-top:1px solid var(--line-2);border-bottom:0;margin-top:8px}
.panel-hd.bt .btn{margin-left:auto}
.pad{padding:12px}
.muted{color:var(--muted)}

/* ===== 列表 ===== */
.list{overflow:auto;flex:1;min-height:0}
.list-search{padding:8px 10px;border-bottom:1px solid var(--line-2)}
.item{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.item:hover{background:#fafbfc}
.item.on{background:var(--blue-soft)}
.item .av{width:26px;height:26px;border-radius:50%;background:#eef1f5;color:var(--text-2);display:flex;
  align-items:center;justify-content:center;font-size:11px;flex:none}
.item.on .av{background:#d6e6ff;color:var(--blue)}
.item .txt{min-width:0;flex:1}
.item .t1{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .t2{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .amt{font-size:13px;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pill{font-size:11px;padding:0 6px;border-radius:3px;line-height:17px;display:inline-block;white-space:nowrap}
.pill.ok{background:var(--green-soft);color:var(--green)}
.pill.bad{background:var(--red-soft);color:var(--red)}
.pill.warn{background:var(--orange-soft);color:var(--orange)}
.pill.gray{background:#f2f3f5;color:var(--muted)}

/* ===== 详情 ===== */
.detail-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:4px;padding:40px}
.detail-empty p{margin:0;font-size:13px;color:var(--text-2)}
.detail-empty span{font-size:12px}
.detail-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 10px}
.dh-title{font-size:17px;font-weight:700;letter-spacing:-.2px}
.dh-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.stat{padding:12px 16px;border-right:1px solid var(--line-2)}
.stat:last-child{border-right:0}
.stat .k{font-size:11.5px;color:var(--muted)}
.stat .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.3px;margin-top:2px}
.stat .s{font-size:11px;color:var(--muted);margin-top:1px}
.stat.ok .v{color:var(--green)}
.stat.bad .v{color:var(--red)}

.tabs-mini{display:flex;gap:18px;padding:0 16px;border-bottom:1px solid var(--line-2)}
.tabs-mini button{background:none;border:0;padding:9px 0;font-size:12.5px;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent}
.tabs-mini button.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.dtab{display:none;padding:10px 16px 16px}
.dtab.on{display:block}

/* ===== 表格 ===== */
.table-wrap{overflow:auto;max-height:100%}
.table-wrap.big{max-height:none}
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
table.grid th{position:sticky;top:0;background:#f7f8fa;color:var(--text-2);font-weight:600;text-align:left;
  padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
table.grid td{padding:7px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.grid tbody tr:hover{background:#fafbfc}
table.grid td.num,table.grid th.num{text-align:right}
table.grid tr.total td{font-weight:700;background:#f7f8fa;border-top:1px solid var(--line);border-bottom:0}
table.grid tr.dim td{color:#b8bec7}
.warncell{color:var(--orange);font-weight:600}

/* ===== 右栏 ===== */
.rail{overflow:auto}
.rail-sec{padding:12px 14px;border-bottom:1px solid var(--line-2)}
.rail-sec:last-child{border-bottom:0}
.rail-hd{font-size:12px;font-weight:600;margin-bottom:8px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}
.kv span{color:var(--muted)}
.kv b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.kv.total b{font-size:15px;font-weight:700;color:var(--text)}
.kv .ell{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-list{display:flex;flex-direction:column;gap:6px}
.inv{font-size:11.5px;background:#f7f8fa;border-radius:4px;padding:6px 8px;color:var(--text-2);
  font-variant-numeric:tabular-nums;word-break:break-all}
.inv.ok{background:var(--green-soft);color:var(--green)}
.act{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:7px 10px;font-size:12.5px;color:var(--text);cursor:pointer;margin-bottom:6px}
.act:hover{border-color:#c9cdd4;background:#fafbfc}
.act.danger{color:var(--red)}
.act.danger:hover{border-color:#ffccc7;background:#fff5f5}

/* ===== 核对结果 ===== */
.findings{margin-top:2px}
.finding{display:flex;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.finding:last-child{border-bottom:0}
.f-dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none}
.f-ok .f-dot{background:var(--green)}
.f-warn .f-dot{background:var(--orange)}
.f-bad .f-dot{background:var(--red)}
.f-body{flex:1;min-width:0}
.f-title{font-size:12.5px;font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.f-detail{font-size:11.5px;color:var(--text-2);margin-top:2px}
.f-money{font-weight:600;font-variant-numeric:tabular-nums;color:var(--orange)}
.tag{font-size:10.5px;padding:0 5px;border-radius:3px;line-height:16px}
.f-ok .tag{background:var(--green-soft);color:var(--green)}
.f-warn .tag{background:var(--orange-soft);color:var(--orange)}
.f-bad .tag{background:var(--red-soft);color:var(--red)}

/* ===== 表单 / 按钮 ===== */
.input,.sel{border:1px solid var(--line);border-radius:4px;padding:5px 9px;font-size:12.5px;outline:none;background:#fff;color:var(--text)}
.input{width:100%}
.input.sm{width:160px;margin-left:auto}
.input:focus,.sel:focus{border-color:var(--blue)}
.btn{border:1px solid var(--line);background:#fff;border-radius:4px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--text)}
.btn:hover{border-color:#c9cdd4;background:#fafbfc}
.btn.ghost{color:var(--red);border-color:var(--line)}
.drop{border:1px dashed #c9cdd4;border-radius:6px;padding:26px 16px;display:flex;flex-direction:column;align-items:center;
  gap:4px;cursor:pointer;background:#fcfcfd;margin-top:12px}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--blue-soft)}
.drop-icon{font-size:20px;color:var(--blue)}
.drop-title{font-size:13px;font-weight:600}
.drop-sub{font-size:11.5px;color:var(--muted)}
.upload-mini{margin:8px;padding:8px;text-align:center;border:1px dashed #c9cdd4;border-radius:4px;color:var(--blue);
  font-size:12px;cursor:pointer}
.upload-mini:hover{background:var(--blue-soft)}
.msg{font-size:12px;margin-top:8px;min-height:17px;color:var(--muted)}
.msg.ok{color:var(--green)}
.msg.err{color:var(--red)}
.mrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.mrow .t1{font-weight:600;min-width:90px}
.mrow .muted{flex:1;font-size:11.5px}
.del{border:1px solid var(--line);background:#fff;border-radius:4px;padding:2px 8px;font-size:11.5px;color:var(--red);cursor:pointer}

@media (max-width:1180px){ .cols{grid-template-columns:240px minmax(0,1fr)} .rail{display:none} }
@media (max-width:860px){
  .side{width:64px} .side-brand div,.grp,.side-foot{display:none} .nav{justify-content:center}
  .cols{grid-template-columns:1fr} .list-panel{max-height:40vh}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}

[hidden]{display:none !important}


/* 快捷操作：横排 + 淡绿 */
.acts{display:flex;gap:6px}
.act.green{flex:1;text-align:center;background:var(--green-soft);border:1px solid #aff0b5;color:var(--green);
  border-radius:4px;padding:7px 0;font-size:12.5px;font-weight:600;margin:0}
.act.green:hover{background:#d3f9d8;border-color:#8de29a}
.link-del{margin-top:8px;border:0;background:none;color:var(--muted);font-size:11.5px;padding:0;cursor:pointer;text-decoration:underline}
.link-del:hover{color:var(--red)}

/* 备注列 */
table.grid td.note{white-space:normal;max-width:300px;color:var(--muted);font-size:11.5px;line-height:1.5}

/* 账单里的小计列（减免合计 / 附加费合计） */
table.grid td.subtotal{background:#fafbfc;font-weight:600}

/* 账单主表：紧凑一点，让"分列 + 合计"一屏放得下 */
#d-table th,#d-table td{padding:6px 8px}
#d-table td.note{max-width:120px}

/* 三栏微调：给中间表格更多宽度 */
.cols{grid-template-columns:240px minmax(0,1fr) 232px}
#d-table{font-size:11.5px}
#d-table th,#d-table td{padding:6px 7px}

/* 账单里的"减免"用红色，跟负数一致 */
#d-table td.neg{color:var(--red)}

/* 二级菜单 */
.nav.sub{padding-left:24px;font-size:12.5px}
.nav.sub i{display:none}
.nav.sub.active{background:var(--blue-soft)}

/* 表格列宽拖拽 */
table.grid th{position:sticky;padding-right:14px}
table.grid th .rz{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;user-select:none}
table.grid th .rz:hover{background:rgba(22,119,255,.18)}
table.grid{table-layout:auto}

/* 月账单：去掉左列，只留 详情 + 右栏 */
.cols.no-list{grid-template-columns:minmax(0,1fr) 252px}
@media (max-width:1180px){ .cols.no-list{grid-template-columns:minmax(0,1fr)} }
.dh-right{display:flex;align-items:center;gap:8px}