/* 好房直租 H5 - iOS 毛玻璃风格全局样式 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: #f2f2f7;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #1d1d1f;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
.app { max-width: 520px; margin: 0 auto; min-height: 100vh; position: relative; background: #f2f2f7; }
img { display: block; }
button { border: none; outline: none; font-family: inherit; cursor: pointer; }
input, textarea { outline: none; font-family: inherit; }

/* ============ iOS 毛玻璃通用类 ============ */
.glass-bar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 0.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.glass-modal {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 0.5px solid rgba(255, 255, 255, 0.7);
}
.glass-tab {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
}

/* ============ 顶部栏 ============ */
.top-bar {
  display: flex; align-items: center; padding: 10px 16px;
  position: sticky; top: 0; z-index: 100;
  will-change: transform;
  transition: all 0.3s ease;
}
.top-bar-title {
  flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
  color: #1d1d1f;
}
.top-back { font-size: 15px; color: #007aff; font-weight: 500; margin-right: 12px; cursor: pointer; }
.top-btns { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.icon-btn:active { opacity: 0.75; transform: scale(0.9); }
.icon-text { font-size: 15px; font-weight: 700; color: #fff; line-height: 1; }
.add-icon    { background: linear-gradient(135deg, #34c759 0%, #248a3d 100%); }
.notice-icon2{ background: linear-gradient(135deg, #ff9f0a 0%, #e68608 100%); }
.import-icon { background: linear-gradient(135deg, #5e5ce6 0%, #4240b0 100%); }
.yximg-icon  { background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%); }

/* ============ 公告栏 ============ */
.notice-bar {
  margin: 8px 16px; padding: 12px 14px;
  display: flex; align-items: center; cursor: pointer;
  transition: all 0.3s ease;
}
.notice-bar:active { transform: scale(0.98); }
.notice-badge {
  width: 20px; height: 20px; background: #ff3b30; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  margin-right: 10px; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(255, 59, 48, 0.3);
}
.notice-text { flex: 1; font-size: 13px; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-arrow { color: #c7c7cc; font-size: 16px; margin-left: 6px; font-weight: 300; }

/* ============ 关键词搜索框（iOS 风格） ============ */
.search-bar {
  margin: 8px 16px 4px; padding: 0 12px; height: 38px;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 10px;
  display: flex; align-items: center;
  transition: all 0.3s ease;
}
.search-bar:focus-within {
  background: rgba(118, 118, 128, 0.18);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
.search-ico { font-size: 13px; margin-right: 8px; opacity: 0.6; }
.search-input { flex: 1; border: none; background: transparent; font-size: 14px; color: #1d1d1f; height: 100%; }
.search-input::placeholder { color: #8e8e93; }
.search-clear {
  width: 18px; height: 18px; border-radius: 50%; background: #c7c7cc; color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: all 0.2s ease;
}
.search-clear:active { transform: scale(0.85); }

/* ============ 筛选内联区域 ============ */
.filter-inline {
  margin: 6px 16px 4px; overflow: hidden;
  transition: all 0.3s ease;
}
.filter-toggle-bar {
  display: flex; align-items: center; padding: 11px 14px; cursor: pointer;
  user-select: none;
}
.filter-toggle-icon { font-size: 16px; margin-right: 8px; color: #007aff; }
.filter-toggle-label { font-size: 15px; font-weight: 600; color: #007aff; }
.filter-summary-inline {
  flex: 1; font-size: 12px; margin-left: 8px; color: #8e8e93; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-toggle-arrow {
  font-size: 18px; font-weight: 300; color: #8e8e93; margin-left: auto;
  transition: transform 0.3s ease; display: inline-block;
}
.filter-toggle-arrow.open { transform: rotate(90deg); }

.filter-inline-body {
  padding: 0 14px; max-height: 0; overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}
.filter-inline-body.open {
  max-height: 500px; padding: 0 14px 14px; opacity: 1;
}

.filter-section-title { font-size: 13px; font-weight: 600; color: #86868b; margin: 12px 0 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.tag-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tag {
  padding: 7px 14px; background: rgba(118, 118, 128, 0.12); border-radius: 8px; font-size: 13px; color: #1d1d1f;
  font-weight: 500; cursor: pointer; user-select: none;
  transition: all 0.2s ease;
}
.tag:active { transform: scale(0.94); }
.tag.active { background: #007aff; color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25); }
.panel-btns { display: flex; gap: 10px; margin-top: 14px; }
.panel-btn {
  flex: 1; padding: 11px 0; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease;
}
.panel-btn:active { transform: scale(0.97); }
.panel-btn.secondary { background: rgba(118, 118, 128, 0.12); color: #1d1d1f; }
.panel-btn.primary { background: #007aff; color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25); }

/* ============ 房源列表 ============ */
.house-list { padding: 4px 16px 100px; }
.house-card-wrap { margin: 10px 0; border-radius: 14px; overflow: hidden; position: relative; }
.del-bg { position: absolute; width: 100%; height: 100%; display: flex; justify-content: flex-end; }
.del-btn {
  width: 70px; background: #ff3b30; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 0 14px 14px 0;
}
.house-card {
  background: #fff; display: flex; padding: 12px; position: relative; z-index: 2;
  transition: transform 0.15s ease; cursor: pointer; touch-action: pan-y;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.house-card:active { opacity: 0.88; transform: scale(0.99); }
.house-img { width: 88px; height: 88px; border-radius: 10px; flex-shrink: 0; object-fit: cover; }
.house-img-empty {
  background: #f2f2f7; color: #c7c7cc; display: flex; align-items: center; justify-content: center;
  font-size: 12px; border-radius: 10px;
}
.house-info { flex: 1; margin-left: 12px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.house-title { font-size: 16px; font-weight: 600; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.2px; }
.house-meta { font-size: 12px; color: #86868b; margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.house-subway {
  font-size: 11px; color: #007aff; background: rgba(0, 122, 255, 0.08); padding: 3px 8px;
  border-radius: 6px; display: inline-block; align-self: flex-start; font-weight: 500;
}
.house-price { font-size: 17px; color: #ff3b30; font-weight: 700; }
.price-unit { font-size: 12px; font-weight: 400; color: #86868b; margin-left: 2px; }
.empty-tip { text-align: center; color: #86868b; padding: 60px 0; font-size: 14px; }

/* 多选 */
.check-circle {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c7c7cc; margin-left: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center;
  transition: all 0.2s ease;
}
.check-circle.checked { background: #007aff; border-color: #007aff; box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3); }
.check-mark { color: #fff; font-size: 13px; font-weight: 700; }
.multi-bar {
  position: fixed; left: 0; right: 0; bottom: 60px; max-width: 520px; margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; z-index: 991;
}
.multi-count { font-size: 15px; font-weight: 500; }
.multi-actions { display: flex; gap: 10px; }
.multi-btn { padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; }
.multi-btn.cancel { background: rgba(118, 118, 128, 0.12); color: #1d1d1f; }
.multi-btn.delete { background: #ff3b30; color: #fff; }

/* ============ 遮罩 / 弹窗 ============ */
.mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.35);
  z-index: 998; display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.filter-panel, .tip-panel, .notice-panel, .modal-panel, .subway-picker-panel {
  width: 100%; max-width: 420px; background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-radius: 16px; padding: 22px;
  max-height: 80vh; overflow-y: auto;
  border: 0.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}
.panel-title, .tip-title, .notice-title, .modal-title {
  font-size: 17px; font-weight: 600; color: #1d1d1f; text-align: center; margin-bottom: 16px;
  letter-spacing: -0.2px;
}
.modal-content { font-size: 14px; color: #3c3c43; text-align: center; line-height: 1.6; margin-bottom: 20px; word-break: break-all; }
.modal-btns { display: flex; gap: 10px; }
.modal-btns.single { justify-content: center; }
.modal-btn {
  flex: 1; padding: 12px 0; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease;
}
.modal-btn:active { transform: scale(0.97); }
.modal-btn.cancel { background: rgba(118, 118, 128, 0.12); color: #1d1d1f; }
.modal-btn.ok { background: #007aff; color: #fff; }

.tip-content, .notice-content { font-size: 14px; line-height: 1.8; color: #3c3c43; text-align: center; margin-bottom: 20px; white-space: pre-line; }
.tip-btn, .notice-btn {
  padding: 12px 0; background: #007aff; color: #fff; border-radius: 10px; text-align: center;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}
.tip-btn:active, .notice-btn:active { transform: scale(0.97); }
.notice-btn-row { display: flex; justify-content: center; }
.notice-edit-link { text-align: center; margin-top: 10px; font-size: 13px; color: #007aff; font-weight: 500; padding: 6px 0; cursor: pointer; }

/* ============ Toast ============ */
#hf-toast {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(0.85);
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #fff; padding: 12px 22px; border-radius: 12px;
  font-size: 14px; z-index: 2000; opacity: 0; pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center; max-width: 70%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
#hf-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast-ico { font-size: 26px; margin-bottom: 4px; }

/* ============ 底部导航 ============ */
.tab-bar {
  position: fixed; bottom: 15px; left: 16px; right: 16px; max-width: 488px; margin: 0 auto;
  border-radius: 16px; display: flex; overflow: hidden; z-index: 99;
  will-change: transform;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}
.tab-item { flex: 1; text-align: center; padding: 10px 0 12px; cursor: pointer; transition: all 0.2s ease; }
.tab-item:active { opacity: 0.7; }
.tab-item.active .tab-icon { background: #007aff; color: #fff; box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3); }
.tab-item.active .tab-text { color: #007aff; font-weight: 600; }
.tab-icon {
  width: 24px; height: 24px; background: rgba(118, 118, 128, 0.12); color: #86868b; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  margin: 0 auto 4px; transition: all 0.2s ease;
}
.tab-text { font-size: 11px; color: #86868b; font-weight: 500; }

/* 管理悬浮按钮 */
.fab-btn {
  position: fixed; right: 16px; bottom: 85px; width: 44px; height: 44px; background: #007aff;
  color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; z-index: 990;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35); cursor: pointer;
  transition: all 0.2s ease;
}
.fab-btn:active { transform: scale(0.9); opacity: 0.85; }
.fab-btn.logout { background: #8e8e93; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }

/* ============ 详情页 ============ */
.swiper-wrap { position: relative; height: 300px; overflow: hidden; background: #000; }
.swiper-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.swiper-track::-webkit-scrollbar { display: none; }
.swiper-slide { flex: 0 0 100%; scroll-snap-align: start; }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.swiper-empty {
  display: flex; align-items: center; justify-content: center;
  background: #1c1c1e; color: #86868b; font-size: 15px;
}
.img-counter {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 10px; z-index: 3;
}
.swiper-mask {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}
.swiper-info { position: absolute; left: 16px; bottom: 14px; z-index: 3; color: #fff; pointer-events: none; }
.swiper-title { font-size: 18px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.swiper-price { font-size: 15px; margin-top: 4px; font-weight: 500; }
.info-card {
  background: #fff; border-radius: 14px; margin: 12px 16px; padding: 4px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.info-row { display: flex; padding: 13px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); align-items: flex-start; }
.info-row.last { border-bottom: none; }
.info-label { width: 60px; color: #86868b; font-size: 14px; flex-shrink: 0; }
.info-value { flex: 1; font-size: 14px; color: #1d1d1f; word-break: break-all; }
.info-value.phone { color: #007aff; cursor: pointer; }
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; z-index: 100;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
.bottom-bar button { flex: 1; padding: 12px 0; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s ease; }
.bottom-bar button:active { transform: scale(0.97); }
.btn-call { background: #007aff; color: #fff; }
.btn-share { background: rgba(118, 118, 128, 0.12); color: #1d1d1f; }
.btn-edit { background: #34c759; color: #fff; }
.btn-del { background: #ff3b30; color: #fff; }

/* 图片全屏预览 */
.img-preview-mask {
  position: fixed; inset: 0; background: #000; z-index: 1500; display: flex;
  align-items: center; justify-content: center;
}
.img-preview-mask img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ============ 表单页（import / notice-edit / login） ============ */
.page-form { padding-bottom: 40px; }
.page-title { font-size: 22px; font-weight: 700; padding: 16px; letter-spacing: -0.3px; }
.action-cards { display: flex; gap: 12px; padding: 0 16px; }
.action-card {
  flex: 1; background: #fff; border-radius: 14px; padding: 20px 0; text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); cursor: pointer;
  transition: all 0.2s ease;
}
.action-card:active { transform: scale(0.97); opacity: 0.85; }
.action-icon {
  width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 12px;
  background: linear-gradient(135deg, #007aff, #5ac8fa); color: #fff; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.2);
}
.action-card:last-child .action-icon { background: linear-gradient(135deg, #34c759, #30d158); box-shadow: 0 3px 10px rgba(52, 199, 89, 0.2); }
.action-text { font-size: 14px; font-weight: 500; }
.form-card { background: #fff; border-radius: 14px; margin: 12px 16px; padding: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.form-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.form-item { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; color: #86868b; margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 10px 12px; background: rgba(118, 118, 128, 0.08); border-radius: 10px; border: none;
  font-size: 14px; color: #1d1d1f; transition: all 0.2s ease;
}
.form-input:focus { background: rgba(118, 118, 128, 0.14); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12); }
textarea.form-input { resize: vertical; min-height: 70px; line-height: 1.6; }
.type-tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
.type-tag {
  padding: 7px 12px; background: rgba(118, 118, 128, 0.12); border-radius: 8px; font-size: 13px; cursor: pointer; user-select: none;
  transition: all 0.2s ease;
}
.type-tag.active { background: linear-gradient(135deg, #007aff, #5ac8fa); color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2); }
.img-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; cursor: pointer; position: relative; }
.img-cell { position: relative; }
.img-del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: #ff3b30; color: #fff;
  border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
  box-shadow: 0 1px 4px rgba(255, 59, 48, 0.3);
}
.upload-btn {
  width: 76px; height: 76px; border: 1.5px dashed #c7c7cc; border-radius: 10px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; color: #86868b; cursor: pointer;
  transition: all 0.2s ease;
}
.upload-btn:active { border-color: #007aff; color: #007aff; }
.upload-icon { font-size: 22px; line-height: 1; }
.upload-text { font-size: 11px; margin-top: 2px; }
.location-btn {
  padding: 11px; text-align: center; background: rgba(0, 122, 255, 0.08); color: #007aff;
  border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: 8px;
  transition: all 0.2s ease;
}
.location-btn:active { transform: scale(0.97); }
.location-btn.green { background: rgba(52, 199, 89, 0.1); color: #248a3d; }
.location-btn.orange { background: rgba(255, 159, 10, 0.12); color: #b25e00; font-size: 13px; margin-top: 8px; }
.subway-info-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.subway-auto {
  flex: 1; padding: 8px 12px; background: rgba(0, 122, 255, 0.08); color: #007aff;
  border-radius: 8px; font-size: 14px; font-weight: 500;
}
.subway-change {
  padding: 8px 12px; background: rgba(118, 118, 128, 0.12); color: #007aff; border-radius: 8px;
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.form-btns { display: flex; gap: 10px; margin-top: 16px; }
.btn-primary, .btn-outline {
  flex: 1; padding: 13px 0; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary:active, .btn-outline:active { transform: scale(0.97); }
.btn-primary { background: #007aff; color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25); }
.btn-outline { background: #fff; color: #007aff; border: 1.5px solid #007aff; }

/* 地图选点弹窗 */
.picker-map { width: 100%; height: 320px; border-radius: 10px; margin-bottom: 10px; z-index: 1; }
.picker-tip { font-size: 12px; color: #86868b; text-align: center; margin-bottom: 8px; }
.picker-coord { font-size: 12px; color: #007aff; text-align: center; margin-bottom: 8px; min-height: 16px; }

/* ============ 登录页 ============ */
.login-wrap { padding: 60px 24px 0; }
.login-logo {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 18px;
  background: linear-gradient(135deg, #007aff, #5ac8fa); color: #fff; font-size: 30px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.3);
}
.login-title { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.3px; }
.login-sub { text-align: center; font-size: 13px; color: #86868b; margin-bottom: 30px; }
.login-input {
  width: 100%; padding: 14px 16px; background: #fff; border-radius: 12px; border: none;
  font-size: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); margin-bottom: 16px;
  transition: all 0.2s ease;
}
.login-input:focus { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 122, 255, 0.15); }
.login-btn {
  width: 100%; padding: 14px 0; background: #007aff; color: #fff; border-radius: 12px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3);
  transition: all 0.2s ease;
}
.login-btn:active { transform: scale(0.98); opacity: 0.9; }
.login-guest { text-align: center; margin-top: 20px; font-size: 14px; color: #007aff; cursor: pointer; }

/* ============ 地图页 ============ */
.page-map { position: relative; height: 100vh; }
#houseMap { width: 100%; height: 100%; z-index: 1; }
.map-search-bar {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 16px; right: 16px; max-width: 488px;
  margin: 0 auto; z-index: 800; height: 42px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); display: flex; align-items: center;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
}
.map-locate-btn {
  position: fixed; left: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 500; width: 46px; height: 46px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 50%; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  color: #007aff; font-size: 10px;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
}
.map-locate-btn .loc-ico { font-size: 17px; line-height: 1; }
.price-marker {
  background: rgba(255, 255, 255, 0.92); color: #007aff; font-weight: 600; border: 0.5px solid rgba(0, 122, 255, 0.3);
  border-radius: 6px; padding: 2px 6px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); text-align: center;
}
.my-dot { width: 14px; height: 14px; background: #007aff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 6px rgba(0, 122, 255, 0.8); }

/* ============ 公告编辑页样式补充 ============ */
.style-row { display: flex; gap: 10px; }
.style-row .form-item { flex: 1; }
input[type="color"].form-input { padding: 4px; height: 40px; }

/* ============ 页面进入动画 ============ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.app { animation: fadeInUp 0.4s ease-out; }
.notice-bar { animation: fadeInUp 0.4s ease-out 0.05s both; }
.search-bar { animation: fadeInUp 0.4s ease-out 0.1s both; }
.filter-inline { animation: fadeInUp 0.4s ease-out 0.15s both; }
.house-card-wrap { animation: fadeInUp 0.35s ease-out both; }
.house-card-wrap:nth-child(1) { animation-delay: 0.15s; }
.house-card-wrap:nth-child(2) { animation-delay: 0.2s; }
.house-card-wrap:nth-child(3) { animation-delay: 0.25s; }
.house-card-wrap:nth-child(4) { animation-delay: 0.3s; }
.house-card-wrap:nth-child(5) { animation-delay: 0.35s; }