/* 鸿福楼 · 网页管理端样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f6fa; color: #1a1a1a; font-size: 14px; }
button { cursor: pointer; border: none; border-radius: 6px; font-size: 14px; }
input, select, textarea { border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; font-size: 14px; outline: none; width: 100%; }
input:focus, select:focus { border-color: #4a6cf7; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #fafbfc; color: #666; font-weight: 600; white-space: nowrap; }
tr:hover td { background: #f8f9ff; }

.btn { display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: 14px; }
.btn-primary { background: #4a6cf7; color: #fff; }
.btn-primary:hover { background: #3a5ce0; }
.btn-danger { background: #fff; color: #e64340; border: 1px solid #e64340; }
.btn-danger:hover { background: #e64340; color: #fff; }
.btn-ghost { background: #fff; color: #4a6cf7; border: 1px solid #4a6cf7; }
.btn-success { background: #07c160; color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-block { width: 100%; padding: 10px; }

/* 状态标签 */
.tag { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; }
.tag-unpaid { background: #fef0f0; color: #e64340; }
.tag-partial { background: #fff4e5; color: #ff9800; }
.tag-paid { background: #e8f8ef; color: #07c160; }
.tag-vacant { background: #f0f0f0; color: #999; }
.tag-done { background: #e8f8ef; color: #07c160; }

/* 登录页 */
#loginView { max-width: 360px; margin: 100px auto; background: #fff; border-radius: 12px; padding: 40px 32px; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
#loginView .login-logo { font-size: 22px; text-align: center; margin-bottom: 6px; color: #4a6cf7; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
#loginView .login-logo img { height: 30px; width: auto; display: block; }
#loginView .sub { text-align: center; color: #999; margin-bottom: 28px; }
#loginView input { margin-bottom: 14px; padding: 11px; }
.err-msg { color: #e64340; font-size: 13px; margin-bottom: 10px; min-height: 18px; }

/* 主框架：顶部信息栏 + 左侧边栏 + 内容区 */
#appView { display: none; max-width: 1280px; margin: 0 auto; padding: 14px; }
.topbar { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 10px; padding: 10px 18px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.topbar .logo { font-size: 18px; font-weight: 700; color: #4a6cf7; display: flex; align-items: center; gap: 8px; }
.topbar .logo .logo-img { height: 28px; width: auto; display: block; }
.topbar .userinfo { display: flex; align-items: center; gap: 10px; }
.topbar .user-avatar { width: 30px; height: 30px; background: #eef1ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.topbar .user-name { color: #333; font-weight: 600; }
.layout { display: flex; gap: 12px; align-items: flex-start; }
.sidebar { width: 176px; background: #fff; border-radius: 10px; padding: 10px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.04); flex-shrink: 0; position: sticky; top: 14px; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; color: #555; cursor: pointer; font-size: 15px; transition: .12s; }
.menu-item:hover { background: #f5f7ff; color: #4a6cf7; }
.menu-item.active { background: #4a6cf7; color: #fff; font-weight: 600; }
.content { flex: 1; min-width: 0; }
.page { display: none; }
.page.active { display: block; }

@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; display: flex; overflow-x: auto; position: static; }
  .menu-item { white-space: nowrap; padding: 10px 14px; }
}

/* 卡片 */
.card { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.04); margin-bottom: 14px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; }

/* 房源卡片 */
.house-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.house-card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.04); cursor: pointer; transition: .15s; border-left: 4px solid #4a6cf7; }
.house-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.house-card .house-img { margin: -18px -18px 10px; border-radius: 10px 10px 0 0; overflow: hidden; max-height: 150px; background: #f0f2f7; }
.house-card .house-img img { width: 100%; height: 150px; object-fit: cover; display: block; }
.house-card h3 { font-size: 17px; margin-bottom: 8px; }
.house-card .meta { color: #999; font-size: 13px; line-height: 1.9; }
.house-card .income { color: #4a6cf7; font-weight: 700; font-size: 18px; }
.house-card .ops { margin-top: 10px; display: flex; gap: 8px; }
.house-card .ops button { cursor: pointer; }

/* 表单图片上传/预览 */
.img-preview { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.img-preview img { max-width: 220px; max-height: 120px; border-radius: 8px; border: 1px solid #eee; object-fit: cover; }

/* 房间列表 */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.room-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.04); cursor: pointer; transition: .15s; }
.room-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.room-card .room-img { margin: -14px -14px 10px; border-radius: 10px 10px 0 0; overflow: hidden; max-height: 120px; background: #f0f2f7; }
.room-card .room-img img { width: 100%; height: 120px; object-fit: cover; display: block; }
.room-card .no { font-size: 18px; font-weight: 700; }
.room-card .tenant { margin: 6px 0; color: #333; }
.room-card .info { color: #999; font-size: 13px; line-height: 1.8; }
.room-card .income { margin-top: 6px; color: #999; font-size: 13px; }
.room-card .income .income-num { color: #4a6cf7; font-weight: 700; font-size: 16px; }
.room-card .ops { margin-top: 8px; display: flex; gap: 8px; }

/* 账单行 */
.bill-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fff; border-radius: 8px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.bill-row:hover { background: #f8f9ff; }
.bill-row .left .room { font-weight: 600; }
.bill-row .left .name { color: #999; font-size: 13px; margin-left: 8px; }
.bill-row .right { display: flex; align-items: center; gap: 14px; }
.bill-row .amount { font-weight: 700; font-size: 15px; }

/* 明细表 */
.detail-list { line-height: 2; }
.detail-list .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #eee; }
.detail-list .row.total { font-weight: 700; font-size: 16px; border-bottom: none; }

/* 汇总 */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.summary .item { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.summary .item .label { color: #999; font-size: 13px; }
.summary .item .value { font-size: 20px; font-weight: 700; margin-top: 4px; }
.summary .item.red .value { color: #e64340; }
.summary .item.green .value { color: #07c160; }
.summary .item.blue .value { color: #4a6cf7; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 100; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 92%; max-width: 460px; max-height: 88vh; overflow: auto; padding: 24px; }
.modal h3 { margin-bottom: 16px; }
.modal .form-item { margin-bottom: 12px; }
.modal .form-item label { display: block; margin-bottom: 5px; color: #666; font-size: 13px; }
.modal .form-row { display: flex; gap: 10px; }
.modal .form-row > div { flex: 1; }
.modal .modal-ops { display: flex; gap: 10px; margin-top: 18px; }
.modal .modal-ops button { flex: 1; padding: 10px; }

/* 图表 */
canvas { width: 100%; height: 260px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }

.breadcrumb { margin-bottom: 12px; color: #4a6cf7; }
.breadcrumb span { cursor: pointer; }
.breadcrumb span:hover { text-decoration: underline; }
.muted { color: #999; }
.empty { text-align: center; color: #999; padding: 40px 0; }
.mt10 { margin-top: 10px; } .mb10 { margin-bottom: 10px; }
.flex { display: flex; align-items: center; gap: 10px; }
.between { display: flex; justify-content: space-between; align-items: center; }

/* 权限勾选 */
.perm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin: 6px 0 10px; max-height: 260px; overflow: auto; }
.perm-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; padding: 4px 8px; background: #f7f8fb; border-radius: 6px; }
.perm-item input { width: auto; }

/* 统计页大按钮切换 */
.stat-tabs { display: flex; gap: 10px; margin-bottom: 14px; }
.stat-tab { flex: 1; padding: 14px 12px; font-size: 15px; font-weight: 600; border-radius: 10px; border: 1px solid #e3e6ef; background: #fff; color: #555; cursor: pointer; transition: .15s; }
.stat-tab:hover { border-color: #4a6cf7; color: #4a6cf7; }
.stat-tab.active { background: #4a6cf7; color: #fff; border-color: #4a6cf7; box-shadow: 0 4px 12px rgba(74,108,247,.25); }

/* 房间设施 */
.facilities { color: #444; font-size: 14px; line-height: 1.8; }
.room-card .info.fac { color: #666; }