@font-face{font-family:IRANSansXV;src:url(../fonts/IRANSansXV.woff2)}
.wrap{ width:760px; max-width:96%; display:flex;flex-direction:column;align-items:center;gap:18px; }

  /* کارت دعوت - مشابه ویدیو */
  .card{
    width:460px; max-width:100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border-radius:12px;
    padding:18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
    border:1px solid rgba(255,255,255,0.04);
    position:relative;
  }
  .badge{
    position:absolute; left:18px; top:-30px; transform:rotate(-12deg);
    width:136px; height:56px; display:flex; align-items:center; justify-content:center;
    color:white; font-weight:700; font-size:13px; border-radius:8px;
    padding:10px; text-transform:uppercase;animation: floatY 4.8s ease-in-out infinite; 
  }
  .card h3{ margin:0 0 0px 0; font-size:18px; font-weight:700; }
  .card .sub{ color: rgba(233,246,255,0.78); font-size:13px; margin-bottom:12px; }

  .link-row{ display:flex; gap:10px; align-items:center; }
.link-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 1px;
    border-radius: 8px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    direction:ltr;
}
.link-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #cfeeff;
    font-size: 14px;
    width: 100%;
    text-align: left;
}
  .btn{
  position: relative;
  margin: 18px auto 8px auto;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #3fbaff, #0074d9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.25s ease;
  }

  /* NAV wrapper مطابق ویدیو */
  .nav-wrap{ width:460px;     
  max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    position: fixed;
    z-index: 99999999999999; }
.nav {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px;
    background: linear-gradient(180deg, #42a6ff, #1c78d6);
    position: relative;
    box-shadow: 0 8px 24px rgba(2, 12, 24, 0.45);
    overflow: visible;
    height: calc(var(--icon-size) + 5px);
    border-radius: 5px;
    justify-content: center;
    z-index: 999;
    margin-bottom: 40px;
top: -60px;
}

  /* indicator درون nav-list و قبل از آیکون‌ها قرار دارد، z-index:0 => زیر آیکون‌ها */
  .nav-list{ position:relative; display:flex; gap:var(--nav-gap); align-items:center; z-index:2; padding:0 18px; }
  .indicator{
    position:absolute; top:50%; left:0; width:var(--indicator-size); height:var(--indicator-size);
    transform: translate3d(0, -50%, 0);
    pointer-events:none;
    background-image: url('../img/scroll-indicator.svg');
    background-repeat:no-repeat; background-position:center; background-size:contain;
    z-index:1; /* پایین تر از آیتم‌ها (آیتم‌ها z-index:2) */
    transition: transform 280ms cubic-bezier(.2,.9,.2,1);
    will-change: transform;
    filter: drop-shadow(0 8px 18px rgba(10,130,220,0.25));
  }

  .nav-item{ width:var(--icon-size); height:var(--icon-size); border-radius:9px; background:none; display:flex;
             align-items:center;justify-content:center; cursor:pointer; z-index:2; border:none; padding:6px;
             box-shadow: 0 6px 18px rgba(7,18,32,0.12); transition: transform 260ms ease, box-shadow 260ms ease; }
  .nav-item img{ width:28px; height:28px; object-fit:cover; border-radius:5px; display:block; }

  .nav-item.active{ transform: translateY(-8px); box-shadow: 0 18px 36px rgba(8,120,220,0.18); }

  /* دسترسی و نمایش کوچک توضیح */
  .note{ font-size:13px; color: rgba(233,246,255,0.6); text-align:center; margin-top:6px; }

  @media (max-width:520px){
    :root{ --indicator-size:58px; --icon-size:40px; }
    .card, .nav-wrap{ width:100%;        margin-bottom: 20px;}
  }
  
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.35) 100%, rgba(255, 255, 255, 0.08) 100%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0.35;
    border-radius: inherit;
    pointer-events: none;
    width: 97%;
    right: 2%;
    height: 38px;
    top: 3px;
}

.btn::after {
  content: "";
  position: absolute;
  top: 7px;         
  right: 10px;       
  width: 10px;        
  height: 10px;
  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'><path d='M.202 1.369C.995-.504 4.795-.405 6.547 1.358s2.115 5.318 0 6.393c-1.63.829-3.472-.569-4.759-1.873C.604 4.679-.456 2.924.202 1.369'/></svg>")
              center / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}



/**/

.zx {
    position: relative;
    margin: 18px auto 8px auto;
    display: inline-block;
    padding: 10px 10px;
    border: none;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(180deg, #004080, #0074d9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s 
ease;
    width: 130px;
    display: grid
;
    justify-content: center;
    align-items: center;
    justify-items: center;
    margin: 5px;
    text-align: center;
}
.zx::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.35) 100%, rgba(255, 255, 255, 0.08) 100%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0.35;
    border-radius: inherit;
    pointer-events: none;
    width: 97%;
    right: 2%;
    top: 3px;
}

.zx::after {
  content: "";
  position: absolute;
  top: 7px;         
  right: 10px;       
  width: 10px;        
  height: 10px;
  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'><path d='M.202 1.369C.995-.504 4.795-.405 6.547 1.358s2.115 5.318 0 6.393c-1.63.829-3.472-.569-4.759-1.873C.604 4.679-.456 2.924.202 1.369'/></svg>")
              center / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.zx img{
width:60px;
}
.zx span{
    font-size:11px;
}
.soc{
    display:flex;
justify-content: center;
}
:root {
  --start-color: #ffd94f;
  --stop-color: #ff9b00;
  --border-color: #ffecb3;
}

.mission-title {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  height: 42px;
  line-height: 42px;
  border-radius: 0;
  overflow: hidden;
  margin: 15px auto;
  user-select: none;
  direction: ltr;
  width: 100%;
}

.mission-title .arrow {
  width: 28px;
  height: 42px;
  flex-shrink: 0;
  display: block;
}

.mission-title .headline {
    display: flex
;
    height: max-content;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    margin-top: -2px;
    font-family: 'IRANSansXV', sans-serif;
    font-weight: 800;
    font-size: 23px;
    color: #fff;
    background: linear-gradient(180deg, var(--start-color) 0%, var(--stop-color) 100%);
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    width: 230px;
}

.mission-title svg path {
  shape-rendering: geometricPrecision;
}

@media (max-width: 600px) {
  .mission-title {
    height: 34px;
    line-height: 34px;
    margin-bottom:70px;
  }
  .mission-title .arrow {
    width: 22px;
    height: 34px;
  }
  .mission-title .headline {
    padding: 0 24px;
    font-size: 20px;
            height: max-content;
        margin-top: -2px;
  }
}

.misn-logo{
        display: flex;
    justify-content: center;
animation: floatY 5.8s ease-in-out infinite;
}
.misn-logo img {
        width: 70px;
    position: relative;
    margin-top: -17px;
    margin-bottom: -21px;
}

    @keyframes floatY {
      0%{ transform: translateY(0) rotate(-4deg) }
      50%{ transform: translateY(-12px) rotate(6deg) }
      100%{ transform: translateY(0) rotate(-4deg) }
    }
    .float{ animation: floatY 4.8s ease-in-out infinite; }


 .notify {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #9ef06b 0%, #3ae448 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 14px;
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 99999999999999999999999999;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    justify-content: space-between;
    display: flex;

    /* کارتونی با سایه نرم و کمی بلند */
    box-shadow: 0 8px 18px rgba(58, 228, 72, 0.45), 0 0 12px rgba(255,255,255,0.2) inset;
}

  .notify.show {
    top: 60px;       /* از بالا بیاد پایین */
    opacity: 1;
  }
  #copyBtn{
     display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: none;
    color: white;
    font-weight: 600;
    cursor: pointer;
    background:none;
  }
  .copyByn:hover{
          background:none;
  }
  
  
  
.bg-bl{
    background:linear-gradient(180deg, #4cafff 0%, #2f6998 100%) !important;
} 

.bg-gr{
        background:linear-gradient(180deg, #8aef93 0%, #248a2c 100%) !important;

}

.tik {
    width: min-content;
    height: 26px;
    padding: 0px;
    position: absolute;
    z-index: 999;
    border-radius: 5px;
    margin-top: 16px;
    margin-right: 0px;
}

 
.withdraw-btn {
background:linear-gradient(180deg, #8aef93 0%, #248a2c 100%) !important;
}


.withdraw-btn::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url(../img/icons.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 -1007px;
    opacity: 1;
}
.show-filter-1{
    margin-top:45px;
}
.txtd{
    position: absolute;
    color: gray;
    top: 79px;
    font-size: 12px;
    right: 27px;
    font-weight: 700;
}

.kl{
    position: relative;
    width: 15px;
    top: 3px;
}

h3 span{
    color:#fb0;
}

@media (min-width:796px){
    .nav-wrap{
        display:none;
    }
    .wrap {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 18px;
        justify-items: center;
        align-items: baseline;
        justify-content: center;
		margin-top: -80px;
    }
	.notify
}