/* ==========================================================================
   同城首页 · UI 美化增量层  polish v1.1  (2026-10-10 / 10-11)
   落点：独立 CSS，通过后台「统计代码」字段加载在 beautify/index.css 之后
   原则：只覆盖表现层，不改结构、不改 .htm 模板、不改 ajax/list.php
   范围：① 安全区+搜索框  ② 统计条  ③ 分类 Tab 条  ④ 顶部广告条(已隐藏)
         ⑤ 金刚区 5×2   ⑥ 列表容器  ⑦ 底部导航  ⑧ 窄屏降级
   ========================================================================== */

/* ---------- 全局：统一灰底与圆角基准 ---------- */
body.body-bg { background: #f4f5f7; }

/* ==========================================================================
   ①-0 首屏安全区
   背景：顶部广告条已整条去掉，幻灯片顶到 T0；viewports 已开 viewport-fit=cover，
        搜索层只有 8px 上边距，真机状态栏（iPhone 约 44-47px）会压住「烟台市」按钮。
   改法：给搜索层补 env(safe-area-inset-top)，并用 max() 兜底一个最小值，
        保证无头/无安全区环境下也有 12px 呼吸位。
   ========================================================================== */
.index-header .index-top__search {
  padding-top: max(env(safe-area-inset-top), 12px) !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   ① 首屏搜索框 —— 幻灯片当背景，搜索层必须「浮得住」
   原状：胶囊 #F6F5F5 压在彩色大图上，白底白字 + 左侧白色「烟台市」几乎看不清
   改法：玻璃拟态 + 细线描边 + 柔和投影，深色图浅底图都稳
   ========================================================================== */
.index-top__search .top-search__box { padding: 0 12px; }

/* 左侧定位（烟台市）—— 加一层浅色胶囊承载 */
.index-top__search .top-search__box .search-box__lt {
  width: auto; min-width: 62px; margin-right: 8px;
  height: 32px; line-height: 32px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.index-top__search .top-search__box .search-box__lt a {
  height: 32px; width: auto; padding: 0 9px;
  display: -webkit-inline-box; display: inline-flex;
  -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
  color: #1f2937 !important;
}
.index-top__search .top-search__box .search-box__lt .lbs_txt {
  height: 32px; line-height: 32px; max-width: 56px;
  font-size: 13px; font-weight: 500; color: #1f2937;
}
.index-top__search .top-search__box .search-box__lt .tciconfont { vertical-align: -1px; font-size: 11px; color: #6b7280; }

/* 搜索输入位 —— 实心玻璃胶囊 */
.index-top__search .top-search__box .search-box__main {
  height: 32px; line-height: 32px; border-radius: 16px;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 6px 16px -10px rgba(16, 24, 40, .35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #9aa2b1 !important;
  font-size: 12.5px !important;
  padding: 0 12px !important;
}
.index-top__search .top-search__box .search-box__main .tciconfont { color: #98a2b3; font-size: 13px; margin-right: 6px; }

/* 右侧消息 —— 同款承载胶囊 */
.index-top__search .top-search__box .search-box__rt {
  width: 32px; min-width: 32px; height: 32px; line-height: 32px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #1f2937 !important;
}
.index-top__search .top-search__box .search-box__rt .tciconfont { font-size: 15px; color: #1f2937; }
.index-top__search .top-search__box .search-box__rt .num {
  top: -3px; left: 20px; min-width: 15px; height: 15px; padding: 0 3px;
  line-height: 15px; font-size: 10px; border-radius: 8px;
  background: #ef4444 !important; color: #fff !important;
  border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(239, 68, 68, .4);
}

/* 幻灯片分页点 —— 统一细横条，靠左下，避开搜索层 */
.index-header .water,
.index-header .swiper-pagination-focuspic {
  position: absolute; left: 0; right: 0; bottom: 12px;
  height: 3px; z-index: 4; text-align: center; pointer-events: none;
}
.index-header .swiper-pagination-bullet,
.index-header .water span {
  width: 14px !important; height: 3px !important; border-radius: 2px !important;
  background: rgba(255, 255, 255, .5) !important; opacity: 1 !important;
  margin: 0 3px !important; display: inline-block;
}
.index-header .swiper-pagination-bullet-active,
.index-header .water span.on {
  width: 22px !important; background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, .25);
}

/* ==========================================================================
   ② 统计条（.nav-list-tit > .dt_xh2 · 浏览 / 发布 / 用户）
   结构：dt_xh2 里是「图标 + 裸文本（浏览:）+ font 红数字 + 裸文本 + font ...」
        ⇒ 不能用 font-size:0，否则裸文本标签会被一起隐藏
   原状：12px 挤在 362px 宽里、无内边距、图标 width:7% 拉伸
   改法：整条改白底 + 上细线；只做「不破坏文本流」的轻量优化
   ========================================================================== */
/* 容器：这里只负责白底与分隔线；高度完全交给内容撑开，别和 .dt_xh2 的 padding 打架 */
.nav-list-tit {
  background: #fff !important;
  border-bottom: 1px solid #eef0f3;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.nav-list-tit .nav-list-tit-l {
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.nav-list-tit .dt_xh2 {
  float: none !important;
  display: block !important;
  width: auto !important;
  margin: 0 8px !important;
  padding: 8px 0 9px !important;
  box-sizing: border-box !important;
  font-size: 12.5px !important;
  line-height: 20px !important;
  color: #6b7280 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 左侧小图标：行内 width:7% 会被拉成怪比例，固定 14px */
.nav-list-tit .dt_xh2 > img {
  float: none !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 5px !important;
  vertical-align: -2px;
  object-fit: contain;
  opacity: .9;
}
/* 数字（原 font color=#ff4700）—— 放大加粗、等宽对齐 */
.nav-list-tit .dt_xh2 font {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.nav-list-tit .dt_xh2 font,
.nav-list-tit .dt_xh2 { color: #6b7280 !important; }
.nav-list-tit .dt_xh2 font[color] { color: #ef4444 !important; }
/* 「帮助」按钮 —— 原为蓝底块，改细线胶囊，别压到数字上 */
.nav-list-tit .help_title {
  top: 6px !important; right: 10px !important;
  background: #fff !important;
  border: 1px solid #d9e3f5 !important;
  border-radius: 999px !important;
  padding: 1px 9px !important;
  line-height: 18px !important;
  box-shadow: none;
}
.nav-list-tit .help_title a { color: #3b7ddd !important; font-size: 12px; }


/* ==========================================================================
   ③ 分类 Tab 条（#index-newmenus__box · 17 项原地筛选）—— 单行横滑胶囊
   原状：#ccc 底 + #d1cdcd 灰字，对比度 ≈2.1:1 看不清；item 只有 80×27，点击区过小
   2026-10-11 定案：改「单行横向惯性滑动 + 两侧渐隐 + 选中项自动居中」
        17 项铺满要 4 行 146px，导航吃掉太多首屏；横滑只占 52px
   结构分工：卡片外观（白底/圆角/描边/投影）上提到 #index-newmenus__box，
        内部 .index-newmenus__list 只负责滚动 —— 这样渐隐遮罩能被圆角裁切，
        也不会把 border 一起 masking 掉。
   ========================================================================== */
#index-newmenus__box {
  position: relative !important;   /* 渐隐伪元素的定位父级 */
  overflow: hidden !important;     /* 让遮罩贴合 12px 圆角 */
  margin: 0 8px 8px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .04), 0 6px 16px -12px rgba(16, 42, 84, .18);
}
/* —— 两侧渐隐遮罩：暗示「左边/右边还有」，滑到端点 opacity 归零（有 .25s 过渡） */
#index-newmenus__box:before,
#index-newmenus__box:after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 30px;
  z-index: 2; pointer-events: none;
  transition: opacity .25s ease;
}
#index-newmenus__box:before {
  left: 0; opacity: 0;
  background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(38%, rgba(255, 255, 255, .86)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, .86) 38%, rgba(255, 255, 255, 0));
}
#index-newmenus__box:after {
  right: 0; opacity: 1;
  background: -webkit-gradient(linear, right top, left top, from(#fff), color-stop(38%, rgba(255, 255, 255, .86)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to left, #fff, rgba(255, 255, 255, .86) 38%, rgba(255, 255, 255, 0));
}
#index-newmenus__box.scrolled:before { opacity: 1; }   /* 左端还有内容 */
#index-newmenus__box.at-end:after    { opacity: 0; }   /* 已滑到最右 */

#index-newmenus__box .index-newmenus__list {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  /* styles.css / tongcheng.css / 内联 style 都给过 height/min-height/overflow-x，这里全部解锁 */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  /* 模板 navScroll() 会打行内 position:fixed 吸顶；单行横滑条若吸顶，
      glide 时容易和列表首卡片叠在一起，这里仍压回文档流。 */
  position: static !important;
  top: auto !important;
  /* —— 横滑本体 —— */
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;      /* iOS 惯性 */
  scroll-snap-type: x proximity;          /* 轻吸附，不打断惯性 */
  /* 关键：snapport 默认用 padding box，而首个胶囊实际起点在 content box（padding-left 12px），
     两者不一致会让浏览器把 scrollLeft 顶到 8px —— 表现为左侧渐隐一进页面就亮。
     用 scroll-padding-left 把 snapport 内缩到 content box，scrollLeft 才真正归 0。 */
  scroll-padding-left: 12px;
  scrollbar-width: none;                  /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;               /* IE/旧 Edge */
  overscroll-behavior-x: contain;         /* 别把横滑传给页面/浏览器返回手势 */
}
#index-newmenus__box .index-newmenus__list::-webkit-scrollbar { width: 0; height: 0; display: none; }
#index-newmenus__box .index-newmenus__list .index-newmenus__item {
  -webkit-box-flex: 0; flex: 0 0 auto;          /* 胶囊按内容宽度排，不压缩 */
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  float: none !important;
  height: 32px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  margin: 0 7px 0 0 !important;
  padding: 0 !important;
  text-align: center;
  scroll-snap-align: start;
}
#index-newmenus__box .index-newmenus__list .index-newmenus__item:last-child { margin-right: 0 !important; }

#index-newmenus__box .index-newmenus__list .index-newmenus__item a {
  display: block !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 14px !important;
  background: #f4f5f7 !important;
  color: #5a6472 !important;
  font-size: 12.5px !important;
  border-radius: 16px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 微交互：点击回弹 + 配色渐变 */
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, -webkit-transform .14s ease;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .14s ease;
  -webkit-tap-highlight-color: transparent;
}
#index-newmenus__box .index-newmenus__list .index-newmenus__item a:active {
  -webkit-transform: scale(.93);
  transform: scale(.93);
}
/* 选中：实心主题色 + 白字（比浅红底红字对比强得多），带一点柔光 */
#index-newmenus__box .index-newmenus__list .index-newmenus__item.active a {
  background: #e5432f !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px -2px rgba(229, 67, 47, .5);
}
#index-newmenus__box .index-newmenus__list .index-newmenus__item.active a:after { display: none !important; }
/* ==========================================================================
   ④ 顶部广告条（#lw_ad_box · 模板 index.htm:140 硬编码）
   2026-10-10 用户要求：整条去掉（图 + 「广告」标 + 抖动动画）
   不改 .htm，这里用 display:none 彻底隐藏；模板那段 JS 仍能取到元素，不会报错。
   ========================================================================== */
#lw_ad_box {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* 兜底：万一模板结构变动导致 #lw_ad_box 丢失，按特征再挡一层 */
body.body-bg > .ad-label { display: none !important; }

/* ==========================================================================
   ⑤ 金刚区（.nav-li · 10 图标分类）
   原状：外阴影 20px/20px/20px/5px #f6f6f6 是「脏影」，下内距 22.5px 过厚
   改法：去脏影，改轻卡 + 细线；图标与小字之间距收紧
   ========================================================================== */
.nav-li {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #eef0f3;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .04), 0 6px 16px -12px rgba(16, 42, 84, .18) !important;
  padding: 10px 0 8px !important;
  margin: 8px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.nav-li .swiper-wrapper { width: 100% !important; }
.nav-li ul.swiper-slide {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-row-gap: 2px;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.nav-li li {
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  padding: 3px 0 !important;
  text-align: center;
}
.nav-li li a {
  display: block;
  padding: 2px 0;
  border-radius: 10px;
  transition: background .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-li li a:active { background: #f7f8fa; }
.nav-li-pic {
  width: 42px !important; height: 42px !important;
  margin: 0 auto !important;
  display: -webkit-box; display: flex;
  -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
}
.nav-li-pic img {
  width: 100% !important; height: 100% !important;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nav-li li p {
  font-size: 11.5px !important;
  color: #4b5563 !important;
  line-height: 1.3 !important;
  margin: 3px 0 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 角标「99+」：原为抖动气泡，改为静态圆角小块（减少廉价动效） */
.nav-li-pic i {
  border-radius: 8px !important;
  padding: 1px 5px !important;
  font-size: 10px !important;
  line-height: 14px !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 1px 4px rgba(239, 68, 68, .35) !important;
  -webkit-animation: none !important;
  animation: none !important;
  transform-origin: center !important;
}

/* ==========================================================================
   ⑥ 列表区容器 —— 与卡片层（oc-card）留白对齐
   ========================================================================== */
#index-list.tc-sec.mt0 { padding: 0 8px; box-sizing: border-box; }
.tc-sec { background: transparent !important; }

/* ==========================================================================
   ⑦ 底部导航 —— 顶部细线 + 去脏影
   ========================================================================== */
.new-footer .new-footer__box {
  border-top: 1px solid #eef0f3;
  box-shadow: 0 -4px 20px -12px rgba(16, 42, 84, .28) !important;
  background: rgba(255, 255, 255, .96) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ==========================================================================
   ⑧ 窄屏（< 360px）降级：金刚区改 4 列，避免 10 个图标文字被挤断
        Tab 条已是横滑，天然无列数问题，无需降级。
   ========================================================================== */
@media screen and (max-width: 359px) {
  .nav-li ul.swiper-slide { grid-template-columns: repeat(4, 1fr); }
}