/* 电池护照手机站公共样式：设计稿 750 宽，1rem = 设计稿 100px */

:root {
  --blue: #00398a;
  --text: #333;
  --gray: #999;
  --line: #e5e5e5;
  --bg-gray: #f1f1f1;
  --btn-gray: #d8d8d8;
  --red: #f00;
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-size: 13.3333vw;
  font-size: min(13.3333vw, 100px);
  -webkit-text-size-adjust: 100%;
}
body {
  max-width: 7.5rem;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  color: var(--text);
  font-family: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  font-size: .24rem;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; border: 0; }
button, input { font: inherit; color: inherit; border: 0; outline: 0; background: none; }
button { cursor: pointer; }
input::placeholder { color: var(--gray); }
.is-hidden { display: none !important; }


/*
 * 设计稿 1px 线 = 1 物理像素。border 在 2 倍屏上最细只能画成 2 物理像素，
 * 所以用伪元素按 2 倍尺寸画线再缩小一半。线宽固定写 1px，不用 rem：rem 会随屏宽缩放，
 * 窄屏上线发虚，750 以上屏宽线变粗一倍。圆角照常用 rem。
 * 框线：.info-row .card .panel .form-control .cert-icon；底线：.summary-item .card-item .acc-title .result-row
 * 框线恰好压在元素边缘，这些元素不能设 overflow: hidden，否则右、下边线会被取整裁掉。
 */
.info-row, .card, .panel, .form-control, .cert-icon,
.summary-item, .card-item, .acc-title, .result-row, .result-more span { position: relative; }
.info-row::after, .card::after, .panel::after, .form-control::after, .cert-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid var(--line);
  border-radius: .16rem;
  transform: scale(.5);
  transform-origin: 0 0;
  pointer-events: none;
}
.summary-item::after, .card-item::after, .acc-title::after, .result-row::after, .result-more span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  transform: scaleY(.5);
  transform-origin: 0 100%;
}

/* ---------- 公共头部 ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1rem;
  padding: 0 .3rem;
  background: #fff;
  box-shadow: 0 .02rem .15rem rgba(0, 0, 0, .08);
}
.header-logo img { width: .97rem; }
.header-tools { display: flex; align-items: center; }
.header-tools > * + * { margin-left: .2rem; }
.header-user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--bg-gray);
}
.header-user img { width: .3rem; }

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 1.5rem;
  height: .5rem;
  border-radius: .25rem;
  background: var(--bg-gray);
  transition: width .25s;
  cursor: pointer;
}
.search-label { flex: 1; padding-left: .16rem; line-height: .5rem; }
.search-input { display: none; flex: 1; min-width: 0; height: 100%; padding-left: .24rem; }
.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--btn-gray);
}
.search-btn img { width: .21rem; }
.header.is-searching .header-user,
.header.is-searching .lang { display: none; }
.header.is-searching .search { width: 5.08rem; cursor: auto; }
.header.is-searching .search-label { display: none; }
.header.is-searching .search-input { display: block; }

.lang { position: relative; }
.lang-toggle {
  display: flex;
  align-items: center;
  width: 1.4rem;
  height: .5rem;
  padding-left: .13rem;
  border-radius: .25rem;
  background: var(--bg-gray);
}
.lang-toggle .icon-globe { width: .3rem; }
.lang-toggle span { margin-left: .3rem; }
.lang-toggle .icon-arrow { width: .12rem; margin-left: .09rem; }
.lang-menu {
  display: none;
  position: absolute;
  top: .5rem;
  left: 0;
  width: 100%;
  overflow: hidden;
  border-radius: .1rem;
  background: #fff;
  box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .12);
}
.lang.is-open .lang-menu { display: block; }
.lang-menu a { display: block; height: .5rem; line-height: .5rem; text-align: center; }
.lang-menu a.is-active { background: var(--bg-gray); color: var(--blue); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  max-width: 5rem;
  padding: .2rem .36rem;
  border-radius: .12rem;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* ---------- 电池概要（护照ID页、电池信息页共用） ---------- */
.banner img { width: 100%; height: auto; }
.main { padding: .3rem; }
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .8rem;
  margin-bottom: .3rem;
  padding: 0 .19rem;
  border-radius: .08rem;
}
.info-row dt { flex: none; color: var(--gray); }
.info-row dd { margin-left: .2rem; text-align: right; }
.sn-box {
  height: 1.3rem;
  padding-top: .18rem;
  border-radius: .08rem;
  background: var(--bg-gray);
  text-align: center;
}
.sn-box dt { line-height: .36rem; }
.sn-box dd { margin-top: .05rem; font-size: .36rem; line-height: .5rem; }

/* ---------- 护照ID页 ---------- */
.summary { display: flex; margin-top: .3rem; }
.summary-qr {
  flex: none;
  width: 3rem;
  height: auto;
  padding: .1rem;
  border-radius: .08rem;
  background: var(--bg-gray);
}
.summary-qr img { width: 100%; height: auto; background: #fff; }
.summary-side { flex: 1; min-width: 0; margin-left: .3rem; }
.summary-item {
  display: flex;
  align-items: center;
  height: .84rem;
}
.summary-item dt { flex: none; color: var(--gray); }
.summary-item dd { margin-left: .1rem; }
.more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .8rem;
  margin-top: .3rem;
  border-radius: .08rem;
  background: var(--bg-gray);
  color: var(--blue);
}
.more-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .26rem;
  height: .26rem;
  margin-left: .2rem;
  border-radius: 50%;
  background: var(--blue);
}
.more-btn i img { width: .07rem; }

.card {
  margin-top: .3rem;
  padding: 0 .3rem;
  border-radius: .08rem;
}
.card-item {
  display: flex;
  align-items: flex-start;
  padding: .34rem 0 .38rem;
}
.card-item > img { flex: none; width: .5rem; margin-top: .06rem; }
.card-item dl { flex: 1; min-width: 0; margin-left: .28rem; }
.card-item dt { color: var(--gray); line-height: .36rem; }
.card-item dd { margin-top: .06rem; line-height: .3rem; }
.cert {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
}
.cert dt { color: var(--gray); line-height: .36rem; }
.cert dd { display: flex; }
.cert-icon { width: .6rem; height: .6rem; padding: .01rem; }
.cert-icon img { width: .58rem; height: .58rem; object-fit: contain; }   /* 分类收集标识是后台上传的图，不一定是方的 */
.cert-icon::after { border-radius: .12rem; }
.cert-icon + .cert-icon { margin-left: .2rem; }

/* ---------- 电池信息页 ---------- */
.panel {
  margin-top: .3rem;
  border-radius: .08rem;
}
.panel-back {
  display: flex;
  align-items: center;
  height: .8rem;
  padding-left: .24rem;
  border-radius: .08rem .08rem 0 0;
  background: var(--bg-gray);
  color: var(--blue);
  font-size: .28rem;
}
.panel-back img { width: .26rem; margin-right: .14rem; }
.acc-item { margin: 0 .3rem; }
.acc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 1.08rem;
  font-size: .3rem;
  text-align: left;
}
.acc-item:last-child:not(.is-open) .acc-title::after { display: none; }
.acc-title i {
  flex: none;
  width: .12rem;
  height: .07rem;
  margin-right: .06rem;
  background: url(../images/icon-chevron-down.png) no-repeat center / 100% 100%;
}
.acc-item.is-open .acc-title i { background-image: url(../images/icon-chevron-up.png); }
.acc-body {
  display: none;
  grid-template-columns: 1fr 1fr;
  column-gap: .3rem;
  padding: .43rem 0 .06rem;
}
.acc-item.is-open .acc-body { display: grid; }
.field { min-width: 0; padding-bottom: .48rem; }
.field dt { color: var(--gray); line-height: .34rem; }
.field dd {
  min-height: .3rem;
  margin-top: .08rem;
  line-height: .3rem;
  word-wrap: break-word;
}
.field dd a { color: var(--text); }
.field .trademark { width: .54rem; height: auto; }
.field .collect-mark { width: .58rem; height: auto; }
.field .carbon-label { width: auto; max-width: min(1.6rem, 100%); height: auto; }
.field-toggle { color: var(--blue); cursor: pointer; white-space: nowrap; }

/* ---------- 搜索列表页 ---------- */
.result { padding: .3rem; }
.result-head,
.result-row {
  display: grid;
  grid-template-columns: .8rem 1fr 1.44rem;
  column-gap: .4rem;
  align-items: center;
  padding: 0 .78rem 0 .2rem;
}
.result-head {
  height: .8rem;
  border-radius: .1rem;
  background: var(--bg-gray);
  color: var(--blue);
  font-weight: bold;
}
.result-head span:last-child,
.result-row .result-more { text-align: center; }
.result-row { height: 1.21rem; }
.result-row img { width: .8rem; height: .8rem; object-fit: contain; border-radius: .06rem; }   /* 小于缩略图尺寸的图没有方形缩略图，按原比例放进方框 */
.result-sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-more { color: var(--gray); }
.result-more span { padding-bottom: .08rem; }
.result-more span::after { background: #787878; opacity: 0; }
.result-row:hover .result-more,
.result-row:active .result-more { color: var(--text); }
.result-row:hover .result-more span::after,
.result-row:active .result-more span::after { opacity: 1; }
.result-empty { padding: 1rem 0; color: var(--gray); text-align: center; }

/* ---------- 登录页 ---------- */
.login-page {
  padding-bottom: .5rem;
  background: #e6f2f8 url(../images/bg-login.jpg) no-repeat center top / cover;
}
.login-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1rem;
  padding: 0 .3rem;
}
.login-back { display: flex; align-items: center; }
.login-back i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .5rem;
  height: .5rem;
  margin-right: .2rem;
  border-radius: 50%;
  background: var(--bg-gray);
}
.login-back i img { width: .08rem; }
.login-brand { margin-top: .52rem; text-align: center; }
.login-brand img { width: 2.76rem; margin: 0 auto; }
.login-brand h1 { margin-top: .2rem; font-size: .36rem; line-height: .5rem; }
.login-card {
  margin: .8rem .3rem 0;
  padding: .62rem .5rem .95rem;
  border-radius: .3rem;
  background: #fff;
}
.login-card h2 { font-size: .36rem; font-weight: normal; line-height: .5rem; text-align: center; }
.form-item { margin-top: .21rem; }
.login-card h2 + .form-item { margin-top: .29rem; }
.form-item label { display: block; font-size: .28rem; line-height: .4rem; }
.form-item label i { margin-left: .1rem; color: var(--red); font-style: normal; }
.form-control {
  display: flex;
  align-items: center;
  height: .8rem;
  margin-top: .15rem;
  padding: 0 .2rem 0 .16rem;
  border-radius: .08rem;
}
.form-control > img { flex: none; width: .3rem; }
.form-control input { flex: 1; min-width: 0; height: 100%; margin-left: .17rem; }
.form-item.is-error .form-control::after { border-color: var(--red); }
.form-error { display: none; margin-top: .08rem; color: var(--red); font-size: .22rem; }
.form-item.is-error .form-error { display: block; }
.pwd-eye {
  flex: none;
  width: .34rem;
  height: .2rem;
  background: url(../images/icon-eye-close.png) no-repeat center / 100% 100%;
}
.pwd-eye.is-open { background-image: url(../images/icon-eye-open.png); }
.pwd-eye.is-open:hover,
.pwd-eye.is-open:active { background-image: url(../images/icon-eye-open-active.png); }
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: .8rem;
  margin-top: .4rem;
  border-radius: .08rem;
  background: var(--blue);
  color: #fff;
  font-size: .3rem;
}
.login-btn:disabled { opacity: .7; cursor: not-allowed; }
.login-btn .spinner {
  display: none;
  width: .3rem;
  height: .3rem;
  margin-right: .12rem;
  border: .03rem solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.login-btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.copyright { margin-top: .72rem; line-height: .4rem; text-align: center; }

/* ---------- 二维码 ---------- */
.qr-box { margin-bottom: .3rem; text-align: center; }
.qr-box img { width: 2.4rem; height: 2.4rem; margin: 0 auto; image-rendering: pixelated; }
.field dd img { max-width: 100%; }
.field .field-image { width: .54rem; }

/* ---------- 搜索页分页与提示 ---------- */
.pager { display: grid; grid-template-columns: 1.5rem 1fr 1.5rem; align-items: center; margin-top: .4rem; }
.pager-btn { padding: .14rem 0; border-radius: .08rem; background: var(--bg-gray); color: var(--blue); text-align: center; }
.pager-info { color: var(--gray); text-align: center; }
.result-note { margin-top: .3rem; color: var(--gray); text-align: center; }