:root{
  --bg:#f4f6fa; --card:#ffffff; --text:#1a2333; --muted:#69788f; --border:#e4e9f2;
  --hover:rgba(37,99,235,.05);
  --primary:#2563eb; --primary-weak:#eaf1fe;
  --green:#16a34a; --green-weak:#e9f7ef;
  --red:#dc2626; --red-weak:#fdeeee;
  --orange:#ea8a00; --orange-weak:#fdf3e4;
  --yellow:#b45309; --yellow-weak:#fdf6e7;
  --gray-weak:#eef1f6;
  --shadow:0 1px 3px rgba(16,24,40,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1522; --card:#171f31; --text:#e6ebf5; --muted:#8b99b0; --border:#28324a;
    --hover:rgba(255,255,255,.04);
    --primary:#5b8cf0; --primary-weak:#1d2b49;
    --green:#34b36c; --green-weak:#173226;
    --red:#ef6a6a; --red-weak:#3a2020;
    --orange:#f0a24b; --orange-weak:#3a2c17;
    --yellow:#d8b25c; --yellow-weak:#383018;
    --gray-weak:#232c40;
    --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5;
  min-width:320px;
}
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; color:var(--text); max-width:100%; }
::selection{ background:var(--primary-weak); }
h2{ font-size:19px; } h3{ font-size:15.5px; }
.muted{ color:var(--muted); } .small{ font-size:12px; }
.t-red{ color:var(--red); } .t-green{ color:var(--green); } .t-orange{ color:var(--orange); } .t-blue{ color:var(--primary); }
.t-primary{ color:var(--primary); }

/* ============ 顶栏 ============ */
.topbar{
  position:sticky; top:0; z-index:50; background:var(--card);
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:20px;
  padding:0 20px; height:58px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2563eb,#4f8ef7); color:#fff; box-shadow:var(--shadow);
}
.brand h1{ font-size:16px; line-height:1.2; }
.brand .sub{ font-size:11.5px; color:var(--muted); }
#nav{ display:flex; gap:4px; margin-left:auto; overflow-x:auto; }
#nav::-webkit-scrollbar{ display:none; }
#nav button{
  position:relative; border:none; background:none; padding:8px 14px; border-radius:10px;
  cursor:pointer; font-size:14px; color:var(--muted); white-space:nowrap; transition:.15s;
  min-height:36px;
}
#nav button:hover{ color:var(--text); background:var(--hover); }
#nav button.active{ background:var(--primary-weak); color:var(--primary); font-weight:600; }
#navBadge{
  position:absolute; top:0; right:2px; background:var(--red); color:#fff; font-size:10px;
  font-style:normal; min-width:16px; height:16px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; padding:0 4px; font-weight:600;
}

/* ============ 布局 ============ */
main{ width:100%; max-width:1180px; margin:0 auto; padding:20px 20px 90px; }
.page-narrow{ max-width:960px; margin:0 auto; }
.page-narrow .stat-cards{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.page-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:6px 0 16px; flex-wrap:wrap; }
.page-head .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.rooms-actions .room-search-input{ flex:1 1 260px; width:280px; }

/* ============ 按钮 ============ */
.btn{
  border:1px solid var(--border); background:var(--card); color:var(--text);
  border-radius:10px; padding:8px 14px; font-size:13.5px; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap;
  min-height:38px;
}
.btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--hover); }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover{ filter:brightness(1.08); color:#fff; }
.btn.success{ background:var(--green); border-color:var(--green); color:#fff; }
.btn.success:hover{ filter:brightness(1.08); color:#fff; }
.btn.warn{ background:var(--orange); border-color:var(--orange); color:#fff; }
.btn.warn:hover{ filter:brightness(1.05); color:#fff; }
.btn.danger{ background:var(--red); border-color:var(--red); color:#fff; }
.btn.danger:hover{ filter:brightness(1.08); color:#fff; }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:none; }
.btn:disabled:hover{ border-color:var(--border); color:inherit; background:var(--card); }
.btn.ghost{ background:transparent; }
.btn.ghost.danger{ color:var(--red); border-color:var(--border); }
.btn.ghost.danger:hover{ border-color:var(--red); background:var(--red-weak); }
.btn.ghost.danger:disabled:hover{ border-color:var(--border); background:transparent; color:var(--red); }
.btn.small{ padding:4px 10px; font-size:12.5px; border-radius:8px; min-height:30px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:none; }
.btn.fold-btn{
  border-color:transparent; background:transparent; color:var(--muted);
  box-shadow:none;
}
.btn.fold-btn:hover{ border-color:transparent; color:var(--text); background:var(--hover); }
.fold-btn svg{ flex:0 0 auto; }
.phone-link{ color:inherit; text-decoration:none; border-bottom:1px dashed currentColor; }
.phone-link:hover{ color:var(--primary); }

/* ============ 卡片 / 面板 ============ */
.panel{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); }
.panel + .panel{ margin-top:16px; }
.panel-title{ margin-bottom:12px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; flex-wrap:wrap; }
.panel-head h3{ display:flex; align-items:center; gap:7px; }

/* ============ 工作台顶部横幅 ============ */
.dash-hero{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg,#2563eb,#4f8ef7); color:#fff; border-radius:16px;
  padding:20px 24px; margin-bottom:16px; box-shadow:0 6px 24px rgba(37,99,235,.25);
}
.dash-hero .hello{ font-size:20px; font-weight:700; }
.dash-hero .sub{ margin-top:7px; font-size:13px; opacity:.94; display:flex; gap:14px; flex-wrap:wrap; }
.dash-hero .sub b{ font-variant-numeric:tabular-nums; }
.dash-hero .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.dash-hero .btn{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(4px); }
.dash-hero .btn:hover{ background:rgba(255,255,255,.28); color:#fff; }

/* ============ 提醒区 ============ */
.alert-box{ border-radius:14px; padding:13px 16px 6px; margin-bottom:13px; border:1px solid var(--border); border-left-width:4px; }
.alert-box.red{ background:var(--red-weak); border-left-color:var(--red); }
.alert-box.orange{ background:var(--orange-weak); border-left-color:var(--orange); }
.alert-box.yellow{ background:var(--yellow-weak); border-left-color:var(--yellow); }
.alert-box.gray{ background:var(--gray-weak); border-left-color:var(--muted); }
.alert-box.green{ background:var(--green-weak); border-left-color:var(--green); }
.alert-box.blue{ background:var(--primary-weak); border-left-color:var(--primary); }
.alert-box-head{ display:flex; align-items:center; gap:8px; padding-bottom:6px; }
.alert-box-head svg{ flex-shrink:0; }
.alert-box-head b{ font-size:14px; }
.alert-count{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:500; }
.alert-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px dashed var(--border); }
.alert-row:first-of-type{ border-top:none; }
.alert-main{ flex:1; min-width:0; }
.alert-title{ font-weight:600; font-size:13.5px; }
.alert-title b{ font-variant-numeric:tabular-nums; margin-left:4px; }
.alert-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.alert-empty{ padding:14px 0 18px; display:flex; align-items:center; gap:10px; color:var(--muted); }

/* ============ 徽章 / 状态点 ============ */
.badge{
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
  border-radius:7px; padding:2px 8px; flex-shrink:0;
}
.bg-green{ background:var(--green-weak); color:var(--green); }
.bg-orange{ background:var(--orange-weak); color:var(--orange); }
.bg-red{ background:var(--red-weak); color:var(--red); }
.bg-gray{ background:var(--gray-weak); color:var(--muted); }
.bg-blue{ background:var(--primary-weak); color:var(--primary); }
.pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; border-radius:7px; padding:2px 9px; }
.pill-green{ background:var(--green-weak); color:var(--green); }
.pill-gray{ background:var(--gray-weak); color:var(--muted); }
.pill-red{ background:var(--red-weak); color:var(--red); }
.pill-orange{ background:var(--orange-weak); color:var(--orange); }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-open{ background:var(--muted); }
.dot-soon{ background:var(--orange); }
.dot-overdue{ background:var(--red); animation:pulse 1.6s infinite; }
.dot-done{ background:var(--green); }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.35); }
  50%{ box-shadow:0 0 0 5px rgba(220,38,38,0); }
}

/* ============ 统计卡 ============ */
.stat-cards{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:16px 0; }
.stat-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); min-width:0; }
.stat-card .k{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.stat-card .v{ font-size:21px; font-weight:700; margin:4px 0 2px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stat-card .s{ font-size:11.5px; color:var(--muted); overflow-wrap:anywhere; }
.stat-card.c-blue .v{ color:var(--primary); }
.stat-card.c-green .v{ color:var(--green); }
.stat-card.c-orange .v{ color:var(--orange); }
.stat-card.c-red .v{ color:var(--red); }

/* ============ 工作台双栏 ============ */
.dash-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:16px; align-items:start; }
.dash-grid .panel + .panel{ margin-top:0; }
.mini-list{ display:flex; flex-direction:column; gap:8px; }
.mini-item{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--border);
  border-radius:12px; background:var(--bg);
}
.mini-item::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:0 3px 3px 0; background:var(--muted);
}
.mini-item.is-income::before{ background:var(--green); }
.mini-item.is-expense::before{ background:var(--orange); }
.mini-item.is-overdue::before{ background:var(--red); }
.mini-item:first-of-type{ border-top:1px solid var(--border); }
.mini-item .main{ flex:1; min-width:0; }
.mini-item .t{ font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-item .d{ font-size:12px; color:var(--muted); margin-top:1px; }
.mini-item .amt{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }

/* ============ 房源卡片 ============ */
.prop-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); margin-bottom:16px; }
.prop-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.prop-head h3{ font-size:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prop-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.prop-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.prop-stats{
  display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; font-size:12.5px;
}
.prop-stat{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:6px 12px; }
.prop-stat b{ font-variant-numeric:tabular-nums; }
.payback-progress{ width:min(100%,340px); margin:7px 0 2px; }
.payback-progress-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom:4px; font-size:12px; color:var(--muted);
}
.payback-progress-head b{ color:var(--text); font-variant-numeric:tabular-nums; }
.payback-progress.done .payback-progress-head b,
.payback-progress.done .payback-status{ color:var(--green); }
.payback-bar{
  position:relative; width:100%; height:6px;
  border-radius:999px; background:var(--gray-weak); border:1px solid var(--border);
  overflow:hidden;
}
.payback-bar span{
  position:absolute; inset:0 auto 0 0; min-width:0; max-width:100%;
  background:var(--orange);
}
.payback-progress.done .payback-bar span{ background:var(--green); }
.room-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:11px; margin-top:6px; }
.room-collapse-foot{ display:flex; justify-content:flex-end; margin-top:8px; }
.room-collapsed{
  margin-top:6px; padding:9px 11px; border:1px dashed var(--border); border-radius:10px;
  background:var(--bg); color:var(--muted); font-size:12.5px; display:flex;
  align-items:center; justify-content:space-between; gap:10px;
}
.room-collapsed span{ min-width:0; overflow-wrap:anywhere; }
.room-card{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--bg); display:flex; flex-direction:column; gap:6px; }
.room-card.vacant{ background:var(--gray-weak); border-style:dashed; }
.room-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.room-head b{ font-size:14px; }
.room-tenant{ font-size:13px; }
.room-rent{ font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.room-rent .muted{ font-size:12px; font-weight:400; margin-left:4px; }
.room-lease{ font-size:12px; color:var(--muted); }
.room-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }

/* ============ 工具栏 / 表格 ============ */
.bills-toolbar{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:13px; }
.ctrl{
  border:1px solid var(--border); background:var(--card); border-radius:10px;
  padding:7px 11px; font-size:13px; outline:none; min-width:0; min-height:38px;
}
.ctrl:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-weak); }
.bills-toolbar .spacer{ flex:1; }
.summary-bar{
  font-size:12.5px; color:var(--muted); background:var(--bg); border:1px dashed var(--border);
  border-radius:10px; padding:8px 13px; margin-bottom:12px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.summary-bar b{ font-variant-numeric:tabular-nums; }
.batch-bar{ justify-content:space-between; gap:10px; }
.batch-info{ display:flex; align-items:center; gap:8px; flex:1; min-width:190px; }
.batch-actions{ display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th{
  text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding:9px 10px;
  border-bottom:1px solid var(--border); white-space:normal; line-height:1.25; overflow-wrap:anywhere; vertical-align:bottom;
}
.tbl th.num, .tbl td.num{ text-align:right; }
.tbl td{ padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl td.num .payback-progress{ width:136px; margin:0 0 0 auto; text-align:left; }
.tbl td.num .payback-progress-head{ margin-bottom:4px; }
.tbl tbody tr:hover td{ background:var(--hover); }
.tbl .td-name div:first-child{ font-weight:500; }
.td-dot{ white-space:nowrap; width:52px; }
.td-dot input{ margin-right:8px; vertical-align:middle; }
.td-ops{ white-space:nowrap; }
.td-ops .btn + .btn{ margin-left:6px; }
.num{ font-variant-numeric:tabular-nums; }
.bills-table{ table-layout:fixed; min-width:940px; }
.bills-table th,.bills-table td{ padding:10px 12px; }
.bills-table tbody tr{ height:60px; }
.bills-table .td-name .name-line{ display:flex; align-items:center; gap:8px; min-width:0; }
.bills-table .bill-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bills-table .bill-meta{ margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-bill-check,.mobile-bill-dot{ display:none; }
.bills-table .td-amount strong{ display:block; font-weight:700; }
.bills-table .td-date .date-main{ white-space:nowrap; }
.bills-table .td-date .date-sub{ margin-top:2px; }
.bills-table .td-ops{ width:230px; text-align:left; }
.ops-wrap{ display:flex; justify-content:flex-start; align-items:center; gap:6px; flex-wrap:nowrap; }
.ops-wrap .btn{ min-width:46px; }
.ops-wrap .btn + .btn{ margin-left:0; }

/* ============ 图表 ============ */
.chart{ width:100%; height:auto; display:block; }
.chart .grid{ stroke:var(--border); stroke-width:1; }
.chart .axis{ fill:var(--muted); font-size:11px; }
.chart .bar-inc{ fill:var(--green); }
.chart .bar-exp{ fill:var(--orange); }
.chart .net-pos{ fill:var(--green); font-size:11px; }
.chart .net-neg{ fill:var(--red); font-size:11px; }
.chart .legend{ fill:var(--muted); font-size:11.5px; }
.forecast-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.forecast-card{ background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:11px 12px; }
.forecast-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.forecast-month{ font-weight:700; }
.forecast-net{ font-weight:700; font-variant-numeric:tabular-nums; }
.forecast-line{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted); }
.forecast-line + .forecast-line{ margin-top:4px; }
.forecast-line b{ font-variant-numeric:tabular-nums; color:var(--text); }

/* ============ 设置 ============ */
.setting-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:13px 0; border-top:1px dashed var(--border); flex-wrap:wrap;
}
.setting-row:first-of-type{ border-top:none; }
.setting-row .ctrl{ width:90px; text-align:center; }
.setting-row > div{ min-width:0; }
.setting-row code{ max-width:100%; overflow-wrap:anywhere; }
.tips{ padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }

/* ============ 模态框 ============ */
.modal-mask{
  position:fixed; inset:0; background:rgba(10,15,30,.5); display:none;
  align-items:flex-start; justify-content:center; z-index:100; padding:44px 16px; overflow:auto;
}
.modal-mask.show{ display:flex; }
.modal{
  background:var(--card); border-radius:16px; width:100%; max-width:900px;
  box-shadow:0 24px 64px rgba(0,0,0,.3); animation:pop .18s ease;
  max-height:calc(100vh - 88px); display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
}
@keyframes pop{ from{ transform:translateY(10px); opacity:0; } }
.modal-head{ flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:1px solid var(--border); }
.modal-head h3{ font-size:16px; }
.modal-close{ border:none; background:none; font-size:16px; cursor:pointer; color:var(--muted); padding:4px 8px; border-radius:8px; }
.modal-close:hover{ background:var(--hover); color:var(--text); }
.modal-body{ flex:1 1 auto; min-height:0; padding:18px 22px; overflow:auto; }
.modal-foot{
  display:flex; justify-content:flex-end; gap:10px;
  padding:14px 22px; border-top:1px solid var(--border);
  background:var(--card); box-shadow:0 -8px 18px rgba(16,24,40,.04);
  border-radius:0 0 16px 16px;
}

/* ============ 表单 ============ */
.form-section{ padding:2px 0 14px; margin-bottom:14px; border-bottom:1px dashed var(--border); }
.form-section:last-of-type{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.form-section-title{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; font-weight:700; color:var(--text); }
.form-section-title::before{ content:""; width:3px; height:14px; border-radius:2px; background:var(--primary); }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:13px; min-width:0; }
.field-label{ font-size:13px; font-weight:600; }
.field input,.field select,.field textarea{
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  border-radius:10px; padding:9px 12px; font-size:14px; outline:none; width:100%; min-height:40px;
}
.field textarea{ resize:vertical; min-height:74px; }
.field textarea.textarea-lg{ min-height:128px; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-weak); }
.field-tip{ font-size:12px; color:var(--muted); }
.field-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.field-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px; max-height:220px; overflow:auto; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); }
.check-row input{ width:auto; flex-shrink:0; }
.split-tools{ display:inline-flex; align-self:flex-start; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.split-room-list{ display:flex; flex-direction:column; gap:0; padding:0; max-height:280px; }
.split-group{ background:var(--bg); }
.split-group + .split-group{ border-top:1px solid var(--border); }
.split-group-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; background:var(--card); }
.split-group-head b{ font-size:13px; }
.split-group-head .small{ color:var(--muted); font-weight:400; margin-left:6px; }
.split-row{ display:grid; grid-template-columns:minmax(0,1fr) 86px 86px; gap:8px; align-items:center; padding:7px 0; border-top:1px dashed var(--border); }
.split-group .split-row{ padding:8px 12px; }
.split-row input[type="number"]{ min-height:34px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); }
.split-mini{ display:flex; flex-direction:column; gap:2px; }
.split-mini span{ color:var(--muted); font-size:11px; line-height:1; }
#mForm[data-split-mode="avg"] .split-row,#mForm[data-split-mode="days"] .split-row{ grid-template-columns:minmax(0,1fr); }
#mForm[data-split-mode="people"] .split-row,#mForm[data-split-mode="manual"] .split-row{ grid-template-columns:minmax(0,1fr) 86px; }
#mForm[data-split-mode="avg"] .split-mini,#mForm[data-split-mode="days"] .split-mini,#mForm[data-split-mode="people"] .split-manual,#mForm[data-split-mode="manual"] .split-people{ display:none; }
.split-preview{ background:var(--bg); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.split-preview-head{ display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border-bottom:1px dashed var(--border); color:var(--muted); font-size:12.5px; flex-wrap:wrap; }
.split-preview-head b{ color:var(--text); font-variant-numeric:tabular-nums; }
.split-preview-head .warn{ color:var(--red); }
.split-preview-head .warn b{ color:var(--red); }
.split-preview-row{ display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:10px; align-items:center; padding:9px 12px; border-top:1px dashed var(--border); }
.split-preview-head + .split-preview-row{ border-top:none; }
.split-preview-row b{ display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.split-preview-row span{ display:block; margin-top:2px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.split-preview-row .amt{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.split-preview-empty{ padding:14px 12px; color:var(--muted); font-size:13px; }
.ledger-list{ display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg); }
.ledger-row{ display:grid; grid-template-columns:92px minmax(0,1fr) 100px; gap:10px; align-items:center; padding:9px 11px; border-top:1px dashed var(--border); }
.ledger-row:first-child{ border-top:none; }
.ledger-row .amt{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

/* 水电网 · 自动付款绑定 */
.util-tip{ display:flex; gap:9px; align-items:flex-start; background:var(--primary-weak); border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-size:12.5px; line-height:1.55; margin-bottom:12px; }
.util-tip svg{ flex-shrink:0; margin-top:1px; color:var(--primary); }
.util-head,.util-row{ display:grid; grid-template-columns:1fr 1.15fr .7fr 1.6fr; gap:10px; align-items:center; }
.util-head{ font-size:11.5px; font-weight:600; color:var(--muted); padding-bottom:6px; }
.util-row{ padding:7px 0; border-top:1px dashed var(--border); }
.util-row:first-of-type{ border-top:none; }
.util-name{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; white-space:nowrap; }
.util-bind{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.util-row input:not([type="checkbox"]){ width:100%; padding:6px 9px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--bg); color:var(--text); }
.util-row input:disabled{ opacity:.4; }
.util-row input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--primary); flex-shrink:0; }
.util-sum-list{ display:flex; flex-direction:column; }
.util-sum-row{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px dashed var(--border); }
.util-sum-row:first-child{ border-top:none; }
.util-sum-row .small{ font-size:12px; margin-top:2px; }
@media (max-width:720px){
  .util-head{ display:none; }
  .util-head,.util-row{ grid-template-columns:1fr 1fr; }
  .util-bind{ justify-content:flex-start; }
  .split-row{ grid-template-columns:1fr; }
  .split-preview-row{ grid-template-columns:1fr; }
  .split-preview-row .amt{ text-align:left; }
  .ledger-row{ grid-template-columns:1fr; }
  .ledger-row .amt{ text-align:left; }
}

/* ============ 其他 ============ */
.empty-state{ text-align:center; padding:44px 20px; color:var(--muted); }
.empty-state .ico{ opacity:.45; margin-bottom:10px; }
.empty-state p{ margin-bottom:14px; font-size:13.5px; }
#toastWrap{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.toast{
  background:#1c2740; color:#fff; padding:10px 18px; border-radius:10px; font-size:13.5px;
  opacity:0; transform:translateY(8px); transition:.25s; box-shadow:0 10px 28px rgba(0,0,0,.25);
  max-width:86vw;
}
.toast.show{ opacity:1; transform:none; }
.toast.err{ background:var(--red); }
.gap8{ gap:8px; } .mt8{ margin-top:8px; } .mt14{ margin-top:14px; }

@media (max-width:860px){
  .stat-cards{ grid-template-columns:repeat(3,1fr); }
  .dash-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  body{ font-size:13.5px; }
  .topbar{
    padding:9px 12px 8px; gap:8px; height:auto; flex-wrap:wrap;
    align-items:flex-start;
  }
  .brand h1{ font-size:15.5px; }
  .brand{ width:100%; }
  .brand .sub{ display:none; }
  #nav{
    width:100%; margin-left:0; gap:6px; padding:1px 0 2px;
    scroll-snap-type:x proximity;
  }
  #nav button{
    flex:0 0 auto; padding:7px 11px; min-height:34px; border-radius:10px;
    background:var(--bg); scroll-snap-align:start;
  }
  main{ padding:14px 12px calc(80px + env(safe-area-inset-bottom)); }
  h2{ font-size:18px; }
  .btn{ min-height:40px; }
  .btn.small{ min-height:34px; }
  .page-head{ align-items:flex-start; margin-top:2px; }
  .page-head .actions{ width:100%; }
  .rooms-actions .room-search-input{ flex:1 1 100%; width:100%; }
  .page-head .actions .btn{ flex:1 1 150px; }
  .panel,.prop-card{ border-radius:12px; padding:14px; }
  .panel-head{ align-items:flex-start; }
  .dash-hero{ padding:16px; align-items:stretch; }
  .dash-hero .hello{ font-size:17px; }
  .dash-hero .sub{ flex-direction:column; gap:4px; }
  .dash-hero .actions{ width:100%; }
  .dash-hero .actions .btn{ flex:1 1 130px; }
  .stat-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat-card{ padding:12px; min-height:92px; display:flex; flex-direction:column; justify-content:space-between; }
  .stat-card .v{ font-size:19px; }
  .mini-item,.alert-row{ align-items:flex-start; }
  .mini-item{ grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  .mini-item .main{ min-width:0; }
  .mini-item .amt{ grid-column:2 / 4; justify-self:start; text-align:left; margin-left:0; }
  .mini-item .btn{ grid-column:2 / 4; width:100%; }
  .alert-main{ flex-basis:calc(100% - 46px); }
  .alert-row{ flex-wrap:wrap; gap:8px 10px; }
  .alert-row .btn{ margin-left:34px; flex:1 1 calc(100% - 34px); }
  .prop-head{ flex-direction:column; align-items:stretch; }
  .prop-actions{ width:100%; }
  .prop-actions .btn{ flex:1; }
  .prop-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .prop-stat{ padding:7px 10px; overflow-wrap:anywhere; }
  .room-grid{ grid-template-columns:1fr; }
  .room-rent{ font-size:18px; }
  .room-rent .muted{ display:block; margin:2px 0 0; }
  .room-actions .btn{ flex:1; }
  .bills-toolbar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .bills-toolbar .ctrl{ width:100%; }
  .bills-toolbar input.ctrl{ grid-column:1 / -1; }
  .summary-bar{ gap:7px; align-items:stretch; }
  .summary-bar span{ flex:1 1 100%; }
  .batch-info{ min-width:0; align-items:center; }
  .batch-actions{ width:100%; justify-content:flex-start; }
  .batch-actions .btn{ flex:1 1 96px; }
  .table-wrap{ overflow:visible; }
  .tbl,.tbl tbody,.tbl tr,.tbl td{ display:block; width:100%; }
  .tbl{ border-collapse:separate; border-spacing:0; }
  .bills-table{ min-width:0; table-layout:auto; }
  .bills-table tbody tr{ height:auto; }
  .bills-table colgroup{ display:none; }
  .tbl thead{ display:none; }
  .tbl tr{
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:8px 0; margin:0 0 12px; box-shadow:var(--shadow);
    overflow:hidden;
  }
  .tbl tbody tr:hover td{ background:transparent; }
  .tbl td{
    border-bottom:none; padding:6px 12px; display:grid;
    grid-template-columns:minmax(76px,34%) minmax(0,1fr); gap:8px;
    text-align:right; align-items:center; min-height:31px;
  }
  .tbl td::before{
    content:attr(data-label); color:var(--muted); font-size:12px;
    text-align:left; font-weight:600;
  }
  .tbl td[data-label="状态"] .pill{
    width:max-content; max-width:100%; justify-self:end;
  }
  .bills-table .td-name .name-line{ gap:7px; }
  .mobile-bill-check{ display:inline-block; flex:0 0 auto; }
  .mobile-bill-dot{ display:inline-block; flex:0 0 auto; }
  .bills-table .td-name .badge{ flex:0 0 auto; }
  .bills-table .td-name .bill-title{ flex:1 1 auto; }
  .tbl td.td-dot{ display:flex; justify-content:flex-start; align-items:center; padding-bottom:4px; }
  .bills-table td.td-dot{ display:none; }
  .tbl td.td-dot::before{ display:none; }
  .tbl td.td-name{
    display:block; text-align:left; padding-bottom:8px;
    border-bottom:1px dashed var(--border); margin-bottom:4px;
  }
  .tbl td.td-name::before{ display:none; }
  .tbl td.num{ text-align:right; }
  .tbl td.td-ops{
    display:block; width:100%; text-align:left;
    padding:10px 12px 4px; border-top:1px dashed var(--border); margin-top:4px;
  }
  .tbl td.td-ops::before{ display:none; }
  .tbl td.td-ops .ops-wrap{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
    width:100%; gap:8px;
  }
  .tbl td.td-ops .ops-wrap .btn{ width:100%; min-width:0; }
  .td-ops .btn + .btn{ margin-left:0; }
  .setting-row{ align-items:flex-start; gap:10px; }
  .setting-row.setting-inline{ align-items:center; flex-wrap:nowrap; }
  .setting-row.setting-inline > div:first-child{ flex:1 1 auto; min-width:0; }
  .setting-row.setting-inline > div:last-child{ width:auto; flex:0 0 auto; }
  .setting-row.setting-save{ align-items:center; }
  .setting-row > div:first-child{ flex:1 1 100%; }
  .setting-row > div:last-child{ width:100%; }
  .setting-row code{ display:block; width:100%; }
  .setting-row .btn{ flex:1 1 130px; }
  .setting-row .ctrl{ width:100%; }
  .tips{ padding-left:16px; }
  .modal-mask{ padding:18px 10px; align-items:center; }
  .modal{ max-height:calc(100vh - 36px); border-radius:14px; }
  .modal-head{ padding:13px 15px; }
  .modal-close{ min-width:34px; min-height:34px; }
  .modal-body{ padding:15px; }
  .modal-foot{ padding:13px 15px calc(13px + env(safe-area-inset-bottom)); border-radius:0 0 14px 14px; }
  .modal-foot .btn{ flex:1; }
  .field input,.field select,.field textarea{ min-height:42px; }
  .field-2,.field-3,.field-4{ grid-template-columns:1fr; }
  .check-list{ grid-template-columns:1fr; }
  .forecast-grid{ grid-template-columns:1fr; }
  #toastWrap{ bottom:calc(18px + env(safe-area-inset-bottom)); width:calc(100% - 24px); }
  .toast{ width:100%; text-align:center; }
}
@media (max-width:420px){
  .topbar{ padding-left:10px; padding-right:10px; }
  main{ padding-left:10px; padding-right:10px; }
  .stat-cards{ gap:8px; }
  .stat-card{ padding:10px; }
  .stat-card .v{ font-size:18px; }
  .prop-stats{ grid-template-columns:1fr; }
  .bills-toolbar{ grid-template-columns:1fr; }
}