:root {
    /* 全站调色板（2026-07-17 方案A定稿，见 项目交接说明.md 设计规范章节）
       新功能一律使用这些变量，禁止硬编码品牌色 hex。紫色装饰与灰阶不在此列。 */
    --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc; --sky-400: #38bdf8; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1; --sky-800: #075985;
    --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534;
    --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b;
    --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e;
    --rose-100: #ffe4e6; --rose-700: #be123c;
  }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      background: linear-gradient(135deg, var(--sky-100) 0%, var(--green-50) 100%);
      color: #1f2937; min-height: 100vh;
    }
    .nav {
      background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08);
      padding: 14px 24px; display: flex; align-items: center;
      justify-content: space-between;
    }
    .nav .brand { font-weight: 700; font-size: 18px; color: var(--sky-700); }
    .nav .brand-admin { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-left: 0; }
    .nav .nav-links { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .nav a.nav-pill {
      margin-left: 0; font-size: 13px; white-space: nowrap; padding: 5px 12px;
      border: 1px solid var(--sky-200, #bae6fd); border-radius: 999px; color: var(--sky-700);
    }
    .nav a.nav-pill:hover { background: var(--sky-50, #f0f9ff); }
    .nav a.nav-pill-danger { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
    .nav a.nav-pill-danger:hover { background: #fee2e2; color: #b91c1c; }
    .nav .brand-admin .brand-logo {
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
      background: #1e2a5e; border: 2px solid #d9b96a; flex-shrink: 0;
    }
    .nav .brand-admin .brand-title { font-weight: 700; font-size: 17px; color: #1e2a5e; letter-spacing: .5px; }
    .nav a { color: #4b5563; text-decoration: none; margin-left: 18px; font-size: 14px; }
    .nav a:hover { color: var(--sky-700); }
    .container { max-width: 720px; margin: 40px auto; padding: 0 16px; }
    .card {
      background: #fff; border-radius: 16px; padding: 32px;
      box-shadow: 0 4px 20px rgba(0,0,0,.06);
    }
    h1 { font-size: 22px; margin-bottom: 6px; }
    .subtitle { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
    label { display: block; font-size: 14px; margin: 16px 0 6px; font-weight: 500; }
    input[type=text], input[type=password], input[type=file] {
      width: 100%; padding: 11px 14px; border: 1px solid #d1d5db;
      border-radius: 10px; font-size: 15px;
    }
    input:focus { outline: none; border-color: var(--sky-500); }
    .btn {
      display: inline-block; width: 100%; margin-top: 22px;
      background: var(--sky-500); color: #fff; border: none; padding: 12px;
      border-radius: 10px; font-size: 16px; cursor: pointer; font-weight: 600;
    }
    .btn:hover { background: var(--sky-600); }
    .btn-sm { width: auto; margin-top: 0; padding: 8px 16px; font-size: 14px; }
    .link { text-align: center; margin-top: 18px; font-size: 14px; }
    .link a { color: var(--sky-500); text-decoration: none; }
    .flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
    .flash.success { background: var(--green-100); color: var(--green-800); }
    .flash.danger  { background: var(--red-100); color: var(--red-800); }
    .flash.warning { background: var(--amber-100); color: var(--amber-800); }
    .balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
    .balance-box {
      border-radius: 14px; padding: 24px; text-align: center; color: #fff;
    }
    .balance-box.water { background: linear-gradient(135deg,var(--sky-400),var(--sky-600)); }
    .balance-box.elec  { background: linear-gradient(135deg,var(--amber-400),var(--amber-500)); }
    .balance-box .label { font-size: 14px; opacity: .9; }
    .balance-box .value { font-size: 32px; font-weight: 700; margin-top: 6px; }
    .balance-box .unit { font-size: 16px; font-weight: 400; }
    table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
    th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
    th { background: #f9fafb; color: #6b7280; font-weight: 600; }
    .muted { color: #9ca3af; font-size: 13px; }
    .row-between { display: flex; justify-content: space-between; align-items: center; }
    .room-banner {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 8px;
    }
    .room-no {
      font-size: 40px; font-weight: 800; line-height: 1.1;
      background: linear-gradient(90deg,var(--sky-600),#7c3aed);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: var(--sky-600);
    }
    .room-period { color: #6b7280; font-size: 14px; }
    .period-picker { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
    .period-picker label { margin: 0; font-weight: 500; }
    .period-picker select, select.period-sel {
      padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 10px;
      font-size: 15px; background: #fff; color: #1f2937; cursor: pointer;
    }
    .period-picker select:focus, select.period-sel:focus { outline: none; border-color: var(--sky-500); }
    /* —— 筛选器生效高亮（2026-07-15，用户选定方案A、不带清除×）——
       给筛选控件的包裹元素加 class="js-flt"：控件值不是「全部」（"" 或 "all"）时
       由页面底部全局 JS 加 .flt-on —— 标签变蓝带圆点、控件蓝框浅蓝底，
       一眼看出当前面板哪些筛选在生效。文本输入型筛选（如明细关键字）同样适用。 */
    /* 色值对齐全站搜索按钮的天蓝 var(--sky-500)（2026-07-15 用户定） */
    .js-flt.flt-on label { color: var(--sky-600) !important; font-weight: 700; }
    .js-flt.flt-on label::before {
      content: ''; display: inline-block; width: 6px; height: 6px;
      border-radius: 50%; background: var(--sky-500); margin-right: 5px; vertical-align: 2px;
    }
    .js-flt.flt-on select, .js-flt.flt-on input[type=text], .js-flt.flt-on .month-dd-btn {
      border: 1.5px solid var(--sky-500) !important; background: var(--sky-50) !important;
      color: var(--sky-800) !important; font-weight: 600;
    }
    /* —— 筛选生效提示条（2026-07-17，用户选定位置3方案）——
       有筛选生效时由全局 JS 在筛选行下方插入浅蓝细条：N 个筛选生效中 + 清空筛选。 */
    .flt-bar {
      display: flex; align-items: center; gap: 14px; flex-basis: 100%;
      width: 100%; grid-column: 1 / -1; box-sizing: border-box;
      background: var(--sky-50); border: 1px solid var(--sky-200); border-radius: 8px;
      padding: 6px 12px; margin: 2px 0 14px; font-size: 13px;
    }
    .flt-bar .flt-bar-n { color: var(--sky-800); }
    .flt-bar .flt-bar-clear {
      background: none; border: none; padding: 0; color: var(--sky-600);
      font-weight: 700; font-size: 13px; cursor: pointer;
    }
    .flt-bar .flt-bar-clear:hover { text-decoration: underline; }
    .settle-badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
    .settle-badge.yes { background: var(--green-100); color: var(--green-800); }
    .settle-badge.no  { background: var(--red-100); color: var(--red-800); }
    .settle-badge.pay { background: var(--sky-100); color: var(--sky-700); }
    .settle-badge.manual { background: var(--green-100); color: var(--green-800); }
    .settle-badge.locked { background: var(--amber-100); color: var(--amber-800); }
    .settle-badge.gray { background: #eef2f6; color: #475569; }
    .btn-mini { padding: 4px 10px; font-size: 12px; border-radius: 8px; border: none;
      cursor: pointer; font-weight: 600; }
    .btn-mini.green { background: var(--green-500); color: #fff; }
    .btn-mini.gray  { background: #e5e7eb; color: #374151; }
    .btn-mini.red { background: var(--red-500); color: #fff; }
    .total-box {
      margin-top: 20px; padding: 22px 26px; border-radius: 16px;
      background: linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#9333ea 100%);
      color: #fff;
      display: flex; justify-content: space-between; align-items: center;
      box-shadow: 0 8px 22px rgba(99,102,241,.30);
    }
    .total-label { font-size: 18px; font-weight: 600; letter-spacing: .5px; opacity: .95; }
    .total-amount { font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
    .room-area { margin-top: 18px; }
    .payment-card {
      margin-top: 16px; padding: 16px; border: 1px solid #e5e7eb;
      border-radius: 14px; background: #f9fafb;
    }
    .payment-head {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; margin-bottom: 12px;
    }
    .payment-title { font-size: 16px; font-weight: 700; color: #111827; }
    .payment-subtitle { margin-top: 3px; color: #6b7280; font-size: 13px; }
    .payment-amount {
      flex: 0 0 auto; font-size: 20px; font-weight: 800; color: var(--green-600);
      white-space: nowrap;
    }
    .pay-btn {
      display: block; width: 100%; border: none;
      background: linear-gradient(135deg,var(--green-500),var(--green-600)); color: #fff;
      padding: 15px; border-radius: 12px; font-size: 18px; font-weight: 700;
      cursor: pointer; box-shadow: 0 6px 16px rgba(34,197,94,.30);
    }
    .pay-btn:hover { background: linear-gradient(135deg,var(--green-600),var(--green-700)); }
    .pay-btn:disabled { opacity: .6; cursor: not-allowed; }
    .pay-paid {
      padding: 13px; border-radius: 12px; text-align: center;
      background: var(--green-100); color: var(--green-800); font-size: 16px; font-weight: 700;
    }
    .payment-msg { margin-top: 8px; text-align: center; }
    .arrears-table { margin: 0 0 12px; background: #fff; border-radius: 10px; overflow: hidden; }
    .arrears-table th, .arrears-table td { padding: 9px 10px; font-size: 13px; }
    .arrears-table td { text-align: right; font-weight: 700; color: #111827; }
    .admin-page-head { margin-bottom: 18px; }
    .admin-title-row {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 14px; flex-wrap: wrap;
    }
    .admin-title { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1.25; }
    .admin-subtitle { color: #64748b; font-size: 14px; margin-top: 4px; }
    .admin-context-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .admin-context-actions a {
      color: var(--sky-500); text-decoration: none; font-size: 14px; font-weight: 700;
    }
    .admin-tabs {
      display: flex; gap: 4px; overflow-x: auto; margin-top: 16px;
      padding: 4px; border: 1px solid var(--sky-100); border-radius: 12px;
      background: rgba(255,255,255,.72); box-shadow: 0 1px 4px rgba(15,23,42,.04);
    }
    .admin-tab {
      flex: 0 0 auto; padding: 9px 13px; border-radius: 9px;
      color: #475569; text-decoration: none; font-size: 14px; font-weight: 800;
      white-space: nowrap;
    }
    .admin-tab:hover { color: var(--sky-700); background: var(--sky-50); }
    .admin-tab.active {
      background: var(--sky-500); color: #fff; box-shadow: 0 4px 12px rgba(14,165,233,.22);
    }
    .admin-tab.active:hover { color: #fff; background: var(--sky-600); }
    /* —— 二级页「当前位置」条（2026-07-08，用户选定方案D）——
       二级页上，一级页签降级为虚线描边 parent 态（表示"所属模块"而非当前位置），
       实心蓝让给页签栏下方的 loc-bar 独占，避免用户误以为还在一级页。
       用法见 _admin_header.html：页面 set admin_parent / admin_parent_url 即生效。 */
    .admin-tab.parent {
      background: var(--sky-100); color: var(--sky-700);
      border: 1px dashed var(--sky-300); padding: 8px 12px;
    }
    .admin-tab.parent:hover { background: var(--sky-200); color: var(--sky-800); }
    .loc-bar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin-top: 10px; padding: 9px 14px; border-radius: 10px;
      background: var(--sky-500); box-shadow: 0 4px 12px rgba(14,165,233,.22);
    }
    .loc-bar svg { flex: none; }
    .loc-bar .loc-label { font-size: 13px; color: var(--sky-100); }
    .loc-bar a.loc-parent {
      color: #fff; font-size: 13.5px; font-weight: 800;
      text-decoration: underline; text-underline-offset: 3px;
    }
    .loc-bar .loc-cur { color: #fff; font-size: 13.5px; font-weight: 800; }
    .loc-bar a.loc-back {
      margin-left: auto; background: #fff; color: var(--sky-700);
      border-radius: 8px; padding: 4px 12px; font-size: 12.5px; font-weight: 800;
      text-decoration: none; white-space: nowrap;
    }
    .loc-bar a.loc-back:hover { background: var(--sky-50); }
    .backup-status.ok { margin-top: 8px; font-size: 12px; color: #94a3b8; }
    .backup-status.alert {
      margin-top: 10px; padding: 9px 13px; border-radius: 10px;
      background: var(--red-100); border: 1px solid var(--red-200);
      color: var(--red-700); font-size: 13px; font-weight: 700;
    }
    .backup-status.alert a { color: var(--red-800); margin-left: 8px; font-weight: 800; }
    .dialog-mask {
      position: fixed; inset: 0; z-index: 50; display: none;
      align-items: center; justify-content: center; padding: 18px;
      background: rgba(15,23,42,.46);
    }
    .dialog-mask.open { display: flex; }
    .dialog {
      width: min(640px, 100%); background: #fff; border-radius: 14px;
      box-shadow: 0 24px 70px rgba(15,23,42,.28); overflow: hidden;
      border: 1px solid rgba(148,163,184,.26);
    }
    .dialog-head { padding: 22px 24px 12px; }
    .dialog-title { font-size: 20px; font-weight: 800; color: #0f172a; }
    .dialog-summary { margin-top: 8px; color: #475569; font-size: 14px; line-height: 1.65; }
    .dialog-body { padding: 0 24px 18px; }
    .dialog-highlights {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px; margin-top: 12px;
    }
    .dialog-highlight {
      border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px;
      background: #f8fafc;
    }
    .dialog-highlight .k { color: #64748b; font-size: 12px; font-weight: 700; }
    .dialog-highlight .v { margin-top: 3px; color: #0f172a; font-size: 16px; font-weight: 800; }
    .dialog-highlight.warning { background: var(--amber-50); border-color: var(--amber-200); }
    .dialog-highlight.warning .v { color: var(--amber-800); }
    .dialog-highlight.danger { background: var(--red-50); border-color: var(--red-200); }
    .dialog-highlight.danger .v { color: var(--red-800); }
    .dialog-note {
      margin-top: 12px; padding: 10px 12px; border-radius: 10px;
      background: #f8fafc; color: #475569; font-size: 13px; line-height: 1.6;
    }
    .dialog-risk {
      margin-top: 12px; padding: 11px 12px; border-radius: 10px;
      background: var(--red-50); border: 1px solid var(--red-200);
      color: var(--red-800); font-size: 13px; line-height: 1.6; font-weight: 700;
    }
    .dialog-details {
      margin-top: 12px; border: 1px solid #e2e8f0; border-radius: 10px;
      background: #fff; overflow: hidden;
    }
    .dialog-details-title {
      padding: 9px 12px; background: #f8fafc; color: #475569;
      font-size: 12px; font-weight: 800; border-bottom: 1px solid #e2e8f0;
    }
    .dialog-details-list {
      margin: 0; padding: 8px 12px 8px 28px; max-height: 190px;
      overflow: auto; color: #7c2d12; font-size: 13px; line-height: 1.6;
    }
    .dialog-details-list li { margin: 4px 0; }
    .dialog-details-more {
      padding: 8px 12px; background: var(--amber-50); color: var(--amber-800);
      font-size: 12px; font-weight: 800; border-top: 1px solid var(--amber-200);
    }
    .dialog-input-wrap { margin-top: 14px; }
    .dialog-input-wrap label { margin: 0 0 6px; color: #475569; font-size: 13px; }
    .dialog-input-error { display: none; color: var(--red-700); font-size: 12px; margin-top: 6px; }
    .dialog-actions {
      display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px;
      background: #f8fafc; border-top: 1px solid #eef2f7;
    }
    .dialog-btn {
      border: none; border-radius: 10px; padding: 10px 16px; font-size: 14px;
      font-weight: 800; cursor: pointer;
    }
    .dialog-btn.cancel { background: #e2e8f0; color: #334155; }
    .dialog-btn.confirm { background: var(--sky-500); color: #fff; }
    .dialog-btn.confirm.danger { background: var(--red-500); }
    .dialog-btn.confirm.warning { background: var(--amber-500); color: #111827; }

    /* —— 后台数据表格：淡斑马纹 + 悬停高亮（2026-07-08）——
       条纹 class（zr-row/zr-even）由页面底部全局 JS 按「可见数据行」动态刷，
       兼容隐藏展开行、分页、筛选；纯 CSS nth-child 会数错行，勿改回。 */
    .data-table tbody tr.zr-even > td { background: #f8fafc; }
    .data-table tbody tr.zr-row:hover > td { background: var(--sky-50); }
    /* —— 表头全站加强（2026-07-08）——
       比各模板里的 .data-table th 选择器更具体，统一生效：
       深一档底色 + 深灰粗体字 + 2px 下边框，与数据区拉开层次。 */
    .data-table table thead th {
      background: #f1f5f9; color: #334155; font-size: 12.5px; font-weight: 700;
      letter-spacing: .3px; border-bottom: 2px solid #e2e8f0;
      padding-top: 11px; padding-bottom: 11px;
    }
    /* —— 长文本截断 + 悬停浮层（2026-07-08 全站化，原在 admin_rent.html）——
       .note-clip：CSS 最多 2 行省略；.note-fixed：模板端固定长度截断（配 _macros.html 的 clip 宏）。
       有 data-tip 的元素悬停时弹 #hoverTip 深色浮层看全文，浮层 JS 在页面底部。 */
    /* 提高优先级：必须盖过各页面在 body 内定义的 .data-table td { nowrap }（2026-07-08 修复备注列被切半字） */
    .data-table td.note-cell, td.note-cell { white-space: normal !important; }
    .note-clip {
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; max-width: 220px; line-height: 1.55; word-break: break-all; font-size: 12.5px;
    }
    .note-fixed { font-size: 12.5px; white-space: nowrap; }
    .note-fixed[data-tip] { cursor: help; border-bottom: 1px dashed #cbd5e1; }
    #hoverTip {
      position: fixed; z-index: 10000; display: none; max-width: 340px;
      background: #0f172a; color: #f8fafc; font-size: 12.5px; line-height: 1.7;
      padding: 9px 13px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
      white-space: pre-wrap; word-break: break-all; pointer-events: none;
    }

    @media (max-width: 480px) {
      .card { padding: 22px 18px; }
      .room-no { font-size: 34px; }
      .total-label { font-size: 16px; }
      .total-amount { font-size: 30px; }
      .payment-head { align-items: flex-start; flex-direction: column; }
      .payment-amount { font-size: 18px; }
      .dialog-highlights { grid-template-columns: 1fr; }
      .dialog-actions { flex-direction: column-reverse; }
      .dialog-btn { width: 100%; }
    }

    /* ===== 后台共享样式（2026-07-16 从各 admin 模板去重提取；子模板同名样式在 body 中出现更晚，可正常覆盖此处默认值） ===== */
    .panel-title::before {
    content: ""; width: 4px; height: 18px; border-radius: 3px;
    background: linear-gradient(180deg, var(--sky-500), #7c3aed); display: inline-block;
  }
    .panel .hint { color: #7890ad; font-size: 13px; line-height: 1.7; margin: 10px 0 18px; }
    .file-shell {
    display: flex; align-items: center; gap: 12px; min-height: 52px;
    padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 12px;
    background: #fff;
  }
    .file-shell input[type=file] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  }
    .file-pick {
    flex: 0 0 auto; padding: 10px 14px; border-radius: 10px;
    background: var(--sky-50); color: var(--sky-700); font-weight: 800; cursor: pointer;
  }
    .file-name {
    min-width: 0; color: #64748b; font-weight: 700; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
    .data-table table { margin: 0; }
    @media (max-width: 1200px) {
    .data-table { overflow-x: auto; }
  }
    .data-table tbody tr:last-child td { border-bottom: none; }
    .room-link:hover { color: var(--sky-800); text-decoration: underline; }
    .ext-mark { font-size: 11px; color: #94a3b8; vertical-align: baseline; }
    .room-link:hover .ext-mark { color: var(--sky-800); }
    .row-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
    .filter-form { margin: 0; }
    .toolbar .period-picker { margin: 0; display: flex; align-items: center; gap: 6px; }
    .toolbar .period-picker label { color: #6b7280; font-size: 13px; white-space: nowrap; }
    .search-combo .search-input:focus { outline: none; border-color: var(--sky-500); }
    .meter-alert-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--amber-700); font-weight: 700; font-size: 14px; }
    .meter-alert-rooms a { color: var(--amber-700); text-decoration: underline; font-weight: 700; }
    .meter-alert-rooms .sep { color: var(--amber-600); margin: 0 6px; }
    /* —— 异常提醒分组折叠（2026-07-29，用户定「方案B」）——
       每类异常常显一行（标题 + 间数徽标），默认收起，点整行展开该类的房号明细。
       原来一次摊开十几行，页面被挤得很长。交互见 site.js 的 toggleAlertGroup。 */
    .alert-group + .alert-group,
    .meter-alert-head + .alert-group,
    .dep-alert-head + .alert-group { border-top: 1px solid var(--amber-200); }
    .alert-group-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; width: 100%; padding: 9px 0; margin: 0;
    background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
    color: var(--amber-800); font-size: 13px; font-weight: 700;
  }
    .alert-group-head:hover .alert-group-title { text-decoration: underline; }
    .alert-caret { flex: none; color: var(--amber-600); font-size: 10px; transition: transform .15s; }
    .alert-group.open .alert-caret { transform: rotate(90deg); }
    .alert-group-n { background: var(--amber-100); color: var(--amber-700); border-radius: 8px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
    .alert-group-hint { color: var(--amber-600); font-weight: 600; font-size: 12px; }
    .alert-group-body { display: none; padding: 0 0 10px 18px; color: var(--amber-800); font-size: 13px; line-height: 1.8; }
    .alert-group.open .alert-group-body { display: block; }
    .alert-group-body a { color: var(--amber-700); text-decoration: underline; font-weight: 700; }
    .alert-group-body .sep { color: var(--amber-600); margin: 0 6px; }
    .alert-group-body ul { margin: 0; padding-left: 1.1em; }
    /* —— 统一异常提醒模块（2026-07-29，用户定「集中到租房管理卡片下方」）——
       全站异常按来源分「租房 / 水电 / 拿房」三区，每区一个小标题 + 若干折叠分组；
       展开后底部一条「去 XX 处理 →」链接指向对应处理模块。模板 _anomaly_panel.html。 */
    .anomaly-panel { margin: 0 0 18px; }
    .alert-sec + .alert-sec { border-top: 1px solid var(--amber-200); }
    .alert-sec-label {
    display: flex; align-items: center; gap: 8px; padding: 9px 0 2px;
    color: var(--amber-700); font-size: 12px; font-weight: 800; letter-spacing: .5px;
  }
    .alert-sec-label::after { content: ""; flex: 1; height: 1px; background: var(--amber-200); }
    .alert-sec-n { color: var(--amber-600); font-weight: 700; letter-spacing: 0; }
    .alert-sec-label + .alert-group { border-top: 0; }
    .btn-mini.green { background: var(--green-500); color: #fff; }
    .btn-mini.blue { background: var(--sky-500); color: #fff; }
    .btn-mini.gray { background: #eef2f6; color: #475569; }
    .batch-bar .note { color: #64748b; font-size: 13px; font-weight: 600; }
    .preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
    .preview-box { border: 1px solid #eef0f3; border-radius: 10px; padding: 12px; background: #f8fafc; }
    .preview-box .k { font-size: 12px; color: #64748b; }
    .preview-box .v { margin-top: 4px; font-size: 20px; font-weight: 800; color: #0f172a; }
    .warn-list { margin: 12px 0 0 18px; color: var(--amber-800); font-size: 13px; line-height: 1.7; }
    .inline-confirm { width: 126px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 12px; }
    .manual-grid {
    display: grid; grid-template-columns: 1.05fr 1.05fr 1fr 1fr;
    gap: 16px; align-items: end;
  }
    .manual-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
    .manual-head .panel-title { margin-bottom: 0; }
    .manual-form-wrap { display: none; margin-top: 18px; }
    .manual-form-wrap.open { display: block; }
    .form-shell {
    border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px;
    background: #fff; transition: border-color .16s ease, box-shadow .16s ease;
  }
    .form-shell:focus-within {
    border-color: var(--sky-400); box-shadow: 0 0 0 4px rgba(14,165,233,.12);
  }
    .form-shell label {
    color: #64748b; font-size: 12px; font-weight: 800;
    margin: 0 0 8px; letter-spacing: 0;
  }
    .form-shell input[type=text],
  .form-shell input[type=date] {
    width: 100%; height: 30px; padding: 0; border: none; border-radius: 0;
    background: transparent; color: #0f172a; font-size: 17px; font-weight: 700;
  }
    .form-shell input[type=text]::placeholder { color: #cbd5e1; font-weight: 600; }
    .form-shell input:focus { outline: none; border-color: transparent; }
    .manual-actions {
    display: flex; justify-content: flex-start; gap: 10px; margin-top: 16px;
  }
    .date-field { position: relative; }
    .date-field input[type=text], .date-field input[type=date] { padding-right: 32px; }
    .date-field::after {
    content: ""; position: absolute; right: 15px; bottom: 18px;
    width: 15px; height: 15px; border: 2px solid var(--sky-400); border-radius: 5px;
    background:
      linear-gradient(var(--sky-400),var(--sky-400)) 3px 4px / 9px 2px no-repeat,
      linear-gradient(var(--sky-400),var(--sky-400)) 4px -2px / 2px 6px no-repeat,
      linear-gradient(var(--sky-400),var(--sky-400)) 9px -2px / 2px 6px no-repeat,
      var(--sky-50);
    pointer-events: none;
  }
    .date-field input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0; width: 34px; margin-left: -34px; cursor: pointer;
  }
    .container { max-width: 1180px; margin-top: 30px; }
    .panel {
    background: #fff; border-radius: 16px; padding: 24px 26px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06); margin-bottom: 20px;
  }
    .data-table th { background: #f8fafc; color: #64748b; font-size: 12px; white-space: nowrap; }
    .data-table td { white-space: nowrap; }
    .panel-title {
    font-size: 17px; font-weight: 700; color: #0f172a;
    display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  }
    .panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
    .panel-title-row .panel-title { margin-bottom: 0; }
    .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
    .stat-card { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
    .stat-card .k { font-size: 12px; color: #64748b; margin-bottom: 6px; }
    .stat-card .v { font-size: 22px; font-weight: 800; color: #0f172a; }
    .data-table { border: 1px solid #eef0f3; border-radius: 14px; }
    .btn-mini { border: none; cursor: pointer; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
    .btn-mini.red { background: var(--red-100); color: var(--red-700); }
    .pg-info { color: #94a3b8; font-size: 12px; margin-left: 4px; }
    .muted-line { color: #94a3b8; font-size: 13px; margin-top: 10px; }
    @media (max-width: 720px) { .panel { padding: 20px 16px; } }
    .summary-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin-bottom: 20px;
  }
    .summary-box { border: 1px solid #eef0f3; border-radius: 12px; padding: 14px; background: #f8fafc; }
    .summary-box .k { color: #64748b; font-size: 12px; }
    .summary-box .v { color: #0f172a; font-size: 22px; font-weight: 800; margin-top: 4px; }
    textarea:focus { outline: none; border-color: var(--sky-500); }
    .data-table { border: 1px solid #eef0f3; border-radius: 14px; }
    .settle-badge.pay { background: var(--sky-100); color: var(--sky-700); }
    .settle-badge.manual { background: var(--green-100); color: var(--green-800); }
    .settle-badge.no { background: var(--red-100); color: var(--red-800); }
    .status-pill.due { background: var(--amber-100); color: var(--amber-700); }
    .status-pill.overdue { background: var(--red-100); color: var(--red-700); }
    .search-combo { display: inline-flex; align-items: stretch; flex-shrink: 0; }
    .search-combo .search-btn { border-radius: 0 10px 10px 0; border: none; padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
    .inline-form.open { display: block; }
    .status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
    .status-pill.ok { background: var(--green-100); color: var(--green-700); }
    .status-pill.unknown { background: #f1f5f9; color: #64748b; }
    .cust-tag {
    display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
    background: var(--sky-50); color: var(--sky-600); font-size: 11px; font-weight: 700; white-space: nowrap;
  }