:root {
             --accent: #fa6464;
             --bg-dark: #070707;
             --card-bg: #ffffff;
             --muted: #7a7a7a;
             --glass: rgba(255, 255, 255, 0.06);
             --glass-border: rgba(255, 255, 255, 0.08);
             --text-dark: #111;
             --radius: 14px;
             --transition: 250ms ease;
         }
         
         @font-face {
             font-family: Vazirmatn;
             src: url("../../fonts/Vazir-Light.ttf");
             font-weight: normal;
         }
         
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
         
         html,
         body {
             height: 100%;
         }
         
         body {
             font-family: "Vazirmatn", sans-serif;
             background-color: #ebe8e8;
             overflow-x: hidden;
         }
         /* Container centering */
         
         .page-root {
             display: block;
         }
         /* Card */
         
         @media (min-width: 576px) {
             .main-card {
                 max-width: 1250px;
                 width: 100%;
             }
         }
         
         @media (max-width: 576px) {
             .main-card {
                 max-width: 1250px;
                 width: 100%;
             }
         }
         
         .card {
             background: var(--card-bg);
             border-radius: calc(var(--radius) + 4px);
             overflow: visible;
             box-shadow: 0 12px 50px rgba(2, 2, 2, 0.45);
             border: none;
             width: 100%;
         }
         /* Accent bar */
         
         .accent-bar {
             height: 6px;
             background: linear-gradient(90deg, var(--accent), #ff8b8b, var(--accent));
         }
         /* Header */
         
         @media (max-width: 576px) {
             .header-row {
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 0.6rem;
             }
             .header-right {
                 width: 100%;
                 justify-content: space-between;
             }
             .header-left,
             .header-right {
                 width: 100%;
             }
             .flag {
                 width: 32px;
                 height: 30px;
             }
             .avatar-circle {
                 width: 120px;
                 height: 120px;
                 border-width: 4px;
             }
             .btn-outline-secondary {
                 padding: 10px !important;
             }
             .btn-accent {
                 padding: 10px !important;
             }
         }
         
         .header-row .page-title {
             font-weight: 700;
             font-size: 1.8rem;
             color: #222;
             position: relative;
             display: inline-block;
             letter-spacing: -0.5px;
             text-transform: capitalize;
             padding: 0.25rem 0.5rem;
             background: linear-gradient(90deg, #860f1b, #080707);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
         
         .header-row .page-title::after {
             content: "";
             position: absolute;
             left: 50%;
             bottom: -6px;
             width: 100%;
             height: 2px;
             background: linear-gradient(90deg, #b02a37, transparent);
             transform: translateX(-50%);
             border-radius: 3px;
             opacity: 0.8;
             transition: all 0.4s ease;
         }
         
         .header-row .page-title:hover::after {
             width: 80%;
             opacity: 1;
         }
         
         .header-row .page-title {
             font-size: 18px;
         }
         
         .header-right {
             display: flex;
             align-items: center;
             gap: 0.6rem;
         }
         
         .flag {
             width: 28px;
             height: 28px;
             border-radius: 50%;
             border: 1px solid #ddd;
             object-fit: cover;
         }
         /* Signout button */
         
         .signout-btn {
             background-color: transparent;
             border: 1px solid #ccc;
             color: #444;
             font-size: 0.9rem;
             padding: 0.35rem 0.75rem;
             transition: all 0.2s;
         }
         
         .signout-btn:hover {
             background-color: #f8f8f8;
             border-color: #aaa;
         }
         
         .btn-login {
             background: linear-gradient(90deg, #2779d0, #9eb1f9);
             border: none;
             color: #fff;
         }
         
         .btn-login:hover {
             background: linear-gradient(90deg, #0263cb, #849efd);
             color: #fff;
         }
         
         .btn-register {
             background: linear-gradient(90deg, var(--accent), #ff8b8b);
             border: none;
             color: #fff;
         }
         
         .btn-register:hover {
             background: linear-gradient(90deg, #f32e2e, #ff8b8b);
             color: #fff;
         }
         /* Stepper wrapper */
         
         .stepper-wrap {
             padding: 0.6rem 0 1rem 0;
             margin-bottom: 0.6rem;
         }
         
         .stepper-inner {
             position: relative;
             padding: 1rem 0;
             overflow-x: auto;
             overflow-y: hidden;
             white-space: nowrap;
             -webkit-overflow-scrolling: touch;
         }
         
         .step-line {
             position: absolute;
             left: 6%;
             right: 6%;
             top: 35%;
             height: 2px;
             border-radius: 20px;
             background: linear-gradient( 90deg, rgba(255, 255, 255, 0.2) 0%, var(--accent) 15%, rgba(255, 255, 255, 0.2) 30%, var(--accent) 45%, rgba(255, 255, 255, 0.2) 60%, var(--accent) 75%, rgba(255, 255, 255, 0.2) 100%);
             background-size: 200% auto;
             box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.7), 0 0 30px rgba(var(--accent-rgb), 0.4), inset 0 0 6px rgba(255, 255, 255, 0.3);
             filter: brightness(1.2) contrast(1.05);
             animation: flowLine 5s linear infinite, glowShift 4s ease-in-out infinite;
             transform-origin: center;
             z-index: 1;
         }
         
         @keyframes flowLine {
             0% {
                 background-position: 200% center;
             }
             100% {
                 background-position: 0% center;
             }
         }
         
         @keyframes glowShift {
             0%,
             100% {
                 box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.6), 0 0 30px rgba(var(--accent-rgb), 0.3), inset 0 0 6px rgba(255, 255, 255, 0.3);
             }
             50% {
                 box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.9), 0 0 40px rgba(var(--accent-rgb), 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
             }
         }
         
         .stepper {
             position: relative;
             z-index: 2;
             gap: 0.3rem;
             justify-content: space-between;
             align-items: center;
             display: inline-flex;
             flex-wrap: nowrap;
             min-width: max-content;
         }
         
         .step-item {
             flex: 0 0 auto;
             width: 100px;
             min-width: 100px;
             margin: 0 6px;
             text-align: center;
             position: relative;
             display: flex;
             flex-direction: column;
             align-items: center;
         }
         
         .step-caption {
             margin-top: 0.5rem;
             font-size: 0.82rem;
             color: #444;
             font-weight: 600;
         }
         
         .step-circle {
             display: flex;
             align-items: center;
             justify-content: center;
             width: 60px;
             height: 60px;
             border-radius: 50%;
             border: 2px solid #fa6464;
             color: #fa6464;
             font-weight: 600;
             font-size: 1.1rem;
             background: #fff;
             transition: all 0.3s ease;
             position: relative;
         }
         
         .step-circle.completed {
             background: linear-gradient(90deg, var(--accent), #ff8b8b);
             color: #fff;
             box-shadow: 0 0 20px rgba(250, 100, 100, 0.3);
             transform: translateY(-6px);
             border: none;
         }
         
         .step-circle.active {
             background: linear-gradient(90deg, var(--accent), #ff8b8b);
             color: var(--card-bg);
             box-shadow: 0 10px 28px rgba(250, 100, 100, 0.09);
             transform: translateY(-4px);
         }
         
         .step-circle.active::after {
             content: "";
             position: absolute;
             inset: -7px;
             border-radius: 50%;
             border: 3px dashed rgba(255, 147, 147, 0.6);
             animation: rotateRing 5s linear infinite;
             opacity: 1;
             z-index: -1;
             filter: drop-shadow(0 0 10px #ff9393);
         }
         /* .step-circle.active {
    background: linear-gradient(180deg, #fff, #fff);
    color: var(--accent);
    box-shadow: 0 10px 28px rgba(250, 100, 100, 0.09);
    transform: translateY(-4px);
} */
         
         @media (max-width: 992px) {
             .stepper-inner {
                 overflow-x: auto;
                 overflow-y: hidden;
                 -webkit-overflow-scrolling: touch;
                 position: relative !important;
             }
             .stepper {
                 display: flex;
                 flex-wrap: nowrap !important;
                 justify-content: flex-start !important;
             }
         }
         
         @media (max-width: 992px) {
             .step-line {
                 display: block;
                 width: 87vh;
             }
         }
         
         @media (max-width: 500px) {
             .step-item {
                 margin: 0px;
                 margin-left: -10px;
             }
             .step-caption {
                 font-size: 12px;
             }
         }
         /* Alert bar */
         
         .alert-important {
             background: linear-gradient(90deg, var(--accent), #ff8b8b);
             color: #fff;
             border-radius: 10px;
             padding: 0.85rem 1rem;
             box-shadow: 0 10px 34px rgba(250, 100, 100, 0.12);
         }
         
         .err-span {
             font-size: 12px;
         }
         /* loader */
         
         #page-loader {
             position: fixed;
             inset: 0;
             z-index: 99999;
             background: rgba(255, 255, 255, 0.658);
             backdrop-filter: blur(8px);
             display: flex;
             align-items: center;
             justify-content: center;
             transition: .4s ease;
             top: -25px !important;
         }
         
         .loader-box {
             text-align: center;
         }
         
         .loader-ring {
             width: 90px;
             height: 90px;
             border-radius: 50%;
             position: relative;
             animation: rotate 1s linear infinite;
         }
         
         .loader-ring::before {
             content: '';
             position: absolute;
             inset: 0;
             border-radius: 50%;
             padding: 5px;
             background: linear-gradient( 90deg, var(--accent), #ff8b8b);
             -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
             -webkit-mask-composite: xor;
             mask-composite: exclude;
         }
         
         .loader-ring::after {
             content: '';
             position: absolute;
             width: 18px;
             height: 18px;
             border-radius: 50%;
             top: 0;
             left: 50%;
             transform: translateX(-50%);
             background: linear-gradient( 90deg, var(--accent), #ff8b8b);
             box-shadow: 0 0 20px rgba(255, 139, 139, .5);
         }
         
         .loader-text {
             margin-top: 20px;
             font-size: 14px;
             font-weight: 600;
             letter-spacing: 2px;
             color: #666;
         }
         
         .loader-hide {
             opacity: 0;
             visibility: hidden;
         }
         
         @keyframes rotate {
             from {
                 transform: rotate(0deg);
             }
             to {
                 transform: rotate(360deg);
             }
         }

         @media (max-width: 575.98px) {
             .stepper-wrap {
                 padding: 0 0 0.45rem;
                 margin-bottom: 0.25rem;
             }

             .stepper-inner {
                 padding: 12px 8px 8px;
                 scroll-behavior: smooth;
                 scroll-snap-type: x proximity;
                 scrollbar-width: none;
                 overscroll-behavior-x: contain;
             }

             .stepper-inner::-webkit-scrollbar {
                 display: none;
             }

             .stepper {
                 gap: 0 !important;
                 position: relative;
             }

             .stepper::before {
                 content: "";
                 position: absolute;
                 top: 24px;
                 right: 39px;
                 left: 39px;
                 height: 2px;
                 background: rgba(250, 100, 100, 0.35);
                 z-index: -1;
             }

             .step-line {
                 display: none;
             }

             .step-item {
                 width: 78px;
                 min-width: 78px;
                 margin: 0;
                 scroll-snap-align: center;
             }

             .step-circle {
                 width: 48px;
                 height: 48px;
                 font-size: 0.95rem;
             }

             .step-circle.active::after {
                 inset: -5px;
                 border-width: 2px;
             }

             .step-caption {
                 width: 74px;
                 min-height: 27px;
                 margin-top: 6px;
                 font-size: 10px;
                 line-height: 1.35;
                 white-space: normal;
                 overflow-wrap: anywhere;
             }

             .step-actions {
                 width: 100%;
                 flex-wrap: nowrap !important;
                 gap: 8px !important;
             }

             .step-actions > .btn {
                 flex: 1 1 0;
                 min-width: 0;
                 min-height: 44px;
                 padding: 9px 10px !important;
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
                 text-align: center;
             }
         }