/* === 全局 === */
:root {
  --bg: #f0f2f5;
  --card-bg: #fff;
  --primary: #4f7cff;
  --primary-dark: #3a5fd9;
  --success: #52c41a;
  --warning: #faad14;
  --danger: #ff4d4f;
  --text: #1a1a1a;
  --text-secondary: #666;
  --border: #e8e8e8;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --radius: 10px;
  --sidebar-w: 200px;
  --bottomnav-h: 56px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-size: 16px; } /* 防止 iOS 缩放 */
[x-cloak] { display: none !important; }

/* === 登录页 === */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-card .login-logo {
  text-align: center;
  font-size: 32px;
  margin-bottom: 6px;
}
.login-card h2 {
  text-align: center;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 28px;
}
.login-card .form-group { margin-bottom: 16px; }
.login-card .login-btn {
  width: 100%;
  padding: 13px;
  font-size: 16px;
  margin-top: 8px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.login-card .login-btn:hover { background: var(--primary-dark); }
.login-card .login-btn:disabled { opacity: 0.6; }
.login-card .login-hint {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 16px;
}
.login-card .login-error {
  background: #fff2f0;
  color: var(--danger);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

/* === 布局 === */
.layout { display: flex; min-height: 100vh; }

/* 侧边栏 — 桌面版 */
.sidebar {
  width: var(--sidebar-w);
  background: #1e2a3a;
  color: #fff;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
}
.sidebar-logo {
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
.sidebar-menu { flex: 1; padding: 10px 0; }
.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}
.sidebar-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-menu a.active { background: var(--primary); color: #fff; }
.sidebar-menu .icon { font-size: 18px; width: 24px; text-align: center; }
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.sidebar-user {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.sidebar-user .user-name { color: #fff; font-weight: 500; }
.sidebar-user .logout-link { color: var(--danger); cursor: pointer; text-decoration: underline; }

/* 主内容区 */
.main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  margin-left: var(--sidebar-w);
}

/* 底部导航 — 手机版 */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottomnav-h);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  z-index: 100;
  justify-content: space-around;
  align-items: center;
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 6px 4px;
  flex: 1;
}
.bottom-nav a.active { color: var(--primary); }
.bottom-nav a .icon { font-size: 20px; }

/* 手机版顶栏用户按钮 */
.mobile-topbar-user {
  display: none;
  align-items: center;
  gap: 8px;
}
.mobile-topbar-user .user-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === 顶栏 === */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}
/* === 房态日历：导航 + 表头 + 合计行 都粘在视口顶部，向下滚看房间时不消失（2026-09-04） === */
.cal-nav, .batch-bar { position: sticky; top: 0; z-index: 6; }
.cal-nav { background: var(--page-bg, #f5f6f8); padding-top: 4px; }
.batch-bar { background: #fff; box-shadow: 0 1px 0 #eee; }
.cal-table thead tr:nth-child(1) th { position: sticky; top: 40px; background: #fff; z-index: 5; box-shadow: 0 1px 0 #e5e7eb; }
.cal-table thead tr:nth-child(2) th { position: sticky; top: 72px; background: #fff7e6; z-index: 5; box-shadow: 0 1px 0 #e5e7eb; }
/* 横向滚动条：更细更柔和 */
.cal-table-wrap::-webkit-scrollbar { height: 8px; }
.cal-table-wrap::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.cal-table-wrap::-webkit-scrollbar-thumb { background: #c5c8d0; border-radius: 4px; }
.cal-table-wrap::-webkit-scrollbar-thumb:hover { background: #a8acb6; }
.cal-table-wrap { scrollbar-width: thin; scrollbar-color: #c5c8d0 #f0f0f0; touch-action: pan-x pan-y; }
.topbar h1 { font-size: 20px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lock-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}
.lock-status.online { background: #f6ffed; color: var(--success); border: 1px solid #b7eb8f; }
.lock-status.offline { background: #fff2f0; color: var(--danger); border: 1px solid #ffccc7; }

/* === 统计卡片 === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  text-align: center;
}
.stat-card .num { font-size: 28px; font-weight: bold; }
.stat-card .label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* === 房态看板（信息丰富版） === */
.board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.stats-bar { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.stat-item { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.stat-item b { font-size: 17px; margin-right: 4px; color: var(--text); }
.src-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

.room-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 12px;
  align-items: start;
}
.room-group {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  box-shadow: var(--shadow);
}
.room-group-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px dashed #e5e7eb;
}
.room-group-header .group-title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.room-group-header .group-meta { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.room-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.room-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  border-top: 4px solid #ccc;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  position: relative;
  min-height: 80px;
}
.room-card:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.room-card:active { transform: scale(0.97); }

/* 状态——边框色 */
.room-card.vacant_clean { border-top: 4px solid var(--success); }
.room-card.vacant_dirty { border-top: 4px solid var(--warning); }
.room-card.occupied { border-top: 4px solid var(--primary); }
.room-card.maintenance { border-top: 4px solid var(--danger); }

/* === 统一颜色规则（与日历一致，按客源着色） === */
/* 入住中卡片按客源：美团=淡黄/线下=淡绿/抖音=淡蓝 */
.room-card.occupied.src-meituan { background: #fffbe6; }
.room-card.occupied.src-offline { background: #f6ffed; }
.room-card.occupied.src-douyin { background: #e6f4ff; }

/* === 空房突出：更大房号 + 更厚边框 + 阴影 === */
.room-card.vacant_clean.vacant-emphasis {
  background: linear-gradient(135deg, #ffffff 0%, #f8fff8 100%);
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.15), 0 0 0 1px rgba(82, 196, 26, 0.08);
  border-top-width: 5px;
}
.room-card.vacant_clean.vacant-emphasis .room-no {
  font-size: 22px;
  color: var(--success);
}

.room-card .rc-line1 { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.room-card .room-no { font-size: 17px; font-weight: bold; }
.room-card .room-type-small { font-size: 11px; color: var(--text-secondary); }
.room-card .room-status {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.room-card .rc-line2 { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }
.room-card .room-price { font-size: 14px; color: var(--primary); font-weight: 600; }
.room-card .room-price .price-base { font-size: 11px; color: var(--text-secondary); font-weight: 400; text-decoration: line-through; margin-left: 4px; }
.room-card .rc-info { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #f0f0f0; }
.room-card .rc-guest { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.room-card .guest-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card .rc-dates { display: flex; gap: 10px; font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.room-card .rc-phone { font-size: 11px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card .rc-action { font-size: 12px; color: var(--primary); margin-top: 8px; text-align: center; font-weight: 500; }
.room-card .rc-reserve {
  margin-top: 6px; padding: 5px 7px; border-radius: 6px;
  background: #fffbe6; border: 1px solid #ffe58f;
}
.room-card .rc-reserve-name { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; }
.room-card .rc-reserve-dates { display: flex; gap: 6px; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.resv-alert {
  background: #fffbe6; border: 1px solid #ffe58f; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px; font-size: 13px;
}
.resv-alert .resv-title { font-weight: 500; }
.resv-alert .resv-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.resv-alert .resv-actions label { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.room-card .card-badge { position: absolute; top: 4px; right: 4px; font-size: 13px; z-index: 2; }
.room-card .card-edit-btn {
  position: absolute; bottom: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; z-index: 3; opacity: 0; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.room-card:hover .card-edit-btn { opacity: 1; }
.room-card .card-edit-btn:hover { background: #fff; transform: scale(1.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); }

/* 看板上的"修改客人信息"快捷按钮（入住卡片右上角，常驻显示） */
.room-card .card-edit-guest {
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(22, 119, 255, 0.25);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; z-index: 3; opacity: 0; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  color: #1677ff;
}
.room-card:hover .card-edit-guest, .room-card.occupied .card-edit-guest { opacity: 1; }
.room-card .card-edit-guest:hover { background: #1677ff; color: #fff; transform: scale(1.15); box-shadow: 0 2px 8px rgba(22, 119, 255, 0.35); }
/* 让 key 图标不会被遮：右移一点 */
.room-card.has-edit-guest .card-badge { right: 30px; }

/* 客源标签 */
.src-badge {
  display: inline-block; padding: 1px 7px; border-radius: 8px;
  font-size: 10px; font-weight: 600; white-space: nowrap;
}
.src-meituan { background: #fffbe6; color: #d48806; }
.src-douyin { background: #e6f4ff; color: #1677ff; }
.src-offline { background: #f6ffed; color: #52c41a; }

/* === 入住备注：卡片上 📝 标记 + 桌面悬停气泡 === */
.note-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 3px; border-radius: 50%;
  background: #fff7e6; color: #ad6800; font-size: 11px; cursor: pointer;
  flex: none; vertical-align: middle;
}
.note-chip:hover { background: #ffd591; }
/* 备注气泡统一走全局 .note-tip-bubble（悬停/点按触发，见 app.js noteTipOpen），不再用 CSS ::after，避免与日历表格裁剪冲突 */

/* 房间详情里的备注行 */
.note-inline {
  display: inline-flex; align-items: flex-start; gap: 4px;
  padding: 4px 10px; background: #fffbe6; border: 1px solid #ffe58f;
  border-radius: 8px; font-size: 12px; color: #614700; line-height: 1.6;
}
.note-edit-link { color: #1677ff; cursor: pointer; font-weight: 700; padding: 0 2px; }
.note-edit-link:hover { text-decoration: underline; }
textarea { font-family: inherit; }

/* === 备注悬浮/点击气泡（全局，fixed 定位，不被日历表格裁剪） === */
.note-tip-backdrop {
  position: fixed; inset: 0; z-index: 90; background: transparent;
}
.note-tip-bubble {
  position: fixed; z-index: 91; width: max-content; max-width: min(300px, 86vw);
  background: rgba(38, 42, 52, .96); color: #fff;
  border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.28);
  padding: 10px 12px; font-size: 13px; line-height: 1.55;
}
.note-tip-label {
  font-size: 11px; opacity: .75; margin-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 3px;
}
.note-tip-text {
  white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto;
}
.note-tip-actions { margin-top: 8px; text-align: right; }
.note-tip-actions .btn { font-size: 12px; padding: 3px 10px; }
/* align 类仅用于标注气泡相对锚点的方位（位置由 app.js 用 getBoundingClientRect 算好后以内联 left/top 给出） */
.note-tip-below { }
.note-tip-above { }

/* 房态日历格子内的备注 📝 小标：现在使用 .cal-corner-note（绝对定位左下角，全局气泡由 noteTipOpen 处理） */

/* === 状态标签颜色 === */
.tag-vacant_clean { background: #f6ffed; color: var(--success); }
.tag-vacant_dirty { background: #fffbe6; color: var(--warning); }
.tag-occupied { background: #e6f0ff; color: var(--primary); }
.tag-maintenance { background: #fff2f0; color: var(--danger); }

/* === 房态日历 === */
.cal-nav {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cal-range { font-size: 15px; font-weight: 600; flex: 1; text-align: center; }
.cal-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
}
.cal-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.cal-table th, .cal-table td { border: 1px solid #f0f0f0; text-align: center; }
.cal-table th { padding: 6px 2px; background: #fafafa; font-size: 11px; font-weight: 600; }
.cal-date-col { min-width: 54px; }
.cal-date-col.cal-today { background: #e6f0ff; }
.cal-date-col.cal-weekend { background: #fff0f0; }
.cal-date-col.cal-today.cal-weekend { background: #ffe0e6; }
.cal-weekday { display: block; font-size: 11px; color: var(--text-secondary); }
.cal-day { display: block; font-size: 13px; font-weight: 700; }
.cal-today .cal-day { color: var(--primary); }
.cal-room-col { min-width: 58px; text-align: left; padding: 3px 6px; }
.cal-room-no { font-size: 12px; font-weight: 700; line-height: 1.3; }
.cal-room-type { font-size: 9px; color: var(--text-secondary); line-height: 1.3; }

/* === 手机端：格子和文字再压缩，避免被截 === */
@media (max-width: 640px) {
  .cal-table-wrap { border-radius: 8px; }
  .cal-table { min-width: 480px; }
  .cal-table th { padding: 3px 1px; font-size: 10px; }
  .cal-date-col { min-width: 46px; }
  .cal-room-col { min-width: 52px; padding: 2px 3px; }
  .cal-room-no { font-size: 11px; }
  .cal-room-type { display: none; }   /* 房型已显示在分组条里，手机端省空间 */
  .cal-cell { padding: 3px 2px 3px 9px; height: 46px; }   /* 新视觉：名字+胶囊两行，46px 清晰不挤 */
  .cal-corner-note { min-width: 20px; height: 20px; font-size: 11px; bottom: 1px; left: 2px; }
  .cal-guest { font-size: 11px; max-width: 100%; line-height: 1.2; }
  .pill { font-size: 9px; padding: 2px 6px; }
  .dot { top: 3px; right: 4px; width: 6px; height: 6px; }
  .cal-cell td { overflow: hidden; }
  .cal-group-row .cal-group-bar { padding: 1px 6px; }
  .cal-group-title { font-size: 10px; gap: 3px; }
  .cal-group-price, .cal-group-count { font-size: 9px; }
  /* 顶部工具栏手机端压缩：字号小 + 按钮间距小 */
  .topbar h1 { font-size: 14px; margin-right: 4px; }
  .topbar { padding: 6px 8px !important; }
  .topbar-actions { gap: 4px; flex-wrap: nowrap; }
  .topbar-actions .btn { padding: 3px 6px; font-size: 12px; }
  .lock-status { font-size: 12px; padding: 2px 6px; }
  .user-btn { width: 30px; height: 30px; font-size: 13px; }
  /* tab 切换按钮紧凑 */
  .cal-nav { gap: 4px; margin-bottom: 6px; }
  .cal-nav .btn { padding: 3px 6px; font-size: 11px; }
  .cal-range { font-size: 12px; }
  /* 手机端 sticky 表头让位更少空间 */
  .cal-table thead tr:nth-child(1) th { top: 36px; }
  .cal-table thead tr:nth-child(2) th { top: 64px; }
  /* 应付合计行手机端紧凑字号 */
  .cal-revenue-bar th { font-size: 9px; padding: 2px 1px; }
  .cal-revenue-cell { font-size: 9px; padding: 2px 1px; }
  .cal-revenue-label { font-size: 10px !important; padding: 2px 4px !important; }
  /* 日历头日期 weekday + day 紧凑 */
  .cal-weekday { font-size: 9px; }
  .cal-day { font-size: 11px; }
}

/* 应付合计汇总行（贴在 thead 第二行） */
.cal-revenue-bar { border-top: 2px solid var(--primary); }
.cal-revenue-label {
  background: #fff7e6 !important;
  color: #d48806 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-right: 2px solid var(--primary);
}
.cal-revenue-cell {
  background: #fff7e6 !important;
  color: #d4380d !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 6px 2px !important;
}
.cal-revenue-cell.cal-today { background: #ffe7ba !important; }
.cal-revenue-cell.cal-weekend { background: #ffece6 !important; }
.cal-revenue-cell.cal-today.cal-weekend { background: #ffc7b0 !important; }

/* 房型分组分隔条 */
.cal-group-row .cal-group-bar {
  padding: 1px 8px;
  background: linear-gradient(90deg, #f0f5ff 0%, #fafbff 60%, transparent 100%);
  border-left: 3px solid var(--primary);
  text-align: left;
}
.cal-group-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  line-height: 1.5;
}
.cal-group-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.cal-group-price {
  font-size: 10px; font-weight: 500;
  color: var(--warning);
}
.cal-group-count {
  font-size: 10px; font-weight: 400;
  color: var(--text-secondary);
}
/* 每个房型组末尾加粗分割线 */
.cal-group tr:last-child td {
  border-bottom: 2px solid #d6e4ff;
}
.cal-cell { box-sizing: border-box; padding: 4px 3px 4px 9px; height: 44px; cursor: pointer; transition: background 0.15s; vertical-align: middle; position: relative; overflow: hidden; }
.cal-cell:hover { background: #f5f5ff; }
/* === 视觉编码（2026-09-04 重设计）：左色条=渠道 / 右上圆点=状态 / 单一金额胶囊 === */
/* 左侧渠道色条（.src-bar-hit 是 14px 热区，内部 4px 色条可点改渠道） */
.src-bar-hit {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  display: flex; align-items: stretch; cursor: pointer; z-index: 2;
  -webkit-tap-highlight-color: rgba(59, 130, 246, .2);
}
.src-bar { width: 4px; border-radius: 0 3px 3px 0; display: block; }
.sb-meituan { background: #ffb100; }
.sb-douyin { background: #1677ff; }
.sb-offline { background: #52c41a; }
/* 右上状态圆点：绿=在住 / 灰=该段已退 / 橙圈=预订 */
.dot { position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; z-index: 1; pointer-events: none; }
.dot-in { background: #27ae60; }
.dot-out { background: #b3b8c2; }
.dot-res { background: #ff9f1a; box-shadow: 0 0 0 2px #ffe3bd; }
/* 金额胶囊：有欠款只显示欠款（红欠/黄待/蓝挂），无欠款显示房价（灰） */
.pill {
  font-size: 10px; font-weight: 600; line-height: 1; padding: 3px 8px;
  border-radius: 9px; color: #fff; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pill-red { background: #cf1322; }
.pill-yellow { background: #d48806; }
.pill-blue { background: #1d6fd1; }
.pill-gray { background: #eceef2; color: #4b5563; }
.pill-res { background: #fff; color: #d97706; border: 1px solid #ffd9a0; }
/* 已退房段：客人名变灰弱化 */
.cal-cell-done .cal-guest { color: #6b7280; font-weight: 500; }
/* 今日空房的 + 引导 */
.cal-plus { color: #c3cad6; font-size: 16px; font-weight: 300; line-height: 1; }

/* === 四角角标（旧版样式，2026-09-04 后仅备注 📝 仍在用） === */
.cal-corner-note {
  position: absolute; bottom: 1px; left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 4px;
  border-radius: 5px; background: #e6f4ff; color: #1677ff; border: 1px solid #91caff;
  font-size: 12px; line-height: 1; cursor: pointer;
  z-index: 2; pointer-events: auto; touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(22, 119, 255, .25);
}
.cal-corner-note:hover { background: #bae0ff; }

/* 中央内容：纵向居中（名字 + 胶囊 两行） */
.cal-cell-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 16px; max-width: 100%;
  line-height: 1.25;
  padding: 0 4px;
}
.cal-cell-body { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; overflow: hidden; }
.cal-guest { font-size: 12px; font-weight: 600; color: #1f2937; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 图例小元素（色条/圆点/胶囊） */
.lg-bar { display: inline-block; width: 14px; height: 5px; border-radius: 2px; vertical-align: middle; margin-right: 2px; }
.lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }
.lg-dot-res { background: #ff9f1a !important; box-shadow: 0 0 0 2px #ffe3bd; }
.lg-pill { display: inline-block; font-size: 9px; font-weight: 600; line-height: 1; padding: 2px 5px; border-radius: 7px; color: #fff; vertical-align: middle; margin-right: 2px; }
.lg-pill-red { background: #cf1322; }
.lg-pill-yellow { background: #d48806; }
.lg-pill-blue { background: #1d6fd1; }
.lg-pill-gray { background: #eceef2; color: #4b5563; }

/* === 聚光灯效果（Excel 风格：鼠标悬停时整行整列高亮） === */
@media (hover: hover) {
  .cal-spotlight-row,
  .cal-spotlight-col {
    box-shadow: inset 0 0 0 9999px rgba(59, 130, 246, 0.06);
  }
  /* 行列交叉点（当前格子）：高亮更强 */
  .cal-spotlight-row.cal-spotlight-col {
    box-shadow: inset 0 0 0 9999px rgba(59, 130, 246, 0.15);
  }
  /* 表头日期格高亮 */
  th.cal-spotlight-col {
    background-color: #e8f0ff !important;
  }
  /* 房号格高亮 */
  td.cal-spotlight-row {
    background-color: #e8f0ff !important;
  }
  /* 应付合计行高亮 */
  .cal-revenue-cell.cal-spotlight-col {
    box-shadow: inset 0 0 0 9999px rgba(255, 140, 0, 0.08);
  }
}

/* 日历单元格颜色 */
.cal-cell.cal-occupied { background: #e6f0ff; }
.cal-cell.cal-occupied.cal-src-meituan { background: #fffbe6; }
.cal-cell.cal-occupied.cal-src-douyin { background: #e6f4ff; }
.cal-cell.cal-occupied.cal-src-offline { background: #f6ffed; }
.cal-cell.cal-reserved { background: #fffbe6; }
.cal-cell.cal-reserved.cal-src-meituan { background: #fffce6; border-left: 3px solid #faad14; }
.cal-cell.cal-reserved.cal-src-douyin { background: #f0f7ff; border-left: 3px solid #1677ff; }
.cal-cell.cal-reserved.cal-src-offline { background: #fafffef; border-left: 3px solid #52c41a; }
.cal-cell.cal-maintenance { background: #fff2f0; }

.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.cal-legend-box { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.cal-legend-box.cal-occupied { background: #e6f0ff; border: 1px solid #b3d1ff; }
.cal-legend-box.cal-reserved { background: #fffbe6; border: 1px solid #ffe58f; }
.cal-legend-box.cal-vacant { background: #fff; border: 1px solid #e8e8e8; }
.cal-legend-box.cal-src-meituan { background: #fffbe6; border: 1px solid #ffe58f; }
.cal-legend-box.cal-src-douyin { background: #e6f4ff; border: 1px solid #91caff; }
.cal-legend-box.cal-src-offline { background: #f6ffed; border: 1px solid #b7eb8f; }

/* 日历格子内的小来源标签 */
.cal-src-tag {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  margin-left: 3px;
  vertical-align: 1px;
}
.cal-src-tag.cal-src-meituan { background: #fffbe6; color: #d48806; border: 1px solid #ffe58f; }
.cal-src-tag.cal-src-douyin { background: #e6f4ff; color: #1677ff; border: 1px solid #91caff; }
.cal-src-tag.cal-src-offline { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }

/* 标签可点击 → 光标+hover */
.cal-src-tag { cursor: pointer; transition: filter 0.15s, transform 0.1s; }
.cal-src-tag:hover { filter: brightness(0.95); transform: scale(1.05); }

/* 全局渠道选择器（fixed 浮层，脱离 .cal-cell overflow:hidden 限制） */
.src-picker-global {
  position: fixed;
  z-index: 65;
  animation: srcPickerIn 0.14s ease-out;
}
@keyframes srcPickerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 来源选择气泡：原为 cell 内 absolute 浮层，会被 .cal-cell overflow:hidden 裁切。
   现改为全局 fixed 容器的 inline 排列；保留原 class 名以复用 .src-opt */
.cal-src-wrap { display: contents; }
.cal-src-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  white-space: nowrap;
  max-width: calc(100vw - 16px);
  overflow-x: auto;
}
.cal-src-picker::before { display: none; }   /* 旧版的三角箭头已不适用 */
.src-opt {
  padding: 4px 8px;
  border: 1px solid transparent;
  background: #fafafa;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.12s;
}
.src-opt:hover { background: #fff; transform: translateY(-1px); }
.src-opt.active { font-weight: 700; box-shadow: 0 0 0 1.5px currentColor inset; }
.src-opt-meituan { color: #d48806; }
.src-opt-meituan:hover { background: #fffbe6; }
.src-opt-douyin { color: #1677ff; }
.src-opt-douyin:hover { background: #e6f4ff; }
.src-opt-offline { color: #52c41a; }
.src-opt-offline:hover { background: #f6ffed; }
.src-opt-cancel { color: #999; padding: 4px 6px; }
.src-opt-cancel:hover { background: #f0f0f0; color: #666; }
@media (max-width: 640px) {
  .cal-src-picker { padding: 5px; gap: 3px; }
  .src-opt { padding: 6px 12px; font-size: 12px; }
  .src-opt-cancel { padding: 6px 8px; }
}

/* === 接力入住弹窗分段 === */
.relay-segments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px dashed #b3c6ff;
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(135deg, #f6f8ff 0%, #fffbe6 100%);
}
.relay-segment {
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.relay-segment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 14px;
}
.relay-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.relay-tag-am { background: #fff7e6; color: #d48806; border: 1px solid #ffd591; }
.relay-tag-pm { background: #e6f7ff; color: #1677ff; border: 1px solid #91caff; }
.relay-tag-hourly { background: #e6fffb; color: #0d9488; border: 1px solid #99f6e4; }
.relay-tag-daily { background: #e6f7ff; color: #1677ff; border: 1px solid #91caff; }
.relay-segment-hourly { border-left: 3px solid #14b8a6; }
.relay-price { margin-left: auto; font-size: 13px; color: #e67e22; font-weight: 600; }
.relay-warn {
  background: #fff1f0;
  border: 1px solid #ffa39e;
  color: #cf1322;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.cal-cell-anomaly {
  outline: 2px dashed #ff4d4f;
  outline-offset: -2px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,77,79,0.06) 6px, rgba(255,77,79,0.06) 12px);
}

/* === 模态框 === */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: 520px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h2 { font-size: 18px; }
.modal-close { background: none; border: none; font-size: 24px; color: #999; padding: 0 4px; }
.modal-body { padding: 20px 24px; }
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--card-bg);
  position: sticky;
  bottom: 0;
}

/* === 表单 === */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79,124,255,0.15);
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* === 按钮 === */
.btn {
  padding: 9px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { opacity: 0.9; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-default { background: #f0f0f0; color: var(--text); }
.btn-default:hover { background: #e0e0e0; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-lg { padding: 12px 28px; font-size: 15px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === 表格 === */
.table {
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; }
th {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: #fafafa;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbff; }

/* === 标签 === */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.badge-success { background: #f6ffed; color: var(--success); }
.badge-warning { background: #fffbe6; color: var(--warning); }
.badge-danger { background: #fff2f0; color: var(--danger); }
.badge-info { background: #e6f0ff; color: var(--primary); }
.badge-default { background: #f0f0f0; color: var(--text-secondary); }

/* === Toast === */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 14px 24px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  z-index: 2000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: slideIn 0.3s ease;
  max-width: 90vw;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.info { background: var(--primary); }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* === 图例 === */
.legend {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  font-size: 13px;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }

/* === 空状态 === */
.empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.empty .icon { font-size: 48px; margin-bottom: 12px; }

/* === 工具栏 === */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar-left { display: flex; gap: 10px; align-items: center; }
.toolbar-right { display: flex; gap: 10px; }

/* === 支付方式选择 === */
.pay-methods { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-method {
  padding: 10px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  text-align: center;
  position: relative;
}
.pay-method:hover { border-color: var(--primary); }
.pay-method.selected { border-color: var(--primary); background: #e6f0ff; color: var(--primary); }
.pay-method .icon { font-size: 20px; display: block; margin-bottom: 4px; }
.pay-method .pm-sub { display: block; font-size: 11px; color: #999; margin-top: 2px; }
.price-hint { margin-top: 6px; font-size: 13px; color: var(--primary); background: #f0f6ff; padding: 6px 10px; border-radius: 6px; }

/* === 入住记录 === */
.guest-search-bar {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.guest-search-bar .form-row { margin-bottom: 0; }
.guest-search-btns { display: flex; align-items: flex-end; gap: 8px; }
.guest-search-btns .btn { white-space: nowrap; }
.empty-tip {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.vip-tag {
  display: inline-block;
  font-size: 10px;
  color: #d48806;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.link { color: var(--primary); text-decoration: none; }
.link:hover { text-decoration: underline; }
.guest-history-title { margin: 18px 0 10px; font-size: 15px; color: var(--text); }
.guest-history-table { max-height: 300px; overflow-y: auto; }
.pay-method.selected .pm-sub { color: var(--primary); opacity: 0.8; }

/* === 对账面板 === */
.settlement-panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.settlement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.settlement-header h3 { font-size: 16px; }
.settlement-platforms {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.settlement-platform-card {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  background: #fafafa;
}
.settlement-platform-card.overdue { border-color: var(--warning); background: #fffbe6; }
.sp-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.sp-amounts { display: flex; gap: 20px; }
.sp-pending, .sp-settled { display: flex; flex-direction: column; }
.sp-amt { font-size: 18px; font-weight: bold; }
.sp-tag { font-size: 11px; color: var(--text-secondary); }

/* 待到账明细表行高亮 */
tr.overdue { background: #f6ffed; }
tr.overdue:hover { background: #f0ffe0; }

/* === 设置面板 === */
.settings-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  max-width: 640px;
  margin-bottom: 20px;
}
.settings-section h3 {
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.settings-section .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 12px;
}
.settings-section .setting-row label {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}
.settings-section .setting-row input[type="text"],
.settings-section .setting-row input[type="password"],
.settings-section .setting-row input[type="number"] {
  flex: 1;
  max-width: 300px;
  padding: 8px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
}
.settings-section .setting-row .checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* === 备份文件列表 === */
.backup-list {
  margin-top: 12px;
}
.backup-list .backup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}
.backup-list .backup-item .backup-name { font-family: monospace; }
.backup-list .backup-item .backup-size { color: var(--text-secondary); font-size: 12px; }

/* ====================================================
   响应式 — 手机版 (≤768px)
   ==================================================== */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
  }

  /* 隐藏侧边栏，启用底部导航 */
  .sidebar { display: none; }
  .bottom-nav { display: flex; }
  .mobile-topbar-user { display: flex; }

  .main {
    margin-left: 0;
    padding: 12px;
    padding-bottom: calc(var(--bottomnav-h) + 12px);
  }

  /* 顶栏标题缩小 */
  .topbar h1 { font-size: 18px; }
  .topbar { margin-bottom: 10px; }

  /* 统计卡片 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .stat-card { padding: 12px 8px; }
  .stat-card .num { font-size: 22px; }
  .stat-card .label { font-size: 12px; }

  /* 统计栏 */
  .stats-bar { gap: 14px; }
  .stat-item { font-size: 12px; }
  .stat-item b { font-size: 15px; }

  /* 房间看板：单列 */
  .room-board {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .room-group { padding: 8px 10px 10px; }
  .room-group-header { gap: 8px; padding-bottom: 4px; margin-bottom: 6px; }
  .room-group-header .group-title { font-size: 13px; }
  .room-group-header .group-meta { font-size: 11px; }

  /* 房间卡片：手机版2列 */
  .room-group-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .room-card { padding: 8px 10px; }
  .room-card .room-no { font-size: 16px; }
  .room-card .room-price { font-size: 13px; }
  .room-card .room-status { font-size: 10px; padding: 1px 6px; }
  .room-card .card-edit-btn { opacity: 0.7; width: 20px; height: 20px; }
  .room-card .rc-info { font-size: 11px; }
  .room-card .guest-name { font-size: 12px; }

  /* 日历手机版 */
  .cal-nav { gap: 6px; }
  .cal-range { font-size: 13px; }
  .cal-table { min-width: 600px; }
  .cal-guest { font-size: 11px; max-width: 40px; }

  /* 手机端日历：房号列冻结（横向滚动时固定不动） */
  .cal-room-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    box-shadow: 2px 0 4px rgba(0,0,0,0.08);
  }
  /* 表头房号列 z-index 更高（叠在 body 房号列之上） */
  thead .cal-room-col { z-index: 4; }
  /* 应付合计行的房号格背景也要覆盖 */
  .cal-revenue-label { position: sticky; left: 0; z-index: 4; }

  /* 弹窗全屏化 */
  .modal-overlay { align-items: stretch; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }
  .modal-header { padding: 14px 16px; position: sticky; top: 0; background: #fff; z-index: 10; }
  .modal-header h2 { font-size: 16px; }
  .modal-body { padding: 16px; }
  .modal-footer {
    padding: 12px 16px;
    position: sticky;
    bottom: 0;
    background: #fff;
  }

  /* 表单行变单列 */
  .form-row { flex-direction: column; gap: 0; }

  /* 按钮 */
  .btn { padding: 10px 16px; }
  .btn-sm { padding: 7px 12px; }

  /* 表格：水平滚动 */
  .table { overflow-x: auto; }

  /* 支付方式 */
  .pay-methods { gap: 6px; }
  .pay-method { padding: 8px 12px; font-size: 13px; flex: 1; min-width: 70px; }

  /* 设置面板 */
  .settings-section { padding: 14px 16px; }
  .settings-section .setting-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .settings-section .setting-row input[type="text"],
  .settings-section .setting-row input[type="password"],
  .settings-section .setting-row input[type="number"] {
    max-width: 100%;
    width: 100%;
  }

  /* Toast 位置 */
  .toast { top: 10px; right: 10px; left: 10px; text-align: center; }

  /* 顶部操作按钮换行 */
  .topbar-actions { width: 100%; justify-content: flex-start; }
}

/* ====================================================
   响应式 — 大屏手机 (481px~768px)
   ==================================================== */
@media (max-width: 480px) {
  .room-group-cards { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====================================================
   响应式 — 超小屏 (≤380px)
   ==================================================== */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stats-bar { flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* === 财务管理 === */
.fin-period-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fin-period-btn {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.fin-period-btn:hover { border-color: var(--primary); }
.fin-period-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.fin-period-range {
  font-size: 13px;
  color: var(--text-secondary);
  margin-left: auto;
  margin-right: 8px;
}

.fin-date-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fin-date-input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  min-width: 130px;
}
.fin-date-input:focus {
  border-color: var(--primary);
  outline: none;
}
.fin-date-sep {
  font-size: 13px;
  color: var(--text-secondary);
}
.fin-nav-btn {
  min-width: 28px;
  font-size: 16px;
  font-weight: bold;
  padding: 4px 10px;
}
.fin-shortcuts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.fin-section {
  margin-bottom: 20px;
}
.fin-section-title {
  font-size: 15px;
  margin-bottom: 10px;
  padding-left: 4px;
}

/* 柱状图 */
.fin-chart-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px 20px;
  margin-bottom: 20px;
}
.fin-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 180px;
  padding: 8px 4px 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to top, rgba(16, 185, 129, 0.025), transparent 60%);
  border-radius: 6px;
}
.fin-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  flex: 1;
  padding: 2px 0 4px;
  border-radius: 6px;
  transition: background 0.2s;
}
.fin-bar-group.fin-bar-current {
  background: linear-gradient(to top, rgba(79, 124, 255, 0.07), transparent);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.fin-bar-pillars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 130px;
  width: 100%;
}
.fin-bar-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  max-width: 16px;
  min-height: 0;
}
.fin-bar-value {
  font-size: 9px;
  font-weight: 700;
  margin-bottom: 3px;
  white-space: nowrap;
  font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace;
  letter-spacing: -0.2px;
}
.fin-bar-value.income-value { color: #047857; }
.fin-bar-value.expense-value { color: #be123c; }
.fin-bar-group.fin-bar-current .fin-bar-value.income-value { color: #059669; }
.fin-bar-group.fin-bar-current .fin-bar-value.expense-value { color: #e11d48; }
.fin-bar {
  width: 100%;
  min-height: 0;
  border-radius: 4px 4px 2px 2px;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s, transform 0.2s;
  position: relative;
}
.fin-bar-income {
  background: linear-gradient(to top, #059669, #34d399);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.fin-bar-income:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.fin-bar-expense {
  background: linear-gradient(to top, #e11d48, #fb7185);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.28), inset 0 1px 0 rgba(255,255,255,0.25);
  border-radius: 4px 4px 2px 2px;
}
.fin-bar-expense:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.fin-bar-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 6px;
  white-space: nowrap;
  font-weight: 500;
}
.fin-bar-group.fin-bar-current .fin-bar-label {
  color: var(--primary);
  font-weight: 700;
}
.fin-legend {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  align-items: center;
}
.fin-chart-tip {
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(79, 124, 255, 0.1);
  color: var(--primary);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: -1px;
}
.fin-legend .legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
}

/* 收支明细筛选栏 */
.fin-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fin-filter-bar select,
.fin-filter-bar input {
  padding: 7px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  min-width: 110px;
}

/* 类型切换 */
.fin-type-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.fin-type-btn {
  flex: 1;
  padding: 12px;
  border: none;
  background: #f5f5f5;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.fin-type-btn.active {
  background: var(--primary);
  color: #fff;
}
.fin-type-btn:first-child.active {
  background: var(--success);
}

/* 手机版财务适配 */
@media (max-width: 768px) {
  .fin-period-bar { gap: 4px; padding: 6px 8px; }
  .fin-period-btn { padding: 5px 12px; font-size: 13px; }
  .fin-period-range { width: 100%; text-align: center; margin: 4px 0; }
  .fin-date-controls { width: 100%; }
  .fin-date-input { min-width: 110px; font-size: 13px; }
  .fin-filter-bar select,
  .fin-filter-bar input { min-width: 100%; flex: 1; }
  .fin-bar-chart { height: 150px; gap: 4px; }
  .fin-bar-pillars { height: 105px; }
  .fin-bar-group { min-width: 32px; }
  .fin-bar-label { font-size: 9px; }
  .fin-bar-value { font-size: 8px; }
  .fin-chart-section { padding: 12px 14px; }
}

/* ===== 欠款三级预警（红=现付欠款 / 黄=平台待结算 / 蓝=长住挂账） ===== */
/* 月租催收提醒条（收租日到了的月付/隔付客人） */
.rent-reminder-bar {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-left: 4px solid #1890ff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.rent-reminder-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
}
.rent-reminder-title { color: #096dd9; font-weight: 700; font-size: 14px; }
.rent-reminder-body {
  padding: 0 12px 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.rent-reminder-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 14px; font-size: 13px;
  background: #fff; border: 1px solid #91d5ff; color: #0958a3;
}
.rent-reminder-chip .rent-reminder-amount { font-weight: 700; color: #cf1322; }
.rent-reminder-chip .rent-reminder-meta { font-size: 12px; color: #999; }
.rent-reminder-chip .btn-sm {
  padding: 2px 8px; font-size: 12px; margin-left: 4px;
}

/* 看板顶部红色警告条 */
.debt-alert {
  background: #fff1f0;
  border: 1px solid #ffa39e;
  border-left: 4px solid #cf1322;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.debt-alert-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; cursor: pointer;
}
.debt-alert-title { color: #cf1322; font-weight: 700; font-size: 14px; }
.debt-alert-toggle { color: #cf1322; font-size: 12px; }
.debt-alert-body {
  padding: 0 12px 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.debt-chip-wrap { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.debt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 14px; font-size: 13px;
  background: #fff; border: 1px solid #ffa39e;
  cursor: pointer; user-select: none;
  align-self: flex-start;
  transition: background 0.15s;
}
.debt-chip:hover { background: #fff1f0; }
.debt-chip-red { border-color: #ff7875; color: #cf1322; }
.debt-chip .debt-amount { font-weight: 700; }
.debt-chip .debt-meta { font-size: 11px; color: #8c8c8c; }
.debt-chip .debt-toggle { font-size: 11px; color: #cf1322; margin-left: 4px; padding-left: 6px; border-left: 1px dashed #ffccc7; }
/* 展开后的账单明细 */
.debt-detail {
  background: #fff; border: 1px solid #ffccc7; border-radius: 6px;
  padding: 8px 10px; margin: 4px 0 6px 0; font-size: 12px;
  max-width: 720px;
}
.debt-detail-head {
  display: flex; gap: 14px; padding: 4px 0 8px 0;
  border-bottom: 1px dashed #ffd6d6; margin-bottom: 6px; color: #555;
}
.debt-detail-head .dim { color: #999; }
.debt-detail-head b { color: #cf1322; font-weight: 700; }
.debt-bill {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) auto 70px auto auto auto;
  align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px dotted #f0f0f0;
}
.debt-bill:last-child { border-bottom: 0; }
.debt-bill-item { color: #333; }
.debt-bill-cat { font-size: 11px; color: #888; background: #fafafa; padding: 1px 6px; border-radius: 3px; }
.debt-bill-amt { font-weight: 700; color: #333; text-align: right; }
.debt-bill-unpaid .debt-bill-amt { color: #cf1322; }
.debt-bill-meta { font-size: 11px; color: #888; }
.debt-bill-date { font-size: 11px; color: #bbb; }
.debt-bill-paid { color: #999; }
.debt-bill-paid .debt-bill-amt { color: #999; font-weight: 400; text-decoration: line-through; }
.debt-bill-info {
  display: block; padding: 8px; background: #fffbe6; border: 1px dashed #ffe58f;
  border-radius: 4px; color: #874d00;
}
.debt-bill-info b { color: #cf1322; }
.debt-bill-section-title {
  font-size: 11px; color: #999; margin: 6px 0 2px; padding-top: 6px;
  border-top: 1px dashed #f0f0f0;
}

/* 入住基本信息（房号/入住时间/单价/晚数/押金） */
.debt-stayinfo {
  background: #fafafa; border: 1px solid #f0f0f0; border-radius: 4px;
  padding: 6px 10px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #555;
}
.debt-stayinfo-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.debt-stayinfo .dli { color: #999; font-size: 11px; }
.debt-stayinfo b { color: #333; font-weight: 700; }

/* 全部账单明细表格 */
.debt-bills-title {
  font-size: 12px; color: #555; margin: 6px 0 4px;
  padding-bottom: 4px; border-bottom: 1px solid #f0f0f0;
}
.debt-bill-pay-method { font-size: 11px; color: #1677ff; }

/* 消费类账单（房费以外的矿泉水/商品等）：橙色高亮 */
.debt-bill-consume { background: #fff7e6; }
.debt-bill-consume .debt-bill-item { color: #d46b08; font-weight: 600; }
.debt-bill-consume .debt-bill-amt { color: #d46b08; }
.debt-bill-paid-consume { background: #fafafa; }
.debt-bill-paid-consume .debt-bill-item { color: #888; }
.debt-bill-paid-consume .debt-bill-amt { color: #888; font-weight: 400; text-decoration: line-through; }

/* 计算公式条 */
.debt-detail-head { padding: 8px 0 4px 0; }
.debt-detail-head .debt-final {
  color: #cf1322; font-weight: 700; font-size: 14px;
  margin-left: auto; padding-left: 8px; border-left: 2px solid #ff7875;
}

/* 三级汇总条 */
.debt-summary-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 6px 12px; margin-bottom: 10px;
  background: #fafafa; border: 1px solid #f0f0f0; border-radius: 8px;
  font-size: 13px;
}
.debt-sum { font-weight: 600; }
.debt-sum-red { color: #cf1322; }
.debt-sum-yellow { color: #d48806; }
.debt-sum-blue { color: #1d6fd1; }
.debt-sum.dim { color: #bbb; }
.debt-sum-note { color: #999; font-size: 12px; font-weight: 400; margin-left: auto; }

/* 房间卡片上的欠款标记 */
.rc-debt {
  font-size: 12px; font-weight: 700; margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.rc-debt-red { color: #cf1322; }
.rc-debt-yellow { color: #d48806; }
.rc-debt-blue { color: #1d6fd1; }
.rc-debt-mode {
  font-size: 10px; font-weight: 400; color: #fff;
  background: #1d6fd1; border-radius: 3px; padding: 0 4px;
}

/* 日历格子欠款角标 */
.cal-debt-tag {
  display: inline-block; margin-top: 2px;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 8px;
}
.cal-debt-red { background: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; }
.cal-debt-yellow { background: #fffbe6; color: #d48806; border: 1px solid #ffe58f; }
.cal-debt-blue { background: #e6f4ff; color: #1d6fd1; border: 1px solid #91caff; }
.cal-debt-overdue { background: #cf1322; color: #fff; border-color: #cf1322; }

/* 详情弹窗内联欠款 */
.debt-inline { font-weight: 600; }
.debt-inline-red { color: #cf1322; }
.debt-inline-yellow { color: #d48806; }
.debt-inline-blue { color: #1d6fd1; }

/* === 分段编辑弹窗 === */
.split-opt {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border: 1px solid #d9d9d9; border-radius: 8px;
  cursor: pointer; font-size: 13px; background: #fff; transition: all .15s;
}
.split-opt:hover { border-color: #1890ff; }
.split-opt.active { border-color: #1890ff; background: #e6f7ff; }
.split-opt input[type="radio"] { margin-top: 3px; }

/* === 日历批量模式 === */
.batch-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin: 8px 0;
  background: #fffbe6; border: 1px solid #ffe58f; border-radius: 8px;
  flex-wrap: wrap;
}
.batch-range { font-weight: 700; color: #ad6800; }
.batch-input {
  padding: 6px 8px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 13px;
  min-width: 90px;
}
.cal-cell-batchable { cursor: crosshair !important; }
.cal-cell-batch {
  outline: 2px solid #faad14 !important;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 20px rgba(250, 173, 20, .25) !important;
}

/* ===== 新订单强提醒横幅（叮咚响起时出现，红底闪烁，点击消除） ===== */
.order-alert-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff4d4f, #cf1322);
  color: #fff;
  cursor: pointer;
  animation: orderAlertPulse 1s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(207, 19, 34, .4);
}
@keyframes orderAlertPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

/* ===== 换房弹窗的"选新房"网格 ===== */
.rc-pick {
  appearance: none;
  border: 2px solid #d9d9d9;
  background: #fff;
  border-radius: 8px;
  padding: 8px 4px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.rc-pick:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.rc-pick.selected {
  border-color: var(--primary);
  background: #e6f0ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, .2);
}
.rc-pick.rc-pick-other .rc-pick-no {
  color: #888;
}
.rc-pick.rc-pick-other .rc-pick-tag {
  position: absolute;
  top: -8px; right: -6px;
  font-size: 10px;
  background: #fa8c16;
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.2;
}
.rc-pick-no { font-size: 16px; font-weight: 700; line-height: 1.2; }
.rc-pick-type { font-size: 11px; color: #999; margin-top: 2px; }
.rc-pick-price { font-size: 11px; color: #e67e22; margin-top: 2px; }

/* ============ 客人档案智能匹配下拉（入住/预约表单姓名输入触发） ============ */
.gm-group { position: relative; }
.gm-hint { font-weight: 400; font-size: 11px; color: #999; margin-left: 4px; }
.guest-match-list {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  z-index: 60; max-height: 264px; overflow-y: auto;
}
.gm-loading { padding: 10px 12px; font-size: 12px; color: #999; }
.gm-item { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.gm-item:last-child { border-bottom: none; }
.gm-item:hover, .gm-item.active { background: #f0f7ff; }
.gm-line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gm-name { font-weight: 700; font-size: 13px; color: #222; }
.gm-vip { font-size: 10px; padding: 0 5px; border-radius: 3px; line-height: 16px; white-space: nowrap; }
.gm-vip.vip { background: #fff7e6; color: #d48806; border: 1px solid #ffd666; }
.gm-vip.black { background: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; }
.gm-stays { font-size: 11px; color: #52c41a; font-weight: 600; }
.gm-line2 { display: flex; gap: 10px; margin-top: 2px; font-size: 11px; color: #666; flex-wrap: wrap; }
.gm-id { font-family: Consolas, monospace; letter-spacing: .3px; }
.gm-line3 { font-size: 11px; color: #999; margin-top: 1px; }
.gm-foot { padding: 5px 10px; font-size: 10px; color: #bbb; text-align: center; background: #fafafa; }
@media (max-width: 640px) {
  .guest-match-list { max-height: 220px; }
  .gm-item { padding: 6px 8px; }
  .gm-hint { display: none; }
}