/* 房屋出租模块样式 - PC + WAP 自适应 */

* { box-sizing: border-box; }

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;

  background: #f4f6f8;

  color: #1f2937;

  -webkit-text-size-adjust: 100%;

}

a { color: inherit; text-decoration: none; }



/* 顶部栏 */

.h-header {

  position: sticky; top: 0; z-index: 50;

  display: flex; align-items: center; gap: 10px;

  height: 52px; padding: 0 14px;

  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);

  color: #fff;

}

.h-header .back { font-size: 22px; cursor: pointer; line-height: 1; }

.h-header h1 { font-size: 17px; font-weight: 600; margin: 0; flex: 1; }

.h-header .sub { font-size: 12px; opacity: .9; }

.h-header .link { font-size: 13px; opacity: .95; cursor: pointer; white-space: nowrap; }



.h-container {

  max-width: 1200px; margin: 0 auto; padding: 12px 14px 96px;

  padding-bottom: calc(96px + constant(safe-area-inset-bottom));

  padding-bottom: calc(96px + env(safe-area-inset-bottom));

}



/* 小区筛选条 */

.community-bar {

  display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px;

  -webkit-overflow-scrolling: touch; scrollbar-width: none;

}

.community-bar::-webkit-scrollbar { display: none; }

/* 小区较多时始终换行完整显示所有小区名称（web/wap 一致），不再截断为一行横滑 */

.community-more-btn { display: none; }

.community-chip {

  flex: 0 0 auto; padding: 7px 14px; border-radius: 18px;

  background: #fff; border: 1px solid #eee; font-size: 13px; color: #555; cursor: pointer;

  white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center;

}

.community-chip.active { background: #0d9488; color: #fff; border-color: #0d9488; }

.community-chip .cnt { opacity: .7; font-size: 11px; margin-left: 3px; }



/* 搜索框 */

.h-search {

  display: flex; gap: 8px; margin-bottom: 12px;

}

.h-search input {

  flex: 1; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 8px;

  font-size: 14px; outline: none; background: #fff;

}

.h-search button {

  padding: 0 18px; border: none; border-radius: 8px; background: #0d9488; color: #fff;

  font-size: 14px; cursor: pointer;

}



/* 房源网格 */

.house-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 1200px) { .house-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 820px)  { .house-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

@media (max-width: 560px)  { .house-grid { grid-template-columns: 1fr; } }



.house-card {

  background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer;

  box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s;

  border: 1px solid #eef1f4;

}

.house-card:active { transform: scale(.98); }

.house-card .cover { position: relative; width: 100%; padding-top: 66%; background: #e9edf2; }

.house-card .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.house-card .cover .tag {

  position: absolute; left: 8px; top: 8px; background: rgba(13,148,136,.92); color: #fff;

  font-size: 11px; padding: 2px 7px; border-radius: 4px;

}

.house-card .cover .play {

  position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff;

  font-size: 11px; padding: 2px 7px; border-radius: 4px;

}

.house-card .body { padding: 10px 12px 12px; }

.house-card .title { font-size: 14px; font-weight: 600; color: #1f2937; line-height: 1.4;

  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.house-card .meta { font-size: 12px; color: #94a3b8; margin-top: 6px; }

.house-card .price { margin-top: 8px; color: #0d9488; font-weight: 700; font-size: 16px; }

.house-card .price small { font-size: 12px; font-weight: 400; }

.house-card .comm { font-size: 12px; color: #94a3b8; margin-top: 4px; }



/* 加载/空 */

.loading, .empty { text-align: center; color: #99a3b0; padding: 40px 0; font-size: 14px; }

.spinner {

  width: 26px; height: 26px; border: 3px solid #e2e8f0; border-top-color: #0d9488;

  border-radius: 50%; margin: 0 auto 10px; animation: spin .8s linear infinite;

}

@keyframes spin { to { transform: rotate(360deg); } }



/* ===================== 详情页（对齐海报页视觉） ===================== */

.detail-wrap { background: #f4f6f8; padding-bottom: 170px; }



/* 顶部深色 hero 大图 + 渐变遮罩 + 价格大字标 */

.detail-hero { position: relative; background: #0f172a; overflow: hidden; }

.detail-hero .hero-main { position: relative; z-index: 1; }

.detail-hero .hero-main .main-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; max-height: 460px; }

.detail-hero .hero-main video { width: 100%; max-height: 460px; display: block; background: #000; }

.detail-hero .hero-main::after {

  content: ''; position: absolute; inset: 0; pointer-events: none;

  background: linear-gradient(180deg, rgba(15,23,42,.18) 0%, rgba(15,23,42,0) 40%, rgba(15,23,42,.72) 100%);

}

.detail-hero .hero-overlay {

  position: absolute; inset: 0; z-index: 3; pointer-events: none;

}

.detail-hero .badge {

  position: absolute; top: 14px; left: 14px;

  background: rgba(255,255,255,.94); color: #0f172a; font-size: 14px; font-weight: 700;

  padding: 6px 12px; border-radius: 8px; backdrop-filter: blur(6px); letter-spacing: .5px;

}

.detail-hero .price-tag {

  position: absolute; right: 14px; bottom: 14px; text-align: right; color: #fff;

  text-shadow: 0 2px 10px rgba(0,0,0,.35);

}

.detail-hero .price-tag .price { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -1px; }

.detail-hero .price-tag .unit { font-size: 13px; font-weight: 500; opacity: .92; margin-top: 4px; }



/* 缩略图 */

.detail-thumbs { display: flex; gap: 8px; padding: 8px 14px; overflow-x: auto; background: #fff; scrollbar-width: none; }

.detail-thumbs::-webkit-scrollbar { display: none; }

.detail-thumbs img, .detail-thumbs .vthumb {

  width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex: 0 0 auto;

  border: 2px solid transparent; cursor: pointer; background:#e9edf2; position: relative;

}

.detail-thumbs .active { border-color: #0d9488; }

.detail-thumbs .vthumb::after {

  content: "▶"; position: absolute; inset: 0; display: flex; align-items: center;

  justify-content: center; color: #fff; font-size: 16px; background: rgba(0,0,0,.35);

}



/* 标题区 */

.detail-head { background: #fff; padding: 16px 16px 14px; }

.detail-title { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.25; letter-spacing: -.3px; }

.detail-community { color: #64748b; font-size: 14px; margin-top: 8px; display: flex; align-items: center; gap: 6px; }

.detail-community .dot { width: 6px; height: 6px; border-radius: 50%; background: #0d9488; display: inline-block; }



/* 卡片通用 */

.section { background: #fff; border-radius: 14px; padding: 16px; margin: 12px 14px; }

.section h3 {

  font-size: 15px; margin: 0 0 14px; color: #0f172a; font-weight: 700;

  display: flex; align-items: center; gap: 8px;

}

.section h3::before { content: ''; width: 5px; height: 18px; background: #0d9488; border-radius: 3px; display: inline-block; }



/* 关键参数 4 列卡片（对齐海报页 specs） */

.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.spec-grid .s {

  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 6px;

  text-align: center;

}

.spec-grid .s .v { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.25; }

.spec-grid .s .l { font-size: 12px; color: #64748b; margin-top: 5px; }



/* 描述 */

.detail-desc { font-size: 14px; line-height: 1.8; color: #475569; margin: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }



/* 房间配置：✓ 勾选清单（对齐海报页 amenities） */

.amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; }

.amenities .item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; }

.amenities .item::before {

  content: '✓'; width: 20px; height: 20px; background: #0d9488; color: #fff; border-radius: 50%;

  font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;

}



/* 核心卖点：左侧色条块（对齐海报页 selling） */

.selling { background: #f0fdfa; border-left: 5px solid #0d9488; border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 12px 14px; }

.selling-title { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }

.selling ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

.selling li { font-size: 14px; color: #334155; position: relative; padding-left: 14px; }

.selling li::before { content: '•'; position: absolute; left: 0; color: #0d9488; font-weight: 900; }



/* 门牌号（管理员可见，前端隐藏） */

.unit-no { font-size: 13px; color: #b45309; background: #fef3c7; display: inline-block; padding: 2px 8px; border-radius: 6px; margin-left: 8px; font-weight: 600; }



/* 同小区推荐 */

.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }



/* 分享栏 */

.share-bar { display: flex; gap: 10px; margin: 12px 14px; }

.share-btn {

  flex: 1; min-height: 46px; border-radius: 23px; border: 1px solid #0d9488;

  background: #fff; color: #0d9488; font-size: 15px; font-weight: 600; cursor: pointer;

}

.share-btn.primary { background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); color: #fff; border: none; }

.share-btn:active { opacity: .85; }



/* 底部深色 CTA 联系栏（对齐海报页 cta） */

.contact-bar {

  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;

  display: flex; align-items: center; gap: 12px;

  max-width: 1200px; margin: 0 auto; padding: 12px 16px;

  padding-bottom: calc(12px + constant(safe-area-inset-bottom));

  padding-bottom: calc(12px + env(safe-area-inset-bottom));

  background: #0f172a; color: #fff; box-shadow: 0 -4px 18px rgba(0,0,0,.18);

}

.contact-bar .info { flex: 1; min-width: 0; }

.contact-bar .info .nm { font-size: 14px; font-weight: 600; }

.contact-bar .info .ph { font-size: 18px; font-weight: 800; color: #5eead4; margin-top: 2px; letter-spacing: .5px; }

.contact-bar .btn {

  padding: 12px 24px; border-radius: 24px; background: #0d9488; color: #fff;

  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; border: none;

}

.contact-bar .btn.ghost { background: transparent; color: #5eead4; border: 1px solid #0d9488; }



/* 提交表单 */

.form-card { background: #fff; border-radius: 12px; padding: 16px; margin: 12px 14px; }

.form-card h3 { font-size: 15px; margin: 0 0 12px; }

.fld { margin-bottom: 14px; }

.fld label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; }

.fld label .req { color: #ef4444; }

.fld input, .fld select, .fld textarea {

  width: 100%; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 8px;

  font-size: 16px; min-height: 44px; outline: none; background: #fff; font-family: inherit;

}

.fld textarea { resize: vertical; min-height: 80px; }

.upload-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.upload-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: #f0f0f0; }

.upload-item img, .upload-item video { width: 100%; height: 100%; object-fit: cover; }

.upload-item .del {

  position: absolute; right: 2px; top: 2px; width: 28px; height: 28px; border-radius: 50%;

  background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 28px; text-align: center; cursor: pointer;

}

.upload-add {

  width: 80px; height: 80px; border: 1px dashed #cfcfcf; border-radius: 8px; color: #aaa;

  display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; background: #fafafa;

}

.submit-btn {

  width: 100%; padding: 14px; border: none; border-radius: 28px;

  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); color: #fff;

  font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 6px;

}



/* 管理员 */

.admin-tabs { display: flex; gap: 8px; margin-bottom: 12px; }

.admin-tabs .t { flex: 1; text-align: center; padding: 9px; border-radius: 8px; background: #fff; border: 1px solid #eee; font-size: 14px; cursor: pointer; }

.admin-tabs .t.active { background: #0d9488; color: #fff; border-color: #0d9488; }

.audit-card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }

.audit-card .top { display: flex; justify-content: space-between; align-items: center; }

.audit-card .tt { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.audit-card .st { font-size: 12px; padding: 2px 8px; border-radius: 4px; }

.st.pending { background: #fff7e6; color: #fa8c16; }

.st.passed { background: #f6ffed; color: #52c41a; }

.st.rejected { background: #fff1f0; color: #f5222d; }

.audit-card .meta { font-size: 12px; color: #999; margin: 6px 0; }

.audit-card .acts { display: flex; gap: 8px; margin-top: 8px; }

.audit-card .acts button { flex: 1; padding: 9px; border-radius: 8px; border: none; font-size: 14px; cursor: pointer; }

.btn-pass { background: #52c41a; color: #fff; }

.btn-reject { background: #ef4444; color: #fff; }

.btn-view { background: #eee; color: #555; }



/* 通用弹窗(驳回原因) */

.modal-mask {

  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100;

  display: none; align-items: center; justify-content: center; padding: 20px;

}

.modal-mask.show { display: flex; }

.modal-box { background: #fff; border-radius: 12px; padding: 18px; width: 100%; max-width: 360px; }

.modal-box h4 { margin: 0 0 12px; font-size: 16px; }

.modal-box textarea { width: 100%; min-height: 70px; border: 1px solid #e3e3e3; border-radius: 8px; padding: 10px; font-size: 14px; resize: vertical; }

.modal-box .mb-acts { display: flex; gap: 10px; margin-top: 12px; }

.modal-box .mb-acts button { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }

.mb-ok { background: #ef4444; color: #fff; }

.mb-cancel { background: #eee; color: #555; }



/* PC 端左右布局（详情页） */

@media (min-width: 821px) {

  .detail-wrap { max-width: 1200px; margin: 0 auto; }

  .detail-hero { border-radius: 14px 14px 0 0; overflow: hidden; }

  .detail-hero .main-img, .detail-hero video { max-height: 520px; }

  .detail-body-pc { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; padding: 0 14px; }

  .detail-body-pc .col-main { min-width: 0; }

  .detail-body-pc .col-side { min-width: 0; }

  .spec-grid { grid-template-columns: repeat(3, 1fr); }

}

.hint { font-size: 12px; color: #99a3b0; text-align: center; padding: 16px 0; }



/* 提交表单窄屏适配：≤480px 时面积/楼层等三列下拉折为两列 */

@media (max-width: 480px) {

  .fld-row { flex-wrap: wrap; }

  .fld-row > .fld { min-width: 48%; }

  .spec-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  .detail-hero .price-tag .price { font-size: 28px; }

  .detail-title { font-size: 20px; }

}

@media (max-width: 360px) {

  .spec-grid { grid-template-columns: repeat(2, 1fr); }

}



/* 门牌号提示 */

.fld .field-tip { font-size: 12px; color: #999; margin-top: 4px; }



/* 分享海报弹层 */

.poster-modal {

  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200;

  display: none; align-items: center; justify-content: center; padding: 20px;

}

.poster-modal.show { display: flex; }

.poster-box {

  background: #fff; border-radius: 14px; padding: 18px; width: 100%; max-width: 400px;

  max-height: 92vh; overflow-y: auto; text-align: center;

  box-shadow: 0 8px 30px rgba(0,0,0,.2);

}

.poster-title { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 12px; }

.poster-img { width: 100%; max-width: 320px; border-radius: 10px; display: block; margin: 0 auto; }

.poster-tip { font-size: 12px; color: #999; margin: 12px 0 10px; line-height: 1.6; }

.poster-download {

  display: block; text-align: center; padding: 11px 0; border-radius: 22px;

  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); color: #fff;

  font-size: 15px; font-weight: 600; text-decoration: none; margin-bottom: 8px;

}

.poster-close {

  width: 100%; min-height: 44px; border: 1px solid #eee; border-radius: 22px;

  background: #f7f7f7; color: #666; font-size: 14px; cursor: pointer;

}



/* ===================== 发布页：房间配置多选 ===================== */

.field-tip-inline { font-size: 12px; color: #999; font-weight: 400; }

.amenity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }

.amenity-grid .amenity-item {

  display: flex; align-items: center; gap: 6px; font-size: 14px; color: #333;

  padding: 9px 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer;

}

.amenity-grid .amenity-item input { width: 16px; height: 16px; accent-color: #0d9488; margin: 0; }

.amenity-grid .amenity-item:has(input:checked) { border-color: #0d9488; background: #effcf8; color: #0b7d72; font-weight: 600; }



/* 地址导航条：点击调起地图（绿色主题，对齐详情页） */

.nav-bar {

  display: flex; align-items: center; gap: 6px;

  margin: 10px 0 2px; padding: 10px 12px;

  background: #effcf8; border: 1px solid #0d9488; border-radius: 10px;

  color: #0b7d72; font-size: 14px; font-weight: 600; cursor: pointer;

}

.nav-bar .nav-ico { font-size: 15px; }

.nav-bar .nav-txt { flex: 1; }

.nav-bar .nav-go { color: #0d9488; font-size: 18px; font-weight: 700; }

.nav-bar:active { background: #d8f5ec; }



/* 房东直租·无中介费 标签 */

.direct-tag {

  display: inline-block; margin-left: 6px; padding: 1px 7px;

  background: #0d9488; color: #fff; border-radius: 10px;

  font-size: 11px; font-weight: 600; vertical-align: middle;

}

.direct-tag.big { font-size: 13px; padding: 3px 10px; margin-top: 6px; }



/* 列表/小区条：房东直租筛选 chip */

.community-chip.direct-filter {

  background: #e7faf3; border-color: #0d9488; color: #0b7d72; font-weight: 600;

}

.community-chip.direct-filter.active {

  background: #0d9488; color: #fff; border-color: #0d9488;

}



/* 发布表单：房东直租勾选 */

.direct-check {

  display: flex; align-items: center; gap: 8px; margin: 12px 0 2px;

  font-size: 14px; color: #0b7d72; cursor: pointer;

}



/* SEO/GEO 长尾词介绍区块（LLM/搜索友好） */

.seo-intro {

  margin-top: 18px; padding: 16px 16px 4px;

  background: #f3fbf9; border: 1px solid #d7f0ea; border-radius: 12px;

  line-height: 1.8; color: #455a64; font-size: 13px;

}

.seo-intro h3 {

  margin: 0 0 10px; font-size: 15px; color: #0b7d72; font-weight: 700;

}

.seo-intro p { margin: 0 0 12px; }

.seo-intro .kw {

  color: #0d9488; font-weight: 600;

}

.direct-check input { width: 18px; height: 18px; accent-color: #0d9488; }



/* Toast 轻提示：居中固定显示（修复保存提示靠左问题） */

.toast {

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  max-width: 80%;

  padding: 12px 20px;

  background: rgba(0, 0, 0, 0.8);

  color: #fff;

  font-size: 14px;

  line-height: 1.4;

  border-radius: 8px;

  text-align: center;

  display: flex;

  align-items: center;

  gap: 8px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

  opacity: 1;

  transition: opacity .3s ease;

}

.toast.fade-out { opacity: 0; }

.toast .toast-icon { flex: 0 0 auto; font-size: 16px; }

.toast .toast-message { flex: 1; word-break: break-all; }