/* =========================================================================
 * 58-home.css —— 首页 1:1 复刻（真机基准：Redmi K60 / 1080x2400 / 420dpi）
 * 所有数值 = 真机 px / 2.625，单位 dp（本工程 1px = 1dp）
 * 采源：_ops/58real/screen.png + dumpsys activity top 视图树
 * ========================================================================= */
.page--h58 { background: #F6F6F6; }
.page--h58 .page__scroll { background: #F6F6F6; padding-bottom: 60px; }

/* ---------------------------------------------------------------- 顶部渐变 */
/* 真机采样：左上 #FFE0C9 → 24% #FFEBD5 → 50% #FFFAEC → 83% #FFFEFD → #FFF
 * 纵向白色蒙层：dp0 透明 → dp41 .60 → dp68 纯白（实测 x=2 处 dp40≈#FEF2E7、dp62≈#FFFCF9） */
.h58-top {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, .60) 41px,
      #fff 68px),
    linear-gradient(90deg,
      #FFDFC8 0%,
      #FFEBD5 24.3%,
      #FFFAEC 49.9%,
      #FFFEFD 83.5%,
      #FFF 100%);
}

/* ------------------------------------------------------------------ 频道行 */
.h58-nav {
  display: flex;
  align-items: flex-start;
  height: 47px;
  padding-left: 13px;
}
/* 城市：墨字 22/700，实测墨高 20.2dp、墨顶 10.3dp、墨底 30.1dp */
.h58-city {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9.4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  background: none;
  border: 0;
  padding: 0;
  z-index: 0;
}
/* 城市名后的橙色手绘笔触（58 首页城市名的装饰底纹） */
.h58-city::before {
  content: '';
  position: absolute;
  left: -8px;
  right: 4px;
  bottom: -11px;
  height: 15px;
  border-radius: 50% 45% 55% 48%;
  background: linear-gradient(100deg, #FF4E1E 0%, #FF6A33 55%, #FF9C6E 100%);
  filter: blur(1.6px);
  transform: rotate(-3deg) scaleY(.92);
  z-index: -1;
}
/* 下拉标记：白圆底 + 黑色倒三角（实测圆 12.5dp，圆心 dp 23.8） */
.h58-city__mark {
  position: relative;
  width: 12.5px;
  height: 12.5px;
  margin-top: 3.4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(255, 78, 0, .18);
  flex: 0 0 auto;
}
.h58-city__mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -3.1px;
  width: 0;
  height: 0;
  border-left: 3.1px solid transparent;
  border-right: 3.1px solid transparent;
  border-top: 4.6px solid #1A1A1A;
  border-radius: 1px;
}
/* 频道 tab：实测「附近」墨顶 17.5dp、字距 4dp、首字墨左 84dp */
.h58-tabs {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-left: 12.5px;
  margin-top: 15.6px;
}
.h58-tabs__item {
  font-size: 17px;
  line-height: 17px;
  color: #111;
  font-weight: 400;
  background: none;
  border: 0;
  padding: 0;
  position: relative;
  white-space: nowrap;
}
.h58-tabs__item.is-on { color: #111; font-weight: 700; }

/* -------------------------------------------------------------------- 搜索 */
.h58-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0 10px;
  border: 1.5px solid #FF3C00;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.h58-search__ico {
  width: 15px;
  height: 15px;
  margin-left: 12px;
  flex: 0 0 auto;
  color: #8C8C8C;
}
.h58-search__ph {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 7px;
  font-size: 14.5px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
}
.h58-search__mic {
  width: 15px;
  height: 15px;
  color: #8C8C8C;
  margin-right: 9px;
  flex: 0 0 auto;
}
.h58-search__btn {
  width: 50px;
  align-self: stretch;
  margin: 1.5px 1.5px 1.5px 0;
  border: 0;
  border-radius: 16.5px;
  background: #FF3C00;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ 金刚区 */
/* 第 1 页（真机）：白底 83→311.2（228.2dp）；r1 图标墨 114.3-149.7 / 文字墨 160.4-172.2
 * r2 图标墨 184.4-209.5 / 文字墨 217.1-228.6；r3 图标墨 245.0-269.3 / 文字墨 277.3-288.8
 * 第 2 页（真机）：白底 83→341.7（258.7dp）；4 行 × 5 列，行距 60.2
 *   r1 图标墨 99.4-124.4 / 文字 132.2-143.6；r2 184.4-184.8 / 192.4-203.8
 *   r3 219.8-245.0 / 252.6-264.0；r4 280.0-304.8 / 312.8-324.2
 * 指示条：橙 14×4 + 灰 8×4，距白底 5.3（p1 302.1-305.9，p2 332.6-336.4）
 * 列宽：真机 5 列中点 43.4 / 123.1 / 205.5 / 287.8 / 367.8（左右各 2.9 内边距） */
.h58-pager {
  position: relative;
  overflow: hidden;
  background: #fff;
  height: 228.2px;          /* 第 1 页白底高 */
  transition: height .28s cubic-bezier(.25, .8, .25, 1);
}
.h58-pager.is-p2 { height: 258.7px; }
.h58-pager__track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform .28s cubic-bezier(.25, .8, .25, 1);
  will-change: transform;
}
.h58-pager.is-drag .h58-pager__track { transition: none; }
.h58-pager.is-p2 .h58-pager__track { transform: translate3d(-50%, 0, 0); }
.h58-pager__page {
  flex: 0 0 50%;
  width: 50%;
}
.h58-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 左右各留 2.9dp：真机 5 列有效宽 405.2，列中心 43.4 / 123.1 / 205.5 / 287.8 / 367.8 */
  padding: 0 2.9px;
}
/* 第 2 页：行距 60.2、首行内容顶 15.1（图标墨底 124.4 = 26.3 图标盒 + 15.1） */
.h58-grid--p2 {
  padding-top: 15.1px;
  grid-auto-rows: 60.2px;
}
.h58-grid--p2 .h58-cat {
  height: 60.2px;
}
.h58-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
}
.h58-cat--r1 { padding-top: 13px; }
.h58-cat--r2 { padding-top: 9px; }
.h58-cat--r3 { padding-top: 13.35px; }
.h58-cat__img { display: block; position: relative; }
/* r1 图标盒固定 53.3，插画底对齐（真机墨迹底 148.6，图标墨高 ≈47.4） */
.h58-cat--r1 .h58-cat__img { display: flex; align-items: flex-end; height: 53.3px; }
.h58-cat__img img { display: block; }
.h58-cat--r1 .h58-cat__img img { height: 47.4px; width: auto; margin-bottom: -0.6px; }
.h58-cat--r2 .h58-cat__img { display: flex; align-items: center; justify-content: center; height: 28px; }
.h58-cat--r2 .h58-cat__img img { height: 28px; width: auto; }
.h58-cat--r3 .h58-cat__img { height: 27px; }
.h58-cat--r3 .h58-cat__img img { height: 27px; width: auto; }
/* CDN 图标（含内部留白）按画布尺寸渲染 */
.h58-cat__img--cdn img { height: auto; width: 63px; }
.h58-cat--r1 .h58-cat__img--cdn img { width: 61px; height: 61px; margin-bottom: -6.2px; }
.h58-cat--r2 .h58-cat__img--cdn img,
.h58-cat--r3 .h58-cat__img--cdn img { width: 26px; }
/* r3 的 CDN 图标绝对居中，避免撑高行高 */
.h58-cat--r3 .h58-cat__img--cdn img {
  position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
}
.h58-cat__name {
  margin-top: 6.5px;
  font-size: 13px;
  line-height: 15px;
  color: #333;
  white-space: nowrap;
}
.h58-cat--r1 .h58-cat__name { margin-top: 10px; }
/* r2:: 文字墨 217.1-228.6；r3：文字墨 277.3-288.8（真机标尺） */
.h58-cat--r2 .h58-cat__name { margin-top: 4.4px; }
.h58-cat--r3 .h58-cat__name { margin-top: 5px; }
/* 第 2 页单元格：图标盒 26.3 底对齐（真机墨底 124.4/184.6/244.9/304.4），
 * 文字墨顶 132.2 = 盒底 + margin 6.05 + 行内上留白 1.75 */
.h58-cat--p2 .h58-cat__img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 26.3px;
}
.h58-cat--p2 .h58-cat__img img { width: auto; }
.h58-cat--p2 .h58-cat__name { margin-top: 6.05px; }
/* 角标：租房(旺季) / 借钱(提额) */
.h58-cat__badge {
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: 6px;
  height: 14px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 2px 6px 6px 6px;
  background: linear-gradient(90deg, #FF5B2E, #FF2E1F);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------- 分页指示 */
/* 真机：条 4dp 高，距白底 5.3（p1 302.1-305.9 / p2 332.6-336.4）
 * 形制：橙条 14×4 + 灰条 8×4，紧贴，圆角 2；橙 #FFB400 灰 #E9E9E9 */
.h58-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5.3px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  height: 4px;
}
.h58-dots i {
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: #E9E9E9;
  transition: width .2s;
}
.h58-dots i.is-on { width: 14px; background: #FFB400; }

/* --------------------------------------------------------------- 借钱专区 */
.h58-loan {
  position: relative;
  margin: 0 10px;
  padding: 9px 0 20.8px;
  background: #fff;
  border-radius: 10px;
}
/* 真机：标题墨 326.5-337.1（12dp 字号，墨左 25.5 → 内边距 14）、
 * 数字墨 360.4-375.2、标签墨 386.3-397.0、卡底 421.7 */
.h58-loan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 14px;
  margin-bottom: 18.5px;
}
.h58-loan__title { font-size: 12px; font-weight: 700; color: #111; line-height: 14px; }
/* 右上角关闭钮：18×10.7，贴卡右上角（真机 x 383.6-401.1 / y 317.7-328.0） */
.h58-loan__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 11px;
  border-radius: 0 10px 0 5px;
  background: #4A4A4A;
  color: #fff;
  font-size: 8px;
  line-height: 11px;
  text-align: center;
  border: 0;
  padding: 0;
}
.h58-loan__cells { display: grid; grid-template-columns: repeat(4, 1fr); }
.h58-loan__cell { text-align: center; position: relative; min-width: 0; }
.h58-loan__num {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 22px;
  letter-spacing: -.3px;
  white-space: nowrap;
}
.h58-loan__num small { font-size: 12px; font-weight: 600; }
.h58-loan__label {
  display: inline-block;
  position: relative;
  margin-top: 6px;
  font-size: 12px;
  color: #999;
  line-height: 15px;
}
.h58-loan__label i {
  position: absolute;
  top: 1px;
  right: -7px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #FF3C00;
}

/* ---------------------------------------------------------------- 信息流 */
/* 真机（无借钱卡时）：白底 311.2 → 首行卡顶 316.2（间距 5）；左右 9.9、列距 10.3、卡宽 190.5 */
.h58-feed {
  display: flex;
  gap: 10.3px;
  padding: 5px 9.9px 0;
  align-items: flex-start;
}
.h58-feed__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10.3px; }

/* 卡片（真机：x 9.9-200.4 / w 190.5；标题墨顶 332.2 = 卡顶 316.2 + 12.35 + 行内留白 3.65） */
.f58 {
  background: #fff;
  border-radius: 10px;
  padding: 10px 10.7px 12px;
  overflow: hidden;
}
.f58__head { display: flex; align-items: flex-start; gap: 4px; }
.f58__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 23.6px;
  letter-spacing: -.1px;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 右侧招聘人：头像 20dp + 昵称 11dp（真机头像 449.6-469.6 / 昵称墨 473.5-483） */
/* 真机：右上角 20dp 圆形头像（右下 7dp 绿点）+ 下方 11dp 姓名（#666，居中）
 * 头像墨顶 328.8（卡顶 316.2 + padding 10 + 2.6），姓名墨顶 352.4 */
.f58__hr { width: 30px; flex: 0 0 auto; }
.f58__ava {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 2.6px auto 0;
  border-radius: 50%;
  background: #F1F2F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C9CBD4' d='M12 12a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Zm0 1.9c-3.6 0-6.6 1.9-6.6 4.2v.9h13.2v-.9c0-2.3-3-4.2-6.6-4.2Z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.f58__ava::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35C15B;
  box-shadow: 0 0 0 1.2px #fff;
}
.f58__hrname {
  display: block;
  margin-top: 3.2px;
  font-size: 11px;
  line-height: 12px;
  color: #666;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
/* 真机卡2（两行标题）：标题墨 331.0/354.7（行距 23.7）→ 薪资墨 381.7 → 地区墨 409.1
 * 换算：卡顶 316.2 + padding 10 + 行内留白 4.9 = 331.1；薪资 margin 4.65；地区 margin 8.05 */
.f58__salary {
  margin-top: 4.65px;
  font-size: 18px;
  font-weight: 700;
  color: #FF3C00;
  line-height: 21px;
  letter-spacing: -.2px;
}
.f58__meta {
  margin-top: 8.05px;
  font-size: 12px;
  color: #666;
  line-height: 15px;
}
.f58__co {
  margin-top: 9px;
  font-size: 12px;
  color: #666;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f58__tag {
  display: inline-block;
  margin-top: 7px;
  height: 19.5px;
  line-height: 18.5px;
  padding: 0 5px;
  border: .5px solid #E5E5E5;
  border-radius: 3px;
  font-size: 11px;
  color: #666;
}
.f58__ad {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 0;
  padding-top: 6px;
  border-top: .5px solid #F2F2F2;
  font-size: 11.5px;
  line-height: 16px;
  color: #FF3C00;
}
.f58__ad span { margin-left: auto; color: #BBB; font-size: 9px; }
.f58__ad i { width: 10px; height: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.9-8-10a4.8 4.8 0 0 1 8-3.4A4.8 4.8 0 0 1 20 11c0 5.1-8 10-8 10Z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 图片卡（有封面时启用） */
.f58__cover { position: relative; margin: -10px -10px 0; height: 128px; background: #EFEFEF; }
.f58__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f58__chip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  height: 19px;
  line-height: 19px;
  padding: 0 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 11px;
}
.f58__body { padding-top: 9px; }
.f58__title--sm { font-size: 17px; line-height: 1.42; }
.f58__sub { margin-top: 3px; font-size: 13px; color: #666; line-height: 1.3; }
.f58__tags { margin-top: 3px; font-size: 12px; color: #999; line-height: 1.3; }
.f58__price { margin-top: 7px; font-size: 18px; font-weight: 700; color: #FF3C00; }

/* --------------------------------------------------------------- 底部空白 */
.h58-end { text-align: center; padding: 16px 0 8px; font-size: 11px; color: #bbb; }

/* ================================================================ 底部导航 */
.tabbar {
  height: 59.4px;
  border-top: 0;
  border-radius: 9px 9px 0 0;
  background: #fff;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, .04);
  padding-bottom: 0;
  align-items: flex-start;
}
/* 真机标尺：图标顶 784（栏顶 774.5 + 10）、图标 24dp、文字墨 814.1-822.9（10dp）
 * 图标取自 58 官方 Lottie（底bar-*.json）首帧/末帧，未选灰 / 选中彩色 */
.tabbar__item {
  position: relative;
  padding-top: 10px;
  gap: 6px;
  color: #111;
}
.tabbar__item[data-tab="publish"] { padding-top: 0; gap: 1px; }
.tabbar__ico {
  display: block;
  height: 24px;
  width: auto;
  flex: 0 0 auto;
}
.tabbar__ico--on { display: none; }
.tabbar__item.is-on .tabbar__ico--on,
.tabbar__item.is-active .tabbar__ico--on { display: block; }
.tabbar__item.is-on .tabbar__ico:not(.tabbar__ico--on),
.tabbar__item.is-active .tabbar__ico:not(.tabbar__ico--on) { display: none; }
.tabbar__item .tabbar__label { font-size: 10px; line-height: 13px; color: #111; }
.tabbar__item.is-on .tabbar__label,
.tabbar__item.is-active .tabbar__label { font-weight: 500; }
/* 角标（真机：红点圆心距图标中心 +17，顶 778.3 ≈ 栏顶 +3.8） */
.tabbar__badge {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 9px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #FF4505;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}
.tabbar__fab {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  margin-top: -5px;
  background: linear-gradient(160deg, #FF7000 0%, #FF5000 60%, #FF4200 100%);
  box-shadow: 0 3px 10px rgba(255, 78, 0, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: 0;
}