/* ========================================
   移动端首页专用样式 v2.1
   改版：搜索为视觉中心 + Tab 组织核心内容
   ======================================== */

/* ========================================
   0. 悬停搜索条（滚动过 hero 后 fixed 在顶部）
   ======================================== */
.home-sticky-search {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 100%;
  max-width: 680px;
  background: linear-gradient(135deg, #2B57A5 0%, #214381 100%);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease;
  will-change: transform;
}

.home-sticky-search.is-visible {
  transform: translateX(-50%) translateY(0);
}

.home-sticky-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  height: 50px;
}

.home-sticky-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.home-sticky-logo img {
  height: 22px;
  width: auto;
}

.home-sticky-form {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.home-sticky-input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0 12px;
  height: 34px;
  gap: 6px;
}

.home-sticky-input-group .iconfont {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  flex-shrink: 0;
}

.home-sticky-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: white;
  font-size: 14px;
  padding: 0;
  min-width: 0;
  cursor: pointer;
}

.home-sticky-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.home-sticky-menu {
  flex-shrink: 0;
  border: none;
  background: none;
  color: white;
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.home-sticky-menu:active {
  background: rgba(255, 255, 255, 0.3);
}

.home-sticky-menu .iconfont {
  font-size: 18px;
}

/* ========================================
   1. 首屏搜索区域（核心功能视觉中心）
   ======================================== */
.home-search-hero {
  position: relative;
  background-color: #214381;
  background-image: url(https://cdn.gotohui.com/static/images/bg.svg), linear-gradient(135deg, #2B57A5 0%, #214381 100%);
  background-size: 300% auto, cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 12px 16px 24px;
}

/* 顶部条：Logo 左上 + 菜单 右上（与内页一致） */
.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.hero-topbar-logo img {
  height: 26px;
  width: auto;
}

/* 右上角菜单按钮 */
.hero-menu-toggle {
  border: none;
  background: none;
  color: white;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-right: -8px;
  transition: background 0.15s;
}

.hero-menu-toggle:active {
  background: rgba(255, 255, 255, 0.28);
}

.home-search-hero-inner {
  max-width: 100%;
}

.home-search-slogan {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.home-search-form {
  position: relative;
  margin-bottom: 12px;
}

.home-search-input-group {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--border-radius-sm);
  padding: 0 5px 0 14px;
  height: 46px;
}

.home-search-icon {
  color: #2B57A5;
  font-size: 20px;
  flex-shrink: 0;
  margin-right: 10px;
}

.home-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 0;
  background: transparent;
  color: var(--text-dark);
  min-width: 0;
}

.home-search-input::placeholder {
  color: #aab4c6;
}

.home-search-btn {
  flex-shrink: 0;
  color: #fff;
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  background-color: #1A4FBE;
  cursor: pointer;
  line-height: 1.4;
}

.home-search-btn:active {
  opacity: 0.85;
}

/* AI 助手入口（搜索框下方，纯白文字链：去背景去边框，弱化视觉重量、重心回归主搜索框） */
.home-ai-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 4px 8px;
  border: none;
  background: none;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.home-ai-entry:active {
  opacity: 0.7;
}

.home-ai-spark {
  font-size: 13px;
}

.home-ai-entry .home-ai-sub {
  color: rgba(255, 255, 255, 0.8);
}

.home-ai-arrow {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 1px;
}

/* ========================================
   2. 功能瓷片区（可滑动翻页）
   ======================================== */
.mobile-card {
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}

.tiles-card {
  padding-bottom: 6px;
}

.tiles-swiper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 6px;
}

.tiles-swiper::-webkit-scrollbar {
  display: none;
}

/* 每个瓷片占容器的 20%（一页5个） */
.tiles-swiper .tile-item {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-dark);
  padding: 6px 4px;
}

/* 每页第一个元素设置 snap 对齐 */
.tiles-swiper .tile-item:nth-child(5n+1) {
  scroll-snap-align: start;
}

.tiles-swiper .tile-item:active {
  background: #f8f9fb;
  border-radius: 8px;
}

.tile-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray-th);
  border-radius: 12px;
  margin-bottom: 6px;
}

.tile-icon img {
  width: 56%;
  height: 56%;
  object-fit: contain;
}

.tile-icon i {
  font-size: 22px;
  color: #1548A4;
}

.tile-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
}

/* 翻页圆点指示器 */
.tiles-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 8px;
}

.tiles-dot {
  width: 16px;
  height: 3px;
  background: #d9dde5;
  transition: all 0.2s;
}

.tiles-dot.active {
  width: 16px;
  border-radius: var(--border-radius-sm);
  background: #2B57A5;
}

/* 4. 卡片标题行 → 已迁移到 mobile-common.css 全局复用 */
/* 5. 旧「核心内容 Tab 栏」(.core-tabs/.core-tab*) 已随「4 Tab→分段堆叠」重构移除，无 HTML 引用，已删 */

/* 6. 旧「热门数据横向宽表」(.hd-name-link/.hd-thumb/.val-group/.hd-yoy 等) 已随重构移除——新热点卡用 .hot-item，无 HTML 引用，已删 */
/* 7. 旧「数据排行横滚卡」(.ranking-list/.ranking-item/.preview-* 等) 已随「数据排行→数据地图」重构移除，无 HTML 引用，已删 */

/* ========================================
   8. 省份·国家数据看板（Tab 内）
   ======================================== */
.board-loading-cell {
  text-align: center;
  padding: 32px 16px;
  color: #8c9aaf;
  font-size: 13px;
}

.data-board-container {
  padding: 0;
}

/* 首页数据表格扩展（基础样式见 mobile-common.css .data-board-table） */
.data-board-table {
  min-height: 400px;
}

.data-board-table th {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.data-board-table th.sort-asc::after {
  content: '▲';
  font-size: 10px;
  margin-left: 4px;
  color: #2B57A5;
}

.data-board-table th.sort-desc::after {
  content: '▼';
  font-size: 10px;
  margin-left: 4px;
  color: #2B57A5;
}

.text-danger {
  color: #dc2626 !important;
  font-weight: 400;
}

.text-success {
  color: #059669 !important;
  font-weight: 400;
}

.widget-btns {
  padding: 10px 14px 0;
  text-align: center;
}

/* 9. 旧「房价排行 grid 布局」(.btn-all/.housing-container/.housing-item/.rank-badge/.yoy-wrapper 等)
      已随房价改为镜像 PC 的 .housing-ranking-table（见第 14 段）移除，无 HTML 引用，已删 */

/* ========================================
   10. 社区精选
   ======================================== */
.community-news-card {
  border-radius: 0;
}

/* community-news-title-row / community-news-title → 已废弃，统一使用 .card-title-row + .card-title */

.community-container {
  padding: 0;
}

.community-list {
  display: flex;
  flex-direction: column;
}

.bloomberg-news-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s ease;
  text-decoration: none;
}

.bloomberg-news-item:last-child {
  border-bottom: none;
}

.bloomberg-news-item:active {
  background: #f8f9fa;
}

.bloomberg-time {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #86909C;
  white-space: nowrap;
  line-height: 1.4;
  margin-top: 1px;
}

.bloomberg-news-item .community-content {
  flex: 1;
  min-width: 0;
}

.bloomberg-news-item .community-title {
  font-family: var(--font-ui);
  font-size: 14px;
  color: #000000;
  line-height: 1.4;
  margin: 0 0 4px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bloomberg-news-item .community-summary {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   11. 全屏弹窗（保留原样）
   ======================================== */
.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fullscreen-modal.open {
  opacity: 1;
  visibility: visible;
}

.fullscreen-modal-content {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fullscreen-modal.open .fullscreen-modal-content {
  transform: translateY(0);
}

.fullscreen-modal-header {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  flex-shrink: 0;
}

.fullscreen-modal-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

/* 🔴 必须限定在本页全屏弹窗内：.btn-close 是 Bootstrap 全站统一关闭键(SVG×)，
   裸写会污染全站共享的支付抽屉等组件的关闭键(首页曾把它改成文本×致支付抽屉细节与全站不一致) */
.fullscreen-modal-header .btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-modal-header .btn-close::before {
  content: "\00d7";
}

.fullscreen-modal-body {
  flex: 1;
  overflow: hidden;
  background: #f8fafc;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fullscreen-table {
  background: #fff;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.fullscreen-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid #f0f2f5;
  background: #fff;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

body.modal-open {
  overflow: hidden;
}

.fullscreen-table .data-board-table {
  min-height: 0;
}

/* ========================================
   12. 响应式
   ======================================== */
@media (max-width: 375px) {
  .home-search-input {
    font-size: 14px;
  }
  
  .home-search-hero {
    padding: 20px 14px 16px;
  }
  
  .home-search-input-group {
    height: 42px;
  }
  
  .home-search-btn {
    padding: 7px 14px;
    font-size: 13px;
  }

  /* 极窄屏隐藏 AI 入口副标题，避免按钮内文案挤压 */
  .home-ai-entry .home-ai-sub {
    display: none;
  }
}

/* ========================================
   13. 热点数据列表卡（选项卡 + PC 6列宽表重排成「2行卡片」；复用 index-hotlist.js）
   ======================================== */
.d-none { display: none !important; }

.hd-list-card { padding-bottom: 4px; }

/* 选项卡铺满等分、文字居中（移动端约定，非 PC 左挤）；添加按钮仅在收藏/监控显示、靠右不占等分 */
.hd-head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.hd-tabs { display: flex; flex: 1; }

.hd-tab {
  flex: 1;
  text-align: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 13px 0;
  font-size: 15px;
  color: #8c9aaf;
  font-weight: 400;
  position: relative;
}

/* 激活态参照 PC：深色不加粗(非大黑体) + 蓝色下划线 */
.hd-tab.active { color: #1A202C; font-weight: 500; }

.hd-tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
}

.hd-add {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #1A4FBE;
  font-size: 13px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.hd-add .iconfont { font-size: 12px; }

/* 热点数据 = 真正的卡片(非表格 reflow)。flex 三段：左 名称/前值·日期 │ 中 走势 │ 右 现值/单位。
   现值落最右成一条扫描列、整列对齐；走势独立中段不挤数值；只现值一个强调点，其余浅灰小字、留白充足。 */
.hd-list-card .hot-list { padding: 0; }

/* 热点数据行（.hot-item 一族）已上移到 mobile-common.css（2026-08-20）：
   区域综合页的关键指标列表复用同一套行样式，单一定义防漂移。 */

.hd-list-card .hd-empty,
.hd-list-card .hd-loading {
  padding: 32px 16px;
  text-align: center;
  color: #8c9aaf;
  font-size: 13px;
}

/* 未登录提示（收藏/监控选项卡）——移动端补齐（样式只在 PC index.css 有，移动端未加载会裸奔） */
.hd-list-card .hd-login {
  padding: 40px 16px;
  text-align: center;
  color: #8c9aaf;
  font-size: 13px;
}
.hd-list-card .hd-login-btn {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary-color);
  background: none;
  text-decoration: none;
}

/* 省份·国家数据 段头「左右滑动」提示 */
.board-switch-hint { font-size: 12px; color: #b0b8c4; }

/* ========================================
   16. 数据地图（移动简化版：榜单下拉 + 着色地图）
   ======================================== */
.mex-loading,
.mex-empty {
  padding: 40px 16px;
  text-align: center;
  color: #8c9aaf;
  font-size: 13px;
}

.mex-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 4px;
}

/* 榜单选择：原生 select 已改框架 ActionPicker 抽屉(规范条18)。触发器按内容宽度、上限 68% 省略号，
   不再撑满全宽——否则把右侧「详情」挤成极窄不可点(仅限 .mex-bar 作用域，不污染全局 ap-trigger) */
.mex-bar .ap-trigger {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 68%;
  height: 36px;
}
.mex-bar .ap-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mex-more {
  flex-shrink: 0;
  margin-left: auto;            /* 固定到最右，与内容宽的榜单选择器拉开 */
  padding: 8px 2px 8px 10px;    /* 扩大点击热区，移动端可点 */
  font-size: 13px;
  color: var(--primary-color);
  text-decoration: none;
  white-space: nowrap;
}

.mex-map {
  height: 300px;
  padding: 0 6px 10px;
}

.mex-canvas {
  width: 100%;
  height: 100%;
}

.mex-skel {
  width: 100%;
  height: 100%;
  background: #f6f8fb;
  border-radius: 4px;
}

.mex-stub {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

.mex-stub .iconfont { font-size: 30px; color: #cfd6e0; margin-bottom: 8px; }
.mex-stub p { margin: 0 0 4px; font-size: 13px; color: #7a8597; }
.mex-stub span { font-size: 12px; color: #aab2c0; }

/* ========================================
   14. 房价排行（镜像 PC：housing-ranking-table / housing-ranking-row / ranking-num；段头 actions-group）
   ======================================== */
.housing-ranking-header .sidebar-title { font-weight: 600; color: #1A202C; }

.actions-group {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.actions-group-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 11px;
  white-space: nowrap;
  color: #4A5568;
  background: transparent;
  text-decoration: none;
  border-right: 1px solid var(--border-color);
}

.actions-group-btn:last-child { border-right: none; }

.actions-group-btn.active {
  background: rgba(26, 79, 190, 0.08);
  color: var(--primary-dark);
  font-weight: 500;
}

/* 容器 10px + 单元格横向 6px = 两端 16px，与热点数据行同一条边线 */
.housing-ranking-table { width: 100%; padding: 0 10px 2px; }
.housing-ranking-table table { width: 100%; border-collapse: collapse; font-size: 13px; }

.housing-ranking-table thead th {
  font-weight: 500;
  font-size: 12px;
  color: #8a94a3;
  background: #f9f9f9;
  padding: 7px 6px;
}

.housing-ranking-table tbody::before { content: ""; display: block; height: 4px; }

.housing-ranking-row { border-bottom: 1px solid #f5f5f5; }
.housing-ranking-row:last-child { border-bottom: none; }
.housing-ranking-row td { padding: 9px 6px; vertical-align: middle; }

.housing-ranking-row .ranking-num {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  font-weight: 500;
  font-family: var(--font-ui);
  font-feature-settings: "tnum" on, "lnum" on;
}

.housing-ranking-row .ranking-num.top { background: var(--secondary-blue) !important; color: #fff; }

.housing-ranking-row .housing-name {
  color: var(--text-dark);
  text-decoration: none;
  font-size: 14px;
  display: block;
}

.housing-ranking-row .housing-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  font-family: var(--font-ui);
  font-feature-settings: "tnum" on, "lnum" on;
}

.housing-ranking-row .housing-yoy {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  font-feature-settings: "tnum" on, "lnum" on;
}

/* ========================================
   15. 数据洞察（置顶洞察卡 2列网格 + 社区推荐列表；与 PC 同结构）
   ======================================== */
.di-band { padding-bottom: 8px; }

.di-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 6px;
}

.di-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.di-card:active { background: #fafbfc; }
.di-card-img { aspect-ratio: 16 / 10; background: #f3f5f8; }
.di-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 封面图 404 时 onerror 会移除 .di-card-img，卡片退化为纯文字、文字撑满整行；
   内容是主体、配图是配角，图挂了(换CDN/迁域名/缓存未刷)绝不连内容一起隐藏 */
.di-card > .di-card-body:only-child { flex: 1 1 100%; }
.di-card-body { padding: 8px 10px; }

.di-card-title {
  margin: 0;
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.di-card-summary { display: none; }

.di-reco { padding: 4px 14px 10px; }
.di-reco-list { display: flex; flex-direction: column; }

.di-reco-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed #e8ebf0;
  text-decoration: none;
}

.di-reco-item:last-child { border-bottom: none; }
.di-reco-item:active { opacity: 0.7; }

.di-reco-no {
  font-size: 12px;
  color: #9aa4b5;
  flex-shrink: 0;
  width: 14px;
  font-family: var(--font-ui);
  font-feature-settings: "tnum" on, "lnum" on;
}

.di-reco-tt {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}