/* ==========================================================================
   扫码防伪查询页样式（手机端）
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #e8e2d6;
  color: #484848;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fffaed;
  overflow: hidden;
  position: relative;
}

@media (min-width: 600px) {
  .app {
    box-shadow: 0 0 32px rgba(88, 62, 48, .16);
  }
}

/* ---------------- 首屏 ----------------
 * 首屏图为 544×529 的设计稿裁图（0~107 为 logo 区，107~143 原是标题带，
 * 143 以下为产品图）。标题带不直接用图片，而是切成 0~107 / 143~529 两段，
 * 中间那条带用与图片完全一致的渐变补齐、标题由 HTML 文字渲染。
 * 这样无论换成哪一版首屏图，都不可能和图片里的旧标题叠在一起。
 */
.hero {
  position: relative;
  aspect-ratio: 544 / 529;
  background: #682b39;
  overflow: hidden;
}

.hero-slice {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  background-image: var(--hero-img, none);
  background-repeat: no-repeat;
}

/* 上半段：原图 0~107px（logo 区），529/107 ≈ 494.39% */
.hero-slice.s1 {
  top: 0;
  height: 20.227%;
  background-size: 100% 494.39%;
  background-position: center top;
}

/* 下半段：原图 143px 起（产品图），529/386 ≈ 137.05% */
.hero-slice.s2 {
  bottom: 0;
  height: 72.968%;
  background-size: 100% 137.05%;
  background-position: center bottom;
}

/* 标题带：107~143（36/529 = 6.805%），渐变取自图片实测色，接缝色差 ≤1/255 */
.hero-title {
  position: absolute;
  left: 0;
  top: 20.227%;
  width: 100%;
  height: 6.805%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #682b39 0%, #692c3a 100%);
  color: #fff;
  /* 标题随首屏等比缩放：360px 宽约 16.6px，480px 宽封顶 22px */
  font-size: min(4.6vw, 22px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .09em;
  text-shadow: 0 1px 3px rgba(60, 20, 26, .3);
}

/* 隐藏标题：整条带一起去掉，首屏高度收窄 36px（493/529） */
.hero.no-title {
  aspect-ratio: 544 / 493;
}

.hero.no-title .hero-slice.s1 { height: 21.704%; }
.hero.no-title .hero-slice.s2 { height: 78.296%; }
/* ---------------- 我是终端 ---------------- */
.terminal-bar {
  padding: 16px 0 20px;
  text-align: center;
}

.terminal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 26px;
  border: 1px solid rgba(176, 62, 88, .5);
  border-radius: 999px;
  background: #fffdf7;
  color: #ac3e59;
  font-size: 14px;
  letter-spacing: 2.5px;
  text-decoration: none;
  transition: opacity .15s;
}

.terminal-btn:active { opacity: .7; }

.ico-gift {
  width: 17px;
  height: 17px;
  flex: none;
  margin-right: 1px;
}

/* ---------------- 双线卡片 ---------------- */
.panel {
  position: relative;
  width: calc(100% - 44px);
  max-width: 440px;
  margin: 0 auto;
  padding: 10px;
  background: #fffcee;
  border: 1px solid #d7d0c0;
  border-radius: 9px;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(203, 194, 175, .9);
  border-radius: 5px;
  pointer-events: none;
}

/* ---------------- 查询结果 ---------------- */
.result {
  padding: 26px 16px 34px;
  text-align: center;
}

.badge {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #62c930 0%, #8ada5b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 7px rgba(84, 172, 44, .28);
}

.badge svg { width: 23px; height: 23px; }

.badge-warn { background: linear-gradient(180deg, #e0873a 0%, #f0aa63 100%); box-shadow: 0 2px 7px rgba(200, 110, 40, .25); }

.result-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #24201d;
  letter-spacing: .4px;
}

.hr {
  height: 1px;
  width: 74%;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, rgba(230, 218, 196, 0) 0%, #e6dac4 20%, #e6dac4 80%, rgba(230, 218, 196, 0) 100%);
}

.notice {
  margin: 0;
  padding: 0 2px;
  text-align: left;
  font-size: 14.5px;
  line-height: 2.05;
  color: #3b3b3b;
  letter-spacing: .1px;
}

.meta {
  margin-top: 18px;
  padding: 12px 15px;
  background: #f7efdb;
  text-align: left;
}

.meta-row {
  display: flex;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 2.3;
}

.meta-row .mk { color: #a89f8a; flex: none; }
.meta-row .mv { color: #4a4a4a; word-break: break-all; }

.meta-row + .meta-row .mk,
.meta-row + .meta-row .mv { }

/* ---------------- 章节标题 ---------------- */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 44px);
  max-width: 440px;
  margin: 20px auto 10px;
}

.sec-head h2 {
  margin: 0;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  font-size: 19px;
  font-weight: 700;
  color: #a76041;
  letter-spacing: 3px;
  white-space: nowrap;
  text-indent: 3px;
}

.sec-head .sl {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  background: linear-gradient(90deg, rgba(224, 166, 60, 0), rgba(224, 166, 60, .55));
}

.sec-head .sl.r {
  background: linear-gradient(270deg, rgba(224, 166, 60, 0), rgba(224, 166, 60, .55));
}

.sec-head .sl::after {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 4px;
  height: 4px;
  background: #e0a63c;
  transform: rotate(45deg);
  opacity: .75;
}

.sec-head .sl.r::after { left: auto; right: 0; }

.orn {
  width: 24px;
  height: 13px;
  flex: none;
  opacity: .95;
}

.orn.flip { transform: scaleX(-1); }

/* ---------------- 信息行 ---------------- */
.grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 2px;
  padding: 7px 11px;
}

.row { display: contents; }

.row .k,
.row .v {
  padding: 5px 0;
  line-height: 22px;
  font-size: 14.5px;
}

.row .k {
  color: #9a9a94;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  white-space: nowrap;
}

.row .v {
  color: #464646;
  word-break: break-all;
}

.row .v.mono {
  font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .3px;
}

.tel { text-decoration: none; color: #464646; }

.btn-view {
  display: inline-block;
  margin-top: 1px;
  padding: 2px 13px;
  border-radius: 999px;
  background: #8d3345;
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
  letter-spacing: .5px;
}

.btn-view:active { opacity: .8; }

/* ---------------- 页脚 ---------------- */
.foot {
  padding: 22px 16px calc(26px + env(safe-area-inset-bottom));
  text-align: center;
  color: #c6baa3;
  font-size: 11.5px;
  letter-spacing: .6px;
}