/* Glassmorphism black & white theme */
@keyframes fadeIn{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
@keyframes float{0%{transform:translateY(0);}50%{transform:translateY(-6px);}100%{transform:translateY(0);}}

/* Persian text font support */
.persian-text, 
.subtitle-fa, 
.glass-note,
[lang="fa"],
.fa-text {
  font-family: 'Vazirmatn', 'Poppins', sans-serif !important;
  direction: rtl;
  unicode-bidi: plaintext;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  backdrop-filter: blur(10px);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-corner {
  background: rgba(255, 255, 255, 0.05);
}
/* Global styles with custom scrollbar */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:'Poppins', sans-serif;
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
body {
  background: #0a0a0a;
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 84px; /* keep content visible above fixed pagination */
}
/* prevent horizontal overflow on some browsers */
html, body { height: 100%; overflow-x: hidden; }
header {
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
header .actions{
  margin-top: .75rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
/* Responsive header buttons on mobile */
@media (max-width: 640px){
  header .actions{
    flex-direction: column;
    gap: .4rem;
  }
}
/* Brand block for logo + name */
.brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .55rem .8rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
}
.brand-logo{
  width: 36px;
  height: 36px;
  display: inline-block;
}
.brand-name{
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
main {
  width: 100%;
  max-width: 1200px;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 1;
  margin-top: 1rem;
}
/* Add extra spacing on mobile when tabs are vertical */
@media (max-width: 520px){
  main {
    margin-top: 0;
    padding-top: 3rem;
    clear: both;
  }
}
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: transform .2s ease, box-shadow .2s ease; /* smoother hover */
}
.glass-card h2{font-size:1.25rem;letter-spacing:0.5px;text-transform:uppercase;margin-top:0.25rem;}
.glass-card .subtitle-fa{
  font-size:0.95rem;
  color:rgba(255,255,255,0.75);
  margin-top:0.25rem;
  direction: rtl;
  unicode-bidi: plaintext;
  font-family:'Vazirmatn','Poppins',sans-serif !important;
  font-weight:600;
}
/* Better wrapping for long country names/subtitles */
.glass-card h2,
.glass-card .subtitle-fa{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.counters{display:grid; grid-template-columns: repeat(3, 1fr); margin:1rem 0; gap:.4rem; align-items:stretch;}
.count{
  min-width: 0;
  padding:.45rem .5rem;
  border-radius:12px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.18);
  text-align:center;
}
.count .num{ font-size:1.05rem; font-weight:800; letter-spacing:.3px; }
.count .lbl-en{ font-size:.68rem; opacity:.95; margin-top:.14rem; letter-spacing:.2px; }
.count.total{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.26);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.22);
}
.count.free{
  background: rgba(0,255,128,0.12);
  border-color: rgba(0,255,128,0.28);
}
.count.busy{
  background: rgba(255,0,64,0.12);
  border-color: rgba(255,0,64,0.28);
}

/* subtle hover to enhance glass look */
.count:hover{ box-shadow: 0 6px 18px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.24); }
.get-btn{margin-top:0.5rem;padding:0.5rem 1rem;border:none;border-radius:10px;background:#fff;color:#000;font-weight:bold;cursor:pointer;}
.get-btn:hover{opacity:0.85;}
.glass-card img.flag-img{
  width: 96px;     /* original width */
  height: auto;    /* keep natural aspect ratio */
  object-fit: contain; 
  border-radius: 6px;
  margin-bottom: .5rem;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}

/* Page/card entrance animations */
#cards{ transition: opacity .18s ease, transform .18s ease; will-change: opacity, transform; }
#cards.fade-out{ opacity: 0; transform: translateY(8px); }
#cards.fade-in{ animation: cardsFadeIn .26s ease; }
@keyframes cardsFadeIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: none;} }

#cards .glass-card{ opacity: 0; animation: cardIn .38s ease forwards; }
@keyframes cardIn{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform: none;} }
/* Stagger first rows for a lively grid appearance */
#cards .glass-card:nth-child(1){ animation-delay: .02s; }
#cards .glass-card:nth-child(2){ animation-delay: .04s; }
#cards .glass-card:nth-child(3){ animation-delay: .06s; }
#cards .glass-card:nth-child(4){ animation-delay: .08s; }
#cards .glass-card:nth-child(5){ animation-delay: .10s; }
#cards .glass-card:nth-child(6){ animation-delay: .12s; }
#cards .glass-card:nth-child(7){ animation-delay: .14s; }
#cards .glass-card:nth-child(8){ animation-delay: .16s; }
#cards .glass-card:nth-child(9){ animation-delay: .18s; }
#cards .glass-card:nth-child(10){ animation-delay: .20s; }
#cards .glass-card:nth-child(11){ animation-delay: .22s; }
#cards .glass-card:nth-child(12){ animation-delay: .24s; }
#cards .glass-card:nth-child(13){ animation-delay: .26s; }
#cards .glass-card:nth-child(14){ animation-delay: .28s; }

.glass-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,0.42); }

/* Account panel styling */
#account.account-panel{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  position: relative;
  z-index: 3;
  max-height: 90vh;          /* constrain height to viewport */
  overflow: auto;            /* allow scrolling inside modal */
}
#account .modal-close{
  position: absolute;
  top: .5rem;
  inset-inline-end: .5rem; /* RTL-friendly */
  background: transparent;
  border: none;
  color: #ff3b30; /* red close icon */
  font-size: 1.25rem;
  cursor: pointer;
  padding: .25rem .4rem;
  line-height: 1;
  opacity: .8;
}
#account .modal-close:hover{ opacity: 1; }
#account h2{
  font-size: 1.1rem;
  letter-spacing: .5px;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
#account .status-line{
  font-size: .9rem;
  margin-bottom: .75rem;
  color: #ffd27a;
}
#account .row{
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .35rem 0;
}
#account input[type="number"],
#account input[type="text"]{
  flex: 1;
  min-width: 0;
}
#account button{
  white-space: nowrap;
}
#account small{
  display: block;
  margin-top: .5rem;
  opacity: .85;
  line-height: 1.6;
  direction: ltr;
  unicode-bidi: plaintext;
  font-family:'Poppins',sans-serif;
}
#u_logged{
  justify-content: space-between;
}
#u_logged span{
  padding: .35rem .6rem;
  border-radius: 8px;
  background: rgba(0,255,128,0.15);
  border: 1px solid rgba(0,255,128,0.35);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 600px){
  #account .row{ flex-direction: column; align-items: stretch; }
  #account button{ width: 100%; }
  .counters{ gap: .35rem; }
  .count{ padding:.4rem .45rem; }
  .count .num{ font-size:.95rem; }
  .count .lbl-en{ font-size:.62rem; }
}
/* Mobile card adjustments */
@media (max-width: 520px){
  .glass-card{ padding: 1rem; }
  .glass-card h2{ font-size: 1.1rem; }
  .get-btn{ width: 100%; }
}
@media (max-width: 360px){
  .count{ padding:.35rem .4rem; }
  .count .num{ font-size:.9rem; }
  .count .lbl-en{ font-size:.58rem; }
}

/* Modal & overlay */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200; /* above tabs/mobile menu */
  display: none;
}
.modal-container{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  z-index: 201; /* above tabs/mobile menu */
  overflow: auto;            /* allow page to scroll when content taller than viewport */
}
.modal-container.active,
.modal-overlay.active{ display: flex; }

/* Error modal (glassy) */
.alert-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200; /* above tabs/mobile menu */
  display: none;
}
.alert-container{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 201; /* above tabs/mobile menu */
}
.alert-container.active,
.alert-overlay.active{ display: flex; }
.alert-card{
  width: 100%;
  max-width: 460px;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  color: #fff;
}
.alert-card .hdr{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom: .5rem;
}
.alert-card .hdr .ttl{ font-weight:700; letter-spacing:.4px; }
.alert-card .hdr .btn-close{
  background: transparent;
  color: #ff3b30; /* red close icon */
  border: 1px solid rgba(255,0,64,0.35);
  padding: .25rem .55rem;
}
.alert-card .msg{ opacity:.95; line-height:1.6; white-space:pre-wrap; }
.alert-card .actions{ display:flex; justify-content:flex-end; margin-top:.8rem; gap: .5rem; }
.alert-card .btn-close{
  padding: .5rem .9rem; border-radius: 10px; background:#fff; color:#000; border:none; font-weight:700; cursor:pointer;
}

/* Confirm modal specific buttons */
#confirmYes{
  background: #22c55e; /* green */
  color: #fff;
}
#confirmYes:hover{ filter: brightness(1.05); }
#confirmNo{
  background: #2f2f33; /* dark gray */
  color: #fff;
}
#confirmNo:hover{ filter: brightness(1.05); }

/* CTA buttons */
.primary-btn{
  padding: .6rem 1rem;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  white-space: nowrap;
}
.primary-btn:hover{ filter: brightness(1.05); }
/* Accent variant for Create Account/Dashboard button */
.accent-btn{
  background: #7fd1ff;
  color: #000;
}
.accent-btn:hover{ filter: brightness(1.05); }
/* Dedicated style for Buy USDT button */
.usdt-btn{
  background: #22c55e;
  color: #000;
}
.usdt-btn:hover{ filter: brightness(1.06); }
/* Header buttons - consistent sizing and font */
header .actions .primary-btn,
header .actions .admin-btn{
  min-width: 140px;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
@media (max-width: 640px){
  header .actions .primary-btn,
  header .actions .admin-btn{
    min-width: 200px;
    width: 100%;
    max-width: 280px;
    font-size: 0.85rem;
  }
}
.danger-btn{
  padding: .5rem .9rem;
  border-radius: 10px;
  background: #ff3b30;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.danger-btn:hover{ filter: brightness(1.05); }
.tg-btn{
  padding: .6rem 1rem;
  border-radius: 10px;
  background: #2AABEE;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.tg-btn:hover{ filter: brightness(1.05); }
/* Tabs under header */
.tabs{
  width: 100%;
  max-width: 1200px;
  display: flex;
  gap: .5rem;
  justify-content: center;
  position: relative;        /* ensure stacking context */
  z-index: 20;               /* keep tabs above cards/animations */
  /* Make tabs responsive on small screens */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: .25rem .5rem; /* breathing room for scroll */
  min-height: 48px;         /* prevent collapse on some mobile browsers */
  align-items: center;      /* keep buttons vertically centered */
  margin-bottom: 1rem;      /* space between tabs and content */
}
.tab{
  padding: .55rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  flex: 0 0 auto;              /* prevent shrinking in scroll row */
  scroll-snap-align: start;    /* snap each tab nicely */
  white-space: nowrap;         /* prevent text wrapping */
  min-width: fit-content;      /* ensure minimum width for content */
}
/* Tab visibility handled in main responsive section above */
.tab.active{
  background: #fff;
  color: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.28);
}
/* hover + focus styles for unified look */
.tab:hover{ filter: brightness(1.05); box-shadow: 0 6px 18px rgba(0,0,0,0.26); }
.tab:active{ transform: translateY(1px); }
.tab:focus-visible{ outline: 2px solid #7fd1ff; outline-offset: 2px; }
/* Underline-style tabs variant: enable by adding class "underline" to the .tabs container */
.tabs.underline{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  gap: 1.1rem;
  padding-bottom: .25rem;
}
.tabs.underline .tab{
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  border-radius: 0;
  position: relative;
  padding: .4rem 0.2rem .55rem;
}
.tabs.underline .tab::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.tabs.underline .tab:hover::after{ transform: scaleX(.55); }
.tabs.underline .tab.active{
  color: #fff;
}
.tabs.underline .tab.active::after{
  transform: scaleX(1);
}
/* Hide scrollbars where possible for cleaner look */
.tabs::-webkit-scrollbar{ display: none; }
.tabs{ scrollbar-width: none; }
/* Pagination */
.pagination{
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  z-index: 9;
}
.pagination .page-btn{
  padding: .45rem .8rem;
  border-radius: 10px;
  background: #fff;
  color: #000;
  border: none;
  font-weight: 700;
}
.pagination .page-btn[disabled]{ opacity:.5; cursor: not-allowed; }
.pagination .page-info{ opacity:.95; font-size:.95rem; }
@media (max-width: 420px){
  .pagination{ gap:.45rem; padding:.45rem .6rem; }
  .pagination .page-btn{ padding:.42rem .7rem; }
  .pagination .page-info{ font-size:.9rem; }
}
/* Desktop: Show horizontal tabs */
@media (min-width: 1025px){
  .mobile-menu-toggle {
    display: none;
  }
  .tabs .tab-list {
    display: flex;
    gap: .5rem;
    width: 100%;
    justify-content: center;
  }
  .tabs{
    padding: .25rem .5rem;
    position: relative;
    background: transparent;
    backdrop-filter: none;
  }
}
/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  width: 100%;
  padding: .8rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  font-family: 'Vazirmatn', 'Poppins', sans-serif;
  direction: rtl;
}
.mobile-menu-toggle:hover {
  background: rgba(255,255,255,0.12);
}
.mobile-menu-icon {
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mobile-menu-icon span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: all 0.3s ease;
}
.mobile-menu-toggle.active .mobile-menu-icon span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle.active .mobile-menu-icon span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.active .mobile-menu-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile menu modal */
.mobile-menu-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  padding-top: 5rem;
}
.mobile-menu-modal.active {
  display: flex;
}
.mobile-menu-content {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  padding: 1.5rem;
  width: 100%;
  max-width: 400px;
  max-height: 70vh;
  overflow-y: auto;
  position: relative;
  z-index: 110;
}
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu-title {
  font-family: 'Vazirmatn', 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  direction: rtl;
}
.mobile-menu-close {
  background: transparent;
  border: none;
  color: #ff3b30;
  font-size: 1.5rem;
  cursor: pointer;
  padding: .25rem;
  line-height: 1;
}

@media (max-width: 1024px){
  .mobile-menu-toggle {
    display: flex;
  }
  .tabs{
    position: sticky;
    top: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    z-index: 30;
    margin-bottom: 1rem;
    padding: .5rem;
  }
  .tabs .tab-list {
    display: none;
  }
  .mobile-menu-modal .tab{
    width: 100%;
    min-height: 52px;
    padding: .8rem 1rem;
    font-size: .9rem;
    justify-content: flex-start;
    text-align: right;
    flex: none;
    margin-bottom: .5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: .6rem;
    direction: rtl;
  }
  .mobile-menu-modal .tab img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px;
    flex-shrink: 0;
  }
  .mobile-menu-modal .tab:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(-4px);
  }
  .mobile-menu-modal .tab.active {
    background: #fff;
    color: #000;
  }
  .mobile-menu-modal .tab.active img {
    background: rgba(0, 0, 0, 0.1);
  }
}
form {
  max-width: 720px;
  width: 100%;
  margin: 2rem auto 3rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0.5rem;
}
/* admin form helpers */
.lbl{ font-size:.9rem; opacity:.9; margin:.25rem 0 .35rem .2rem; display:block; }
.muted{ font-size:12px; opacity:.8; margin:6px 0 10px 0; }
.row{ display:flex; gap:.6rem; align-items:center; }
.row.end{ justify-content:flex-end; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-col{ display:flex; flex-direction:column; gap:.65rem; }
@media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }
input, select, textarea, button {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: none;
  outline: none;
}
input, select, textarea {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* multiline editor improvements only for textarea */
textarea{
  min-height: 220px;           /* easier multi-line editing */
  resize: vertical;            /* allow vertical resize */
  line-height: 1.35;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13.5px;
  direction: ltr;              /* IPs/endpoints read LTR */
  unicode-bidi: plaintext;
  white-space: pre;            /* keep alignment */
}
select { width: 100%; }
button {
  background: #fff;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}
button:hover {
  opacity: 0.8;
}

/* admin button style - now consistent with primary buttons */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0.6rem 1rem;
  background: #f6c454;
  color: #000;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin: 0;
}
.admin-btn:hover {
  filter: brightness(1.05);
}

/* small inline icon container in buttons */
.btn-ico{ display:inline-flex; align-items:center; justify-content:center; }
.btn-ico svg{ display:block; }

/* tab icons */
.tabs .tab{ display:inline-flex; align-items:center; gap:.45rem; }
.tabs .tab img{ width:22px; height:22px; display:block; border-radius:50%; background: rgba(255,255,255,0.9); padding:2px; }
/* Responsive tab icons for mobile/tablet */
@media (max-width: 1024px){
  .tabs .tab img{ width:18px; height:18px; }
  .tabs .tab{ gap:.4rem; }
}

/* underline variant refinements */
.tabs.underline .tab{ box-shadow: none; }
.tabs.underline .tab:hover{ color: #fff; }
.tabs.underline .tab:focus-visible{ color:#fff; }
.tabs.underline .tab:focus-visible::after{ transform: scaleX(1); }

/* Accessibility: reduce heavy motion if user prefers */
@media (prefers-reduced-motion: reduce){
  #cards{ transition: none; }
  #cards.fade-in{ animation: none; }
  #cards .glass-card{ animation: none; opacity: 1; }
  .tab{ transition: background .01s linear, color .01s linear, box-shadow .01s linear; }
}

/* background particle canvas */

#bg-net{
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block; /* avoid inline gaps */
  pointer-events: none; /* clicks pass through */
}

/* Dashboard history and geolocation */
.hist-row{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
.hist-top{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.hist-header{ font-weight:700; letter-spacing:.2px; }

/* Country group styling */
.country-group{
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.country-header{
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.country-header img{
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
}
.country-header .muted{
  font-weight: 400;
  font-size: 0.9rem;
}

.hist-geo-list{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:.6rem;
}
.hist-geo-card{
  padding:.6rem .7rem; 
  border:1px solid rgba(255,255,255,0.16); 
  border-radius:10px; 
  background: rgba(255,255,255,0.06);
  transition: all 0.2s ease;
}
.hist-geo-card:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.hist-geo-card .geo-ip{ 
  font-weight:700; 
  font-size:.95rem; 
  color: #7fd1ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.hist-geo-card .geo-meta{ 
  font-size:.82rem; 
  opacity:.9; 
  margin-top:.3rem; 
  line-height: 1.4;
}

/* Mobile responsive adjustments */
@media (max-width: 640px){
  .country-header{
    font-size: 1rem;
    gap: 0.5rem !important;
  }
  .country-header img{
    width: 28px !important;
    height: 18px !important;
  }
  .hist-geo-list{
    grid-template-columns: 1fr;
  }
  .country-group{
    padding: 0.75rem;
  }
}

/* Admin container center glass */
.admin-container{
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  margin-bottom: 2rem;
}

/* User balance emphasis */
#u_balance_row{
  justify-content: flex-start;
}
#u_balance_row .muted{
  font-size: 14px;               /* slightly larger than default muted (12px) */
  font-weight: 800;
  letter-spacing: .2px;
  color: #ffd27a;                 /* warm accent to draw attention */
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
#u_balance_value{
  font-size: 1.15rem;            /* modest bump for visibility */
  font-weight: 900;
  color: #fff;
  padding: .2rem .5rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Small glassy card for inline Persian notes (keeps original font-size) */
.glass-note{
  padding: .6rem .75rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  direction: rtl;
  unicode-bidi: plaintext;
  font-family:'Vazirmatn','Poppins',sans-serif !important; /* Vazirmatn for Persian */
  line-height: 1.9;
}

/* DNS tunnel server list inside address modal */
.dns-tunnel-list{ margin-top: .75rem; }
.dns-tunnel-list .dns-title{
  font-weight: 900;
  margin-bottom: .15rem;
  letter-spacing: .2px;
}
  .dns-tunnel-list .dns-items{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .5rem; /* better spacing between cards */
  }
  .dns-tunnel-list .dns-item{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: .75rem 1rem; /* more comfortable padding */
  display: flex;               /* place name and chips in a row */
  align-items: center;         /* vertical centering */
  justify-content: space-between; /* name right, chips left */
  gap: .75rem;                 /* better spacing */
  min-height: 52px;            /* taller for better appearance */
  direction: rtl;              /* keep Persian title on the right */
  transition: all 0.2s ease;  /* smooth hover effects */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .dns-tunnel-list .dns-item:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .dns-tunnel-list .dns-name{
  font-weight: 800;
  margin: 0;                   /* no extra vertical space */
  font-size: 1rem;             /* larger, more readable title */
  }
  .dns-tunnel-list .dns-ips{ 
  display: flex; 
  flex-wrap: wrap; 
  gap: .35rem;                 /* better spacing between chips */
  }
  .dns-tunnel-list .dns-ips code{
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: .25rem .5rem;       /* more comfortable chip size */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .8rem;            /* larger, more readable text */
  line-height: 1.2;            /* better line height */
  color: #fff;
  font-weight: 600;
  transition: all 0.2s ease;
  }
  .dns-tunnel-list .dns-ips code:hover{
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.05);
  }
@media (max-width: 520px){
  .dns-tunnel-list .dns-items{ 
    grid-template-columns: 1fr; 
  }
  /* Stack name above chips on small screens for readability */
  .dns-tunnel-list .dns-item{ 
    flex-direction: column; 
    align-items: flex-start; 
    gap: .5rem; 
    min-height: auto;
    padding: .75rem;
  }
  .dns-tunnel-list .dns-name{
    font-size: 1.1rem; /* slightly larger on mobile */
  }
}

  /* Apply Vazirmatn to all Persian content */
  button:lang(fa), span:lang(fa), div:lang(fa),
  .alert-card .ttl, .alert-card .msg,
  .hist-header, .brand-name:lang(fa) {
    font-family:'Vazirmatn','Poppins',sans-serif !important;
  }

/* Admin: country dropdown dark theme */
#countrySelect {
  background: #000;           /* پس‌زمینه خود فیلد select */
  color: #fff;                /* متن سفید */
}

/* رنگ لیست گزینه‌ها هنگام باز شدن */
 #countrySelect option {
  background: #000;
  color: #fff;
 }

/* APN Country Select Optimization */
#apnCountry {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Vazirmatn', 'Poppins', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  min-width: 280px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#apnCountry:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#apnCountry:focus {
  outline: none;
  border-color: #7fd1ff;
  box-shadow: 0 0 0 3px rgba(127, 209, 255, 0.2);
}

/* APN Country Select Options */
#apnCountry option {
  background: rgba(0, 0, 0, 0.95) !important;
  color: #fff !important;
  font-family: 'Vazirmatn', 'Poppins', sans-serif !important;
  font-size: 1rem !important;
  padding: 0.5rem 1rem !important;
  border: none !important;
}

#apnCountry option:hover {
  background: rgba(127, 209, 255, 0.2) !important;
}

#apnCountry option:checked {
  background: rgba(127, 209, 255, 0.3) !important;
}

/* APN Country Select Placeholder */
#apnCountry option[value=""] {
  color: rgba(255, 255, 255, 0.6) !important;
  font-style: italic;
}

/* APN Mobile Responsiveness */
@media (max-width: 768px) {
  #apnCountry {
    min-width: 260px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  #apnCountry {
    min-width: 240px !important;
    font-size: 0.85rem !important;
    padding: 0.65rem 0.8rem !important;
  }
}

/* APN Select Wrapper Styling */
.apn-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.apn-select-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
}

.apn-select-wrapper svg {
  transition: color 0.3s ease;
}

.apn-select-wrapper:hover svg {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Address modal: responsive long list handling + sticky actions (Copy button) */
#addrContainer .alert-card{
  max-height: 82vh;              /* keep the card within viewport */
  display: flex;                 /* allow header, content, actions layout */
  flex-direction: column;
}
#addrContainer .alert-card .msg{
  flex: 1;                       /* take remaining height */
  overflow: auto;                /* scroll only the content */
  padding-right: .25rem;         /* breathing room for scrollbar */
}
#addrContainer .alert-card .msg pre{
  white-space: pre-wrap;         /* wrap long lines */
  word-break: break-word;        /* break overly long tokens */
  font-size: 1rem;               /* more prominent */
  line-height: 1.55;             /* better readability */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(127, 209, 255, 0.35); /* subtle sky accent */
  border-radius: 12px;
  padding: .75rem .9rem;         /* highlight box spacing */
  box-shadow: 0 8px 26px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* nicer selection color inside the address block */
#addrContainer .alert-card .msg pre::selection{
  background: rgba(127, 209, 255, 0.25);
}
#addrContainer .alert-card .actions{
  position: sticky;              /* keep actions visible when scrolling */
  bottom: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,0.35)) , rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: .5rem;
  padding-top: .6rem;
  display: flex;                 /* layout buttons nicely */
  flex-wrap: wrap;               /* wrap on small screens */
  gap: .5rem;                    /* spacing between buttons */
  justify-content: flex-end;     /* align to end */
}

/* Copy buttons - blue background with white text and icon */
#addrCopy,
button[id*="copy"],
button[class*="copy"],
.copy-btn{
  font-weight: 700;
  background: #007AFF !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3);
}
/* Copy button hover effects */
#addrCopy:hover,
button[id*="copy"]:hover,
button[class*="copy"]:hover,
.copy-btn:hover{ 
  filter: brightness(1.1); 
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}
/* Ping Check as amber accent */
#addrCheck{
  background: #fbbf24;          /* nicer amber/yellow */
  color: #000;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.25);
}
#addrCheck:hover{ filter: brightness(1.07); }