/* ============================================================
 * 渠道机价日志 H5 · 样式
 *
 * 这份文件由 tools/dev/wxss2css.py 从小程序的 app.wxss **自动生成** ——
 * 别在这里手改：要改样式请改小程序那份，再重新生成，否则两边会分叉。
 *
 * 尺寸口径：小程序用 rpx（750 设计稿），这里换成 rem ——
 *   html { font-size: 100vw / 7.5 }  →  1rem == 100rpx
 * 于是 750rpx 的设计宽度在任何屏宽下都等比缩放；桌面端封顶 750px。
 * ============================================================ */

html {
  /* 1rem = 100rpx（750rpx 的设计稿铺满屏宽） */
  font-size: calc(100vw / 7.5);
  -webkit-text-size-adjust: 100%;
}

/* 桌面浏览器上别再放大：封顶到 750px 设计宽度 */
@media (min-width: 750px) {
  html { font-size: 100px; }
}

body {
  margin: 0 auto;
  max-width: 7.5rem;
  min-height: 100vh;
}

/* <image mode="aspectFit"> 在网页里是 <img>：不给 object-fit 会被拉伸变形 */
img { display: block; }
.logo-img, .chip .bl { object-fit: contain; }

/* 小程序里 <text> 是行内元素，H5 用 span 保持一致 */
span { display: inline; }

/* ============ 全局样式 ============ */
body {
  --brand: #185FA5;
  --brand-dark: #0C447C;
  --brand-soft: #E6F1FB;
  --brand-line: #85B7EB;

  /* 涨跌色按中国市场惯例：涨=红、跌=绿（与欧美相反，别改） */
  --up: #C0392B;
  --up-soft: #FCEBEB;
  --down: #1D9E75;
  --down-soft: #E1F5EE;
  --flat: #888780;

  --warn: #BA7517;
  --warn-soft: #FAEEDA;

  --ink-1: #1d2129;
  --ink-2: #4e5969;
  --ink-3: #86909c;
  --line: #eef0f4;
  --line-2: #f5f4ef;
  --bg: #f4f6f8;
  --card: #ffffff;
  --head: #FAFAF7;

  background: var(--bg);
  color: var(--ink-1);
  font-size: 0.28rem;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.5;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ---------- 容器 ---------- */
.page-wrap {
  padding: 0.2rem 0.24rem 0.4rem;
}

.card {
  background: var(--card);
  border-radius: 0.2rem;
  padding: 0.24rem;
  margin-bottom: 0.2rem;
  box-shadow: 0 0.02rem 0.16rem rgba(20, 40, 60, 0.05);
}

.card-title {
  font-size: 0.29rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.card-title::before {
  content: '';
  width: 0.08rem;
  height: 0.28rem;
  border-radius: 0.04rem;
  background: var(--brand);
  margin-right: 0.12rem;
}

.card-sub {
  font-size: 0.23rem;
  color: var(--ink-3);
}

/* ---------- 上市首发价（结果页机型标题卡右侧） ----------
   靠右贴着卡片内边距，与左侧「品牌 型号 / 规格容量」同一行。
   数字用等宽数字，逐台对照时不会左右跳。 */
.launch {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  margin-left: 0.16rem;
}

.launch .launch-lbl {
  font-size: 0.22rem;
  color: var(--ink-3);
}

.launch .launch-pr {
  font-size: 0.3rem;
  font-weight: 600;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

/* ---------- 文本 ---------- */
.t-1 { color: var(--ink-1); }
.t-2 { color: var(--ink-2); }
.t-3 { color: var(--ink-3); }
.t-brand { color: var(--brand); }
.t-warn { color: var(--warn); }
.fz-22 { font-size: 0.22rem; }
.fz-24 { font-size: 0.24rem; }
.fz-26 { font-size: 0.26rem; }
.fz-30 { font-size: 0.3rem; }
.fw-6 { font-weight: 600; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- 布局 ---------- */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.gap-8 { gap: 0.08rem; }
.gap-12 { gap: 0.12rem; }
.gap-16 { gap: 0.16rem; }
.mt-8 { margin-top: 0.08rem; }
.mt-12 { margin-top: 0.12rem; }
.mt-16 { margin-top: 0.16rem; }

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 数据来源条 ----------
   左边品牌标、右边日期：这条回答两件事 —— 「价从哪来」和「是哪天的」。
   日期**永远靠右**：靠 .logo 的 margin-right: auto 把它顶到右边，而不是把容器改成
   space-between —— 这样哪天某页不放 logo，日期也不会自己往左跑（首页 / 结果页共用这一处样式）。 */
.databar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.18rem 0.24rem;
  background: var(--brand-soft);
  border-radius: 0.16rem;
  margin-bottom: 0.2rem;
}

/* 品牌标（assets/brand/logo.png）—— 靠左，与右侧日期分居两端。
   图本身是**透明底 PNG**（四角 alpha=0），直接透在数据条的浅蓝底上，
   不给它垫任何白底 / 圆角块 —— 垫了会把这枚标变成「一块贴纸」，
   而且方块的直角与数据条本身的圆角放在一起更乱（2026-10-13 用户点名去掉）。 */
.databar .logo {
  flex-shrink: 0;
  margin-right: auto;
  /* 80rpx ≈ 标准机型（375pt 宽）上的 40px —— 用户 2026-10-13 指定放大到 40px */
  width: 0.8rem;
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 用类选择器而不是 `image` 标签选择器：预览页把 <image> 渲染成 <img>，
   标签选择器在 preview 里匹配不到，会出现「真机有样式、预览没有」的分叉。 */
.databar .logo .logo-img {
  width: 100%;
  height: 100%;
}

/* 「数据最后更新日期」与日期上下两行都贴右边线 */
.databar .col {
  align-items: flex-end;
}

.databar .lbl {
  font-size: 0.24rem;
  color: var(--brand-dark);
}

.databar .date {
  font-size: 0.28rem;
  font-weight: 600;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}

.databar.stale {
  background: var(--warn-soft);
}

.databar.stale .lbl,
.databar.stale .date { color: #633806; }

/* ---------- 步骤标题 ---------- */
.step-head {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin-bottom: 0.16rem;
}

.step-no {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.22rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.step-txt {
  font-size: 0.27rem;
  font-weight: 500;
}

/* 步骤标题右侧的附着信息：占据剩余空间、推到最右 */
.step-meta {
  margin-left: auto;
  font-size: 0.22rem;
  color: var(--ink-3);
}

/* ---------- 品牌 / 规格 胶囊 ---------- */
/**
 * 品牌区：**两行、左右滑动**（2026-10-20 用户定的，不再有「更多 / 收起」）。
 *
 * 12 个品牌**逐行填**：第一行是全序前 6 个、第二行是后 6 个（与用户给的对照图一致）。
 * 列宽写死 196rpx —— 卡片内容宽只有 654rpx（750 − 页面 24×2 − 卡片 24×2），
 * 一屏露出 3 个多一点，往左滑看后面，所以「能滑」来自**网格比容器宽**：
 *   网格宽 = 6 × 196 + 5 × 12 = 1236rpx
 * 这个宽度必须显式写出来（写成 100% 就成了「刚好一屏」，一列都不会滚）。
 * 列数 6 与 utils/brands.js 的 BRAND_COLS 是同一个契约：
 * 自检盯着「列数 == BRAND_COLS」「列数 × 2 == 品牌数」「列数 × 列宽 + 列距 == 网格宽」。
 */
.brand-scroll {
  width: 100%;
}

/* 横滑不显示滚动条（真机与预览都是 webkit 内核；留着会压住最后一行的下边缘） */
.brand-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.grid-brand {
  display: grid;
  grid-template-columns: repeat(6, 1.96rem);
  grid-template-rows: repeat(2, auto);
  gap: 0.12rem;
  width: 12.36rem;
}

.chip {
  width: 1.96rem;
  border: 0.01rem solid #E5E3DC;
  border-radius: 0.14rem;
  padding: 0.16rem 0.08rem;
  text-align: center;
  background: #fff;
}

.chip.on {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* 芯片里的品牌标识图。用**类选择器**而不是 .chip image —— 预览器把 <image> 渲染成 <img>，
   标签选择器两边会分叉（品牌标 .logo-img 踩过同一个坑）。
   固定图片框 + aspectFit：12 张图的长宽比差很多（苹果接近方形、三星是 6.5:1 长条），
   靠这个盒子把「最大边撑满、另一边居中」的观感统一起来；图本身已做过透明底处理。 */
.chip .bl {
  display: block;
  width: 1.68rem;
  height: 0.52rem;
  margin: 0 auto 0.04rem;
}

.chip .nm {
  font-size: 0.26rem;
  font-weight: 500;
}

.chip.on .nm { color: var(--brand-dark); }

.chip.on .ct { color: var(--brand); }

/* ---------- 搜索框 ---------- */
.search {
  width: 100%;
  height: 0.72rem;
  padding: 0 0.22rem;
  border: 0.01rem solid #E5E3DC;
  border-radius: 0.14rem;
  font-size: 0.26rem;
  background: #fff;
  color: var(--ink-1);
  margin-bottom: 0.16rem;
}

.search-ph {
  color: var(--ink-3);
  font-size: 0.26rem;
}

/* ---------- 型号列表 ---------- */
/**
 * 高度定成「整 4 行」，让筛选区紧凑但够看：
 *   行高 .mrow = 80rpx  →  .mlist max-height = 4 × 80 = 320rpx
 * 用 max-height 而不是 height：型号少于 4 个（搜索命中少）时盒子自己收窄，
 * 不会留一片空白。改行高的话，这两个数要一起改（自检里有一条断言在盯这个倍数）。
 */
.mlist {
  max-height: 3.2rem;
  border: 0.01rem solid var(--line);
  border-radius: 0.14rem;
  background: #fff;
}

.mrow {
  height: 0.8rem;
  padding: 0 0.22rem;
  border-bottom: 0.01rem solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.12rem;
}

.mrow:last-child { border-bottom: none; }
.mrow.on { background: var(--brand-soft); }
.mrow .m { font-size: 0.27rem; }
.mrow.on .m { color: var(--brand-dark); font-weight: 500; }
.mrow .c { font-size: 0.22rem; color: var(--ink-3); white-space: nowrap; }

/* ---------- 规格 ---------- */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.14rem;
}

.spec {
  border: 0.01rem solid #E5E3DC;
  border-radius: 0.3rem;
  padding: 0.1rem 0.24rem;
  font-size: 0.25rem;
  background: #fff;
}

.spec.on {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 500;
}

/* ---------- 面包屑 ---------- */
/**
 * 常驻一行：没选品牌时显示「全部品牌」（.here，灰），选了才长成「全部品牌 › 华为」（.link，蓝）。
 * 见 pages/index/index.wxml —— 这一行**不能加 wx:if**，否则点第一个品牌时下面的卡片会整体下移。
 */
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.08rem;
  font-size: 0.23rem;
  color: var(--ink-2);
  padding: 0 0 0.16rem;
}

.crumb .link { color: var(--brand); }
.crumb .sep { color: #B4B2A9; }
/* 当前所在层级：不染色 —— 蓝色在这个页面里只代表「能点」，点了没变化的就不该是蓝的 */
.crumb .here { color: var(--ink-2); }

/* ---------- 当日报价 ---------- */
.grp {
  border: 0.01rem solid var(--line);
  border-radius: 0.16rem;
  margin-bottom: 0.16rem;
  overflow: hidden;
  background: #fff;
}

.gh {
  padding: 0.16rem 0.22rem;
  background: var(--head);
  font-size: 0.26rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gh .no {
  font-size: 0.22rem;
  color: var(--ink-3);
  font-weight: 400;
}

.gr {
  border-top: 0.01rem solid var(--line-2);
  padding: 0.18rem 0.22rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.16rem;
}

/**
 * justify-content 用 flex-end 而不是 space-between：
 * 一行可能一个角标都没有（只有价格），那时 .rt 是唯一子元素，
 * space-between 会把它顶到左边。有角标时靠 .tags 的 margin-right:auto 把价格推到右边。
 */
.gr .tags { margin-right: auto; }

.gr.bad { background: #FEFAF8; }

.badge {
  font-size: 0.2rem;
  color: var(--up);
  background: var(--up-soft);
  border-radius: 0.06rem;
  padding: 0 0.1rem;
  font-weight: 500;
}

/**
 * 报价行角标 —— 样式按 **语义** 分色，四类互相不撞：
 *   cond  机况（已开封 / 已激活）  琥珀 = 注意，这台机器不是全新原封
 *   limit 交易范围（省渠/市渠/国补） 蓝 = 信息，能不能卖给这个客户
 *   ok    全网渠                    绿 = 放行，与「省渠」正好正反对照
 *   info  配置（4G / 折叠 / 非卫星）  灰 = 中性
 * 「全网渠」与涨跌的「跌」同为绿色系：两者一个在行首、一个紧贴价格，
 * 位置隔得远，且语义都是「正向」，不会读混。
 * 具体某个备注出哪种角标、什么时候出，见 utils/format.js 的 TAG_RULES。
 */
.tg {
  font-size: 0.2rem;
  border-radius: 0.06rem;
  padding: 0 0.1rem;
  font-weight: 500;
  white-space: nowrap;
}

.tg.cond { color: var(--warn); background: var(--warn-soft); }
.tg.limit { color: var(--brand-dark); background: var(--brand-soft); }
.tg.ok { color: var(--down); background: var(--down-soft); }
.tg.info { color: var(--ink-2); background: #EEF1F5; }

/* 角标行：机况/限制/配置 + 价格异常并排；都没有时整个容器不渲染（wx:if 在 wxml 里） */
.tags {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-wrap: wrap;
}

.gr .rt {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  white-space: nowrap;
}

.gr .pr {
  font-size: 0.32rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gr.bad .pr { color: var(--up); }

/* 涨跌标记 */
.dl {
  font-size: 0.21rem;
  font-weight: 500;
  padding: 0.02rem 0.1rem;
  border-radius: 0.06rem;
  font-variant-numeric: tabular-nums;
}

.dl.up { color: var(--up); background: var(--up-soft); }
.dl.down { color: var(--down); background: var(--down-soft); }
.dl.flat { color: var(--flat); background: #F1EFE8; }

/* ---------- 档位 / 货源 ---------- */
.tabs {
  display: flex;
  gap: 0.1rem;
  flex-wrap: wrap;
  margin-bottom: 0.16rem;
}

.tab {
  border: 0.01rem solid #E5E3DC;
  border-radius: 0.28rem;
  padding: 0.08rem 0.22rem;
  font-size: 0.24rem;
  background: #fff;
  color: var(--ink-2);
}

.tab.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 500;
}

.srcline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
  margin-bottom: 0.12rem;
  font-size: 0.22rem;
  color: var(--ink-3);
}

.srcchip {
  border: 0.01rem solid #E5E3DC;
  border-radius: 0.24rem;
  padding: 0.06rem 0.18rem;
  font-size: 0.22rem;
  background: #fff;
  color: var(--ink-2);
}

.srcchip.on {
  background: var(--down-soft);
  border-color: var(--down);
  color: #0F6E56;
  font-weight: 500;
}

/* ---------- 图表 ---------- */
.chartbox {
  position: relative;
}

.chart {
  width: 100%;
  height: 4rem;
  display: block;
}

/* 颜色图例：**整行居中**（2026-10-08 确认）。
   它是「图的读法说明」，不属于某一侧的内容，贴左会显得像列表里的一行。
   注意别改成 `space-between` —— 颜色多时会把最后一个顶到最右边，比贴左更乱。 */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.18rem;
  margin-top: 0.12rem;
  font-size: 0.23rem;
}

.lgi {
  display: flex;
  align-items: center;
  gap: 0.08rem;
}

.lgi.off { opacity: .32; }

.dot {
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
}

/* 结果页走势图下方的读法说明（来源 chart.summarize 的 markNote）—— 与图例挨近一点
   （它俩是一组），与再下面的元信息行拉开一点。
   文案是**完整一段**（不提前换行），交给 CSS 自动折行 —— 一行填满再折，读起来才紧凑；
   行距比 .chinfo 的元信息行略紧一点（1.5），免得三四行占掉半屏。

   ⚠️ 选择器**必须是 `.chinfo.marknote` 这种复合写法，不能只写 `.marknote`**：
   元素上的 class 是「chinfo marknote」两个，而 `.chinfo` 定义在本段**之后** ——
   单类选择器优先级相同，后定义的赢，`.marknote` 里写的 margin-top / line-height
   会被 `.chinfo` 整条盖掉，**CSS 看着改了、界面上纹丝不动**（这个类从加进来那天
   起就是死的，2026-10-14 才发现）。复合选择器多一个类，优先级更高，与先后无关。 */
.chinfo.marknote {
  margin-top: 0.14rem;
  line-height: 1.5;
}

.chinfo {
  font-size: 0.22rem;
  color: var(--ink-3);
  margin-top: 0.1rem;
  line-height: 1.6;
}

/* 结果页「当日报价」卡里的价格说明（固定文案，来源 utils/format.js 的 PRICE_NOTE）。
   它与上面的报价列表不是一类东西（不随数据变化），所以拿一道细线隔开，
   间距也比 .chinfo 的元信息行松一点 —— 别让它看起来像某一行报价的附注。 */
.pricesnote {
  margin-top: 0.18rem;
  padding-top: 0.16rem;
  border-top: 0.01rem solid var(--line);
}

.warnbox {
  margin-top: 0.12rem;
  padding: 0.18rem 0.2rem;
  background: var(--warn-soft);
  border-radius: 0.14rem;
  font-size: 0.23rem;
  color: #633806;
  line-height: 1.65;
}

.warnbox.error {
  background: var(--up-soft);
  color: #7A1F1F;
}

/* ---------- 触摸读数条 ---------- */
.tipbar {
  margin-top: 0.12rem;
  padding: 0.16rem 0.2rem;
  background: #2C2C2A;
  border-radius: 0.14rem;
  color: #fff;
  font-size: 0.23rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.tipbar .k { color: #C7C6BE; }

/* ---------- 正文段落 ---------- */
.para {
  font-size: 0.25rem;
  color: var(--ink-2);
  line-height: 1.8;
}

/* ---------- 键值行（关于页） ---------- */
.kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  padding: 0.18rem 0;
  border-bottom: 0.01rem solid var(--line);
}

.kv:last-child { border-bottom: none; }

.kv-label {
  color: var(--ink-2);
  font-size: 0.25rem;
  flex: none;
}

.kv-value {
  font-size: 0.26rem;
  font-weight: 600;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  text-align: right;
}

/* ---------- 按钮 ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.84rem;
  border-radius: 0.42rem;
  font-size: 0.28rem;
  font-weight: 600;
  border: none;
}

.btn::after { border: none; }

.btn-ghost {
  background: #fff;
  color: var(--ink-1);
  border: 0.01rem solid var(--line);
}

/* 主按钮：品牌色底 + 白字。
   ⚠️ 这个类此前**根本没有定义** —— 结果页「生成分享图片」与弹层「保存到相册」
   写了 `class="btn btn-primary"`，却只吃到 .btn 的骨架（没有底色、没有字色），
   于是屏幕上就是一行孤零零的字，谁也看不出能点（2026-10-08 用户反馈才发现：
   此前项目里只有 .btn-ghost，从来没用过主按钮）。
   补类是这两处唯一的修法 —— 别去改页面上的类名。 */
.btn-primary {
  background: var(--brand);
  color: #fff;
}

/* 按下态：稍深一档，给出「点到了」的反馈（小程序 view 支持 :active） */
.btn-primary:active {
  background: var(--brand-dark);
}

.btn-block { width: 100%; }

/* ---------- 底部入口 ---------- */
.footlink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0 0;
  font-size: 0.24rem;
  color: var(--brand);
}

/* ---------- 版本水印 ---------- */
.watermark {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.32rem 0 0.12rem;
  font-size: 0.21rem;
  color: var(--ink-3);
}

/* ---------- 空 / 错误 ---------- */
.empty {
  padding: 1rem 0.4rem;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.26rem;
}

.empty-icon {
  font-size: 0.72rem;
  display: block;
  margin-bottom: 0.18rem;
}

/* ---------- 上一页/下一页 ---------- */
.hide { display: none; }