* { border: 0; box-sizing: border-box; margin: 0; padding: 0;font-family: "Play", sans-serif!important;color: var(--text); }
:root {
  --hue: 223; --sat: 10%; --hue2: 223; --sat2: 90%; --light2: 60%;
  --primary: hsl(var(--hue2),var(--sat2),var(--light2));
  --trans-dur: 0.3s;
  --trans-timing: ease-in-out;
  --trans-timing2: cubic-bezier(0.42,-1.84,0.42,1.84);
  --trans-timing3: cubic-bezier(0.42,0,0.42,1.84);
  font-size: 20px;
  --bg:#F5F7FB;
  --card:#FFFFFF;
  --text:#111827;
  --muted:#a1a7b2;
  --border:rgba(0,0,0,0.1);
  --input-bg:#F3F4F6;
  --primary:#ffffff;
  --err:#E24B4A;
  --ok:#18ae4f;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#0F1117;
    --card:#1A1D2E;
    --text:#E8ECF3;
    --muted:#acb5c9;
    --border:rgba(255,255,255,0.08);
    --input-bg:rgba(255,255,255,0.04);
  }
}

body, button { font: 1em/1.5 sans-serif; }

body {
  /* background like image */
background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 50%),
            radial-gradient(circle at 85% 75%, rgba(255,255,255,0.04), transparent 55%),
            linear-gradient(135deg, #0a0c10, #14161b, #0b0d11);
			    min-height: 100vh;
	background-color: #000;;


}

html, body, main {
  height: 100%;
}
.step p{    color: var(--text);
}
main{
  z-index: 2;
}
.vw{
  width:100%;
  max-width:600px;
  margin:0 auto;
  z-index:5;
  top:0;
  opacity: 0;

  position: fixed;
  right: 0;

  height: 100%;
  z-index: -1;

  /*backdrop-filter: blur(5px);*/

  transform: translateX(40%);
  opacity: 0;
  overflow: auto;
  padding-top: 25px;
    padding-bottom: 0;

}
.vw.active{
  transform: translateX(0px);
  opacity: 1;
  z-index: 2;
}







.vc {

  /*border: 1px solid var(--border);*/
  border-radius: 20px;
  padding: 32px;
  height: auto ;
  padding-top:0;
  padding-bottom:20px;
}

#protocols{
	margin:50px auto 0;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/images/c321.jpg');
  background-size: cover;        /* مهم‌ترین بخش */
  background-position: bottom;
  background-repeat: no-repeat;
  opacity: 0.5; /* اینو تنظیم کن */
  /*animation: fadePulse 10s ease-in-out infinite;*/

  pointer-events: none;
  z-index: -2;
}
/*
@keyframes fadePulse {
  0%   { opacity: 0.2; }
  50%  { opacity: 0.5; }
  100% { opacity: 0.2; }
}*/
main { display: block; width: 100%;height: auto; }
main>.top_menu{
	position: relative;
	margin:0 auto;
	top:30px;
padding:0;
}
#setting { color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer; }
#status {  font-size: 22px;margin-bottom:5px;font-weight:800;}
.status{
  text-shadow: 1px 6px 31px #000000;
  padding:10px 0;color: rgb(209, 211, 214);
}
.container { width: 100%; text-align: center; }

.country-name {
  font-weight: 600; margin-bottom: 12px; letter-spacing: 1px;
  opacity: 0.9;  font-size: 16px;
}
.protocol-name {
  font-weight: 600; margin-top: 12px; letter-spacing: 1px;
  opacity: 0.9;  font-size: 14px;
}

/* ── shared wrapper + fade overlay ── */
.wrapper { overflow-x: hidden; position: relative;
  -webkit-mask-image: 
    linear-gradient(to right, transparent, black 10%, black 90%, transparent),
    linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);

  mask-image: 
    linear-gradient(to right, transparent, black 10%, black 90%, transparent),
    linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);

  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}


/* ── location carousel ── */
#carousel-locations {
  display: flex;
  gap: 100%;               /* keeps flag spacing identical to original */
  overflow-x: scroll;
  padding: 8% calc(50vw - 17px);   /* mobile default; overridden below */
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow-y: visible;
}
#carousel-locations::-webkit-scrollbar { display: none; }

.item {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;

  border-radius: 50%;
  overflow: hidden;

  opacity: 0.9;
  transition: 0.35s ease;

  /* 🔥 همون بوردر تمیز و واضح */
  border: 2px solid white;

  /* فقط عمق ساده، بدون glass و blur */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* تصویر کاملاً خام و شفاف */
.item img {
	  filter: grayscale(80%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* active مثل قبل ولی تمیز */
.item.active {
  transform: scale(1.7);
  opacity: 1;

  border: 2px solid white;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.25);

  z-index: 10;
}
.item.active img{
	filter: grayscale(5%);
}
@media (max-width: 600px) {
  .item { width: 35px; height: 35px; }
  /*.tag  { font-size: calc(35px * 0.22); padding: calc(35px * 0.05) calc(35px * 0.1); }*/
  .country-name { font-size: 16px; }
  #carousel-locations { padding-left: calc(50vw - 17px); padding-right: calc(50vw - 17px); }
}
@media (min-width: 600px) {
  .item { width: 75px; height: 75px; }
  /*.tag  { font-size: calc(75px * 0.22); padding: calc(75px * 0.05) calc(75px * 0.1); }*/
  .item.active { box-shadow: 0 0 0 2px white; }
  #carousel-locations { padding-left: calc(50vw - 37px); padding-right: calc(50vw - 37px); }
}
@media (min-width: 1025px) {
  .item { width: 95px; height: 95px; }
  #carousel-locations { padding-left: calc(50vw - 47px); padding-right: calc(50vw - 47px); }
}
@media (min-width: 1441px) {
  .item { width: 120px; height: 120px; }
  #carousel-locations { padding-left: calc(50vw - 60px); padding-right: calc(50vw - 60px); }
}

/* ── protocol carousel ── */
#carousel-protocols {
  display: flex;
  gap: 20px;                /* fixed gap — NOT percentage */
  overflow-x: scroll;
  padding: 24px calc(50vw - 60px);   /* centres a 120px pill */
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
#carousel-protocols::-webkit-scrollbar { display: none; }

.proto-item {
  flex: 0 0 120px;
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  color: rgba(255,255,255,0.8);
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  opacity: 0.5;
  transform: scale(1);
  transition: 0.35s ease;
  cursor: pointer;
  white-space: nowrap;
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
/* glass effect */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
/*
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);*/
}
.protocols-name,.country-name {

  border-radius: 22px;
  color: rgba(255,255,255,0.8);
  font-size: 15px; font-weight: 600; letter-spacing: 0.5px;
 
  white-space: nowrap;
  fill: #ffffff;
  line-height:40px;
  height:40px;
  width:220px;
  display: block;
  margin:0 auto;
/* glass effect */
  background: rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
/*
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);*/
}
.country-name {
	background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.proto-item.active {
  opacity: 1;
  border-color: rgba(255,255,255,0.9);
  color: #fff;
  transform: scale(1.08);
}

/* ── power button (dark theme) ── */
.col { display: flex; flex: 1; padding: 1.5em 0; min-height: 13em; }

.btn {
  width: 10em;
  height: 10em;
  margin: auto;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  border: 1px solid rgba(255,255,255,0.1);

  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -8px 20px rgba(0,0,0,0.15);

  transition: all 0.35s ease;

  background:rgba(0,0,0,0.01);
  border:none;
}
.btn:before, .btn:after { border-radius: inherit; content: ""; display: block; position: absolute; }
.btn:before {
  background-image: linear-gradient(hsl(var(--hue),var(--sat),20%),hsl(var(--hue),var(--sat),10%));
  box-shadow: 0 0.75em 0.75em 0.25em hsla(var(--hue),0%,0%,0.4);
  top: 1.5em; left: 1.5em; width: 7em; height: 7em;
  transition: box-shadow var(--trans-dur) var(--trans-timing2), transform var(--trans-dur) var(--trans-timing2);
}
.btn:after {
  background-color: hsl(var(--hue),var(--sat),10%);
  background-image: linear-gradient(hsla(var(--hue),var(--sat),20%,0),hsl(var(--hue),var(--sat),20%));
  box-shadow:
    0 0.0625em 0 hsl(var(--hue),var(--sat),25%) inset,
    0 -0.0625em 0 hsl(var(--hue),var(--sat),25%) inset,
    0 0 0 0 hsla(var(--hue2),var(--sat2),var(--light2),0.1) inset;
  top: 3em; left: 3em; width: 4em; height: 4em;
  transition: background-color var(--trans-dur) var(--trans-timing),
              box-shadow var(--trans-dur) var(--trans-timing),
              transform var(--trans-dur) var(--trans-timing2);
}
.btn__icon {
  display: block; position: absolute;
  top: calc(50% - 0.75em); left: calc(50% - 0.75em);
  width: 1.5em; height: 1.5em;
  transition: filter var(--trans-dur) var(--trans-timing); z-index: 1;
}
.btn__icon g { stroke: hsl(var(--hue),var(--sat),5%); transition: stroke var(--trans-dur) var(--trans-timing); }
.btn__sr { overflow: hidden; position: absolute; width: 1px; height: 1px; }

.btn[aria-pressed="true"]:before,
.btn[aria-pressed="true"]:after,
.btn[aria-pressed="true"] .btn__icon { transform: scale(0.98); }
.btn[aria-pressed="true"]:before {
  /*box-shadow: 0 0.375em 0.375em 0 hsla(var(--hue),0%,0%,0.7);*/
  transition-timing-function: var(--trans-timing3);
}
.btn[aria-pressed="true"]:after {
  background-color: hsl(var(--hue),var(--sat),20%);
  box-shadow:
    0 0.0625em 0 hsla(192.12, 100%, 50%, 0.41) inset,
0 -0.0625em 0 hsla(196, 100%, 49%, 0.5) inset,
0 0 0.75em 0.25em hsla(201, 98%, 49%, 0.178) inset;
  transition-timing-function: var(--trans-timing), var(--trans-timing), var(--trans-timing3);

background-color: hsl(42.9, 4.99%, 14.76%);
box-shadow: 0 0.0625em 0 hsla(50.36, 60.05%, 86.23%, 0.41) inset,
0 -0.0625em 0 hsla(50.36, 11.04%, 62.34%, 0.5) inset,
0 0 0.75em 0.25em hsla(39.17, 2.83%, 34.52%, 0.18) inset;
}
/*.btn[aria-pressed="true"] .btn__icon { filter: drop-shadow(0 0 0.25em var(--primary)); }*/
.btn[aria-pressed="true"] .btn__icon g { stroke: hsl(190.26, 100%, 50%); stroke:hsl(50.36, 67.74%, 87.6%);}
body::before {
  content: "";
  position: fixed;

  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(900px, 100%);
  aspect-ratio: 1 / 2; 
  filter: blur(3px); 

  background-image: url('/images/map.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.2;
  z-index: 0;
  pointer-events: none;

}


.light_skew_btn {
  color: var(--btn-color);
  overflow: hidden;
font-size:13px;border:1px solid rgba(255, 255, 255, 0.3);border-radius:15px;padding:0 10px;line-height:30px;text-decoration: none;
position:absolute;right:22px;top:15px
}

.light_skew_btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -400%;
  width: 150%;
  height: 100%;

  /* گرادیانت طلایی حرفه‌ای */
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0) 0%,      /* محو شروع */
    rgba(255, 215, 0, 0.15) 20%,
    rgba(255, 215, 0, 0.6) 45%,   /* شروع طلایی */
    rgba(255, 223, 70, 0.95) 50%, /* هسته طلایی براق */
    rgba(255, 215, 0, 0.6) 55%,
    rgba(255, 215, 0, 0.15) 80%,
    rgba(255, 215, 0, 0) 100%     /* محو پایان */
  );

  transform: skew(-20deg);
  filter: blur(6px); /* نرم شدن لبه‌ها */
  opacity: 0.9;

  transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.light_skew_btn:hover::after {
  left: 150%;
}
/* حرکت هنگام هاور */
.light_skew_btn:hover::after {
  left: 150%;
}
.light_skew_btn::after {
  animation: lightMove 3.5s linear infinite;
}

@keyframes lightMove {
  0% {
    left: -150%;
  }

  /* حرکت تا اینجا (تقریباً 45٪ از زمان = 2.5s) */
  45% {
    left: 150%;
  }

  /* مکث (تا آخر انیمیشن هیچ تغییری نکنه) */
  100% {
    left: 150%;
  }
}









	.connection-status{
		position:absolute;bottom:5%;left:50%;transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;     /* وسط افقی */
  justify-content: center; /* وسط عمودی */
  width:90%;
	}
  .glass {
    width: 90%;
    max-width: 290px;
    padding: 20px 0px 30px;
    border-radius: 70px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: center;
	top: 100px!important;
  }

  .timer {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
	position: relative!important;
  }

  .stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
  }

  .stats span {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .arrow {
    font-size: 12px;
    opacity: 0.9;
  }



.connected {
  transform: translateY(-100px);
  opacity: 0;
    pointer-events: none;
	top:50px;
}

body.active .connected {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  
}
*{
    transition: transform 0.4s ease, opacity 0.4s ease;

}
.notConnected,.connected,.status{
	position: relative;
}

.notConnected {
	top:-70px;
}

body.active .notConnected {
  transform: translateY(50px);
  opacity: 0;
	pointer-events: none;
}
body.active .status{
  transform: translateY(-15px);
  opacity: 1;
}
.status{
	top:-30px;
	opacity:0;
}
#connected-location{
	font-size:18px;
		top:15px;
		  height:25px;
		  font-weight: 700;

}

#connected-location img{
	width:30px;height:auto;
	position: relative;
	top:3px;margin-right:5px;
  border-radius: 3px;
}

img.logo_cta{
	margin-left:3%;
	width:170px;height:auto
}.container.status{
display: flex; flex-direction: column; align-items: center; justify-content: center; position:relative;
}













/* =====================
   TOP BAR
===================== */
.topbar{
  height:60px;
  display:flex;
  align-items:center;
  padding:0 15px 0 20px;
  /*justify-content:space-between;*/
    top: 15px;
    position: relative;
}

/* =====================
   ICON
===================== */

.icon{
  width:22px;
  height:22px;
  color:white;
}
.topbar .icon{
    width: 45px;
    height: 45px;
    color: white;
}
/* =====================
   MENU BUTTON
===================== */
.menu-btn{
  cursor:pointer;
  padding:0;
  border-radius:10px;
  transition:0.2s;
  margin-top: 15px;

}

/* =====================
   OVERLAY
===================== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index: 1;
}
/*
main.modal::before {
  content: "";
  position: fixed;
  inset: 0;
  
backdrop-filter: blur(3px) ;

  background: rgba(0, 0, 0, 0.313); 
  
  z-index: -1;
}
*/
/* =====================
   SIDEBAR
===================== */
.sidebar{
  position: fixed;
  top: 0;
  left: 0;

  width: 280px;
  height: 100%;
  padding: 40px 0 0 40px;
  z-index: 2;

  /* backdrop-filter: blur(5px);*/
  transform: translateX(-100%);
  opacity: 0;


}
main.modal .notConnected,main.modal .connected,main.modal .connection-status,main.modal .topbar{
  opacity: 0.05;
}
.sidebar.active{
  transform: translateX(0);
  opacity: 1;
}

main.modal .overlay{
  opacity:1;
  pointer-events:auto;
  backdrop-filter: blur(3px);
  z-index: 2;
}

/* =====================
   USER
===================== */
.user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#4f8cff,#9b5cff);
}

/* =====================
   NAV
===================== */
nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  margin:6px 0;
  border-radius:12px;
  text-decoration:none;
  color:white;
  transition:0.2s;
}

nav a:hover{
  background:rgba(255,255,255,0.08);
  transform:translateX(5px);
}

nav a.danger{
  color:#ff4d4d;
}

/* hover icon color */
nav a:hover svg{
  color:#4f8cff;
}















.vlogo{text-align:center;margin-bottom:18px;}
.vlogo-icon{
  width:52px;height:22px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.vlogo h1{font-size:20px;font-weight:600;color:var(--text);}
.vlogo p{font-size:13px;color:var(--muted);}
.vlogo p.wellcome{margin-top:25px}

.vsocial{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.vsoc-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-size:14px;font-weight:500;
  font-family:'Inter',system-ui,sans-serif;
  cursor:pointer;transition:.15s;
}
.vsoc-btn:hover{background:var(--input-bg);}
.vsoc-btn svg{width:18px;height:18px;flex-shrink:0;}

.vdivider{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.vdivider-line{flex:1;height:1px;background:var(--border);}
.vdivider-txt{font-size:12px;color:var(--muted);}

.vfield{position:relative;margin-bottom:14px;}
.vfield input{
  width:100%;
  padding:20px 12px 13px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  font-size:17px;
  font-family:'Inter',system-ui,sans-serif;
  outline:none;transition:.2s;
}
.vfield input:focus{
  border-color:rgba(255, 255, 255, 0.3);
  box-shadow:0 0 0 3px rgba(78, 78, 78, 0.12);
  background:rgba(255, 255, 255, 0.1);
}
.vfield input.err{border-color:var(--err);}
.vfield input.ok{border-color:var(--ok);}
.vfield label{
  position:absolute;left:12px;top:50%;
  transform:translateY(-50%);
  font-size:14px;color:var(--muted);
  pointer-events:none;transition:.15s;
}
.vfield input:focus~label,
.vfield input.filled~label{
  top:3px;transform:none;
  font-size:11px;color:rgba(255, 255, 255, 1);
}
.vfield input.err~label{color:var(--err);}
.vfield .vtoggle{
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:var(--muted);padding:2px;font-size:18px;
}
.vfield .verr{font-size:11px;color:var(--err);margin-top:4px;display:none;}
.vfield .verr.show{display:block;}

.vstrength{margin-bottom:14px;display:none;}
.vstrength.show{display:block;}
.vstrength-bars{display:flex;gap:4px;margin-bottom:4px;}
.vstrength-bar{
  flex:1;height:3px;border-radius:2px;
  background:var(--border);transition:.3s;
}
.vstrength-bar.weak{background:#E24B4A;}
.vstrength-bar.med{background:#EF9F27;}
.vstrength-bar.strong{background:#639922;}
.vstrength-txt{font-size:11px;color:var(--muted);}
/*
.vsubmit{
  width:100%;padding:12px;
  border-radius:10px;border:none;
  background:var(--primary);color:#fff;
  font-size:14px;font-weight:600;
  font-family:'Inter',system-ui,sans-serif;
  cursor:pointer;transition:.15s;margin-bottom:14px;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);
}*/
.vsubmit{
    margin-top: 18px;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: .2s;
    margin-bottom:10px;
}
.vsubmit:hover{filter:brightness(1.08);transform:scale(1.005);}
.vsubmit:active{transform:scale(0.99);}

.vforgot{text-align:right;font-size:13px;margin-bottom:16px;}
.vforgot a{color:var(--primary);text-decoration:none;cursor:pointer;}
.vforgot a:hover{text-decoration:underline;}

.vswitch{text-align:center;font-size:13px;color:var(--muted);}
.vswitch a{color:#fff;text-decoration:none;cursor:pointer;font-weight:500;}
.vswitch a:hover{text-decoration:underline;}

.vback{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--primary);
  cursor:pointer;margin-bottom:24px;
  width:fit-content;transition:.15s;
}
.vback:hover{color:var(--text);}

.vreset-desc{
  font-size:13px;color:var(--muted);
  margin-bottom:20px;line-height:1.6;
}

.vsuccess{text-align:center;padding:8px 0;}
.vsuccess-icon{
  width:56px;height:56px;
  background:#EAF3DE;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;font-size:24px;
}
h2{font-size:20px;margin-bottom:14px}

.vsuccess h2{font-size:17px;font-weight:600;color:var(--text);margin-bottom:8px;}
.vsuccess p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:20px;}

.vfooter{
  margin-top:20px;text-align:center;
  font-size:11px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:5px;
}

.screen{display:none;}
.screen.active{display:block;animation:fadeUp .22s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:480px){
  body{padding:0;align-items:stretch;}
  .vc{border-radius:0;display:flex;flex-direction:column;justify-content:center;}
}


.steps.intro{
  text-align:center!important;
}
.steps.intro .step{
  margin:15px 5px;
  font-size:17px;
}



.notice{
    background: rgba(41, 42, 43, 1); /* باید نیمه شفاف باشه */

  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}







/* toggle */
.billing-toggle{
  display:flex;
  gap:8px;
  background:rgba(255,255,255,0.05);
  padding:6px;
  border-radius:14px;
  width:fit-content;
  margin-bottom:16px;
}

.billing-toggle button{
  border:none;
  background:transparent;
  color:#aaa;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  font-weight: 900;
  position:relative;
}

.billing-toggle button.active {
    background: #ffffff;
    color: #111827;
}

.badge{
  font-size:15px;
  background:#00a088;
  color:#ffffff;
  padding:2px 6px;
  letter-spacing: 1px;
  border-radius:6px;
  margin-left:6px;
  font-weight: 700;
}

/* cards */
.plan-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.plan-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:14px;
  transition:.2s;
  position:relative;
  margin:10px 0;
}
#planList .plan-card{
    cursor:pointer;
}
#planList .plan-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.15);
}
#planList .plan-card.active {
    border: 3px solid rgba(255, 255, 255, 1);
}
#planList .plan-card.active .price{
    transform: scale(1.2);
        right: 30px;
}
.plan-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.title{
  font-weight:700;
  font-size:15px;
}

.tag{
  font-size:13px;
  background:#ffffff;
  padding:3px 8px;
  border-radius:10px;
  color:#000;
}

.features{
  margin-top:10px;
  font-size:13px;
  color:#bbb;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.price {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 700;
}
.plan-card .price {
    position: absolute;
    right: 20px;
    bottom: 10px;
}

.period{
  font-size:12px;
  color:#888;
}








/* SHEET */
.sheet{
  border-radius:24px;
  padding:18px;
  animation:slideUp .4s ease;
}

@keyframes slideUp{
  from{transform:translateY(40px); opacity:0;}
  to{transform:translateY(0); opacity:1;}
}

/* HEADER */
.title{
  font-size:18px;
  font-weight:700;
}

.subtitle{
  font-size:12px;
  color:#aaa;
  margin-top:4px;
}

/* PRICE BOX */


.price{
  font-size:22px;
  font-weight:700;
}

.desc{
  font-size:12px;
  color:#888;
}

/* APPLE PAY BUTTON */
.apple-pay{
  margin-top:18px;
  width:100%;
  padding:14px;
  border-radius:14px;
  border:none;
  cursor:pointer;
  background:#000;
  color:#fff;
  font-size:16px;
  font-weight:600;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  transition:.2s;
}

.apple-pay:hover{
  transform:scale(1.02);
}

/* secondary info */
.secure{
  margin-top:12px;
  font-size:13px;
  color:#d2d2d2;
  text-align:center;
}









/* HEADER */
.header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:30px;
}
.leftHead{display:flex;align-items:center;gap:10px;}
.back{
  width:34px;height:34px;border-radius:10px;
  background:#7d7d7d2b;display:flex;align-items:center;
  justify-content:center;cursor:pointer;
}
.title{font-size:20px;font-weight:600}


.row{display:flex;justify-content:space-between;align-items:center;margin:10px 0;}
.plan-card .label{font-size:20px}
.sub{font-size:14px;color:var(--text)}

/* AVATAR */
.avatar{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#4da3ff,#4ade80);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}


/* REFERRAL */
.ref{
  padding:10px;border-radius:12px;
  background:var(--card2);
  font-size:12px;
  cursor:pointer;
}

/* PROGRESS */
.bar{
  height:8px;border-radius:10px;
  background:#56565629;overflow:hidden;
  margin-top:6px;
}

.fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ebf5ff,#89dca8);
  transition:1.2s ease;
}

/* DEVICES */
.device{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px;background:var(--card2);
  border-radius:12px;margin-top:8px;
  font-size:13px;
}



.box{
  width:90%;max-width:340px;
  background:var(--card);
  border-radius:16px;
  padding:14px;
}

/* FOOTER */
.footerBtn{
  padding:12px;border-radius:14px;
  text-align:center;margin-top:10px;
  cursor:pointer;
  border:1px solid var(--line);
}
.footerBtn.logout{background:rgba(255,255,255,0.03)}
.footerBtn.delete{background:rgba(255,77,77,0.08);color:var(--danger)}

#changePass {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.25s ease;
}

#changePass.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ردیف دکمه‌ها */
.btnRow {
  display: flex;
  gap: 10px;
}

/* دکمه‌ها */
.btnRow .vsubmit {
  flex: 1;
  margin-top:0;

}

/* کنسل کوچکتر */
.cancelBtn {
  flex: 0.6;
  background: transparent;
  border: 1px solid #666;
  opacity: 0.8;
}

/* هاور نرم */
.cancelBtn:hover {
  opacity: 1;
}