:root {
  --theme-color: #ff6300;
  --btn-height: 0.45rem;
  --space: 0.11rem;
  --space2: 0.2rem;
  --small-space: 0.18rem;
  --medium-space: 0.24rem;
  --large-space: 0.36rem;
  --radius: 0.04rem;
  --medium-radius: 0.08rem;
  --large-radius: 0.16rem;
  --border-width: 0.014rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  color: #323233;
  font-size: 14px;
  /* ★ 中文字体优先，各平台用系统最好看的中文字体 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  background-color: #f5f5f5;
}
a,
input,
button {
  color: inherit;
  outline: none;
  border: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
}
::selection {
  background: #83c9e5;
}
::-moz-selection {
  background-color: #83c9e5;
}
section {
  margin: var(--space2);
  border-radius: 0.08rem;
  background-color: #fff;
}
@keyframes rolled {
  30% {
    left: 0%;
  }
  100% {
    left: 200%;
  }
}

/* ============ 顶部背景 ============ */
.top-bg {
  font-size: 0;
  background-image: linear-gradient(160deg, #b0ddfc, #0c9df9);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.top-bg .container {
  padding: var(--medium-space);
  padding-bottom: 0;
}
.top-bg .container img {
  width: 100%;
  border-radius: var(--large-radius) var(--large-radius) 0 0;
  border: .04rem solid rgba(255, 255, 255, 0.5);
  border-bottom: none;
}

/* ============ 20 种随机背景渐变 ============ */
body.c-0  .top-bg { background-image: linear-gradient(160deg, #b0ddfc, #0c9df9) !important; }
body.c-1  .top-bg { background-image: linear-gradient(160deg, #41c8f2, #2882f4) !important; }
body.c-2  .top-bg { background-image: linear-gradient(160deg, #fd7a79, #fd596d) !important; }
body.c-3  .top-bg { background-image: linear-gradient(160deg, #ff8e3c, #ff6401) !important; }
body.c-4  .top-bg { background-image: linear-gradient(160deg, #fcd193, #f09b38) !important; }
body.c-5  .top-bg { background-image: linear-gradient(160deg, #ecb7ff, #fb84ff) !important; }
body.c-6  .top-bg { background-image: linear-gradient(160deg, #a1ffce, #28b487) !important; }
body.c-7  .top-bg { background-image: linear-gradient(160deg, #ffd3a5, #fd6585) !important; }
body.c-8  .top-bg { background-image: linear-gradient(160deg, #84fab0, #8fd3f4) !important; }
body.c-9  .top-bg { background-image: linear-gradient(160deg, #fbc2eb, #a6c1ee) !important; }
body.c-10 .top-bg { background-image: linear-gradient(160deg, #a18cd1, #fbc2eb) !important; }
body.c-11 .top-bg { background-image: linear-gradient(160deg, #fad0c4, #ffd1ff) !important; }
body.c-12 .top-bg { background-image: linear-gradient(160deg, #ffecd2, #fcb69f) !important; }
body.c-13 .top-bg { background-image: linear-gradient(160deg, #ff9a9e, #fecfef) !important; }
body.c-14 .top-bg { background-image: linear-gradient(160deg, #a1c4fd, #c2e9fb) !important; }
body.c-15 .top-bg { background-image: linear-gradient(160deg, #d4fc79, #96e6a1) !important; }
body.c-16 .top-bg { background-image: linear-gradient(160deg, #f6d365, #fda085) !important; }
body.c-17 .top-bg { background-image: linear-gradient(160deg, #5ee7df, #b490ca) !important; }
body.c-18 .top-bg { background-image: linear-gradient(160deg, #f093fb, #f5576c) !important; }
body.c-19 .top-bg { background-image: linear-gradient(160deg, #4facfe, #00f2fe) !important; }

/* ============ 主复制按钮 ============ */
.keys-main {
  margin: 0 var(--medium-space) 0.12rem;
  background-color: transparent;
}
.keys-main .keys {
  text-align: center;
  padding: var(--space) 0;
  border-radius: 0 0 var(--large-radius) var(--large-radius);
  background-color: #fff;
}
.keys-main .keys .text {
  font-size: 0.16rem;
  font-weight: 500;
}
.keys-main .keys .tips {
  color: #666;
  margin-top: var(--space);
}
.keys-main .btn-copy {
  color: #fff;
  font-size: 0.18rem;
  letter-spacing: 0.02rem;
  text-indent: -0.02rem;
  overflow: hidden;
  width: 100%;
  height: var(--btn-height);
  margin-top: var(--space);
  border-radius: 0.24rem;
  background-image: linear-gradient(to right, #b0ddfc, #0c9df9);
  position: relative;
  transition: all .8s;
}

/* ============ 按钮渐变跟随背景一起变（20 种） ============ */
body.c-0  .keys-main .btn-copy { background-image: linear-gradient(to right, #b0ddfc, #0c9df9); }
body.c-1  .keys-main .btn-copy { background-image: linear-gradient(to right, #41c8f2, #2882f4); }
body.c-2  .keys-main .btn-copy { background-image: linear-gradient(to right, #fd7a79, #fd596d); }
body.c-3  .keys-main .btn-copy { background-image: linear-gradient(to right, #ff8e3c, #ff6401); }
body.c-4  .keys-main .btn-copy { background-image: linear-gradient(to right, #fcd193, #f09b38); }
body.c-5  .keys-main .btn-copy { background-image: linear-gradient(to right, #ecb7ff, #fb84ff); }
body.c-6  .keys-main .btn-copy { background-image: linear-gradient(to right, #a1ffce, #28b487); }
body.c-7  .keys-main .btn-copy { background-image: linear-gradient(to right, #ffd3a5, #fd6585); }
body.c-8  .keys-main .btn-copy { background-image: linear-gradient(to right, #84fab0, #8fd3f4); }
body.c-9  .keys-main .btn-copy { background-image: linear-gradient(to right, #fbc2eb, #a6c1ee); }
body.c-10 .keys-main .btn-copy { background-image: linear-gradient(to right, #a18cd1, #fbc2eb); }
body.c-11 .keys-main .btn-copy { background-image: linear-gradient(to right, #fad0c4, #ffd1ff); }
body.c-12 .keys-main .btn-copy { background-image: linear-gradient(to right, #ffecd2, #fcb69f); }
body.c-13 .keys-main .btn-copy { background-image: linear-gradient(to right, #ff9a9e, #fecfef); }
body.c-14 .keys-main .btn-copy { background-image: linear-gradient(to right, #a1c4fd, #c2e9fb); }
body.c-15 .keys-main .btn-copy { background-image: linear-gradient(to right, #d4fc79, #96e6a1); }
body.c-16 .keys-main .btn-copy { background-image: linear-gradient(to right, #f6d365, #fda085); }
body.c-17 .keys-main .btn-copy { background-image: linear-gradient(to right, #5ee7df, #b490ca); }
body.c-18 .keys-main .btn-copy { background-image: linear-gradient(to right, #f093fb, #f5576c); }
body.c-19 .keys-main .btn-copy { background-image: linear-gradient(to right, #4facfe, #00f2fe); }

.keys-main .btn-copy::after {
  content: "";
  display: block;
  width: 50%;
  height: 200%;
  background-image: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3)
  );
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(-140%, -50%) rotate(10deg);
  animation: rolled 3s 1s ease both infinite;
}

/* ============ 地图链接区域 ============ */
.maps {
  padding: 0.14rem 0.12rem 0.14rem;
  margin-top: 0;
}
.map-list {
  display: flex;
}
.map-list:not(:first-child) {
  margin-top: var(--space);
}
.map-list .item {
  width: 25%;
  text-align: center;
}
.map-list .item img {
  height: 0.4rem;
}
.map-list .item .text {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.08rem;
}
.map-list .item .text1 {
  font-size: 0.12rem;
  color:#e3bc80;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.08rem;
}

/* ============ 购物须知（优化文字样式） ============ */
.notice {
  padding: 0.06rem 0;
}
.notice .title-bar {
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
  margin-bottom: 0.08rem;
}
.notice .title-bar::before,
.notice .title-bar::after {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .01rem;
  background-color: rgba(0, 0, 0, 0.15);
}
.notice .title-bar .title {
  color: #333;
  font-size: 0.16rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  text-align: center;
  margin: 0 var(--space);
}
.notice .content {
  padding: var(--space) var(--small-space);
}
.notice .content p {
  color: #555;
  font-size: 0.14rem;
  line-height: 1.8;
  letter-spacing: 0.01rem;
  margin-bottom: 0.14rem;
  padding-left: 0.02rem;
}
.notice .content p:last-child {
  margin-bottom: 0;
}
.notice .content p .red {
  color: #ff4949;
  font-weight: 500;
}

/* ============ 顶部提示 ============ */
.success-notify {
  color: #fff;
  font-size: 0.18rem;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  display: flex;
  min-height: var(--large-space);
  padding: var(--medium-space) var(--small-space);
  margin: 0 var(--medium-space);
  border-radius: var(--large-radius);
  background-color: #13ce66;
  box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 25%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  line-height: 1.4;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.success-notify.error {
  background-color: #ff4949;
}
.success-notify.show {
  opacity: 1;
  visibility: visible;
}

/* ============ PC 弹窗：位置靠下 ============ */
.success-notify.pc {
  top: 35%;
}

/* ============ loading ============ */
.loading {
  align-items: center;
  justify-content: center;
  display: none;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
}
.loading.show {
  display: flex;
}
.loading .box {
  flex-direction: column;
  align-items: center;
  display: flex;
  padding: .2rem .24rem;
  border-radius: .16rem;
  background-color: #000;
}
.loading .box svg {
  fill: currentColor;
  color: #fff;
  animation: spin 2s linear infinite;
}
.loading .box .title {
  color: #fff;
  font-size: .15rem;
  margin-top: .1rem;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}