@import url('https://v1.fontapi.ir/css/Samim'); * {font-family: 'samim';margin: 0;padding: 0;box-sizing: border-box;} body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;background: #e0e5ec;min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 20px;line-height: 1.6;} .login-container { width: 100%;max-width: 420px;} .login-card { background: #e0e5ec;border-radius: 30px;padding: 50px 40px;box-shadow: 20px 20px 60px #bec3cf, -20px -20px 60px #ffffff;position: relative;transition: all 0.3s ease;} .login-card:hover { transform: translateY(-5px);} .login-header { text-align: center;margin-bottom: 40px;} .neu-icon { width: 80px;height: 80px;margin: 0 auto 24px;background: #e0e5ec;border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 8px 8px 20px #bec3cf, -8px -8px 20px #ffffff, inset 0 0 0 #bec3cf, inset 0 0 0 #ffffff;transition: all 0.3s ease;} .neu-icon:hover { box-shadow: 4px 4px 10px #bec3cf, -4px -4px 10px #ffffff, inset 4px 4px 10px #bec3cf, inset -4px -4px 10px #ffffff;} .icon-inner { width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;color: #6c7293;} .icon-inner svg { width: 100%;height: 100%;} .login-header h2 { color: #3d4468;font-size: 2rem;font-weight: 600;margin-bottom: 8px;} .login-header p { color: #9499b7;font-size: 15px;font-weight: 400;} .form-group { margin-bottom: 28px;position: relative;} .neu-input { position: relative;background: #e0e5ec;border-radius: 15px;box-shadow: inset 8px 8px 16px #bec3cf, inset -8px -8px 16px #ffffff;transition: all 0.3s ease;} .neu-input:focus-within { box-shadow: inset 4px 4px 8px #bec3cf, inset -4px -4px 8px #ffffff;} .neu-input input { width: 100%;background: transparent;border: none;padding: 20px 24px;padding-left: 55px;color: #3d4468;font-size: 16px;font-weight: 500;outline: none;transition: all 0.3s ease;} .neu-input input::placeholder { color: transparent;} .neu-input label { position: absolute;left: 55px;top: 50%;transform: translateY(-50%);color: #9499b7;font-size: 16px;font-weight: 400;pointer-events: none;transition: all 0.3s ease;} .neu-input input:focus + label, .neu-input input:not(:placeholder-shown) + label { top: 8px;font-size: 12px;color: #6c7293;transform: translateY(0);} .input-icon { position: absolute;left: 20px;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;color: #9499b7;transition: all 0.3s ease;} .input-icon svg { width: 100%;height: 100%;} .neu-input:focus-within .input-icon { color: #6c7293;} .password-group { padding-right: 50px;} .neu-toggle { position: absolute;right: 15px;top: 50%;transform: translateY(-50%);background: #e0e5ec;border: none;width: 35px;height: 35px;border-radius: 10px;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #9499b7;box-shadow: 4px 4px 10px #bec3cf, -4px -4px 10px #ffffff;transition: all 0.3s ease;} .neu-toggle:hover { color: #6c7293;} .neu-toggle:active { box-shadow: inset 2px 2px 5px #bec3cf, inset -2px -2px 5px #ffffff;} .neu-toggle svg { width: 18px;height: 18px;} .eye-closed { display: none;} .neu-toggle.show-password .eye-open { display: none;} .neu-toggle.show-password .eye-closed { display: block;} .form-options { display: flex;justify-content: space-between;align-items: center;margin-bottom: 35px;flex-wrap: wrap;gap: 16px;} .remember-wrapper { display: flex;align-items: center;cursor: pointer;} .remember-wrapper input[type='checkbox'] { display: none;} .checkbox-label { display: flex;align-items: center;gap: 12px;cursor: pointer;user-select: none;color: #6c7293;font-size: 14px;font-weight: 500;} .neu-checkbox { width: 22px;height: 22px;background: #e0e5ec;border-radius: 6px;display: flex;align-items: center;justify-content: center;box-shadow: 3px 3px 8px #bec3cf, -3px -3px 8px #ffffff;transition: all 0.3s ease;position: relative;overflow: hidden;} .remember-wrapper input[type='checkbox']:checked + .checkbox-label .neu-checkbox { box-shadow: inset 2px 2px 5px #bec3cf, inset -2px -2px 5px #ffffff;} .neu-checkbox svg { width: 14px;height: 14px;color: #00c896;opacity: 0;transform: scale(0);transition: all 0.3s ease;} .remember-wrapper input[type='checkbox']:checked + .checkbox-label .neu-checkbox svg { opacity: 1;transform: scale(1);} .forgot-link { color: #6c7293;text-decoration: none;font-size: 14px;font-weight: 500;transition: color 0.3s ease;} .forgot-link:hover { color: #3d4468;} .neu-button { width: 100%;background: #e0e5ec;border: none;border-radius: 15px;padding: 18px 32px;color: #3d4468;font-size: 16px;font-weight: 600;cursor: pointer;position: relative;margin-bottom: 30px;box-shadow: 8px 8px 20px #bec3cf, -8px -8px 20px #ffffff;transition: all 0.3s ease;overflow: hidden;} .neu-button::before { content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left 0.5s ease;} .neu-button:hover { transform: translateY(-2px);box-shadow: 12px 12px 30px #bec3cf, -12px -12px 30px #ffffff;} .neu-button:hover::before { left: 100%;} .neu-button:active { transform: translateY(0);box-shadow: inset 4px 4px 10px #bec3cf, inset -4px -4px 10px #ffffff;} .btn-text { position: relative;z-index: 1;transition: opacity 0.3s ease;} .btn-loader { position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;transition: opacity 0.3s ease;} .neu-spinner { width: 20px;height: 20px;border: 3px solid #bec3cf;border-top: 3px solid #6c7293;border-radius: 50%;animation: spin 1s linear infinite;} @keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } .neu-button.loading .btn-text { opacity: 0;} .neu-button.loading .btn-loader { opacity: 1;} .divider { display: flex;align-items: center;margin: 30px 0;gap: 16px;} .divider-line { flex: 1;height: 2px;background: linear-gradient(90deg, transparent, #bec3cf, transparent);} .divider span { color: #9499b7;font-size: 13px;font-weight: 500;text-transform: uppercase;letter-spacing: 1px;} .social-login { display: flex;justify-content: center;gap: 16px;margin-bottom: 30px;} .neu-social { width: 50px;height: 50px;background: #e0e5ec;border: none;border-radius: 15px;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #6c7293;box-shadow: 6px 6px 15px #bec3cf, -6px -6px 15px #ffffff;transition: all 0.3s ease;} .neu-social:hover { transform: translateY(-2px);box-shadow: 8px 8px 20px #bec3cf, -8px -8px 20px #ffffff;} .neu-social:active { transform: translateY(0);box-shadow: inset 3px 3px 8px #bec3cf, inset -3px -3px 8px #ffffff;} .neu-social svg { width: 22px;height: 22px;} .signup-link { text-align: center;} .signup-link p { color: #9499b7;font-size: 14px;} .signup-link a { color: #6c7293;text-decoration: none;font-weight: 600;transition: color 0.3s ease;} .signup-link a:hover { color: #3d4468;} .error-message { color: #ff3b5c;font-size: 12px;font-weight: 500;margin-top: 8px;margin-left: 20px;opacity: 0;transform: translateY(-10px);transition: all 0.3s ease;} .error-message.show { opacity: 1;transform: translateY(0);} .form-group.error .neu-input { box-shadow: inset 8px 8px 16px #ffb8c4, inset -8px -8px 16px #ffffff, 0 0 0 2px #ff3b5c;} .success-message { display: none;text-align: center;padding: 40px 20px;opacity: 0;transform: translateY(20px);transition: all 0.5s ease;} .success-message.show { display: block;opacity: 1;transform: translateY(0);} .success-message .neu-icon { background: #e0e5ec;color: #00c896;margin-bottom: 20px;} .success-message h3 { color: #3d4468;font-size: 1.5rem;margin-bottom: 8px;} .success-message p { color: #9499b7;font-size: 14px;} @media (max-width: 480px) { body { padding: 16px;} .login-card { padding: 35px 25px;border-radius: 20px;} .login-header h2 { font-size: 1.75rem;} .neu-input input { padding: 18px 20px;padding-left: 50px;} .neu-input label { left: 50px;} .form-options { flex-direction: column;align-items: flex-start;gap: 16px;} }