@import url(plugins/line-icons.css);
 @import url(plugins/iconfont.css);
 @import url(plugins/font-awesome.css);
 @import url(plugins/bootstrap-icons.css);

 @font-face {
     font-family: IRANSans;
     src: url('fonts/IRANSansWeb/IRANSansWeb.eot');
     src: url('fonts/IRANSansWeb/IRANSansWeb.eot') format('embedded-opentype'), url('fonts/IRANSansWeb/IRANSansXFaNum-Medium.woff') format('woff'), url('fonts/IRANSansWeb/IRANSansWeb.ttf') format('truetype');
     font-weight: 400;
     font-style: normal
 }

 @font-face {
     font-family: IRANSansXDemiBold;
     src: url('fonts/IRANSansWeb/IRANSansWeb.eot');
     src: url('fonts/IRANSansWeb/IRANSansWeb.eot') format('embedded-opentype'), url('fonts/IRANSansWeb/IRANSansXFaNum-DemiBold.woff') format('woff'), url('fonts/IRANSansWeb/IRANSansWeb.ttf') format('truetype');
     font-weight: 400;
     font-style: normal
 }

 :root {
     --bg-1: #ffffff;
     --bg-2: #f8fafc;
     --bg-3: #f1f5f9;
     --card: #ffffff;
     --border: #e5e7eb;
     --border-2: #f1f5f9;
     --text: #0f172a;
     --heading: #020617;
     --muted: #64748b;
     --soft: #94a3b8;
     --primary: #0ea5e9;
     --primary-dark: #0284c7;
     --secondary: #8b5cf6;
     --secondary-dark: #7c3aed;
     --success: #10b981;
     --success-soft: #d1fae5;
     --danger: #ef4444;
     --danger-soft: #fee2e2;
     --warning: #f59e0b;
     --warning-soft: #fef3c7;
     --info: #06b6d4;
     --info-soft: #cffafe;
     --primaryfont: 'IRANSans', sans-serif;
     --grad-1: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
     --grad-2: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
     --grad-3: linear-gradient(135deg, #ef4444 0%, #8b5cf6 100%);
     --grad-soft-1: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
     --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
     --shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
     --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
     --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.1);
 }

 * {
     font-family: 'IRANSans', sans-serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: var(--headingcolor);
     font-weight: 500;
     text-transform: capitalize;
     font-family: 'IRANSansXDemiBold', sans-serif;
 }

 html,
 body {
     background: var(--bg-2);
     color: var(--text);
     scroll-behavior: smooth;
     font-family: var(--primaryfont);
 }

 body {
     background:
         radial-gradient(1200px 600px at 10% -10%, rgba(14, 165, 233, 0.08), transparent 60%),
         radial-gradient(900px 500px at 110% 10%, rgba(139, 92, 246, 0.06), transparent 60%),
         var(--bg-2);
     min-height: 100vh;
 }

 a {
     text-decoration: none;
 }

 ::selection {
     background: var(--primary);
     color: #fff;
 }

 /* ===== Scrollbar ===== */
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }

 ::-webkit-scrollbar-track {
     background: var(--bg-3);
 }

 ::-webkit-scrollbar-thumb {
     background: linear-gradient(var(--primary), var(--secondary));
     border-radius: 8px;
 }

 /* ===== Navbar ===== */
 .navbar-custom {
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--border);
     transition: 0.3s;
     z-index: 1030;
 }

 .navbar-custom.scrolled {
     background: rgba(255, 255, 255, 0.98);
     box-shadow: var(--shadow-sm);
 }

 .navbar-brand {
     font-weight: 900;
     font-size: 1.5rem;
     background: var(--grad-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .navbar-brand i {
     background: var(--grad-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .nav-link {
     color: #475569 !important;
     font-weight: 500;
     transition: 0.2s;
     position: relative;
 }

 .nav-link:hover {
     color: var(--primary) !important;
 }

 .nav-link.active {
     color: var(--primary) !important;
 }

 .nav-link.active::after {
     content: "";
     position: absolute;
     bottom: -6px;
     right: 0;
     left: 0;
     height: 2px;
     background: var(--grad-1);
     border-radius: 2px;
 }

 /* ===== Buttons ===== */
 .btn-grad {
     background: var(--grad-1);
     color: #fff;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     padding: 0.7rem 1.4rem;
     transition: 0.25s;
     box-shadow: 0 6px 18px rgba(14, 165, 233, 0.3);
 }

 .btn-grad:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 24px rgba(14, 165, 233, 0.45);
     color: #fff;
 }

 .btn-outline-grad {
     background: #fff;
     border: 1.5px solid var(--border);
     color: var(--text);
     font-weight: 600;
     border-radius: 12px;
     padding: 0.6rem 1.3rem;
     transition: 0.25s;
 }

 .btn-outline-grad:hover {
     background: var(--grad-1);
     color: #fff;
     border-color: transparent;
     transform: translateY(-2px);
 }

 /* ===== Hero ===== */
 .hero {
     position: relative;
     padding: 7rem 0 5rem;
     overflow: hidden;
     background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%);
 }

 .hero h1 {
     font-size: clamp(2rem, 5vw, 3.6rem);
     font-weight: 900;
     line-height: 1.2;
     color: var(--heading);
 }

 .hero h1 .grad {
     background: var(--grad-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .hero p.lead {
     color: var(--muted);
     max-width: 620px;
     font-size: 1.1rem;
     line-height: 1.8;
 }

 .hero-illust {
     background: var(--grad-soft-1);
     border-radius: 24px;
     padding: 1rem;
     position: relative;
     border: 1px solid var(--border);
 }

 .blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     opacity: 0.4;
     z-index: 0;
 }

 .blob.b1 {
     width: 220px;
     height: 220px;
     background: #0ea5e9;
     top: -40px;
     right: -40px;
 }

 .blob.b2 {
     width: 260px;
     height: 260px;
     background: #8b5cf6;
     bottom: -60px;
     left: -60px;
 }

 /* ===== Stats ===== */
 .stats-bar {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 1.2rem 1.5rem;
     box-shadow: var(--shadow);
 }

 .stat-item .label {
     color: var(--muted);
     font-size: 0.85rem;
 }

 .stat-item .value {
     font-weight: 800;
     font-size: 1.15rem;
     color: var(--heading);
 }

 /* ===== Ticker ===== */
 .ticker-wrap {
     background: var(--heading);
     border-block: 1px solid rgba(255, 255, 255, 0.1);
     overflow: hidden;
     padding: 0.7rem 0;
     position: relative;
 }

 .ticker {
     display: flex;
     gap: 2.5rem;
     animation: ticker 40s linear infinite;
     width: max-content;
     color: #fff;
 }

 @keyframes ticker {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 .ticker-item {
     display: flex;
     align-items: center;
     gap: 0.6rem;
     white-space: nowrap;
     font-weight: 600;
 }

 .ticker-item img {
     width: 22px;
     height: 22px;
 }

 .ticker-item b {
     color: #fff;
 }

 .ticker-item .up {
     color: #34d399;
 }

 .ticker-item .down {
     color: #f87171;
 }

 /* ===== Section ===== */
 section {
     padding: 5rem 0;
     position: relative;
 }

 .section-title {
     font-size: clamp(1.6rem, 3vw, 2.4rem);
     font-weight: 900;
     margin-bottom: 0.5rem;
     color: var(--heading);
 }

 .section-sub {
     color: var(--muted);
     margin-bottom: 3rem;
 }

 /* ===== Glass Card (حالا به معنی کارت سفید مدرن) ===== */
 .glass {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 18px;
     transition: 0.3s;
     overflow: hidden;
     position: relative;
     box-shadow: var(--shadow-sm);
 }

 .glass:hover {
     border-color: rgba(14, 165, 233, 0.3);
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 /* ===== Prices Table ===== */
 .table-custom {
     color: var(--text);
     margin: 0;
 }

 .table-custom thead th {
     background: var(--bg-2);
     color: var(--muted);
     font-weight: 700;
     font-size: 0.85rem;
     border-bottom: 1px solid var(--border);
     padding: 0.9rem;
 }

 .table-custom tbody td {
     padding: 0.85rem;
     border-bottom: 1px solid var(--border-2);
     vertical-align: middle;
     color: var(--text);
 }

 .table-custom tbody tr:hover {
     background: var(--bg-2);
 }

 .table-custom tbody tr:last-child td {
     border-bottom: none;
 }

 .coin-icon {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     margin-inline-end: 0.6rem;
 }

 .up {
     color: var(--success);
     font-weight: 700;
 }

 .down {
     color: var(--danger);
     font-weight: 700;
 }

 .badge-soft {
     background: var(--success-soft);
     color: #047857;
     padding: 0.3rem 0.7rem;
     border-radius: 8px;
     font-size: 0.8rem;
     font-weight: 700;
 }

 .badge-soft-red {
     background: var(--danger-soft);
     color: #b91c1c;
     padding: 0.3rem 0.7rem;
     border-radius: 8px;
     font-size: 0.8rem;
     font-weight: 700;
 }

 /* ===== Features ===== */
 .feature-icon {
     width: 60px;
     height: 60px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--grad-1);
     color: #fff;
     font-size: 1.6rem;
     margin-bottom: 1rem;
     box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
 }

 .feature-icon.v2 {
     background: var(--grad-2);
     box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
 }

 .feature-icon.v3 {
     background: var(--grad-3);
     box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
 }

 /* ===== Plans ===== */
 .plan-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 22px;
     padding: 2rem;
     transition: 0.3s;
     position: relative;
     overflow: hidden;
     height: 100%;
     box-shadow: var(--shadow-sm);
 }

 .plan-card.popular {
     border: 2px solid var(--primary);
     transform: scale(1.03);
     box-shadow: 0 20px 40px rgba(14, 165, 233, 0.15);
 }

 .plan-card.popular::before {
     content: "پیشنهادی";
     position: absolute;
     top: 18px;
     left: -30px;
     background: var(--grad-1);
     color: #fff;
     padding: 0.3rem 2.5rem;
     transform: rotate(45deg);
     font-weight: 800;
     font-size: 0.8rem;
 }

 .plan-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow-xl);
 }

 .plan-card.popular:hover {
     transform: scale(1.03) translateY(-6px);
 }

 .plan-price {
     font-size: 2.5rem;
     font-weight: 900;
     background: var(--grad-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .plan-features li {
     padding: 0.5rem 0;
     color: #475569;
     border-bottom: 1px dashed var(--border);
 }

 .plan-features li:last-child {
     border-bottom: none;
 }

 .plan-features li i {
     color: var(--success);
     margin-inline-end: 0.5rem;
 }

 /* ===== News ===== */
 .news-card .news-img {
     height: 200px;
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .news-card .news-img::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(15, 23, 42, 0.4), transparent 50%);
 }

 .news-card .news-tag {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 2;
     background: #fff;
     color: var(--primary);
     padding: 0.3rem 0.8rem;
     border-radius: 8px;
     font-size: 0.75rem;
     font-weight: 700;
     box-shadow: var(--shadow-sm);
 }

 .news-card .news-body {
     padding: 1.2rem;
 }

 .news-card h6 {
     font-weight: 800;
     line-height: 1.6;
     margin-bottom: 0.6rem;
     color: var(--heading);
 }

 .news-card .meta {
     color: var(--muted);
     font-size: 0.85rem;
 }

 /* ===== Listings ===== */
 .listing-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 1rem;
     display: flex;
     align-items: center;
     gap: 1rem;
     transition: 0.25s;
     box-shadow: var(--shadow-sm);
 }

 .listing-card:hover {
     border-color: rgba(16, 185, 129, 0.4);
     transform: translateY(-3px);
     box-shadow: var(--shadow);
 }

 .listing-card img {
     width: 42px;
     height: 42px;
     border-radius: 50%;
 }

 /* ===== Exchanges ===== */
 .exchange-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 18px;
     padding: 1.5rem;
     text-align: center;
     transition: 0.3s;
     height: 100%;
     box-shadow: var(--shadow-sm);
 }

 .exchange-card:hover {
     border-color: rgba(14, 165, 233, 0.3);
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .exchange-card .ex-logo {
     width: 64px;
     height: 64px;
     border-radius: 16px;
     background: var(--bg-2);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 0.8rem;
     font-size: 1.8rem;
     transition: 0.3s;
 }

 .exchange-card:hover .ex-logo {
     transform: scale(1.1);
 }

 /* ===== Filters Section ===== */
 .filter-pill {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 1rem 1.2rem;
     display: flex;
     align-items: center;
     gap: 0.8rem;
     transition: 0.25s;
     cursor: pointer;
     box-shadow: var(--shadow-sm);
 }

 .filter-pill:hover {
     border-color: var(--primary);
     background: var(--bg-2);
     transform: translateY(-3px);
     box-shadow: var(--shadow);
 }

 .filter-pill i {
     font-size: 1.4rem;
     color: var(--primary);
 }

 /* ===== Footer ===== */
 footer {
     background: var(--heading);
     color: #cbd5e1;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     padding: 4rem 0 1.5rem;
 }

 footer h6 {
     color: #fff;
     font-weight: 800;
     margin-bottom: 1.2rem;
 }

 footer a {
     color: #94a3b8;
     transition: 0.2s;
 }

 footer a:hover {
     color: var(--primary);
 }

 .social-link {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.08);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     margin-inline-end: 0.4rem;
     transition: 0.2s;
 }

 .social-link:hover {
     background: var(--grad-1);
     color: #fff;
     transform: translateY(-2px);
 }

 /* ===== Animations ===== */
 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }
 }

 .float {
     animation: float 4s ease-in-out infinite;
 }

 .fade-up {
     opacity: 0;
     transform: translateY(20px);
     transition: 0.7s;
 }

 .fade-up.show {
     opacity: 1;
     transform: translateY(0);
 }

 /* ===== Responsive ===== */
 @media (max-width: 768px) {
     .hero {
         padding: 5rem 0 3rem;
     }

     .plan-card.popular {
         transform: none;
     }
 }
 /* ===== Auth Pages ===== */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}

.auth-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.1;
  animation: float 8s ease-in-out infinite;
}

.blob-1 {
  width: 400px;
  height: 400px;
  background: var(--grad-1);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.blob-2 {
  width: 350px;
  height: 350px;
  background: var(--grad-3);
  bottom: -80px;
  left: -80px;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -30px); }
}

.auth-card {
  width: 100%;
  max-width: 440px;
  border-radius: 28px !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  padding: 2rem 1.8rem;
}

.glass-card .ant-card-body {
  padding: 0 !important;
}

.gradient-text {
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-auth {
  background: var(--grad-1) !important;
  border: none !important;
  height: 48px;
  border-radius: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(14,165,233,0.3);
}
.btn-auth:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14,165,233,0.45);
}

.social-btn {
  width: 48px !important;
  height: 48px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  transition: 0.25s !important;
  color: var(--text) !important;
  background: #fff !important;
}
.social-btn:hover {
  border-color: var(--primary) !important;
  background: var(--grad-soft-1) !important;
  color: var(--primary) !important;
  transform: translateY(-3px);
}

/* ورودی‌های Ant Design */
.ant-input,
.ant-input-password {
  border-radius: 12px !important;
  border: 1.5px solid var(--border) !important;
  padding: 0.7rem 1rem !important;
}
.ant-input:focus,
.ant-input-password:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,0.15) !important;
}
.ant-input-prefix {
  color: var(--primary) !important;
}

.ant-checkbox-wrapper {
  color: var(--muted) !important;
}

@media (max-width: 576px) {
  .auth-card {
    padding: 1.5rem 1rem;
  }
  .blob-1 { width: 250px; height: 250px; }
  .blob-2 { width: 200px; height: 200px; }
}