/* ==========================================================================
   转让站列表页（/zr/gua.html、/zr/qiu.html）—— 首屏筛选框 / 列表 / 底部
   配色与 zscq-site/list.css（旧版挂售表、求购表）保持一致，
   但**独立成文件而不是复用 list.css**：list.css 里的 .hd/.bar 是那两页的旧顶栏，
   改它会连带影响。这里重新声明一份，换来几个页面互不干扰。

   类名前缀统一用 z-，是为了将来万一有人把几个样式表合并，也不会互相覆盖。
   ========================================================================== */

*{box-sizing:border-box}
body{
  margin:0;background:#f4f5f7;color:#333;
  font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
.z-wrap{max-width:1200px;margin:0 auto;padding:0 12px}

/* ==========================================================
   第一部分：首屏（顶条 + 标题 + 筛选框）
   ========================================================== */
.z-hero{background:linear-gradient(135deg,#1b49b8 0%,#2f7fff 100%);padding-bottom:22px}

/* 顶条：品牌 / 导航 / 电话，压在 hero 里，不单独占一条白色横栏 */
.z-top{display:flex;align-items:center;gap:20px;height:58px}
.z-brand{font-size:21px;font-weight:800;color:#fff;letter-spacing:.5px;white-space:nowrap}
.z-brand i{font-style:normal;font-size:14px;font-weight:400;color:#bcd4ff;margin-left:7px}
/* 导航共 7 项（首页/关于我们/服务项目/求购表/挂售表/新闻资讯/联系我们），
   内边距和字号收得比常规小一点，1200 容器下才和右侧电话排得下。
   ⚠ flex-wrap:wrap 是必须的：7 项都是 nowrap，不换行时最小宽度接近 530px，
     窄屏下会把整个页面撑宽（表现为布局视口从 375 被顶到 534，全站元素跟着放大）。 */
.z-nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:6px}
.z-nav a{padding:6px 12px;border-radius:15px;font-size:13.5px;color:#d6e4ff;white-space:nowrap}
.z-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.z-nav a.on{background:rgba(255,255,255,.2);color:#fff;font-weight:600}
.z-top-tel{margin-left:auto;display:flex;align-items:center;gap:7px;color:#fff;font-size:15px;font-weight:700;white-space:nowrap}
.z-top-tel span{font-size:12px;font-weight:400;color:#bcd4ff}

/* 标题区 */
.z-hd{padding:10px 0 18px}
.z-hd h1{margin:0;font-size:27px;font-weight:800;color:#fff;letter-spacing:1px}
.z-hd p{margin:8px 0 0;font-size:13px;color:#c5d9ff}
.z-hd p b{color:#fff;font-weight:700}

/* 筛选卡片：白底，浮在 hero 上 */
.z-fbox{background:#fff;border-radius:10px;padding:6px 18px 14px;box-shadow:0 8px 26px rgba(13,45,110,.16)}

/* --- 关键词行 --- */
.z-kw{display:flex;gap:10px;padding:14px 0 12px;border-bottom:1px solid #f0f2f5}
.z-kw-in{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  height:42px;border:2px solid #2f7fff;border-radius:6px;padding:0 12px;background:#fff;
}
.z-kw-in svg{flex:0 0 16px;color:#9aa2ad}
.z-kw-in input{
  flex:1;min-width:0;border:none;outline:none;font-size:14px;color:#333;
  font-family:inherit;background:transparent;
}
.z-kw-in input::placeholder{color:#b9bfc8}
.z-kw-go{
  flex:0 0 92px;height:42px;border:none;border-radius:6px;background:#2f7fff;color:#fff;
  font-size:15px;font-weight:600;
}
.z-kw-go:hover{background:#1e5fc4}

/* --- 筛选行：左标签 + 右 chips --- */
.z-fr{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f0f2f5;align-items:flex-start}
.z-fl{flex:0 0 64px;font-size:13px;color:#8b939f;line-height:28px;white-space:nowrap}
.z-fv{flex:1;display:flex;flex-wrap:wrap;gap:7px;min-width:0;align-items:center}

.z-chip{
  display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;
  border-radius:14px;background:#f4f6fa;color:#4a5361;font-size:13px;
  border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;
  transition:background .14s,color .14s;
}
.z-chip:hover{background:#eef4ff;color:#2f7fff}
.z-chip em{font-style:normal;font-size:12px;color:#a8b0bb;line-height:1}
.z-chip.on{background:#2f7fff;color:#fff;font-weight:600}
.z-chip.on em{color:#d5e6ff}
.z-chip.z{color:#c2c8d1;background:#f7f8fa;cursor:default}
.z-chip.z:hover{color:#c2c8d1;background:#f7f8fa}
.z-chip.z em{color:#d5d9df}

/* --- 自定义价格区间（对标站普遍提供，档位之外的补充）--- */
.z-range{display:flex;align-items:center;gap:6px;margin-left:4px;padding-left:12px;border-left:1px solid #eceef2}
.z-range input{
  width:66px;height:28px;border:1px solid #dfe3e9;border-radius:5px;
  padding:0 8px;font-size:13px;outline:none;color:#333;
}
.z-range input:focus{border-color:#2f7fff}
.z-range span{font-size:12px;color:#9aa2ad}
.z-range button{
  height:28px;padding:0 12px;border:1px solid #2f7fff;border-radius:5px;
  background:#fff;color:#2f7fff;font-size:13px;
}
.z-range button:hover{background:#2f7fff;color:#fff}

/* --- 已选条件 --- */
.z-picked{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:11px 0 2px;border-top:1px solid #f0f2f5}
/* 没有已选条件时整条收起 —— 否则卡片底部会留一条空的分隔线和一段无意义留白 */
.z-picked:empty{display:none;padding:0;border-top:none}
.z-picked .lb{font-size:13px;color:#8b939f}
.z-pk{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 10px;
  border-radius:4px;background:#eef4ff;color:#2f7fff;font-size:13px;border:1px solid #d6e4ff;
}
.z-pk b{font-weight:600}
.z-pk i{font-style:normal;font-size:14px;line-height:1;color:#8fb6ff;cursor:pointer}
.z-pk i:hover{color:#2f7fff}
.z-clear{
  margin-left:auto;font-size:13px;color:#8b939f;background:none;border:none;padding:4px 2px;
}
.z-clear:hover{color:#ff3b30}

/* ==========================================================
   保障条：对标站都有独立的一行信任声明
   ========================================================== */
.z-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin:20px 0 0;
}
.z-trust-it{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #eceef2;border-radius:8px;padding:13px 15px}
.z-trust-it .ic{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#eef4ff;color:#2f7fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
}
.z-trust-it b{display:block;font-size:13.5px;color:#2b333d;font-weight:600}
.z-trust-it span{display:block;font-size:12px;color:#9aa2ad;margin-top:2px}

/* 我要买 / 我要卖 双入口 */
.z-dual{display:flex;gap:12px;flex-wrap:wrap}
.z-dual a,.z-dual button{
  flex:1;min-width:180px;display:flex;align-items:center;gap:12px;
  border-radius:10px;padding:15px 20px;color:#fff;border:none;text-align:left;
}
.z-dual .buy{background:linear-gradient(120deg,#2f7fff,#1a5fd6)}
.z-dual .sell{background:linear-gradient(120deg,#ff8a3d,#f2620f)}
.z-dual a:hover,.z-dual button:hover{filter:brightness(1.06)}
.z-dual b{display:block;font-size:16px;font-weight:700}
.z-dual span{display:block;font-size:12.5px;opacity:.88;margin-top:3px}
.z-dual .arw{margin-left:auto;font-size:18px;opacity:.8}

/* 页头里标题与双入口并排 */
.z-hd-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.z-hd-row>div:first-child{flex:1;min-width:240px}
.z-hd-row .z-dual{flex:0 0 420px;max-width:100%}

/* ==========================================================
   第二部分：列表
   ========================================================== */
.z-lbar{display:flex;align-items:center;gap:14px;padding:20px 2px 12px;flex-wrap:wrap}
.z-lcount{font-size:14px;color:#5f6875}
.z-lcount b{color:#ff3b30;font-weight:800;font-size:17px;margin:0 2px}
.z-sort{display:flex;gap:2px;margin-left:auto;background:#fff;border-radius:6px;padding:3px;border:1px solid #eceef2}
.z-sort button{
  border:none;background:transparent;font-size:13px;color:#5f6875;
  padding:5px 11px;border-radius:4px;white-space:nowrap;
}
.z-sort button:hover{color:#2f7fff}
.z-sort button.on{background:#2f7fff;color:#fff;font-weight:600}

/* 列表区保底高度：结果很少时不让页脚往上跳（一屏内翻页时最明显） */
.z-list{display:flex;flex-direction:column;gap:12px;min-height:360px}

/* ---------- 单条挂牌 ----------
   三栏网格：行业色块 | 信息主体 | 价格操作区。
   之所以从「两栏 flex + 右对齐」改成网格：旧版右侧价格区宽度固定、内容又只有
   价格和两个按钮，卡片越宽右边那片空白越大，字显得又小又飘。
   现在右侧是撑满卡片高度的浅底色块，横向空间被吃满，价格也有了视觉落点。 */
.z-row{
  display:grid;grid-template-columns:58px minmax(0,1fr) 212px;
  background:#fff;border-radius:10px;border:1px solid #eceef2;overflow:hidden;
  transition:box-shadow .18s,border-color .18s;
}
.z-row:hover{box-shadow:0 6px 20px rgba(20,50,110,.09);border-color:#cfe0fd}

/* 左侧行业色块：没有实拍图时，用「行业首字 + 按行业稳定取色」当视觉锚点。
   颜色由行业名哈希决定 —— 同一个行业永远同一个色，扫读时能靠颜色快速区分。 */
.z-badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:#f7f9fc;border-right:1px solid #eef1f6;padding:14px 4px;
}
.z-badge b{
  width:34px;height:34px;border-radius:9px;color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 34px;
}
.z-badge span{font-size:11px;color:#9aa2ad;text-align:center;line-height:1.25;word-break:break-all}

.z-main{padding:16px 20px;min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center}

/* 标题行 */
.z-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.z-t h3{
  margin:0;font-size:17px;font-weight:600;color:#1d232b;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.z-tag{flex:0 0 auto;font-size:12px;line-height:1;padding:3px 7px;border-radius:3px;background:#eef4ff;color:#2f7fff;border:1px solid #d6e4ff}
.z-tag.lic{background:#eafaf0;color:#16a34a;border-color:#c9f0d8}
.z-tag.buy{background:#fff3e8;color:#ea6a0c;border-color:#ffdcc0}
.z-tag.hot{background:#fff0f0;color:#e5342c;border-color:#ffd6d3}
.z-tag.fresh{background:#fff7e6;color:#e08a00;border-color:#ffe2b0}

/* 卖点标签（从 desc 前段切出，最多 3 个） */
.z-feats{display:flex;flex-wrap:wrap;gap:6px}
.z-feat{
  font-size:12.5px;line-height:1;padding:5px 10px;border-radius:5px;
  background:#f6f8fb;color:#5f6875;border:1px solid #e8ecf2;
}
.z-feat.lic{background:#f1fbf5;color:#16a34a;border-color:#cdf0dd}

/* 字段行：改成「标签 值」内联对，横向铺满 ——
   旧的"标签在上、值在下"堆叠式在宽卡片里只占左边一小段，右边全是空白。
   列间距给到 30px，让这一行真正铺开，而不是挤在左侧。 */
.z-f{display:flex;flex-wrap:wrap;gap:8px 30px}
.z-kv{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.z-kv i{font-style:normal;font-size:12.5px;color:#9aa2ad;white-space:nowrap}
.z-kv b{font-size:13.5px;font-weight:600;color:#2b333d;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
/* 上架时间 / 发布者是元信息，同排但降一档，不跟业务字段抢注意力 */
.z-kv.soft i{color:#b9bfc8}
.z-kv.soft b{font-weight:400;color:#a8b0bb}

/* 底部元信息 */
.z-meta{display:flex;align-items:center;gap:9px;font-size:12px;color:#a8b0bb;flex-wrap:wrap}
.z-meta .dot{color:#dfe3e9}
.z-meta .seller{color:#8b939f}

/* 右侧价格区：浅底色块撑满卡片高度，消除右侧空白，价格有视觉落点 */
.z-side{
  background:#fafbfd;border-left:1px solid #eef1f6;padding:16px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
}
.z-price,.z-price.ask{font-size:13px;font-weight:400;color:#8993a2;line-height:1.5;white-space:nowrap}
.z-acts{display:flex;gap:8px;margin-top:2px}
.z-acts a,.z-acts button{
  display:inline-flex;align-items:center;justify-content:center;height:33px;padding:0 12px;
  border-radius:5px;font-size:13.5px;color:#fff;white-space:nowrap;border:none;
}
.z-acts .tel{background:#2f7fff}
.z-acts .ask{background:#22c55e}
.z-acts a:hover,.z-acts button:hover{filter:brightness(.93)}

/* 空态 / 加载中 */
.z-empty{background:#fff;border-radius:8px;padding:70px 20px;text-align:center;color:#9aa2ad;font-size:14px}
.z-empty a{color:#2f7fff;margin-left:4px}
.z-skel{background:#fff;border-radius:10px;height:150px;border:1px solid #f2f4f7}

/* 分页 */
.z-pager{display:flex;justify-content:center;align-items:center;gap:6px;padding:26px 0 40px;flex-wrap:wrap}
.z-pager button{
  min-width:36px;height:36px;padding:0 11px;border:1px solid #e6e9ee;background:#fff;
  border-radius:6px;font-size:14px;color:#4a5361;
}
.z-pager button:hover:not(:disabled){border-color:#2f7fff;color:#2f7fff}
.z-pager button.on{background:#2f7fff;border-color:#2f7fff;color:#fff;font-weight:700}
.z-pager button:disabled{color:#c8cdd5;cursor:not-allowed;background:#fafbfc}
.z-pager .gap{color:#b9bfc8;padding:0 2px;user-select:none}

/* ==========================================================
   咨询弹窗（列表页留资入口，提交到 /api/leads）
   ========================================================== */
.z-mask{position:fixed;inset:0;background:rgba(15,25,45,.52);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.z-mask.show{display:flex}
.z-modal{background:#fff;border-radius:12px;width:440px;max-width:100%;padding:26px 28px;position:relative;max-height:90vh;overflow:auto}
.z-modal .x{position:absolute;top:14px;right:18px;font-size:24px;line-height:1;color:#c2c8d1;background:none;border:none}
.z-modal .x:hover{color:#5f6875}
.z-modal h3{margin:0 0 6px;font-size:19px;color:#1d232b}
.z-modal .sub{margin:0 0 18px;font-size:13px;color:#9aa2ad;line-height:1.7}
.z-fld{margin-bottom:14px}
.z-fld label{display:block;font-size:13px;color:#6b7480;margin-bottom:6px}
.z-fld input,.z-fld select,.z-fld textarea{
  width:100%;height:42px;border:1px solid #dfe3e9;border-radius:6px;padding:0 12px;
  font-size:14px;color:#333;outline:none;background:#fff;
}
.z-fld textarea{height:76px;padding:10px 12px;resize:vertical;line-height:1.7}
.z-fld input:focus,.z-fld select:focus,.z-fld textarea:focus{border-color:#2f7fff}
.z-modal .go{
  width:100%;height:46px;border:none;border-radius:6px;background:#2f7fff;color:#fff;
  font-size:16px;font-weight:600;
}
.z-modal .go:hover{background:#1e5fc4}
.z-modal .go:disabled{background:#a9c7f5;cursor:not-allowed}
.z-modal .msg{font-size:13px;padding:9px 0 0;min-height:22px}
.z-modal .msg.err{color:#ff3b30}
.z-modal .msg.ok{color:#16a34a}
.z-modal .tip{font-size:12px;color:#b9bfc8;margin:10px 0 0;line-height:1.7}

/* ==========================================================
   第三部分：底部
   ========================================================== */
.z-foot{background:#232a35;color:#9aa4b2;font-size:13px;margin-top:30px}
.z-foot a{color:#9aa4b2}
.z-foot a:hover{color:#fff}
.z-foot-in{display:flex;gap:40px;padding:34px 12px 26px;flex-wrap:wrap}
.z-foot-col{flex:1;min-width:170px}
.z-foot-col h4{margin:0 0 13px;font-size:14px;color:#e6ebf2;font-weight:600}
.z-foot-col p{margin:0 0 8px;line-height:1.75}
.z-foot-col ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.z-foot-brand{font-size:19px;font-weight:800;color:#fff;margin-bottom:11px!important;letter-spacing:.5px}
.z-foot-tel{color:#ffb84d;font-weight:700;font-size:15px}
.z-foot-botwrap{border-top:1px solid #333c49}
.z-foot-bot{
  padding:15px 12px;display:flex;gap:12px;
  justify-content:space-between;flex-wrap:wrap;font-size:12.5px;color:#78828f;
}

/* ==========================================================
   窄屏
   ========================================================== */
@media(max-width:900px){
  .z-top{flex-wrap:wrap;height:auto;padding:12px 0;gap:10px}
  .z-top-tel{margin-left:0}
  .z-hd h1{font-size:21px}
  .z-kw{flex-wrap:wrap}
  .z-kw-go{flex:1 1 100%}
  .z-fl{flex:0 0 52px;font-size:12px}
  .z-fbox{padding:6px 13px 12px}
  /* 排序条在窄屏改成换行而不是横向滚动：
     5 个选项合计约 380px，横向滚动会把后面两项藏起来，用户根本不知道还有
     「价格从高到低 / 注册资本优先」可选。换行只是多占一行。 */
  .z-sort{margin-left:0;width:100%;flex-wrap:wrap}
  .z-range{margin-left:0;padding-left:0;border-left:none;flex-wrap:wrap}

  .z-trust{grid-template-columns:1fr 1fr;gap:8px}
  .z-dual a,.z-dual button{min-width:0}
  /* 三栏网格在窄屏拆成三行：色块变成横向小条，价格区移到底部 */
  .z-row{grid-template-columns:1fr}
  .z-badge{
    flex-direction:row;justify-content:flex-start;gap:9px;
    border-right:none;border-bottom:1px solid #eef1f6;padding:10px 14px;
  }
  .z-badge b{width:26px;height:26px;font-size:13px;flex:0 0 26px;border-radius:7px}
  .z-badge span{font-size:12.5px;text-align:left}
  .z-main{padding:13px 14px}
  .z-side{
    border-left:none;border-top:1px solid #eef1f6;padding:13px 14px;
    flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  }
  .z-price-tip{margin-top:0}
  .z-f{gap:6px 18px}
  /* 页脚必须竖排堆叠。
     ⚠ 关键：.z-foot-col 的 min-width(170px) + gap(40px) 三列并排会把页面最小宽度
       顶到 670px 左右，窄屏下整页横向溢出 —— 表现是顶栏和筛选 chip 被右侧裁掉，
       而不是页脚自己出问题，很容易往错的方向查。窄屏一律改成整行。 */
  .z-foot-in{gap:24px;padding:26px 12px 20px}
  .z-foot-col{flex:1 1 100%;min-width:0}
  .z-foot-bot{justify-content:flex-start;gap:4px}
}