@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Vazirmatn', sans-serif;
            background: #0a0a12;
            color: #e2e8f0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-image:
                radial-gradient(ellipse at 20% 50%, rgba(124,58,237,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(236,72,153,0.1) 0%, transparent 60%),
                radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 50%);
            animation: bgShift 12s ease-in-out infinite;
        }
        @keyframes bgShift {
            0%, 100% { background-size: 100% 100%; }
            50% { background-size: 120% 120%; }
        }
        
        .particles {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 0;
        }
        .particle {
            position: absolute;
            width: 3px; height: 3px;
            background: rgba(124,58,237,0.4);
            border-radius: 50%;
            animation: floatUp 6s ease-in infinite;
        }
        @keyframes floatUp {
            0% { transform: translateY(100vh) scale(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 0.5; }
            100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
        }
        
        .login-container {
            position: relative; z-index: 1;
            width: 90%; max-width: 440px;
        }
        
        .login-card {
            background: linear-gradient(170deg, rgba(30,30,50,0.95) 0%, rgba(20,20,40,0.95) 100%);
            border: 1.5px solid rgba(124,58,237,0.2);
            border-radius: 28px;
            padding: 45px 35px;
            backdrop-filter: blur(40px);
            box-shadow:
                0 30px 80px rgba(0,0,0,0.5),
                0 0 0 1px rgba(255,255,255,0.03) inset,
                0 0 100px rgba(124,58,237,0.08);
            animation: cardIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(30px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .login-card::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(124,58,237,0.03) 0%, transparent 60%);
            animation: glowRotate 8s linear infinite;
            pointer-events: none;
        }
        @keyframes glowRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .logo-area {
            text-align: center; margin-bottom: 25px; position: relative; z-index: 1;
        }
        .logo-icon {
            font-size: 4em;
            animation: robotFloat 3s ease-in-out infinite;
            display: inline-block;
            filter: drop-shadow(0 10px 30px rgba(124,58,237,0.3));
        }
        @keyframes robotFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-8px) rotate(-3deg); }
            75% { transform: translateY(-4px) rotate(3deg); }
        }
        .logo-title {
            font-size: 1.8em; font-weight: 900;
            background: linear-gradient(135deg, #a78bfa, #f472b6, #a78bfa);
            background-size: 200% auto;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            animation: titleShine 3s ease-in-out infinite;
            margin-top: 5px;
        }
        @keyframes titleShine {
            0%, 100% { background-position: 0% center; }
            50% { background-position: 200% center; }
        }
        .logo-subtitle {
            color: #64748b; font-size: 0.85em; margin-top: 5px;
        }
        
        .step-indicator {
            display: flex; justify-content: center; gap: 8px; margin-bottom: 25px; position: relative; z-index: 1;
        }
        .step-dot {
            width: 12px; height: 12px; border-radius: 50%;
            background: rgba(255,255,255,0.08);
            transition: all 0.4s;
        }
        .step-dot.active {
            background: linear-gradient(135deg, #7c3aed, #ec4899);
            box-shadow: 0 0 20px rgba(124,58,237,0.5);
            animation: pulse 2s ease-in-out infinite;
        }
        .step-dot.done {
            background: #10b981;
            box-shadow: 0 0 15px rgba(16,185,129,0.4);
        }
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.5); }
            50% { box-shadow: 0 0 35px rgba(124,58,237,0.8); }
        }
        .step-line {
            width: 40px; height: 2px; background: rgba(255,255,255,0.08); align-self: center; border-radius: 2px;
            transition: all 0.4s;
        }
        .step-line.done { background: #10b981; }
        
        .input-group { position: relative; z-index: 1; margin-bottom: 15px; }
        .input-group label {
            display: block; text-align: center; color: #94a3b8;
            font-size: 0.85em; margin-bottom: 10px;
        }
        .input-wrapper {
            position: relative;
        }
        .input-wrapper .icon {
            position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
            font-size: 1.1em; opacity: 0.4; pointer-events: none;
        }
        .input-wrapper input {
            width: 100%; padding: 15px 45px 15px 16px;
            background: rgba(255,255,255,0.04);
            border: 1.5px solid rgba(255,255,255,0.08);
            border-radius: 16px; color: #e2e8f0;
            font-size: 1em; font-family: inherit;
            text-align: center; letter-spacing: 3px;
            transition: all 0.3s;
        }
        .input-wrapper input:focus {
            outline: none;
            border-color: #7c3aed;
            box-shadow: 0 0 0 5px rgba(124,58,237,0.1);
            background: rgba(255,255,255,0.06);
        }
        .input-wrapper input::placeholder { color: #475569; letter-spacing: 1px; }
        
        .phone-display {
            text-align: center; color: #f59e0b; font-size: 0.9em; margin-bottom: 16px;
            background: rgba(245,158,11,0.08); padding: 10px;
            border-radius: 12px; border: 1px solid rgba(245,158,11,0.15);
        }
        .phone-display .number {
            font-weight: 700; font-size: 1.1em; color: #fbbf24;
        }
        .phone-display .edit-link {
            color: #7c3aed; cursor: pointer; font-size: 0.8em; text-decoration: underline;
        }
        
        .btn {
            width: 100%; padding: 15px;
            background: linear-gradient(135deg, #7c3aed, #ec4899);
            color: #fff; border: none; border-radius: 16px;
            cursor: pointer; font-size: 1.05em; font-weight: 700;
            font-family: inherit; margin-top: 5px;
            transition: all 0.3s; position: relative; z-index: 1;
            overflow: hidden;
        }
        .btn::after {
            content: '';
            position: absolute; top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            animation: btnShine 3s ease-in-out infinite;
        }
        @keyframes btnShine {
            0%, 100% { left: -100%; }
            50% { left: 100%; }
        }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(124,58,237,0.4); }
        .btn:active { transform: scale(0.97); }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        
        .resend-btn {
            width: 100%; padding: 12px;
            background: transparent; color: #64748b;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px; cursor: pointer;
            font-size: 0.85em; font-family: inherit;
            margin-top: 8px; transition: all 0.3s;
        }
        .resend-btn:hover { background: rgba(255,255,255,0.03); color: #94a3b8; }
        .resend-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        
        .msg {
            padding: 12px 16px; border-radius: 14px;
            text-align: center; font-size: 0.85em; margin-bottom: 12px;
            position: relative; z-index: 1;
            animation: msgIn 0.3s ease;
        }
        @keyframes msgIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .msg.error {
            background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
            color: #f87171;
        }
        .msg.success {
            background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
            color: #34d399;
        }
        .msg.locked {
            background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
            color: #fbbf24;
        }
        
        .attempts-bar {
            display: flex; justify-content: center; gap: 6px; margin-bottom: 15px;
        }
        .attempt-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.08);
            transition: all 0.3s;
        }
        .attempt-dot.used { background: #ef4444; }
        
        .footer-link {
            text-align: center; margin-top: 18px; position: relative; z-index: 1;
        }
        .footer-link a {
            color: #64748b; text-decoration: none; font-size: 0.82em;
            transition: color 0.3s;
        }
        .footer-link a:hover { color: #a78bfa; }
        
        .timer-text {
            color: #64748b; font-size: 0.78em; text-align: center; margin-top: 6px;
        }