*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  background:#0b0e11;

  color:white;

  font-family:Arial,sans-serif;

  overflow-x:hidden;
}

/* 顶部 */

header{

  width:100%;

  height:64px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 24px;

  border-bottom:1px solid #1e2329;
}

/* logo */

.logo{

  color:#fcd535;

  font-size:28px;

  font-weight:bold;
}

/* 导航 */

nav{

  display:flex;

  gap:32px;
}

/* 导航链接 */

nav a{

  color:#ffffff;

  text-decoration:none;

  font-size:15px;

  font-weight:500;

  transition:0.2s;
}

/* 鼠标移动效果 */

nav a:hover{

  color:#fcd535;
}

/* 按钮 */

.header-right{

  display:flex;

  gap:12px;
}

.login{

  width:78px;

  height:40px;

  border:none;

  border-radius:8px;

  background:#2b3139;

  color:white;

  font-size:14px;
}

.signup{

  width:98px;

  height:40px;

  border:none;

  border-radius:8px;

  background:#fcd535;

  color:black;

  font-size:14px;

  font-weight:bold;
}

/* notice + card */

.notice,
.card{

  width:96%;

  max-width:1400px;

  margin-left:auto;

  margin-right:auto;
}

/* notice */

.notice{

  height:68px;

  margin-top:28px;

  background:#1e2329;

  border-radius:18px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 24px;

  color:#b7bdc6;

  font-size:15px;
}

.notice-right{

  display:flex;

  align-items:center;
}

/* 倒计时 */

#timer{

  color:#fcd535;

  font-size:18px;

  font-weight:bold;

  margin-left:8px;
}

/* 主体 */

.card{

  min-height:520px;

  margin-top:28px;

  border:1px solid #2b3139;

  border-radius:22px;

  overflow:hidden;

  display:flex;

  background:#0b0e11;
}

/* 左边 */

.left{

  width:50%;

  border-right:1px solid #2b3139;

  padding:60px 56px;

  display:flex;

  flex-direction:column;

  justify-content:flex-start;
}

/* 上面 */

.top-payment{

  text-align:center;
}

/* Payment Amount */

.pay-title{

  color:#b7bdc6;

  font-size:20px;

  margin-bottom:24px;
}

/* 金额 */

.amount{

  font-size:52px;

  font-weight:bold;

  line-height:1;

  white-space:nowrap;
}

.amount span{

  font-size:22px;

  margin-left:6px;
}

/* 底部信息 */

.bottom-info{

  margin-top:60px;
}

/* 行 */

.row{

  display:flex;

  justify-content:space-between;

  margin-bottom:34px;
}

/* 左边文字 */

.label{

  color:#848e9c;

  font-size:16px;

  width:180px;
}

/* 右边文字 */

.value{

  color:white;

  font-size:14px;

  max-width:320px;

  text-align:right;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

/* 右边 */

.right{

  width:50%;

  text-align:center;

  padding:48px 50px;

  display:flex;

  flex-direction:column;

  align-items:center;
}

/* 图片 */

.banner{

  width:240px;

  height:240px;

  object-fit:cover;

  border-radius:18px;

  background:white;
}

/* 文本 */

.scan-text{

  margin-top:24px;

  font-size:20px;

  font-weight:bold;
}

/* 快递单号 */

.track-box{

  width:100%;

  margin-top:28px;

  display:flex;

  flex-direction:column;

  align-items:center;
}

/* 一排 */

.track-inline{

  display:flex;

  align-items:center;

  gap:14px;
}

/* 文字 */

.track-text{

  font-size:16px;

  color:#b7bdc6;
}

/* 输入框 */

#trackInput{

  width:140px;

  height:38px;

  border:none;

  outline:none;

  border-radius:10px;

  background:#1e2329;

  color:white;

  font-size:16px;

  text-align:center;

  padding:0 10px;
}

/* placeholder */

#trackInput::placeholder{

  color:#666;

  font-size:14px;
}

/* 错误提示 */

#trackError{

  display:none;

  margin-top:10px;

  color:#ff4d4f;

  font-size:14px;
}

/* 按钮 */

#approveBtn{

  width:100%;

  height:60px;

  margin-top:40px;

  border:none;

  border-radius:14px;

  background:#fcd535;

  color:black;

  font-size:20px;

  font-weight:600;

  cursor:pointer;
}

#approveBtn:hover{

  opacity:0.96;
}

/* loading */

#loading{

  display:none;

  margin-top:22px;

  color:#fcd535;

  font-size:16px;
}
/* =========================
   手机适配
========================= */

@media screen and (max-width:768px){

  /* 顶部 */

  header{

    height:auto;

    padding:18px;

    flex-direction:column;

    gap:18px;
  }

  /* 导航 */

  nav{

    width:100%;

    overflow-x:auto;

    gap:20px;

    padding-bottom:6px;
  }

  nav a{

    white-space:nowrap;

    font-size:14px;
  }

  /* 按钮区域 */

  .header-right{

    width:100%;

    justify-content:center;
  }

  /* notice */

  .notice{

    height:auto;

    padding:16px;

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

    font-size:14px;
  }

  /* 主卡片 */

  .card{

    flex-direction:column;
  }

  /* 左右 */

  .left,
  .right{

    width:100%;

    border:none;

    padding:30px 22px;
  }

  /* 左边下边框 */

  .left{

    border-bottom:1px solid #2b3139;
  }

  /* 金额 */

  .amount{

    font-size:40px;
  }

  /* 信息 */

  .row{

    flex-direction:column;

    gap:10px;

    margin-bottom:26px;
  }

  .label{

    width:auto;

    font-size:14px;
  }

  .value{

    text-align:left;

    max-width:100%;

    font-size:14px;
  }

  /* 图片 */

  .banner{

    width:200px;

    height:200px;
  }

  /* 标题 */

  .scan-text{

    font-size:18px;
  }

  /* 输入区域 */

  .track-inline{

    flex-direction:column;

    gap:12px;
  }

  /* 输入框 */

  #trackInput{

    width:100%;
  }

  /* 按钮 */

  #approveBtn{

    height:54px;

    font-size:18px;
  }

}
/* =========================
   手机端自适应优化
========================= */
@media screen and (max-width:768px){
  .card { flex-direction: column; }
  .left, .right { width: 100%; padding: 30px 22px; border:none; }
  .left { border-bottom:1px solid #2b3139; }
  #trackInput { width:100%; font-size:16px; height:36px; }
  #approveBtn { width:100%; font-size:18px; height:50px; }
  .banner { width:180px; height:180px; }
  .scan-text { font-size:16px; margin-top:16px; }
}

@media screen and (max-width:480px){
  .success-icon { width:90px; height:90px; font-size:50px; margin-bottom:20px; }
  .success-text { font-size:30px; margin-bottom:12px; }
  .desc { font-size:14px; line-height:1.6; padding:0 6px; margin-bottom:30px; }
  .btn { font-size:16px; height:48px; }
}