body {
  background:#ffffff;
  padding: 0;
  margin: 0;
  color: #fff;
  font-family: 'Saira', sans-serif; 
  font-size: 15px;
}
.background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /*background: url('/public/bg1.jpg') no-repeat center center;*/
      background-size: cover;
      z-index: -1;
    }
.title{
  width: 90%;
  font-size:35px;
  text-align:center;
  margin: auto;
}
.main{
  width:100%;
  max-width:680px;
  height:100%;
  margin: 0 auto;
  padding: 0;
  /*background: #000;*/
  /*background-image: url('public/bg1.jpg'); */
  /*background-size: cover;*/
  /*background-attachment: fixed;*/
  /*background-position: center;*/
  /*background-repeat: no-repeat;*/
      position: relative;
      z-index: 1;
      /*background:rgba(0,0,0,0.7);*/
      background:rgba(255,255,255,1);
}
.logoa {
      animation: pulsea 3s ease-in-out infinite;
    }
    @keyframes pulsea {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
        transform: scale(0.98, 0.98);
      }
      100% {
        opacity: 1;
      }
    }

.logob {
  -webkit-animation: bounce 3s infinite ease-in-out;
  animation: bounce 3s infinite ease-in-out;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}


.main img{ width: 100%; border-radius: 10px;}
.nftlist{
  width: 80%;
  text-align:center;
  margin: auto;
  margin-bottom: 30px;}

.vimg{
  width: 90%;
  text-align:center;
  margin: auto;
  margin-bottom: 30px;
}
.vfont{
  width: 90%;
  text-align:left;
  margin: auto;
  margin-bottom: 30px;
  line-height: 1.2; color: #e9e9e9;
}

a{text-decoration:none; color: #fff;}
p{
  padding-left:10%;
  padding-right:10%;
  padding-top:2.5%;
  padding-bottom:2.5%;
  font-size:17px;
}
.pcolor {
  font-weight: bold;
  /*background: linear-gradient(to right, #D761FE ,#4DFEFB,  #e5ff4f); */
  background: linear-gradient(90deg, #ffffff, #cccccc, #ffffff); 
  -webkit-background-clip: text;
  color: transparent; 
}

/*classes*/
.qbutton{justify-content: center;text-align:center;margin:30px 10px 10px 10px;}

.qbtn {
  display: block; 
  height: 50px;
  padding: 10px 20px;
  font-size: 18px;
  color: #fff;
  font-family: 'Orbitron';
  background-color: transparent;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: buttonHover2 0.5s 1;
  margin: auto;
}

.qbtn:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(to right, rgb(160, 250, 250), rgb(158, 73, 249), rgb(239, 157, 187)); 
  border-radius: 30px;
  z-index: -1;
}

.qbtn:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: rgb(36, 34, 56,0.95);
  border-radius: 27px;
  z-index: -1;
}
.qbtn2 {
  display: block; 
  height: 50px;
  padding: 10px 20px;
  font-size: 18px;
  color: #c0c0c0;
  font-family: 'Orbitron';
  background-color: transparent;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: buttonHover2 0.5s 1;
  margin: auto;
}

.qbtn2:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(to right, rgb(59, 101, 101), rgb(42, 19, 64), rgb(101, 66, 80)); 
  border-radius: 30px;
  z-index: -1;
}

.qbtn2:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: rgb(36, 34, 56,0.95);
  border-radius: 27px;
  z-index: -1;
}



.center{
  text-align:center;
  
}



.link-wrap{
  width:95%;
  height:20px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:5%;
  margin-top:5px;
  margin-bottom:5px;
  background:rgb(0,0,0,1);
  animation:link-hov1 0.25s 1;
  animation-fill-mode:forwards;

}
.nav-link{
  font-size:20px;
  text-decoration:none;
  font-weight:bold;
  color:#00e1ff;
}
.link-wrap:hover{
  cursor:pointer;
  animation:link-hov 0.25s 1;
  animation-fill-mode:forwards;
}
.footer{padding: 8px;text-align: center;}
/*id selections*/
#link-wrapper{
  position:absolute;
  top:20%;
  left:0px;
  width:100%;
  height:80%;
  background:rgb(0,0,0,0.2);
}
#link-wrapper span{
  float: right;
  background:rgba(43, 43, 43, 0.8);
  color: #e8e7e7;
  padding: 3px 7px;
  margin-right: 10px;
  font-size: 12px;
  border-radius: 5px;
}


#nav-bar{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:50px;
  background:rgb(40,37,66,0.8);
  z-index:5;
  box-shadow:0px 2px 10px 0px rgb(0,0,0,0.5);
}
#hamburger{
  position:fixed;
  left:8px;
  top:5px;
  width:40px;
  height:40px;
  background:rgba(0,0,0,0.15);
  border-radius: 10px;
}
#hamburger:hover{
  cursor:pointer;
  background:rgba(0,0,0,0.2);
}

.hbar{
  width:40px;
  height:5px;
  border-radius:75px;
  background:rgb(255, 255, 255);
  margin-left:5px;
  margin-top:5px;
  margin-bottom:5px;
}
.b1{
  margin-top:9px;
}




#navigation{
  position:fixed;
  top:0px;
  left:-300px;
  width:250px;
  height:100%;
  background:rgb(0, 0, 0,0.8);
  z-index:7;
}
#close{
  position:absolute;
  top:10px;
  right:10px;
  width:35px;
  height:35px;
  /* background:rgba(43, 43, 43, 0.5); */
  border-radius: 10px;
}
#close:hover{
  cursor:pointer;
  background:rgba(87, 87, 87);
}
.closecrossb{
  width:35px;
  height:5px;
  border-radius:20px;
  background:#fff;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-18px;
  margin-top:-4px;
}
.cb1{
  transform:rotate(45deg);
}
.cb2{
  transform:rotate(-45deg);
}
/*animations & media query management*/
@keyframes link-hov{
  0%{
    background:rgba(0,0,0,0.1);
    box-shadow:0px 0px 0px 0px rgb(0,150,200);
  }
  100%{
    background:rgba(0,0,0,0.2);
    box-shadow:0px 3px 0px 0px rgb(0,150,200);
  }
}
@keyframes link-hov1{
  100%{
    background:rgba(0,0,0,0.1);
    box-shadow:0px 0px 0px 0px rgb(0,150,200);
  }
  0%{
    background:rgba(0,0,0,0.2);
    box-shadow:0px 3px 0px 0px rgb(0,150,200);
  }
}
@keyframes shownav{
  0%{
    display:none;
    opacity:0;
    left:-300px;
  }
  100%{
    opacity:1;
    display:block;
    left:0px;
  }
}
@keyframes hidenav{
  0%{
    opacity:1;
    display:block;
    left:0px;
  }
  100%{
    display:none;
    opacity:0;
    left:-300px;
  }
}
@keyframes buttonHover1{
  100%{
    background:rgba(0,0,0,0.2);
  }
}
@keyframes buttonHover2{
  100%{
    background:rgba(0,0,0,0.15);
  }
}



        .overlay {
            display: none; 
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000; 
        }


      .popup {
          position: absolute; 
          top: 50%; 
          left: 50%; 
          transform: translate(-50%, -50%); 
          background: rgba(0, 0, 0, 0.7);
          padding: 20px;
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
          border-radius: 5px; 
          max-height: 80vh;
          min-height: 300px;
          overflow-y: auto;
          width: 80%; 
      }

        .close-btn {
            position: absolute; 
            top: 10px;
            right: 10px;
            cursor: pointer; font-size:30px;
            color: #00e1ff;
        }
.q_tip_color {
  color:#ffffff;
  background-color:rgba(0,0,0,0.9);
}
.l1orl2{margin-right: 10px;font-size:18px;}


.dropdown-menu {
      display: none;
      position: fixed;
      top: 42px;
      right: 8px;
      background-color: rgba(0,0,0,0.7);
      box-shadow: 0 8px 16px rgba(255,255,255,0.2);
      border-radius: 5px;
      z-index: 99;
    }

    .dropdown-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .dropdown-menu ul li {
      padding: 5px 20px;
      line-height: 2.2;
    }

    .dropdown-menu ul li a {
      text-decoration: none;
      color: rgb(0, 215, 244);
      display: block;
    }

    .ulli{margin-left:7%;box-shadow:-3px 0px 0px 0px rgb(0,150,200);font-size:17px; color: #e9e9e9;}
    .ulli li{list-style: none;}




.progress-bar-container {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
  background-color: #111;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 213, 255, 0.4);
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 15px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.filler {
  background: linear-gradient(45deg, #27f4ff, #00f2ff, #00b9c3);
  height: 100%;
  border-radius: 6px;
  transition: width 2s ease-in-out;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.filler::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 106, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(38, 143, 255, 0.4) 50%, rgba(0, 166, 255, 0.4) 75%, transparent 75%, transparent 100%);
  background-size: 40px 40px;
  animation: stripes 1s linear infinite;
}

.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  background-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.overlay::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  pointer-events: none;
  border-radius: 6px;
  z-index: 2;
}

.progress-bar::after {
  /* content: "PROGRESS"; */
  content: attr(data-content);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 2px 2px 4px #000;
  font-weight: bold;
  z-index: 3;
  pointer-events: none;
  font-size:15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.9;
}



@keyframes stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
}




.idoinput {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.quantity-container {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.quantity-button {
  padding: 10px 30px;
  cursor: pointer;
  user-select: none;
  background-color: #f0f0f0;
  border: none;
  font-size: 28px;
  color: #333;
  transition: background-color 0.2s;
}

.quantity-button:hover {
  background-color: #e0e0e0;
}

.quantity-input {
  width: 150px;
  text-align: center;
  border: none;
  font-size: 28px;
  outline: none;font-family: 'Orbitron';
}


.curspan{color: #baff0a; font-size: 18px;margin-left: 8px;margin-right: 8px;}
.curspanA{color: #ffffff; font-size: 16px; text-align: center;}






.swap {
  background-color: rgba(255, 255,255,1);;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 380px;
  padding: 15px;
  margin: auto;
 box-sizing: border-box;
 color: #111111;
}

.exchange-card {
  text-align: center;
}

.exchange-card h2 {
  margin-bottom: 20px;
}

.exchange-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.exchange-box {
  width: 90%;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
}
.bgc{
background-color: #fbfbfb;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  font-weight: bold;color:#666666
}
.max-link {
  float:right;background-color:#c7f3ff;color:#0877ff; padding:2px 5px;border-radius: 10px;margin-left:10px;font-size:14px;cursor: pointer;
}
.currency {
  display: flex;
  align-items: center;
}

.currency img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.amount input {
  width: 90%;
  font-size: 1.2em;
  text-align: right;
  border: none;
  background: none;
}

.amount input:focus {
  outline: none;
}
.amount input[type=number]::-webkit-outer-spin-button,
.amount input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.amount input[type=number] {
-moz-appearance: textfield;
}
.balance {
  color: #999999;
}

.arrow {
  font-size:1.5em;
  cursor: pointer;
  margin: 5px;
background-color:#f5faff;color:#0877ff; 
border-radius: 1.5em;width:1.2em;
}

.details {
width: 90%;margin:auto;
  text-align: left;
  font-size: 0.9em;
  color: #777777;
  margin-bottom: 20px;
  border: 1px solid #f7f7f7;
  border-radius: 10px;
  padding: 10px;
  background-color: #f7f7f7;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.exchange-button {
  background-color: #0783ff;
  color: #ffffff;
  border: none;
  padding: 13px 20px;
  border-radius: 5px;
  width:95%;
  cursor: pointer;
  font-size:17px;
}

.exchange-button:hover {
  background-color: #0785dd;
}

#receive-currency-select {
padding: 8px 10px 8px 10px;
font-size: 16px;
border: 1px solid #ffffff;
border-radius: 4px;
background-color: #ffffff;
}





      /* 容器样式 */
      .staking_container {
          width: 90%;
          max-width: 380px;
          margin: 20px auto;
          padding: 15px;
          background-color: #ffffff;
          border-radius: 10px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          text-align: center;
          -webkit-box-sizing: border-box; /* Safari/Chrome */
          -moz-box-sizing: border-box; /* Firefox */
          box-sizing: border-box; 
          color: #000;
      }
      .staking_container a{color: #002fc9; text-decoration: underline;}
      /* 标题样式 */
      .staking_container h1 {
          font-size: 24px;
          margin-bottom: 20px;
      }
      /* 总额样式 */
      .total-amount h2 {
          font-size: 18px;
          color: #666;
      }

      .allamount {
          font-size: 26px;
          margin: 10px 0;
      }
      
      .staking {
          display: flex;
          justify-content: space-between;
          margin: 10px 0;
          border-radius: 8px;
          padding: 8px 0;
          border: #eee 1px solid;
      }
      .staking-item3 {
          width: 30%;text-align: center;color: #999;padding: 0px;
      }
      .staking-item{
          width: 48%;text-align: center;color: #999;padding: 0px;
      }
      .staking-item1{
          width: 99%;text-align: center;color: #999;padding: 0px;
      }
      .staking-item p,.staking-item1 p,.staking-item3 p{
          line-height: 1.2;
          font-size: 1em;padding: 0;margin:0px;
      }
      .staking-item p:first-child,.staking-item1 p:first-child,.staking-item3 p:first-child {
          font-size: 20px;text-align: center;
          color: #000;padding: 0;margin-bottom:8px;line-height: 1;
      }


      .team-selection {
          margin: 20px 0;
          text-align: left;
          -webkit-box-sizing: border-box; /* Safari/Chrome */
          -moz-box-sizing: border-box; /* Firefox */
          box-sizing: border-box; 
      }

      .team-selection label{
          font-size: 14px;
          color: #666;
      }

      .team-selection input{
          width: 100%;
          padding: 2px 10px;
          margin-top: 5px;
          border: 1px solid #ddd;
          border-radius: 5px;
          -webkit-box-sizing: border-box; /* Safari/Chrome */
          -moz-box-sizing: border-box; /* Firefox */
          box-sizing: border-box; 
          font-family: 'Saira', sans-serif; 
          font-size: 22px; font-weight: bold;
      }

      .b_btn {
          display: block;
          width: 100%;
          padding: 10px;
          margin-top: 20px;
          background-color: #000000;
          border: none;
          border-radius: 5px;
          color: #fff;
          font-size: 16px;
          cursor: pointer;
          border: 1px solid #606060;
      }
      .b_btn:hover {
          background-color: #000000;
      }

/* Premium 按钮样式 */
.c_btn {
    padding: 8px 18px; /* 内边距 */
    font-size: 16px;  /* 文字大小 */
    color: #ffffff;   /* 字体颜色 */
    border: none;     /* 取消边框 */
    border-radius: 5px; /* 完全圆角 */
    cursor: pointer;      /* 鼠标悬停显示手指 */
    background: linear-gradient(90deg, #ff7a33, #a835ff, #0066ff); /* 渐层背景 */
    font-weight: 500;  /* 半粗体 */
    transition: opacity 0.2s ease; /* 动画 */
    width: 100%;
}

/* 悬停效果 */
.c_btn:hover {
    opacity: 0.85; /* 轻微变暗 */
}



   .button-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

   .option-button {
      padding: 10px 40px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
      font-size: 18px;
      margin: 0 10px;
      background-color: #f2f2f2;
      color: #555;
    }

   .option-button.selected {
      background-color: #0783ff;
      color: #ffffff;
      border: 1px solid #0783ff;
    }
    
    #getPriceAu{color:#ff9900;}
    #mybal{color:#ff6600;}
    #needtokennum{color:#ff6600;}